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

package/package.json

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

package/src/components/ConnectivityExplorer.vue

@@ -1,11 +1,7 @@
 <template>
-  <el-card
-    :body-style="bodyStyle"
-    class="content-card"
-    @mouseleave="onHoverChanged($event, 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
@@ -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,
     };
   },
@@ -236,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;
@@ -276,15 +299,18 @@ export default {
       }
     },
     hoverChanged: function (data) {
-      let payload = { tabType: "connectivity" };
-
-      if (data) {
-        payload = {...payload, ...data};
-      } else if (this.expandedData) {
-        payload = {...payload, ...this.expandedData};
+      // 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;
@@ -293,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([], '');
       }
     },
@@ -508,6 +534,9 @@ export default {
 }
 
 .header {
+  display: flex;
+  align-items: center;
+
   .el-button {
     font-family: inherit;
 
@@ -515,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

@@ -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?"
@@ -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(
@@ -1080,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

@@ -51,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"

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