import { QBreadcrumbs, QBreadcrumbsEl } from './QBreadcrumbs-d508f268.js';
import { QSeparator } from './QSeparator-f2beec84.js';
import { QImg } from './QImg-27d0ddcc.js';
import { QCarousel, QCarouselSlide } from './QCarousel-2ebc5d26.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, resolveComponent, openBlock, Fragment, renderList, createTextVNode, pushScopeId, popScopeId, createBlock } from './__federation_expose_Modules-a9c6a6fc.js';

const contentOverView = `
#### **Overview of User Interface**
The D2 Web UI is the graphical user interface for the platform, which includes:
- Training experiment configuration and management. 
- Serving API Endpoint testing.
- Model evaluation.
- Real-time model performance monitoring.
- Profile management.
`;

const contentUIModules = `
#### **User Interface Layout**

The layout of UI is shown as the image below:

![MarineGEO circle logo](/images/UI/UI_layout.png#UI_layout)

where:
1. **Header**: contains home button on the left and user settings button on the right.

![MarineGEO circle logo](/images/UI/UI_layout_header.png#UI_layout_header)

2. **Sidebar**: gives access to the D2 modules.

![MarineGEO circle logo](/images/UI/UI_layout_sidebar.png#UI_layout_sidebar)

3. **Main content**: shows the contain of the corresponding module.

![MarineGEO circle logo](/images/UI/UI_layout_main_content.png#UI_layout_main_content)

The WebApp's sidebar provides access to the following modules: *Model Training* and *Model Serving*.

#### **Model Training Module**

The *Model Training* module offers comprehensive functionality for creating and managing training experiments, encompassing several sub-modules.

##### ***Training List***

( **\`\`\` Model training > Training List \`\`\`** )

![MarineGEO circle logo](/images/UI/training_list.png#training_list)

1. New training button: allows users to initiate the process of creating a new training job by navigating them to a dedicated wizard interface.

![MarineGEO circle logo](/images/UI/training_list_new_training_button.png#training_list_new_training_button)

2. Search box: enables users to search for a specific training job by entering the corresponding Experiment ID.

![MarineGEO circle logo](/images/UI/training_list_search_box.png#training_list_search_box)

3. Training list: presents a table having multiple columns that includes a list of training experiments, providing a comprehensive overview of the conducted experiments.
    - Column \`\`\` \`Name\` \`\`\`: shows experiment name.
    - Column \`\`\` \`Resource\` \`\`\`: shows which source of dataset.
    - Column \`\`\` \`Pipeline\` \`\`\`: shows pipeline infomation.
    - Column \`\`\` \`Experiment ID\` \`\`\`: shows experiment ID.
    - Column \`\`\` \`Last Updated\` \`\`\`: shows the last updated time of the experiment.
    - Column \`\`\` \`Status\` \`\`\`: shows the status of the experiment.

![MarineGEO circle logo](/images/UI/training_list_list.png#training_list_list)
    
##### ***Training Details***
( **\`\`\` Model training > Training List > Training details > {Training ID} \`\`\`** )

This page is divied into 3 parts.
- Training details
- Hyperparmeters Parallel Coordinate Plot
- Models list

###### **Training Details**

![MarineGEO circle logo](/images/UI/training_details.png#training_details)

1. Navigation bar: navigates users between training list and training details.

![MarineGEO circle logo](/images/UI/training_details_navigation_bar.png#training_details_navigation_bar)

2. Training details: shows details of training job.
    - Training name: shows training name and users can edit it with \`\`\` \`Edit\` \`\`\` button.
    - Status: shows status of training job. It has 3 stage: *Running*, *Completed*, *Error*.
    - Last Updated: shows last updated time of training job.
    - Start time: shows the start time of training job.
    - End time: shows the end time of training job.
    - Duration: shows the duration of training job.
    - Resource ID: shows the dataset using in the trainin jobs and users can download it with \`\`\` \`Data\` \`\`\` button.
    - Pipeline : shows Pipeline name and Pipeline version.
    - Hyperparameters : shows the hyperparameters which the training job is currently tunning.

![MarineGEO circle logo](/images/UI/training_details_training_details.png#training_details_training_details)

###### **Hyperparmeters Parallel Coordinate Plot**

![MarineGEO circle logo](/images/UI/hyperparameters_plot_example.png#hyperparameters_plot_example)

This plot shows the result of hyperparameters tunning.

To see more details about hyperparameters optimization, you can visit [Hyperparameters Optimization Component](/docs/components/hpo).

###### **Models List**

![MarineGEO circle logo](/images/UI/training_model_list.png#training_model_list)

This table includes various details of the models that were constructed during the training job experiment.

- Column \`\`\` \`Trial No.\` \`\`\`: shows trial number.
- Column \`\`\` \`Model ID\` \`\`\`: shows model ID.
- Column \`\`\` \`Duration\` \`\`\`: shows duration of model training proces.
- Column \`\`\` \`MAPE\` \`\`\`: shows value of Mean Absolute Percentage Error.
- Column \`\`\` \`MSE\` \`\`\`: shows value of Mean Squared Error.
- Column \`\`\` \`MAE\` \`\`\`: shows value of Mean Absolute Error.
- Column \`\`\` \`Status\` \`\`\`: shows the status of model.
    - **Best**: model having best performance.
    - **Primary**: model as primary serving model.
- Column \`\`\` \`Action\` \`\`\`: trial number.
    1. Set primary: select this model as primary serving model.
    2. Delete: remove model. Users cannot delete the model having status as *primary*.

Moreover, users can access additional details of each model by clicking on an expand button located in each row.

##### ***Model Details***

When clicking the expanding button, model details is shown with 2 parts:
- Model details
- Model artifacts

###### **Model Details**

![MarineGEO circle logo](/images/UI/model_details.png#model_details)

This part shows the same information as presented in the models list table, accompanied by two additional details.

1. Serving point: shows Serving Endpoint API of the model and users can copy it for convenient. When clicking \`\`\` \`Serving details\` \`\`\` button, it will navigate users to Serving Details page.

![MarineGEO circle logo](/images/UI/model_details_serving_endpoint.png#model_details_serving_endpoint)

2. Hyperparameters: shows the values of the hyperparameters that the model was trained on.

![MarineGEO circle logo](/images/UI/model_details_hyperparameters.png#model_details_hyperparameters)

###### **Model Artifacts**

![MarineGEO circle logo](/images/UI/model_artifacts_1.png#model_artifacts)
![MarineGEO circle logo](/images/UI/model_artifacts_2.png#model_artifacts)
![MarineGEO circle logo](/images/UI/model_artifacts_3.png#model_artifacts)

Model artifacts including:
- Learning curve: Users can analyze the learning process more effectively by observing the learning curve graph, which provides insights into the model's training progress over time.
- Prediction visualization: provides an additional means to evaluate the model's performance. Users can select a specific time by utilizing the selection box to observe the corresponding prediction.
- Prediction table data: presents specific numeric values that allow for direct comparison between the model's predictions and the ground truth data. 

#### **Model Serving Module**

*Model Serving* module offers a comprehensive set of features for managing served models

##### ***Serving List***

( **\`\`\` Model serving > Serving List \`\`\`** )

![MarineGEO circle logo](/images/UI/serving_list.png#serving_list)

1. Search box: enables users to search for a specific Serving API endpoint by entering the corresponding training name.

![MarineGEO circle logo](/images/UI/serving_list_search_box.png#serving_list_search_box)

2. Serving List: presents a table having multiple columns that includes a list of serving API.
    - Column \`\`\` \`Endpoint\` \`\`\`: shows endpoint API.
    - Column \`\`\` \`Training Name\` \`\`\`: shows training name where the serving endpoint belongs to.
    - Column \`\`\` \`Last served\` \`\`\`: shows the time of last serving.
    - Column \`\`\` \`Status\` \`\`\`: shows status of serving endpoint API.

![MarineGEO circle logo](/images/UI/serving_list_list.png#serving_list_list)

##### ***Serving Details***

( **\`\`\` Model serving > Serving List > Serving Details > {Model ID}\`\`\`** )

###### **Serving Details**

![MarineGEO circle logo](/images/UI/serving_details.png#serving_details)

1. Navigation bar: navigates users between serving list and serving details.

![MarineGEO circle logo](/images/UI/serving_details_navigation_bar.png#serving_details_navigation_bar)

2. Model details: shows the information of \`\`\` \`{Training name - Model ID}\` \`\`\`. When clicking it, uers will be navigated to model details page.

![MarineGEO circle logo](/images/UI/serving_details_model_details.png#serving_details_model_details)

3. Serving details: provides information about the status of the serving process and the timestamp indicating the last time the serving API was utilized.

![MarineGEO circle logo](/images/UI/serving_details_serve_details.png#serving_details_serve_details)

4. Serving Endpoint API information: provides details about the parameters that need to be included when using the Serving API endpoint. This information guides users on how to properly interact with the endpoint for model serving purposes.

![MarineGEO circle logo](/images/UI/serving_details_api_info.png#serving_details_api_info)

###### **Serving API Testing**

To know how to try an APIs, you can visit [Testing Serving Endpoint APIs section](/docs/how-to-use/testing-serving-endpoint-apis).

`;

