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

package/package.json

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

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,13 +1,56 @@
 <template>
-  <div class="connectivity-graph">
+  <div class="connectivity-graph" v-loading="loading">
     <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 class="control-panel">
+      <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 class="tools">
+        <el-tooltip
+          :content="resetLabel"
+          placement="bottom"
+          effect="control-tooltip"
+        >
+          <el-button
+            class="control-button"
+            :class="theme"
+            size="small"
+            @click="reset"
+          >
+            <el-icon color="white">
+              <el-icon-aim />
+            </el-icon>
+            <span class="visually-hidden">{{ resetLabel }}</span>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          :content="zoomLockLabel"
+          placement="bottom"
+          effect="control-tooltip"
+        >
+          <el-button
+            class="control-button"
+            :class="theme"
+            size="small"
+            @click="toggleZoom"
+          >
+            <el-icon color="white">
+              <template v-if="zoomEnabled">
+                <el-icon-lock />
+              </template>
+              <template v-else>
+                <el-icon-unlock />
+              </template>
+            </el-icon>
+            <span class="visually-hidden">{{ zoomLockLabel }}</span>
+          </el-button>
+        </el-tooltip>
       </div>
     </div>
   </div>
@@ -17,6 +60,10 @@
 import { ConnectivityGraph } from './graph';
 
 const MIN_SCHEMA_VERSION = 1.3;
