@abi-software/flatmapvuer 1.20.0 → 1.20.1-demo.1

package/src/components/MultiFlatmapVuer.vue

@@ -2,86 +2,80 @@
   <div class="multi-container" ref="multiContainer">
     <div style="position: absolute; z-index: 100" v-if="!disableUI">
       <div class="species-display-text">Species</div>
-      <el-popover
-        content="Select a species"
-        placement="right"
-        trigger="manual"
-        popper-class="flatmap-popper flatmap-teleport-popper right-popper"
-        width="max-content"
-        :visible="activateTooltipByIndex(0)"
+      <el-select
+        id="flatmap-select"
+        ref="speciesSelect"
+        v-help-mode="{
+          id: 'multiflatmap-species-select',
+          area: 'map-info',
+          title: 'Select a species',
+          description: 'Switch between the maps of the available species.',
+          placement: 'right',
+        }"
         :teleported="false"
-        ref="selectPopover"
+        v-model="activeSpecies"
+        placeholder="Select"
+        class="select-box"
+        popper-class="flatmap-dropdown"
+        @change="setSpecies"
       >
-        <template #reference>
-          <el-select
-            id="flatmap-select"
-            ref="speciesSelect"
-            :teleported="false"
-            v-model="activeSpecies"
-            placeholder="Select"
-            class="select-box"
-            popper-class="flatmap-dropdown"
-            @change="setSpecies"
-          >
-            <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
-              <span class="option-label">
-                <el-tooltip
-                  v-if="activeSpecies !== key"
-                  :content="`Change species to ${key}`"
-                  placement="top"
-                  effect="light"
-                  :show-after="200"
-                  popper-class="flatmap-species-option-tooltip"
-                >
-                  <span class="option-title">
-                    <span class="select-box-icon">
-                      <i :class="item.iconClass"></i>
-                    </span>
-                    {{ key }}
-                  </span>
-                </el-tooltip>
-                <span v-else class="option-title active-species">
-                  <span class="select-box-icon">
-                    <i :class="item.iconClass"></i>
-                  </span>
-                  {{ key }}
+        <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
+          <span class="option-label">
+            <el-tooltip
+              v-if="activeSpecies !== key"
+              :content="`Change species to ${key}`"
+              placement="top"
+              effect="light"
+              :show-after="200"
+              popper-class="flatmap-species-option-tooltip"
+            >
+              <span class="option-title">
+                <span class="select-box-icon">
+                  <i :class="item.iconClass"></i>
                 </span>
-                <el-tooltip
-                  v-if="enableOpenMapUI"
-                  :content="`Open ${key} in a new view`"
-                  placement="top"
-                  effect="light"
-                  :show-after="200"
-                  popper-class="flatmap-open-new-view-tooltip"
-                >
-                  <button
-                    type="button"
-                    class="open-new-view-button"
-                    :aria-label="`Open ${key} in a new view`"
-                    @click.stop="openSpeciesInNewView(key)"
-                  >
-                    <svg
-                      viewBox="0 0 24 24"
-                      width="14"
-                      height="14"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      aria-hidden="true"
-                    >
-                      <rect x="8" y="8" width="13" height="13" rx="2" />
-                      <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
-                      <path d="M14.5 11.5v6M11.5 14.5h6" />
-                    </svg>
-                  </button>
-                </el-tooltip>
+                {{ key }}
               </span>
-            </el-option>
-          </el-select>
-        </template>
-      </el-popover>
+            </el-tooltip>
+            <span v-else class="option-title active-species">
+              <span class="select-box-icon">
+                <i :class="item.iconClass"></i>
+              </span>
+              {{ key }}
+            </span>
+            <el-tooltip
+              v-if="enableOpenMapUI"
+              :content="`Open ${key} in a new view`"
+              placement="top"
+              effect="light"
+              :show-after="200"
+              popper-class="flatmap-open-new-view-tooltip"
+            >
+              <button
+                type="button"
+                class="open-new-view-button"
+                :aria-label="`Open ${key} in a new view`"
+                @click.stop="openSpeciesInNewView(key)"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  width="14"
+                  height="14"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <rect x="8" y="8" width="13" height="13" rx="2" />
+                  <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                  <path d="M14.5 11.5v6M11.5 14.5h6" />
+                </svg>
+              </button>
+            </el-tooltip>
+          </span>
+        </el-option>
+      </el-select>
     </div>
     <!--
       This event is emitted when the user chooses a different map option
@@ -127,13 +121,6 @@
       @open-map="$emit('open-map', $event)"
       @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
-      :helpMode="activeSpecies == key && helpMode"
-      :helpModeActiveItem="helpModeActiveItem"
-      :helpModeDialog="helpModeDialog"
-      :helpModeInitialIndex="-2"
-      @help-mode-last-item="onHelpModeLastItem"
-      @shown-tooltip="onTooltipShown"
-      @shown-map-tooltip="onMapTooltipShown"
       :renderAtMounted="renderAtMounted"
       :render="render && activeSpecies == key"
       :displayMinimap="displayMinimap"
