@abi-software/map-side-bar 2.7.3-beta.0 → 2.7.3-beta.2

package/src/components/SideBar.vue

@@ -22,28 +22,15 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="activeTabs.length > 1"
-            :tabTitles="activeTabs"
+            v-if="tabEntries.length > 1"
+            :tabEntries="tabEntries"
             :activeId="activeTabId"
-            @titleClicked="tabClicked"
-            @tab-close="tabClose"
+            @tabClicked="tabClicked"
+            @tabClosed="tabClosed"
           />
           <template v-for="tab in tabs" key="tab.id">
-            <!-- 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"
-                @show-connectivity="showConnectivity"
-                @show-reference-connectivities="onShowReferenceConnectivities"
-                @connectivity-component-click="onConnectivityComponentClick"
-              />
-            </template>
             <template v-if="tab.type === 'annotation'">
-              <annotation-tool
+              <AnnotationTool
                 :ref="'annotationTab_' + tab.id"
                 v-show="tab.id === activeTabId"
                 :annotationEntry="annotationEntry"
@@ -54,13 +41,29 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
-            <template v-if="tab.type === 'search'">
+            <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-hovered="onConnectivityHovered"
+                @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+              />
+            </template>
+            <template v-else>
               <SidebarContent
                 class="sidebar-content-container"
                 v-show="tab.id === activeTabId"
                 :contextCardEntry="tab.contextCard"
                 :envVars="envVars"
-                :ref="'searchTab_' + tab.id"
+                :ref="'datasetExplorerTab_' + tab.id"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged($event)"
               />
@@ -83,7 +86,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
-import ConnectivityInfo from './ConnectivityInfo.vue'
+import ConnectivityExplorer from './ConnectivityExplorer.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -96,11 +99,19 @@ export default {
     ElIconArrowRight,
     Drawer,
     Icon,
-    ConnectivityInfo,
     AnnotationTool,
