@abi-software/mapintegratedvuer 1.20.0 → 1.21.0

package/src/components/scripts/simulation_data.js

@@ -0,0 +1,461 @@
+let minF = undefined;
+let maxF = undefined;
+let minVol = undefined;
+let maxVol = undefined;
+
+const fvData = {
+  "compartments": [
+      {
+          "flow": 0.049699,
+          "name": "RUL Anterior",
+          "number": 1,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 181987.21791976015
+              },
+              {
+                  "time": 3.0,
+                  "volume": 190654.20796455297
+              },
+              {
+                  "time": 5.0,
+                  "volume": 197903.5873118482
+              }
+          ]
+      },
+      {
+          "flow": 0.0612,
+          "name": "RUL Posterior",
+          "number": 2,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 201042.2999957783
+              },
+              {
+                  "time": 3.0,
+                  "volume": 223166.3550326552
+              },
+              {
+                  "time": 5.0,
+                  "volume": 224107.48977724495
+              }
+          ]
+      },
+      {
+          "flow": 0.082407,
+          "name": "RUL Apical",
+          "number": 3,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 245471.83628595909
+              },
+              {
+                  "time": 3.0,
+                  "volume": 257765.65591976934
+              },
+              {
+                  "time": 5.0,
+                  "volume": 268162.69688902283
+              }
+          ]
+      },
+      {
+          "flow": 0.046921,
+          "name": "RML Lateral",
+          "number": 4,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 136749.2302777965
+              },
+              {
+                  "time": 3.0,
+                  "volume": 142354.54619401656
+              },
+              {
+                  "time": 5.0,
+                  "volume": 144871.90605963918
+              }
+          ]
+      },
+      {
+          "flow": 0.041519,
+          "name": "RML Medial",
+          "number": 5,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 149373.3982901215
+              },
+              {
+                  "time": 3.0,
+                  "volume": 157328.6444732329
+              },
+              {
+                  "time": 5.0,
+                  "volume": 158140.25438088493
+              }
+          ]
+      },
+      {
+          "flow": 0.063307,
+          "name": "RLL Posterior",
+          "number": 6,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 186775.46800209297
+              },
+              {
+                  "time": 3.0,
+                  "volume": 192966.52104661157
+              },
+              {
+                  "time": 5.0,
+                  "volume": 205857.97557974615
+              }
+          ]
+      },
+      {
+          "flow": 0.065394,
+          "name": "RLL Medial",
+          "number": 7,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 194824.7466953374
+              },
+              {
+                  "time": 3.0,
+                  "volume": 217874.6619392152
+              },
+              {
+                  "time": 5.0,
+                  "volume": 217381.52321902165
+              }
+          ]
+      },
+      {
+          "flow": 0.056798,
+          "name": "RLL Anterior",
+          "number": 8,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 215680.0182455645
+              },
+              {
+                  "time": 3.0,
+                  "volume": 219453.77944698493
+              },
+              {
+                  "time": 5.0,
+                  "volume": 231581.60138050313
+              }
+          ]
+      },
+      {
+          "flow": 0.081373,
+          "name": "RLL Superior",
+          "number": 9,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 244625.5581985565
+              },
+              {
+                  "time": 3.0,
+                  "volume": 266792.0850557373
+              },
+              {
+                  "time": 5.0,
+                  "volume": 284087.3333850801
+              }
+          ]
+      },
+      {
+          "flow": 0.056684,
+          "name": "LUL Posterior",
+          "number": 10,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 172196.7437707655
+              },
+              {
+                  "time": 3.0,
+                  "volume": 181443.25253755006
+              },
+              {
+                  "time": 5.0,
+                  "volume": 191012.60480114556
+              }
+          ]
+      },
+      {
+          "flow": 0.038741,
+          "name": "LUL Anterior",
+          "number": 11,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 167290.43470213015
+              },
+              {
+                  "time": 3.0,
+                  "volume": 181601.44836610503
+              },
+              {
+                  "time": 5.0,
+                  "volume": 186127.32231959977
+              }
+          ]
+      },
+      {
+          "flow": 0.038449,
+          "name": "LUL Lingular",
+          "number": 12,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 141906.787889736
+              },
+              {
+                  "time": 3.0,
+                  "volume": 141671.55047498783
+              },
+              {
+                  "time": 5.0,
+                  "volume": 152307.21920357717
+              }
+          ]
+      },
+      {
+          "flow": 0.055762,
+          "name": "LUL Apical",
+          "number": 13,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 218466.22444789423
+              },
+              {
+                  "time": 3.0,
+                  "volume": 251686.08493242075
+              },
+              {
+                  "time": 5.0,
+                  "volume": 250175.1790429858
+              }
+          ]
+      },
+      {
+          "flow": 0.045985,
+          "name": "LLL Posterior",
+          "number": 14,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 138039.9756600753
+              },
+              {
+                  "time": 3.0,
+                  "volume": 137909.5791278306
+              },
+              {
+                  "time": 5.0,
+                  "volume": 160653.0149818861
+              }
+          ]
+      },
+      {
+          "flow": 0.057459,
+          "name": "LLL Superior",
+          "number": 15,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 193934.96452631807
+              },
+              {
+                  "time": 3.0,
+                  "volume": 218445.44410386705
+              },
+              {
+                  "time": 5.0,
+                  "volume": 220963.58880308812
+              }
+          ]
+      },
+      {
+          "flow": 0.053836,
+          "name": "LLL Medial",
+          "number": 16,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 201521.12178046367
+              },
+              {
+                  "time": 3.0,
+                  "volume": 233287.44183763085
+              },
+              {
+                  "time": 5.0,
+                  "volume": 203887.33003463238
+              }
+          ]
+      },
+      {
+          "flow": 0.051704,
+          "name": "LLL Anterior",
+          "number": 17,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 188226.65055088204
+              },
+              {
+                  "time": 3.0,
+                  "volume": 189234.8102624248
+              },
+              {
+                  "time": 5.0,
+                  "volume": 211763.78024920568
+              }
+          ]
+      },
+      {
+          "flow": 0.052762,
+          "name": "LLL Lateral",
+          "number": 18,
+          "volumes": [
+              {
+                  "time": 1.0,
+                  "volume": 157340.55375980627
+              },
+              {
+                  "time": 3.0,
+                  "volume": 160912.90618797182
+              },
+              {
+                  "time": 5.0,
+                  "volume": 193000.8440869187
+              }
+          ]
+      }
+  ],
+  "left lung": {
+      "flow": 0.45138,
+      "sum compartment flow": 0.45138199999999995,
+      "volumes": [
+          {
+              "sum compartment volume": 1578923.4570880714,
+              "time": 1.0,
+              "volume": 3335453.2309989794
+          },
+          {
+              "sum compartment volume": 1696192.517830789,
+              "time": 3.0,
+              "volume": 3564548.974903552
+          },
+          {
+              "sum compartment volume": 1769890.8835230393,
+              "time": 5.0,
+              "volume": 3701985.251506051
+          }
+      ]
+  },
+  "right lung": {
+      "flow": 0.54862,
+      "sum compartment flow": 0.5486179999999999,
+      "volumes": [
+          {
+              "sum compartment volume": 1756529.773910967,
+              "time": 1.0,
+              "volume": 3335453.2309989794
+          },
+          {
+              "sum compartment volume": 1868356.4570727758,
+              "time": 3.0,
+              "volume": 3564548.974903552
+          },
+          {
+              "sum compartment volume": 1932094.367982991,
+              "time": 5.0,
+              "volume": 3701985.251506051
+          }
+      ]
+  }
+}
+
+const getFlowAndVolume = (compartment, time) => {
+  if (compartment) {
+    const entry = fvData.compartments.find(
+      element => element.name === compartment);
+    if (!entry) return {};
+
+    const min = 1.0, max = 5.0;
+    const range = max - min;
+    const nT = time / 100.0 * range + min;
+    const v3 = entry.volumes.find(element => element.time === 3.0);
+    let volume = 0;
+    const flow = entry.flow;
+    if (1.0 <= nT && nT <= 3.0) {
+      const v1 = entry.volumes.find(element => element.time === 1.0);
+      const ratio = (nT - 1.0) / 2.0;
+      volume = (1.0 - ratio) * v1.volume + ratio * v3.volume;
+    } else {
+      const v5 = entry.volumes.find(element => element.time === 5.0);
+      const ratio = (nT - 3.0) / 2.0;
+      volume = (1.0 - ratio) * v3.volume + ratio * v5.volume;
+    }
+
+    return { flow, volume };
+  }
+}
+
+const calculateMinMax = () => {
+  if (minVol === undefined) {
+    fvData.compartments.forEach((ele) => {
+      const vol = ele.volumes.find(v => v.time === 1.0).volume;
+      const flow = ele.flow;
+      console.log(vol, flow)
+      if (minVol === undefined || vol < minVol) {
+        minVol = vol;
+      }
+      if (maxVol === undefined || vol > maxVol) {
+        maxVol = vol;
+      }
+      if (minF === undefined || flow < minF) {
+        minF = flow;
+      }
+      if (maxF === undefined || flow > maxF) {
+        maxF = flow;
+      }
+    })
+  }
+}
+
+const getMockData = (compartment) => {
+  if (compartment) {
+    const entry = fvData.compartments.find(
+      element => element.name === compartment);
+    if (!entry) return undefined;
+    calculateMinMax();
+    const vol = entry.volumes.find(v => v.time === 1.0).volume;
+    const flow = entry.flow;
+    const i = (vol - minVol) / (maxVol - minVol) * 9 + 1;
+    const e = (flow - minF) / (maxF - minF) * 9 + 1;
+
+    return { "Inspiration time": i, "Expiration time": e };
+  }
+}
+
+export {
+  getFlowAndVolume,
+  getMockData,
+}

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);
@@ -203,7 +204,9 @@ export default {
       }
     },
     changeViewingMode: function (modeName) {
-      this.$refs.flatmap.changeViewingMode(modeName);
+      if (this.$refs.flatmap) {
+        this.$refs.flatmap.changeViewingMode(modeName);
+      }
     },
     updateViewerSettings: function () {
       const {
@@ -217,12 +220,14 @@ export default {
 
       const currentFlatmap = this.$refs.flatmap;
 
-      currentFlatmap.changeViewingMode(viewingMode);
-      currentFlatmap.setFlightPath3D(flightPathDisplay);
-      currentFlatmap.setColour(organsDisplay);
-      currentFlatmap.setOutlines(outlinesDisplay);
-      currentFlatmap.backgroundChangeCallback(backgroundDisplay);
-      currentFlatmap.setConnectionType(connectionType);
+      if (currentFlatmap) {
+        currentFlatmap.changeViewingMode(viewingMode);
+        currentFlatmap.setFlightPath3D(flightPathDisplay);
+        currentFlatmap.setColour(organsDisplay);
+        currentFlatmap.setOutlines(outlinesDisplay);
+        currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+        currentFlatmap.setConnectionType(connectionType);
+      }
     },
     setVisibilityFilter: function (payload) {
       if (this?.alive) {

package/src/components/viewers/MultiFlatmap.vue

@@ -42,6 +42,7 @@
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      :tooltipContentProvider="tooltipPathLabelProvider"
       @trackEvent="trackEvent"
     />
 
@@ -334,8 +335,10 @@ export default {
      * Change the view mode of the current flatmap
      */
     changeViewingMode: function (modeName) {
-      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
-      flatmap.changeViewingMode(modeName);
+      const flatmap = this.$refs.multiflatmap?.getCurrentFlatmap();
+      if (flatmap) {
+        flatmap.changeViewingMode(modeName);
+      }
     },
     showConnectivity: function (payload) {
       if (this?.alive && this.flatmapReady && this.$refs.multiflatmap) {
@@ -386,12 +389,14 @@ export default {
       if (this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
 
-        currentFlatmap.changeViewingMode(viewingMode);
-        currentFlatmap.setFlightPath3D(flightPathDisplay);
-        currentFlatmap.setColour(organsDisplay);
-        currentFlatmap.setOutlines(outlinesDisplay);
-        currentFlatmap.backgroundChangeCallback(backgroundDisplay);
-        currentFlatmap.setConnectionType(connectionType);
+        if (currentFlatmap) {
+          currentFlatmap.changeViewingMode(viewingMode);
+          currentFlatmap.setFlightPath3D(flightPathDisplay);
+          currentFlatmap.setColour(organsDisplay);
+          currentFlatmap.setOutlines(outlinesDisplay);
+          currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+          currentFlatmap.setConnectionType(connectionType);
+        }
       }
     },
     setVisibilityFilter: function (payload) {

package/src/components.d.ts

@@ -1,10 +1,14 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     CellDLViewer: typeof import('./components/viewers/CellDLViewer.vue')['default']
@@ -58,7 +62,7 @@ declare module 'vue' {
     SplitDialog: typeof import('./components/SplitDialog.vue')['default']
     SplitFlow: typeof import('./components/SplitFlow.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

package/src/main.js

@@ -4,6 +4,7 @@ import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
 import { useMainStore } from './stores/index'
+import './assets/fonts.scss'
 
 const routes = [
   { path: '/' },
@@ -29,4 +30,4 @@ if (mainStore && token) {
   mainStore.setUserToken(token.split("=")[1])
 }
 
-app.mount('#app')
+app.mount('#app')

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() {
@@ -776,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 {