import { createComponent, ref, computed, watch, onBeforeUnmount, cleanEvt, addEvt, getScrollTarget, h, Transition, getCurrentInstance, hSlot, stopAndPrevent, openBlock, createElementBlock, createBaseVNode, createVNode, Fragment, useQuasar, resolveComponent, QIcon, toDisplayString, createBlock, createCommentVNode, withCtx, QBtn, createTextVNode, renderList, normalizeStyle, pushScopeId, popScopeId, withDirectives, QSpinner, vShow } from './__federation_expose_Modules-a9c6a6fc.js';
import { QBreadcrumbs, QBreadcrumbsEl } from './QBreadcrumbs-d508f268.js';
import { QSpinnerGears } from './QSpinnerGears-56c57999.js';
import { useAnchorProps, useModelToggleProps, useTransitionProps, validatePosition, validateOffset, useModelToggleEmits, useTransition, useScrollTarget, useAnchor, useModelToggle, usePortal, removeClickOutside, setPosition, parsePosition, addClickOutside } from './QMenu-97111d1f.js';
import { useTick, useTimeout } from './use-timeout-6c040b87.js';
import { clearSelection } from './selection-d249e9bd.js';
import { QSelect, QField, QDialog } from './QSelect-b16471ac.js';
import { QTd, QTable, QTh } from './QTable-7f066ad6.js';
import { QTr } from './QTr-08515a17.js';
import { QChip } from './QChip-a1a7c82e.js';
import { useDarkProps, useDark } from './use-dark-b88930fe.js';
import { QInput } from './QInput-a81d9a9f.js';
import { _export_sfc } from './_plugin-vue_export-helper-e9a2c33e.js';
import { QCardSection, QCardActions, QCard, Papa, exportFile } from './export-file-845c68ae.js';
import { QSeparator } from './QSeparator-f2beec84.js';
import { ClosePopup } from './ClosePopup-7098b59f.js';

const QTooltip = createComponent({
  name: 'QTooltip',

  inheritAttrs: false,

  props: {
    ...useAnchorProps,
    ...useModelToggleProps,
    ...useTransitionProps,

    maxHeight: {
      type: String,
      default: null
    },
    maxWidth: {
      type: String,
      default: null
    },

    transitionShow: {
      default: 'jump-down'
    },
    transitionHide: {
      default: 'jump-up'
    },

    anchor: {
      type: String,
      default: 'bottom middle',
      validator: validatePosition
    },
    self: {
      type: String,
      default: 'top middle',
      validator: validatePosition
    },
    offset: {
      type: Array,
      default: () => [ 14, 14 ],
      validator: validateOffset
    },

    scrollTarget: {
      default: void 0
    },

    delay: {
      type: Number,
      default: 0
    },

    hideDelay: {
      type: Number,
      default: 0
    }
  },

  emits: [
    ...useModelToggleEmits
  ],

  setup (props, { slots, emit, attrs }) {
    let unwatchPosition, observer;

    const vm = getCurrentInstance();
    const { proxy: { $q } } = vm;

    const innerRef = ref(null);
    const showing = ref(false);

    const anchorOrigin = computed(() => parsePosition(props.anchor, $q.lang.rtl));
    const selfOrigin = computed(() => parsePosition(props.self, $q.lang.rtl));
    const hideOnRouteChange = computed(() => props.persistent !== true);

    const { registerTick, removeTick } = useTick();
    const { registerTimeout } = useTimeout();
    const { transitionProps, transitionStyle } = useTransition(props);
    const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);

    const { anchorEl, canShow, anchorEvents } = useAnchor({ showing, configureAnchorEl });

    const { show, hide } = useModelToggle({
      showing, canShow, handleShow, handleHide,
      hideOnRouteChange,
      processOnMount: true
    });

    Object.assign(anchorEvents, { delayShow, delayHide });

    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'tooltip');

    // if we're on mobile, let's improve the experience
    // by closing it when user taps outside of it
    if ($q.platform.is.mobile === true) {
      const clickOutsideProps = {
        anchorEl,
        innerRef,
        onClickOutside (e) {
          hide(e);

          // prevent click if it's on a dialog backdrop
          if (e.target.classList.contains('q-dialog__backdrop')) {
            stopAndPrevent(e);
          }

          return true
        }
      };

      const hasClickOutside = computed(() =>
        // it doesn't has external model
        // (null is the default value)
        props.modelValue === null
        // and it's not persistent
        && props.persistent !== true
        && showing.value === true
      );

      watch(hasClickOutside, val => {
        const fn = val === true ? addClickOutside : removeClickOutside;
        fn(clickOutsideProps);
      });

      onBeforeUnmount(() => {
        removeClickOutside(clickOutsideProps);
      });
    }

    function handleShow (evt) {
      showPortal();

      // should removeTick() if this gets removed
      registerTick(() => {
        observer = new MutationObserver(() => updatePosition());
        observer.observe(innerRef.value, { attributes: false, childList: true, characterData: true, subtree: true });
        updatePosition();
        configureScrollTarget();
      });

      if (unwatchPosition === void 0) {
        unwatchPosition = watch(
          () => $q.screen.width + '|' + $q.screen.height + '|' + props.self + '|' + props.anchor + '|' + $q.lang.rtl,
          updatePosition
        );
      }

      // should removeTimeout() if this gets removed
      registerTimeout(() => {
        showPortal(true); // done showing portal
        emit('show', evt);
      }, props.transitionDuration);
    }

    function handleHide (evt) {
      removeTick();
      hidePortal();

      anchorCleanup();

      // should removeTimeout() if this gets removed
      registerTimeout(() => {
        hidePortal(true); // done hiding, now destroy
        emit('hide', evt);
      }, props.transitionDuration);
    }

    function anchorCleanup () {
      if (observer !== void 0) {
        observer.disconnect();
        observer = void 0;
      }

      if (unwatchPosition !== void 0) {
        unwatchPosition();
        unwatchPosition = void 0;
      }

      unconfigureScrollTarget();
      cleanEvt(anchorEvents, 'tooltipTemp');
    }

    function updatePosition () {
      const el = innerRef.value;

      if (anchorEl.value === null || !el) {
        return
      }

      setPosition({
        el,
        offset: props.offset,
        anchorEl: anchorEl.value,
        anchorOrigin: anchorOrigin.value,
        selfOrigin: selfOrigin.value,
        maxHeight: props.maxHeight,
        maxWidth: props.maxWidth
      });
    }

    function delayShow (evt) {
      if ($q.platform.is.mobile === true) {
        clearSelection();
        document.body.classList.add('non-selectable');

        const target = anchorEl.value;
        const evts = [ 'touchmove', 'touchcancel', 'touchend', 'click' ]
          .map(e => ([ target, e, 'delayHide', 'passiveCapture' ]));

        addEvt(anchorEvents, 'tooltipTemp', evts);
      }

      registerTimeout(() => { show(evt); }, props.delay);
    }

    function delayHide (evt) {
      if ($q.platform.is.mobile === true) {
        cleanEvt(anchorEvents, 'tooltipTemp');
        clearSelection();
        // delay needed otherwise selection still occurs
        setTimeout(() => {
          document.body.classList.remove('non-selectable');
        }, 10);
      }

      // should removeTimeout() if this gets removed
      registerTimeout(() => { hide(evt); }, props.hideDelay);
    }

    function configureAnchorEl () {
      if (props.noParentEvent === true || anchorEl.value === null) { return }

      const evts = $q.platform.is.mobile === true
        ? [
            [ anchorEl.value, 'touchstart', 'delayShow', 'passive' ]
          ]
        : [
            [ anchorEl.value, 'mouseenter', 'delayShow', 'passive' ],
            [ anchorEl.value, 'mouseleave', 'delayHide', 'passive' ]
          ];

      addEvt(anchorEvents, 'anchor', evts);
    }

    function configureScrollTarget () {
      if (anchorEl.value !== null || props.scrollTarget !== void 0) {
        localScrollTarget.value = getScrollTarget(anchorEl.value, props.scrollTarget);
        const fn = props.noParentEvent === true
          ? updatePosition
          : hide;

        changeScrollEvent(localScrollTarget.value, fn);
      }
    }

    function getTooltipContent () {
      return showing.value === true
        ? h('div', {
          ...attrs,
          ref: innerRef,
          class: [
            'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
            attrs.class
          ],
          style: [
            attrs.style,
            transitionStyle.value
          ],
          role: 'tooltip'
        }, hSlot(slots.default))
        : null
    }

    function renderPortalContent () {
      return h(Transition, transitionProps.value, getTooltipContent)
    }

    onBeforeUnmount(anchorCleanup);

    // expose public methods
    Object.assign(vm.proxy, { updatePosition });

    return renderPortal
  }
});

const skeletonTypes = [
  'text', 'rect', 'circle',
  'QBtn', 'QBadge', 'QChip', 'QToolbar',
  'QCheckbox', 'QRadio', 'QToggle',
  'QSlider', 'QRange', 'QInput',
  'QAvatar'
];

const skeletonAnimations = [
  'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'
];

const QSkeleton = createComponent({
  name: 'QSkeleton',

  props: {
    ...useDarkProps,

    tag: {
      type: String,
      default: 'div'
    },

    type: {
      type: String,
      validator: v => skeletonTypes.includes(v),
      default: 'rect'
    },

    animation: {
      type: String,
      validator: v => skeletonAnimations.includes(v),
      default: 'wave'
    },
    animationSpeed: {
      type: [ String, Number ],
      default: 1500
    },

    square: Boolean,
    bordered: Boolean,

    size: String,
    width: String,
    height: String
  },

  setup (props, { slots }) {
    const vm = getCurrentInstance();
    const isDark = useDark(props, vm.proxy.$q);

    const style = computed(() => {
      const size = props.size !== void 0
        ? [ props.size, props.size ]
        : [ props.width, props.height ];

      return {
        '--q-skeleton-speed': `${ props.animationSpeed }ms`,
        width: size[ 0 ],
        height: size[ 1 ]
      }
    });

    const classes = computed(() =>
      `q-skeleton q-skeleton--${ isDark.value === true ? 'dark' : 'light' } q-skeleton--type-${ props.type }`
      + (props.animation !== 'none' ? ` q-skeleton--anim q-skeleton--anim-${ props.animation }` : '')
      + (props.square === true ? ' q-skeleton--square' : '')
      + (props.bordered === true ? ' q-skeleton--bordered' : '')
    );

    return () => h(props.tag, {
      class: classes.value,
      style: style.value
    }, hSlot(slots.default))
  }
});

