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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.8.3-beta.3",
+  "version": "2.8.3-beta.5",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityExplorer.vue

@@ -5,7 +5,7 @@
     @mouseleave="hoverChanged(undefined)"
   >
     <template #header>
-      <div class="header" @mouseleave="hoverChanged(undefined)">
+      <div class="header">
         <el-input
           class="search-input"
           placeholder="Search"
@@ -30,10 +30,6 @@
         >
           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
@@ -82,8 +78,8 @@
           :availableAnatomyFacets="availableAnatomyFacets"
           :envVars="envVars"
           :withCloseButton="true"
-          @show-connectivity="onShowConnectivity"
-          @show-reference-connectivities="onShowReferenceConnectivities"
+          @show-connectivity="$emit('show-connectivity', $event)"
+          @show-reference-connectivities="$emit('show-reference-connectivities', $event)"
           @connectivity-clicked="onConnectivityClicked"
           @connectivity-hovered="$emit('connectivity-hovered', $event)"
           @loaded="onConnectivityInfoLoaded(result)"
@@ -113,6 +109,7 @@ import {
   ElInput as Input,
   ElPagination as Pagination,
 } from "element-plus";
+import EventBus from './EventBus.js'
 import SearchFilters from "./SearchFilters.vue";
 import SearchHistory from "./SearchHistory.vue";
 import ConnectivityCard from "./ConnectivityCard.vue";
@@ -178,11 +175,10 @@ export default {
         display: "flex",
       },
       cascaderIsReady: false,
-      freezeTimeout: undefined,
-      freezed: false,
+      displayConnectivity: false,
       initLoading: true,
       expanded: "",
-      filterVisibility: true
+      expandedData: null,
     };
   },
   computed: {
@@ -202,6 +198,7 @@ export default {
   watch: {
     connectivityKnowledge: function (newVal, oldVal) {
       this.expanded = ""; // reset expanded state
+      this.expandedData = null;
       this.loadingCards = false;
       if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
         this.results = newVal;
@@ -211,6 +208,11 @@ export default {
         if (this.numberOfHits === 1 && !('ready' in this.results[0])) {
           this.onConnectivityCollapseChange(this.results[0]);
         }
+        if (this.numberOfHits > 0 && ('ready' in this.results[0])) {
+          this.$refs.filtersRef.checkShowAllBoxes();
+          this.searchInput = '';
+          this.filter = [];
+        }
       }
     },
     // watch for connectivityEntry changes
@@ -230,29 +232,8 @@ 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;
@@ -260,13 +241,21 @@ export default {
     },
     collapseChange:function (data) {
       this.expanded = this.expanded === data.id ? "" : data.id;
+      this.expandedData = this.expanded ? data : null;
+    },
+    closeConnectivity: function () {
+      if (!this.expanded) {
+        this.$emit('connectivity-item-close');
+      }
     },
     onConnectivityCollapseChange: function (data) {
       // close connectivity event will not trigger emit
       if (this.connectivityEntry.find(entry => entry.featureId[0] === data.id)) {
         this.collapseChange(data);
+        this.closeConnectivity();
       } else {
         this.expanded = "";
+        this.expandedData = null;
         // Make sure to emit the change after the next DOM update
         this.$nextTick(() => {
           this.$emit("connectivity-collapse-change", data);
@@ -274,11 +263,15 @@ export default {
       }
     },
     hoverChanged: function (data) {
-      // disable hover changes when show connectivity is clicked
-      if (!this.freezed) {
-        const payload = data ? { ...data, tabType: "connectivity" } : { tabType: "connectivity" };
-        this.$emit("hover-changed", payload);
+      let payload = { tabType: "connectivity" };
+
+      if (data) {
+        payload = {...payload, ...data};
+      } else if (this.expandedData) {
+        payload = {...payload, ...this.expandedData};
       }
+
+      this.$emit("hover-changed", payload);
     },
     resetSearch: function () {
       this.numberOfHits = 0;
@@ -376,6 +369,7 @@ export default {
     },
     searchKnowledge: function (filters, query = "") {
       this.expanded = "";
+      this.expandedData = null;
       this.loadingCards = true;
       this.scrollToTop();
       this.$emit("search-changed", {
@@ -426,6 +420,11 @@ export default {
   mounted: function () {
     localStorage.removeItem('connectivity-active-view');
     this.openSearch(this.filter, this.searchInput);
+
+    EventBus.on('close-connectivity', () => {
+      this.expanded = '';
+      this.expandedData = null;
+    });
   },
 };
 </script>
@@ -496,9 +495,6 @@ export default {
 }
 
 .header {
-  display: flex;
-  align-items: center;
-
   .el-button {
     font-family: inherit;
 
@@ -506,19 +502,7 @@ export default {
     &:focus {
       background: $app-primary-color;
       box-shadow: -3px 2px 4px #00000040;
-      color: #ffffff;
-    }
-  }
-
-  .el-radio-group {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    .el-radio {
-      color: #ffffff;
-      margin-left: 20px;
-      height: 20px;
+      color: #fff;
     }
   }
 }

package/src/components/SideBar.vue

@@ -50,13 +50,13 @@
                 :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"
                 @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-hovered="onConnectivityHovered"
                 @connectivity-collapse-change="onConnectivityCollapseChange"
+                @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
             <template v-else>
@@ -182,6 +182,14 @@ export default {
     onConnectivityCollapseChange: function (data) {
       this.$emit('connectivity-collapse-change', data)
     },
+    /**
+     * This event is emitted when
+     * the close button of the opened connectivity card
+     * in connectivity explorer is clicked.
+     */
+    onConnectivityItemClose: function () {
+      this.$emit('connectivity-item-close');
+    },
     /**
      * This event is emitted when the mouse hover are changed.
      * @arg data
@@ -329,6 +337,9 @@ export default {
     storeAvailableAnatomyFacets: function (availableAnatomyFacets) {
       localStorage.setItem('available-anatomy-facets', JSON.stringify(availableAnatomyFacets))
     },
+    closeConnectivity: function () {
+      EventBus.emit('close-connectivity');
+    },
   },
   computed: {
     // This should respect the information provided by the property

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