@abi-software/mapintegratedvuer 1.19.1 → 1.20.1

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.19.1",
+  "version": "1.20.1",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "serve": "vite --host --force",
     "heroku-postbuild": "vite build",
@@ -52,14 +55,14 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.13.4",
-    "@abi-software/map-side-bar": "^2.15.1",
-    "@abi-software/map-utilities": "1.8.3",
-    "@abi-software/plotvuer": "1.0.7",
-    "@abi-software/scaffoldvuer": "1.17.0",
-    "@abi-software/simulationvuer": "3.2.6",
+    "@abi-software/flatmapvuer": "^1.14.1",
+    "@abi-software/map-side-bar": "2.16.0",
+    "@abi-software/map-utilities": "1.9.0",
+    "@abi-software/plotvuer": "1.1.0",
+    "@abi-software/scaffoldvuer": "1.18.0",
+    "@abi-software/simulationvuer": "3.3.0",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@abi-software/svg-sprite": "1.0.4",
+    "@abi-software/svg-sprite": "1.1.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue": "^4.6.2",
     "css-element-queries": "^1.2.3",
@@ -106,7 +109,10 @@
     "vue-router": "^4.2.5"
   },
   "optionalDependencies": {
-    "@esbuild/darwin-arm64": "^0.25.3"
+    "@esbuild/darwin-arm64": "^0.25.3",
+    "@rollup/rollup-darwin-arm64": "4.62.3",
+    "@rollup/rollup-linux-x64-gnu": "4.62.3",
+    "@rollup/rollup-win32-x64-msvc": "4.62.3"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -4,34 +4,46 @@
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
       <div class="button-container">
         <el-popover
+          ref="optionsPopover"
           placement="bottom"
           trigger="click"
           width=500
           class="popover"
           :teleported=false
-          >
-            <div class="options-container">
-              <div class="row">
-                <el-button @click="saveSettings()" size="small">Save Settings</el-button>
-                <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
-                <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </div>
-              <div class="row">
-                <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
-                <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
-                <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
-                <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
-                <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
-                <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
-                <el-button @click="setSearch()" size="small">Set Search</el-button>
-                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
-              </div>
+        >
+          <div class="options-container">
+            <div class="row">
+              <el-button @click="saveSettings()" size="small">Save Settings</el-button>
+              <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
+              <el-button @click="getShareableURL()" size="small">Get Link</el-button>
             </div>
-            <template #reference>
-
-                <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
-
-            </template>
+            <div class="row">
+              <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
+              <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
+              <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
+              <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
+              <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
+              <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
+              <el-button @click="setSearch()" size="small">Set Search</el-button>
+            </div>
+            <div class="row">
+              <div style="font-weight: 600">Connectivity tooltip labels:</div>
+            </div>
+            <div class="row">
+              <el-checkbox @change="onShowLongLabelChange" v-model="showLongLabel" size="small">
+                Show long label
+              </el-checkbox>
+              <el-checkbox @change="onTruncateLongLabelChange" :disabled="!showLongLabel" v-model="truncateLongLabel" size="small">
+                Truncate long label
+              </el-checkbox>
+              <el-checkbox @change="onShowIdInTooltipChange" :disabled="!showLongLabel" v-model="showIdInTooltip" size="small">
+                Show ID in tooltip
+              </el-checkbox>
+            </div>
+          </div>
+          <template #reference>
+            <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
+          </template>
         </el-popover>
       </div>
     <div class="map-app">
@@ -42,6 +54,8 @@
         :options="options"
         :state="state"
         :showLongLabel="showLongLabel"
+        :truncateLongLabel="truncateLongLabel"
+        :showIdInTooltip="showIdInTooltip"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -161,6 +175,8 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
+      truncateLongLabel: true,
+      showIdInTooltip: true,
     }
   },
   computed: {
@@ -182,6 +198,11 @@ export default {
     }
   },
   methods: {
+    closePopover: function() {
+      if (this.$refs.optionsPopover) {
+        this.$refs.optionsPopover.hide();
+      }
+    },
     changeViewingMode: function(modeName) {
       this.$refs.map.changeViewingMode(modeName);
     },
@@ -261,6 +282,7 @@ export default {
           label: "Functional"
         }
       );
