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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.8.3-beta.5",
+  "version": "2.8.3-beta.7",
   "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

@@ -1,11 +1,7 @@
 <template>
-  <el-card
-    :body-style="bodyStyle"
-    class="content-card"
-    @mouseleave="hoverChanged(undefined)"
-  >
+  <el-card :body-style="bodyStyle" class="content-card">
     <template #header>
-      <div class="header">
+      <div class="header" @mouseleave="hoverChanged(undefined)">
         <el-input
           class="search-input"
           placeholder="Search"
@@ -30,6 +26,10 @@
         >
           Reset
         </el-button>
+        <el-radio-group v-model="filterVisibility">
+          <el-radio :value="true">Focused</el-radio>
+          <el-radio :value="false">Contextual</el-radio>
+        </el-radio-group>
       </div>
     </template>
     <SearchFilters
@@ -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"
@@ -78,8 +78,8 @@
           :availableAnatomyFacets="availableAnatomyFacets"
           :envVars="envVars"
           :withCloseButton="true"
-          @show-connectivity="$emit('show-connectivity', $event)"
-          @show-reference-connectivities="$emit('show-reference-connectivities', $event)"
+          @show-connectivity="onShowConnectivity"
+          @show-reference-connectivities="onShowReferenceConnectivities"
           @connectivity-clicked="onConnectivityClicked"
           @connectivity-hovered="$emit('connectivity-hovered', $event)"
           @loaded="onConnectivityInfoLoaded(result)"
@@ -175,9 +175,11 @@ export default {
         display: "flex",
       },
       cascaderIsReady: false,
-      displayConnectivity: false,
+      freezeTimeout: undefined,
+      freezed: false,
       initLoading: true,
       expanded: "",
+      filterVisibility: true,
       expandedData: null,
     };
   },
@@ -188,7 +190,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 () {
@@ -232,8 +238,29 @@ export default {
     paginatedResults: function () {
       this.loadingCards = false;
     },
+    filterVisibility: function (state) {
+      this.filterVisibility = state;
+      this.$emit('filter-visibility', this.filterVisibility);
+    },
   },
   methods: {
+    freezeHoverChange: function () {
+      this.freezed = true;
+      if (this.freezeTimeout) {
+        clearTimeout(this.freezeTimeout);
+      }
+      this.freezeTimeout = setTimeout(() => {
+        this.freezed = false;
+      }, 3000)
+    },
+    onShowConnectivity: function (data) {
+      this.freezeHoverChange();
+      this.$emit('show-connectivity', data);
+    },
+    onShowReferenceConnectivities: function (data) {
+      this.freezeHoverChange();
+      this.$emit('show-reference-connectivities', data);
+    },
     onConnectivityClicked: function (data) {
       this.searchInput = data.query;
       this.filter = data.filter;
@@ -262,16 +289,28 @@ export default {
         });
       }
     },
-    hoverChanged: function (data) {
-      let payload = { tabType: "connectivity" };
+    onHoverChanged: function (event, data) {
+      const { target } = event;
 
-      if (data) {
-        payload = {...payload, ...data};
-      } else if (this.expandedData) {
-        payload = {...payload, ...this.expandedData};
+      // 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) {
+      // disable hover changes when show connectivity is clicked
+      if (!this.freezed) {
+        let payload = { tabType: "connectivity" };
+  
+        if (data) {
+          payload = {...payload, ...data};
+        } else if (this.expandedData) {
+          payload = {...payload, ...this.expandedData};
+        }
+  
+        this.$emit("hover-changed", payload);
       }
-
-      this.$emit("hover-changed", payload);
     },
     resetSearch: function () {
       this.numberOfHits = 0;
@@ -280,7 +319,7 @@ export default {
     },
     resetSearchIfNoActiveSearch: function() {
       const hasValidFacet = this.filter.some(f => f.facet !== "Show all");
-      if (!this.searchInput && !hasValidFacet) {
+      if ((!this.searchInput && !hasValidFacet) || this.numberOfHits === 0) {
         this.openSearch([], '');
       }
     },
@@ -495,6 +534,9 @@ export default {
 }
 
 .header {
+  display: flex;
+  align-items: center;
+
   .el-button {
     font-family: inherit;
 
@@ -502,7 +544,19 @@ export default {
     &:focus {
       background: $app-primary-color;
       box-shadow: -3px 2px 4px #00000040;
-      color: #fff;
+      color: #ffffff;
+    }
+  }
+
+  .el-radio-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .el-radio {
+      color: #ffffff;
+      margin-left: 20px;
+      height: 20px;
     }
   }
 }

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"
@@ -61,7 +61,20 @@
             @expand-change="cascadeExpandChange"
             :show-all-levels="true"
             popper-class="sidebar-cascader-popper"
-          />
+          >
+            <template #default="{ node, data }">
+              <el-row>
+                <el-col :span="4" v-if="hasLineStyles(data)">
+                  <div class="path-visual" :style="getLineStyles(data)"></div>
+                </el-col>
+                <el-col :span="20">
+                  <div :style="getBackgroundStyles(data)">
+                    {{ data.label }}
+                  </div>
+                </el-col>
+              </el-row>
+            </template>
+          </el-cascader>
           <div v-if="showFiltersText" class="filter-default-value">Filters</div>
           <el-popover
             title="How do filters work?"
@@ -75,12 +88,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 +847,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({
@@ -851,6 +864,26 @@ export default {
       }
       return []
     },
+    hasLineStyles: function(item) {
+      return 'colour' in item && item.colourStyle === 'line'
+    },
+    getLineStyles: function (item) {
+      if ('colour' in item && item.colourStyle === 'line') {
+        if ('dashed' in item && item.dashed === true) {
+          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`
+          return { background }
+        } else {
+          return { background: item.colour }
+        }
+      }
+      return { display: 'None' }
+    },
+    getBackgroundStyles: function (item) {
+      if ('colour' in item && item.colourStyle === 'background') {
+        return { background: item.colour }
+      }
+      return {}
+    },
   },
   mounted: function () {
     this.algoliaClient = markRaw(new AlgoliaClient(
@@ -886,6 +919,7 @@ export default {
 }
 
 .tag-text {
+  display: block;
   max-width: 75px;
   white-space: nowrap;
   overflow: hidden;
@@ -1079,4 +1113,11 @@ export default {
     border-right-color: transparent !important;
   }
 }
+.path-visual {
+  margin: 3px 0;
+  height: 3px;
+  width: 25px;
+  margin-right: 5px;
+  display: inline-block;
+}
 </style>

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'">
@@ -50,6 +51,7 @@
                 :connectivityEntry="connectivityEntry"
                 :availableAnatomyFacets="availableAnatomyFacets"
                 :connectivityFilterOptions="filterOptions"
+                @filter-visibility="$emit('filter-visibility', $event)"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged(tab.id, $event)"
                 @show-connectivity="showConnectivity"
@@ -176,6 +178,8 @@ export default {
       drawerOpen: false,
       availableAnatomyFacets: [],
       activeTabId: 1,
+      activeAnnotationData: { tabType: "annotation" },
+      activeConnectivityData: { tabType: "connectivity" },
     }
   },
   methods: {
@@ -196,6 +200,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 +330,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'"
+        }
       }
     },
   },

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,
-}