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

package/package.json

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

package/src/components/ConnectivityInfo.vue

@@ -1,27 +1,5 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
-    <div v-if="connectivityEntry.length > 1" class="button-container">
-      <el-popover
-        width="auto"
-        trigger="hover"
-        :teleported="false"
-      >
-        <template #reference>
-          <el-button class="button" @click="previous">Previous</el-button>
-        </template>
-        <span>{{ previousLabel }}</span>
-      </el-popover>
-      <el-popover
-        width="auto"
-        trigger="hover"
-        :teleported="false"
-      >
-        <template #reference>
-          <el-button class="button" @click="next">Next</el-button>
-        </template>
-        <span>{{ nextLabel }}</span>
-      </el-popover>
-    </div>
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
       <div class="title-content">
@@ -66,7 +44,7 @@
           popper-class="popover-map-pin"
         >
           <template #reference>
-            <el-button class="button-circle" circle @click="showConnectivity">
+            <el-button class="button-circle" circle @click="showConnectivity(entry)">
               <el-icon color="white">
                 <el-icon-location />
               </el-icon>
@@ -147,7 +125,21 @@
         class="block"
       >
         <div class="attribute-title-container">
-          <div class="attribute-title">Components</div>
+          <span class="attribute-title">Components</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              The list is not in any specific order.<br>
+              Specific paths can be viewed using Graph View.
+            </span>
+          </el-popover>
         </div>
         <div
           v-for="(component, i) in entry.components"
@@ -299,9 +291,18 @@ export default {
     ConnectivityGraph,
   },
   props: {
-    connectivityEntry: {
-      type: Array,
-      default: [],
+    entry: {
+      type: Object,
+      default: () => ({
+        destinations: [],
+        origins: [],
+        components: [],
+        destinationsWithDatasets: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        resource: undefined,
+        featuresAlert: undefined,
+      }),
     },
     envVars: {
       type: Object,
@@ -332,7 +333,7 @@ export default {
       timeoutID: undefined,
       graphViewLoaded: false,
       updatedCopyContent: '',
-      entryIndex: 0
+      sckanVersion: '',
     }
   },
   watch: {
@@ -345,9 +346,6 @@ export default {
     },
   },
   computed: {
-    entry: function () {
-      return this.connectivityEntry[this.entryIndex];
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -375,33 +373,8 @@ export default {
       text += ' species'
       return text
     },
-    sckanVersion: function () {
-      return this.entry.knowledgeSource
-    },
-    previousLabel: function () {
-      if (this.entryIndex === 0) {
-        return "This is the first item"
-      }
-      return this.connectivityEntry[this.entryIndex - 1].title
-    },
-    nextLabel: function () {
-      if (this.entryIndex === this.connectivityEntry.length - 1) {
-        return "This is the last item"
-      }
-      return this.connectivityEntry[this.entryIndex + 1].title
-    }
   },
   methods: {
-    previous: function () {
-      if (this.entryIndex !== 0) {
-        this.entryIndex = this.entryIndex - 1;
-      }
-    },
-    next: function () {
-      if (this.entryIndex !== this.connectivityEntry.length - 1) {
-        this.entryIndex = this.entryIndex + 1;
-      }
-    },
     titleCase: function (title) {
       return titleCase(title)
     },
@@ -451,9 +424,9 @@ export default {
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val
     },
-    showConnectivity: function () {
+    showConnectivity: function (entry) {
       // move the map center to highlighted area
-      const featureIds = this.entry.featureId || [];
+      const featureIds = entry.featureId || [];
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
@@ -662,6 +635,7 @@ export default {
     },
   },
   mounted: function () {
+    this.sckanVersion = this.entry['knowledge-source'];
     this.updatedCopyContent = this.getUpdateCopyContent();
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
@@ -690,11 +664,6 @@ export default {
   }
 }
 
-.button-container {
-  display: flex;
-  justify-content: space-between;
-}
-
 .title {
   text-align: left;
   // width: 16em;

package/src/components/SearchFilters.vue

@@ -788,24 +788,11 @@ export default {
       if (filters) {
         if (this.cascaderIsReady) {
           const result = []
-          const terms = []
           filters.forEach((filter) => {
             const validatedFilter =
               this.validateAndConvertFilterToHierarchical(filter)
             if (validatedFilter) {
               result.push(validatedFilter)
-              terms.push(validatedFilter.term)
-            }
-          })         
-          // make sure unused filter terms' show all checkbox is always checked 
-          this.options.forEach((option)=>{
-            if (!terms.includes(option.label)) {
-              result.push({
-                facet: "Show all",
-                facetPropPath: option.key,
-                label: "Show all",
-                term: option.label
-              })
             }
           })
           return result

package/src/components/SideBar.vue

@@ -32,7 +32,7 @@
             <!-- Connectivity Info -->
             <template v-if="tab.type === 'connectivity' && connectivityInfo">
               <connectivity-info
-                :connectivityEntry="connectivityInfo"
+                :entry="connectivityInfo"
                 :availableAnatomyFacets="availableAnatomyFacets"
                 v-if="tab.id === activeTabId"
                 :envVars="envVars"
@@ -42,7 +42,7 @@
                 @connectivity-component-click="onConnectivityComponentClick"
               />
             </template>
-            <template v-else-if="tab.type === 'annotation'">
+            <template v-if="tab.type === 'annotation'">
               <annotation-tool
                 :ref="'annotationTab_' + tab.id"
                 v-show="tab.id === activeTabId"
@@ -54,7 +54,7 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
-            <template v-else>
+            <template v-if="tab.type === 'search'">
               <SidebarContent
                 class="sidebar-content-container"
                 v-show="tab.id === activeTabId"
@@ -147,7 +147,7 @@ export default {
      * The connectivity info data to show in sidebar.
      */
     connectivityInfo: {
-      type: Array,
+      type: Object,
       default: null,
     },
     /**

package/src/exampleConnectivityInput.js

@@ -1,4 +1,4 @@
-export default [{
+export default {
     "destinations": [
         "Fifth thoracic ganglion",
         "ventricular intrinsic cardiac ganglion",
@@ -287,4 +287,4 @@ export default [{
         "Domestic Pig"
     ],
     "knowledge-source": "sckan-2024-03-26-npo",
-}]
+}

package/src/services/flatmapKnowledge.js

@@ -0,0 +1,94 @@
+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,
+}