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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.1.3-beta.4",
+  "version": "1.2.0-beta.1",
   "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

@@ -38,7 +38,6 @@ const drawnTypes = [
   { value: "Polygon", label: "Polygon" },
   { value: "None", label: "None" },
 ];
-const showConnectivityGraph = ref(false);
 
 onMounted(() => {
   console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
@@ -423,25 +422,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"
@@ -511,11 +491,6 @@ 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>
 
@@ -533,13 +508,4 @@ function changeHover(value) {
   top: calc(50% - 100px);
   left: calc(50% - 200px);
 }
-.toolbar-container {
-  height: 80px;
-  position: relative;
-}
-.connectivity-graph {
-  width: 600px;
-  height: 600px;
-  margin-top: 1rem;
-}
 </style>

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) : 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/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']
@@ -18,7 +17,6 @@ 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']
@@ -26,8 +24,6 @@ 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']

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,451 +0,0 @@
-<template>
-  <div class="connectivity-graph" v-loading="loading">
-    <div ref="graphCanvas" class="graph-canvas"></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>
-</template>
-
-<script>
-import { ConnectivityGraph } from './graph';
-
-const MIN_SCHEMA_VERSION = 1.3;
-const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
-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',
-  props: {
-    /**
-     * Entity to load its connectivity graph.
-     */
-    entry: {
-      type: String,
-      default: '',
-    },
-    mapServer: {
-      type: String,
-      default: '',
-    },
-  },
-  data: function () {
-    return {
-      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.refreshCache();
-    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;
-      }
-    },
-    removeAllCacheData: function () {
-      const keys = [
-        'connectivity-graph-expiry',
-        'connectivity-graph-source',
-        'connectivity-graph-labels',
-        'connectivity-graph-pathlist',
-        'connectivity-graph-schema-version',
-      ];
-      keys.forEach((key) => {
-        sessionStorage.removeItem(key);
-      });
-    },
-    refreshCache: function () {
-      const expiry = sessionStorage.getItem('connectivity-graph-expiry');
-      const now = new Date();
-
-      if (now.getTime() > expiry) {
-        this.removeAllCacheData();
-      }
-    },
-    updateCacheExpiry: function () {
-      const now = new Date();
-      const expiry = now.getTime() + CACHE_LIFETIME;
-
-      sessionStorage.setItem('connectivity-graph-expiry', expiry);
-    },
-    run: async function () {
-      if (!this.schemaVersion) {
-        this.schemaVersion = await this.getSchemaVersion();
-        sessionStorage.setItem('connectivity-graph-schema-version', this.schemaVersion);
-        this.updateCacheExpiry();
-      }
-      if (this.schemaVersion < MIN_SCHEMA_VERSION) {
-        console.warn('No Server!');
-        return;
-      }
-      this.showSpinner();
-      if (!this.selectedSource) {
-        this.selectedSource = await this.setSourceList();
-        sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
-        this.updateCacheExpiry();
-      }
-      await this.setPathList(this.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);
-    },
-    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;
-    },
-    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 = 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.updateCacheExpiry();
-      }
-
-      this.knowledgeByPath.clear();
-      this.labelledTerms = new Set();
-
-      for (const [key, jsonKnowledge] of this.pathList) {
-        const knowledge = JSON.parse(jsonKnowledge);
-        if ('connectivity' in knowledge) {
-          this.knowledgeByPath.set(key, knowledge);
-          this.cacheLabels(knowledge);
-        }
-      }
-
-      if (!this.labelCache.size) {
-        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 data = await this.query(`
-          select entity, label from labels
-          where entity in (?${', ?'.repeat(this.labelledTerms.size-1)})`,
-          [...this.labelledTerms.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));
-        this.updateCacheExpiry();
-      }
-    },
-    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 () {
-      this.loading = true;
-    },
-    hideSpinner: function () {
-      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);
-    },
-  },
-};
-</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;
-}
-
-.control-panel {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-}
-
-.node-key {
-  border: 1px solid $app-primary-color;
-  padding: 4px;
-  background-color: rgba(#f7faff, 0.85);
-
-  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;
-}
-
-.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;
-  }
-}
-
-:deep(.cy-graph-tooltip) {
-  padding: 4px 10px;
-  font-family: Asap;
-  font-size: 12px;
-  background: #f3ecf6 !important;
-  border: 1px solid $app-primary-color;
-  border-radius: var(--el-border-radius-base);
-  position: relative;
-  top: 0;
-  left: 0;
-  width: fit-content;
-  z-index: 1;
-}
-
-.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>