@abi-software/map-utilities 1.1.3-beta.0 → 1.1.3-beta.10

package/src/components/ConnectivityGraph/graph.js

@@ -25,9 +25,9 @@ import cytoscape from 'cytoscape'
 
 //==============================================================================
 
-export class ConnectivityGraph
+export class ConnectivityGraph extends EventTarget
 {
-    cy = null
+    cyg = null
     nodes = []
     edges = []
     axons = []
@@ -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)
@@ -69,15 +70,56 @@ export class ConnectivityGraph
     showConnectivity(graphCanvas)
     //================
     {
-        this.cy = new CytoscapeGraph(this, graphCanvas)
+        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()
     //=================
     {
-        if (this.cy) {
-            this.cy.remove()
-            this.cy = null
+        if (this.cyg?.cy) {
+            this.cyg.cy.remove()
+            this.cyg.cy = null
+        }
+    }
+
+    reset()
+    //=====
+    {
+        if (this.cyg?.cy) {
+            this.cyg.cy.reset()
+        }
+    }
+
+    zoom(val)
+    //=======
+    {
+        if (this.cyg?.cy) {
+            const currentZoom = this.cyg.cy.zoom()
+            const width = this.cyg.cy.width()
+            const height = this.cyg.cy.height()
+            const positionToRender = {
+                x: width/2,
+                y: height/2,
+            }
+            this.cyg.cy.zoom({
+                level: currentZoom + val,
+                renderedPosition: positionToRender,
+            })
+        }
+    }
+
+    enableZoom(option)
+    //================
+    {
+        if (this.cyg?.cy) {
+            this.cyg.cy.userZoomingEnabled(option)
         }
     }
 
@@ -124,6 +166,12 @@ export class ConnectivityGraph
         }
         return result
     }
+
+    on(eventName, callback)
+    //=====================
+    {
+        this.addEventListener(eventName, callback)
+    }
 }
 
 //==============================================================================
@@ -132,54 +180,81 @@ const GRAPH_STYLE = [
     {
         'selector': 'node',
         'style': {
-            'label': 'data(label)',
-            'background-color': '#80F0F0',
+            'label': function(ele) { return trimLabel(ele.data('label')) },
+            // 'background-color': '#80F0F0',
+            'background-color': 'transparent',
+            'background-opacity': '0',
             'text-valign': 'center',
             'text-wrap': 'wrap',
+            'width': '80px',
+            'height': '80px',
             'text-max-width': '80px',
-            'font-size': '6px'
+            'font-size': '6px',
+            'shape': 'round-rectangle',
+            'border-width': 1,
+            'border-style': 'solid',
+            'border-color': 'gray',
         }
     },
     {
         'selector': 'node[axon]',
         'style': {
-            'background-color': 'green'
+            // 'background-color': 'green',
+            'shape': 'round-diamond',
         }
     },
     {
         'selector': 'node[dendrite]',
         'style': {
-            'background-color': 'red'
+            // 'background-color': 'red',
+            'shape': 'ellipse',
         }
     },
     {
         'selector': 'node[both-a-d]',
         'style': {
-            'background-color': 'gray'
+            // 'background-color': 'gray',
+            'shape': 'round-rectangle',
         }
     },
     {
         'selector': 'edge',
         'style': {
-            'width': 2,
-            'line-color': '#9dbaea',
-            'target-arrow-color': '#9dbaea',
+            'width': 1,
+            'line-color': 'dimgray',
+            'target-arrow-color': 'dimgray',
             'target-arrow-shape': 'triangle',
             'curve-style': 'bezier'
         }
     }
 ]
 
+function trimLabel(label) {
+    const labels = label.split('\n')
+    const half = labels.length/2
+    const trimLabels = labels.slice(half)
+    return trimLabels.join('\n')
+}
+
+function capitalizeLabels(input) {
+    return input.split('\n').map(label => {
+        if (label && label[0] >= 'a' && label[0] <= 'z') {
+            return label.charAt(0).toUpperCase() + label.slice(1)
+        }
+        return label
+    }).join('\n')
+}
+
 //==============================================================================
 