+    ConnectivityExplorer,
   },
   name: 'SideBar',
   props: {
+    tabs: {
+      type: Array,
+      default: [
+        { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
+        { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
+        { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+      ],
+    },
     /**
      * The option to show side bar.
      */
@@ -118,24 +129,6 @@ 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.
      */
@@ -146,16 +139,16 @@ export default {
     /**
      * The connectivity info data to show in sidebar.
      */
-    connectivityInfo: {
-      type: Object,
-      default: null,
+    connectivityEntry: {
+      type: Array,
+      default: [],
     },
     /**
      * The annotation data to show in sidebar.
      */
     annotationEntry: {
-      type: Object,
-      default: null,
+      type: Array,
+      default: [],
     },
     createData: {
       type: Object,
@@ -166,15 +159,23 @@ export default {
         x: 0,
         y: 0,
       },
-    }
+    },
+    connectivityKnowledge: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
       drawerOpen: false,
-      availableAnatomyFacets: []
+      availableAnatomyFacets: [],
+      activeTabId: 1,
     }
   },
   methods: {
+    onConnectivityExplorerClicked: function (data) {
+      this.$emit('connectivity-explorer-clicked', data)
+    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
@@ -197,11 +198,11 @@ export default {
       this.$emit('show-reference-connectivities', refSource);
     },
     /**
-     * This function is triggered after a connectivity component is clicked.
+     * This function is triggered after connectivity term is hovered.
      * @arg data
      */
-    onConnectivityComponentClick: function (data) {
-      this.$emit('connectivity-component-click', data);
+    onConnectivityHovered: function (data) {
+      this.$emit('connectivity-hovered', data);
     },
     /**
      * This event is emitted when the search filters are changed.
@@ -224,43 +225,34 @@ 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(undefined, '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.getSearchTabRefById(1);
-        searchTabRef.openSearch(facets, query);
+        const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
+        datasetExplorerTabRef.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.
      */
-    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];
+    getTabRef: function (id, type, switchTab = false) {
+      const matchedTab = this.tabEntries.filter((tabEntry) => {
+        return (id === undefined || tabEntry.id === id) &&
+          (type === undefined || tabEntry.type === type);
+      });
+      const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
+      const tabRef = tabInfo[0].type + 'Tab_' + tabInfo[0].id;
+      if (switchTab) this.setActiveTab({ id: tabInfo[0].id, type: tabInfo[0].type });
+      return this.$refs[tabRef][0];
     },
     /**
      * The function to add filters to sidebar search.
@@ -274,16 +266,16 @@ export default {
 
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getSearchTabRefById(1);
-        searchTabRef.addFilter(filter)
+        const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
+        datasetExplorerTabRef.addFilter(filter)
       })
     },
     openNeuronSearch: function (neuron) {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getSearchTabRefById(1);
-        searchTabRef.openSearch(
+        const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
+        datasetExplorerTabRef.openSearch(
           '',
           undefined,
           'scicrunch-query-string/',
@@ -292,27 +284,25 @@ export default {
       })
     },
     getAlgoliaFacets: async function () {
-      const searchTabRef = this.getSearchTabRefById(1);
-      return await searchTabRef.getAlgoliaFacets()
+      const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer');
+      return await datasetExplorerTabRef.getAlgoliaFacets()
     },
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
-    /**
-     * 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});
+    setActiveTab: function (tab) {
+      const matchedTab = this.tabs.filter((tabEntry) => {
+        return tabEntry.id === tab.id && tabEntry.type === tab.type;
+      });
+      const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
+      this.activeTabId = tabInfo[0].id;
+    },
+    tabClicked: function (tab) {
+      this.setActiveTab(tab);
+      this.$emit('tabClicked', tab);
     },
-    tabClose: function (id) {
-      this.$emit('tab-close', id);
+    tabClosed: function (tab) {
+      this.$emit('tabClosed', tab);
     },
     /**
      * To receive error message for connectivity graph
@@ -321,25 +311,25 @@ export default {
     updateConnectivityGraphError: function (errorInfo) {
       EventBus.emit('connectivity-graph-error', errorInfo);
     },
+    /**
+     * Store available anatomy facets data for connectivity list component
+     */
+    storeAvailableAnatomyFacets: function (availableAnatomyFacets) {
+      localStorage.setItem('available-anatomy-facets', JSON.stringify(availableAnatomyFacets))
+    },
   },
   computed: {
     // This should respect the information provided by the property
-    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;
+    tabEntries: function () {
+      return this.tabs.filter((tab) =>
+        tab.type === "datasetExplorer" ||
+        tab.type === "connectivityExplorer" ||
+        (
+          tab.type === "annotation" &&
+          this.annotationEntry &&
+          this.annotationEntry.length > 0
+        )
+      );
     },
   },
   created: function () {
@@ -387,15 +377,18 @@ export default {
     })
     EventBus.on('onConnectivityActionClick', (payLoad) => {
       // switch to search tab with tab id: 1
-      this.tabClicked({id: 1, type: 'search'});
+      this.tabClicked({id: 1, type: 'datasetExplorer'});
       this.$emit('actionClick', payLoad);
     })
+    EventBus.on('connectivity-source-change', (payLoad) => {
+      this.$emit('connectivity-source-change', payLoad);
+    })
 
     // Get available anatomy facets for the connectivity info
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
+        this.storeAvailableAnatomyFacets(this.availableAnatomyFacets);
     })
-
   },
 }
 </script>

package/src/components/SidebarContent.vue

@@ -18,6 +18,14 @@
         >
           Search
         </el-button>
+        <el-button
+          link
+          class="el-button-link"
+          @click="openSearch([], '')"
+          size="large"
+        >
+          Reset
+        </el-button>
       </div>
     </template>
     <SearchFilters
@@ -32,6 +40,7 @@
     ></SearchFilters>
     <SearchHistory
       ref="searchHistory"
