@abi-software/mapintegratedvuer 1.1.0 → 1.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.1.0",
+  "version": "1.2.0-beta.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -48,8 +48,8 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.1.0",
-    "@abi-software/map-side-bar": "^2.2.0",
+    "@abi-software/flatmapvuer": "^1.1.2-alpha",
+    "@abi-software/map-side-bar": "^2.2.1-alpha-1",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "^1.1.0",
     "@abi-software/simulationvuer": "1.0.0",

package/src/components/ContentVuer.vue

@@ -79,19 +79,19 @@ export default {
   },
   methods: {
     flatmapProvenacneReady: function(prov) {
-      this.$refs.contentBar.setupFlatmapContextCard(prov);
+      this.$refs.contentBar?.setupFlatmapContextCard(prov);
     },
     /**
      * Toggle sync mode on/off depending on species and current state
      */
     toggleSyncMode: function () {
-      this.$refs.viewer.toggleSyncMode();
+      this.$refs.viewer?.toggleSyncMode();
     },
     getId: function () {
       return this.entry.id;
     },
     getState: function () {
-      return this.$refs.viewer.getState();
+      return this.$refs.viewer?.getState();
     },
     resourceSelected: function (payload) {
       this.$emit("resource-selected", payload);
@@ -101,32 +101,32 @@ export default {
         this.entriesStore.updateViewForEntry({id: this.entry.id, viewUrl});
       } else {
         //Manually set it as it cannot be set with reactivity
-        this.$refs.viewer.updateWithViewUrl(viewUrl);
+        this.$refs.viewer?.updateWithViewUrl(viewUrl);
       }
     },
     /**
      * Perform a local search on this contentvuer
      */
     search: function (term) {
-      return this.$refs.viewer.search(term);
+      return this.$refs.viewer?.search(term);
     },
     /**
      * Push the suggested terms into the suggestions array
      */
     searchSuggestions: function(term, suggestions) {
-      this.$refs.viewer.searchSuggestions(term, suggestions);
+      this.$refs.viewer?.searchSuggestions(term, suggestions);
     },
     setPanesBoundary: function() {
-      this.$refs.contentBar.setBoundary(this.$refs["container"][0]);
+      this.$refs.contentBar?.setBoundary(this.$refs["container"][0]);
     },
     speciesChanged: function (species) {
       this.activeSpecies = species;
     },
     receiveSynchronisedEvent: async function (data) {
-      this.$refs.viewer.receiveSynchronisedEvent(data);
+      this.$refs.viewer?.receiveSynchronisedEvent(data);
     },
     requestSynchronisedEvent: function (flag) {
-      this.$refs.viewer.requestSynchronisedEvent(flag);
+      this.$refs.viewer?.requestSynchronisedEvent(flag);
     },
     /**
      * Check if this viewer is currently visible
@@ -136,7 +136,7 @@ export default {
       return paneName !== undefined;
     },
     onResize: function () {
-      this.$refs.viewer.onResize();
+      this.$refs.viewer?.onResize();
     },
   },
   data: function () {

package/src/components/SplitFlow.vue

@@ -28,6 +28,7 @@
           @actionClick="actionClick"
           @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
+          @anatomy-in-datasets="updateMarkers($event)"
           @hover-changed="hoverChanged($event)"
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
@@ -93,6 +94,7 @@ export default {
       startUp: true,
       search: '',
       activeDockedId : 1,
+      hoveredMarkerDelay: undefined,
       filterTriggered: false,
       availableFacets: [],
     }
@@ -257,7 +259,14 @@ export default {
     hoverChanged: function (data) {
       const hoverEntries = data && data.anatomy ? data.anatomy : []
       this.settingsStore.updateHoveredMarkers(hoverEntries);
-      EventBus.emit("markerUpdate");
+      if (!hoverEntries.length) {
+        this.hoveredMarkerDelay = setTimeout(() => {
+          EventBus.emit("markerUpdate");
+        }, 3000)
+      } else {
+        clearTimeout(this.hoveredMarkerDelay)
+        EventBus.emit("markerUpdate");
+      }
     },
     searchChanged: function (data) {
       if (data && data.type == "query-update") {
@@ -296,13 +305,10 @@ export default {
         }
         this.filterTriggered = false; // reset for next action
       }
-      if (data && data.type == "available-facets") {
-        this.settingsStore.updateFacetLabels(data.value.labels);
-        this.settingsStore.updateMarkers(data.value.uberons);
-        EventBus.emit("markerUpdate");
-
-        this.availableFacets = data.value.labels
-      }
+    },
+    updateMarkers: function (data) {
+      this.settingsStore.updateMarkers(data);
+      EventBus.emit("markerUpdate");
     },
     getNewEntryId: function() {
       if (this.entries.length) {

package/src/components/viewers/Flatmap.vue

@@ -1,39 +1,41 @@
 <template>
-  <FlatmapVuer
-    :state="entry.state"
-    :entry="entry.resource"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    :name="entry.resource"
-    style="height: 100%; width: 100%"
-    :minZoom="entry.minZoom"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeInitialIndex="-1"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    :pathControls="true"
-    ref="flatmap"
-    @ready="flatmapReadyCall"
-    :displayMinimap="false"
-    :displayWarning="true"
-    :enableOpenMapUI="true"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @open-map="openMap"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-  />
+  <div class="viewer-container">
+    <FlatmapVuer
+      :state="entry.state"
+      :entry="entry.resource"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      @pan-zoom-callback="flatmapPanZoomCallback"
+      :name="entry.resource"
+      style="height: 100%; width: 100%"
+      :minZoom="entry.minZoom"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeInitialIndex="-1"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      :pathControls="true"
+      ref="flatmap"
+      @ready="flatmapReadyCall"
+      :displayMinimap="false"
+      :displayWarning="true"
+      :enableOpenMapUI="true"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="apiLocation"
+      @open-map="openMap"
+      @pathway-selection-changed="onPathwaySelectionChanged"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="flatmapHelp"
-    :flatmapRef="flatmapRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="flatmapHelp"
+      :flatmapRef="flatmapRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -160,7 +162,7 @@ export default {
   mounted: function() {
     this.getAvailableTerms();
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerZoomUpdate(true, undefined);
+      this.flatmapMarkerUpdate(undefined);
     });
   },
 };
@@ -168,6 +170,11 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }

package/src/components/viewers/MultiFlatmap.vue

@@ -1,40 +1,42 @@
 <template>
-  <MultiFlatmapVuer
-    :availableSpecies="availableSpecies"
-    @flatmapChanged="flatmapChanged"
-    @ready="multiFlatmapReady"
-    :state="entry.state"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    style="height: 100%; width: 100%"
-    :initial="entry.resource"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    ref="multiflatmap"
-    :displayMinimap="true"
-    :showStarInLegend="showStarInLegend"
-    :enableOpenMapUI="true"
-    :openMapOptions="openMapOptions"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    @open-map="openMap"
-    @finish-help-mode="endHelp"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-    @open-pubmed-url="onOpenPubmedUrl"
-  />
+  <div class="viewer-container">
+    <MultiFlatmapVuer
+      :availableSpecies="availableSpecies"
+      @flatmapChanged="flatmapChanged"
+      @ready="multiFlatmapReady"
+      :state="entry.state"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      style="height: 100%; width: 100%"
+      :initial="entry.resource"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      ref="multiflatmap"
+      :displayMinimap="true"
+      :showStarInLegend="showStarInLegend"
+      :enableOpenMapUI="true"
+      :openMapOptions="openMapOptions"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="apiLocation"
+      @pan-zoom-callback="flatmapPanZoomCallback"
+      @open-map="openMap"
+      @finish-help-mode="endHelp"
+      @pathway-selection-changed="onPathwaySelectionChanged"
+      @open-pubmed-url="onOpenPubmedUrl"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="multiflatmapHelp"
-    :multiflatmapRef="multiflatmapRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="multiflatmapHelp"
+      :multiflatmapRef="multiflatmapRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -153,7 +155,6 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
-        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
@@ -243,7 +244,6 @@ export default {
           this.$refs.multiflatmap
             .getCurrentFlatmap()
             .mapImp.panZoomTo(origin, [sW, sH]);
-          this.flatmapMarkerZoomUpdate(false, undefined);
         }
       }
     },
@@ -320,7 +320,7 @@ export default {
         flatmap.enablePanZoomEvents(true); // Use zoom events for dynamic markers
         this.flatmapReady = true;
         const flatmapImp = flatmap.mapImp;
-        this.flatmapMarkerZoomUpdate(true, flatmapImp);
+        this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
       }
     },
@@ -344,9 +344,9 @@ export default {
     restoreFeaturedMarkers: function (flatmap) {
       this.settingsStore.resetFeaturedMarkerIdentifier();
       const markers = this.settingsStore.featuredMarkers;
-      this.updateFeatureMarkers(markers, flatmap);
+      this.updateFeaturedMarkers(markers, flatmap);
     },
-    updateFeatureMarkers: function (markers, flatmap) {
+    updateFeaturedMarkers: function (markers, flatmap) {
       this.showStarInLegend = false; // will show if we have a featured marker
       for (let index = 0; index < markers.length; ++index) {
         if (markers[index]) {
@@ -413,7 +413,7 @@ export default {
         return;
       }
 
-      this.updateFeatureMarkers(markers, undefined);
+      this.updateFeaturedMarkers(markers, undefined);
     },
   },
   mounted: function () {
@@ -421,7 +421,7 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerZoomUpdate(true, undefined);
+      this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
     });
   },
 };
@@ -430,6 +430,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }
@@ -439,6 +444,12 @@ export default {
     cursor: pointer !important;
     z-index: 2;
   }
+  &.hovered {
+    div {
+      scale: 2;
+      transform: translate(0px, -5px);
+    }
+  }
   &.highlight-marker {
     visibility: visible !important;
     cursor: pointer !important;
@@ -448,14 +459,6 @@ export default {
       transform: translate(45px, -7px);
     }
   }
-  &.hovered-marker {
-    cursor: pointer !important;
-    z-index: 2;
-    div {
-      scale: 2;
-      transform: translate(0px, -5px);
-    }
-  }
 }
 
 </style>

package/src/components/viewers/Scaffold.vue

@@ -1,41 +1,43 @@
 <template>
-  <ScaffoldVuer
-    :state="entry.state"
-    :url="entry.resource"
-    :region="entry.region"
-    @scaffold-selected="resourceSelected(entry.type, $event, true)"
-    @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
-    @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
-    @on-ready="scaffoldIsReady"
-    @open-map="openMap"
-    ref="scaffold"
-    :background-toggle="true"
-    :traditional="true"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    :render="visible"
-    :display-latest-message="true"
-    :warning-message="warningMessage"
-    :display-minimap="false"
-    :display-markers="false"
-    :enableOpenMapUI="true"
-    :view-u-r-l="entry.viewUrl"
-    :markerLabels="markerLabels"
-    :flatmapAPI="flatmapAPI"
-  />
+  <div class="viewer-container">
+    <ScaffoldVuer
+      :state="entry.state"
+      :url="entry.resource"
+      :region="entry.region"
+      @scaffold-selected="resourceSelected(entry.type, $event, true)"
+      @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
+      @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
+      @on-ready="scaffoldIsReady"
+      @open-map="openMap"
+      ref="scaffold"
+      :background-toggle="true"
+      :traditional="true"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      :render="visible"
+      :display-latest-message="true"
+      :warning-message="warningMessage"
+      :display-minimap="false"
+      :display-markers="false"
+      :enableOpenMapUI="true"
+      :view-u-r-l="entry.viewUrl"
+      :markerLabels="markerLabels"
+      :flatmapAPI="flatmapAPI"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="scaffoldHelp"
-    :scaffoldRef="scaffoldRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="scaffoldHelp"
+      :scaffoldRef="scaffoldRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -206,6 +208,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.message-popper) {
   white-space: unset;
   max-width: 200px;

package/src/mixins/ContentMixin.js

@@ -300,7 +300,7 @@ export default {
           } catch (error) {
             markerSpecies = undefined;
           }
-          this.updateFeatureMarkers([markerCurie], undefined)
+          this.updateFeaturedMarkers([markerCurie], undefined)
           this.settingsStore.updateFeaturedMarker({
             identifier,
             marker: markerCurie,
@@ -412,7 +412,7 @@ export default {
           });
       }
     },
-    flatmapMarkerZoomUpdate() {
+    flatmapMarkerUpdate() {
       return;
     },
     onResize: function () {

package/src/mixins/DynamicMarkerMixin.js

@@ -4,36 +4,13 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 
 
-/*
-* Function to check markers visibility at the given zoom level.
-* I have modified it to make sure the marker is displayed
-* if the uberon is not present in the hardcoded zoom-level list.
-*/
-const checkMarkersAtZoomLevel = (flatmapImp, markers, zoomLevel, hoveredMarkers) => {
-  if (markers) {
-    markers.forEach(id => {
-      let foundInArray = false;
-      // First check if uberon is in the list, check for zoom level
-      // if true. Note: markerZoomLevels is imported.
-      for (let i = 0; i < markerZoomLevels.length; i++) {
-        if (markerZoomLevels[i].id === id) {
-          foundInArray = true;
-          if (zoomLevel >= markerZoomLevels[i].showAtZoom) {
-            let markerClass = "standard-marker"
-            if (hoveredMarkers.includes(id)) markerClass = "hovered-marker"
-            flatmapImp.addMarker(id, { className: markerClass, cluster: false});
-          }
-          break;
-        }
-      }
-      // Did not match, add it regardless so we do not lose any
-      // markers.
-      if (!foundInArray) {
-        flatmapImp.addMarker(id, {className: "standard-marker", cluster: false});
-      }
-    });
-  }
-};
+// remove duplicates by stringifying the objects
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
   
 /* eslint-disable no-alert, no-console */
 export default {
@@ -49,16 +26,14 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
-        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
         /**
      * Function used for updating the flatmap markers.
-     * It will only update the markers if zoom level has changed or
-     * the force flag is true.
+     * We set the markers based on what was searched and the flatmap clusters them.
      */
-    flatmapMarkerZoomUpdate(force, flatmap) {
+    flatmapMarkerUpdate(flatmap) {
       if (!this.flatmapReady) return;
 
       let flatmapImp = flatmap;
@@ -66,16 +41,24 @@ export default {
         flatmapImp = this.getFlatmapImp();
 
       if (flatmapImp) {
-        let currentZoom = flatmapImp.getZoom()["zoom"];
-        if (force || this.zoomLevel !== currentZoom) {
-          this.zoomLevel = currentZoom;
-          flatmapImp.clearMarkers();
-          let markers = this.settingsStore.markers;
-          let hoveredMarkers = this.settingsStore.hoveredMarkers;
-          checkMarkersAtZoomLevel(flatmapImp, markers, this.zoomLevel, hoveredMarkers);
-          if (this.entry.type === "MultiFlatmap") {
-            this.restoreFeaturedMarkers(flatmapImp);
-          }
+        // Set the dataset markers
+        let markers = this.settingsStore.markers;
+        markers = removeDuplicates(markers);
+        flatmapImp.clearMarkers();
+        flatmapImp.addDatasetMarkers(markers);
+      
+        // Set the hovered markers
+        let hoveredMarkers = this.settingsStore.hoveredMarkers
+        hoveredMarkers = removeDuplicates(hoveredMarkers);
+        hoveredMarkers.forEach(id => {
+          let markerClass = "standard-marker" + " hovered" // Space-separated CSS class names
+          let markerCluster = false // Disable cluster when related dataset is hovered
+          flatmapImp.addMarker(id, { className: markerClass, cluster: markerCluster })
+        })
+
+        // Set the featured markers
+        if (this.entry.type === "MultiFlatmap") {
+          this.restoreFeaturedMarkers(flatmapImp);
         }
       }
     },
@@ -84,7 +67,7 @@ export default {
         flatmap.enablePanZoomEvents(true); // Use zoom events for dynamic markers
         this.flatmapReady = true;
         const flatmapImp = flatmap.mapImp;
-        this.flatmapMarkerZoomUpdate(true, flatmapImp);
+        this.flatmapMarkerUpdate(flatmapImp);
       }
     },
   }