From f65b2fecbadd4afb92a1212cafc545228bd14d31 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 20 Jun 2024 10:39:24 +1200
Subject: [PATCH 01/28] Add provenance info in sidebar

---
 src/components.d.ts                     |   3 +
 src/components/ExternalResourceCard.vue | 113 +++++
 src/components/ProvenancePopup.vue      | 538 ++++++++++++++++++++++++
 src/components/SearchFilters.vue        |   8 +-
 src/components/SideBar.vue              |  91 +++-
 src/components/Tabs.vue                 |   3 +-
 6 files changed, 750 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ExternalResourceCard.vue
 create mode 100644 src/components/ProvenancePopup.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index ecc910aa..83b8b2c9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,13 +16,16 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ExternalResourceCard.vue b/src/components/ExternalResourceCard.vue
new file mode 100644
index 00000000..68d459ef
--- /dev/null
+++ b/src/components/ExternalResourceCard.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="resource-container">
+    <template v-for="resource in resources" :key="resource.id">
+      <div class="resource">
+        <el-button
+          v-if="resource.id === 'pubmed'"
+          class="button"
+          id="open-pubmed-button"
+          :icon="ElIconNotebook"
+          @click="openUrl(resource.url)"
+        >
+          Open publications in pubmed
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import {
+  Notebook as ElIconNotebook,
+} from '@element-plus/icons-vue'
+/* eslint-disable no-alert, no-console */
+import { ElButton as Button } from 'element-plus'
+import EventBus from './EventBus'
+
+export default {
+  name: 'ExternalResourceCard',
+  components: {
+    Button,
+  },
+  props: {
+    resources: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: function () {
+    return {
+      pubmeds: [],
+      pubmedIds: [],
+      ElIconNotebook: shallowRef(ElIconNotebook)
+    }
+  },
+  methods: {
+    capitalise: function (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    },
+    openUrl: function (url) {
+      EventBus.emit('open-pubmed-url', url);
+      window.open(url, '_blank')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.resource-container {
+  margin-top: 0.5em;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.attribute-content {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.el-link {
+  color: $app-primary-color;
+  text-decoration: none;
+  word-wrap: break-word;
+  &:hover,
+  &:focus {
+    color: $app-primary-color;
+  }
+}
+
+:deep(.el-carousel__button) {
+  background-color: $app-primary-color;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+  & + .button {
+    margin-top: 10px !important;
+    background-color: $app-primary-color;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/components/ProvenancePopup.vue b/src/components/ProvenancePopup.vue
new file mode 100644
index 00000000..860efcd2
--- /dev/null
+++ b/src/components/ProvenancePopup.vue
@@ -0,0 +1,538 @@
+<template>
+  <div v-if="entry" class="main" v-loading="loading">
+    <!-- 
+    <div class="block" v-if="entry.title">
+      <div class="title">{{ capitalise(entry.title) }}</div>
+      <div
+        v-if="
+          entry.provenanceTaxonomyLabel &&
+          entry.provenanceTaxonomyLabel.length > 0
+        "
+        class="subtitle"
+      >
+        {{ provSpeciesDescription }}
+      </div>
+    </div>
+    <div class="block" v-else>
+      <div class="title">{{ entry.featureId }}</div>
+    </div>
+    -->
+    <div v-if="featuresAlert" class="attribute-title-container">
+      <span class="attribute-title">Alert</span>
+      <el-popover
+        width="250"
+        trigger="hover"
+        :teleported="false"
+        popper-class="popover-origin-help"
+      >
+        <template #reference>
+          <el-icon class="info"><el-icon-warning /></el-icon>
+        </template>
+        <span style="word-break: keep-all">
+          {{ featuresAlert }}
+        </span>
+      </el-popover>
+    </div>
+    <!--
+    <div v-show="showDetails" class="hide" id="hide-path-info" @click="showDetails = false">
+      Hide path information
+      <el-icon><el-icon-arrow-up /></el-icon>
+    </div>
+    <div v-show="!showDetails" class="hide" id="show-path-info" @click="showDetails = true">
+      Show path information
+      <el-icon><el-icon-arrow-down /></el-icon>
+    </div>
+    -->
+    <!-- <transition name="slide-fade"> -->
+      <div class="content-container scrollbar">
+        {{ entry.paths }}
+        <div v-if="entry.origins && entry.origins.length > 0" class="block">
+          <div class="attribute-title-container">
+            <span class="attribute-title">Origin</span>
+            <el-popover
+              width="250"
+              trigger="hover"
+              :teleported="false"
+              popper-class="popover-origin-help"
+            >
+              <template #reference>
+                <el-icon class="info"><el-icon-warning /></el-icon>
+              </template>
+              <span style="word-break: keep-all">
+                <i>Origin</i> {{ originDescription }}
+              </span>
+
+            </el-popover>
+          </div>
+          <div
+            v-for="(origin, i) in entry.origins"
+            class="attribute-content"
+            :origin-item-label="origin"
+            :key="origin"
+          >
+            {{ capitalise(origin) }}
+            <div v-if="i != entry.origins.length - 1" class="seperator"></div>
+          </div>
+          <el-button
+            v-show="
+              entry.originsWithDatasets && entry.originsWithDatasets.length > 0
+            "
+            class="button"
+            id="open-dendrites-button"
+            @click="openDendrites"
+          >
+            Explore origin data
+          </el-button>
+        </div>
+        <div
+          v-if="entry.components && entry.components.length > 0"
+          class="block"
+        >
+          <div class="attribute-title-container">
+            <div class="attribute-title">Components</div>
+          </div>
+          <div
+            v-for="(component, i) in entry.components"
+            class="attribute-content"
+            :component-item-label="component"
+            :key="component"
+          >
+            {{ capitalise(component) }}
+            <div
+              v-if="i != entry.components.length - 1"
+              class="seperator"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-if="entry.destinations && entry.destinations.length > 0"
+          class="block"
+        >
+          <div class="attribute-title-container">
+            <span class="attribute-title">Destination</span>
+            <el-popover
+              width="250"
+              trigger="hover"
+              :teleported="false"
+              popper-class="popover-origin-help"
+            >
+              <template #reference>
+                <el-icon class="info"><el-icon-warning /></el-icon>
+              </template>
+              <span style="word-break: keep-all">
+                <i>Destination</i> is where the axons terminate
+              </span>
+            </el-popover>
+          </div>
+          <div
+            v-for="(destination, i) in entry.destinations"
+            class="attribute-content"
+            :destination-item-label="destination"
+            :key="destination"
+          >
+            {{ capitalise(destination) }}
+            <div
+              v-if="i != entry.destinations.length - 1"
+              class="seperator"
+            ></div>
+          </div>
+          <el-button
+            v-show="
+              entry.destinationsWithDatasets &&
+              entry.destinationsWithDatasets.length > 0
+            "
+            class="button"
+            @click="openAxons"
+          >
+            Explore destination data
+          </el-button>
+        </div>
+
+        <el-button
+          v-show="
+            entry.componentsWithDatasets &&
+            entry.componentsWithDatasets.length > 0
+          "
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
+
+        <external-resource-card :resources="resources"></external-resource-card>
+      </div>
+    <!-- </transition> -->
+  </div>
+</template>
+
+<script>
+import {
+  ArrowUp as ElIconArrowUp,
+  ArrowDown as ElIconArrowDown,
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
+/* eslint-disable no-alert, no-console */
+import {
+  ElButton as Button,
+  ElContainer as Container,
+  ElIcon as Icon,
+} from 'element-plus'
+
+import EventBus from './EventBus'
+import ExternalResourceCard from './ExternalResourceCard.vue'
+
+const titleCase = (str) => {
+  return str.replace(/\w\S*/g, (t) => {
+    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
+  })
+}
+
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
+  return ''
+}
+
+export default {
+  name: 'ProvenancePopup',
+  components: {
+    Button,
+    Container,
+    Icon,
+    ExternalResourceCard,
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconWarning,
+  },
+  props: {
+    entry: {
+      type: Object,
+      default: () => ({
+        destinations: [],
+        origins: [],
+        components: [],
+        destinationsWithDatasets: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        resource: undefined,
+      }),
+    },
+  },
+  // inject: ['getFeaturesAlert'],
+  data: function () {
+    return {
+      controller: undefined,
+      activeSpecies: undefined,
+      pubmedSearchUrl: '',
+      loading: false,
+      showToolip: false,
+      showDetails: false,
+      originDescriptions: {
+        motor: 'is the location of the initial cell body of the circuit',
+        sensory: 'is the location of the initial cell body in the PNS circuit',
+      },
+      componentsWithDatasets: [],
+      uberons: [{ id: undefined, name: undefined }],
+    }
+  },
+  computed: {
+    featuresAlert() {
+      // return this.getFeaturesAlert()
+    },
+    resources: function () {
+      let resources = []
+      if (this.entry && this.entry.hyperlinks) {
+        resources = this.entry.hyperlinks
+      }
+      return resources
+    },
+    originDescription: function () {
+      if (
+        this.entry &&
+        this.entry.title &&
+        this.entry.title.toLowerCase().includes('motor')
+      ) {
+        return this.originDescriptions.motor
+      } else {
+        return this.originDescriptions.sensory
+      }
+    },
+    provSpeciesDescription: function () {
+      let text = 'Studied in'
+      this.entry.provenanceTaxonomyLabel.forEach((label) => {
+        text += ` ${label},`
+      })
+      text = text.slice(0, -1) // remove last comma
+      text += ' species'
+      return text
+    },
+  },
+  methods: {
+    titleCase: function (title) {
+      return titleCase(title)
+    },
+    capitalise: function (text) {
+      return capitalise(text)
+    },
+    openUrl: function (url) {
+      window.open(url, '_blank')
+    },
+    openAll: function () {
+      EventBus.emit('onProvenanceActionClick', {
+        type: 'Facets',
+        labels: this.entry.componentsWithDatasets.map((a) => a.name),
+      })
+    },
+    openAxons: function () {
+      EventBus.emit('onProvenanceActionClick', {
+        type: 'Facets',
+        labels: this.entry.destinationsWithDatasets.map((a) => a.name),
+      })
+    },
+    openDendrites: function () {
+      EventBus.emit('onProvenanceActionClick', {
+        type: 'Facets',
+        labels: this.entry.originsWithDatasets.map((a) => a.name),
+      })
+    },
+    pubmedSearchUrlUpdate: function (val) {
+      this.pubmedSearchUrl = val
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.display {
+  width: 44px;
+  word-break: normal;
+}
+
+.title {
+  text-align: left;
+  // width: 16em;
+  line-height: 1.5em !important;
+  font-size: 18px;
+  font-family: Helvetica;
+  font-weight: bold;
+  padding-bottom: 8px;
+  color: $app-primary-color;
+}
+
+.block {
+  margin-bottom: 0.5em;
+
+  .main > &:first-of-type {
+    margin-right: 1em;
+  }
+}
+
+.pub {
+  width: 16rem;
+}
+
+.icon {
+  right: 0px;
+  position: absolute;
+  top: 10px;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+:deep(.popover-origin-help.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
+.info {
+  transform: rotate(180deg);
+  color: #8300bf;
+  margin-left: 8px;
+}
+
+.seperator {
+  width: 90%;
+  height: 1px;
+  background-color: #bfbec2;
+}
+
+.hide {
+  color: $app-primary-color;
+  cursor: pointer;
+  margin-right: 6px;
+  margin-top: 3px;
+}
+
+.slide-fade-enter-active {
+  transition: opacity 0.5s, transform 0.5s;
+}
+.slide-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  padding: 1em !important;
+  overflow: hidden;
+  min-width: 16rem;
+}
+
+.attribute-title-container {
+  margin-bottom: 0.5em;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.attribute-content {
+  font-size: 14px;
+  font-weight: 500;
+
+  &:last-of-type {
+    margin-bottom: 0.5em;
+  }
+}
+
+.popover-container {
+  height: 100%;
+  width: 100%;
+}
+
+.main {
+  .el-button.is-round {
+    border-radius: 4px;
+    padding: 9px 20px 10px 20px;
+    display: flex;
+    height: 36px;
+  }
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+  & + .button {
+    margin-top: 10px !important;
+  }
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.tooltip-container {
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    flex-shrink: 0;
+  }
+  .tooltip {
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.maplibregl-popup-anchor-bottom {
+  .tooltip-container {
+    &::after,
+    &::before {
+      top: 100%;
+      border-width: 12px;
+    }
+    &::after {
+      margin-top: -1px;
+      border-color: rgb(255, 255, 255) transparent transparent transparent;
+    }
+    &::before {
+      margin: 0 auto;
+      border-color: $app-primary-color transparent transparent transparent;
+    }
+  }
+}
+
+.maplibregl-popup-anchor-top {
+  .tooltip-container {
+    &::after,
+    &::before {
+      top: -24px;
+      border-width: 12px;
+    }
+    &::after {
+      margin-top: 1px;
+      border-color: transparent transparent rgb(255, 255, 255) transparent;
+    }
+    &::before {
+      margin: 0 auto;
+      border-color: transparent transparent $app-primary-color transparent;
+    }
+  }
+}
+
+.content-container {
+  overflow-y: auto;
+  scrollbar-width: thin !important;
+  max-height: 100%;
+  flex: 1 1 100%;
+  padding-bottom: 1rem;
+
+  .block {
+    padding-top: 0.5em;
+  }
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
+/* Fix for chrome bug where under triangle pops up above one on top of it  */
+.selector:not(*:root),
+.tooltip-container::after {
+  top: 99.4%;
+}
+</style>
diff --git a/src/components/SearchFilters.vue b/src/components/SearchFilters.vue
index 48e58d98..0bc3d269 100644
--- a/src/components/SearchFilters.vue
+++ b/src/components/SearchFilters.vue
@@ -793,10 +793,14 @@ export default {
 
 <style lang="scss" scoped>
 
+.filters {
+  position: relative;
+}
+
 .cascader-tag {
   position: absolute;
-  top: 110px;
-  left: 50px;
+  top: 8px;
+  left: 8px;
   z-index: 1;
   display: flex;
   gap: 4px;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 87f223db..9b87c261 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -21,6 +21,26 @@
           <el-icon><el-icon-arrow-right /></el-icon>
         </div>
         <div class="sidebar-container">
+
+          <!-- Provenance Info Title -->
+          <div v-if="provenanceEntry" class="provenance-info-title">
+            <div class="block" v-if="provenanceEntry.title">
+              <div class="title">{{ capitalise(provenanceEntry.title) }}</div>
+              <div
+                v-if="
+                  provenanceEntry.provenanceTaxonomyLabel &&
+                  provenanceEntry.provenanceTaxonomyLabel.length > 0
+                "
+                class="subtitle"
+              >
+                {{ provSpeciesDescription() }}
+              </div>
+            </div>
+            <div class="block" v-else>
+              <div class="title">{{ provenanceEntry.featureId }}</div>
+            </div>
+          </div>
+
           <Tabs
             v-if="tabs.length > 1"
             :tabTitles="tabs"
@@ -28,6 +48,15 @@
             @titleClicked="tabClicked"
           />
           <template v-for="tab in tabs" key="tab.id">
+            <!-- Provenance Info -->
+            <template v-if="tab.id === 2">
+              <provenance-popup
+                :entry="provenanceEntry"
+                v-show="tab.id === activeId"
+                :ref="tab.id"
+              />
+            </template>
+            <template v-else>
             <SidebarContent
               class="sidebar-content-container"
               v-show="tab.id === activeId"
@@ -37,6 +66,7 @@
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
+            </template>
           </template>
         </div>
       </div>
@@ -54,6 +84,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
+import ProvenancePopup from './ProvenancePopup.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -65,7 +96,8 @@ export default {
     ElIconArrowLeft,
     ElIconArrowRight,
     Drawer,
-    Icon
+    Icon,
+    ProvenancePopup,
   },
   name: 'SideBar',
   props: {
@@ -91,7 +123,10 @@ export default {
      */
     tabs: {
       type: Array,
-      default: () => [{ title: 'flatmap', id: 1 }],
+      default: () => [
+        { title: 'Search', id: 1 },
+        { title: 'Overview', id: 2 }
+      ],
     },
     /**
      * The active tab id for default tab.
@@ -107,6 +142,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The provenance info data to show in sidebar.
+     */
+    provenanceEntry: {
+      type: Object,
+      default: null,
+    },
   },
   data: function () {
     return {
@@ -146,7 +188,7 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        this.$refs[this.activeId][0].openSearch(facets, query)
+        this.$refs[1][0].openSearch(facets, query)
       })
     },
     /**
@@ -193,6 +235,19 @@ export default {
        */
       this.$emit('tabClicked', id)
     },
+    capitalise: function (text) {
+      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
+      return '';
+    },
+    provSpeciesDescription: function () {
+      let text = 'Studied in';
+      this.provenanceEntry.provenanceTaxonomyLabel.forEach((label) => {
+        text += ` ${label},`;
+      });
+      text = text.slice(0, -1); // remove last comma
+      text += ' species';
+      return text;
+    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart
@@ -205,6 +260,10 @@ export default {
        */
       this.$emit('actionClick', payLoad)
     })
+    EventBus.on('onProvenanceActionClick', (payLoad) => {
+      this.tabClicked(1);
+      this.$emit('actionClick', payLoad)
+    });
     EventBus.on('available-facets', (payLoad) => {
       this.$emit('search-changed', {
         type: 'available-facets',
@@ -233,6 +292,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.provenance-info-title {
+  padding: 1rem;
+}
+
+.title {
+  text-align: left;
+  // width: 16em;
+  line-height: 1.5em !important;
+  font-size: 18px;
+  font-family: Helvetica;
+  font-weight: bold;
+  padding-bottom: 8px;
+  color: $app-primary-color;
+}
+
+.block {
+  margin-bottom: 0.5em;
+
+  .main > &:first-of-type {
+    margin-right: 1em;
+  }
+}
+
 .box-card {
   flex: 3;
   height: 100%;
@@ -260,6 +342,9 @@ export default {
   height: 100%;
   flex-flow: column;
   display: flex;
+  background-color: white;
+  box-shadow: var(--el-box-shadow-light);
+  border-radius: var(--el-card-border-radius);
 }
 
 .open-tab {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index d1430eb6..142747b5 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -40,12 +40,13 @@ export default {
 <style lang="scss" scoped>
 .tab-container {
   height: 28px;
+  border-bottom: 1px solid var(--el-border-color);
 }
 
 .title {
   width: 101px;
   height: 28px;
-  border: solid 1px $lineColor1;
+  border: 1px solid var(--el-border-color);
   border-bottom: none;
   background-color: white;
   display: inline-block;

From 9fea4e7cadc5743d62d952f09b562b23f8f5b3a5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 21 Jun 2024 11:18:53 +1200
Subject: [PATCH 02/28] Update styles for provenance info

---
 src/components/ProvenancePopup.vue |  9 ++++++---
 src/components/SideBar.vue         |  4 +++-
 src/components/Tabs.vue            | 12 ++++++++++--
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ProvenancePopup.vue b/src/components/ProvenancePopup.vue
index 860efcd2..62113575 100644
--- a/src/components/ProvenancePopup.vue
+++ b/src/components/ProvenancePopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
-    <!-- 
+    <!--
     <div class="block" v-if="entry.title">
       <div class="title">{{ capitalise(entry.title) }}</div>
       <div
@@ -389,9 +389,11 @@ export default {
   font-family: Asap, sans-serif, Helvetica;
   font-weight: 400;
   /* outline: thin red solid; */
-  padding: 1em !important;
   overflow: hidden;
   min-width: 16rem;
+  background-color: #f7faff;
+  height: 100%;
+  border-top: 1px solid var(--el-border-color);
 }
 
 .attribute-title-container {
@@ -506,7 +508,8 @@ export default {
   scrollbar-width: thin !important;
   max-height: 100%;
   flex: 1 1 100%;
-  padding-bottom: 1rem;
+  padding: 1rem;
+  box-sizing: border-box;
 
   .block {
     padding-top: 0.5em;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 9b87c261..ff9df7fa 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -42,7 +42,7 @@
           </div>
 
           <Tabs
-            v-if="tabs.length > 1"
+            v-if="tabs.length > 1 && provenanceEntry"
             :tabTitles="tabs"
             :activeId="activeId"
             @titleClicked="tabClicked"
@@ -402,6 +402,8 @@ export default {
 
 .sidebar-content-container {
   flex: 1 1 auto;
+  border-radius: 0;
+  border: 0 none;
 }
 </style>
 
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 142747b5..12f53a49 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="tab-container">
-    <div class="title" v-for="title in tabTitles" :key="title.id">
+    <div
+      class="title"
+      v-for="title in tabTitles"
+      :key="title.id"
+      :class="{ 'active-tab': title.id == activeId }"
+    >
       <div
         class="title-text-table"
         v-bind:class="{ highlightText: title.id == activeId }"
@@ -40,7 +45,6 @@ export default {
 <style lang="scss" scoped>
 .tab-container {
   height: 28px;
-  border-bottom: 1px solid var(--el-border-color);
 }
 
 .title {
@@ -73,6 +77,10 @@ export default {
   color: $app-primary-color;
 }
 
+.active-tab {
+  border-color: $app-primary-color;
+}
+
 .highlightText {
   color: $app-primary-color;
 }

From a3f4ab2ba9cf74d8fe644c5417f9ea867a17bd55 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 24 Jun 2024 10:06:48 +1200
Subject: [PATCH 03/28] Move pubmed button of provenance info into title area

---
 src/components/ProvenancePopup.vue | 22 --------
 src/components/SideBar.vue         | 81 ++++++++++++++++++++++++------
 src/components/SidebarContent.vue  | 20 ++++++--
 src/components/Tabs.vue            |  7 ++-
 4 files changed, 87 insertions(+), 43 deletions(-)

diff --git a/src/components/ProvenancePopup.vue b/src/components/ProvenancePopup.vue
index 62113575..9ab3d857 100644
--- a/src/components/ProvenancePopup.vue
+++ b/src/components/ProvenancePopup.vue
@@ -158,8 +158,6 @@
         >
           Search for data on components
         </el-button>
-
-        <external-resource-card :resources="resources"></external-resource-card>
       </div>
     <!-- </transition> -->
   </div>
@@ -179,7 +177,6 @@ import {
 } from 'element-plus'
 
 import EventBus from './EventBus'
-import ExternalResourceCard from './ExternalResourceCard.vue'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -198,7 +195,6 @@ export default {
     Button,
     Container,
     Icon,
-    ExternalResourceCard,
     ElIconArrowUp,
     ElIconArrowDown,
     ElIconWarning,
@@ -238,13 +234,6 @@ export default {
     featuresAlert() {
       // return this.getFeaturesAlert()
     },
-    resources: function () {
-      let resources = []
-      if (this.entry && this.entry.hyperlinks) {
-        resources = this.entry.hyperlinks
-      }
-      return resources
-    },
     originDescription: function () {
       if (
         this.entry &&
@@ -308,17 +297,6 @@ export default {
   word-break: normal;
 }
 
-.title {
-  text-align: left;
-  // width: 16em;
-  line-height: 1.5em !important;
-  font-size: 18px;
-  font-family: Helvetica;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: $app-primary-color;
-}
-
 .block {
   margin-bottom: 0.5em;
 
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index ff9df7fa..62649ad8 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -24,20 +24,36 @@
 
           <!-- Provenance Info Title -->
           <div v-if="provenanceEntry" class="provenance-info-title">
-            <div class="block" v-if="provenanceEntry.title">
-              <div class="title">{{ capitalise(provenanceEntry.title) }}</div>
-              <div
-                v-if="
-                  provenanceEntry.provenanceTaxonomyLabel &&
-                  provenanceEntry.provenanceTaxonomyLabel.length > 0
-                "
-                class="subtitle"
-              >
-                {{ provSpeciesDescription() }}
+            <div>
+              <div class="block" v-if="provenanceEntry.title">
+                <div class="title">{{ capitalise(provenanceEntry.title) }}</div>
+                <div
+                  v-if="
+                    provenanceEntry.provenanceTaxonomyLabel &&
+                    provenanceEntry.provenanceTaxonomyLabel.length > 0
+                  "
+                  class="subtitle"
+                >
+                  {{ provSpeciesDescription() }}
+                </div>
+              </div>
+              <div class="block" v-else>
+                <div class="title">{{ provenanceEntry.featureId }}</div>
               </div>
+              <external-resource-card :resources="resources"></external-resource-card>
             </div>
-            <div class="block" v-else>
-              <div class="title">{{ provenanceEntry.featureId }}</div>
+            <div class="provenance-title-buttons">
+              <el-button
+                @click="clearProvenanceData"
+                class="button-clear-data"
+                title="Clear"
+              >
+                &times;
+              </el-button>
+              <!--
+              <el-button @click="moveProvenance('left')">Left</el-button>
+              <el-button @click="moveProvenance('right')">Right</el-button>
+              -->
             </div>
           </div>
 
@@ -85,6 +101,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ProvenancePopup from './ProvenancePopup.vue'
+import ExternalResourceCard from './ExternalResourceCard.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -98,6 +115,7 @@ export default {
     Drawer,
     Icon,
     ProvenancePopup,
+    ExternalResourceCard,
   },
   name: 'SideBar',
   props: {
@@ -125,7 +143,7 @@ export default {
       type: Array,
       default: () => [
         { title: 'Search', id: 1 },
-        { title: 'Overview', id: 2 }
+        { title: 'Connectivity', id: 2 }
       ],
     },
     /**
@@ -155,6 +173,15 @@ export default {
       drawerOpen: false,
     }
   },
+  computed: {
+    resources: function () {
+      let resources = [];
+      if (this.provenanceEntry && this.provenanceEntry.hyperlinks) {
+        resources = this.provenanceEntry.hyperlinks;
+      }
+      return resources;
+    },
+  },
   methods: {
     /**
      * This event is emitted when the mouse hover are changed.
@@ -248,6 +275,13 @@ export default {
       text += ' species';
       return text;
     },
+    clearProvenanceData: function () {
+      this.tabClicked(1);
+      this.$emit('provenance-popup-close');
+    },
+    // moveProvenance: function (option) {
+    //   this.$emit('provenance-move', option);
+    // },
   },
   created: function () {
     this.drawerOpen = this.openAtStart
@@ -294,12 +328,31 @@ export default {
 <style lang="scss" scoped>
 .provenance-info-title {
   padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.provenance-title-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 8px;
+}
+
+.button-clear-data {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  font-size: 24px;
+  color: $app-primary-color;
+  line-height: 1;
 }
 
 .title {
   text-align: left;
   // width: 16em;
-  line-height: 1.5em !important;
+  line-height: 1.3em !important;
   font-size: 18px;
   font-family: Helvetica;
   font-weight: bold;
diff --git a/src/components/SidebarContent.vue b/src/components/SidebarContent.vue
index 455b7fba..03944031 100644
--- a/src/components/SidebarContent.vue
+++ b/src/components/SidebarContent.vue
@@ -41,9 +41,9 @@
       <div v-for="result in results" :key="result.doi" class="step-item">
         <DatasetCard
           class="dataset-card"
-          :entry="result" 
-          :envVars="envVars" 
-          @mouseenter="hoverChanged(result)" 
+          :entry="result"
+          :envVars="envVars"
+          @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
         />
       </div>
@@ -487,6 +487,15 @@ export default {
   border: solid 1px #292b66;
   background-color: #292b66;
   text-align: left;
+
+  .el-button {
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
 }
 
 .pagination {
@@ -515,16 +524,17 @@ export default {
 
 .content-card :deep(.el-card__header) {
   background-color: #292b66;
-  border: solid 1px #292b66;
+  padding: 1rem;
 }
 
 .content-card :deep(.el-card__body) {
   background-color: #f7faff;
   overflow-y: hidden;
+  padding: 1rem;
 }
 
 .content {
-  width: 515px;
+  // width: 515px;
   flex: 1 1 auto;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   border: solid 1px #e4e7ed;
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 12f53a49..036f8aba 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -45,13 +45,14 @@ export default {
 <style lang="scss" scoped>
 .tab-container {
   height: 28px;
+  padding-bottom: 1px;
+  border-bottom: 1px solid $app-primary-color;
 }
 
 .title {
-  width: 101px;
   height: 28px;
   border: 1px solid var(--el-border-color);
-  border-bottom: none;
+  border-bottom-color: $app-primary-color;
   background-color: white;
   display: inline-block;
 }
@@ -65,6 +66,7 @@ export default {
   display: table-cell;
   vertical-align: middle;
   font-size: 14px;
+  padding: 0 1rem;
 }
 
 .title-text-table {
@@ -79,6 +81,7 @@ export default {
 
 .active-tab {
   border-color: $app-primary-color;
+  border-bottom-color: #292b66;
 }
 
 .highlightText {

From 56446237655bca6dc389b7ab50d1bb601035b0d8 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 24 Jun 2024 10:51:51 +1200
Subject: [PATCH 04/28] UI update for sidebar tab hover

---
 src/components/Tabs.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 036f8aba..fff4734a 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -73,6 +73,10 @@ export default {
   display: table;
   height: 100%;
   width: 100%;
+
+  &:hover {
+    color: $app-primary-color;
+  }
 }
 
 .parent-dialog:hover .title-text {

From e42475f09cfa4ffe23b8aa4bd246d2492d3dbc87 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 24 Jun 2024 15:34:19 +1200
Subject: [PATCH 05/28] Update sidebar with provenance title

---
 src/components/SideBar.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 62649ad8..f5709fdd 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -455,8 +455,11 @@ export default {
 
 .sidebar-content-container {
   flex: 1 1 auto;
-  border-radius: 0;
-  border: 0 none;
+
+  .provenance-info-title ~ & {
+    border-radius: 0;
+    border: 0 none;
+  }
 }
 </style>
 

From d77e0185283dae36ca851fe48117365b45bde174 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 26 Jun 2024 11:05:19 +1200
Subject: [PATCH 06/28] Move connectivity info tab to top with close button

---
 src/components/ProvenancePopup.vue | 278 ++++++++++++++++-------------
 src/components/SideBar.vue         | 112 +-----------
 src/components/Tabs.vue            |  51 +++++-
 3 files changed, 203 insertions(+), 238 deletions(-)

diff --git a/src/components/ProvenancePopup.vue b/src/components/ProvenancePopup.vue
index 9ab3d857..e01bbece 100644
--- a/src/components/ProvenancePopup.vue
+++ b/src/components/ProvenancePopup.vue
@@ -1,22 +1,26 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
-    <!--
-    <div class="block" v-if="entry.title">
-      <div class="title">{{ capitalise(entry.title) }}</div>
-      <div
-        v-if="
-          entry.provenanceTaxonomyLabel &&
-          entry.provenanceTaxonomyLabel.length > 0
-        "
-        class="subtitle"
-      >
-        {{ provSpeciesDescription }}
+    <!-- Provenance Info Title -->
+    <div class="provenance-info-title">
+      <div>
+        <div class="block" v-if="entry.title">
+          <div class="title">{{ capitalise(entry.title) }}</div>
+          <div
+            v-if="
+              entry.provenanceTaxonomyLabel &&
+              entry.provenanceTaxonomyLabel.length > 0
+            "
+            class="subtitle"
+          >
+            {{ provSpeciesDescription }}
+          </div>
+        </div>
+        <div class="block" v-else>
+          <div class="title">{{ entry.featureId }}</div>
+        </div>
+        <external-resource-card :resources="resources"></external-resource-card>
       </div>
     </div>
-    <div class="block" v-else>
-      <div class="title">{{ entry.featureId }}</div>
-    </div>
-    -->
     <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
@@ -33,133 +37,121 @@
         </span>
       </el-popover>
     </div>
-    <!--
-    <div v-show="showDetails" class="hide" id="hide-path-info" @click="showDetails = false">
-      Hide path information
-      <el-icon><el-icon-arrow-up /></el-icon>
-    </div>
-    <div v-show="!showDetails" class="hide" id="show-path-info" @click="showDetails = true">
-      Show path information
-      <el-icon><el-icon-arrow-down /></el-icon>
-    </div>
-    -->
-    <!-- <transition name="slide-fade"> -->
-      <div class="content-container scrollbar">
-        {{ entry.paths }}
-        <div v-if="entry.origins && entry.origins.length > 0" class="block">
-          <div class="attribute-title-container">
-            <span class="attribute-title">Origin</span>
-            <el-popover
-              width="250"
-              trigger="hover"
-              :teleported="false"
-              popper-class="popover-origin-help"
-            >
-              <template #reference>
-                <el-icon class="info"><el-icon-warning /></el-icon>
-              </template>
-              <span style="word-break: keep-all">
-                <i>Origin</i> {{ originDescription }}
-              </span>
-
-            </el-popover>
-          </div>
-          <div
-            v-for="(origin, i) in entry.origins"
-            class="attribute-content"
-            :origin-item-label="origin"
-            :key="origin"
-          >
-            {{ capitalise(origin) }}
-            <div v-if="i != entry.origins.length - 1" class="seperator"></div>
-          </div>
-          <el-button
-            v-show="
-              entry.originsWithDatasets && entry.originsWithDatasets.length > 0
-            "
-            class="button"
-            id="open-dendrites-button"
-            @click="openDendrites"
+    <div class="content-container scrollbar">
+      {{ entry.paths }}
+      <div v-if="entry.origins && entry.origins.length > 0" class="block">
+        <div class="attribute-title-container">
+          <span class="attribute-title">Origin</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
           >
-            Explore origin data
-          </el-button>
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Origin</i> {{ originDescription }}
+            </span>
+
+          </el-popover>
         </div>
         <div
-          v-if="entry.components && entry.components.length > 0"
-          class="block"
+          v-for="(origin, i) in entry.origins"
+          class="attribute-content"
+          :origin-item-label="origin"
+          :key="origin"
         >
-          <div class="attribute-title-container">
-            <div class="attribute-title">Components</div>
-          </div>
+          {{ capitalise(origin) }}
+          <div v-if="i != entry.origins.length - 1" class="seperator"></div>
+        </div>
+        <el-button
+          v-show="
+            entry.originsWithDatasets && entry.originsWithDatasets.length > 0
+          "
+          class="button"
+          id="open-dendrites-button"
+          @click="openDendrites"
+        >
+          Explore origin data
+        </el-button>
+      </div>
+      <div
+        v-if="entry.components && entry.components.length > 0"
+        class="block"
+      >
+        <div class="attribute-title-container">
+          <div class="attribute-title">Components</div>
+        </div>
+        <div
+          v-for="(component, i) in entry.components"
+          class="attribute-content"
+          :component-item-label="component"
+          :key="component"
+        >
+          {{ capitalise(component) }}
           <div
-            v-for="(component, i) in entry.components"
-            class="attribute-content"
-            :component-item-label="component"
-            :key="component"
+            v-if="i != entry.components.length - 1"
+            class="seperator"
+          ></div>
+        </div>
+      </div>
+      <div
+        v-if="entry.destinations && entry.destinations.length > 0"
+        class="block"
+      >
+        <div class="attribute-title-container">
+          <span class="attribute-title">Destination</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
           >
-            {{ capitalise(component) }}
-            <div
-              v-if="i != entry.components.length - 1"
-              class="seperator"
-            ></div>
-          </div>
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Destination</i> is where the axons terminate
+            </span>
+          </el-popover>
         </div>
         <div
-          v-if="entry.destinations && entry.destinations.length > 0"
-          class="block"
+          v-for="(destination, i) in entry.destinations"
+          class="attribute-content"
+          :destination-item-label="destination"
+          :key="destination"
         >
-          <div class="attribute-title-container">
-            <span class="attribute-title">Destination</span>
-            <el-popover
-              width="250"
-              trigger="hover"
-              :teleported="false"
-              popper-class="popover-origin-help"
-            >
-              <template #reference>
-                <el-icon class="info"><el-icon-warning /></el-icon>
-              </template>
-              <span style="word-break: keep-all">
-                <i>Destination</i> is where the axons terminate
-              </span>
-            </el-popover>
-          </div>
+          {{ capitalise(destination) }}
           <div
-            v-for="(destination, i) in entry.destinations"
-            class="attribute-content"
-            :destination-item-label="destination"
-            :key="destination"
-          >
-            {{ capitalise(destination) }}
-            <div
-              v-if="i != entry.destinations.length - 1"
-              class="seperator"
-            ></div>
-          </div>
-          <el-button
-            v-show="
-              entry.destinationsWithDatasets &&
-              entry.destinationsWithDatasets.length > 0
-            "
-            class="button"
-            @click="openAxons"
-          >
-            Explore destination data
-          </el-button>
+            v-if="i != entry.destinations.length - 1"
+            class="seperator"
+          ></div>
         </div>
-
         <el-button
           v-show="
-            entry.componentsWithDatasets &&
-            entry.componentsWithDatasets.length > 0
+            entry.destinationsWithDatasets &&
+            entry.destinationsWithDatasets.length > 0
           "
           class="button"
-          @click="openAll"
+          @click="openAxons"
         >
-          Search for data on components
+          Explore destination data
         </el-button>
       </div>
-    <!-- </transition> -->
+
+      <el-button
+        v-show="
+          entry.componentsWithDatasets &&
+          entry.componentsWithDatasets.length > 0
+        "
+        class="button"
+        @click="openAll"
+      >
+        Search for data on components
+      </el-button>
+    </div>
   </div>
 </template>
 
@@ -175,7 +167,7 @@ import {
   ElContainer as Container,
   ElIcon as Icon,
 } from 'element-plus'
-
+import ExternalResourceCard from './ExternalResourceCard.vue'
 import EventBus from './EventBus'
 
 const titleCase = (str) => {
@@ -198,6 +190,7 @@ export default {
     ElIconArrowUp,
     ElIconArrowDown,
     ElIconWarning,
+    ExternalResourceCard,
   },
   props: {
     entry: {
@@ -231,6 +224,13 @@ export default {
     }
   },
   computed: {
+    resources: function () {
+      let resources = [];
+      if (this.entry && this.entry.hyperlinks) {
+        resources = this.entry.hyperlinks;
+      }
+      return resources;
+    },
     featuresAlert() {
       // return this.getFeaturesAlert()
     },
@@ -297,6 +297,24 @@ export default {
   word-break: normal;
 }
 
+.provenance-info-title {
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  text-align: left;
+  // width: 16em;
+  line-height: 1.3em !important;
+  font-size: 18px;
+  font-family: Helvetica;
+  font-weight: bold;
+  padding-bottom: 8px;
+  color: $app-primary-color;
+}
+
 .block {
   margin-bottom: 0.5em;
 
@@ -367,7 +385,8 @@ export default {
   font-family: Asap, sans-serif, Helvetica;
   font-weight: 400;
   /* outline: thin red solid; */
-  overflow: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
   min-width: 16rem;
   background-color: #f7faff;
   height: 100%;
@@ -482,9 +501,6 @@ export default {
 }
 
 .content-container {
-  overflow-y: auto;
-  scrollbar-width: thin !important;
-  max-height: 100%;
   flex: 1 1 100%;
   padding: 1rem;
   box-sizing: border-box;
@@ -492,6 +508,10 @@ export default {
   .block {
     padding-top: 0.5em;
   }
+
+  .provenance-info-title ~ & {
+    padding-top: 0;
+  }
 }
 
 .scrollbar::-webkit-scrollbar-track {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index f5709fdd..18e317be 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -21,47 +21,12 @@
           <el-icon><el-icon-arrow-right /></el-icon>
         </div>
         <div class="sidebar-container">
-
-          <!-- Provenance Info Title -->
-          <div v-if="provenanceEntry" class="provenance-info-title">
-            <div>
-              <div class="block" v-if="provenanceEntry.title">
-                <div class="title">{{ capitalise(provenanceEntry.title) }}</div>
-                <div
-                  v-if="
-                    provenanceEntry.provenanceTaxonomyLabel &&
-                    provenanceEntry.provenanceTaxonomyLabel.length > 0
-                  "
-                  class="subtitle"
-                >
-                  {{ provSpeciesDescription() }}
-                </div>
-              </div>
-              <div class="block" v-else>
-                <div class="title">{{ provenanceEntry.featureId }}</div>
-              </div>
-              <external-resource-card :resources="resources"></external-resource-card>
-            </div>
-            <div class="provenance-title-buttons">
-              <el-button
-                @click="clearProvenanceData"
-                class="button-clear-data"
-                title="Clear"
-              >
-                &times;
-              </el-button>
-              <!--
-              <el-button @click="moveProvenance('left')">Left</el-button>
-              <el-button @click="moveProvenance('right')">Right</el-button>
-              -->
-            </div>
-          </div>
-
           <Tabs
             v-if="tabs.length > 1 && provenanceEntry"
             :tabTitles="tabs"
             :activeId="activeId"
             @titleClicked="tabClicked"
+            @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
             <!-- Provenance Info -->
@@ -101,7 +66,6 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ProvenancePopup from './ProvenancePopup.vue'
-import ExternalResourceCard from './ExternalResourceCard.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -115,7 +79,6 @@ export default {
     Drawer,
     Icon,
     ProvenancePopup,
-    ExternalResourceCard,
   },
   name: 'SideBar',
   props: {
@@ -173,15 +136,6 @@ export default {
       drawerOpen: false,
     }
   },
-  computed: {
-    resources: function () {
-      let resources = [];
-      if (this.provenanceEntry && this.provenanceEntry.hyperlinks) {
-        resources = this.provenanceEntry.hyperlinks;
-      }
-      return resources;
-    },
-  },
   methods: {
     /**
      * This event is emitted when the mouse hover are changed.
@@ -262,26 +216,10 @@ export default {
        */
       this.$emit('tabClicked', id)
     },
-    capitalise: function (text) {
-      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
-      return '';
-    },
-    provSpeciesDescription: function () {
-      let text = 'Studied in';
-      this.provenanceEntry.provenanceTaxonomyLabel.forEach((label) => {
-        text += ` ${label},`;
-      });
-      text = text.slice(0, -1); // remove last comma
-      text += ' species';
-      return text;
-    },
-    clearProvenanceData: function () {
-      this.tabClicked(1);
+    tabClose: function (id) {
+      console.log('tab id ', id)
       this.$emit('provenance-popup-close');
     },
-    // moveProvenance: function (option) {
-    //   this.$emit('provenance-move', option);
-    // },
   },
   created: function () {
     this.drawerOpen = this.openAtStart
@@ -326,48 +264,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.provenance-info-title {
-  padding: 1rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.provenance-title-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-left: 8px;
-}
-
-.button-clear-data {
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  font-size: 24px;
-  color: $app-primary-color;
-  line-height: 1;
-}
-
-.title {
-  text-align: left;
-  // width: 16em;
-  line-height: 1.3em !important;
-  font-size: 18px;
-  font-family: Helvetica;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: $app-primary-color;
-}
-
-.block {
-  margin-bottom: 0.5em;
-
-  .main > &:first-of-type {
-    margin-right: 1em;
-  }
-}
-
 .box-card {
   flex: 3;
   height: 100%;
@@ -456,7 +352,7 @@ export default {
 .sidebar-content-container {
   flex: 1 1 auto;
 
-  .provenance-info-title ~ & {
+  .tab-container ~ & {
     border-radius: 0;
     border: 0 none;
   }
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index fff4734a..0767e3a3 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -15,6 +15,15 @@
           {{ title.title }}
         </div>
       </div>
+      <el-button
+        v-if="title.id === 2"
+        @click="tabClose(title.id)"
+        class="button-tab-close"
+        aria-label="Close"
+      >
+        &times;
+        <span class="visually-hidden">Close</span>
+      </el-button>
     </div>
   </div>
 </template>
@@ -38,6 +47,9 @@ export default {
     titleClicked: function (id) {
       this.$emit('titleClicked', id)
     },
+    tabClose: function (id) {
+      this.$emit('tab-close', id);
+    },
   },
 }
 </script>
@@ -47,6 +59,8 @@ export default {
   height: 28px;
   padding-bottom: 1px;
   border-bottom: 1px solid $app-primary-color;
+  display: flex;
+  flex-direction: row;
 }
 
 .title {
@@ -54,7 +68,10 @@ export default {
   border: 1px solid var(--el-border-color);
   border-bottom-color: $app-primary-color;
   background-color: white;
-  display: inline-block;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  position: relative;
 }
 
 .title:hover {
@@ -91,4 +108,36 @@ export default {
 .highlightText {
   color: $app-primary-color;
 }
+
+.button-tab-close {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0;
+  padding-right: 4px;
+  font-size: 24px;
+  color: $app-primary-color;
+  border: 0 none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    border: 0 none;
+    outline: none;
+    box-shadow: none;
+    background-color: transparent;
+  }
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 </style>

From b1f0969c0e4ccc2e77be7f845f08a93a2ee8b200 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 26 Jun 2024 11:33:30 +1200
Subject: [PATCH 07/28] Remove console log

---
 src/components/SideBar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 18e317be..88cc29ae 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -217,7 +217,6 @@ export default {
       this.$emit('tabClicked', id)
     },
     tabClose: function (id) {
-      console.log('tab id ', id)
       this.$emit('provenance-popup-close');
     },
   },

From d5b9785b187e02ee79faa86cc6b45c0eaab80d15 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 26 Jun 2024 16:37:47 +1200
Subject: [PATCH 08/28] Refactor code

---
 src/components/SideBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 88cc29ae..47156e06 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -231,10 +231,6 @@ export default {
        */
       this.$emit('actionClick', payLoad)
     })
-    EventBus.on('onProvenanceActionClick', (payLoad) => {
-      this.tabClicked(1);
-      this.$emit('actionClick', payLoad)
-    });
     EventBus.on('available-facets', (payLoad) => {
       this.$emit('search-changed', {
         type: 'available-facets',
@@ -258,6 +254,10 @@ export default {
        */
       this.$emit('datalink-clicked', payLoad);
     })
+    EventBus.on('onProvenanceActionClick', (payLoad) => {
+      this.tabClicked(1);
+      this.$emit('actionClick', payLoad);
+    })
   },
 }
 </script>

From 7b4bed3ccb5795c11d0ce09382efc3211b8ef65e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 27 Jun 2024 11:45:12 +1200
Subject: [PATCH 09/28] Update tabs style to be same as portal

---
 src/components/ProvenancePopup.vue |  1 +
 src/components/SideBar.vue         |  3 ++-
 src/components/Tabs.vue            | 25 +++++++++++--------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/ProvenancePopup.vue b/src/components/ProvenancePopup.vue
index e01bbece..49a11c1d 100644
--- a/src/components/ProvenancePopup.vue
+++ b/src/components/ProvenancePopup.vue
@@ -390,6 +390,7 @@ export default {
   min-width: 16rem;
   background-color: #f7faff;
   height: 100%;
+  border-left: 1px solid var(--el-border-color);
   border-top: 1px solid var(--el-border-color);
 }
 
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 5f3ba8bd..f218e51c 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -245,7 +245,7 @@ export default {
        */
       this.$emit('anatomy-in-datasets', payLoad)
     })
-    
+
     EventBus.on('contextUpdate', (payLoad) => {
       /**
        * This event is emitted when the context card is updated.
@@ -363,6 +363,7 @@ export default {
   .tab-container ~ & {
     border-radius: 0;
     border: 0 none;
+    position: relative;
   }
 }
 </style>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 0767e3a3..be2c641d 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -55,26 +55,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$tab-height: 30px;
+
 .tab-container {
-  height: 28px;
-  padding-bottom: 1px;
-  border-bottom: 1px solid $app-primary-color;
+  height: $tab-height;
   display: flex;
   flex-direction: row;
 }
 
 .title {
-  height: 28px;
+  height: $tab-height;
   border: 1px solid var(--el-border-color);
-  border-bottom-color: $app-primary-color;
+  border-top-color: transparent;
   background-color: white;
   display: flex;
   width: fit-content;
   align-items: center;
   position: relative;
-}
-
-.title:hover {
   cursor: pointer;
 }
 
@@ -90,19 +87,19 @@ export default {
   display: table;
   height: 100%;
   width: 100%;
-
-  &:hover {
-    color: $app-primary-color;
-  }
 }
 
 .parent-dialog:hover .title-text {
   color: $app-primary-color;
 }
 
+.title:hover,
 .active-tab {
-  border-color: $app-primary-color;
-  border-bottom-color: #292b66;
+  background-color: #f9f2fc;
+  border: solid #8300bf;
+  border-width: 1px 1px .125em;
+  color: #8300bf;
+  font-weight: 500;
 }
 
 .highlightText {

From 93702f92a36fbb44568d39f76a0d17fdf6287471 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 27 Jun 2024 11:46:48 +1200
Subject: [PATCH 10/28] Rename pubmed to PubMed

---
 src/components/ExternalResourceCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExternalResourceCard.vue b/src/components/ExternalResourceCard.vue
index 68d459ef..15ffe876 100644
--- a/src/components/ExternalResourceCard.vue
+++ b/src/components/ExternalResourceCard.vue
@@ -9,7 +9,7 @@
           :icon="ElIconNotebook"
           @click="openUrl(resource.url)"
         >
-          Open publications in pubmed
+          Open publications in PubMed
         </el-button>
       </div>
     </template>

From fb61bd61813e2909d9b040b247a447fbedaa78d5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 1 Jul 2024 11:35:04 +1200
Subject: [PATCH 11/28] Rename provenance popup to connectivity info

---
 src/components.d.ts                           |  2 +-
 ...ovenancePopup.vue => ConnectivityInfo.vue} | 16 +++++++-------
 src/components/SideBar.vue                    | 21 ++++++++++---------
 3 files changed, 20 insertions(+), 19 deletions(-)
 rename src/components/{ProvenancePopup.vue => ConnectivityInfo.vue} (97%)

diff --git a/src/components.d.ts b/src/components.d.ts
index 83b8b2c9..bb9044cd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -25,7 +25,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
+    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ProvenancePopup.vue b/src/components/ConnectivityInfo.vue
similarity index 97%
rename from src/components/ProvenancePopup.vue
rename to src/components/ConnectivityInfo.vue
index 49a11c1d..28b478ec 100644
--- a/src/components/ProvenancePopup.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
-    <!-- Provenance Info Title -->
-    <div class="provenance-info-title">
+    <!-- Connectivity Info Title -->
+    <div class="connectivity-info-title">
       <div>
         <div class="block" v-if="entry.title">
           <div class="title">{{ capitalise(entry.title) }}</div>
@@ -182,7 +182,7 @@ const capitalise = function (str) {
 }
 
 export default {
-  name: 'ProvenancePopup',
+  name: 'ConnectivityInfo',
   components: {
     Button,
     Container,
@@ -266,19 +266,19 @@ export default {
       window.open(url, '_blank')
     },
     openAll: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.componentsWithDatasets.map((a) => a.name),
       })
     },
     openAxons: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.destinationsWithDatasets.map((a) => a.name),
       })
     },
     openDendrites: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.originsWithDatasets.map((a) => a.name),
       })
@@ -297,7 +297,7 @@ export default {
   word-break: normal;
 }
 
-.provenance-info-title {
+.connectivity-info-title {
   padding: 1rem;
   display: flex;
   flex-direction: row;
@@ -510,7 +510,7 @@ export default {
     padding-top: 0.5em;
   }
 
-  .provenance-info-title ~ & {
+  .connectivity-info-title ~ & {
     padding-top: 0;
   }
 }
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index f218e51c..817a981b 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -22,17 +22,17 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && provenanceEntry"
+            v-if="tabs.length > 1 && connectivityInfo"
             :tabTitles="tabs"
             :activeId="activeId"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
-            <!-- Provenance Info -->
+            <!-- Connectivity Info -->
             <template v-if="tab.id === 2">
-              <provenance-popup
-                :entry="provenanceEntry"
+              <connectivity-info
+                :entry="connectivityInfo"
                 v-show="tab.id === activeId"
                 :ref="tab.id"
               />
@@ -65,7 +65,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
-import ProvenancePopup from './ProvenancePopup.vue'
+import ConnectivityInfo from './ConnectivityInfo.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -78,7 +78,7 @@ export default {
     ElIconArrowRight,
     Drawer,
     Icon,
-    ProvenancePopup,
+    ConnectivityInfo,
   },
   name: 'SideBar',
   props: {
@@ -124,9 +124,9 @@ export default {
       default: false,
     },
     /**
-     * The provenance info data to show in sidebar.
+     * The connectivity info data to show in sidebar.
      */
-    provenanceEntry: {
+    connectivityInfo: {
       type: Object,
       default: null,
     },
@@ -169,6 +169,7 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
+        // TODO: refs[1] is for `search` which should be renamed
         this.$refs[1][0].openSearch(facets, query)
       })
     },
@@ -217,7 +218,7 @@ export default {
       this.$emit('tabClicked', id)
     },
     tabClose: function (id) {
-      this.$emit('provenance-popup-close');
+      this.$emit('connectivity-info-close');
     },
   },
   created: function () {
@@ -263,7 +264,7 @@ export default {
        */
       this.$emit('datalink-clicked', payLoad);
     })
-    EventBus.on('onProvenanceActionClick', (payLoad) => {
+    EventBus.on('onConnectivityActionClick', (payLoad) => {
       this.tabClicked(1);
       this.$emit('actionClick', payLoad);
     })

From 6678d4e8c2e89fe1d4709c887fb5f249c76ed855 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 1 Jul 2024 13:30:08 +1200
Subject: [PATCH 12/28] Fix tab close button alignment for Safari and Firefox

---
 src/components/Tabs.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index be2c641d..a164c765 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -119,6 +119,11 @@ $tab-height: 30px;
   outline: none;
   background-color: transparent;
 
+  :deep(> span) {
+    height: $tab-height - 2; // tab height minus border
+    font-family: Arial; // to fix font alignment on different browsers
+  }
+
   &:hover,
   &:focus {
     border: 0 none;

From 4cf7c14807900385d7b975d6952d7d43eb05a79a Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 4 Jul 2024 15:05:09 +1200
Subject: [PATCH 13/28] Update tabs with tab id and tab type

---
 src/components.d.ts        |  2 +-
 src/components/SideBar.vue | 73 +++++++++++++++++++++++++++-----------
 src/components/Tabs.vue    |  6 ++--
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index bb9044cd..583bc660 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -25,7 +26,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 817a981b..5d72702c 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -24,26 +24,26 @@
           <Tabs
             v-if="tabs.length > 1 && connectivityInfo"
             :tabTitles="tabs"
-            :activeId="activeId"
+            :activeId="activeTabId"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
             <!-- Connectivity Info -->
-            <template v-if="tab.id === 2">
+            <template v-if="tab.type === 'connectivity'">
               <connectivity-info
                 :entry="connectivityInfo"
-                v-show="tab.id === activeId"
-                :ref="tab.id"
+                v-show="tab.id === activeTabId"
+                :ref="'connectivityTab_' + tab.id"
               />
             </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
-              v-show="tab.id === activeId"
+              v-show="tab.id === activeTabId"
               :contextCardEntry="tab.contextCard"
               :envVars="envVars"
-              :ref="tab.id"
+              :ref="'searchTab_' + tab.id"
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
@@ -105,14 +105,14 @@ export default {
     tabs: {
       type: Array,
       default: () => [
-        { title: 'Search', id: 1 },
-        { title: 'Connectivity', id: 2 }
+        { id: 1, title: 'Search', type: 'search' },
+        { id: 2, title: 'Connectivity', type: 'connectivity' }
       ],
     },
     /**
      * The active tab id for default tab.
      */
-    activeId: {
+    activeTabId: {
       type: Number,
       default: 1,
     },
@@ -169,10 +169,38 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        // TODO: refs[1] is for `search` which should be renamed
-        this.$refs[1][0].openSearch(facets, query)
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.openSearch(facets, query);
       })
     },
+    /**
+     * Get the tab object by tab id and type.
+     * If not found, return the first available tab.
+     */
+    getTabByIdAndType: function (id, type) {
+      const tabId = id || this.activeTabId;
+      const tabType = type || 'search'; // default to search tab
+      const tabObj = this.tabs.find((tab) => tab.id === tabId && tab.type === tabType);
+      const firstAvailableTab = this.tabs[0];
+      return tabObj || firstAvailableTab;
+    },
+    /**
+     * Get the ref id of the tab by id and type.
+     */
+    getTabRefId: function (id, type) {
+      let refIdPrefix = 'searchTab_'; // default to search tab
+      if (type === 'connectivity') {
+        refIdPrefix = 'connectivityTab_';
+      }
+      const tabObj = this.getTabByIdAndType(id, type);
+      const tabRefId = refIdPrefix + tabObj.id;
+      return tabRefId;
+    },
+    getSearchTabRefById: function (id) {
+      const searchTabId = id || 1; // to use id when there are multiple search tabs
+      const searchTabRefId = this.getTabRefId(searchTabId, 'search');
+      return this.$refs[searchTabRefId][0];
+    },
     /**
      * @vuese
      * The function to add filters to sidebar search.
@@ -184,14 +212,16 @@ export default {
 
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        this.$refs[this.activeId][0].addFilter(filter)
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.addFilter(filter)
       })
     },
     openNeuronSearch: function (neuron) {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        this.$refs[this.activeId][0].openSearch(
+        const searchTabRef = this.getSearchTabRefById(1);
+        searchTabRef.openSearch(
           '',
           undefined,
           'scicrunch-query-string/',
@@ -200,22 +230,24 @@ export default {
       })
     },
     getAlgoliaFacets: async function () {
-      return await this.$refs[this.activeId][0].getAlgoliaFacets()
+      const searchTabRef = this.getSearchTabRefById(1);
+      return await searchTabRef.getAlgoliaFacets()
     },
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
     /**
      * @vuese
-     * The function to emit 'tabClicked' event with tab's `id` when user clicks the sidebar tab.
-     * @arg id
+     * The function to emit 'tabClicked' event with tab's `id` and tab's `type`
+     * when user clicks the sidebar tab.
+     * @arg {id, type}
      */
-    tabClicked: function (id) {
+    tabClicked: function ({id, type}) {
       /**
        * This event is emitted when user click sidebar's tab.
-       * @arg id
+       * @arg {id, type}
        */
-      this.$emit('tabClicked', id)
+      this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
       this.$emit('connectivity-info-close');
@@ -265,7 +297,8 @@ export default {
       this.$emit('datalink-clicked', payLoad);
     })
     EventBus.on('onConnectivityActionClick', (payLoad) => {
-      this.tabClicked(1);
+      // switch to search tab with tab id: 1
+      this.tabClicked({id: 1, type: 'search'});
       this.$emit('actionClick', payLoad);
     })
   },
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index a164c765..83cc9e89 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -9,7 +9,7 @@
       <div
         class="title-text-table"
         v-bind:class="{ highlightText: title.id == activeId }"
-        v-on:click="titleClicked(title.id)"
+        v-on:click="titleClicked(title.id, title.type)"
       >
         <div class="title-text">
           {{ title.title }}
@@ -44,8 +44,8 @@ export default {
     },
   },
   methods: {
-    titleClicked: function (id) {
-      this.$emit('titleClicked', id)
+    titleClicked: function (id, type) {
+      this.$emit('titleClicked', {id, type})
     },
     tabClose: function (id) {
       this.$emit('tab-close', id);

From f996e55abd86b9a7302e5c72681bb0aba9a8e994 Mon Sep 17 00:00:00 2001
From: Jesse Khorasanee <jessekhorasanee@gmail.com>
Date: Thu, 4 Jul 2024 15:53:09 +1200
Subject: [PATCH 14/28] Connectivity explore buttons now check available facets

---
 src/App.vue                         |  24 ++-
 src/algolia/utils.js                |   1 -
 src/components.d.ts                 |   2 +-
 src/components/ConnectivityInfo.vue |  44 ++++-
 src/components/SearchFilters.vue    |   2 +
 src/components/SideBar.vue          |   8 +
 src/exampleConnectivityInput.js     | 292 ++++++++++++++++++++++++++++
 7 files changed, 364 insertions(+), 9 deletions(-)
 create mode 100644 src/exampleConnectivityInput.js

diff --git a/src/App.vue b/src/App.vue
index 2bec38fd..b0e9267c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,7 @@
       :visible="sideBarVisibility"
       :tabs="tabs"
       :activeId="activeId"
+      :connectivityInfo="connectivityInput"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
@@ -35,6 +36,9 @@
 // optionally import default styles
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
+import exampleConnectivityInput from './exampleConnectivityInput.js'
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 // let testContext = {
 //   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
@@ -96,7 +100,7 @@ export default {
   },
   data: function () {
     return {
-      tabArray: [{ title: 'Flatmap', id: 1 }],
+      tabArray: [{ title: 'Flatmap', id: 1 }, { title: 'Connectivity', id: 2 }],
       contextArray: [null, null, null],
       sideBarVisibility: true,
       envVars: {
@@ -109,6 +113,7 @@ export default {
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
+      connectivityInput: exampleConnectivityInput,
       activeId: 1,
     }
   },
@@ -122,8 +127,21 @@ export default {
     tabClicked: function (id) {
       this.activeId = id
     },
-    action: function (val) {
-      console.log('action fired: ', val)
+    // For connectivity input actions
+    action: function (action) {
+      console.log('action fired: ', action)
+      let facets = [];
+      facets.push(
+        ...action.labels.map(val => ({
+          facet: capitalise(val),
+          term: "Anatomical structure",
+          facetPropPath: "anatomy.organ.category.name",
+        }))
+      );
+      if (this.$refs.sideBar) {
+        console.log('openSearch', facets)
+        this.$refs.sideBar.openSearch(facets, "");
+      }
     },
     openSearch: function () {
       this.$refs.sideBar.openSearch(
diff --git a/src/algolia/utils.js b/src/algolia/utils.js
index f173cc13..bd532c22 100644
--- a/src/algolia/utils.js
+++ b/src/algolia/utils.js
@@ -93,7 +93,6 @@ export function getFilters(selectedFacetArray=undefined) {
 
     filters = filters.split('()AND ').join(''); // Handle case where there where no OR facets
   });
-  console.log('filters about to be applied:', filters)
   return filters.substring(0, filters.lastIndexOf(" AND "));
 }
 
diff --git a/src/components.d.ts b/src/components.d.ts
index bb9044cd..583bc660 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -25,7 +26,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 28b478ec..4057ea6f 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -68,7 +68,8 @@
         </div>
         <el-button
           v-show="
-            entry.originsWithDatasets && entry.originsWithDatasets.length > 0
+            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.originsWithDatasets)
           "
           class="button"
           id="open-dendrites-button"
@@ -132,7 +133,8 @@
         <el-button
           v-show="
             entry.destinationsWithDatasets &&
-            entry.destinationsWithDatasets.length > 0
+            entry.destinationsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.destinationsWithDatasets)
           "
           class="button"
           @click="openAxons"
@@ -144,7 +146,8 @@
       <el-button
         v-show="
           entry.componentsWithDatasets &&
-          entry.componentsWithDatasets.length > 0
+          entry.componentsWithDatasets.length > 0 &&
+          shouldShowExploreButton(entry.componentsWithDatasets)
         "
         class="button"
         @click="openAll"
@@ -168,7 +171,7 @@ import {
   ElIcon as Icon,
 } from 'element-plus'
 import ExternalResourceCard from './ExternalResourceCard.vue'
-import EventBus from './EventBus'
+import EventBus from './EventBus.js'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -205,6 +208,10 @@ export default {
         resource: undefined,
       }),
     },
+    availableAnatomyFacets: {
+      type: Array,
+      default: () => [],
+    },
   },
   // inject: ['getFeaturesAlert'],
   data: function () {
@@ -213,6 +220,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      facetList: [],
       showToolip: false,
       showDetails: false,
       originDescriptions: {
@@ -223,6 +231,15 @@ export default {
       uberons: [{ id: undefined, name: undefined }],
     }
   },
+  watch: {
+    availableAnatomyFacets: {
+      handler: function (val) {
+        this.convertFacetsToList(val)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   computed: {
     resources: function () {
       let resources = [];
@@ -277,6 +294,25 @@ export default {
         labels: this.entry.destinationsWithDatasets.map((a) => a.name),
       })
     },
+    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
+    shouldShowExploreButton: function (features) {
+      for (let i = 0; i < features.length; i++) {
+        if (this.facetList.includes(features[i].name.toLowerCase())) {
+          return true
+        }
+      }
+      return false
+    },
+    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
+    convertFacetsToList: function (facets) {
+      facets.forEach((facet) => {
+        if(facet.children) {
+          this.convertFacetsToList(facet.children)
+        } else {
+          this.facetList.push(facet.label.toLowerCase())
+        }
+      })
+    },
     openDendrites: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
diff --git a/src/components/SearchFilters.vue b/src/components/SearchFilters.vue
index 0bc3d269..d1778c44 100644
--- a/src/components/SearchFilters.vue
+++ b/src/components/SearchFilters.vue
@@ -118,6 +118,7 @@ import '@abi-software/svg-sprite/dist/style.css'
 
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { facetPropPathMapping } from '../algolia/utils.js'
+import EventBus from './EventBus.js'
 
 const capitalise = function (txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1)
@@ -217,6 +218,7 @@ export default {
           .getAlgoliaFacets(facetPropPathMapping)
           .then((data) => {
             this.facets = data
+            EventBus.emit('available-facets', data)
             this.options = data
 
             // create top level of options in cascader
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 817a981b..1fd4d247 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -33,6 +33,7 @@
             <template v-if="tab.id === 2">
               <connectivity-info
                 :entry="connectivityInfo"
+                :availableAnatomyFacets="availableAnatomyFacets"
                 v-show="tab.id === activeId"
                 :ref="tab.id"
               />
@@ -134,6 +135,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
+
     }
   },
   methods: {
@@ -268,6 +270,12 @@ export default {
       this.tabClicked(1);
       this.$emit('actionClick', payLoad);
     })
+
+    // Get available anatomy facets for the connectivity info
+    EventBus.on('available-facets', (payLoad) => {
+        this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
+    })
+    
   },
 }
 </script>
diff --git a/src/exampleConnectivityInput.js b/src/exampleConnectivityInput.js
new file mode 100644
index 00000000..6d73e2bb
--- /dev/null
+++ b/src/exampleConnectivityInput.js
@@ -0,0 +1,292 @@
+export default {
+    "destinations": [
+        "Fifth thoracic ganglion",
+        "ventricular intrinsic cardiac ganglion",
+        "Sixth thoracic ganglion",
+        "superior cervical ganglion",
+        "T1 sympathetic ganglion",
+        "Second thoracic ganglion",
+        "Third thoracic ganglion",
+        "mediastinal ganglion",
+        "Fourth thoracic ganglion",
+        "inferior cervical ganglion",
+        "middle cervical ganglion",
+        "Atrial intrinsic cardiac ganglion"
+    ],
+    "origins": [
+        "lamina VII of gray matter of spinal cord, first thoracic spinal cord segment",
+        "lamina VII of gray matter of spinal cord, fourth thoracic spinal cord segment",
+        "lamina VII of gray matter of spinal cord, sixth thoracic spinal cord segment",
+        "lamina VII of gray matter of spinal cord, C8 segment of cervical spinal cord",
+        "lamina VII of gray matter of spinal cord, third thoracic spinal cord segment",
+        "lamina VII of gray matter of spinal cord, second thoracic spinal cord segment",
+        "lamina VII of gray matter of spinal cord, fifth thoracic spinal cord segment"
+    ],
+    "components": [
+        "third thoracic spinal cord segment",
+        "ansa subclavia",
+        "T3 - T4 Interganglionic segment",
+        "vago-sympathetic trunk",
+        "T1 - T2 Interganglionic segment",
+        "epicardial fat, heart",
+        "White communicating ramus of sixth thoracic anterior ramus",
+        "C8 segment of cervical spinal cord",
+        "ventral nerve root of cervical spinal cord",
+        "T2 - T3 Interganglionic segment",
+        "Anterior root of third thoracic nerve",
+        "White communicating ramus of third thoracic anterior ramus",
+        "White communicating ramus of fourth thoracic anterior ramus",
+        "Anterior root of sixth thoracic nerve",
+        "Anterior root of fourth thoracic nerve",
+        "fourth thoracic spinal cord segment",
+        "Interganglionic branch of inferior cervical ganglion to vertebral ganglion",
+        "T4 - T5 Interganglionic segment",
+        "T5 - T6 Interganglionic segment",
+        "second thoracic spinal cord segment",
+        "Anterior root of second thoracic nerve",
+        "fifth thoracic spinal cord segment",
+        "Anterior root of fifth sacral nerve",
+        "Interganglionic branch of inferior cervical ganglion to middle cervical ganglion",
+        "sixth thoracic spinal cord segment",
+        "Interganglionic branch of inferior cervical ganglion to first thoracic ganglion",
+        "Anterior root of first thoracic nerve",
+        "Anterior root of fifth thoracic nerve",
+        "White communicating ramus of second thoracic anterior ramus",
+        "White communicating ramus of fifth thoracic anterior ramus",
+        "first thoracic spinal cord segment"
+    ],
+    "destinationsWithDatasets": [
+        {
+            "id": "ILX:0774266",
+            "name": "T1 sympathetic ganglion"
+        },
+        {
+            "id": "ILX:0786141",
+            "name": "Fifth thoracic ganglion"
+        },
+        {
+            "id": "ILX:0786228",
+            "name": "Second thoracic ganglion"
+        },
+        {
+            "id": "ILX:0786272",
+            "name": "Fourth thoracic ganglion"
+        },
+        {
+            "id": "ILX:0786722",
+            "name": "Third thoracic ganglion"
+        },
+        {
+            "id": "ILX:0789947",
+            "name": "Sixth thoracic ganglion"
+        },
+        {
+            "id": "ILX:0793550",
+            "name": "mediastinal ganglion"
+        },
+        {
+            "id": "ILX:0793555",
+            "name": "Atrial intrinsic cardiac ganglion"
+        },
+        {
+            "id": "ILX:0793556",
+            "name": "ventricular intrinsic cardiac ganglion"
+        },
+        {
+            "id": "UBERON:0001989",
+            "name": "superior cervical ganglion"
+        },
+        {
+            "id": "UBERON:0001990",
+            "name": "middle cervical ganglion"
+        },
+        {
+            "id": "UBERON:0002440",
+            "name": "inferior cervical ganglion"
+        }
+    ],
+    "originsWithDatasets": [
+        {
+            "id": "UBERON:0006452",
+            "name": "fourth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006453",
+            "name": "fifth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006454",
+            "name": "sixth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006457",
+            "name": "first thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006458",
+            "name": "second thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006459",
+            "name": "third thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006470",
+            "name": "C8 segment of cervical spinal cord"
+        },
+        {
+            "id": "UBERON:0016578",
+            "name": "lamina VII of gray matter of spinal cord"
+        }
+    ],
+    "componentsWithDatasets": [
+        {
+            "id": "ILX:0739241",
+            "name": "ansa subclavia"
+        },
+        {
+            "id": "ILX:0777094",
+            "name": "T1 - T2 Interganglionic segment"
+        },
+        {
+            "id": "ILX:0777095",
+            "name": "T2 - T3 Interganglionic segment"
+        },
+        {
+            "id": "ILX:0777096",
+            "name": "T3 - T4 Interganglionic segment"
+        },
+        {
+            "id": "ILX:0777097",
+            "name": "T4 - T5 Interganglionic segment"
+        },
+        {
+            "id": "ILX:0777098",
+            "name": "T5 - T6 Interganglionic segment"
+        },
+        {
+            "id": "ILX:0784804",
+            "name": "Anterior root of third thoracic nerve"
+        },
+        {
+            "id": "ILX:0785971",
+            "name": "Anterior root of fifth sacral nerve"
+        },
+        {
+            "id": "ILX:0787722",
+            "name": "Anterior root of first thoracic nerve"
+        },
+        {
+            "id": "ILX:0789894",
+            "name": "Anterior root of second thoracic nerve"
+        },
+        {
+            "id": "ILX:0790146",
+            "name": "Anterior root of fifth thoracic nerve"
+        },
+        {
+            "id": "ILX:0791062",
+            "name": "Anterior root of sixth thoracic nerve"
+        },
+        {
+            "id": "ILX:0792838",
+            "name": "Anterior root of fourth thoracic nerve"
+        },
+        {
+            "id": "ILX:0793208",
+            "name": "White communicating ramus of second thoracic anterior ramus"
+        },
+        {
+            "id": "ILX:0793209",
+            "name": "White communicating ramus of third thoracic anterior ramus"
+        },
+        {
+            "id": "ILX:0793210",
+            "name": "White communicating ramus of fourth thoracic anterior ramus"
+        },
+        {
+            "id": "ILX:0793211",
+            "name": "White communicating ramus of fifth thoracic anterior ramus"
+        },
+        {
+            "id": "ILX:0793212",
+            "name": "White communicating ramus of sixth thoracic anterior ramus"
+        },
+        {
+            "id": "ILX:0793233",
+            "name": "Interganglionic branch of inferior cervical ganglion to first thoracic ganglion"
+        },
+        {
+            "id": "ILX:0793234",
+            "name": "Interganglionic branch of inferior cervical ganglion to middle cervical ganglion"
+        },
+        {
+            "id": "ILX:0793363",
+            "name": "Interganglionic branch of inferior cervical ganglion to vertebral ganglion"
+        },
+        {
+            "id": "UBERON:0000948",
+            "name": "heart"
+        },
+        {
+            "id": "UBERON:0006452",
+            "name": "fourth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006453",
+            "name": "fifth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006454",
+            "name": "sixth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006457",
+            "name": "first thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006458",
+            "name": "second thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006459",
+            "name": "third thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006470",
+            "name": "C8 segment of cervical spinal cord"
+        },
+        {
+            "id": "UBERON:0014634",
+            "name": "ventral nerve root of cervical spinal cord"
+        },
+        {
+            "id": "UBERON:0015129",
+            "name": "epicardial fat"
+        },
+        {
+            "id": "ilxtr:vago-sympathetic-trunk",
+            "name": "vago-sympathetic trunk"
+        }
+    ],
+    "title": "neuron type aacar 5",
+    "featureId": [
+        "ilxtr:neuron-type-aacar-5"
+    ],
+    "hyperlinks": [
+        {
+            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fwww.ncbi.nlm.nih.gov%2Fpubmed%2F27783854",
+            "id": "pubmed"
+        }
+    ],
+    "provenanceTaxonomy": [
+        "NCBITaxon:9606",
+        "NCBITaxon:9615",
+        "NCBITaxon:9825"
+    ],
+    "provenanceTaxonomyLabel": [
+        "Homo sapiens",
+        "Canis lupus familiaris",
+        "Domestic Pig"
+    ]
+}
\ No newline at end of file

From 2dd04ace2fc05535893ade4529f43d55e2bce36d Mon Sep 17 00:00:00 2001
From: Jesse Khorasanee <jessekhorasanee@gmail.com>
Date: Thu, 4 Jul 2024 16:02:56 +1200
Subject: [PATCH 15/28] Add types

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b0e9267c..02e92430 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,8 +100,8 @@ export default {
   },
   data: function () {
     return {
-      tabArray: [{ title: 'Flatmap', id: 1 }, { title: 'Connectivity', id: 2 }],
-      contextArray: [null, null, null],
+      contextArray: [null, null],
+      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,

From 9731c1f441191e235947f3e47e84e6f0d4886f3b Mon Sep 17 00:00:00 2001
From: Jesse Khorasanee <jessekhorasanee@gmail.com>
Date: Thu, 4 Jul 2024 16:23:53 +1200
Subject: [PATCH 16/28] Fix tabClicked function

---
 src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 02e92430..1258c40c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,7 @@
       ref="sideBar"
       :visible="sideBarVisibility"
       :tabs="tabs"
-      :activeId="activeId"
+      :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
@@ -124,8 +124,8 @@ export default {
     searchChanged: function (data) {
       console.log(data)
     },
-    tabClicked: function (id) {
-      this.activeId = id
+    tabClicked: function (tab) {
+      this.activeId = tab.id
     },
     // For connectivity input actions
     action: function (action) {

From f3249b3a41ccab5c1a70982769f82ce3223ae600 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 4 Jul 2024 17:04:47 +1200
Subject: [PATCH 17/28] Update space between connectivity blocks

---
 src/components/ConnectivityInfo.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 4057ea6f..77fde20e 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -544,6 +544,10 @@ export default {
 
   .block {
     padding-top: 0.5em;
+
+    + .block {
+      margin-top: 1rem;
+    }
   }
 
   .connectivity-info-title ~ & {

From e8d9d8a8191963f3bd198c5d2b4c2b5863f95b4d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 4 Jul 2024 17:24:48 +1200
Subject: [PATCH 18/28] Update version number to 2.2.1-beta.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9c199c94..3addf2c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.0",
+  "version": "2.2.1-beta.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.2.0",
+      "version": "2.2.1-beta.3",
       "dependencies": {
         "@abi-software/gallery": "^1.1.0",
         "@abi-software/svg-sprite": "^1.0.0",
diff --git a/package.json b/package.json
index 1e426882..bbc3a634 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-alpha-3",
+  "version": "2.2.1-beta.3",
   "files": [
     "dist/*",
     "src/*",

From 654d32f00777391a71e2f329f09909067b43251d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 5 Jul 2024 10:08:46 +1200
Subject: [PATCH 19/28] Fix explore origin data button empty result

---
 src/components/ConnectivityInfo.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 77fde20e..fc7aaf72 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -285,13 +285,13 @@ export default {
     openAll: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.componentsWithDatasets.map((a) => a.name),
+        labels: this.entry.componentsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
     openAxons: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.destinationsWithDatasets.map((a) => a.name),
+        labels: this.entry.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
     // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
@@ -316,7 +316,7 @@ export default {
     openDendrites: function () {
       EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
-        labels: this.entry.originsWithDatasets.map((a) => a.name),
+        labels: this.entry.originsWithDatasets.map((a) => a.name.toLowerCase()),
       })
     },
     pubmedSearchUrlUpdate: function (val) {

From 86d62c7dab9dccca8707fb1c3ba6cfac972d8ace Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 5 Jul 2024 10:10:12 +1200
Subject: [PATCH 20/28] Update version 2.2.1-beta.4

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3addf2c3..b94ee50f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.3",
+  "version": "2.2.1-beta.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.2.1-beta.3",
+      "version": "2.2.1-beta.4",
       "dependencies": {
         "@abi-software/gallery": "^1.1.0",
         "@abi-software/svg-sprite": "^1.0.0",
diff --git a/package.json b/package.json
index bbc3a634..24b56a4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.3",
+  "version": "2.2.1-beta.4",
   "files": [
     "dist/*",
     "src/*",

From d329c7481de908fe85f9bed6c229bc86854c1d19 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:54:28 +1200
Subject: [PATCH 21/28] Install Cypress

---
 .env                                 |    4 +-
 .gitignore                           |    1 +
 cypress.config.js                    |   23 +
 cypress/fixtures/example.json        |    5 +
 cypress/support/commands.js          |   37 +
 cypress/support/component-index.html |   12 +
 cypress/support/component.js         |   31 +
 package-lock.json                    | 1593 +++++++++++++++++++++++++-
 package.json                         |    3 +
 9 files changed, 1667 insertions(+), 42 deletions(-)
 create mode 100644 cypress.config.js
 create mode 100644 cypress/fixtures/example.json
 create mode 100644 cypress/support/commands.js
 create mode 100644 cypress/support/component-index.html
 create mode 100644 cypress/support/component.js

diff --git a/.env b/.env
index cea1d000..3440a9a6 100644
--- a/.env
+++ b/.env
@@ -1,8 +1,8 @@
 VITE_APP_API_LOCATION=http://localhost:5000/
-VITE_FLATMAPAPI_LOCATION=''
 VITE_APP_ALGOLIA_KEY=
 VITE_APP_ALGOLIA_ID=
 VITE_APP_PENNSIEVE_API_LOCATION=https://api.pennsieve.io
 VITE_APP_ALGOLIA_INDEX=k-core_dev_published_time_desc
+VITE_APP_BL_SERVER_URL=
 VITE_APP_NL_LINK_PREFIX=
-VITE_APP_ROOT_URL=
+VITE_APP_ROOT_URL=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e6fb19bd..470f936c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 docs/.vitepress/dist
 docs/.vitepress/cache
 docs/components
+.vitepress
\ No newline at end of file
diff --git a/cypress.config.js b/cypress.config.js
new file mode 100644
index 00000000..3347d9a4
--- /dev/null
+++ b/cypress.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  defaultCommandTimeout: 10000,
+  reporter: "junit",
+  experimentalMemoryManagement: true,
+  numTestsKeptInMemory: 0,
+  reporter: "cypress-multi-reporters",
+  reporterOptions: {
+    configFile: "reporter-config.json",
+  },
+  component: {
+    viewportWidth: 1440,
+    viewportHeight: 900,
+    specPattern: "cypress/component/*.cy.js",
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+  video: true,
+  videoCompression: true,
+});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
new file mode 100644
index 00000000..02e42543
--- /dev/null
+++ b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
new file mode 100644
index 00000000..698b01a4
--- /dev/null
+++ b/cypress/support/commands.js
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
new file mode 100644
index 00000000..ac6e79fd
--- /dev/null
+++ b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/cypress/support/component.js b/cypress/support/component.js
new file mode 100644
index 00000000..ec7d6519
--- /dev/null
+++ b/cypress/support/component.js
@@ -0,0 +1,31 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// with a <reference path="./component" /> at the top of your spec.
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9c199c94..f58480c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.0",
+  "version": "2.2.1-alpha-3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.2.0",
+      "version": "2.2.1-alpha-3",
       "dependencies": {
         "@abi-software/gallery": "^1.1.0",
         "@abi-software/svg-sprite": "^1.0.0",
@@ -28,6 +28,7 @@
         "autoprefixer": "^10.4.17",
         "chokidar": "^3.6.0",
         "concurrently": "^8.2.2",
+        "cypress": "^13.13.0",
         "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.19.2",
         "file-loader": "^5.0.2",
@@ -514,6 +515,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -522,6 +533,68 @@
         "node": ">=10"
       }
     },
+    "node_modules/@cypress/request": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
+      "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
+      "dev": true,
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "http-signature": "~1.3.6",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "6.10.4",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^4.1.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@cypress/request/node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/@cypress/xvfb": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
+      "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.1.0",
+        "lodash.once": "^4.1.1"
+      }
+    },
+    "node_modules/@cypress/xvfb/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/@docsearch/css": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.0.tgz",
@@ -1461,16 +1534,37 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
       "integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/sinonjs__fake-timers": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
+      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+      "dev": true
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -2055,6 +2149,19 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2102,6 +2209,42 @@
         "@algolia/transporter": "4.23.2"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2138,12 +2281,65 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+      "dev": true
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -2154,6 +2350,15 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/auto-changelog": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.4.0.tgz",
@@ -2210,6 +2415,21 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz",
+      "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==",
+      "dev": true
+    },
     "node_modules/axios": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
@@ -2225,6 +2445,35 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -2245,6 +2494,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/blob-util": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
+      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
+      "dev": true
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2304,6 +2565,39 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -2311,6 +2605,34 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/cachedir": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
+      "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2340,6 +2662,12 @@
         }
       ]
     },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2356,6 +2684,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/check-more-types": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
+      "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2400,6 +2737,73 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
+      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -2432,6 +2836,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2452,6 +2862,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2500,6 +2919,12 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2536,13 +2961,112 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+    "node_modules/cypress": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.0.tgz",
+      "integrity": "sha512-ou/MQUDq4tcDJI2FsPaod2FZpex4kpIK43JJlcBgWrX8WX7R/05ZxGTuxedOuZBfxjZxja+fbijZGyxiLP6CFA==",
       "dev": true,
+      "hasInstallScript": true,
       "dependencies": {
-        "@babel/runtime": "^7.21.0"
+        "@cypress/request": "^3.0.0",
+        "@cypress/xvfb": "^1.2.4",
+        "@types/sinonjs__fake-timers": "8.1.1",
+        "@types/sizzle": "^2.3.2",
+        "arch": "^2.2.0",
+        "blob-util": "^2.0.2",
+        "bluebird": "^3.7.2",
+        "buffer": "^5.7.1",
+        "cachedir": "^2.3.0",
+        "chalk": "^4.1.0",
+        "check-more-types": "^2.24.0",
+        "cli-cursor": "^3.1.0",
+        "cli-table3": "~0.6.1",
+        "commander": "^6.2.1",
+        "common-tags": "^1.8.0",
+        "dayjs": "^1.10.4",
+        "debug": "^4.3.4",
+        "enquirer": "^2.3.6",
+        "eventemitter2": "6.4.7",
+        "execa": "4.1.0",
+        "executable": "^4.1.1",
+        "extract-zip": "2.0.1",
+        "figures": "^3.2.0",
+        "fs-extra": "^9.1.0",
+        "getos": "^3.2.1",
+        "is-ci": "^3.0.1",
+        "is-installed-globally": "~0.4.0",
+        "lazy-ass": "^1.6.0",
+        "listr2": "^3.8.3",
+        "lodash": "^4.17.21",
+        "log-symbols": "^4.0.0",
+        "minimist": "^1.2.8",
+        "ospath": "^1.2.2",
+        "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
+        "proxy-from-env": "1.0.0",
+        "request-progress": "^3.0.0",
+        "semver": "^7.5.3",
+        "supports-color": "^8.1.1",
+        "tmp": "~0.2.3",
+        "untildify": "^4.0.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "cypress": "bin/cypress"
+      },
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/cypress/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cypress/node_modules/proxy-from-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
+      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
+      "dev": true
+    },
+    "node_modules/cypress/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
       },
       "engines": {
         "node": ">=0.11"
@@ -2585,6 +3109,23 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2605,6 +3146,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.724",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.724.tgz",
@@ -2651,6 +3202,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
@@ -2665,6 +3225,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquirer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+      "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2676,6 +3249,27 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.0.tgz",
@@ -2916,6 +3510,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter2": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
+      "dev": true
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -2926,6 +3526,76 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/execa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/executable": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
+      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ]
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2978,6 +3648,39 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/figures/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3085,6 +3788,15 @@
         }
       }
     },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -3111,6 +3823,21 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3147,6 +3874,58 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/getos": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
+      "integrity": "sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.0"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3186,6 +3965,21 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dev": true,
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -3201,12 +3995,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -3244,6 +4049,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -3270,6 +4111,49 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "dev": true
     },
+    "node_modules/http-signature": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
+      "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.14.1"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3310,6 +4194,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -3326,6 +4219,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3337,6 +4239,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-ci": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+      "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+      "dev": true,
+      "dependencies": {
+        "ci-info": "^3.2.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -3376,6 +4290,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3393,12 +4323,48 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -3448,6 +4414,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -3473,6 +4445,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3485,6 +4463,12 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -3497,6 +4481,33 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3506,6 +4517,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/lazy-ass": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
+      "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
+      "dev": true,
+      "engines": {
+        "node": "> 0.8"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3519,6 +4539,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/listr2": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
+      "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.16",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.5.1",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "enquirer": ">= 2.3.0 < 3"
+      },
+      "peerDependenciesMeta": {
+        "enquirer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -3566,35 +4613,106 @@
         "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
-    "node_modules/lodash-unified": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "peerDependencies": {
-        "@types/lodash-es": "*",
-        "lodash": "*",
-        "lodash-es": "*"
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3644,8 +4762,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -3686,6 +4803,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3800,6 +4926,18 @@
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -3812,6 +4950,18 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3821,6 +4971,21 @@
         "wrappy": "1"
       }
     },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -3838,6 +5003,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/ospath": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "dev": true
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3868,6 +5039,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3924,12 +5110,24 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
       "dev": true
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3946,6 +5144,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -4011,11 +5218,48 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4025,6 +5269,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.10.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
+      "integrity": "sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4077,6 +5342,15 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "dev": true
     },
+    "node_modules/request-progress": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
+      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
+      "dev": true,
+      "dependencies": {
+        "throttleit": "^1.0.0"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -4086,6 +5360,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4111,6 +5391,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4224,8 +5517,13 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ],
-      "peer": true
+      ]
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.72.0",
@@ -4294,6 +5592,23 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4333,6 +5648,44 @@
         "@shikijs/core": "1.2.3"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4376,6 +5729,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dev": true,
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4402,6 +5780,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4539,6 +5926,30 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttleit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
+      "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true
+    },
+    "node_modules/tmp": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4559,6 +5970,30 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -4589,6 +6024,24 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4643,8 +6096,16 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "dev": true,
-      "peer": true
+      "engines": {
+        "node": ">= 10.0.0"
+      }
     },
     "node_modules/unplugin": {
       "version": "1.10.1",
@@ -4718,6 +6179,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -4757,12 +6227,45 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.7.tgz",
@@ -5282,6 +6785,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 1e426882..75c87d34 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "serve": "vite --host",
     "build-bundle": "vite build",
     "preview": "vite preview",
+    "test": "cypress run --component",
+    "cypress:open": "cypress open",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
     "release:minor": "npm version minor; npm publish",
@@ -57,6 +59,7 @@
     "autoprefixer": "^10.4.17",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
+    "cypress": "^13.13.0",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "file-loader": "^5.0.2",

From f04659f9e89f6faf7cb2cd386b7b0dd02678f206 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:55:50 +1200
Subject: [PATCH 22/28] Initial SideBar testing

---
 cypress/component/SideBar.cy.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 cypress/component/SideBar.cy.js

diff --git a/cypress/component/SideBar.cy.js b/cypress/component/SideBar.cy.js
new file mode 100644
index 00000000..4f90ef6e
--- /dev/null
+++ b/cypress/component/SideBar.cy.js
@@ -0,0 +1,25 @@
+import SideBar from '../../src/components/SideBar.vue'
+
+describe('<SideBar />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(SideBar, {
+      propsData:{
+        tabArray: [{ title: 'Flatmap', id: 1 }],
+        contextArray: [null, null, null],
+        sideBarVisibility: true,
+        envVars: {
+          API_LOCATION: Cypress.env('API_LOCATION'),
+          ALGOLIA_KEY: Cypress.env('ALGOLIA_KEY'),
+          ALGOLIA_ID: Cypress.env('ALGOLIA_ID'),
+          ALGOLIA_INDEX: Cypress.env('ALGOLIA_INDEX'),
+          PENNSIEVE_API_LOCATION: Cypress.env('PENNSIEVE_API_LOCATION'),
+          BL_SERVER_URL: Cypress.env('BL_SERVER_URL'),
+          NL_LINK_PREFIX: Cypress.env('NL_LINK_PREFIX'),
+          ROOT_URL: Cypress.env('ROOT_URL'),
+        },
+        activeId: 1,
+      }
+    })
+  })
+})
\ No newline at end of file

From e383c29bfcf84dab7dd02d39fccc3322bff008a8 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 8 Jul 2024 13:15:54 +1200
Subject: [PATCH 23/28] Add show highlighted connectivity on map button for
 sidebar connectivity

---
 src/components/ConnectivityInfo.vue | 39 +++++++++++++++++++++++++++++
 src/components/SideBar.vue          | 10 +++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index fc7aaf72..d4120bf8 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -20,6 +20,25 @@
         </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
+      <div>
+        <el-popover
+          width="200"
+          trigger="hover"
+          :teleported="false"
+          popper-class="popover-origin-help"
+        >
+          <template #reference>
+            <el-button class="button-circle" circle @click="showConnectivity(entry)">
+              <el-icon color="white">
+                <el-icon-location />
+              </el-icon>
+            </el-button>
+          </template>
+          <span>
+            Show connectivity on map
+          </span>
+        </el-popover>
+      </div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
@@ -322,6 +341,12 @@ export default {
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val
     },
+    showConnectivity: function (entry) {
+      // move the map center to highlighted area
+      const featureIds = entry.featureId || [];
+      // connected to flatmapvuer > moveMap(featureIds) function
+      this.$emit('show-connectivity', featureIds);
+    },
   },
 }
 </script>
@@ -338,6 +363,7 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  gap: 1rem;
 }
 
 .title {
@@ -363,6 +389,19 @@ export default {
   width: 16rem;
 }
 
+.button-circle {
+  width: 24px !important;
+  height: 24px !important;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $app-primary-color;
+    border-color: $app-primary-color;
+  }
+}
+
 .icon {
   right: 0px;
   position: absolute;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index dfef31d6..4504ad17 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -36,6 +36,7 @@
                 :availableAnatomyFacets="availableAnatomyFacets"
                 v-show="tab.id === activeTabId"
                 :ref="'connectivityTab_' + tab.id"
+                @show-connectivity="showConnectivity"
               />
             </template>
             <template v-else>
@@ -146,6 +147,13 @@ export default {
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },
+    /**
+     * This event is emitted when the show connectivity button is clicked.
+     * @arg featureIds
+     */
+    showConnectivity: function (featureIds) {
+      this.$emit('show-connectivity', featureIds);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}
@@ -308,7 +316,7 @@ export default {
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
     })
-    
+
   },
 }
 </script>

From 7181a2e362ec3e4c3fb8c3002e05a92877b7af3f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 8 Jul 2024 15:56:39 +1200
Subject: [PATCH 24/28] Update version 2.2.1-beta.5

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b94ee50f..6b7480a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.4",
+  "version": "2.2.1-beta.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.2.1-beta.4",
+      "version": "2.2.1-beta.5",
       "dependencies": {
         "@abi-software/gallery": "^1.1.0",
         "@abi-software/svg-sprite": "^1.0.0",
diff --git a/package.json b/package.json
index 24b56a4e..b4bb56d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.4",
+  "version": "2.2.1-beta.5",
   "files": [
     "dist/*",
     "src/*",

From 23ace060bf2cdc61a9af293c2f6baf5072d77932 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 9 Jul 2024 15:58:12 +1200
Subject: [PATCH 25/28] Add sidebar default functionality testing

---
 cypress/component/SideBar.cy.js | 95 +++++++++++++++++++++++++++------
 1 file changed, 78 insertions(+), 17 deletions(-)

diff --git a/cypress/component/SideBar.cy.js b/cypress/component/SideBar.cy.js
index 4f90ef6e..6300334f 100644
--- a/cypress/component/SideBar.cy.js
+++ b/cypress/component/SideBar.cy.js
@@ -1,25 +1,86 @@
-import SideBar from '../../src/components/SideBar.vue'
+import SideBar from "../../src/components/SideBar.vue"
+
+const searchHistory = [
+  { filters: [], search: "heart" },
+  { filters: [], search: "lung" },
+  { filters: [], search: "scaffold" },
+  { filters: [], search: "pig" },
+  { filters: [], search: "heart" },
+]
+
+describe("<SideBar />", () => {
+  before(() => {
+    cy.intercept('**/dataset_info/**').as('dataset_info')
+    cy.intercept('**/discover/**').as('discover')
+    cy.intercept('**/image_search/**').as('image_search')
+  })
+
+  it("Should test the SideBar browser functionality", () => {
+    // Mock search history
+    cy.clearLocalStorage().then(() => {
+      window.localStorage.setItem(
+        "sparc.science-sidebar-search-history",
+        JSON.stringify(searchHistory)
+      )
+    })
 
-describe('<SideBar />', () => {
-  it('renders', () => {
     // see: https://on.cypress.io/mounting-vue
     cy.mount(SideBar, {
-      propsData:{
-        tabArray: [{ title: 'Flatmap', id: 1 }],
-        contextArray: [null, null, null],
-        sideBarVisibility: true,
+      props: {
         envVars: {
-          API_LOCATION: Cypress.env('API_LOCATION'),
-          ALGOLIA_KEY: Cypress.env('ALGOLIA_KEY'),
-          ALGOLIA_ID: Cypress.env('ALGOLIA_ID'),
-          ALGOLIA_INDEX: Cypress.env('ALGOLIA_INDEX'),
-          PENNSIEVE_API_LOCATION: Cypress.env('PENNSIEVE_API_LOCATION'),
-          BL_SERVER_URL: Cypress.env('BL_SERVER_URL'),
-          NL_LINK_PREFIX: Cypress.env('NL_LINK_PREFIX'),
-          ROOT_URL: Cypress.env('ROOT_URL'),
+          API_LOCATION: Cypress.env("API_LOCATION"),
+          ALGOLIA_KEY: Cypress.env("ALGOLIA_KEY"),
+          ALGOLIA_ID: Cypress.env("ALGOLIA_ID"),
+          ALGOLIA_INDEX: Cypress.env("ALGOLIA_INDEX"),
+          PENNSIEVE_API_LOCATION: Cypress.env("PENNSIEVE_API_LOCATION"),
+          BL_SERVER_URL: Cypress.env("BL_SERVER_URL"),
+          NL_LINK_PREFIX: Cypress.env("NL_LINK_PREFIX"),
+          ROOT_URL: Cypress.env("ROOT_URL"),
         },
-        activeId: 1,
-      }
+      },
     })
+
+    cy.get(".open-tab").should("exist").click()
+
+    cy.wait(['@dataset_info', '@discover', '@image_search'], { timeout: 20000 })
+
+    // Sidebar should be visible and have close tab
+    cy.get('.tab-container').should('not.exist')
+    cy.get(".close-tab").should("exist")
+    cy.get(".sidebar-container").should("be.visible")
+
+    // Default 10 dataset cards should be loaded
+    cy.get(".dataset-card-container").should("have.length", 10)
+
+    // Search history should be loaded
+    cy.get(".history-container > .search-tag").should("have.length", 3)
+
+    // Search history should be clickable and filter the dataset cards
+    cy.get(".history-container > .search-tag").contains("heart").click()
+    cy.get('.header > .el-input > .el-input__wrapper > .el-input__inner').invoke('val').then(($input) => {
+      expect($input).to.equal('heart')
+    })
+    cy.get('.history-container > .el-select > .el-select__wrapper').click()
+    cy.get('.history-container > .search-select > transition-stub > .sidebar-search-select-popper').as('fullHistory')
+    cy.get('@fullHistory').should('be.visible')
+    cy.get('@fullHistory').contains('scaffold').click()
+    cy.get('.header > .el-input > .el-input__wrapper > .el-input__inner').invoke('val').then(($input) => {
+      expect($input).to.equal('scaffold')
+    })
+
+    // Filter tags should be added and removed
+    cy.get('.ml-2 > .el-tag').should('not.exist')
+    cy.get('.el-cascader > .el-input > .el-input__wrapper').click()
+    cy.get(':nth-child(1) > .el-cascader-menu__wrap > .el-scrollbar__view').contains('Sex').click()
+    cy.get(':nth-child(2) > .el-cascader-menu__wrap > .el-scrollbar__view').contains('Male').click()
+    cy.get('.ml-2 > .el-tag').should('exist').and('contain', 'Male')
+    cy.get('.ml-2 > .el-tag > .el-tag__close').click()
+    cy.get('.ml-2 > .el-tag').should('not.exist')
+
+    // Dataset card content should be loaded
+    cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-left > .full-size > .gallery > .gallery-strip > .card-line > .key-image-span > .el-card > .el-card__body > :nth-child(1) > .cursor-pointer > img').should('exist')
+    cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-left > .full-size > .gallery > .gallery-strip > .card-line > .key-image-span > .el-card > .el-card__body > :nth-child(1) > .details > .el-button').should('exist')
+    cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-right > .title').should('exist')
+    cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-right > :nth-child(2)').should('exist')
   })
 })
\ No newline at end of file

From 9677c3c1911121b2528d2cc637dc256c40b76462 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 10 Jul 2024 09:38:36 +1200
Subject: [PATCH 26/28] Add testing for connectivity info

---
 cypress/component/SideBar.cy.js  |  84 +++++++++++++++-
 cypress/fixtures/neuronInfo.json | 162 +++++++++++++++++++++++++++++++
 2 files changed, 245 insertions(+), 1 deletion(-)
 create mode 100644 cypress/fixtures/neuronInfo.json

diff --git a/cypress/component/SideBar.cy.js b/cypress/component/SideBar.cy.js
index 6300334f..ae955452 100644
--- a/cypress/component/SideBar.cy.js
+++ b/cypress/component/SideBar.cy.js
@@ -83,4 +83,86 @@ describe("<SideBar />", () => {
     cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-right > .title').should('exist')
     cy.get(':nth-child(1) > .dataset-card-container > .dataset-card > :nth-child(2) > .card-right > :nth-child(2)').should('exist')
   })
-})
\ No newline at end of file
+
+  it("Should test the Provenance Card functionality", () => {
+    cy.fixture('neuronInfo.json').as('neuronInfo');
+
+    // Pass provenance card data to SideBar
+    cy.get('@neuronInfo').then((neuronInfo) => {
+      cy.mount(SideBar, {
+        props: {
+          envVars: {
+            API_LOCATION: Cypress.env("API_LOCATION"),
+            ALGOLIA_KEY: Cypress.env("ALGOLIA_KEY"),
+            ALGOLIA_ID: Cypress.env("ALGOLIA_ID"),
+            ALGOLIA_INDEX: Cypress.env("ALGOLIA_INDEX"),
+            PENNSIEVE_API_LOCATION: Cypress.env("PENNSIEVE_API_LOCATION"),
+            BL_SERVER_URL: Cypress.env("BL_SERVER_URL"),
+            NL_LINK_PREFIX: Cypress.env("NL_LINK_PREFIX"),
+            ROOT_URL: Cypress.env("ROOT_URL"),
+          },
+          connectivityInfo: neuronInfo,
+          openAtStart: true,
+          activeId: 2,
+        },
+      })
+    }).as('wrapper')
+
+    // Sidebar Connectivity tab should be activated when neuron is clicked
+    cy.get('.tab-container').should('exist')
+    cy.get(':nth-child(1) > .title-text-table > .title-text').should('exist').and('contain', 'Search').as('Search')
+    cy.get('.active-tab > .title-text-table > .title-text').should('exist').and('contain', 'Connectivity').as('Connectivity')
+    cy.get('.active-tab > .el-button > :nth-child(1)').should('exist').as('CloseConnectivity')
+
+    cy.get('@neuronInfo').then((neuronInfo) => {
+      cy.get('.block > .title').contains(new RegExp(neuronInfo.name, 'i')).should('exist')
+      if ('origins' in neuronInfo) {
+        cy.get('.attribute-title-container').contains(/ORIGIN/i).should('exist').as('origins')
+        cy.get('@origins').parent().siblings('.attribute-content').should('have.length', neuronInfo.origins.length)
+      }
+      if ('components' in neuronInfo) {
+        cy.get('.attribute-title-container').contains(/COMPONENTS/i).should('exist').as('components')
+        cy.get('@components').parent().siblings('.attribute-content').should('have.length', neuronInfo.components.length)
+      }
+      if ('destinations' in neuronInfo) {
+        cy.get('.attribute-title-container').contains(/DESTINATION/i).should('exist').as('destinations')
+        cy.get('@destinations').parent().siblings('.attribute-content').should('have.length', neuronInfo.destinations.length)
+      }
+    })
+
+    // Click event in Provenance card should behave correctly
+    cy.get('@wrapper').then(({ wrapper, component }) => {
+      // Click on tabs
+      cy.get('@Search').click() // Click on Search
+      cy.get('@Connectivity').click() // Click on Connectivity
+      cy.get('@CloseConnectivity').click() // Click on Close sign
+
+      // Click on buttons
+      cy.window().then((window) => {
+        cy.stub(window, 'open').as('Open')
+      })
+      cy.get('#open-pubmed-button').should('exist').click()
+      cy.get('@neuronInfo').then((neuronInfo) => {
+        cy.get('@Open').should('have.been.calledOnceWithExactly', Cypress.sinon.match(neuronInfo.hyperlinks[0].url), '_blank')
+      })
+      
+      cy.get('#open-dendrites-button').should('exist').click()
+      cy.get('.el-button').contains('Explore destination data').should('exist').click()
+      cy.get('.el-button').contains('Search for data on components').should('exist').click()
+
+      cy.then(() => {
+        // The emit order will follow the clicked order
+        expect(wrapper.emitted()['tabClicked'][0]).to.deep.equal([1]) // Switch to Search
+        expect(wrapper.emitted()['tabClicked'][1]).to.deep.equal([2]) // Switch to Connectivity
+        expect(wrapper.emitted()['connectivity-info-close']).to.exist // Close Connectivity
+
+        cy.get('@neuronInfo').then((neuronInfo) => {
+          const getName = (entries) => entries.map((entry) => entry.name)
+          expect(wrapper.emitted()['actionClick'][0][0]['labels']).to.deep.equal(getName(neuronInfo.originsWithDatasets))
+          expect(wrapper.emitted()['actionClick'][1][0]['labels']).to.deep.equal(getName(neuronInfo.destinationsWithDatasets))
+          expect(wrapper.emitted()['actionClick'][2][0]['labels']).to.deep.equal(getName(neuronInfo.componentsWithDatasets))
+        })
+      })
+    })
+  })
+})
diff --git a/cypress/fixtures/neuronInfo.json b/cypress/fixtures/neuronInfo.json
new file mode 100644
index 00000000..bb021b2b
--- /dev/null
+++ b/cypress/fixtures/neuronInfo.json
@@ -0,0 +1,162 @@
+{
+    "destinations": [
+        "endocardium, heart left ventricle",
+        "endocardium, heart right ventricle",
+        "lamina I of gray matter of spinal cord, C7 segment of cervical spinal cord",
+        "epicardium, heart",
+        "myocardium, heart left ventricle",
+        "myocardium, heart right ventricle"
+    ],
+    "origins": [
+        "first thoracic dorsal root ganglion",
+        "fourth thoracic spinal ganglion",
+        "sixth thoracic dorsal root ganglion",
+        "second thoracic dorsal root ganglion",
+        "seventh cervical dorsal root ganglion",
+        "eighth cervical dorsal root ganglion",
+        "fifth thoracic dorsal root ganglion",
+        "sixth cervical dorsal root ganglion",
+        "third thoracic dorsal root ganglion"
+    ],
+    "components": [
+        "first thoracic spinal cord segment",
+        "C8 segment of cervical spinal cord",
+        "C7 segment of cervical spinal cord",
+        "second thoracic spinal cord segment",
+        "third thoracic spinal cord segment",
+        "fourth thoracic spinal cord segment",
+        "fifth thoracic spinal cord segment",
+        "C6 segment of cervical spinal cord",
+        "sixth thoracic spinal cord segment"
+    ],
+    "destinationsWithDatasets": [
+        {
+            "id": "UBERON:0000948",
+            "name": "heart"
+        },
+        {
+            "id": "UBERON:0002080",
+            "name": "heart right ventricle"
+        },
+        {
+            "id": "UBERON:0002084",
+            "name": "heart left ventricle"
+        },
+        {
+            "id": "UBERON:0002165",
+            "name": "endocardium"
+        },
+        {
+            "id": "UBERON:0002348",
+            "name": "epicardium"
+        },
+        {
+            "id": "UBERON:0002349",
+            "name": "myocardium"
+        },
+        {
+            "id": "UBERON:0006118",
+            "name": "lamina I of gray matter of spinal cord"
+        },
+        {
+            "id": "UBERON:0006493",
+            "name": "C7 segment of cervical spinal cord"
+        }
+    ],
+    "originsWithDatasets": [
+        {
+            "id": "UBERON:0002843",
+            "name": "seventh cervical dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002844",
+            "name": "eighth cervical dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002845",
+            "name": "first thoracic dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002846",
+            "name": "second thoracic dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002847",
+            "name": "third thoracic dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002848",
+            "name": "fifth thoracic dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0002849",
+            "name": "sixth thoracic dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0007711",
+            "name": "sixth cervical dorsal root ganglion"
+        },
+        {
+            "id": "UBERON:0007712",
+            "name": "fourth thoracic spinal ganglion"
+        }
+    ],
+    "componentsWithDatasets": [
+        {
+            "id": "UBERON:0006452",
+            "name": "fourth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006453",
+            "name": "fifth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006454",
+            "name": "sixth thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006457",
+            "name": "first thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006458",
+            "name": "second thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006459",
+            "name": "third thoracic spinal cord segment"
+        },
+        {
+            "id": "UBERON:0006470",
+            "name": "C8 segment of cervical spinal cord"
+        },
+        {
+            "id": "UBERON:0006492",
+            "name": "C6 segment of cervical spinal cord"
+        },
+        {
+            "id": "UBERON:0006493",
+            "name": "C7 segment of cervical spinal cord"
+        }
+    ],
+    "title": "neuron type aacar 13",
+    "featureId": [
+        "ilxtr:neuron-type-aacar-13"
+    ],
+    "hyperlinks": [
+        {
+            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fwww.ncbi.nlm.nih.gov%2Fpubmed%2F27783854",
+            "id": "pubmed"
+        }
+    ],
+    "provenanceTaxonomy": [
+        "NCBITaxon:9606",
+        "NCBITaxon:9615",
+        "NCBITaxon:9825"
+    ],
+    "provenanceTaxonomyLabel": [
+        "Homo sapiens",
+        "Canis lupus familiaris",
+        "Domestic Pig"
+    ]
+}
\ No newline at end of file

From 9c964827827f2aebbe8fbe4fdbf09e5f6de08b99 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:35:13 +1200
Subject: [PATCH 27/28] Update testing based on latest changes

---
 cypress/component/SideBar.cy.js  |  24 ++---
 cypress/fixtures/neuronInfo.json | 147 +++++--------------------------
 src/components/SideBar.vue       |   2 +-
 3 files changed, 35 insertions(+), 138 deletions(-)

diff --git a/cypress/component/SideBar.cy.js b/cypress/component/SideBar.cy.js
index ae955452..9a5e71cd 100644
--- a/cypress/component/SideBar.cy.js
+++ b/cypress/component/SideBar.cy.js
@@ -103,7 +103,7 @@ describe("<SideBar />", () => {
           },
           connectivityInfo: neuronInfo,
           openAtStart: true,
-          activeId: 2,
+          activeTabId: 2,
         },
       })
     }).as('wrapper')
@@ -133,9 +133,15 @@ describe("<SideBar />", () => {
     // Click event in Provenance card should behave correctly
     cy.get('@wrapper').then(({ wrapper, component }) => {
       // Click on tabs
-      cy.get('@Search').click() // Click on Search
-      cy.get('@Connectivity').click() // Click on Connectivity
-      cy.get('@CloseConnectivity').click() // Click on Close sign
+      cy.get('@Search').click().then(() => {
+        expect(wrapper.emitted()['tabClicked'][0]).to.deep.equal([{ id: 1, type: 'search' }]) // Switch to Search
+      })
+      cy.get('@Connectivity').click().then(() => {
+        expect(wrapper.emitted()['tabClicked'][1]).to.deep.equal([{ id: 2, type: 'connectivity' }]) // Switch to Connectivity
+      })
+      cy.get('@CloseConnectivity').click().then(() => {
+        expect(wrapper.emitted()['connectivity-info-close']).to.exist // Close Connectivity
+      })
 
       // Click on buttons
       cy.window().then((window) => {
@@ -145,19 +151,17 @@ describe("<SideBar />", () => {
       cy.get('@neuronInfo').then((neuronInfo) => {
         cy.get('@Open').should('have.been.calledOnceWithExactly', Cypress.sinon.match(neuronInfo.hyperlinks[0].url), '_blank')
       })
-      
+
+      cy.get('.connectivity-info-title > :nth-child(2) > .el-button').click()
       cy.get('#open-dendrites-button').should('exist').click()
       cy.get('.el-button').contains('Explore destination data').should('exist').click()
       cy.get('.el-button').contains('Search for data on components').should('exist').click()
 
       cy.then(() => {
         // The emit order will follow the clicked order
-        expect(wrapper.emitted()['tabClicked'][0]).to.deep.equal([1]) // Switch to Search
-        expect(wrapper.emitted()['tabClicked'][1]).to.deep.equal([2]) // Switch to Connectivity
-        expect(wrapper.emitted()['connectivity-info-close']).to.exist // Close Connectivity
-
         cy.get('@neuronInfo').then((neuronInfo) => {
-          const getName = (entries) => entries.map((entry) => entry.name)
+          expect(wrapper.emitted()['show-connectivity'][0][0]).to.deep.equal(neuronInfo.featureId)
+          const getName = (entries) => entries.map((entry) => entry.name.toLowerCase())
           expect(wrapper.emitted()['actionClick'][0][0]['labels']).to.deep.equal(getName(neuronInfo.originsWithDatasets))
           expect(wrapper.emitted()['actionClick'][1][0]['labels']).to.deep.equal(getName(neuronInfo.destinationsWithDatasets))
           expect(wrapper.emitted()['actionClick'][2][0]['labels']).to.deep.equal(getName(neuronInfo.componentsWithDatasets))
diff --git a/cypress/fixtures/neuronInfo.json b/cypress/fixtures/neuronInfo.json
index bb021b2b..bb29b2ec 100644
--- a/cypress/fixtures/neuronInfo.json
+++ b/cypress/fixtures/neuronInfo.json
@@ -1,162 +1,55 @@
 {
     "destinations": [
-        "endocardium, heart left ventricle",
-        "endocardium, heart right ventricle",
-        "lamina I of gray matter of spinal cord, C7 segment of cervical spinal cord",
-        "epicardium, heart",
-        "myocardium, heart left ventricle",
-        "myocardium, heart right ventricle"
+        "uterus",
+        "uterine cervix",
+        "nucleus of solitary tract"
     ],
     "origins": [
-        "first thoracic dorsal root ganglion",
-        "fourth thoracic spinal ganglion",
-        "sixth thoracic dorsal root ganglion",
-        "second thoracic dorsal root ganglion",
-        "seventh cervical dorsal root ganglion",
-        "eighth cervical dorsal root ganglion",
-        "fifth thoracic dorsal root ganglion",
-        "sixth cervical dorsal root ganglion",
-        "third thoracic dorsal root ganglion"
+        "inferior vagus X ganglion"
     ],
     "components": [
-        "first thoracic spinal cord segment",
-        "C8 segment of cervical spinal cord",
-        "C7 segment of cervical spinal cord",
-        "second thoracic spinal cord segment",
-        "third thoracic spinal cord segment",
-        "fourth thoracic spinal cord segment",
-        "fifth thoracic spinal cord segment",
-        "C6 segment of cervical spinal cord",
-        "sixth thoracic spinal cord segment"
+        "vagus nerve"
     ],
     "destinationsWithDatasets": [
         {
-            "id": "UBERON:0000948",
-            "name": "heart"
+            "id": "UBERON:0000002",
+            "name": "uterine cervix"
         },
         {
-            "id": "UBERON:0002080",
-            "name": "heart right ventricle"
+            "id": "UBERON:0000995",
+            "name": "uterus"
         },
         {
-            "id": "UBERON:0002084",
-            "name": "heart left ventricle"
-        },
-        {
-            "id": "UBERON:0002165",
-            "name": "endocardium"
-        },
-        {
-            "id": "UBERON:0002348",
-            "name": "epicardium"
-        },
-        {
-            "id": "UBERON:0002349",
-            "name": "myocardium"
-        },
-        {
-            "id": "UBERON:0006118",
-            "name": "lamina I of gray matter of spinal cord"
-        },
-        {
-            "id": "UBERON:0006493",
-            "name": "C7 segment of cervical spinal cord"
+            "id": "UBERON:0009050",
+            "name": "nucleus of solitary tract"
         }
     ],
     "originsWithDatasets": [
         {
-            "id": "UBERON:0002843",
-            "name": "seventh cervical dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002844",
-            "name": "eighth cervical dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002845",
-            "name": "first thoracic dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002846",
-            "name": "second thoracic dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002847",
-            "name": "third thoracic dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002848",
-            "name": "fifth thoracic dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0002849",
-            "name": "sixth thoracic dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0007711",
-            "name": "sixth cervical dorsal root ganglion"
-        },
-        {
-            "id": "UBERON:0007712",
-            "name": "fourth thoracic spinal ganglion"
+            "id": "UBERON:0005363",
+            "name": "inferior vagus X ganglion"
         }
     ],
     "componentsWithDatasets": [
         {
-            "id": "UBERON:0006452",
-            "name": "fourth thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006453",
-            "name": "fifth thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006454",
-            "name": "sixth thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006457",
-            "name": "first thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006458",
-            "name": "second thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006459",
-            "name": "third thoracic spinal cord segment"
-        },
-        {
-            "id": "UBERON:0006470",
-            "name": "C8 segment of cervical spinal cord"
-        },
-        {
-            "id": "UBERON:0006492",
-            "name": "C6 segment of cervical spinal cord"
-        },
-        {
-            "id": "UBERON:0006493",
-            "name": "C7 segment of cervical spinal cord"
+            "id": "UBERON:0001759",
+            "name": "vagus nerve"
         }
     ],
-    "title": "neuron type aacar 13",
+    "title": "nodose ganglion with axon sensory terminal in uterus or uterine cervix via abdominal vagal nerve with axon terminal in nucleus of the tractus solitarius via vagus nerve",
     "featureId": [
-        "ilxtr:neuron-type-aacar-13"
+        "ilxtr:sparc-nlp/femrep/64"
     ],
     "hyperlinks": [
         {
-            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fwww.ncbi.nlm.nih.gov%2Fpubmed%2F27783854",
+            "url": "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fdoi.org%2F10.1016%2F0196-9781%2885%2990306-7%2C%2F%2Fdx.doi.org%2F10.1007%2Fs004410051211%2C%2F%2Fdoi.org%2F10.1016%2F0361-9230%2890%2990221-K%2C%2F%2Fdoi.org%2F10.1016%2Fj.autneu.2014.11.009%2C%2F%2Fdoi.org%2F10.1016%2F0006-8993%2895%2901312-1",
             "id": "pubmed"
         }
     ],
     "provenanceTaxonomy": [
-        "NCBITaxon:9606",
-        "NCBITaxon:9615",
-        "NCBITaxon:9825"
+        "NCBITaxon:10116"
     ],
     "provenanceTaxonomyLabel": [
-        "Homo sapiens",
-        "Canis lupus familiaris",
-        "Domestic Pig"
+        "Rattus norvegicus"
     ]
 }
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 4504ad17..ed69cd05 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -136,7 +136,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
-
+      availableAnatomyFacets: []
     }
   },
   methods: {

From 859e578f498fde3e6e6c956f97738b078111380a Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:06:46 +1200
Subject: [PATCH 28/28] Requires more dev dependencies

---
 .gitignore           |   4 +
 package-lock.json    | 428 ++++++++++++++++++++++++++++++++++++++++++-
 package.json         |   4 +-
 reporter-config.json |  10 +
 4 files changed, 442 insertions(+), 4 deletions(-)
 create mode 100644 reporter-config.json

diff --git a/.gitignore b/.gitignore
index 470f936c..088af65d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,10 @@
 .DS_Store
 dist
 node_modules
+cypress/videos/*
+cypress/screenshots/*
+cypress/results/*
+cypress/reports/*
 .env.local
 docs/.vitepress/dist
 docs/.vitepress/cache
diff --git a/package-lock.json b/package-lock.json
index 78cd67eb..3b08827c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,9 +29,12 @@
         "chokidar": "^3.6.0",
         "concurrently": "^8.2.2",
         "cypress": "^13.13.0",
+        "cypress-multi-reporters": "^1.6.4",
+        "cypress-wait-until": "^3.0.1",
         "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.19.2",
         "file-loader": "^5.0.2",
+        "mochawesome": "^7.1.3",
         "raw-loader": "^0.5.1",
         "sass": "^1.70.0",
         "transform-loader": "^0.2.4",
@@ -2533,6 +2536,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/browserslist": {
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
@@ -2642,6 +2652,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001605",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
@@ -3018,6 +3041,28 @@
         "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/cypress-multi-reporters": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/cypress-multi-reporters/-/cypress-multi-reporters-1.6.4.tgz",
+      "integrity": "sha512-3xU2t6pZjZy/ORHaCvci5OT1DAboS4UuMMM8NBAizeb2C9qmHt+cgAjXgurazkwkPRdO7ccK39M5ZaPCju0r6A==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "mocha": ">=3.1.2"
+      }
+    },
+    "node_modules/cypress-wait-until": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-wait-until/-/cypress-wait-until-3.0.1.tgz",
+      "integrity": "sha512-kpoa8yL6Bi/JNsThGBbrrm7g4SNzYyBUv9M5pF6/NTVm/ClY0HnJzeuWnHiAUZKIZ5l86Oedb12wQyjx7/CWPg==",
+      "dev": true
+    },
     "node_modules/cypress/node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -3076,6 +3121,15 @@
         "url": "https://opencollective.com/date-fns"
       }
     },
+    "node_modules/dateformat": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
+      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -3088,9 +3142,9 @@
       "dev": true
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3103,6 +3157,19 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3134,6 +3201,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/diff": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -3740,6 +3816,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -3857,6 +3943,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fsu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fsu/-/fsu-1.1.1.tgz",
+      "integrity": "sha512-xQVsnjJ/5pQtcKh+KjUoZGzVWn4uNkchxTF6Lwjr4Gf7nQr8fmUfhKJ62zE77+xQg9xnxi5KUps7XGs+VC986A==",
+      "dev": true
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4323,6 +4415,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -4636,6 +4738,30 @@
         "lodash-es": "*"
       }
     },
+    "node_modules/lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
+      "dev": true
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "node_modules/lodash.isobject": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+      "integrity": "sha512-3/Qptq2vr7WeJbB4KHUSKlq8Pl7ASXi3UG6CMbBm8WRtXi8+GHm7mKaU3urfpSEzWe2wCIChs6/sdocUsTKJiA==",
+      "dev": true
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4713,6 +4839,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4844,6 +4982,208 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "node_modules/mocha": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.6.0.tgz",
+      "integrity": "sha512-hxjt4+EEB0SA0ZDygSS015t65lJw/I2yRCS3Ae+SJ5FrbzrXgfYwJr96f0OvIXdj7h4lv/vLCrH3rkiuizFSvw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.3",
+        "browser-stdout": "^1.3.1",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.5",
+        "diff": "^5.2.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-up": "^5.0.0",
+        "glob": "^8.1.0",
+        "he": "^1.2.0",
+        "js-yaml": "^4.1.0",
+        "log-symbols": "^4.1.0",
+        "minimatch": "^5.1.6",
+        "ms": "^2.1.3",
+        "serialize-javascript": "^6.0.2",
+        "strip-json-comments": "^3.1.1",
+        "supports-color": "^8.1.1",
+        "workerpool": "^6.5.1",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.9",
+        "yargs-unparser": "^2.0.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha.js"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mocha/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/mocha/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mochawesome": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/mochawesome/-/mochawesome-7.1.3.tgz",
+      "integrity": "sha512-Vkb3jR5GZ1cXohMQQ73H3cZz7RoxGjjUo0G5hu0jLaW+0FdUxUwg3Cj29bqQdh0rFcnyV06pWmqmi5eBPnEuNQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "diff": "^5.0.0",
+        "json-stringify-safe": "^5.0.1",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isobject": "^3.0.2",
+        "lodash.isstring": "^4.0.1",
+        "mochawesome-report-generator": "^6.2.0",
+        "strip-ansi": "^6.0.1",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "mocha": ">=7"
+      }
+    },
+    "node_modules/mochawesome-report-generator": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/mochawesome-report-generator/-/mochawesome-report-generator-6.2.0.tgz",
+      "integrity": "sha512-Ghw8JhQFizF0Vjbtp9B0i//+BOkV5OWcQCPpbO0NGOoxV33o+gKDYU0Pr2pGxkIHnqZ+g5mYiXF7GMNgAcDpSg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "dateformat": "^4.5.1",
+        "escape-html": "^1.0.3",
+        "fs-extra": "^10.0.0",
+        "fsu": "^1.1.1",
+        "lodash.isfunction": "^3.0.9",
+        "opener": "^1.5.2",
+        "prop-types": "^15.7.2",
+        "tcomb": "^3.2.17",
+        "tcomb-validation": "^3.3.0",
+        "validator": "^13.6.0",
+        "yargs": "^17.2.1"
+      },
+      "bin": {
+        "marge": "bin/cli.js"
+      }
+    },
+    "node_modules/mochawesome-report-generator/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4950,6 +5290,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -4986,6 +5335,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -5239,6 +5597,17 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5325,6 +5694,12 @@
       "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==",
       "dev": true
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5840,6 +6215,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/tcomb": {
+      "version": "3.2.29",
+      "resolved": "https://registry.npmjs.org/tcomb/-/tcomb-3.2.29.tgz",
+      "integrity": "sha512-di2Hd1DB2Zfw6StGv861JoAF5h/uQVu/QJp2g8KVbtfKnoHdBQl5M32YWq6mnSYBQ1vFFrns5B1haWJL7rKaOQ==",
+      "dev": true
+    },
+    "node_modules/tcomb-validation": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tcomb-validation/-/tcomb-validation-3.4.1.tgz",
+      "integrity": "sha512-urVVMQOma4RXwiVCa2nM2eqrAomHROHvWPuj6UkDGz/eb5kcy0x6P0dVt6kzpUZtYMNoAqJLWmz1BPtxrtjtrA==",
+      "dev": true,
+      "dependencies": {
+        "tcomb": "^3.0.0"
+      }
+    },
     "node_modules/terser": {
       "version": "5.30.2",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.2.tgz",
@@ -6252,6 +6642,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -6691,6 +7090,13 @@
       "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
       "dev": true
     },
+    "node_modules/workerpool": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz",
+      "integrity": "sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -6785,6 +7191,22 @@
         "node": ">=12"
       }
     },
+    "node_modules/yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index b40ec52b..ce988ce9 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "preview": "vite preview",
     "test": "cypress run --component",
     "cypress:open": "cypress open",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
     "release:minor": "npm version minor; npm publish",
     "release:patch": "npm version patch;  npm publish",
@@ -60,8 +59,11 @@
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
     "cypress": "^13.13.0",
+    "cypress-multi-reporters": "^1.6.4",
+    "cypress-wait-until": "^3.0.1",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
+    "mochawesome": "^7.1.3",
     "file-loader": "^5.0.2",
     "raw-loader": "^0.5.1",
     "sass": "^1.70.0",
diff --git a/reporter-config.json b/reporter-config.json
new file mode 100644
index 00000000..a3b713a3
--- /dev/null
+++ b/reporter-config.json
@@ -0,0 +1,10 @@
+{
+  "reporterEnabled": "mochawesome",
+  "mochawesomeReporterOptions": {
+    "reportDir": "cypress/reports/mocha",
+    "quiet": true,
+    "overwrite": false,
+    "html": true,
+    "json": true
+  }
+}
\ No newline at end of file