@abi-software/map-side-bar 2.8.3-beta.5 → 2.8.3-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.8.3-beta.5",
+  "version": "2.8.3-beta.6",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.5.0",
+    "@abi-software/map-utilities": "^1.6.0-beta.0",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/AnnotationTool.vue

@@ -12,6 +12,7 @@
       class="annotation-popup"
       :annotationEntry="annotationEntry"
       @annotation="$emit('annotation', $event)"
+      @hover-changed="$emit('hover-changed', $event)"
     />
     <div v-if="createData && createData.toBeDeleted" class="delete-container">
       <el-row>
@@ -75,6 +76,7 @@ export default {
   data: function () {
     return {
       ElIconDelete: shallowRef(ElIconDelete),
+      annotationPopupData: null,
     };
   },
 }

package/src/components/ConnectivityExplorer.vue

@@ -2,7 +2,7 @@
   <el-card
     :body-style="bodyStyle"
     class="content-card"
-    @mouseleave="hoverChanged(undefined)"
+    @mouseleave="onHoverChanged($event, undefined)"
   >
     <template #header>
       <div class="header">
@@ -51,7 +51,7 @@
       class="content scrollbar"
       v-loading="loadingCards || initLoading"
       ref="content"
-      @mouseleave="hoverChanged(undefined)"
+      @mouseleave="onHoverChanged($event, undefined)"
     >
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
@@ -61,7 +61,7 @@
         :key="result.id"
         :ref="'stepItem-'  + result.id"
         class="step-item"
-        @mouseenter="hoverChanged(result)"
+        @mouseenter="onHoverChanged($event, result)"
       >
         <ConnectivityCard
           v-show="expanded !== result.id"
@@ -188,7 +188,11 @@ export default {
         numberOfHits: this.numberOfHits,
         filterFacets: this.filter,
         options: this.connectivityFilterOptions,
-        showFilters: true
+        showFilters: true,
+        helper: {
+          within: "'CNS' OR 'Local circuit neuron'",
+          between: "'Somatic lower motor' AND 'Human'"
+        }
       };
     },
     paginatedResults: function () {
@@ -262,6 +266,15 @@ export default {
         });
       }
     },
+    onHoverChanged: function (event, data) {
+      const { target } = event;
+
+      // mouseleave event won't trigger if the connectivity explorer tab is not in view
+      // e.g., switching to annotation tab on item click
+      if (data || (target && target.checkVisibility())) {
+        this.hoverChanged(data)
+      }
+    },
     hoverChanged: function (data) {
       let payload = { tabType: "connectivity" };
 

package/src/components/SearchFilters.vue

@@ -9,7 +9,7 @@
           closable
           @close="cascadeTagClose(presentTags[0])"
         >
-          <p class="tag-text">{{ presentTags[0] }}</p>
+          <span class="tag-text">{{ presentTags[0] }}</span>
         </el-tag>
         <el-popover
           v-if="presentTags.length > 1"
@@ -75,12 +75,12 @@
             <div>
               <strong>Within categories:</strong> OR
               <br />
-              example: 'heart' OR 'colon'
+              example: {{ entry.helper.within }}
               <br />
               <br />
               <strong>Between categories:</strong> AND
               <br />
-              example: 'rat' AND 'lung'
+              example: {{ entry.helper.between }}
             </div>
           </el-popover>
         </span>
@@ -834,8 +834,8 @@ export default {
               result.push(validatedFilter)
               terms.push(validatedFilter.term)
             }
-          })         
-          // make sure unused filter terms' show all checkbox is always checked 
+          })
+          // make sure unused filter terms' show all checkbox is always checked
           this.options.forEach((option)=>{
             if (!terms.includes(option.label)) {
               result.push({
@@ -886,6 +886,7 @@ export default {
 }
 
 .tag-text {
+  display: block;
   max-width: 75px;
   white-space: nowrap;
   overflow: hidden;

package/src/components/SideBar.vue

@@ -39,6 +39,7 @@
                 @confirm-create="$emit('confirm-create', $event)"
                 @cancel-create="$emit('cancel-create')"
                 @confirm-delete="$emit('confirm-delete', $event)"
+                @hover-changed="hoverChanged(tab.id, $event)"
               />
             </template>
             <template v-else-if="tab.type === 'connectivityExplorer'">
@@ -176,6 +177,8 @@ export default {
       drawerOpen: false,
       availableAnatomyFacets: [],
       activeTabId: 1,
+      activeAnnotationData: { tabType: "annotation" },
+      activeConnectivityData: { tabType: "connectivity" },
     }
   },
   methods: {
@@ -196,6 +199,15 @@ export default {
      */
     hoverChanged: function (id, data) {
       this.$emit('hover-changed', {...data,  tabId: id })
+
+      const activeTabType = this.getActiveTabTypeById(id);
+      // save the last highlighted data for connectivity and annotation tabs
+      if (activeTabType === 'connectivityExplorer') {
+        this.activeConnectivityData = data;
+      }
+      if (activeTabType === 'annotation') {
+        this.activeAnnotationData = data;
+      }
     },
     /**
      * This event is emitted when the show connectivity button is clicked.
@@ -317,9 +329,41 @@ export default {
       const tabInfo = matchedTab.length ? matchedTab : this.tabEntries;
       this.activeTabId = tabInfo[0].id;
     },
+    getActiveTabTypeById: function (id) {
+      const foundTab = this.tabs.find((tab) => tab.id === id);
+      if (foundTab) {
+        return foundTab.type;
+      }
+      return '';
+    },
+    highlightActiveTabData: function (tab) {
+      let data = null;
+
+      if (tab.type === 'connectivityExplorer') {
+        const connectivityExplorerTabRef = this.getTabRef(undefined, 'connectivityExplorer', true);
+        // check if any opened item
+        // if no opened item, highlight items will be based on the results in explorer
+        if (connectivityExplorerTabRef && !connectivityExplorerTabRef.expanded) {
+          data = { tabType: 'connectivity' };
+        } else {
+          data = {...this.activeConnectivityData};
+        }
+      } else if (tab.type === 'annotation') {
+        data = {...this.activeAnnotationData};
+      } else {
+        // switching to dataset explorer tab will not highlight
+        // the highlight is from the last tab
+        // if needed, to update it here
+      }
+
+      if (data) {
+        this.$emit('hover-changed', {...data,  tabId: tab.id })
+      }
+    },
     tabClicked: function (tab) {
       this.setActiveTab(tab);
       this.$emit('tabClicked', tab);
+      this.highlightActiveTabData(tab);
     },
     tabClosed: function (tab) {
       this.$emit('tabClosed', tab);

package/src/components/SidebarContent.vue

@@ -167,7 +167,11 @@ export default {
       return {
         numberOfHits: this.numberOfHits,
         filterFacets: this.filter,
-        showFilters: true
+        showFilters: true,
+        helper: {
+          within: "'heart' OR 'colon'",
+          between: "'rat' AND 'lung'"
+        }
       }
     },
   },