@abi-software/map-side-bar 2.7.2-beta.3 → 2.7.2-beta.5

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

@@ -164,22 +164,12 @@ function generateUUID() {
   return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
 }
 
-const capitalise = function (txt) {
-  return txt.charAt(0).toUpperCase() + txt.slice(1)
-}
-
 export default {
   name: 'SearchHistory',
   components: {
     Tag,
     Select
   },
-  props: {
-    localStorageKey: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       searchHistory: [],
@@ -196,14 +186,16 @@ export default {
   },
   methods: {
     getSearchHistory() {
-      if (localStorage.getItem(this.localStorageKey)) {
-        this.searchHistory = JSON.parse(localStorage.getItem(this.localStorageKey))
+      if (localStorage.getItem('sparc.science-sidebar-search-history')) {
+        this.searchHistory = JSON.parse(
+          localStorage.getItem('sparc.science-sidebar-search-history')
+        )
       } else {
         this.searchHistory = []
       }
     },
     clearSearchHistory() {
-      localStorage.removeItem(this.localStorageKey)
+      localStorage.removeItem('sparc.science-sidebar-search-history')
       this.searchHistory = []
     },
     sortFilters(a, b) {
@@ -227,7 +219,7 @@ export default {
       }
       return filterItem;
     },
-    addSearchToHistory(filters = [], search = '', data = []) {
+    addSearchToHistory(filters = [], search = '') {
       search = search.trim() // remove whitespace
 
       const isExistingItem = this.searchHistory.some((item) => {
@@ -252,11 +244,10 @@ export default {
       });
 
       if (!isExistingItem) {
-        const {label, longLabel} = this.searchHistoryItemLabel(search, filters, data);
+        const {label, longLabel} = this.searchHistoryItemLabel(search, filters);
         const newItem = {
           filters: filters,
           search: search,
-          data: data,
           saved: false,
           label: label,
           longLabel: longLabel,
@@ -272,7 +263,10 @@ export default {
         this.trimSearchHistory();
 
         // Save new data
-        localStorage.setItem(this.localStorageKey, JSON.stringify(this.searchHistory));
+        localStorage.setItem(
+          'sparc.science-sidebar-search-history',
+          JSON.stringify(this.searchHistory)
+        );
       }
     },
     /**
@@ -331,7 +325,7 @@ export default {
         }
 
         if (!item.label) {
-          const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters, item.data);
+          const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters);
           item['label'] = label;
           item['longLabel'] = longLabel;
         }
@@ -362,33 +356,28 @@ export default {
       this.trimSearchHistory();
 
       // Save updated data
-      localStorage.setItem(this.localStorageKey, JSON.stringify(this.searchHistory))
+      localStorage.setItem(
+        'sparc.science-sidebar-search-history',
+        JSON.stringify(this.searchHistory)
+      )
     },
     search: function (item) {
       this.$emit('search', item)
     },
-    searchHistoryItemLabel: function (search, filters, data) {
+    searchHistoryItemLabel: function (search, filters) {
       let label = search ? `"${search.trim()}"` : '';
       let longLabel = '';
       let filterItems = [];
       let filterLabels = [];
-      let dataLabels = [];
 
       if (filters) {
         filterItems = filters.filter((filterItem) => filterItem.facet !== 'Show all');
         filterLabels = filterItems.map((item) => item.facet2 || item.facet);
-        if (data) {
-          dataLabels = data.map((item) => capitalise(item.label));
-        }
       }
-      
 
       if (label && filterItems.length) {
         longLabel += label;
         longLabel += `, ${filterLabels.join(', ')}`;
-        if (data.length) {
-          longLabel += `(${dataLabels.join(', ')})`;
-        }
         label += ` (+${filterItems.length})`;
       }
 
@@ -447,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

@@ -32,7 +32,6 @@
     ></SearchFilters>
     <SearchHistory
       ref="searchHistory"
-      localStorageKey="sparc.science-dataset-search-history"
       @search="searchHistorySearch"
     ></SearchHistory>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
@@ -165,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