@abi-software/map-side-bar 2.7.1 → 2.7.2-beta.1

package/src/components/SideBar.vue

@@ -22,11 +22,11 @@
         </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 -->
@@ -39,7 +39,8 @@
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
                 @show-reference-connectivities="onShowReferenceConnectivities"
-                @connectivity-component-click="onConnectivityComponentClick"
+                @connectivity-clicked="onConnectivityClicked"
+                @connectivity-hovered="onConnectivityHovered"
               />
             </template>
             <template v-else-if="tab.type === 'annotation'">
@@ -54,6 +55,16 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
+            <template v-else-if="tab.type === 'connectivityExplorer'">
+              <connectivity-explorer
+                :ref="'connectivityExplorerTab_' + tab.id"
+                v-show="tab.id === activeTabId"
+                :connectivityKnowledge="connectivityKnowledge"
+                :envVars="envVars"
+                @search-changed="searchChanged(tab.id, $event)"
+                @hover-changed="hoverChanged($event)"
+              />
+            </template>
             <template v-else>
               <SidebarContent
                 class="sidebar-content-container"
@@ -84,6 +95,7 @@ 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.
@@ -98,6 +110,7 @@ export default {
     Icon,
     ConnectivityInfo,
     AnnotationTool,
+    ConnectivityExplorer,
   },
   name: 'SideBar',
   props: {
@@ -118,24 +131,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.
      */
@@ -166,12 +161,23 @@ 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', id: 2, type: 'connectivity', closable: true },
+        { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+        { title: 'Connectivity Explorer', id: 4, type: 'connectivityExplorer', closable: false },
+      ]
     }
   },
   methods: {
@@ -197,11 +203,21 @@ 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);
+    },
+    showNeuronConnection: function (data) {
+      this.$emit('neuron-connection-change', data);
     },
     /**
      * This event is emitted when the search filters are changed.
@@ -224,43 +240,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(4, '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 +278,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 +286,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 +296,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 +318,13 @@ 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 === "connectivity" && this.connectivityInfo) ||
+        (tab.type === "annotation" && this.annotationEntry && Object.keys(this.annotationEntry).length > 0)
+      );
     },
   },
   created: function () {
@@ -396,6 +381,16 @@ export default {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
     })
 
+    // Get available anatomy facets for the connectivity info
+    EventBus.on('connectivity-explorer-clicked', (payLoad) => {
+      this.$emit('connectivity-explorer-clicked', payLoad);
+    })
+
+    // Get available anatomy facets for the connectivity info
+    EventBus.on('connectivity-hovered', (payLoad) => {
+      this.$emit('connectivity-hovered', payLoad);
+    })
+
   },
 }
 </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,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']

package/src/exampleConnectivityInput.js

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

package/src/services/flatmapKnowledge.js

@@ -1,94 +0,0 @@
-async function getReferenceConnectivitiesFromStorage(resource) {
-  const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
-
-  if (flatmapKnowledgeRaw) {
-    const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
-    const dataWithRefs = flatmapKnowledge.filter((x) => x.references && x.references.length);
-    const foundData = dataWithRefs.filter((x) => x.references.includes(resource));
-
-    if (foundData.length) {
-      const featureIds = foundData.map((x) => x.id);
-      return featureIds;
-    }
-  }
-  return [];
-}
-
-async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries) {
-  const knowledgeSource = getKnowledgeSource(mapImp);
-  const sql = `select knowledge from knowledge
-    where source="${knowledgeSource}" and
-    knowledge like "%${resource}%" order by source desc`;
-  console.log(sql)
-  const response = await flatmapQueries.flatmapQuery(sql);
-  const mappedData = response.values.map((x) => x[0]);
-  const parsedData = mappedData.map((x) => JSON.parse(x));
-  const featureIds = parsedData.map((x) => x.id);
-  return featureIds;
-}
-
-function getKnowledgeSource(mapImp) {
-  let mapKnowledgeSource = '';
-  if (mapImp.provenance?.connectivity) {
-    const sckanProvenance = mapImp.provenance.connectivity;
-    if ('knowledge-source' in sckanProvenance) {
-      mapKnowledgeSource = sckanProvenance['knowledge-source'];
-    } else if ('npo' in sckanProvenance) {
-      mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
-    }
-  }
-
-  return mapKnowledgeSource;
-}
-
-function loadAndStoreKnowledge(mapImp, flatmapQueries) {
-  const knowledgeSource = getKnowledgeSource(mapImp);
-  const sql = `select knowledge from knowledge
-    where source="${knowledgeSource}"
-    order by source desc`;
-  const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
-
-  if (!flatmapKnowledge) {
-    flatmapQueries.flatmapQuery(sql).then((response) => {
-      const mappedData = response.values.map(x => x[0]);
-      const parsedData = mappedData.map(x => JSON.parse(x));
-      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
-      updateFlatmapKnowledgeCache();
-    });
-  }
-}
-
-function updateFlatmapKnowledgeCache() {
-  const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
-  const now = new Date();
-  const expiry = now.getTime() + CACHE_LIFETIME;
-
-  sessionStorage.setItem('flatmap-knowledge-expiry', expiry);
-}
-
-function removeFlatmapKnowledgeCache() {
-  const keys = [
-    'flatmap-knowledge',
-    'flatmap-knowledge-expiry',
-  ];
-  keys.forEach((key) => {
-    sessionStorage.removeItem(key);
-  });
-}
-
-function refreshFlatmapKnowledgeCache() {
-  const expiry = sessionStorage.getItem('flatmap-knowledge-expiry');
-  const now = new Date();
-
-  if (now.getTime() > expiry) {
-    removeFlatmapKnowledgeCache();
-  }
-}
-
-export {
-  getReferenceConnectivitiesFromStorage,
-  getReferenceConnectivitiesByAPI,
-  loadAndStoreKnowledge,
-  getKnowledgeSource,
-  refreshFlatmapKnowledgeCache,
-}