@abi-software/map-side-bar 2.7.2-beta.0 → 2.7.2-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-else-if="tab.type === 'annotation'">
-              <annotation-tool
+            <template v-if="tab.type === 'annotation'">
+              <AnnotationTool
                 :ref="'annotationTab_' + tab.id"
                 v-show="tab.id === activeTabId"
                 :annotationEntry="annotationEntry"
@@ -54,6 +41,23 @@
                 @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"
@@ -83,7 +87,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,8 +100,8 @@ export default {
     ElIconArrowRight,
     Drawer,
     Icon,
-    ConnectivityInfo,
     AnnotationTool,
+    ConnectivityExplorer,
   },
   name: 'SideBar',
   props: {
@@ -118,24 +122,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 +132,16 @@ export default {
     /**
      * The connectivity info data to show in sidebar.
      */
-    connectivityInfo: {
+    connectivityEntry: {
       type: Object,
-      default: null,
+      default: {},
     },
     /**
      * The annotation data to show in sidebar.
      */
     annotationEntry: {
       type: Object,
-      default: null,
+      default: {},
     },
     createData: {
       type: Object,
@@ -166,15 +152,28 @@ export default {
         x: 0,
         y: 0,
       },
-    }
+    },
+    connectivityKnowledge: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
       drawerOpen: false,
-      availableAnatomyFacets: []
+      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 },
+      ]
     }
   },
   methods: {
+    onConnectivityExplorerClicked: function (data) {
+      this.$emit('connectivity-explorer-clicked', data)
+    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
@@ -197,11 +196,18 @@ 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 clicked.
+     * @arg data
+     */
+    onConnectivityClicked: function (data) {
+      this.$emit('connectivity-clicked', data);
+    },
+    /**
+     * 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 +230,31 @@ 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.getSearchTabRefById(1);
+        const searchTabRef = this.getTabRef(1, 'search', true);
         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.
      */
-    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 = 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];
     },
     /**
      * The function to add filters to sidebar search.
@@ -274,7 +268,7 @@ export default {
 
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getSearchTabRefById(1);
+        const searchTabRef = this.getTabRef(1, 'search', true);
         searchTabRef.addFilter(filter)
       })
     },
@@ -282,7 +276,7 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
-        const searchTabRef = this.getSearchTabRefById(1);
+        const searchTabRef = this.getTabRef(1, 'search', true);
         searchTabRef.openSearch(
           '',
           undefined,
@@ -292,27 +286,17 @@ export default {
       })
     },
     getAlgoliaFacets: async function () {
-      const searchTabRef = this.getSearchTabRefById(1);
+      const searchTabRef = this.getTabRef(1, 'search');
       return await searchTabRef.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});
+    tabClicked: function (tab) {
+      this.activeTabId = tab.id
     },
-    tabClose: function (id) {
-      this.$emit('tab-close', id);
+    tabClosed: function (tab) {
+      this.$emit('tabClosed', tab);
     },
     /**
      * To receive error message for connectivity graph
@@ -324,22 +308,12 @@ export default {
   },
   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 === "search" ||
+        tab.type === "connectivityExplorer" ||
+        (tab.type === "annotation" && this.annotationEntry && Object.keys(this.annotationEntry).length > 0)
+      );
     },
   },
   created: function () {
@@ -395,7 +369,6 @@ export default {
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
     })
-
   },
 }
 </script>

package/src/components/SidebarContent.vue

@@ -164,7 +164,8 @@ export default {
   },
   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

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,31 +9,14 @@ 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']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
-    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
-    ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
-    ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
-    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
-    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']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
@@ -41,7 +24,4 @@ declare module 'vue' {
     SidebarContent: typeof import('./components/SidebarContent.vue')['default']
     Tabs: typeof import('./components/Tabs.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

package/src/exampleConnectivityInput.js

@@ -287,4 +287,4 @@ export default {
         "Domestic Pig"
     ],
     "knowledge-source": "sckan-2024-03-26-npo",
-}
+}