const slide_home = "/assets/slide_home-25c8235e.png";

const slide_list_training = "/assets/slide_list_training-55465333.png";

const slide_training_details_1 = "/assets/slide_training_details_1-0c646bda.png";

const slide_training_details_2 = "/assets/slide_training_details_2-d6c076f7.png";

const slide_training_details_3 = "/assets/slide_training_details_3-dfaa6c41.png";

const slide_serving_list = "/assets/slide_serving_list-ba8c52ad.png";

const slide_serving_details_1 = "/assets/slide_serving_details_1-693bfe37.png";

const slide_serving_details_2 = "/assets/slide_serving_details_2-f7998f65.png";

const componentsUIPage_vue_vue_type_style_index_0_scoped_cdc2f4dd_lang = '';

const _sfc_main = {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      contentOverView: contentOverView,
      contentUIModules: contentUIModules,
      slideItems: [{
        linkImage: slide_home
      }, {
        linkImage: slide_list_training
      }, {
        linkImage: slide_training_details_1
      }, {
        linkImage: slide_training_details_2
      }, {
        linkImage: slide_training_details_3
      }, {
        linkImage: slide_serving_list
      }, {
        linkImage: slide_serving_details_1
      }, {
        linkImage: slide_serving_details_2
      }],
      slide: '0',
      activeOverviewofUI: true,
      activeUILayout: false,
      activeTrainingModule: false,
      activeTrainingList: false,
      activeTrainingDetails: false,
      activePlot: false,
      activeModelList: false,
      activeModelDetails: false,
      activeModelArtifacts: false,
      activeServingModule: false,
      activeServingList: false,
      activeServingDetails: false,
      activeSeringAPITesting: false
    };
  },
  methods: {
    setActive(section) {
      this.activeOverviewofUI = false;
      this.activeUILayout = false;
      this.activeTrainingModule = false;
      this.activeTrainingList = false;
      this.activeTrainingDetails = false;
      this.activePlot = false;
      this.activeModelList = false;
      this.activeModelDetails = false;
      this.activeModelArtifacts = false;
      this.activeServingModule = false;
      this.activeServingList = false;
      this.activeServingDetails = false;
      this.activeSeringAPITesting = false;
      if (section == 'activeOverviewofUI') {
        this.activeOverviewofUI = true;
      } else if (section == 'activeUILayout') {
        this.activeUILayout = true;
      } else if (section == 'activeTrainingModule') {
        this.activeTrainingModule = true;
      } else if (section == 'activeTrainingList') {
        this.activeTrainingList = true;
      } else if (section == 'activeTrainingDetails') {
        this.activeTrainingDetails = true;
      } else if (section == 'activePlot') {
        this.activePlot = true;
      } else if (section == 'activeModelList') {
        this.activeModelList = true;
      } else if (section == 'activeModelDetails') {
        this.activeModelDetails = true;
      } else if (section == 'activeModelArtifacts') {
        this.activeModelArtifacts = true;
      } else if (section == 'activeServingModule') {
        this.activeServingModule = true;
      } else if (section == 'activeServingList') {
        this.activeServingList = true;
      } else if (section == 'activeServingDetails') {
        this.activeServingDetails = true;
      } else if (section == 'activeSeringAPITesting') {
        this.activeSeringAPITesting = true;
      }
    }
  },
  mounted() {
    window.scrollTo(0, 0);
  }
};
const _withScopeId = n => (pushScopeId("data-v-cdc2f4dd"), 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, "How to use", -1));
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "User Interface (UI)", -1));
const _hoisted_8 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title"
}, [/*#__PURE__*/createBaseVNode("span", null, "User Interface (UI)")], -1));
const _hoisted_9 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "subtitle"
}, [/*#__PURE__*/createBaseVNode("span", null, "Overview of the D2 user interfaces (UI)")], -1));
const _hoisted_10 = {
  class: "section"
};
const _hoisted_11 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", null, null, -1));
const _hoisted_12 = {
  class: "section"
};
const _hoisted_13 = {
  class: "col-3"
};
const _hoisted_14 = {
  style: {
    "position": "sticky",
    "top": "20px",
    "color": "#888888"
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_markdown_viewer = resolveComponent("markdown-viewer");
  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/how-to-use"
    }, {
      default: withCtx(() => [_hoisted_6]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/how-to-use/user-interface"
    }, {
      default: withCtx(() => [_hoisted_7]),
      _: 1
    })]),
    _: 1
  })])]), _hoisted_8, _hoisted_9, createVNode(QSeparator), createBaseVNode("div", _hoisted_10, [createVNode(_component_markdown_viewer, {
    value: $data.contentOverView
  }, null, 8, ["value"])]), createBaseVNode("div", null, [createVNode(QCarousel, {
    modelValue: $data.slide,
    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.slide = $event),
    autoplay: 2000,
    swipeable: "",
    animated: "",
    infinite: "",
    "control-color": "black",
    arrows: "",
    "transition-next": "slide-left",
    "transition-prev": "slide-right",
    "transition-duration": "700",
    height: "500px",
    style: {
      "border-style": "solid",
      "border-color": "#d9d9d9",
      "border-width": "1px",
      "border-radius": "7px"
    }
  }, {
    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($data.slideItems, (item, index) => {
      return openBlock(), createBlock(QCarouselSlide, {
        key: index,
        name: index + ''
      }, {
        default: withCtx(() => [_hoisted_11, createVNode(QImg, {
          fit: "contain",
          height: "480px",
          src: item.linkImage,
          alt: ""
        }, null, 8, ["src"])]),
        _: 2
      }, 1032, ["name"]);
    }), 128))]),
    _: 1
  }, 8, ["modelValue"])]), createBaseVNode("div", _hoisted_12, [createVNode(_component_markdown_viewer, {
    value: $data.contentUIModules
  }, null, 8, ["value"])])]), createBaseVNode("div", _hoisted_13, [createBaseVNode("div", _hoisted_14, [createVNode(QList, {
    dense: ""
  }, {
    default: withCtx(() => [createVNode(QItem, {
      active: $data.activeOverviewofUI,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#overview-of-user-interface'
      },
      onClick: _cache[1] || (_cache[1] = $event => $options.setActive('activeOverviewofUI'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Overview of User Interface")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      active: $data.activeUILayout,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#user-interface-layout'
      },
      onClick: _cache[2] || (_cache[2] = $event => $options.setActive('activeUILayout'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("User Interface Layout")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      active: $data.activeTrainingModule,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#model-training-module'
      },
      onClick: _cache[3] || (_cache[3] = $event => $options.setActive('activeTrainingModule'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Model Training Module")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      "inset-level": 0.5
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createVNode(QList, {
          dense: ""
        }, {
          default: withCtx(() => [createVNode(QItem, {
            active: $data.activeTrainingList,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#training-list'
            },
            onClick: _cache[4] || (_cache[4] = $event => $options.setActive('activeTrainingList'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Training List")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            active: $data.activeTrainingDetails,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#training-details'
            },
            onClick: _cache[5] || (_cache[5] = $event => $options.setActive('activeTrainingDetails'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Training Details")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            "inset-level": 0.5
          }, {
            default: withCtx(() => [createVNode(QList, {
              dense: ""
            }, {
              default: withCtx(() => [createVNode(QItem, {
                active: $data.activeTrainingDetails,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#training-details'
                },
                onClick: _cache[6] || (_cache[6] = $event => $options.setActive('activeTrainingDetails'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Training Details ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"]), createVNode(QItem, {
                active: $data.activePlot,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#hyperparmeters-parallel-coordinate-plot'
                },
                onClick: _cache[7] || (_cache[7] = $event => $options.setActive('activePlot'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Hyperparmeters Parallel Coordinate Plot ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"]), createVNode(QItem, {
                active: $data.activeModelList,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#models-list'
                },
                onClick: _cache[8] || (_cache[8] = $event => $options.setActive('activeModelList'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Models List ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"])]),
              _: 1
            })]),
            _: 1
          }, 8, ["inset-level"]), createVNode(QItem, {
            active: $data.activeModelDetails,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#model-details'
            },
            onClick: _cache[9] || (_cache[9] = $event => $options.setActive('activeModelDetails'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Model Details")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            "inset-level": 0.5
          }, {
            default: withCtx(() => [createVNode(QList, {
              dense: ""
            }, {
              default: withCtx(() => [createVNode(QItem, {
                active: $data.activeModelDetails,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#model-details'
                },
                onClick: _cache[10] || (_cache[10] = $event => $options.setActive('activeModelDetails'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Model Details ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"]), createVNode(QItem, {
                active: $data.activeModelArtifacts,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#model-artifacts'
                },
                onClick: _cache[11] || (_cache[11] = $event => $options.setActive('activeModelArtifacts'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Model Artifacts ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"])]),
              _: 1
            })]),
            _: 1
          }, 8, ["inset-level"])]),
          _: 1
        })]),
        _: 1
      })]),
      _: 1
    }, 8, ["inset-level"]), createVNode(QItem, {
      active: $data.activeServingModule,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#model-serving-module'
      },
      onClick: _cache[12] || (_cache[12] = $event => $options.setActive('activeServingModule'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Model Serving Module")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      "inset-level": 0.5
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createVNode(QList, {
          dense: ""
        }, {
          default: withCtx(() => [createVNode(QItem, {
            active: $data.activeServingList,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#serving-list'
            },
            onClick: _cache[13] || (_cache[13] = $event => $options.setActive('activeServingList'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Serving List")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            active: $data.activeServingDetails,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#serving-details'
            },
            onClick: _cache[14] || (_cache[14] = $event => $options.setActive('activeServingDetails'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Serving Details")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            "inset-level": 0.5
          }, {
            default: withCtx(() => [createVNode(QList, {
              dense: ""
            }, {
              default: withCtx(() => [createVNode(QItem, {
                active: $data.activeServingDetails,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#serving-details'
                },
                onClick: _cache[15] || (_cache[15] = $event => $options.setActive('activeServingDetails'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode("Serving Details")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"]), createVNode(QItem, {
                active: $data.activeSeringAPITesting,
                "active-class": "text-bold",
                "manual-focus": "",
                dense: "",
                clickable: "",
                to: {
                  hash: '#serving-api-testing'
                },
                onClick: _cache[16] || (_cache[16] = $event => $options.setActive('activeSeringAPITesting'))
              }, {
                default: withCtx(() => [createVNode(QItemSection, {
                  class: "q-item-text"
                }, {
                  default: withCtx(() => [createTextVNode(" Serving API Testing ")]),
                  _: 1
                })]),
                _: 1
              }, 8, ["active"])]),
              _: 1
            })]),
            _: 1
          }, 8, ["inset-level"])]),
          _: 1
        })]),
        _: 1
      })]),
      _: 1
    }, 8, ["inset-level"])]),
    _: 1
  })])])]);
}
const componentsUIPage = /*#__PURE__*/_export_sfc(_sfc_main, [['render', _sfc_render], ['__scopeId', "data-v-cdc2f4dd"]]);

export { componentsUIPage as default };
