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

package/package.json

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

package/src/App.vue

@@ -38,6 +38,7 @@ const drawnTypes = [
   { value: "Polygon", label: "Polygon" },
   { value: "None", label: "None" },
 ];
+const showConnectivityGraph = ref(false);
 
 onMounted(() => {
   console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
@@ -422,6 +423,25 @@ 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"
@@ -491,6 +511,11 @@ function changeHover(value) {
       @setColour="setColour"
       @checkChanged="checkChanged"
     />
+    <ConnectivityGraph
+      v-if="showConnectivityGraph"
+      entry="ilxtr:neuron-type-aacar-13"
+      map-server="https://mapcore-demo.org/curation/flatmap/"
+    />
   </div>
 </template>
 
@@ -508,4 +533,9 @@ function changeHover(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
+.connectivity-graph {
+  width: 600px;
+  height: 600px;
+  margin-top: 1rem;
+}
 </style>

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,13 +1,56 @@
 <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 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',
@@ -40,6 +87,10 @@ export default {
       knowledgeByPath: new Map(),
       labelledTerms: new Set(),
       labelCache: new Map(),
+      resetLabel: RESET_LABEL,
+      zoomLockLabel: ZOOM_LOCK_LABEL,
+      iconColor: APP_PRIMARY_COLOR,
+      zoomEnabled: false,
     };
   },
   mounted() {
@@ -106,7 +157,6 @@ export default {
           }
         }
       }
-      // this.#sourceSelector.innerHTML = sourceList.join('')
       return firstSource;
     },
     setPathList: async function (source) {
@@ -184,6 +234,17 @@ export default {
     hideSpinner: function () {
       // hide loading spinner
     },
+    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);
+    },
   },
 };
 </script>
@@ -202,10 +263,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);
@@ -228,4 +292,57 @@ export default {
   width: 12px;
   height: 12px;
 }
+
+.tools {
+  margin-top: 1rem;
+  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;
+
+  &,
+  &: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

@@ -81,6 +81,22 @@ export class ConnectivityGraph
         }
     }
 
+    reset()
+    //=================
+    {
+        if (this.cy?.cy) {
+            this.cy.cy.reset()
+        }
+    }
+
+    enableZoom(option)
+    //=================
+    {
+        if (this.cy?.cy) {
+            this.cy.cy.userZoomingEnabled(option)
+        }
+    }
+
     get elements()
     //============
     {
@@ -189,7 +205,10 @@ 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))

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']