@abi-software/map-utilities 1.1.3-beta.4 → 1.1.3-beta.6

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -181,6 +181,15 @@ export default {
       this.hideSpinner();
 
       this.connectivityGraph.showConnectivity(graphCanvas);
+
+      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/`;
@@ -287,14 +296,20 @@ export default {
     },
     getCachedTermLabels: async function () {
       if (this.labelledTerms.size) {
-        const data = await this.query(`
-          select entity, label from labels
-          where entity in (?${', ?'.repeat(this.labelledTerms.size-1)})`,
+        const data = await this.query(
+          `select entity, knowledge from knowledge
+            where entity in (?${', ?'.repeat(this.labelledTerms.size-1)})
+            order by source desc`,
           [...this.labelledTerms.values()]
         );
 
-        for (const termLabel of data.values) {
-          this.labelCache.set(termLabel[0], termLabel[1]);
+        let last_entity = null;
+        for (const [key, jsonKnowledge] of data.values) {
+          if (key !== last_entity) {
+            const knowledge = JSON.parse(jsonKnowledge);
+            this.labelCache.set(key, knowledge['label'] || key);
+            last_entity = key;
+          }
         }
 
         const labelCacheObj = Object.fromEntries(this.labelCache);

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,6 +226,7 @@ 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.className = 'cy-graph-tooltip'
@@ -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)
+    }
 }
 
 //==============================================================================