@abi-software/map-side-bar 2.7.2-beta.2 → 2.7.2-beta.4

package/src/components/SearchFilters.vue

@@ -213,60 +213,7 @@ export default {
         )
       return value
     },
-    processOptions: function () {
-      // create top level of options in cascader
-      this.options.forEach((facet, i) => {
-        this.options[i].total = this.countTotalFacet(facet)
-
-        this.options[i].label = convertReadableLabel(facet.label)
-        this.options[i].value = this.createCascaderItemValue(
-          facet.key,
-          undefined
-        )
-
-        // put "Show all" as first option
-        this.options[i].children.unshift({
-          value: this.createCascaderItemValue('Show all'),
-          label: 'Show all',
-        })
-
-        // populate second level of options
-        this.options[i].children.forEach((facetItem, j) => {
-          // Format labels except funding program
-          if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
-            this.options[i].children[j].label = convertReadableLabel(
-              facetItem.label
-            )
-          }
-          this.options[i].children[j].value =
-            this.createCascaderItemValue(facet.label, facetItem.label)
-          if (
-            this.options[i].children[j].children &&
-            this.options[i].children[j].children.length > 0
-          ) {
-            this.options[i].children[j].children.forEach((term, k) => {
-              this.options[i].children[j].children[k].label =
-                convertReadableLabel(term.label)
-              this.options[i].children[j].children[k].value =
-                this.createCascaderItemValue(
-                  facet.label,
-                  facetItem.label,
-                  term.label
-                )
-            })
-          }
-        })
-      })
-    },
     populateCascader: function () {
-      if (this.entry.options) {
-        return new Promise((resolve) => {
-          this.facets = this.entry.options
-          this.options = this.entry.options
-          this.processOptions()
-          resolve();
-        });
-      }
       return new Promise((resolve) => {
         // Algolia facet serach
         this.algoliaClient
@@ -275,7 +222,50 @@ export default {
             this.facets = data
             EventBus.emit('available-facets', data)
             this.options = data
-            this.processOptions()
+
+            // create top level of options in cascader
+            this.options.forEach((facet, i) => {
+              this.options[i].total = this.countTotalFacet(facet)
+
+              this.options[i].label = convertReadableLabel(facet.label)
+              this.options[i].value = this.createCascaderItemValue(
+                facet.key,
+                undefined
+              )
+
+              // put "Show all" as first option
+              this.options[i].children.unshift({
+                value: this.createCascaderItemValue('Show all'),
+                label: 'Show all',
+              })
+
+              // populate second level of options
+              this.options[i].children.forEach((facetItem, j) => {
+                // Format labels except funding program
+                if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
+                  this.options[i].children[j].label = convertReadableLabel(
+                    facetItem.label
+                  )
+                }
+                this.options[i].children[j].value =
+                  this.createCascaderItemValue(facet.label, facetItem.label)
+                if (
+                  this.options[i].children[j].children &&
+                  this.options[i].children[j].children.length > 0
+                ) {
+                  this.options[i].children[j].children.forEach((term, k) => {
+                    this.options[i].children[j].children[k].label =
+                      convertReadableLabel(term.label)
+                    this.options[i].children[j].children[k].value =
+                      this.createCascaderItemValue(
+                        facet.label,
+                        facetItem.label,
+                        term.label
+                      )
+                  })
+                }
+              })
+            })
           })
           .finally(() => {
             resolve()
@@ -745,18 +735,13 @@ export default {
     removeTopLevelCascaderCheckboxes: function () {
       // Next tick allows the cascader menu to change
       this.$nextTick(() => {
-        const cascadePanels = document.querySelectorAll('.sidebar-cascader-popper .el-cascader-menu__list');
-
-        cascadePanels.forEach(panel => {
-          const panelText = panel.textContent;
-          const expandArrow = panel.querySelector('.el-icon.arrow-right');
-
-          if (!panelText.includes('Show all') && expandArrow) {
-            panel.querySelectorAll('.el-checkbox__input').forEach(checkbox => {
-              checkbox.style.display = 'none';
-            });
-          }
-        });
+        let cascadePanels = document.querySelectorAll(
+          '.sidebar-cascader-popper .el-cascader-menu__list'
+        )
+        // Hide the checkboxes on the first level of the cascader
+        cascadePanels[0]
+          .querySelectorAll('.el-checkbox__input')
+          .forEach((el) => (el.style.display = 'none'))
       })
     },
     /*

package/src/components/SearchHistory.vue

@@ -436,6 +436,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 6px;
+  transform: translateZ(0);
 }
 
 .search-tag.el-tag {

package/src/components/SideBar.vue

@@ -22,15 +22,29 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabEntries.length > 1"
-            :tabEntries="tabEntries"
+            v-if="activeTabs.length > 1"
+            :tabTitles="activeTabs"
             :activeId="activeTabId"
-            @tabClicked="tabClicked"
-            @tabClosed="tabClosed"
+            @titleClicked="tabClicked"
+            @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
-            <template v-if="tab.type === 'annotation'">
-              <AnnotationTool
+            <!-- Connectivity Info -->
+            <template v-if="tab.type === 'connectivity' && connectivityInfo">
+              <connectivity-info
+                :entry="connectivityInfo"
+                :availableAnatomyFacets="availableAnatomyFacets"
+                v-if="tab.id === activeTabId"
+                :envVars="envVars"
+                :ref="'connectivityTab_' + tab.id"
+                :useDOIFormatter="useDOIFormatter"
+                @show-connectivity="showConnectivity"
+                @show-reference-connectivities="onShowReferenceConnectivities"
+                @connectivity-component-click="onConnectivityComponentClick"
+              />
+            </template>
+            <template v-else-if="tab.type === 'annotation'">
+              <annotation-tool
                 :ref="'annotationTab_' + tab.id"
                 v-show="tab.id === activeTabId"
                 :annotationEntry="annotationEntry"
@@ -41,23 +55,6 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
-            <template v-else-if="tab.type === 'connectivityExplorer'">
-              <ConnectivityExplorer
-                :ref="'connectivityExplorerTab_' + tab.id"
-                v-show="tab.id === activeTabId"
-                :connectivityKnowledge="connectivityKnowledge"
-                :envVars="envVars"
-                :connectivityEntry="connectivityEntry"
-                :availableAnatomyFacets="availableAnatomyFacets"
-                @search-changed="searchChanged(tab.id, $event)"
-                @hover-changed="hoverChanged($event)"
-                @show-connectivity="showConnectivity"
-                @show-reference-connectivities="onShowReferenceConnectivities"
-                @connectivity-clicked="onConnectivityClicked"
-                @connectivity-hovered="onConnectivityHovered"
-                @connectivity-explorer-clicked="onConnectivityExplorerClicked"
-              />
-            </template>
             <template v-else>
               <SidebarContent
                 class="sidebar-content-container"
@@ -87,7 +84,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
-import ConnectivityExplorer from './ConnectivityExplorer.vue'
+import ConnectivityInfo from './ConnectivityInfo.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -100,8 +97,8 @@ export default {
     ElIconArrowRight,
     Drawer,
     Icon,
+    ConnectivityInfo,
     AnnotationTool,
-    ConnectivityExplorer,
   },
   name: 'SideBar',
   props: {
@@ -122,6 +119,24 @@ export default {
       type: Object,
       default: () => {},
     },
+    /**
+     * The array of objects to show multiple sidebar contents.
+     */
+    tabs: {
+      type: Array,
+      default: () => [
+        { id: 1, title: 'Search', type: 'search' },
+        { id: 2, title: 'Connectivity', type: 'connectivity' },
+        { id: 3, title: 'Annotation', type: 'annotation' }
+      ],
+    },
+    /**
+     * The active tab id for default tab.
+     */
+    activeTabId: {
+      type: Number,
+      default: 1,
+    },
     /**
      * The option to show or hide sidebar on page load.
      */
@@ -132,16 +147,16 @@ export default {
     /**
      * The connectivity info data to show in sidebar.
      */
-    connectivityEntry: {
+    connectivityInfo: {
       type: Object,
-      default: {},
+      default: null,
     },
     /**
      * The annotation data to show in sidebar.
      */
     annotationEntry: {
       type: Object,
-      default: {},
+      default: null,
     },
     createData: {
       type: Object,
@@ -153,27 +168,23 @@ export default {
         y: 0,
       },
     },
-    connectivityKnowledge: {
-      type: Array,
-      default: [],
+    /**
+     * The option to use DOI.org as citation formatter.
+     * If set to `false`, citation.js will be used.
+     * Default is `true`.
+     */
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
     },
   },
   data: function () {
     return {
       drawerOpen: false,
-      availableAnatomyFacets: [],
-      activeTabId: 1,
-      tabs: [
-        { title: 'Search', id: 1, type: 'search', closable: false },
-        { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
-        { title: 'Annotation', id: 3, type: 'annotation', closable: true },
-      ]
+      availableAnatomyFacets: []
     }
   },
   methods: {
-    onConnectivityExplorerClicked: function (data) {
-      this.$emit('connectivity-explorer-clicked', data)
-    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
@@ -196,18 +207,11 @@ export default {
       this.$emit('show-reference-connectivities', refSource);
     },
     /**
-     * This function is triggered after connectivity term is clicked.
-     * @arg data
-     */
-    onConnectivityClicked: function (data) {
-      this.$emit('connectivity-clicked', data);
-    },
-    /**
-     * This function is triggered after connectivity term is hovered.
+     * This function is triggered after a connectivity component is clicked.
      * @arg data
      */
-    onConnectivityHovered: function (data) {
-      this.$emit('connectivity-hovered', data);
+    onConnectivityComponentClick: function (data) {
+      this.$emit('connectivity-component-click', data);
     },
     /**
      * This event is emitted when the search filters are changed.
@@ -230,31 +234,43 @@ export default {
     toggleDrawer: function () {
       this.drawerOpen = !this.drawerOpen
     },
-    openConnectivitySearch: function (facets, query) {
-      this.drawerOpen = true;
-      // Because refs are in v-for, nextTick is needed here
-      this.$nextTick(() => {
-        const connectivityExplorerTabRef = this.getTabRef(2, 'connectivityExplorer', true);
-        connectivityExplorerTabRef.openSearch(facets, query);
-      })
-    },
     openSearch: function (facets, query) {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getTabRef(1, 'search', true);
+        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.activeTabs.find((tab) => tab.id === tabId && tab.type === tabType);
+      const firstAvailableTab = this.activeTabs[0];
+      return tabObj || firstAvailableTab;
+    },
     /**
      * Get the ref id of the tab by id and type.
      */
-    getTabRef: function (id = 1, type = 'search', open = false) {
-      const matchedTab = this.tabEntries.filter((tab) => tab.id === id && tab.type === type);
-      const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
-      const tabRef = type + 'Tab_' + tabInfo[0].id;
-      if (open) this.tabClicked({ id, type });
-      return this.$refs[tabRef][0];
+    getTabRefId: function (id, type) {
+      let refIdPrefix = 'searchTab_'; // default to search tab
+      if (type === 'connectivity') {
+        refIdPrefix = 'connectivityTab_';
+      } else if (type === 'annotation') {
+        refIdPrefix = 'annotationTab_';
+      }
+      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];
     },
     /**
      * The function to add filters to sidebar search.
@@ -268,7 +284,7 @@ export default {
 
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getTabRef(1, 'search', true);
+        const searchTabRef = this.getSearchTabRefById(1);
         searchTabRef.addFilter(filter)
       })
     },
@@ -276,7 +292,7 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getTabRef(1, 'search', true);
+        const searchTabRef = this.getSearchTabRefById(1);
         searchTabRef.openSearch(
           '',
           undefined,
@@ -286,17 +302,27 @@ export default {
       })
     },
     getAlgoliaFacets: async function () {
-      const searchTabRef = this.getTabRef(1, 'search');
+      const searchTabRef = this.getSearchTabRefById(1);
       return await searchTabRef.getAlgoliaFacets()
     },
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
-    tabClicked: function (tab) {
-      this.activeTabId = tab.id
+    /**
+     * The function to emit 'tabClicked' event with tab's `id` and tab's `type`
+     * when user clicks the sidebar tab.
+     * @param {Object} {id, type}
+     * @public
+     */
+    tabClicked: function ({id, type}) {
+      /**
+       * This event is emitted when user click sidebar's tab.
+       * @arg {Object} {id, type}
+       */
+      this.$emit('tabClicked', {id, type});
     },
-    tabClosed: function (tab) {
-      this.$emit('tabClosed', tab);
+    tabClose: function (id) {
+      this.$emit('tab-close', id);
     },
     /**
      * To receive error message for connectivity graph
@@ -308,12 +334,22 @@ export default {
   },
   computed: {
     // This should respect the information provided by the property
-    tabEntries: function () {
-      return this.tabs.filter((tab) =>
-        tab.type === "search" ||
-        tab.type === "connectivityExplorer" ||
-        (tab.type === "annotation" && this.annotationEntry && Object.keys(this.annotationEntry).length > 0)
-      );
+    activeTabs: function() {
+      const tabs = []
+      this.tabs.forEach((tab) => {
+        if (tab.type === "search") {
+          tabs.push(tab)
+        } else if (tab.type === "connectivity") {
+          if (this.connectivityInfo) {
+            tabs.push(tab);
+          }
+        } else if (tab.type === "annotation") {
+          if (this.annotationEntry && Object.keys(this.annotationEntry).length > 0) {
+            tabs.push(tab);
+          }
+        }
+      })
+      return tabs;
     },
   },
   created: function () {
@@ -369,6 +405,7 @@ export default {
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
     })
+
   },
 }
 </script>

package/src/components/SidebarContent.vue

@@ -164,8 +164,7 @@ export default {
   },
   methods: {
     hoverChanged: function (data) {
-      const payload = data ? { ...data, type: 'dataset' } : data
-      this.$emit('hover-changed', payload)
+      this.$emit('hover-changed', data)
     },
     resetSearch: function () {
       this.numberOfHits = 0

package/src/components/Tabs.vue

@@ -1,35 +1,40 @@
 <template>
-  <div class="tabs-container">
+  <div class="tab-container">
     <div
-      class="tab"
-      v-for="tab in tabs"
-      :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId }"
-      @click="tabClicked(tab)"
+      class="title"
+      v-for="title in tabTitles"
+      :key="title.id"
+      :class="{ 'active-tab': title.id == activeId }"
     >
-      <span class="tab-title">{{ tab.title }} </span>
-      <el-icon
-        v-if="tab.closable"
-        @click.stop="tabClosed(tab)"
-        class="tab-close-icon"
+      <div
+        class="title-text-table"
+        v-bind:class="{ highlightText: title.id == activeId }"
+        v-on:click="titleClicked(title.id, title.type)"
       >
-        <el-icon-close />
-      </el-icon>
+        <div class="title-text">
+          {{ title.title }}
+        </div>
+      </div>
+      <el-button
+        v-if="title.id > 1"
+        @click="tabClose(title.id)"
+        class="button-tab-close"
+        aria-label="Close"
+      >
+        &times;
+        <span class="visually-hidden">Close</span>
+      </el-button>
     </div>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { Close as ElIconClose } from "@element-plus/icons-vue";
 
 export default {
-  name: "Tabs",
-  components: {
-    ElIconClose,
-  },
+  name: 'Tabs',
   props: {
-    tabEntries: {
+    tabTitles: {
       type: Array,
       default: () => [],
     },
@@ -37,72 +42,106 @@ export default {
       type: Number,
       default: 1,
     },
-    contextArray: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    tabs: function () {
-      // permanent tabs always show in the front
-      const permanent = this.tabEntries.filter((t) => !t.closable);
-      const temporary = this.tabEntries.filter((t) => t.closable);
-      let entries = permanent.concat(temporary);
-      if (this.contextArray.length) {
-        for (let i in entries) {
-          entries[i].contextCard = this.contextArray[i];
-        }
-      }
-      return entries;
-    },
   },
   methods: {
-    tabClicked: function (tab) {
-      this.$emit("tabClicked", { id: tab.id, type: tab.type });
+    titleClicked: function (id, type) {
+      this.$emit('titleClicked', {id, type})
     },
-    tabClosed: function (tab) {
-      this.$emit("tabClosed", { id: tab.id, type: tab.type });
+    tabClose: function (id) {
+      this.$emit('tab-close', id);
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.tabs-container {
+$tab-height: 30px;
+
+.tab-container {
+  height: $tab-height + 2;
   display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
+  flex-direction: row;
+  position: relative;
+  z-index: 1;
 }
 
-.tab {
-  height: 30px;
+.title {
+  height: $tab-height;
   border: 1px solid var(--el-border-color);
   border-top-color: transparent;
-  border-bottom-color: transparent;
+  background-color: white;
   display: flex;
+  width: fit-content;
   align-items: center;
+  position: relative;
   cursor: pointer;
 }
 
-.tab:hover,
+.title-text {
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 14px;
+  padding: 0 1rem;
+}
+
+.title-text-table {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.parent-dialog:hover .title-text {
+  color: $app-primary-color;
+}
+
+.title:hover,
 .active-tab {
   background-color: #f9f2fc;
-  border: 1px solid #8300bf;
+  border: solid #8300bf;
+  border-width: 1px 1px .125em;
   color: #8300bf;
   font-weight: 500;
 }
 
-.tab-title {
-  text-align: center;
-  font-size: 14px;
-  padding: 0 1rem;
+.highlightText {
+  color: $app-primary-color;
 }
 
-.tab-close-icon {
+.button-tab-close {
   width: 20px !important;
   height: 20px !important;
-  font-size: 20px !important;
+  line-height: 20px !important;
+  padding: 0 !important;
   padding-right: 4px !important;
+  font-size: 24px !important;
   color: $app-primary-color !important;
+  border: 0 none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background-color: transparent !important;
+
+  :deep(> span) {
+    height: $tab-height - 2 !important; // tab height minus border
+    font-family: Arial !important; // to fix font alignment on different browsers
+  }
+
+  &:hover,
+  &:focus {
+    border: 0 none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+  }
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 </style>