const showPredictionPlot_vue_vue_type_style_index_0_lang = '';

const _sfc_main$6 = {
  name: "showPredictionPlot",
  props: ['predictData', 'trueData', 'mapeData', 'trainingDetails', 'modelId'],
  data() {
    return {
      listDate: [],
      datePicked: this.trueData[0].date,
      horizon: this.trainingDetails.training_parameters.horizon,
      endDate: '',
      variable: null,
      unit: null
    };
  },
  watch: {
    datePicked: function (newVal, oldVal) {
      if (newVal) {
        this.plotData();
      }
    }
  },
  methods: {
    plotData() {
      const idxPredictRecord = this.trueData.findIndex(item => item.date == this.datePicked);
      const idxRealRecord = this.predictData.findIndex(item => item.date == this.datePicked);
      const predictRecord = this.predictData[idxPredictRecord];
      const realRecord = this.trueData[idxRealRecord];
      const mapeRecord = this.mapeData[idxRealRecord];
      const dateRecord = this.predictData.slice(idxPredictRecord, idxPredictRecord + 1 + this.trainingDetails.training_parameters.horizon);
      var listPredictData = [];
      var listTrueData = [];
      var listDateData = [];
      var listMapeData = [];
      Object.keys(predictRecord).forEach(step => {
        if (step != 'date') {
          listPredictData.push({
            x: Number(step),
            y: predictRecord[step],
            date: dateRecord[step].date,
            unit: this.unit
          });
          listTrueData.push({
            x: Number(step),
            y: realRecord[step],
            date: dateRecord[step].date,
            unit: this.unit
          });
          listMapeData.push(mapeRecord[step]);
        } else {
          listDateData.push(predictRecord[step]);
        }
      });
      this.endDate = this.trueData[idxRealRecord + this.trainingDetails.training_parameters.horizon - 1].date;
      this.drawCharts(listPredictData, listTrueData, listMapeData, listDateData, this.datePicked, this.endDate);
    },
    drawCharts(predictData, TrueData, listMapeData, listDateData, startDate, endDate) {
      const weekDay = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
      const avgMAPE = listMapeData.reduce((partialSum, a) => partialSum + a, 0) / listMapeData.length;
      var startWeekDay = new Date(startDate).getDay();
      var endWeekday = new Date(endDate).getDay();
      Highcharts.chart(this.modelId + '-plot', {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Forecasting result visualization',
          align: 'center'
        },
        subtitle: {
          text: 'From ' + startDate + ' (' + weekDay[startWeekDay] + ') to ' + endDate + ' (' + weekDay[endWeekday] + ')' + ' having <b>MAPE = ' + Highcharts.numberFormat(avgMAPE, 3) + ' (%)',
          align: 'center'
        },
        xAxis: {
          reversed: false,
          title: {
            enabled: true,
            text: 'Steps'
          },
          labels: {
            format: '{value}'
          },
          maxPadding: 0.05,
          showLastLabel: true
        },
        yAxis: [{
          title: {
            text: this.variable
          },
          labels: {
            format: '{value} ' + this.unit
          },
          lineWidth: 1
        }, {
          title: {
            text: 'MAPE'
          },
          labels: {
            format: '{value}'
          },
          lineWidth: 1,
          opposite: true
        }],
        legend: {
          enabled: true
        },
        // tooltip: {
        //     headerFormat: '{series.name}  <br/>',
        //     pointFormat: 'on {point.date} <br/>is <b>{point.y} kW</b><br>'
        // },
        tooltip: {
          formatter: function () {
            const heading = this.series.name;
            const content = this.series.name == 'MAPE' ? 'on step <b> ' + this.x + '</b>' : 'on <b>' + this.point.date + '</b>';
            const value = this.series.name == 'MAPE' ? 'is <b> ' + Highcharts.numberFormat(this.y, 3) + '</b> (%)' : ' is <b>' + Highcharts.numberFormat(this.y, 3) + '</b> (' + this.point.unit + ')';
            return heading + '</br>' + content + '</br>' + value;
          }
        },
        plotOptions: {
          spline: {
            marker: {
              enable: false
            }
          }
        },
        series: [{
          name: 'Forecasting',
          data: predictData,
          lineWidth: 1
        }, {
          name: 'Groundtruth',
          data: TrueData,
          lineWidth: 1
        }, {
          name: 'MAPE',
          yAxis: 1,
          color: 'orange',
          data: listMapeData,
          lineWidth: 1,
          dashStyle: 'Dash'
        }],
        credits: false
      });
    }
  },
  mounted() {
    if (this.trainingDetails.pipeline_id == 1) {
      this.variable = 'Power';
      this.unit = 'kW';
    } else if (this.trainingDetails.pipeline_id == 2) {
      this.variable = 'Radiation';
      this.unit = 'kWh/m2';
    }
    if (this.trueData != null) {
      this.trueData.forEach(element => {
        this.listDate.push(element.date);
      });
      this.listDate = this.listDate.slice(0, -this.horizon);
      this.plotData();
    }
  }
};
const _hoisted_1$6 = {
  class: "row",
  style: {
    "column-gap": "10px",
    "margin-bottom": "20px"
  }
};
const _hoisted_2$6 = {
  class: "col-3"
};
const _hoisted_3$6 = /*#__PURE__*/createBaseVNode("div", {
  class: "text"
}, " Start time ", -1);
const _hoisted_4$5 = {
  class: "col-3"
};
const _hoisted_5$5 = /*#__PURE__*/createBaseVNode("div", {
  class: "text"
}, " End time ", -1);
const _hoisted_6$3 = {
  class: "col-3"
};
const _hoisted_7$3 = /*#__PURE__*/createBaseVNode("div", {
  class: "text"
}, " Step for prediction (horizon) ", -1);
const _hoisted_8$3 = {
  class: "row justify-center"
};
const _hoisted_9$3 = {
  class: "col"
};
const _hoisted_10$3 = ["id"];
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(Fragment, null, [createBaseVNode("div", _hoisted_1$6, [createBaseVNode("div", _hoisted_2$6, [_hoisted_3$6, createVNode(QSelect, {
    dense: "",
    outlined: "",
    options: $data.listDate,
    modelValue: $data.datePicked,
    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.datePicked = $event)
  }, null, 8, ["options", "modelValue"])]), createBaseVNode("div", _hoisted_4$5, [_hoisted_5$5, createVNode(QInput, {
    style: {
      "background-color": "rgba(0, 0, 0, 0.12)"
    },
    readonly: "",
    dense: "",
    outlined: "",
    modelValue: $data.endDate,
    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.endDate = $event)
  }, null, 8, ["modelValue"])]), createBaseVNode("div", _hoisted_6$3, [_hoisted_7$3, createVNode(QInput, {
    style: {
      "background-color": "rgba(0, 0, 0, 0.12)"
    },
    readonly: "",
    dense: "",
    outlined: "",
    modelValue: $props.trainingDetails.training_parameters.horizon,
    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => $props.trainingDetails.training_parameters.horizon = $event)
  }, null, 8, ["modelValue"])])]), createBaseVNode("div", _hoisted_8$3, [createBaseVNode("div", _hoisted_9$3, [createBaseVNode("div", {
    id: $props.modelId + '-plot'
  }, null, 8, _hoisted_10$3)])])], 64);
}
const showPredictionPlot = /*#__PURE__*/_export_sfc(_sfc_main$6, [['render', _sfc_render$6]]);

const showLearningCurvePlot_vue_vue_type_style_index_0_lang = '';

const _sfc_main$5 = {
  name: "showPredictionPlot",
  props: ['learningCurveData', 'trainingDetails', 'modelId'],
  data() {
    return {};
  },
  methods: {
    plotData() {
      this.drawCharts(this.learningCurveData.train_loss, this.learningCurveData.valid_loss);
    },
    drawCharts(trainLoss, validLoss) {
      useQuasar();
      Highcharts.chart(this.modelId + '-learningCurvePlot', {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Learning curve visualization',
          align: 'center'
        },
        subtitle: {
          text: 'Comparison between training loss and validation loss within <b>' + this.trainingDetails.training_parameters.epoch + ' epochs<b/>',
          align: 'center'
        },
        xAxis: {
          reversed: false,
          title: {
            enabled: true,
            text: 'Epochs'
          },
          labels: {
            format: '{value}'
          },
          maxPadding: 0.05,
          showLastLabel: true
        },
        yAxis: {
          title: {
            text: this.trainingDetails.training_parameters.loss_function
          },
          labels: {
            format: '{value}'
          },
          accessibility: {
            rangeDescription: 'Range: -90°C to 20°C.'
          },
          lineWidth: 1
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br/>',
          pointFormat: 'Epoch {point.x}<br/>' + this.trainingDetails.training_parameters.loss_function + ': {point.y}'
        },
        plotOptions: {
          spline: {
            marker: {
              enable: false
            }
          }
        },
        series: [{
          name: 'Training Loss',
          data: trainLoss,
          color: Highcharts.getOptions().colors[7],
          lineWidth: 2,
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        }, {
          name: 'Validation Loss',
          data: validLoss,
          color: Highcharts.getOptions().colors[1],
          lineWidth: 2,
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        }],
        credits: false,
        responsive: {
          rules: [{
            condition: {
              maxWidth: 500
            },
            chartOptions: {
              legend: {
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'horizontal'
              },
              yAxis: {
                labels: {
                  align: 'left',
                  x: 0,
                  y: -5
                },
                title: {
                  text: null
                }
              },
              subtitle: {
                text: null
              }
            }
          }]
        }
      });
    }
  },
  updated() {
    this.plotData();
  },
  mounted() {
    this.plotData();
  }
};
const _hoisted_1$5 = {
  class: "row justify-center"
};
const _hoisted_2$5 = {
  class: "col",
  style: {
    "align-items": "center"
  }
};
const _hoisted_3$5 = ["id"];
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1$5, [createBaseVNode("div", _hoisted_2$5, [createBaseVNode("div", {
    id: $props.modelId + '-learningCurvePlot'
  }, null, 8, _hoisted_3$5)])]);
}
const showLearningCurvePlot = /*#__PURE__*/_export_sfc(_sfc_main$5, [['render', _sfc_render$5]]);