-class CytoscapeGraph
+class CytoscapeGraph extends EventTarget
 {
     cy
     tooltip
 
     constructor(connectivityGraph, graphCanvas)
     {
-        // const graphCanvas = document.getElementById('graph-canvas')
+        super()
         this.cy = cytoscape({
             container: graphCanvas,
             elements: connectivityGraph.elements,
@@ -189,15 +264,19 @@ class CytoscapeGraph
                 roots: connectivityGraph.roots
             },
             directed: true,
-            style: GRAPH_STYLE
+            style: GRAPH_STYLE,
+            minZoom: 0.5,
+            maxZoom: 10,
+            wheelSensitivity: 0.4,
         }).on('mouseover', 'node', this.overNode.bind(this))
           .on('mouseout', 'node', this.exitNode.bind(this))
           .on('position', 'node', this.moveNode.bind(this))
+          .on('tap', 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()
@@ -220,10 +299,14 @@ class CytoscapeGraph
     //==============
     {
         const node = event.target
-        this.tooltip.innerText = node.data().label
+        const label = capitalizeLabels(node.data().label)
+
+        this.tooltip.innerText = label
         this.tooltip.style.left = `${event.renderedPosition.x}px`
         this.tooltip.style.top = `${event.renderedPosition.y}px`
+        this.tooltip.style.maxWidth = '240px'
         this.tooltip.hidden = false
+
         this.checkRightBoundary(event.renderedPosition.x)
     }
 
@@ -241,6 +324,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)
+    }
 }
 
 //==============================================================================

package/src/components/TreeControls/TreeControls.vue

@@ -6,12 +6,21 @@
           {{ title }}
         </div>
       </el-col>
+      <el-col v-if="enableFilter" :span="12">
+        <div>
+          <el-input
+            class="tree-filter-input"
+            v-model="filterText"
+            placeholder="Filter keyword"
+          />
+        </div>
+      </el-col>
     </el-row>
     <div class="tree-container" ref="treeContainer">
       <div :class="['tree-tooltip', tooltipAtBottom ? 'bottom' : '']" >
         <el-popover
           ref="tooltip"
-          :visible="tooltipVisible"
+          :visible="tooltipVisible && tooltipLabel !== ''"
           placement="top"
           :show-arrow="false"
           :teleported="false"
@@ -38,6 +47,7 @@
         :default-expanded-keys="expandedKeys"
         @check="checkChanged"
         :indent="8"
+        :filter-node-method="filterNode"
         :class="[mapType === 'flatmap' ? 'hide_grandchildren_checkbox': '']"
       >
         <template #default="{ node, data }">
@@ -138,10 +148,15 @@ export default {
       type: [String, Array],
       required: true,
     },
+    enableFilter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
       defaultExpandedKeys: ["All"],
+      filterText: "",
       myPopperClass: "hide-scaffold-colour-popup",
       tooltipVisible: false,
       tooltipLabel: "",
@@ -178,8 +193,17 @@ export default {
         else this.myPopperClass = "hide-scaffold-colour-popup";
       },
     },
+    filterText: {
+      handler: function (value) {
+        if (this.$refs.regionTree) this.$refs.regionTree.filter(value);
+      },
+    },
   },
   methods: {
+    filterNode: function(value, data) {
+      if (!value) return true;
+      return data.label ? data.label.toLowerCase().includes(value.toLowerCase()) : false;
+    },
     setColour: function (nodeData, value) {
       this.$emit("setColour", nodeData, value);
     },
@@ -250,6 +274,9 @@ export default {
   unmounted: function () {
     this.sortedPrimitiveGroups = undefined;
   },
+  mounted: function() {
+    if (this.$refs.regionTree) this.$refs.regionTree.filter(this.filterText);
+  }
 };
 </script>
 
@@ -265,6 +292,7 @@ export default {
 }
 
 .selections-container {
+  width: 260px;
   padding-top: 5px;
 }
 
@@ -278,6 +306,15 @@ export default {
   margin-left: 8px;
 }
 
+:deep(.tree-filter-input) {
+  .el-input__inner {
+      height: 20px;
+    }
+  .el-input__wrapper.is-focus{
+    box-shadow: 0 0 0 1px $app-primary-color;
+  }
+}
+
 .tree-container {
   width: 260px;
   border: 1px solid rgb(144, 147, 153);

package/src/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElIconAim: typeof import('@element-plus/icons-vue')['Aim']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
@@ -25,7 +26,11 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
+    ElIconLock: typeof import('@element-plus/icons-vue')['Lock']
+    ElIconUnlock: typeof import('@element-plus/icons-vue')['Unlock']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconZoomIn: typeof import('@element-plus/icons-vue')['ZoomIn']
+    ElIconZoomOut: typeof import('@element-plus/icons-vue')['ZoomOut']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']