Show long label for paths on flatmap tooltips

package.json

@@ -55,7 +55,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.14.0",
+    "@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",

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)

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 () {

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: {

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);

src/components/viewers/MultiFlatmap.vue

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

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 {