@@ -158,6 +145,7 @@
 import { markRaw } from 'vue';
 import EventBus from './EventBus';
 import FlatmapVuer from './FlatmapVuer.vue';
+import { collectHelpModeSteps, helpModeDirective } from '@abi-software/map-utilities';
 import flatmap from '../services/flatmapLoader.js';
 
 const TAXON_UUID = {
@@ -176,6 +164,9 @@ export default {
   components: {
     FlatmapVuer,
   },
+  directives: {
+    helpMode: helpModeDirective,
+  },
   created: function () {
     this.loadMapManager();
   },
@@ -387,6 +378,17 @@ export default {
     getCurrentFlatmap: function () {
       return this.$refs[this.activeSpecies][0];
     },
+    /**
+     * @public
+     * Function to get the help mode steps of this component and the current flatmap,
+     * from the elements with ``v-help-mode``, to be used with ``HelpModeTour`` and
+     * ``HelpModeHover`` from ``@abi-software/map-utilities``.
+     * The flatmaps of the other species are hidden and left out.
+     * @returns {Array} The list of help steps.
+     */
+    getHelpModeSteps: function () {
+      return collectHelpModeSteps(this.$el);
+    },
     /**
      * @public
      * Function to request opening the given species in a new view/panel,
@@ -624,44 +626,6 @@ export default {
         });
       }
     },
-    /**
-     * @public
-     * Function to activate help mode tooltip by item index number
-     * @arg {Number} `index`
-     */
-    activateTooltipByIndex: function (index) {
-      return index === this.helpModeActiveItem && this.helpMode;
-    },
-    /**
-     * @public
-     * Function to check the last item of help mode
-     * @arg {Boolean} `isLastItem`
-     */
-    onHelpModeLastItem: function (isLastItem) {
-      if (isLastItem) {
-        this.$emit('help-mode-last-item', true);
-      }
-    },
-    /**
-     * @public
-     * Function to emit event after a tooltip is shown.
-     */
-    onTooltipShown: function () {
-      /**
-       * This event is emitted after a tooltip in Flatmap is shown.
-       */
-      this.$emit('shown-tooltip');
-    },
-    /**
-     * @public
-     * Function to emit event after a tooltip on the map is shown.
-     */
-    onMapTooltipShown: function () {
-      /**
-       * This event is emitted after a tooltip on Flatmap's map is shown.
-       */
-      this.$emit('shown-map-tooltip');
-    },
     /**
      * @public
      * Function to change the view mode of the map.
@@ -708,36 +672,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    /**
-     * The option to show tooltips for help mode.
-     */
-    helpMode: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * The active item index of help mode.
-     */
-    helpModeActiveItem: {
-      type: Number,
-      default: 0,
-    },
-    /**
-     * The option to use helpModeDialog.
-     * On default, `false`, clicking help will show all tooltips.
-     * If `true`, clicking help will show the help-mode-dialog.
-     */
-    helpModeDialog: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * The last item of help mode.
-     */
-    helpModeLastItem: {
-      type: Boolean,
-      default: false,
-    },
     /**
      * The option to display minimap at the top-right corner of the map.
      */

package/src/components/legends/DynamicLegends.vue

@@ -15,11 +15,23 @@
           width="max-content"
           :offset="0"
           popper-class="flatmap-popper flatmap-teleport-popper"
-          :visible="tooltipVisible"
+          :visible="isHovering"
           ref="featuredMarkerPopover"
         >
           <template #reference>
-            <div v-popover:featuredMarkerPopover @mouseover="onMouseOver" @mouseout="onMouseOut">
+            <div
+              v-popover:featuredMarkerPopover
+              v-help-mode="{
+                id: 'flatmap-featured-marker',
+                area: 'legends',
+                title: 'Featured dataset marker',
+                description: 'Shows the location of the featured dataset on the map.',
+                placement: 'right',
+                onEnter: openHelpModeDrawer,
+              }"
+              @mouseover="onMouseOver"
+              @mouseout="onMouseOut"
+            >
               <LegendItem
                 :item="item"
                 :identifierKey="identifierKey"
@@ -44,12 +56,19 @@
 
 <script>
 import LegendItem from './LegendItem.vue';
+import { helpModeDirective } from '@abi-software/map-utilities';
 
 export default {
   name: 'DynamicLegends',
   components: {
     LegendItem,
   },
+  directives: {
+    helpMode: helpModeDirective,
+  },
+  inject: {
+    openHelpModeDrawer: { default: () => () => {} },
+  },
   props: {
     identifierKey: {
       type: String,
@@ -73,10 +92,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showDatasetMarkerTooltip: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -84,12 +99,6 @@ export default {
       hoverTimeout: null,
     };
   },
-  computed: {
-    tooltipVisible() {
-      // Show tooltip when either help mode is active OR user is hovering
-      return (this.showDatasetMarkerTooltip && this.showStarInLegend) || this.isHovering;
-    },
-  },
   methods: {
     onMouseOver() {
       clearTimeout(this.hoverTimeout);

package/src/services/somaLocationMarkers.js

@@ -0,0 +1,129 @@
+const SOMA_MARKER_COLOUR = '#1b7f6b';
+const SOMA_MARKER_SECONDARY_COLOUR = '#f4f1de';
+const SOMA_MARKER_TEXT_COLOUR = '#12312b';
+const SOMA_MARKER_MAX_COUNT_LABEL = '99+';
+
+const normalizeSomaLocations = function (somaLocations) {
+  return (Array.isArray(somaLocations) ? somaLocations : [])
+    .map((item) => ({
+      label: String(item?.label || '').trim(),
+      curie: String(item?.curie || '').trim(),
+      count: Number(item?.count || 0),
+    }))
+    .filter((item) => item.curie && item.count > 0);
+};
+
+const formatCount = function (count) {
+  if (count > 99) return SOMA_MARKER_MAX_COUNT_LABEL;
+  return String(count);
+};
+
+const createSomaLocationMarkerElement = function (somaLocation) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'flatmapvuer-soma-location-marker';
+  wrapper.title = somaLocation.label || somaLocation.curie;
+  wrapper.style.width = '34px';
+  wrapper.style.height = '48px';
+  wrapper.style.display = 'flex';
+  wrapper.style.alignItems = 'center';
+  wrapper.style.justifyContent = 'center';
+  wrapper.style.transform = 'translate(-50%, -100%)';
+
+  const countLabel = formatCount(somaLocation.count);
+  wrapper.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 27 42" width="34" height="48" aria-hidden="true">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.18;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494
+             c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:${SOMA_MARKER_COLOUR};stroke:${SOMA_MARKER_SECONDARY_COLOUR};stroke-width:1.1"/>
+    <circle cx="12.5" cy="12.5" r="8" fill="${SOMA_MARKER_SECONDARY_COLOUR}"/>
+    <text x="12.5" y="16.1" text-anchor="middle" style="font-size:7.5px;font-weight:700;fill:${SOMA_MARKER_TEXT_COLOUR};font-family:Arial, sans-serif">${countLabel}</text>
+  </svg>`;
+
+  return wrapper;
+};
+
+const resolveMarkerPlacement = function (mapImp, curie) {
+  const featureIds = Array.isArray(mapImp?.modelFeatureIds?.(curie))
+    ? mapImp.modelFeatureIds(curie)
+    : [];
+  const placements = [];
+  const seenFeatureUris = new Set();
+
+  for (const featureId of featureIds) {
+    const annotation = mapImp.annotation(featureId);
+    const featureUri = String(annotation?.uri || '').trim();
+    if (featureUri && !seenFeatureUris.has(featureUri)) {
+      seenFeatureUris.add(featureUri);
+      placements.push({
+        type: 'feature-uri',
+        value: featureUri,
+      });
+    }
+  }
+
+  // Fall back to model placement only when no feature URI can be resolved.
+  if (!placements.length && featureIds.length) {
+    placements.push({
+      type: 'model',
+      value: curie,
+    });
+  }
+
+  return placements;
+};
+
+export const attachSomaLocationMarkerMethods = function (mapImp) {
+  if (!mapImp || mapImp.addSomaLocationMarkers) {
+    return mapImp;
+  }
+
+  let markerIds = [];
+
+  mapImp.clearSomaLocationMarkers = function () {
+    markerIds.forEach((markerId) => {
+      mapImp.removeMarker(markerId);
+    });
+    markerIds = [];
+  };
+
+  mapImp.addSomaLocationMarkers = function (somaLocations) {
+    const normalizedSomaLocations = normalizeSomaLocations(somaLocations);
+    const placedSomaLocations = [];
+
+    mapImp.clearSomaLocationMarkers();
+
+    normalizedSomaLocations.forEach((somaLocation) => {
+      const placements = resolveMarkerPlacement(mapImp, somaLocation.curie);
+      if (!placements.length) return;
+
+      let somaLocationPlaced = false;
+      placements.forEach((placement) => {
+        const markerElement = createSomaLocationMarkerElement(somaLocation);
+        let addedMarkerIds = [];
+
+        if (placement.type === 'feature-uri') {
+          addedMarkerIds = mapImp.addMarkerByFeatureUri(placement.value, {
+            element: markerElement,
+          });
+        } else if (placement.type === 'model') {
+          const markerId = mapImp.addMarker(placement.value, { element: markerElement });
+          addedMarkerIds = markerId > -1 ? [markerId] : [];
+        }
+
+        if (!addedMarkerIds.length) return;
+
+        markerIds.push(...addedMarkerIds);
+        somaLocationPlaced = true;
+      });
+
+      if (somaLocationPlaced) {
+        placedSomaLocations.push(somaLocation);
+      }
+    });
+
+    return placedSomaLocations;
+  };
+
+  return mapImp;
+};