+const RESET_LABEL = 'Reset position';
+const ZOOM_LOCK_LABEL = 'Lock zoom (to scroll)';
+const ZOOM_UNLOCK_LABEL = 'Unlock zoom';
+const APP_PRIMARY_COLOR = '#8300bf';
 
 export default {
   name: 'ConnectivityGraph',
@@ -35,28 +82,62 @@ export default {
   },
   data: function () {
     return {
-      cy: null,
+      loading: true,
       connectivityGraph: null,
+      selectedSource: '',
+      pathList: [],
+      schemaVersion: '',
       knowledgeByPath: new Map(),
       labelledTerms: new Set(),
       labelCache: new Map(),
+      resetLabel: RESET_LABEL,
+      zoomLockLabel: ZOOM_LOCK_LABEL,
+      iconColor: APP_PRIMARY_COLOR,
+      zoomEnabled: false,
     };
   },
   mounted() {
+    this.loadCacheData();
     this.run().then((res) => {
       this.showGraph(this.entry);
     });
   },
   methods: {
+    loadCacheData: function () {
+      const selectedSource = sessionStorage.getItem('connectivity-graph-source');
+      const labelCache = sessionStorage.getItem('connectivity-graph-labels');
+      const pathList = sessionStorage.getItem('connectivity-graph-pathlist');
+      const schemaVersion = sessionStorage.getItem('connectivity-graph-schema-version');
+
+      if (selectedSource) {
+        this.selectedSource = selectedSource;
+      }
+      if (pathList) {
+        this.pathList = JSON.parse(pathList);
+      }
+      if (labelCache) {
+        const labelCacheObj = JSON.parse(labelCache);
+        this.labelCache = new Map(Object.entries(labelCacheObj));
+      }
+      if (schemaVersion) {
+        this.schemaVersion = schemaVersion;
+      }
+    },
     run: async function () {
-      const schemaVersion = await this.getSchemaVersion();
-      if (schemaVersion < MIN_SCHEMA_VERSION) {
+      if (!this.schemaVersion) {
+        this.schemaVersion = await this.getSchemaVersion();
+        sessionStorage.setItem('connectivity-graph-schema-version', this.schemaVersion);
+      }
+      if (this.schemaVersion < MIN_SCHEMA_VERSION) {
         console.warn('No Server!');
         return;
       }
       this.showSpinner();
-      const selectedSource = await this.setSourceList();
-      await this.setPathList(selectedSource)
+      if (!this.selectedSource) {
+        this.selectedSource = await this.setSourceList();
+        sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
+      }
+      await this.setPathList(this.selectedSource)
       this.hideSpinner();
     },
     showGraph: async function (neuronPath) {
@@ -108,28 +189,33 @@ export default {
       }
       return firstSource;
     },
-    setPathList: async function (source) {
+    loadPathData: 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 = [];
+      const pathList = data ? data.values : [];
+      return pathList;
+    },
+    setPathList: async function (source) {
+      if (!this.pathList.length) {
+        this.pathList = await this.loadPathData(source);
+        sessionStorage.setItem('connectivity-graph-pathlist', JSON.stringify(this.pathList));
+      }
       this.knowledgeByPath.clear();
       this.labelledTerms = new Set();
-      for (const [key, jsonKnowledge] of data.values) {
+      for (const [key, jsonKnowledge] of this.pathList) {
         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();
+
+      if (!this.labelCache.size) {
+        await this.getCachedTermLabels();
+      }
       return '';
     },
     getSchemaVersion: async function () {
@@ -156,14 +242,16 @@ export default {
     },
     getCachedTermLabels: async function () {
       if (this.labelledTerms.size) {
-        const termLabels = await this.query(`
+        const data = 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) {
+        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));
       }
     },
     cacheNodeLabels: function (node) {
@@ -178,10 +266,21 @@ export default {
       }
     },
     showSpinner: function () {
-      // show loading spinner
+      this.loading = true;
     },
     hideSpinner: function () {
-      // hide loading spinner
+      this.loading = false;
+    },
+    reset: function () {
+      this.connectivityGraph.reset();
+    },
+    /**
+     * Enable/disable user zoom for scrolling
+     */
+    toggleZoom: function () {
+      this.zoomEnabled = !this.zoomEnabled;
+      this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
+      this.connectivityGraph.enableZoom(!this.zoomEnabled);
     },
   },
 };
@@ -201,10 +300,13 @@ export default {
   border: solid 1px #e4e7ed;
 }
 
-.node-key {
+.control-panel {
   position: absolute;
   top: 1rem;
   right: 1rem;
+}
+
+.node-key {
   border: 1px solid $app-primary-color;
   padding: 4px;
   background-color: rgba(240, 240, 240, 0.8);
@@ -227,4 +329,61 @@ export default {
   width: 12px;
   height: 12px;
 }
+
+.tools {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.control-button {
+  margin: 0 !important;
+  padding: 0.25rem !important;
+  font-size: 14px !important;
+  border-color: $app-primary-color !important;
+  background: $app-primary-color !important;
+  transition: all 0.25s ease;
+
+  svg {
+    margin: 0;
+  }
+
+  &,
+  &:focus,
+  &:active {
+    box-shadow: none !important;
+  }
+
+  &:hover {
+    background: $lightPurple !important;
+  }
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+</style>
+
+<style lang="scss">
+  .el-popper.is-control-tooltip {
+    padding: 4px 10px;
+    font-family: Asap;
+    background: #f3ecf6 !important;
+    border: 1px solid $app-primary-color;
+
+    & .el-popper__arrow::before {
+      border: 1px solid;
+      border-color: $app-primary-color;
+      background: #f3ecf6;
+    }
+  }
 </style>

package/src/components/ConnectivityGraph/graph.js

@@ -27,7 +27,7 @@ import cytoscape from 'cytoscape'
 
 export class ConnectivityGraph
 {
-    cy = null
+    cyg = null
     nodes = []
     edges = []
     axons = []
@@ -69,15 +69,31 @@ export class ConnectivityGraph
     showConnectivity(graphCanvas)
     //================
     {
-        this.cy = new CytoscapeGraph(this, graphCanvas)
+        this.cyg = new CytoscapeGraph(this, graphCanvas)
     }
 
     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()
+        }
+    }
+
+    enableZoom(option)
+    //=================
+    {
+        if (this.cyg?.cy) {
+            this.cyg.cy.userZoomingEnabled(option)
         }
     }
 
@@ -179,7 +195,6 @@ class CytoscapeGraph
 
     constructor(connectivityGraph, graphCanvas)
     {
-        // const graphCanvas = document.getElementById('graph-canvas')
         this.cy = cytoscape({
             container: graphCanvas,
             elements: connectivityGraph.elements,

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,6 +26,8 @@ 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']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']