+      localStorageKey="sparc.science-dataset-search-history"
       @search="searchHistorySearch"
     ></SearchHistory>
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
@@ -159,12 +168,14 @@ export default {
       return {
         numberOfHits: this.numberOfHits,
         filterFacets: this.filter,
+        showFilters: true
       }
     },
   },
   methods: {
     hoverChanged: function (data) {
-      this.$emit('hover-changed', data)
+      const payload = data ? { ...data, type: 'dataset' } : data
+      this.$emit('hover-changed', payload)
     },
     resetSearch: function () {
       this.numberOfHits = 0
@@ -489,6 +500,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/pagination.scss';
+
 .dataset-card {
   position: relative;
 
@@ -550,23 +563,6 @@ export default {
   }
 }
 
-.pagination {
-  padding-bottom: 16px;
-  background-color: white;
-  padding-left: 95px;
-  font-weight: bold;
-}
-
-.pagination :deep(button) {
-  background-color: white !important;
-}
-.pagination :deep(li) {
-  background-color: white !important;
-}
-.pagination :deep(li.is-active) {
-  color: $app-primary-color;
-}
-
 .error-feedback {
   font-family: Asap;
   font-size: 14px;
@@ -636,4 +632,14 @@ export default {
   background: rgba(0, 0, 0, 0);
   box-shadow: none;
 }
+
+.el-button-link {
+  color: white !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    text-decoration-color: transparent;
+  }
+}
 </style>

package/src/components/Tabs.vue

@@ -1,40 +1,35 @@
 <template>
-  <div class="tab-container">
+  <div class="tabs-container">
     <div
-      class="title"
-      v-for="title in tabTitles"
-      :key="title.id"
-      :class="{ 'active-tab': title.id == activeId }"
+      class="tab"
+      v-for="tab in tabs"
+      :key="tab.id"
+      :class="{ 'active-tab': tab.id == activeId }"
+      @click="tabClicked(tab)"
     >
-      <div
-        class="title-text-table"
-        v-bind:class="{ highlightText: title.id == activeId }"
-        v-on:click="titleClicked(title.id, title.type)"
+      <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">
-          {{ 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>
+        <el-icon-close />
+      </el-icon>
     </div>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { Close as ElIconClose } from "@element-plus/icons-vue";
 
 export default {
-  name: 'Tabs',
+  name: "Tabs",
+  components: {
+    ElIconClose,
+  },
   props: {
-    tabTitles: {
+    tabEntries: {
       type: Array,
       default: () => [],
     },
@@ -42,106 +37,72 @@ 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: {
-    titleClicked: function (id, type) {
-      this.$emit('titleClicked', {id, type})
+    tabClicked: function (tab) {
+      this.$emit("tabClicked", { id: tab.id, type: tab.type });
     },
-    tabClose: function (id) {
-      this.$emit('tab-close', id);
+    tabClosed: function (tab) {
+      this.$emit("tabClosed", { id: tab.id, type: tab.type });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-$tab-height: 30px;
-
-.tab-container {
-  height: $tab-height + 2;
+.tabs-container {
   display: flex;
-  flex-direction: row;
-  position: relative;
-  z-index: 1;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
-.title {
-  height: $tab-height;
+.tab {
+  height: 30px;
   border: 1px solid var(--el-border-color);
   border-top-color: transparent;
-  background-color: white;
+  border-bottom-color: transparent;
   display: flex;
-  width: fit-content;
   align-items: center;
-  position: relative;
   cursor: pointer;
 }
 
-.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,
+.tab:hover,
 .active-tab {
   background-color: #f9f2fc;
-  border: solid #8300bf;
-  border-width: 1px 1px .125em;
+  border: 1px solid #8300bf;
   color: #8300bf;
   font-weight: 500;
 }
 
-.highlightText {
-  color: $app-primary-color;
+.tab-title {
+  text-align: center;
+  font-size: 14px;
+  padding: 0 1rem;
 }
 
-.button-tab-close {
+.tab-close-icon {
   width: 20px !important;
   height: 20px !important;
-  line-height: 20px !important;
-  padding: 0 !important;
+  font-size: 20px !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>

package/src/components.d.ts

@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
+    ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -23,6 +25,7 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconClose: typeof import('@element-plus/icons-vue')['Close']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
@@ -31,6 +34,8 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']