+      this.closePopover();
     },
     setLegacyMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -270,6 +292,7 @@ export default {
           uuid: "01fedbf9-d783-509c-a10c-827941ab13da",
         }
       );
+      this.closePopover();
     },
     setMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -281,6 +304,7 @@ export default {
           organ: "UBERON:0018675"
         }
       );
+      this.closePopover();
     },
     setRatFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -289,6 +313,7 @@ export default {
           taxo: "NCBITaxon:10114"
         }
       );
+      this.closePopover();
     },
     setScaffold: function() {
       this.$refs.map.setCurrentEntry(
@@ -299,6 +324,7 @@ export default {
           viewUrl: "colonMouse_Layout1_view.json"
         }
       );
+      this.closePopover();
     },
     setWholebody: function() {
       this.$refs.map.setCurrentEntry(
@@ -308,12 +334,20 @@ export default {
           isBodyScaffold: true
         }
       );
+      this.closePopover();
     },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
+      this.closePopover();
+    },
+    onShowLongLabelChange: function() {
+      this.closePopover();
+    },
+    onTruncateLongLabelChange: function() {
+      this.closePopover();
     },
-    toggleLongLabel: function() {
-      this.showLongLabel = !this.showLongLabel;
+    onShowIdInTooltipChange: function() {
+      this.closePopover();
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)

package/src/components/MapContent.vue

@@ -20,6 +20,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
@@ -64,6 +65,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    truncateLongLabel: {
+      type: Boolean,
+      default: true,
+    },
+    showIdInTooltip: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The options include APIs and Keys.
      */
@@ -133,6 +142,8 @@ export default {
     return {
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
+      truncateLongLabel: computed(() => this.truncateLongLabel),
+      showIdInTooltip: computed(() => this.showIdInTooltip),
     };
   },
   data: function () {

package/src/components/SplitFlow.vue

@@ -30,7 +30,7 @@
           :connectivityKnowledge="connectivityKnowledge"
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
-          :showLongLabel="showLongLabel"
+          :showLongLabel="true"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -67,7 +67,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { provide, markRaw } from 'vue'
+import { provide, markRaw, computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import DialogToolbarContent from "./DialogToolbarContent.vue";
 import EventBus from "./EventBus";
@@ -141,12 +141,13 @@ export default {
     SplitDialog,
     SideBar,
   },
-  setup() {
+  setup(props) {
     const mainStore = useMainStore();
-    provide('userApiKey', mainStore.userToken);
     const settings = useSettingsStore();
     let annotator = markRaw(new AnnotationService(`${settings.flatmapAPI}annotator`));
-    provide('$annotator', annotator)
+    provide('userApiKey', mainStore.userToken);
+    provide('$annotator', annotator);
+    provide('showLongLabel', computed(() => props.showLongLabel));
     return { annotator }
   },
   props: {

package/src/components/viewers/CellDLViewer.vue

@@ -0,0 +1,37 @@
+<template>
+  <CellDLViewer
+    :annotations="annotations"
+    :celldlData="celldlData"
+    @error="onError"
+    @event="onEvent"
+  />
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import './cellDLViewer.css';
+import CellDLViewer from '@celldl/viewer';
+import ContentMixin from "../../mixins/ContentMixin";
+
+export default {
+  name: "CellDLView",
+  mixins: [ ContentMixin ],
+  components: {
+    CellDLViewer,
+  },
+  data: function() {
+    return {
+      annotations: {},
+      celldlData: '',
+    }
+  },
+  methods: {
+    onError: function() {
+      console.log(msg);
+    },
+    onEvent: function() {
+      console.log(detail);
+    }
+  }
+};
+</script>

package/src/components/viewers/Flatmap.vue

@@ -41,6 +41,7 @@
       @pathway-selection-changed="onPathwaySelectionChanged"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      :tooltipContentProvider="tooltipPathLabelProvider"
       @trackEvent="trackEvent"
     />
 
@@ -86,7 +87,7 @@ export default {
     },
     /**
      * Perform a local search on this contentvuer
-     * This is similar to directly clicking onthe map
+     * This is similar to directly clicking on the map
      */
     search: function (term) {
       return this.$refs.flatmap.searchAndShowResult(term, true, true);

package/src/components/viewers/MultiFlatmap.vue

@@ -42,6 +42,7 @@
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      :tooltipContentProvider="tooltipPathLabelProvider"
       @trackEvent="trackEvent"
     />
 

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    CellDLViewer: typeof import('./components/viewers/CellDLViewer.vue')['default']
     ConnectivityGraph: typeof import('./components/viewers/ConnectivityGraph.vue')['default']
     ContentBar: typeof import('./components/ContentBar.vue')['default']
     ContentVuer: typeof import('./components/ContentVuer.vue')['default']

package/src/mixins/ContentMixin.js

@@ -41,7 +41,23 @@ export default {
       default: false,
     },
   },
-  inject: ['showGlobalSettings', 'showOpenMapButton'],
+  inject: {
+    showGlobalSettings: {
+      default: true,
+    },
+    showOpenMapButton: {
+      default: true,
+    },
+    showLongLabel: {
+      default: true,
+    },
+    truncateLongLabel: {
+      default: true,
+    },
+    showIdInTooltip: {
+      default: true,
+    },
+  },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     idNamePair() {
@@ -65,11 +81,21 @@ export default {
     this.alive = false;
   },
   mounted: function () {
-    this.multiflatmapRef = markRaw(this.$refs.multiflatmap);
-    this.flatmapRef = markRaw(this.$refs.flatmap);
-    this.iframeRef = markRaw(this.$refs.iframe);
-    this.plotRef = markRaw(this.$refs.plot);
-    this.simulationRef = markRaw(this.$refs.simulation);
+    if (this.$refs.multiflatmap) {
+      this.multiflatmapRef = markRaw(this.$refs.multiflatmap);
+    }
+    if (this.$refs.flatmap) {
+      this.flatmapRef = markRaw(this.$refs.flatmap);
+    }
+    if (this.$refs.iframe) {
+      this.iframeRef = markRaw(this.$refs.iframe);
+    }
+    if (this.$refs.plot) {
+      this.plotRef = markRaw(this.$refs.plot);
+    }
+    if (this.$refs.simulation) {
+      this.simulationRef = markRaw(this.$refs.simulation);
+    }
     // load connectivity with mock human male flatmap
     if (this.iframeRef || this.plotRef || this.simulationRef) {
       this.loadExplorerConfig();
@@ -766,6 +792,70 @@ export default {
     trackEvent: function (data) {
       Tagging.sendEvent(data);
     },
+    /**
+     * Provides custom tooltip content for FlatmapVuer path features.
+     * Uses connectivity 'long-label' values for IDs starting with 'ilxtr:' or 'ilx:'.
+     * Returns null to use the default tooltip when long labels are disabled or unavailable.
+     */
+    tooltipPathLabelProvider: function (featureData) {
+      const showLong = this.showLongLabel?.value ?? this.showLongLabel;
+      if (!showLong) {
+        return null;
+      }
+
+      // Handle both single feature data object and array of feature data (multi-feature case)
+      const features = Array.isArray(featureData) ? featureData : [featureData];
+      const longLabels = [];
+      const uuid = features[0]?.mapUUID;
+      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
+
+      // Make features unique by it's id.
+      const uniqueFeatures = features.filter((feature, index, self) =>
+        index === self.findIndex((f) => f.id === feature.id)
+      );
+
+      for (const feature of uniqueFeatures) {
+        const featureId = feature?.id;
+        // Only applies to path features
+        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+          continue;
+        }
+        // Look up long-label from the connectivity store
+        if (connectivities) {
+          const match = connectivities.find(c => c.id === featureId);
+          const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
+          const lineClamp = 3;
+          const withIdStyles = [
+            `margin-bottom: 4px`,
+          ];
+          const truncateStyles = [
+            `display: -webkit-box`,
+            `-webkit-line-clamp: ${lineClamp}`,
+            `-webkit-box-orient: vertical`,
+            `overflow: hidden`,
+          ];
+          const styles = [
+            ...(this.showIdInTooltip ? withIdStyles : []),
+            ...(truncate ? truncateStyles : [])
+          ].join(';');
+
+          if (match && match['long-label']) {
+            let labelTag = []
+            labelTag.push(`<div style="${styles}">${capitalise(match['long-label'])}</div>`);
+            if (this.showIdInTooltip) {
+              labelTag.push(`<span class="id-tag">${featureId}</span>`);
+            }
+            longLabels.push(labelTag.join(''));
+          }
+        }
+      }
+
+      if (longLabels.length > 0) {
+        return `<div class='flatmap-feature-label flatmap-connectivity-label'>${longLabels.join('<hr/>')}</div>`;
+      }
+
+      return null; // Use default tooltip
+    },
   },
   data: function () {
     return {

package/src/services/knowledgeMapping.js

@@ -0,0 +1,77 @@
+const knowledgeMap = {
+  "classes": {
+    "cardio_28": {
+      "models": "UBERON:0002165",
+      "name": "Endocardium"
+    },
+    "cardio_29": {
+      "models": "UBERON:0002349",
+      "name": "Myocardium"
+    }
+  },
+  "features": {
+    "v_GLUT2_basal": {
+      "name": "Flow through GLUT2 transporter",
+      "variable": "main/v_GLUT2base"
+    },
+    "v_SGLT1_apical": {
+      "name": "SGLT1 transporter",
+      "variable": "main/v_SGLT1"
+    },
+    "v_Kir_basal": {
+      "name": "Kir channel",
+      "models": "UBERON:0001536",
+      "variable": "main/v_Kir"
+    },
+    "v_NKA_basal": {
+      "name": "Na/K ATPase",
+      "variable": "main/v_NKA"
+    },
+    "v_GLUT2_apical": {
+      "name": "GLUT2 transporter",
+      "variable": "main/v_GLUT2apex"
+    },
+    "q_Na_lumen": {
+      "name": "[Na+] in lumen",
+      "variable": "main/c_Na_gut"
+    },
+    "q_Na_i": {
+      "name": "[Na+] in intracellular space",
+      "variable": "main/c_Na_int"
+    },
+    "q_Na_blood": {
+      "name": "[Na+] in blood",
+      "variable": "main/c_Na_cap"
+    },
+    "q_K_blood": {
+      "name": "[K+] in blood",
+      "variable": "main/c_K_cap"
+    },
+    "q_K_i": {
+      "name": "[K+] in intracellular space",
+      "variable": "main/c_K_int"
+    },
+    "q_Glc_lumen": {
+      "name": "[Glucose] in lumen",
+      "variable": "main/c_Glc_gut"
+    },
+    "q_Glc_i": {
+      "name": "[Glucose] in intracellular space",
+      "variable": "main/c_Glc_int"
+    },
+    "q_Glc_blood": {
+      "name": "[Glucose] in blood",
+      "variable": "main/c_Glc_cap"
+    }
+  }
+};
+
+const getVariableName = (name) => {
+  if (Object.hasOwn(knowledgeMap.features, name)) {
+    console.log("pass")
+    const data = knowledgeMap.features[name];
+    return data;
+  }
+};
+
+export { getVariableName }