const showModelDetails_vue_vue_type_style_index_0_scoped_49d7909d_lang = '';

const _sfc_main$4 = {
  name: 'showModelDetails',
  props: ['modelDetails', 'trainingDetails'],
  components: {
    showPredictionPlot,
    showLearningCurvePlot
  },
  data() {
    return {
      headers: {
        "Authorization": "Bearer " + window.$cookies.get('token')
      },
      artifacts: null,
      tableHeader: [{
        name: 'date',
        label: 'Date'
      }],
      flexboxWidth: null,
      pagination: {
        rowsPerPage: 0
      },
      SERVING_ENPOINT_PREFIX: window.location.origin
    };
  },
  watch: {
    modelDetails: function (newVal, oldVal) {
      if (newVal) {
        this.getModelArtifact();
      }
    }
  },
  methods: {
    getModelArtifact() {
      // change hyperparameter name to "display" key to show on UI
      this.modelDetails.hyperParameters.forEach(parameter => {
        const index = this.trainingDetails.training_parameters.search_space.findIndex(item => item.name == parameter.name);
        parameter.name = this.trainingDetails.training_parameters.search_space[index].display;
      });
      window.$http.get('/rest/v1/artifacts/?model_id=' + this.modelDetails.id, {
        headers: this.headers
      }).then(res => {
        this.artifacts = res.data.artifacts;
        const steps = Object.keys(this.artifacts.real_data[0]);
        steps.forEach((step, idx) => {
          if (idx != steps.length - 1) {
            this.tableHeader.push({
              name: step,
              label: 'step t + ' + Number(idx + 1),
              field: step
            });
          }
        });
      }).catch(error => {
        console.log("get_resources", error);
      });
    },
    copyTextNoInput() {
      const storage = document.createElement('textarea');
      storage.value = this.$refs.message.innerHTML;
      this.$refs.message.appendChild(storage);
      storage.select();
      storage.setSelectionRange(0, 99999);
      document.execCommand('copy');
      this.$refs.message.removeChild(storage);
    }
  },
  // computed: {
  //     tableWidth() {
  //         const myFlexbox = this.$refs.flexBox
  //         const clientWidth = myFlexbox.clientWidth
  //         const tablePadding = 32 // adjust this value to match your table padding
  //         return (clientWidth - tablePadding) / 2
  //     }
  // },
  mounted() {
    this.getModelArtifact();
  }
};
const _withScopeId$1 = n => (pushScopeId("data-v-49d7909d"), n = n(), popScopeId(), n);
const _hoisted_1$4 = {
  class: "row",
  style: {
    "margin-top": "10px"
  }
};
const _hoisted_2$4 = {
  class: "col model-id-text"
};
const _hoisted_3$4 = {
  class: "row",
  style: {
    "margin-top": "30px",
    "column-gap": "10px"
  }
};
const _hoisted_4$4 = {
  class: "col"
};
const _hoisted_5$4 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "MAPE", -1));
const _hoisted_6$2 = {
  class: "metric-value"
};
const _hoisted_7$2 = {
  class: "col"
};
const _hoisted_8$2 = {
  style: {
    "border-style": "solid",
    "border-width": "0px 0px 0px 1px",
    "padding-left": "19px",
    "border-color": "rgba(221, 221, 221, 0.87)"
  }
};
const _hoisted_9$2 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "MSE", -1));
const _hoisted_10$2 = {
  class: "metric-value"
};
const _hoisted_11$2 = {
  class: "col"
};
const _hoisted_12$2 = {
  style: {
    "border-style": "solid",
    "border-width": "0px 0px 0px 1px",
    "padding-left": "19px",
    "border-color": "rgba(221, 221, 221, 0.87)"
  }
};
const _hoisted_13$2 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "MAE", -1));
const _hoisted_14$2 = {
  class: "metric-value"
};
const _hoisted_15$2 = {
  class: "col"
};
const _hoisted_16$2 = {
  style: {
    "border-style": "solid",
    "border-width": "0px 0px 0px 1px",
    "padding-left": "19px",
    "border-color": "rgba(221, 221, 221, 0.87)"
  }
};
const _hoisted_17$2 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "Duration", -1));
const _hoisted_18$1 = {
  class: "metric-value"
};
const _hoisted_19$1 = {
  class: "col"
};
const _hoisted_20$1 = {
  style: {
    "border-style": "solid",
    "border-width": "0px 0px 0px 1px",
    "padding-left": "19px",
    "border-color": "rgba(221, 221, 221, 0.87)"
  }
};
const _hoisted_21$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "Status", -1));
const _hoisted_22$1 = {
  key: 0,
  class: "metric-value",
  style: {
    "color": "#198754",
    "font-weight": "bold"
  }
};
const _hoisted_23$1 = {
  key: 1,
  class: "metric-value"
};
const _hoisted_24$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-top": "30px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "metric-name"
}, "Serving point")], -1));
const _hoisted_25$1 = {
  class: "row items-baseline",
  style: {
    "margin-top": "-11px"
  }
};
const _hoisted_26$1 = {
  style: {
    "margin-left": "16px"
  }
};
const _hoisted_27$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row model-details-sub-section"
}, [/*#__PURE__*/createBaseVNode("span", null, "Hyperparameters")], -1));
const _hoisted_28$1 = {
  class: "row",
  style: {
    "column-gap": "10px"
  }
};
const _hoisted_29$1 = {
  class: "col"
};
const _hoisted_30$1 = {
  key: 0,
  style: {
    "border-style": "solid",
    "border-width": "0px 0px 0px 1px",
    "padding-left": "19px",
    "border-color": "rgba(221, 221, 221, 0.87)"
  }
};
const _hoisted_31$1 = {
  class: "hyperparameters-name"
};
const _hoisted_32$1 = {
  class: "hyperparameters-value"
};
const _hoisted_33$1 = {
  key: 1
};
const _hoisted_34$1 = {
  class: "hyperparameters-name"
};
const _hoisted_35$1 = {
  class: "hyperparameters-value"
};
const _hoisted_36$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row model-details-sub-section",
  style: {
    "margin-top": "30px"
  }
}, [/*#__PURE__*/createBaseVNode("span", null, "Learning curve")], -1));
const _hoisted_37$1 = {
  key: 0,
  class: "row"
};
const _hoisted_38$1 = {
  class: "col",
  style: {
    "align-self": "center"
  }
};
const _hoisted_39$1 = {
  key: 1,
  class: "row justify-center"
};
const _hoisted_40$1 = {
  class: "col"
};
const _hoisted_41$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row model-details-sub-section",
  style: {
    "margin-top": "30px"
  }
}, [/*#__PURE__*/createBaseVNode("span", null, "Comparing prediction vs actual")], -1));
const _hoisted_42$1 = {
  key: 2,
  class: "row justify-center"
};
const _hoisted_43$1 = {
  class: "col"
};
const _hoisted_44$1 = {
  key: 3
};
const _hoisted_45$1 = {
  class: "row"
};
const _hoisted_46$1 = {
  class: "col"
};
const _hoisted_47$1 = {
  class: "row",
  style: {
    "margin-bottom": "86px"
  }
};
const _hoisted_48$1 = {
  class: "col"
};
const _hoisted_49$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title-text"
}, " Prediction ", -1));
const _hoisted_50$1 = {
  class: "col text-right"
};
const _hoisted_51$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title-text"
}, " Groundtruth ", -1));
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_router_link = resolveComponent("router-link");
  const _component_showLearningCurvePlot = resolveComponent("showLearningCurvePlot");
  const _component_showPredictionPlot = resolveComponent("showPredictionPlot");
  return openBlock(), createElementBlock("div", null, [createBaseVNode("div", _hoisted_1$4, [createBaseVNode("div", _hoisted_2$4, [createVNode(QIcon, {
    left: "",
    size: "xs",
    name: "fas fa-flask"
  }), createBaseVNode("span", null, "Trial #" + toDisplayString($props.modelDetails.id), 1), $props.modelDetails.isPrimary ? (openBlock(), createBlock(QChip, {
    key: 0,
    size: "sm",
    style: {
      "background-color": "#198754",
      "color": "white",
      "font-weight": "bold",
      "margin-left": "12px"
    },
    label: "Primary"
  })) : createCommentVNode("", true)])]), createBaseVNode("div", _hoisted_3$4, [createBaseVNode("div", _hoisted_4$4, [createBaseVNode("div", null, [_hoisted_5$4, createBaseVNode("div", _hoisted_6$2, toDisplayString($props.modelDetails.mape), 1)])]), createBaseVNode("div", _hoisted_7$2, [createBaseVNode("div", _hoisted_8$2, [_hoisted_9$2, createBaseVNode("div", _hoisted_10$2, toDisplayString($props.modelDetails.mse), 1)])]), createBaseVNode("div", _hoisted_11$2, [createBaseVNode("div", _hoisted_12$2, [_hoisted_13$2, createBaseVNode("div", _hoisted_14$2, toDisplayString($props.modelDetails.mae), 1)])]), createBaseVNode("div", _hoisted_15$2, [createBaseVNode("div", _hoisted_16$2, [_hoisted_17$2, createBaseVNode("div", _hoisted_18$1, toDisplayString($props.modelDetails.duration), 1)])]), createBaseVNode("div", _hoisted_19$1, [createBaseVNode("div", _hoisted_20$1, [_hoisted_21$1, $props.modelDetails.isServing ? (openBlock(), createElementBlock("div", _hoisted_22$1, " Serving ")) : (openBlock(), createElementBlock("div", _hoisted_23$1, "Paused"))])])]), _hoisted_24$1, createBaseVNode("div", _hoisted_25$1, [createBaseVNode("div", null, [createVNode(QField, {
    borderless: "",
    dense: ""
  }, {
    control: withCtx(() => [createBaseVNode("div", {
      class: "serving-details",
      ref: "message"
    }, toDisplayString($data.SERVING_ENPOINT_PREFIX) + "/rest/v1/serving/" + toDisplayString($props.trainingDetails.training_id) + "/" + toDisplayString($props.modelDetails.id) + "-" + toDisplayString($props.modelDetails.model_shortname), 513)]),
    append: withCtx(() => [createVNode(QBtn, {
      style: {
        "color": "#2050cb"
      },
      size: "sm",
      flat: "",
      dense: "",
      icon: "fas fa-copy",
      onClick: _cache[0] || (_cache[0] = $event => $options.copyTextNoInput())
    })]),
    _: 1
  })]), createBaseVNode("div", _hoisted_26$1, [createVNode(_component_router_link, {
    to: '/model-serving/serving-details/' + $props.modelDetails.id,
    style: {
      "margin-right": "5px"
    }
  }, {
    default: withCtx(() => [createTextVNode(" Serving details ")]),
    _: 1
  }, 8, ["to"]), createVNode(QIcon, {
    name: "fas fa-arrow-right"
  })])]), _hoisted_27$1, createBaseVNode("div", _hoisted_28$1, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.modelDetails.hyperParameters, (param, idx) => {
    return openBlock(), createElementBlock("div", _hoisted_29$1, [idx != 0 ? (openBlock(), createElementBlock("div", _hoisted_30$1, [createBaseVNode("div", _hoisted_31$1, toDisplayString(param.name), 1), createBaseVNode("div", _hoisted_32$1, toDisplayString(param.value), 1)])) : (openBlock(), createElementBlock("div", _hoisted_33$1, [createBaseVNode("div", _hoisted_34$1, toDisplayString(param.name), 1), createBaseVNode("div", _hoisted_35$1, toDisplayString(param.value), 1)]))]);
  }), 256))]), _hoisted_36$1, !$data.artifacts ? (openBlock(), createElementBlock("div", _hoisted_37$1, [createBaseVNode("div", _hoisted_38$1, [createVNode(QSkeleton, {
    width: (_ctx.$q.screen.width - 350).toString(),
    height: "300px"
  }, null, 8, ["width"])])])) : (openBlock(), createElementBlock("div", _hoisted_39$1, [createBaseVNode("div", _hoisted_40$1, [createVNode(_component_showLearningCurvePlot, {
    learningCurveData: $data.artifacts.learning_curve,
    trainingDetails: $props.trainingDetails,
    modelId: $props.modelDetails.model_shortname
  }, null, 8, ["learningCurveData", "trainingDetails", "modelId"])])])), _hoisted_41$1, !$data.artifacts ? (openBlock(), createElementBlock("div", _hoisted_42$1, [createBaseVNode("div", _hoisted_43$1, [createVNode(QSkeleton, {
    width: (_ctx.$q.screen.width - 350).toString(),
    height: "300px"
  }, null, 8, ["width"])])])) : (openBlock(), createElementBlock("div", _hoisted_44$1, [createBaseVNode("div", _hoisted_45$1, [createBaseVNode("div", _hoisted_46$1, [createVNode(_component_showPredictionPlot, {
    predictData: $data.artifacts.prediction_data,
    trueData: $data.artifacts.real_data,
    mapeData: $data.artifacts.mape_data,
    trainingDetails: $props.trainingDetails,
    modelId: $props.modelDetails.model_shortname
  }, null, 8, ["predictData", "trueData", "mapeData", "trainingDetails", "modelId"])])]), createBaseVNode("div", _hoisted_47$1, [createBaseVNode("div", _hoisted_48$1, [_hoisted_49$1, createVNode(QTable, {
    flat: "",
    bordered: "",
    "hide-pagination": "",
    pagination: $data.pagination,
    "virtual-scroll": "",
    columns: $data.tableHeader,
    rows: $data.artifacts.prediction_data,
    scrollable: "",
    style: normalizeStyle('width:' + (_ctx.$q.screen.width - 350) / 2 + 'px;' + 'height: 500px'),
    separator: "cell",
    "table-header-class": "header-table"
  }, {
    "body-cell-date": withCtx(props => [createVNode(QTd, {
      style: {
        "background-color": "rgba(0, 0, 0, 0.12)",
        "font-weight": "bold"
      },
      props: props
    }, {
      default: withCtx(() => [createBaseVNode("span", null, toDisplayString(props.row.date), 1)]),
      _: 2
    }, 1032, ["props"])]),
    _: 1
  }, 8, ["pagination", "columns", "rows", "style"])]), createBaseVNode("div", _hoisted_50$1, [_hoisted_51$1, createVNode(QTable, {
    flat: "",
    bordered: "",
    "hide-pagination": "",
    pagination: $data.pagination,
    "virtual-scroll": "",
    columns: $data.tableHeader,
    rows: $data.artifacts.real_data,
    scrollable: "",
    style: normalizeStyle('width:' + (_ctx.$q.screen.width - 350) / 2 + 'px;' + 'height: 500px'),
    separator: "cell",
    "table-header-class": "header-table"
  }, {
    "body-cell-date": withCtx(props => [createVNode(QTd, {
      style: {
        "background-color": "rgba(0, 0, 0, 0.12)",
        "font-weight": "bold"
      },
      props: props
    }, {
      default: withCtx(() => [createBaseVNode("span", null, toDisplayString(props.row.date), 1)]),
      _: 2
    }, 1032, ["props"])]),
    _: 1
  }, 8, ["pagination", "columns", "rows", "style"])])])]))]);
}
const showModelDetails = /*#__PURE__*/_export_sfc(_sfc_main$4, [['render', _sfc_render$4], ['__scopeId', "data-v-49d7909d"]]);

