@abi-software/map-utilities 1.1.3-beta.3 → 1.1.3-beta.5

package/package.json

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

package/src/App.vue

@@ -533,6 +533,10 @@ function changeHover(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
+.toolbar-container {
+  height: 80px;
+  position: relative;
+}
 .connectivity-graph {
   width: 600px;
   height: 600px;

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -60,6 +60,7 @@
 import { ConnectivityGraph } from './graph';
 
 const MIN_SCHEMA_VERSION = 1.3;
+const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
 const RESET_LABEL = 'Reset position';
 const ZOOM_LOCK_LABEL = 'Lock zoom (to scroll)';
 const ZOOM_UNLOCK_LABEL = 'Unlock zoom';
@@ -97,6 +98,7 @@ export default {
     };
   },
   mounted() {
+    this.refreshCache();
     this.loadCacheData();
     this.run().then((res) => {
       this.showGraph(this.entry);
@@ -123,10 +125,37 @@ export default {
         this.schemaVersion = schemaVersion;
       }
     },
+    removeAllCacheData: function () {
+      const keys = [
+        'connectivity-graph-expiry',
+        'connectivity-graph-source',
+        'connectivity-graph-labels',
+        'connectivity-graph-pathlist',
+        'connectivity-graph-schema-version',
+      ];
+      keys.forEach((key) => {
+        sessionStorage.removeItem(key);
+      });
+    },
+    refreshCache: function () {
+      const expiry = sessionStorage.getItem('connectivity-graph-expiry');
+      const now = new Date();
+
+      if (now.getTime() > expiry) {
+        this.removeAllCacheData();
+      }
+    },
+    updateCacheExpiry: function () {
+      const now = new Date();
+      const expiry = now.getTime() + CACHE_LIFETIME;
+
+      sessionStorage.setItem('connectivity-graph-expiry', expiry);
+    },
     run: async function () {
       if (!this.schemaVersion) {
         this.schemaVersion = await this.getSchemaVersion();
         sessionStorage.setItem('connectivity-graph-schema-version', this.schemaVersion);
+        this.updateCacheExpiry();
       }
       if (this.schemaVersion < MIN_SCHEMA_VERSION) {
         console.warn('No Server!');
@@ -136,22 +165,36 @@ export default {
       if (!this.selectedSource) {
         this.selectedSource = await this.setSourceList();
         sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
+        this.updateCacheExpiry();
       }
-      await this.setPathList(this.selectedSource)
+      await this.setPathList(this.selectedSource);
       this.hideSpinner();
     },
     showGraph: async function (neuronPath) {
       const graphCanvas = this.$refs.graphCanvas;
+
       this.showSpinner();
+
       this.connectivityGraph = new ConnectivityGraph(this.labelCache, graphCanvas);
       await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
+
       this.hideSpinner();
+
       this.connectivityGraph.showConnectivity(graphCanvas);
-      this.currentPath = neuronPath
+
+      this.connectivityGraph.on('tap-node', (event) => {
+        const { label } = event.detail;
+        const labels = label.split(`\n`);
+        /**
+         * This event is triggered after a node on the connectivity graph is clicked.
+         */
+        this.$emit('tap-node', labels);
+      });
     },
     query: async function (sql, params) {
       const url = `${this.mapServer}knowledge/query/`;
-      const query = { sql, params }
+      const query = { sql, params };
+
       try {
         const response = await fetch(url, {
           method: 'POST',
@@ -162,9 +205,11 @@ export default {
           },
           body: JSON.stringify(query)
         });
+
         if (!response.ok) {
           throw new Error(`Cannot access ${url}`);
         }
+
         return await response.json();
       } catch {
         return {
@@ -179,14 +224,17 @@ export default {
       // Order with most recent first...
       let firstSource = '';
       const sourceList = [];
+
       for (const source of sources) {
         if (source) {
           sourceList.push(source);
+
           if (firstSource === '') {
             firstSource = source;
           }
         }
       }
+
       return firstSource;
     },
     loadPathData: async function (source) {
@@ -202,9 +250,12 @@ export default {
       if (!this.pathList.length) {
         this.pathList = await this.loadPathData(source);
         sessionStorage.setItem('connectivity-graph-pathlist', JSON.stringify(this.pathList));
+        this.updateCacheExpiry();
       }
+
       this.knowledgeByPath.clear();
       this.labelledTerms = new Set();
+
       for (const [key, jsonKnowledge] of this.pathList) {
         const knowledge = JSON.parse(jsonKnowledge);
         if ('connectivity' in knowledge) {
@@ -216,6 +267,7 @@ export default {
       if (!this.labelCache.size) {
         await this.getCachedTermLabels();
       }
+
       return '';
     },
     getSchemaVersion: async function () {
@@ -232,9 +284,11 @@ export default {
             "Content-Type": "application/json"
           }
         });
+
         if (!response.ok) {
           console.error(`Cannot access ${url}`);
         }
+
         return await response.json();
       } catch {
         return null;
@@ -247,11 +301,14 @@ export default {
           where entity in (?${', ?'.repeat(this.labelledTerms.size-1)})`,
           [...this.labelledTerms.values()]
         );
+
         for (const termLabel of data.values) {
           this.labelCache.set(termLabel[0], termLabel[1]);
         }
+
         const labelCacheObj = Object.fromEntries(this.labelCache);
         sessionStorage.setItem('connectivity-graph-labels', JSON.stringify(labelCacheObj));
+        this.updateCacheExpiry();
       }
     },
     cacheNodeLabels: function (node) {
@@ -309,7 +366,7 @@ export default {
 .node-key {
   border: 1px solid $app-primary-color;
   padding: 4px;
-  background-color: rgba(240, 240, 240, 0.8);
+  background-color: rgba(#f7faff, 0.85);
 
   div div {
     width: 90px;
@@ -362,6 +419,20 @@ export default {
   }
 }
 
+:deep(.cy-graph-tooltip) {
+  padding: 4px 10px;
+  font-family: Asap;
+  font-size: 12px;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+  border-radius: var(--el-border-radius-base);
+  position: relative;
+  top: 0;
+  left: 0;
+  width: fit-content;
+  z-index: 1;
+}
+
 .visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);

package/src/components/ConnectivityGraph/graph.js

@@ -25,7 +25,7 @@ import cytoscape from 'cytoscape'
 
 //==============================================================================
 
-export class ConnectivityGraph
+export class ConnectivityGraph extends EventTarget
 {
     cyg = null
     nodes = []
@@ -37,8 +37,9 @@ export class ConnectivityGraph
 
     constructor(labelCache, graphCanvas)
     {
-      this.labelCache = labelCache;
-      this.graphCanvas = graphCanvas;
+        super()
+        this.labelCache = labelCache;
+        this.graphCanvas = graphCanvas;
     }
 
     async addConnectivity(knowledge)
@@ -70,6 +71,13 @@ export class ConnectivityGraph
     //================
     {
         this.cyg = new CytoscapeGraph(this, graphCanvas)
+
+        this.cyg.on('tap-node', (event) => {
+            const tapEvent = new CustomEvent('tap-node', {
+                detail: event.detail
+            })
+            this.dispatchEvent(tapEvent);
+        });
     }
 
     clearConnectivity()
@@ -140,6 +148,12 @@ export class ConnectivityGraph
         }
         return result
     }
+
+    on(eventName, callback)
+    //=====================
+    {
+        this.addEventListener(eventName, callback)
+    }
 }
 
 //==============================================================================
@@ -188,13 +202,14 @@ const GRAPH_STYLE = [
 
 //==============================================================================
 
-class CytoscapeGraph
+class CytoscapeGraph extends EventTarget
 {
     cy
     tooltip
 
     constructor(connectivityGraph, graphCanvas)
     {
+        super()
         this.cy = cytoscape({
             container: graphCanvas,
             elements: connectivityGraph.elements,
@@ -211,11 +226,12 @@ class CytoscapeGraph
         }).on('mouseover', 'node', this.overNode.bind(this))
           .on('mouseout', 'node', this.exitNode.bind(this))
           .on('position', 'node', this.moveNode.bind(this))
+          .on('tap', 'node', this.tapNode.bind(this))
 
         this.tooltip = document.createElement('div')
-        this.tooltip.id = 'tooltip'
+        this.tooltip.className = 'cy-graph-tooltip'
         this.tooltip.hidden = true
-        this.graphCanvas?.lastChild?.appendChild(this.tooltip)
+        graphCanvas?.lastChild?.appendChild(this.tooltip)
     }
 
     remove()
@@ -259,6 +275,23 @@ class CytoscapeGraph
     {
         this.tooltip.hidden = true
     }
+
+    tapNode(event)
+    //============
+    {
+        const node = event.target
+        const data = node.data()
+        const tapEvent = new CustomEvent('tap-node', {
+            detail: data
+        })
+        this.dispatchEvent(tapEvent);
+    }
+
+    on(eventName, callback)
+    //=====================
+    {
+        this.addEventListener(eventName, callback)
+    }
 }
 
 //==============================================================================