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

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -0,0 +1,231 @@
+<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;
+          }
+        }
+      }
+      // this.#sourceSelector.innerHTML = sourceList.join('')
+      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

@@ -0,0 +1,246 @@
+/*==============================================================================
+
+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
+        }).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
+    }
+}
+
+//==============================================================================

package/src/components/index.js

@@ -3,5 +3,13 @@ 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 };
+export {
+  DrawToolbar,
+  HelpModeDialog,
+  Tooltip,
+  TreeControls,
+  CopyToClipboard,
+  ConnectivityGraph,
+};

package/src/components.d.ts

@@ -9,6 +9,7 @@ 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']