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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.1.3-beta.1",
+  "version": "1.2.0-beta.0",
   "files": [
     "dist/*",
     "src/*",
@@ -31,7 +31,6 @@
   "dependencies": {
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
-    "cytoscape": "^3.30.2",
     "element-plus": "2.8.4",
     "mitt": "^3.0.1",
     "vue": "^3.4.21"

package/src/App.vue

@@ -26,6 +26,7 @@ const hoverVisibilities = [
   { value: false, refs: "toolbarPopover", ref: "polygonPopover" },
   { value: false, refs: "toolbarPopover", ref: "connectionPopover" },
 ];
+const filterText = ref("")
 const isFlatmap = ref(true);
 const appRef = ref(null);
 const newlyDrawnEntry = ref({});
@@ -38,7 +39,6 @@ const drawnTypes = [
   { value: "Polygon", label: "Polygon" },
   { value: "None", label: "None" },
 ];
-const showConnectivityGraph = ref(false);
 
 onMounted(() => {
   console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
@@ -423,25 +423,6 @@ function changeHover(value) {
         </el-button>
       </el-col>
     </el-row>
-    <el-row>
-      <el-col>
-        <h3>Connectivity Graph</h3>
-      </el-col>
-      <el-col>
-        <el-button
-          @click="showConnectivityGraph = true"
-          size="small"
-        >
-          Show connectivity graph
-        </el-button>
-        <el-button
-          @click="showConnectivityGraph = false"
-          size="small"
-        >
-          Hide connectivity graph
-        </el-button>
-      </el-col>
-    </el-row>
 
     <DrawToolbar
       v-show="isFlatmap"
@@ -487,6 +468,11 @@ function changeHover(value) {
       @annotation="commitAnnotationEvent"
       @onActionClick="onActionClick"
     />
+    <el-input
+      v-model="filterText"
+      style="width: 240px"
+      placeholder="Filter keyword"
+    />
     <TreeControls
       v-show="mapType === 'flatmap'"
       mapType="flatmap"
@@ -498,6 +484,7 @@ function changeHover(value) {
       @checkChanged="checkChanged"
       @changeActive="changeActive"
       @changeHover="changeHover"
+      :filterText="filterText"
     />
     <TreeControls
       v-show="mapType === 'scaffold'"
@@ -510,11 +497,7 @@ function changeHover(value) {
       :showColourPicker="true"
       @setColour="setColour"
       @checkChanged="checkChanged"
-    />
-    <ConnectivityGraph
-      v-if="showConnectivityGraph"
-      entry="ilxtr:neuron-type-aacar-13"
-      map-server="https://mapcore-demo.org/curation/flatmap/"
+      :filterText="filterText"
     />
   </div>
 </template>
@@ -533,9 +516,4 @@ function changeHover(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
-.connectivity-graph {
-  width: 600px;
-  height: 600px;
-  margin-top: 1rem;
-}
 </style>

package/src/components/TreeControls/TreeControls.vue

@@ -11,7 +11,7 @@
       <div :class="['tree-tooltip', tooltipAtBottom ? 'bottom' : '']" >
         <el-popover
           ref="tooltip"
-          :visible="tooltipVisible"
+          :visible="tooltipVisible && tooltipLabel !== ''"
           placement="top"
           :show-arrow="false"
           :teleported="false"
@@ -38,6 +38,7 @@
         :default-expanded-keys="expandedKeys"
         @check="checkChanged"
         :indent="8"
+        :filter-node-method="filterNode"
         :class="[mapType === 'flatmap' ? 'hide_grandchildren_checkbox': '']"
       >
         <template #default="{ node, data }">
@@ -94,6 +95,10 @@
 export default {
   name: "TreeControls",
   props: {
+    filterText: {
+      type: String,
+      default: "",
+    },
     /**
      * The type of map that the TreeControls is used. Either "flatmap" or "scaffold".
      */
@@ -178,8 +183,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) : false;
+    },
     setColour: function (nodeData, value) {
       this.$emit("setColour", nodeData, value);
     },
@@ -250,6 +264,9 @@ export default {
   unmounted: function () {
     this.sortedPrimitiveGroups = undefined;
   },
+  mounted: function() {
+    if (this.$refs.regionTree) this.$refs.regionTree.filter(this.filterText);
+  }
 };
 </script>
 

package/src/components/index.js

@@ -3,13 +3,5 @@ import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
 import Tooltip from "./Tooltip/Tooltip.vue";
 import TreeControls from "./TreeControls/TreeControls.vue";
 import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
-import ConnectivityGraph from "./ConnectivityGraph/ConnectivityGraph.vue";
 
-export {
-  DrawToolbar,
-  HelpModeDialog,
-  Tooltip,
-  TreeControls,
-  CopyToClipboard,
-  ConnectivityGraph,
-};
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls, CopyToClipboard };

package/src/components.d.ts

@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
-    ConnectivityGraph: typeof import('./components/ConnectivityGraph/ConnectivityGraph.vue')['default']
     CopyToClipboard: typeof import('./components/CopyToClipboard/CopyToClipboard.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,230 +0,0 @@
-<template>
-  <div class="connectivity-graph">
-    <div ref="graphCanvas" class="graph-canvas"></div>
-    <div class="node-key">
-      <div class="key-head">Node type:</div>
-      <div>
-        <div><span>Node:</span><span class="key-box" style="background: #80F0F0"/></div>
-        <div><span>Axon:</span><span class="key-box" style="background: green"/></div>
-        <div><span>Dendrite:</span><span class="key-box" style="background: red"/></div>
-        <div><span>Both:</span><span class="key-box" style="background: gray"/></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ConnectivityGraph } from './graph';
-
-const MIN_SCHEMA_VERSION = 1.3;
-
-export default {
-  name: 'ConnectivityGraph',
-  props: {
-    /**
-     * Entity to load its connectivity graph.
-     */
-    entry: {
-      type: String,
-      default: '',
-    },
-    mapServer: {
-      type: String,
-      default: '',
-    },
-  },
-  data: function () {
-    return {
-      cy: null,
-      connectivityGraph: null,
-      knowledgeByPath: new Map(),
-      labelledTerms: new Set(),
-      labelCache: new Map(),
-    };
-  },
-  mounted() {
-    this.run().then((res) => {
-      this.showGraph(this.entry);
-    });
-  },
-  methods: {
-    run: async function () {
-      const schemaVersion = await this.getSchemaVersion();
-      if (schemaVersion < MIN_SCHEMA_VERSION) {
-        console.warn('No Server!');
-        return;
-      }
-      this.showSpinner();
-      const selectedSource = await this.setSourceList();
-      await this.setPathList(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
-    },
-    query: async function (sql, params) {
-      const url = `${this.mapServer}knowledge/query/`;
-      const query = { sql, params }
-      try {
-        const response = await fetch(url, {
-          method: 'POST',
-          headers: {
-            "Accept": "application/json; charset=utf-8",
-            "Cache-Control": "no-store",
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify(query)
-        });
-        if (!response.ok) {
-          throw new Error(`Cannot access ${url}`);
-        }
-        return await response.json();
-      } catch {
-        return {
-          values: []
-        };
-      }
-    },
-    setSourceList: async function () {
-      const data = await this.getJsonData(`${this.mapServer}knowledge/sources`);
-      const sources = data ? (data.sources || []) : [];
-
-      // 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;
-    },
-    setPathList: async function (source) {
-      const data = await this.query(
-        `select entity, knowledge from knowledge
-          where entity like 'ilxtr:%' and source=?
-          order by entity`,
-        [source]);
-      const pathList = [];
-      this.knowledgeByPath.clear();
-      this.labelledTerms = new Set();
-      for (const [key, jsonKnowledge] of data.values) {
-        const knowledge = JSON.parse(jsonKnowledge);
-        if ('connectivity' in knowledge) {
-          const label = knowledge.label || key;
-          const shortLabel = (label === key.slice(6).replace('-prime', "'").replaceAll('-', ' '))
-                              ? ''
-                              : (label.length < 50) ? label : `${label.slice(0, 50)}...`;
-          pathList.push(key);
-          this.knowledgeByPath.set(key, knowledge);
-          this.cacheLabels(knowledge);
-        }
-      }
-      await this.getCachedTermLabels();
-      return '';
-    },
-    getSchemaVersion: async function () {
-      const data = await this.getJsonData(`${this.mapServer}knowledge/schema-version`);
-      return data ? (+data.version || 0) : 0;
-    },
-    getJsonData: async function (url) {
-      try {
-        const response = await fetch(url, {
-          method: 'GET',
-          headers: {
-            "Accept": "application/json; charset=utf-8",
-            "Cache-Control": "no-store",
-            "Content-Type": "application/json"
-          }
-        });
-        if (!response.ok) {
-          console.error(`Cannot access ${url}`);
-        }
-        return await response.json();
-      } catch {
-        return null;
-      }
-    },
-    getCachedTermLabels: async function () {
-      if (this.labelledTerms.size) {
-        const termLabels = await this.query(`
-          select entity, label from labels
-          where entity in (?${', ?'.repeat(this.labelledTerms.size-1)})`,
-          [...this.labelledTerms.values()]
-        );
-        for (const termLabel of termLabels.values) {
-          this.labelCache.set(termLabel[0], termLabel[1]);
-        }
-      }
-    },
-    cacheNodeLabels: function (node) {
-      for (const term of [node[0], ...node[1]]) {
-        this.labelledTerms.add(term);
-      }
-    },
-    cacheLabels: async function (knowledge) {
-      for (const edge of knowledge.connectivity) {
-        this.cacheNodeLabels(edge[0]);
-        this.cacheNodeLabels(edge[1]);
-      }
-    },
-    showSpinner: function () {
-      // show loading spinner
-    },
-    hideSpinner: function () {
-      // hide loading spinner
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.connectivity-graph,
-.graph-canvas {
-  width: 100%;
-  height: 600px;
-  background-color: white;
-  position: relative;
-}
-
-.connectivity-graph {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-}
-
-.node-key {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  border: 1px solid $app-primary-color;
-  padding: 4px;
-  background-color: rgba(240, 240, 240, 0.8);
-
-  div div {
-    width: 90px;
-  }
-}
-
-.key-head {
-  text-align: center;
-  font-weight: bold;
-  border-bottom: 1px solid gray;
-  padding-bottom: 4px;
-  margin-bottom: 4px;
-}
-
-.key-box {
-  float: right;
-  width: 12px;
-  height: 12px;
-}
-</style>

package/src/components/ConnectivityGraph/graph.js

@@ -1,249 +0,0 @@
-/*==============================================================================
-
-A viewer for neuron connectivity graphs.
-
-Copyright (c) 2019 - 2024  David Brooks
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-==============================================================================*/
-
-import cytoscape from 'cytoscape'
-
-//==============================================================================
-
-
-//==============================================================================
-
-export class ConnectivityGraph
-{
-    cy = null
-    nodes = []
-    edges = []
-    axons = []
-    dendrites = []
-    labelCache = new Map()
-    graphCanvas = null
-
-    constructor(labelCache, graphCanvas)
-    {
-      this.labelCache = labelCache;
-      this.graphCanvas = graphCanvas;
-    }
-
-    async addConnectivity(knowledge)
-    //=====================================================
-    {
-        this.axons = knowledge.axons.map(node => JSON.stringify(node))
-        this.dendrites = knowledge.dendrites.map(node => JSON.stringify(node))
-        if (knowledge.connectivity.length) {
-            for (const edge of knowledge.connectivity) {
-                const e0 = await this.graphNode(edge[0])
-                const e1 = await this.graphNode(edge[1])
-                this.nodes.push(e0)
-                this.nodes.push(e1)
-                this.edges.push({
-                    id: `${e0.id}_${e1.id}`,
-                    source: e0.id,
-                    target: e1.id
-                })
-            }
-        } else {
-            this.nodes.push({
-                id: 'MISSING',
-                label: 'NO PATHS'
-            })
-        }
-    }
-
-    showConnectivity(graphCanvas)
-    //================
-    {
-        this.cy = new CytoscapeGraph(this, graphCanvas)
-    }
-
-    clearConnectivity()
-    //=================
-    {
-        if (this.cy) {
-            this.cy.remove()
-            this.cy = null
-        }
-    }
-
-    get elements()
-    //============
-    {
-        return [
-            ...this.nodes.map(n => { return {data: n}}),
-            ...this.edges.map(e => { return {data: e}})
-        ]
-    }
-
-    get roots()
-    //===================
-    {
-        return this.dendrites
-    }
-
-    async graphNode(node)
-    //=======================================================
-    {
-        const id = JSON.stringify(node)
-        const label = [node[0], ...node[1]]
-        const humanLabels = []
-        for (const term of label) {
-            const humanLabel = this.labelCache.has(term) ? this.labelCache.get(term) : ''
-            humanLabels.push(humanLabel)
-        }
-        label.push(...humanLabels)
-
-        const result = {
-            id,
-            label: label.join('\n')
-        }
-        if (this.axons.includes(id)) {
-            if (this.dendrites.includes(id)) {
-                result['both-a-d'] = true
-            } else {
-                result['axon'] = true
-            }
-        } else if (this.dendrites.includes(id)) {
-            result['dendrite'] = true
-
-        }
-        return result
-    }
-}
-
-//==============================================================================
-
-const GRAPH_STYLE = [
-    {
-        'selector': 'node',
-        'style': {
-            'label': 'data(label)',
-            'background-color': '#80F0F0',
-            'text-valign': 'center',
-            'text-wrap': 'wrap',
-            'text-max-width': '80px',
-            'font-size': '6px'
-        }
-    },
-    {
-        'selector': 'node[axon]',
-        'style': {
-            'background-color': 'green'
-        }
-    },
-    {
-        'selector': 'node[dendrite]',
-        'style': {
-            'background-color': 'red'
-        }
-    },
-    {
-        'selector': 'node[both-a-d]',
-        'style': {
-            'background-color': 'gray'
-        }
-    },
-    {
-        'selector': 'edge',
-        'style': {
-            'width': 2,
-            'line-color': '#9dbaea',
-            'target-arrow-color': '#9dbaea',
-            'target-arrow-shape': 'triangle',
-            'curve-style': 'bezier'
-        }
-    }
-]
-
-//==============================================================================
-
-class CytoscapeGraph
-{
-    cy
-    tooltip
-
-    constructor(connectivityGraph, graphCanvas)
-    {
-        // const graphCanvas = document.getElementById('graph-canvas')
-        this.cy = cytoscape({
-            container: graphCanvas,
-            elements: connectivityGraph.elements,
-            layout: {
-                name: 'breadthfirst',
-                circle: false,
-                roots: connectivityGraph.roots
-            },
-            directed: true,
-            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))
-
-        this.tooltip = document.createElement('div')
-        this.tooltip.id = 'tooltip'
-        this.tooltip.hidden = true
-        this.graphCanvas?.lastChild?.appendChild(this.tooltip)
-    }
-
-    remove()
-    //======
-    {
-        if (this.cy) {
-            this.cy.destroy()
-        }
-    }
-
-    checkRightBoundary(leftPos)
-    //==================================
-    {
-        if ((leftPos + this.tooltip.offsetWidth) >= this.tooltip.parentElement?.offsetWidth) {
-            this.tooltip.style.left = `${leftPos - this.tooltip.offsetWidth}px`
-        }
-    }
-
-    overNode(event)
-    //==============
-    {
-        const node = event.target
-        this.tooltip.innerText = node.data().label
-        this.tooltip.style.left = `${event.renderedPosition.x}px`
-        this.tooltip.style.top = `${event.renderedPosition.y}px`
-        this.tooltip.hidden = false
-        this.checkRightBoundary(event.renderedPosition.x)
-    }
-
-    moveNode(event)
-    //==============
-    {
-        const node = event.target
-        this.tooltip.style.left = `${node.renderedPosition().x}px`
-        this.tooltip.style.top = `${node.renderedPosition().y}px`
-        this.checkRightBoundary(node.renderedPosition().x)
-    }
-
-    exitNode(event)
-    //==============
-    {
-        this.tooltip.hidden = true
-    }
-}
-
-//==============================================================================