const _sfc_main$3 = {
  name: "changeDefaultParametersModal",
  data() {
    return {
      headers: {
        "Authorization": "Bearer " + window.$cookies.get('token')
      },
      showModal: false,
      trainingId: '',
      trainingName: ''
    };
  },
  methods: {
    show(name, id) {
      this.showModal = true;
      this.trainingName = name;
      this.trainingId = id;
    },
    hide() {
      this.showModal = false;
    },
    onClickDone() {
      const data = {
        'trainingId': this.trainingId,
        'name': this.trainingName
      };
      window.$http.post('/rest/v1/trainings/set-name', JSON.parse(JSON.stringify(data)), {
        headers: this.headers
      }).then(res => {}).catch(error => {
        console.log(error);
      });
      this.showModal = false;
      this.$emit('update-name', this.trainingName);
    }
  }
};
const _hoisted_1$3 = /*#__PURE__*/createBaseVNode("div", {
  class: "col",
  style: {
    "margin-top": "2px"
  }
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "500",
    "font-size": "20px"
  }
}, "Edit")], -1);
const _hoisted_2$3 = {
  clas: "col"
};
const _hoisted_3$3 = /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-bottom": "8px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "col"
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "rgba(0, 0, 0, 0.65)"
  }
}, " Training name ")])], -1);
const _hoisted_4$3 = {
  class: "row"
};
const _hoisted_5$3 = {
  class: "col"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(QDialog, {
    modelValue: $data.showModal,
    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.showModal = $event),
    width: "auto",
    persistent: ""
  }, {
    default: withCtx(() => [createVNode(QCard, {
      style: {
        "width": "40%"
      }
    }, {
      default: withCtx(() => [createVNode(QCardSection, {
        class: "row",
        style: {
          "padding": "8px 16px 8px 16px"
        }
      }, {
        default: withCtx(() => [_hoisted_1$3, createBaseVNode("div", _hoisted_2$3, [withDirectives(createVNode(QBtn, {
          icon: "close",
          flat: "",
          round: "",
          dense: ""
        }, null, 512), [[ClosePopup]])])]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardSection, null, {
        default: withCtx(() => [_hoisted_3$3, createBaseVNode("div", _hoisted_4$3, [createBaseVNode("div", _hoisted_5$3, [createVNode(QInput, {
          dense: "",
          "bottom-slots": "",
          outlined: "",
          modelValue: $data.trainingName,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.trainingName = $event)
        }, {
          hint: withCtx(() => [createTextVNode(" The training name can only contain alpha-numeric characters, hyphens and underscores (a-z, A-Z, 0-9, - and _ ) ")]),
          _: 1
        }, 8, ["modelValue"])])])]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardActions, {
        align: "right",
        style: {
          "padding": "16px 16px"
        }
      }, {
        default: withCtx(() => [createVNode(QBtn, {
          "no-caps": "",
          flat: "",
          style: {
            "color": "white",
            "background-color": "#6C757D"
          },
          onClick: $options.onClickDone,
          label: "Cancel"
        }, null, 8, ["onClick"]), createVNode(QBtn, {
          "no-caps": "",
          flat: "",
          style: {
            "color": "white",
            "background-color": "#192E65"
          },
          onClick: $options.onClickDone,
          label: "Save"
        }, null, 8, ["onClick"])]),
        _: 1
      })]),
      _: 1
    })]),
    _: 1
  }, 8, ["modelValue"]);
}
const changeTrainingNameModal = /*#__PURE__*/_export_sfc(_sfc_main$3, [['render', _sfc_render$3]]);

const _sfc_main$2 = {
  name: "showPredictionPlot",
  props: ['hyperParameters'],
  data() {
    return {
      headers: {
        "Authorization": "Bearer " + window.$cookies.get('token')
      },
      showModal: false,
      tableHeader: [{
        label: 'Name',
        name: 'name',
        field: 'name'
      }, {
        label: 'Value',
        name: 'value',
        field: 'value'
      }],
      tableData: []
    };
  },
  methods: {
    show(hyperParameters) {
      hyperParameters.forEach(element => {
        this.tableData.push({
          name: element.display,
          value: element.value.join(', ')
        });
      });
      console.log(this.tableData);
      this.showModal = true;
    },
    hide() {
      this.showModal = false;
    },
    onClickDone() {
      this.showModal = false;
      this.tableData = [];
    }
  }
};
const _hoisted_1$2 = /*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "500",
    "font-size": "20px",
    "line-height": "24px"
  }
}, "Hyperparameters", -1);
const _hoisted_2$2 = {
  class: "row",
  style: {
    "margin-bottom": "13px"
  }
};
const _hoisted_3$2 = {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px"
  }
};
const _hoisted_4$2 = {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "rgba(0, 0, 0, 0.65)"
  }
};
const _hoisted_5$2 = {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "400",
    "font-size": "14px",
    "line-height": "16px"
  }
};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(QDialog, {
    modelValue: $data.showModal,
    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.showModal = $event),
    width: "auto",
    persistent: ""
  }, {
    default: withCtx(() => [createVNode(QCard, {
      style: {
        "width": "40%"
      }
    }, {
      default: withCtx(() => [createVNode(QCardSection, null, {
        default: withCtx(() => [_hoisted_1$2]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardSection, null, {
        default: withCtx(() => [createBaseVNode("div", _hoisted_2$2, [createBaseVNode("span", _hoisted_3$2, " Total (" + toDisplayString($data.tableData.length) + ") ", 1)]), createVNode(QTable, {
          flat: "",
          bordered: "",
          "hide-header": "",
          "hide-pagination": "",
          columns: $data.tableHeader,
          rows: $data.tableData
        }, {
          "body-cell-name": withCtx(({
            row
          }) => [createVNode(QTd, null, {
            default: withCtx(() => [createBaseVNode("span", _hoisted_4$2, toDisplayString(row.name), 1)]),
            _: 2
          }, 1024)]),
          "body-cell-value": withCtx(({
            row
          }) => [createVNode(QTd, {
            class: "text-right"
          }, {
            default: withCtx(() => [createBaseVNode("span", _hoisted_5$2, toDisplayString(row.value), 1)]),
            _: 2
          }, 1024)]),
          _: 1
        }, 8, ["columns", "rows"])]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardActions, {
        align: "right",
        style: {
          "padding": "16px 16px"
        }
      }, {
        default: withCtx(() => [createVNode(QBtn, {
          "no-caps": "",
          flat: "",
          outline: "",
          style: {
            "background-color": "#6c757d",
            "color": "white"
          },
          onClick: $options.onClickDone,
          label: "Close"
        }, null, 8, ["onClick"])]),
        _: 1
      })]),
      _: 1
    })]),
    _: 1
  }, 8, ["modelValue"]);
}
const showHyperParametersModal = /*#__PURE__*/_export_sfc(_sfc_main$2, [['render', _sfc_render$2]]);

const _sfc_main$1 = {
  name: "changeDefaultParametersModal",
  data() {
    return {
      headers: {
        "Authorization": "Bearer " + window.$cookies.get('token')
      },
      showModal: false,
      datasetName: '',
      optionsDateStart: [],
      optionsDateEnd: [],
      downloadDataType: 'CSV',
      selectedDateStart: null,
      selectedDateEnd: null,
      getDataStatus: false
    };
  },
  watch: {
    selectedDateStart: function (newVal, oldVal) {
      if (this.selectedDateStart) {
        const idx = this.optionsDateStart.findIndex(item => item == this.selectedDateStart);
        this.optionsDateEnd = this.optionsDateStart.slice(idx + 1);
      }
    }
  },
  methods: {
    show(name, type) {
      this.showModal = true;
      window.$http.get('/rest/v1/datasets/download?dataset_name=' + name + '&dataset_type=' + type, {
        headers: this.headers
      }).then(res => {
        this.optionsDateStart = res.data.date;
        this.optionsDateEnd = res.data.date;
        this.datasetName = name;
        this.selectedDateStart = res.data.date[0];
        this.selectedDateEnd = res.data.date[res.data.date.length - 1];
        this.csvData = JSON.parse(res.data.data);
        this.getDataStatus = true;
      }).catch(error => {
        console.log(error);
      });
    },
    hide() {
      this.showModal = false;
    },
    onClickedDownload() {
      const startIdx = this.optionsDateStart.findIndex(item => item == this.selectedDateStart);
      const endIdx = this.optionsDateStart.findIndex(item => item == this.selectedDateEnd);
      const data = this.csvData.slice(startIdx, endIdx + 1);
      const csv = Papa.unparse(data);
      console.log(data);
      const status = exportFile(this.datasetName, csv, 'text/csv');
      if (status !== true) {
        $q.notify({
          message: 'Browser denied file download...',
          color: 'negative',
          icon: 'warning'
        });
      }
      // this.showModal = false
    },

    onClickedCancel() {
      this.showModal = false;
    },
    getDatasetData() {}
  },
  mounted() {
    this.getDatasetData();
  }
};
const _hoisted_1$1 = /*#__PURE__*/createBaseVNode("div", {
  class: "col",
  style: {
    "margin-top": "2px"
  }
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "'Roboto'",
    "font-style": "normal",
    "font-weight": "500",
    "font-size": "20px"
  }
}, "Download Data")], -1);
const _hoisted_2$1 = {
  clas: "col"
};
const _hoisted_3$1 = /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-bottom": "8px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "col"
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "Roboto",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "#333333"
  }
}, " Resource name ")])], -1);
const _hoisted_4$1 = {
  class: "row",
  style: {
    "margin-bottom": "20px"
  }
};
const _hoisted_5$1 = {
  key: 0,
  class: "col"
};
const _hoisted_6$1 = {
  key: 1,
  class: "col"
};
const _hoisted_7$1 = /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-bottom": "8px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "col"
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "Roboto",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "rgba(0, 0, 0, 0.65)"
  }
}, " File format ")])], -1);
const _hoisted_8$1 = {
  class: "row",
  style: {
    "margin-bottom": "20px"
  }
};
const _hoisted_9$1 = {
  class: "col"
};
const _hoisted_10$1 = /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-bottom": "8px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "col"
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "Roboto",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "rgba(0, 0, 0, 0.65)"
  }
}, " Start date ")])], -1);
const _hoisted_11$1 = {
  class: "row",
  style: {
    "margin-bottom": "20px"
  }
};
const _hoisted_12$1 = {
  key: 0,
  class: "col"
};
const _hoisted_13$1 = {
  key: 1,
  class: "col"
};
const _hoisted_14$1 = /*#__PURE__*/createBaseVNode("div", {
  class: "row",
  style: {
    "margin-bottom": "8px"
  }
}, [/*#__PURE__*/createBaseVNode("div", {
  class: "col"
}, [/*#__PURE__*/createBaseVNode("span", {
  style: {
    "font-family": "Roboto",
    "font-style": "normal",
    "font-weight": "700",
    "font-size": "13px",
    "line-height": "15px",
    "color": "rgba(0, 0, 0, 0.65)"
  }
}, " End date ")])], -1);
const _hoisted_15$1 = {
  class: "row",
  style: {
    "margin-bottom": "20px"
  }
};
const _hoisted_16$1 = {
  key: 0,
  class: "col"
};
const _hoisted_17$1 = {
  key: 1,
  class: "col"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(QDialog, {
    modelValue: $data.showModal,
    "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => $data.showModal = $event),
    width: "auto",
    persistent: ""
  }, {
    default: withCtx(() => [createVNode(QCard, {
      style: {
        "width": "40%"
      }
    }, {
      default: withCtx(() => [createVNode(QCardSection, {
        class: "row",
        style: {
          "padding": "8px 16px 8px 16px"
        }
      }, {
        default: withCtx(() => [_hoisted_1$1, createBaseVNode("div", _hoisted_2$1, [withDirectives(createVNode(QBtn, {
          icon: "close",
          flat: "",
          round: "",
          dense: ""
        }, null, 512), [[ClosePopup]])])]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardSection, null, {
        default: withCtx(() => [_hoisted_3$1, createBaseVNode("div", _hoisted_4$1, [$data.getDataStatus ? (openBlock(), createElementBlock("div", _hoisted_5$1, toDisplayString($data.datasetName), 1)) : (openBlock(), createElementBlock("div", _hoisted_6$1, [createVNode(QSpinner, {
          color: "primary",
          size: "1.5em"
        })]))]), _hoisted_7$1, createBaseVNode("div", _hoisted_8$1, [createBaseVNode("div", _hoisted_9$1, [createVNode(QSelect, {
          dense: "",
          options: ['CSV'],
          outlined: "",
          modelValue: $data.downloadDataType,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.downloadDataType = $event)
        }, null, 8, ["modelValue"])])]), _hoisted_10$1, createBaseVNode("div", _hoisted_11$1, [$data.getDataStatus ? (openBlock(), createElementBlock("div", _hoisted_12$1, [createVNode(QSelect, {
          dense: "",
          options: $data.optionsDateStart,
          outlined: "",
          modelValue: $data.selectedDateStart,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.selectedDateStart = $event)
        }, null, 8, ["options", "modelValue"])])) : (openBlock(), createElementBlock("div", _hoisted_13$1, [createVNode(QSpinner, {
          color: "primary",
          size: "1.5em"
        })]))]), _hoisted_14$1, createBaseVNode("div", _hoisted_15$1, [$data.getDataStatus ? (openBlock(), createElementBlock("div", _hoisted_16$1, [createVNode(QSelect, {
          dense: "",
          options: $data.optionsDateEnd,
          outlined: "",
          modelValue: $data.selectedDateEnd,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => $data.selectedDateEnd = $event)
        }, null, 8, ["options", "modelValue"])])) : (openBlock(), createElementBlock("div", _hoisted_17$1, [createVNode(QSpinner, {
          color: "primary",
          size: "1.5em"
        })]))])]),
        _: 1
      }), createVNode(QSeparator), createVNode(QCardActions, {
        align: "right",
        style: {
          "padding": "16px 16px"
        }
      }, {
        default: withCtx(() => [createVNode(QBtn, {
          "no-caps": "",
          flat: "",
          style: {
            "color": "white",
            "background-color": "#6C757D"
          },
          onClick: _cache[3] || (_cache[3] = $event => $options.onClickedCancel()),
          label: "Cancel"
        }), createVNode(QBtn, {
          disable: !$data.getDataStatus,
          "no-caps": "",
          flat: "",
          style: {
            "color": "white",
            "background-color": "#192E65"
          },
          onClick: _cache[4] || (_cache[4] = $event => $options.onClickedDownload()),
          label: "Download"
        }, null, 8, ["disable"])]),
        _: 1
      })]),
      _: 1
    })]),
    _: 1
  }, 8, ["modelValue"]);
}
const downloadDataModal = /*#__PURE__*/_export_sfc(_sfc_main$1, [['render', _sfc_render$1]]);

