import { QBreadcrumbs, QBreadcrumbsEl } from './QBreadcrumbs-d508f268.js';
import { QSeparator } from './QSeparator-f2beec84.js';
import { QItem, QItemSection } from './QItem-1f9e6dcc.js';
import { QList } from './QList-5be5d7fb.js';
import { MarkdownViewer } from './MarkdownViewer-d011cacb.js';
import { _export_sfc } from './_plugin-vue_export-helper-e9a2c33e.js';
import { createElementBlock, createBaseVNode, createVNode, withCtx, createTextVNode, resolveComponent, openBlock, pushScopeId, popScopeId } from './__federation_expose_Modules-a9c6a6fc.js';

const content = `
###### **What is a pipeline?**

*A pipeline* is a description of an ML workflow, including all of the components in the workflow and how they combine in the form of a graph. (See the screenshot below showing an example of a pipeline graph.) The pipeline includes the definition of the inputs (parameters) required to run the pipeline and the inputs and outputs of each component.  

*A pipeline component* is a self-contained set of user code, packaged as a Docker image, that performs one step in the pipeline. For example, a component can be responsible for data preprocessing, data transformation, model training, and so on.

###### **Example of a pipeline**

The screenshot below shows the example pipeline’s runtime execution graph:  
![MarineGEO circle logo](/images/mlpipeline_example.png#pipeline_example)
`;

const introduction_vue_vue_type_style_index_0_scoped_88693ad0_lang = '';

const _sfc_main = {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      value: content,
      activeWhatIsPipeline: true,
      activeExampleofPipeline: false
    };
  },
  methods: {
    setActive(section) {
      this.activeWhatIsPipeline = false;
      this.activeExampleofPipeline = false;
      if (section == 'what-is-pipeline') {
        this.activeWhatIsPipeline = true;
      } else if (section == 'example-of-pipeline') {
        this.activeExampleofPipeline = true;
      }
    }
  },
  mounted() {
    window.scrollTo(0, 0);
  }
};
const _withScopeId = n => (pushScopeId("data-v-88693ad0"), n = n(), popScopeId(), n);
const _hoisted_1 = {
  class: "row",
  style: {
    "column-gap": "10px"
  }
};
const _hoisted_2 = {
  class: "col"
};
const _hoisted_3 = {
  class: "row nav-text"
};
const _hoisted_4 = {
  class: "col"
};
const _hoisted_5 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Docs", -1));
const _hoisted_6 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Components", -1));
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Machine Learning Pipeline", -1));
const _hoisted_8 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Introduction", -1));
const _hoisted_9 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Introduction")], -1));
const _hoisted_10 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "subtitle"
}, [/*#__PURE__*/createBaseVNode("span", null, "An introduction to the main concepts of Machine Learning Pipelines")], -1));
const _hoisted_11 = {
  class: "col-3"
};
const _hoisted_12 = {
  style: {
    "position": "sticky",
    "top": "20px",
    "color": "#888888"
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_markdown_viewer = resolveComponent("markdown-viewer");
  const _component_router_link = resolveComponent("router-link");
  return openBlock(), createElementBlock("div", _hoisted_1, [createBaseVNode("div", _hoisted_2, [createBaseVNode("div", _hoisted_3, [createBaseVNode("div", _hoisted_4, [createVNode(QBreadcrumbs, null, {
    default: withCtx(() => [createVNode(QBreadcrumbsEl, {
      to: "/docs"
    }, {
      default: withCtx(() => [_hoisted_5]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components"
    }, {
      default: withCtx(() => [_hoisted_6]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components/mlpipeline/"
    }, {
      default: withCtx(() => [_hoisted_7]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components/mlpipeline/introduction"
    }, {
      default: withCtx(() => [_hoisted_8]),
      _: 1
    })]),
    _: 1
  })])]), _hoisted_9, _hoisted_10, createVNode(QSeparator), createBaseVNode("div", null, [createVNode(_component_markdown_viewer, {
    value: $data.value
  }, null, 8, ["value"])]), createBaseVNode("div", null, [createTextVNode(" Next, to delve into further component details of the predefined pipeline within the D2 system, please refer to the "), createVNode(_component_router_link, {
    to: "/docs/components/mlpipeline/mlpipeline-components"
  }, {
    default: withCtx(() => [createTextVNode("Pipeline Component Details section")]),
    _: 1
  }), createTextVNode(". ")])]), createBaseVNode("div", _hoisted_11, [createBaseVNode("div", _hoisted_12, [createVNode(QList, {
    dense: ""
  }, {
    default: withCtx(() => [createVNode(QItem, {
      active: $data.activeWhatIsPipeline,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#what-is-a-pipeline%3F'
      },
      onClick: _cache[0] || (_cache[0] = $event => $options.setActive('what-is-pipeline'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("What is a pipeline ?")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      active: $data.activeExampleofPipeline,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#example-of-a-pipeline'
      },
      onClick: _cache[1] || (_cache[1] = $event => $options.setActive('example-of-pipeline'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Example of a pipeline")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"])]),
    _: 1
  })])])]);
}
const introduction = /*#__PURE__*/_export_sfc(_sfc_main, [['render', _sfc_render], ['__scopeId', "data-v-88693ad0"]]);

export { introduction as default };