const showTrainingDetails_vue_vue_type_style_index_0_scoped_91471faa_lang = '';

// var Highcharts = require('highcharts/highstock'); 
// import Highcharts from 'highcharts/'
const _sfc_main = {
  name: 'listTraining',
  components: {
    changeTrainingNameModal,
    showHyperParametersModal,
    showModelDetails,
    downloadDataModal
  },
  data() {
    return {
      headers: {
        "Authorization": "Bearer " + window.$cookies.get('token')
      },
      trainingDetails: {
        hyper_parameters: []
      },
      tableHeader: [{
        label: 'Trial No.',
        align: '',
        name: 'id',
        field: 'id'
      }, {
        label: 'Model ID',
        align: 'center',
        name: 'model_shortname',
        field: 'model_shortname'
      }, {
        label: 'Duration',
        align: 'left',
        name: 'duration',
        field: 'duration'
      }, {
        label: 'MAPE (%)',
        align: 'left',
        name: 'mape',
        field: 'mape'
      }, {
        label: 'MSE',
        align: 'left',
        name: 'mse',
        field: 'mse'
      }, {
        label: 'MAE',
        align: 'left',
        name: 'mae',
        field: 'mae'
      }, {
        label: 'Status',
        align: 'left',
        name: 'status',
        field: 'status'
      }, {
        label: 'Actions',
        align: 'left',
        name: 'actions',
        field: 'actions'
      }],
      tableData: [],
      modelDetails: '',
      showModelDetailsFlag: false,
      listModels: [],
      trainingJobId: '',
      servingModel: null,
      status: ['Running', 'Completed', 'Error'],
      bestModelId: null,
      primaryServingModel: null,
      expanded: [],
      singleExpand: true,
      message: '',
      pagination: {
        rowsPerPage: 10 // current rows per page being displayed
      },

      hpoChartConfig: {
        xAxis: {
          categories: []
        },
        yAxis: [],
        series: []
      },
      SERVING_ENPOINT_PREFIX: window.location.origin
    };
  },
  methods: {
    getTrainingJobByTrainingJobId() {
      const trainingJobId = this.$route.params.id;
      window.$http.get('/rest/v1/trainings?exp_name=' + trainingJobId).then(res => {
        this.trainingDetails = res.data.trainings;
        this.trainingDetails.training_parameters.search_space.forEach((item, index) => {
          if (item.type == "categorical") {
            this.hpoChartConfig.yAxis.push({
              categories: item.value,
              index: index
            });
          } else {
            this.hpoChartConfig.yAxis.push({
              min: 1,
              tooltipValueFormat: '{value}',
              index: index
            });
          }
        });

        // A hyperparameter is store as dict, for example window:
        // {
        //      name : window (for easy manage)
        //      type : discrete
        //      value : 128
        //      display : Number of look-back steps (window) (for display on UI)
        // }
        // Because in DB, each hyperparameter is stored by "name" key, not "display" key.
        // In order to get value of hyperparameter following each category in x Axis,

        // First we create the xAxis with the "name" key of the hyperparameter, not the "display" key
        this.trainingDetails.training_parameters.search_space.forEach(item => {
          this.hpoChartConfig.xAxis.categories.push(item.name);
        });
        this.hpoChartConfig.xAxis.categories.push('MAPE');
        const yAxisIndexOptimizer = this.hpoChartConfig.xAxis.categories.findIndex(item => item == 'optimizer');
        this.listModels = res.data.models;
        if (this.listModels.length > 0) {
          this.listModels.forEach(model => {
            let nameParameters = Object.keys(model.hyper_parameters);
            let parameters = [];
            nameParameters.forEach(_name => {
              parameters.push({
                name: _name,
                value: model.hyper_parameters[_name]
              });
            });
            this.tableData.push({
              id: model.id,
              model_shortname: model.id_string,
              duration: model.duration,
              mape: model.mape + ' %',
              mse: model.mse,
              mae: model.mae,
              status: 'Serving',
              isServing: model.is_serving,
              isPrimary: model.is_primary,
              hyperParameters: parameters,
              expId: this.trainingDetails.kubeflow_exp_id
            });

            // get the data corresponding with the name of each category in x Axis 
            // by matching each x Axis category with the "name" key in hyperparmeters dict of each model.
            var data = [];
            this.hpoChartConfig.xAxis.categories.forEach(category => {
              if (category == 'optimizer') {
                data.push(this.hpoChartConfig.yAxis[yAxisIndexOptimizer].categories.findIndex(item => item == model.hyper_parameters[category]));
              } else if (category == 'MAPE') {
                data.push(model.mape);
              } else {
                data.push(model.hyper_parameters[category]);
              }
            });
            this.hpoChartConfig.series.push({
              name: "Model #" + model.id,
              data: data
            });
          });
        }

        // Then replace the x Axis with the hyperparmeter "display" key to show on the UI.
        this.hpoChartConfig.xAxis.categories = [];
        this.trainingDetails.training_parameters.search_space.forEach(item => {
          this.hpoChartConfig.xAxis.categories.push(item.display);
        });
        this.hpoChartConfig.xAxis.categories.push('MAPE');
        this.bestModelId = this.listModels[0].id;
        this.primaryServingModel = this.tableData.find(model => model.isPrimary == true);
      }).catch(error => {
        console.log("get_resources", error);
      });
    },
    copyTextNoInput() {
      const storage = document.createElement('textarea');
      storage.value = this.$refs.message.innerHTML;
      console.log(this.$refs.message);
      this.$refs.message.appendChild(storage);
      storage.select();
      storage.setSelectionRange(0, 99999);
      document.execCommand('copy');
      this.$refs.message.removeChild(storage);
    },
    updateName(name) {
      this.trainingDetails.training_name = name;
    },
    onClickedEditTrainingName(name, trainingId) {
      this.$refs.modalChangeTrainingNameModal.show(name, trainingId);
    },
    onClickedShowHyperParameters(hyperParameters) {
      this.$refs.showHyperParametersModal.show(hyperParameters);
    },
    onClickedDownloadData(datasetName, datasetType) {
      this.$refs.downloadDataModal.show(datasetName, datasetType);
    },
    onGetModelDetails(item) {
      this.modelDetails = item;
    },
    onClickedSetPrimary(item) {
      const data = {
        "model_id": item.id,
        "exp_id": item.expId
      };
      window.$http.post('/rest/v1/models/set-primary', JSON.parse(JSON.stringify(data)), {
        headers: this.headers
      }).then(res => {
        let index = this.tableData.findIndex(item => item.isPrimary == true);
        this.tableData[index].isPrimary = false;
        index = this.tableData.findIndex(element => element.id == item.id);
        this.tableData[index].isPrimary = true;
        this.primaryServingModel = this.tableData.find(model => model.isPrimary == true);
      }).catch(error => {
        console.log("get_resources", error);
      });
    },
    onClickedRemoveModel(id) {
      const index = this.tableData.findIndex(item => item.id == id);
      this.tableData.splice(index, 1);
      this.hpoChartConfig.series.splice(index, 1);
      this.bestModelId = this.tableData[0].id;
      this.drawChart();
      // window.$http.post('/rest/v1/models/delete', JSON.parse(JSON.stringify(data)), { headers: this.headers })
      // .then(res => {
      //     console.log(res.data)
      // })
    },

    drawChart() {
      Highcharts.chart('container', {
        chart: {
          type: 'spline',
          parallelCoordinates: true,
          height: 500,
          parallelAxes: {
            lineWidth: 0.2
          }
        },
        title: {
          text: 'Hyperparameters Parallel Coordinate Plot'
        },
        plotOptions: {
          series: {
            accessibility: {
              enabled: false
            },
            animation: false,
            marker: {
              enabled: false,
              states: {
                hover: {
                  enabled: false
                }
              }
            },
            states: {
              hover: {
                halo: {
                  size: 50
                }
              }
            },
            events: {
              mouseOver: function () {
                this.group.toFront();
              }
            }
          }
        },
        tooltip: {
          pointFormat: '<span style="color:{point.color}">\u25CF</span>' + '{series.name}: <b>{point.formattedValue}</b><br/>'
        },
        xAxis: this.hpoChartConfig.xAxis,
        yAxis: this.hpoChartConfig.yAxis,
        series: this.hpoChartConfig.series,
        credits: false
        // colors: ['rgba(11, 200, 200, 1)'],
      });
    }
  },

  created() {
    this.getTrainingJobByTrainingJobId();
  },
  updated() {
    this.drawChart();
  }
};
const _withScopeId = n => (pushScopeId("data-v-91471faa"), n = n(), popScopeId(), n);
const _hoisted_1 = {
  class: "row nav-text"
};
const _hoisted_2 = {
  class: "col"
};
const _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row sub-section"
}, [/*#__PURE__*/createBaseVNode("span", null, "Training Details")], -1));
const _hoisted_4 = {
  class: "row",
  style: {
    "margin": "0px 20px 0px 15px"
  }
};
const _hoisted_5 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)"
  }
};
const _hoisted_6 = {
  class: "row"
};
const _hoisted_7 = {
  class: "col"
};
const _hoisted_8 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Training name"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_9 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_10 = {
  key: 1,
  class: "row card-content items-baseline"
};
const _hoisted_11 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_12 = {
  class: "col text-right card-btn"
};
const _hoisted_13 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_14 = {
  class: "row"
};
const _hoisted_15 = {
  class: "col"
};
const _hoisted_16 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Status"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_17 = {
  key: 0,
  class: "row card-content-status"
};
const _hoisted_18 = {
  key: 1,
  class: "row card-content-status",
  style: {
    "color": "#2050cb"
  }
};
const _hoisted_19 = {
  key: 0,
  class: "col text-right card-btn"
};
const _hoisted_20 = {
  key: 1,
  class: "col text-right card-btn"
};
const _hoisted_21 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_22 = {
  class: "row"
};
const _hoisted_23 = {
  class: "col"
};
const _hoisted_24 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Last updated"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_25 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_26 = {
  key: 1,
  class: "row card-content items-baseline"
};
const _hoisted_27 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_28 = {
  class: "row",
  style: {
    "margin": "4px 20px 0px 15px"
  }
};
const _hoisted_29 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)"
  }
};
const _hoisted_30 = {
  class: "row"
};
const _hoisted_31 = {
  class: "col"
};
const _hoisted_32 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Start time"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_33 = {
  class: "row card-content"
};
const _hoisted_34 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_35 = {
  class: "row"
};
const _hoisted_36 = {
  class: "col"
};
const _hoisted_37 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "End time"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_38 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_39 = {
  key: 1,
  class: "row card-content items-baseline"
};
const _hoisted_40 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_41 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_42 = {
  class: "row"
};
const _hoisted_43 = {
  class: "col"
};
const _hoisted_44 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Duration"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_45 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_46 = {
  key: 1,
  class: "row card-content items-baseline"
};
const _hoisted_47 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_48 = {
  class: "row",
  style: {
    "margin": "4px 20px 0px 15px",
    "margin-top": "4px"
  }
};
const _hoisted_49 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)"
  }
};
const _hoisted_50 = {
  class: "row"
};
const _hoisted_51 = {
  class: "col"
};
const _hoisted_52 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Resource name"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_53 = {
  class: "row card-content"
};
const _hoisted_54 = {
  class: "col text-right card-btn"
};
const _hoisted_55 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_56 = {
  class: "row"
};
const _hoisted_57 = {
  class: "col"
};
const _hoisted_58 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Pipeline"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_59 = {
  class: "row card-content"
};
const _hoisted_60 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)",
    "margin-left": "14px"
  }
};
const _hoisted_61 = {
  class: "row"
};
const _hoisted_62 = {
  class: "col"
};
const _hoisted_63 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "row card-title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Hyperparameters"), /*#__PURE__*/createBaseVNode("br")], -1));
const _hoisted_64 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_65 = {
  key: 1,
  class: "row card-content"
};
const _hoisted_66 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_67 = {
  class: "col text-right card-btn"
};
const _hoisted_68 = {
  class: "row card-main-serving-point"
};
const _hoisted_69 = {
  class: "col",
  style: {
    "background-color": "rgba(217, 217, 217, 0.2)"
  }
};
const _hoisted_70 = {
  class: "row"
};
const _hoisted_71 = {
  class: "col"
};
const _hoisted_72 = {
  class: "row card-title"
};
const _hoisted_73 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Primary serving endpoint", -1));
const _hoisted_74 = {
  key: 0,
  class: "row card-content"
};
const _hoisted_75 = {
  key: 0,
  class: "self-center no-outline",
  tabindex: "0"
};
const _hoisted_76 = {
  key: 1,
  class: "row card-content items-baseline"
};
const _hoisted_77 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "n/a", -1));
const _hoisted_78 = {
  class: "col text-right self-center"
};
const _hoisted_79 = {
  key: 0,
  style: {
    "margin-right": "16.9px"
  }
};
const _hoisted_80 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Serving details", -1));
const _hoisted_81 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("figure", {
  class: "highcharts-figure"
}, [/*#__PURE__*/createBaseVNode("div", {
  id: "container"
})], -1));
const _hoisted_82 = [_hoisted_81];
const _hoisted_83 = {
  key: 0,
  class: "row sub-section",
  style: {
    "margin-top": "36px",
    "margin-bottom": "13px"
  }
};
const _hoisted_84 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Model training results", -1));
const _hoisted_85 = [_hoisted_84];
const _hoisted_86 = {
  key: 1,
  class: "row model-list-section"
};
const _hoisted_87 = {
  class: "col"
};
const _hoisted_88 = {
  key: 0
};
const _hoisted_89 = {
  key: 1
};
const _hoisted_90 = {
  key: 2,
  class: "serving-status-text"
};
const _hoisted_91 = {
  key: 3
};
const _hoisted_92 = {
  class: "row"
};
const _hoisted_93 = {
  class: "col"
};
const _hoisted_94 = {
  class: "col"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_router_link = resolveComponent("router-link");
  const _component_showModelDetails = resolveComponent("showModelDetails");
  const _component_changeTrainingNameModal = resolveComponent("changeTrainingNameModal");
  const _component_showHyperParametersModal = resolveComponent("showHyperParametersModal");
  const _component_downloadDataModal = resolveComponent("downloadDataModal");
  return openBlock(), createElementBlock("div", null, [createBaseVNode("div", _hoisted_1, [createBaseVNode("div", _hoisted_2, [createVNode(QBreadcrumbs, null, {
    separator: withCtx(() => [createVNode(QIcon, {
      size: "0.6em",
      name: "fas fa-chevron-right",
      color: "black"
    })]),
    default: withCtx(() => [createVNode(QBreadcrumbsEl, {
      icon: "fas fa-arrow-left",
      label: "Model Training",
      to: {
        name: 'model-training'
      }
    }), createVNode(QBreadcrumbsEl, null, {
      default: withCtx(() => [createTextVNode(toDisplayString($data.trainingDetails.training_name), 1)]),
      _: 1
    })]),
    _: 1
  })])]), _hoisted_3, createBaseVNode("div", _hoisted_4, [createBaseVNode("div", _hoisted_5, [createBaseVNode("div", _hoisted_6, [createBaseVNode("div", _hoisted_7, [_hoisted_8, $data.trainingDetails.training_name ? (openBlock(), createElementBlock("div", _hoisted_9, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.training_name), 1)])) : (openBlock(), createElementBlock("div", _hoisted_10, [_hoisted_11, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))]), createBaseVNode("div", _hoisted_12, [createVNode(QBtn, {
    "no-caps": "",
    label: "Edit",
    style: {
      "color": "#2050cb"
    },
    outline: "",
    size: "0.85em",
    onClick: _cache[0] || (_cache[0] = $event => $options.onClickedEditTrainingName($data.trainingDetails.training_name, $data.trainingDetails.training_id))
  })])])]), createBaseVNode("div", _hoisted_13, [createBaseVNode("div", _hoisted_14, [createBaseVNode("div", _hoisted_15, [_hoisted_16, $data.trainingDetails.status == 2 ? (openBlock(), createElementBlock("div", _hoisted_17, [createBaseVNode("span", null, toDisplayString($data.status[$data.trainingDetails.status - 1]), 1)])) : createCommentVNode("", true), $data.trainingDetails.status == 1 ? (openBlock(), createElementBlock("div", _hoisted_18, [createBaseVNode("span", null, toDisplayString($data.status[$data.trainingDetails.status - 1]), 1)])) : createCommentVNode("", true)]), $data.trainingDetails.status == 2 ? (openBlock(), createElementBlock("div", _hoisted_19, [createVNode(QIcon, {
    style: {
      "color": "#198754"
    },
    size: "md",
    name: "fas fa-circle-check"
  })])) : $data.trainingDetails.status == 1 ? (openBlock(), createElementBlock("div", _hoisted_20, [createVNode(QSpinnerGears, {
    color: "primary",
    size: "2.5em",
    thickness: 2
  })])) : createCommentVNode("", true)])]), createBaseVNode("div", _hoisted_21, [createBaseVNode("div", _hoisted_22, [createBaseVNode("div", _hoisted_23, [_hoisted_24, $data.trainingDetails.updated_date ? (openBlock(), createElementBlock("div", _hoisted_25, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.updated_date), 1)])) : (openBlock(), createElementBlock("div", _hoisted_26, [_hoisted_27, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))])])])]), createBaseVNode("div", _hoisted_28, [createBaseVNode("div", _hoisted_29, [createBaseVNode("div", _hoisted_30, [createBaseVNode("div", _hoisted_31, [_hoisted_32, createBaseVNode("div", _hoisted_33, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.created_date), 1)])])])]), createBaseVNode("div", _hoisted_34, [createBaseVNode("div", _hoisted_35, [createBaseVNode("div", _hoisted_36, [_hoisted_37, $data.trainingDetails.finished_date ? (openBlock(), createElementBlock("div", _hoisted_38, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.finished_date), 1)])) : (openBlock(), createElementBlock("div", _hoisted_39, [_hoisted_40, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))])])]), createBaseVNode("div", _hoisted_41, [createBaseVNode("div", _hoisted_42, [createBaseVNode("div", _hoisted_43, [_hoisted_44, $data.trainingDetails.duration ? (openBlock(), createElementBlock("div", _hoisted_45, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.duration), 1)])) : (openBlock(), createElementBlock("div", _hoisted_46, [_hoisted_47, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))])])])]), createBaseVNode("div", _hoisted_48, [createBaseVNode("div", _hoisted_49, [createBaseVNode("div", _hoisted_50, [createBaseVNode("div", _hoisted_51, [_hoisted_52, createBaseVNode("div", _hoisted_53, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.dataset_name), 1)])]), createBaseVNode("div", _hoisted_54, [createVNode(QBtn, {
    style: {
      "color": "#2050cb"
    },
    icon: "fas fa-download",
    outline: "",
    size: "0.85em",
    label: "Data",
    "no-caps": "",
    onClick: _cache[1] || (_cache[1] = $event => $options.onClickedDownloadData($data.trainingDetails.dataset_name, $data.trainingDetails.training_parameters.dataset_type))
  })])])]), createBaseVNode("div", _hoisted_55, [createBaseVNode("div", _hoisted_56, [createBaseVNode("div", _hoisted_57, [_hoisted_58, createBaseVNode("div", _hoisted_59, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.pipeline_name) + " / " + toDisplayString($data.trainingDetails.pipeline_version), 1)])])])]), createBaseVNode("div", _hoisted_60, [createBaseVNode("div", _hoisted_61, [createBaseVNode("div", _hoisted_62, [_hoisted_63, $data.trainingDetails.training_parameters ? (openBlock(), createElementBlock("div", _hoisted_64, [createBaseVNode("span", null, toDisplayString($data.trainingDetails.training_parameters.search_space.length) + " Items", 1)])) : (openBlock(), createElementBlock("div", _hoisted_65, [_hoisted_66, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))]), createBaseVNode("div", _hoisted_67, [createVNode(QBtn, {
    "no-caps": "",
    style: {
      "color": "#2050cb"
    },
    outline: "",
    size: "0.85em",
    label: "View",
    onClick: _cache[2] || (_cache[2] = $event => $options.onClickedShowHyperParameters($data.trainingDetails.training_parameters.search_space))
  })])])])]), createBaseVNode("div", _hoisted_68, [createBaseVNode("div", _hoisted_69, [createBaseVNode("div", _hoisted_70, [createBaseVNode("div", _hoisted_71, [createBaseVNode("div", _hoisted_72, [_hoisted_73, createVNode(QIcon, {
    size: "1.3em",
    style: {
      "color": "#6c757d"
    },
    right: "",
    name: "fas fa-circle-question"
  }, {
    default: withCtx(() => [createVNode(QTooltip, {
      anchor: "center right",
      self: "center left"
    }, {
      default: withCtx(() => [createTextVNode(" A serving endpoint API in machine learning systems exposes a trained model, allowing it to receive input data and provide predictions or responses. ")]),
      _: 1
    })]),
    _: 1
  })]), $data.primaryServingModel ? (openBlock(), createElementBlock("div", _hoisted_74, [createVNode(QField, {
    dense: "",
    borderless: ""
  }, {
    control: withCtx(() => [$data.primaryServingModel != null ? (openBlock(), createElementBlock("div", _hoisted_75, [createBaseVNode("span", {
      ref: "message"
    }, toDisplayString($data.SERVING_ENPOINT_PREFIX) + "/rest/v1/serving/" + toDisplayString($data.trainingDetails.training_id), 513)])) : createCommentVNode("", true)]),
    append: withCtx(() => [createVNode(QBtn, {
      style: {
        "color": "#2050cb"
      },
      size: "sm",
      flat: "",
      dense: "",
      icon: "fas fa-copy",
      onClick: _cache[3] || (_cache[3] = $event => $options.copyTextNoInput())
    })]),
    _: 1
  })])) : (openBlock(), createElementBlock("div", _hoisted_76, [_hoisted_77, createVNode(QIcon, {
    right: "",
    color: "red",
    name: "fas fa-circle-exclamation"
  })]))]), createBaseVNode("div", _hoisted_78, [$data.primaryServingModel != null ? (openBlock(), createElementBlock("div", _hoisted_79, [createVNode(_component_router_link, {
    to: '/model-serving/serving-details/primary-' + $data.trainingDetails.training_id
  }, {
    default: withCtx(() => [_hoisted_80]),
    _: 1
  }, 8, ["to"]), createVNode(QIcon, {
    style: {
      "margin-left": "5px",
      "color": "#2050cb"
    },
    name: "fas fa-arrow-right"
  })])) : createCommentVNode("", true)])])])]), withDirectives(createBaseVNode("div", null, _hoisted_82, 512), [[vShow, $data.tableData.length > 0]]), $data.trainingDetails.status == 2 ? (openBlock(), createElementBlock("div", _hoisted_83, _hoisted_85)) : createCommentVNode("", true), $data.tableData.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_86, [createBaseVNode("div", _hoisted_87, [createVNode(QTable, {
    flat: "",
    columns: $data.tableHeader,
    rows: $data.tableData,
    "row-key": "id",
    pagination: $data.pagination
  }, {
    header: withCtx(props => [createVNode(QTr, {
      props: props
    }, {
      default: withCtx(() => [createVNode(QTh, {
        class: "header-table"
      }), (openBlock(true), createElementBlock(Fragment, null, renderList(props.cols, col => {
        return openBlock(), createBlock(QTh, {
          key: col.name,
          props: props,
          class: "header-table"
        }, {
          default: withCtx(() => [createTextVNode(toDisplayString(col.label), 1)]),
          _: 2
        }, 1032, ["props"]);
      }), 128))]),
      _: 2
    }, 1032, ["props"])]),
    body: withCtx(props => [createVNode(QTr, {
      props: props
    }, {
      default: withCtx(() => [createVNode(QTd, {
        "auto-width": "",
        class: "text-right"
      }, {
        default: withCtx(() => [createVNode(QBtn, {
          size: "6px",
          color: "black",
          flat: "",
          dense: "",
          onClick: $event => {
            props.expand = !props.expand;
            $options.onGetModelDetails(props.row);
          },
          icon: props.expand ? 'fas fa-chevron-down' : 'fas fa-chevron-right'
        }, null, 8, ["onClick", "icon"])]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.id), 1)]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.model_shortname), 1)]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.duration), 1)]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.mape), 1)]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.mse), 1)]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createTextVNode(toDisplayString(props.row.mae), 1)]),
        _: 2
      }, 1024), createVNode(QTd, {
        class: "status-column"
      }, {
        default: withCtx(() => [props.row.id == $data.bestModelId ? (openBlock(), createElementBlock("span", _hoisted_88, [createVNode(QChip, {
          size: "sm",
          style: {
            "background-color": "#ffc107",
            "color": "black",
            "font-weight": "bold"
          },
          label: "Best"
        })])) : createCommentVNode("", true), props.row.isPrimary ? (openBlock(), createElementBlock("span", _hoisted_89, [createVNode(QChip, {
          size: "sm",
          style: {
            "background-color": "#198754",
            "color": "white",
            "font-weight": "bold"
          },
          label: "Primary"
        })])) : createCommentVNode("", true), props.row.isServing ? (openBlock(), createElementBlock("span", _hoisted_90, " Serving ")) : (openBlock(), createElementBlock("span", _hoisted_91, "Paused"))]),
        _: 2
      }, 1024), createVNode(QTd, null, {
        default: withCtx(() => [createBaseVNode("div", _hoisted_92, [createBaseVNode("div", _hoisted_93, [props.row.isPrimary ? (openBlock(), createBlock(QBtn, {
          key: 0,
          style: {
            "color": "#198754"
          },
          dense: "",
          flat: "",
          size: "sm",
          icon: "fas fa-flag",
          onClick: $event => $options.onClickedSetPrimary(props.row)
        }, null, 8, ["onClick"])) : (openBlock(), createBlock(QBtn, {
          key: 1,
          style: {
            "color": "#b5babe"
          },
          dense: "",
          flat: "",
          size: "sm",
          icon: "fas fa-flag",
          onClick: $event => $options.onClickedSetPrimary(props.row)
        }, {
          default: withCtx(() => [createVNode(QTooltip, {
            style: {
              "background-color": "black",
              "color": "white",
              "font-family": "Roboto",
              "font-style": "normal",
              "font-weight": "400",
              "font-size": "12px"
            }
          }, {
            default: withCtx(() => [createTextVNode(" Set primary ")]),
            _: 1
          })]),
          _: 2
        }, 1032, ["onClick"]))]), createBaseVNode("div", _hoisted_94, [createVNode(QBtn, {
          disable: $data.tableData.length <= 1 || props.row.isPrimary,
          style: {
            "color": "#dc3545"
          },
          dense: "",
          flat: "",
          size: "sm",
          icon: "fas fa-trash",
          onClick: $event => $options.onClickedRemoveModel(props.row.id)
        }, null, 8, ["disable", "onClick"])])])]),
        _: 2
      }, 1024)]),
      _: 2
    }, 1032, ["props"]), props.expand ? (openBlock(), createBlock(QTr, {
      key: 0,
      props: props
    }, {
      default: withCtx(() => [createVNode(QTd, {
        colspan: "100%",
        "auto-width": ""
      }, {
        default: withCtx(() => [createVNode(_component_showModelDetails, {
          modelDetails: props.row,
          trainingDetails: $data.trainingDetails
        }, null, 8, ["modelDetails", "trainingDetails"])]),
        _: 2
      }, 1024)]),
      _: 2
    }, 1032, ["props"])) : createCommentVNode("", true)]),
    _: 1
  }, 8, ["columns", "rows", "pagination"])])])) : createCommentVNode("", true), createVNode(_component_changeTrainingNameModal, {
    ref: "modalChangeTrainingNameModal",
    onUpdateName: $options.updateName
  }, null, 8, ["onUpdateName"]), createVNode(_component_showHyperParametersModal, {
    ref: "showHyperParametersModal"
  }, null, 512), createVNode(_component_downloadDataModal, {
    ref: "downloadDataModal"
  }, null, 512)]);
}
const showTrainingDetails = /*#__PURE__*/_export_sfc(_sfc_main, [['render', _sfc_render], ['__scopeId', "data-v-91471faa"]]);

export { showTrainingDetails as default };
