@abi-software/mapintegratedvuer 1.1.1 → 1.2.0-beta.2

package/package.json

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

package/src/components/SplitFlow.vue

@@ -28,6 +28,8 @@
           @actionClick="actionClick"
           @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
+          @anatomy-in-datasets="updateMarkers($event)"
+          @number-of-datasets-for-anatomies="updateScaffoldMarkers($event)"
           @hover-changed="hoverChanged($event)"
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
@@ -93,6 +95,7 @@ export default {
       startUp: true,
       search: '',
       activeDockedId : 1,
+      hoveredMarkerDelay: undefined,
       filterTriggered: false,
       availableFacets: [],
     }
@@ -257,7 +260,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");
+        }, 500)
+      } else {
+        clearTimeout(this.hoveredMarkerDelay)
+        EventBus.emit("markerUpdate");
+      }
     },
     searchChanged: function (data) {
       if (data && data.type == "query-update") {
@@ -296,13 +306,13 @@ 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");
+    },
+    updateScaffoldMarkers: function (data) {
+      this.settingsStore.updateNumberOfDatasetsForFacets(data);
     },
     getNewEntryId: function() {
       if (this.entries.length) {

package/src/components/viewers/Flatmap.vue

@@ -162,7 +162,7 @@ export default {
   mounted: function() {
     this.getAvailableTerms();
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerZoomUpdate(true, undefined);
+      this.flatmapMarkerUpdate(undefined);
     });
   },
 };

package/src/components/viewers/MultiFlatmap.vue

@@ -155,7 +155,6 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
-        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
@@ -245,7 +244,6 @@ export default {
           this.$refs.multiflatmap
             .getCurrentFlatmap()
             .mapImp.panZoomTo(origin, [sW, sH]);
-          this.flatmapMarkerZoomUpdate(false, undefined);
         }
       }
     },
@@ -322,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,11 +342,13 @@ export default {
       EventBus.emit("PopoverActionClick", returnedAction);
     },
     restoreFeaturedMarkers: function (flatmap) {
+
       this.settingsStore.resetFeaturedMarkerIdentifier();
       const markers = this.settingsStore.featuredMarkers;
-      this.updateFeatureMarkers(markers, flatmap);
+      this.updateFeaturedMarkers(markers, flatmap);
     },
-    updateFeatureMarkers: function (markers, flatmap) {
+    // updateFeaturedMarkers will step through the featured markers and add them to the map
+    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]) {
@@ -364,6 +364,7 @@ export default {
         }
       }
     },
+    // addFeaturedMarker: add a featured marker to the map at the specified uberon location
     addFeaturedMarker: function (marker, index, flatmap) {
       const markerSpecies =
         this.settingsStore.featuredMarkerSpecies[index];
@@ -415,7 +416,7 @@ export default {
         return;
       }
 
-      this.updateFeatureMarkers(markers, undefined);
+      this.updateFeaturedMarkers(markers, undefined);
     },
   },
   mounted: function () {
@@ -423,7 +424,9 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerZoomUpdate(true, undefined);
+      if (this.flatmapReady) {
+        this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+      }
     });
   },
 };
@@ -446,6 +449,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;
@@ -455,14 +464,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

@@ -187,7 +187,7 @@ export default {
       }
     },
     markerLabels: function () {
-      return this.settingsStore.facetLabels;
+      return this.settingsStore.numberOfDatasetsForFacets;
     },
   },
   data: function () {

package/src/mixins/ContentMixin.js

@@ -268,6 +268,7 @@ export default {
       }
       return { id, name };
     },
+    // Get the species and andaotmy info for the featured datasets
     getDatasetAnatomyInfo: function (identifier) {
       fetch(`${this.apiLocation}dataset_info/anatomy?identifier=${identifier}`)
         .then(response => response.json())
@@ -300,7 +301,8 @@ export default {
           } catch (error) {
             markerSpecies = undefined;
           }
-          this.updateFeatureMarkers([markerCurie], undefined)
+          // can test the featured marker by uncommenting the line below:
+          // markerSpecies = "Rat"
           this.settingsStore.updateFeaturedMarker({
             identifier,
             marker: markerCurie,
@@ -412,7 +414,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,32 @@ 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.clearDatasetMarkers();
+        flatmapImp.addDatasetMarkers(markers);
+      
+        // Set the hovered markers
+        let hoveredMarkers = this.settingsStore.hoveredMarkers
+        let previousHoveredMarkers = this.settingsStore.previousHoveredMarkers
+        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 })
+        })
+        if (previousHoveredMarkers !== null && previousHoveredMarkers.length >= 0) {
+          previousHoveredMarkers.forEach(id => {
+            let markerClass = "standard-marker"
+            let markerCluster = true
+            flatmapImp.addMarker(id, { className: markerClass, cluster: markerCluster })
+          })
+        } 
+
+        // Set the featured markers
+        if (this.entry.type === "MultiFlatmap") {
+          this.restoreFeaturedMarkers(flatmapImp);
         }
       }
     },
@@ -84,7 +75,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);
       }
     },
   }

package/src/stores/settings.js

@@ -15,9 +15,10 @@ export const useSettingsStore = defineStore('settings', {
       nlLinkPrefix: undefined,
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
-      facetLabels: [],
+      numberOfDatasetsForFacets: [],
       markers: [],
       hoveredMarkers: [],
+      previousHoveredMarkers: null,
       featuredMarkers: [],
       featuredMarkerIdentifiers: [],
       featuredMarkerDois: [],
@@ -70,6 +71,7 @@ export const useSettingsStore = defineStore('settings', {
       this.markers = markers;
     },
     updateHoveredMarkers(markers) {
+      this.previousHoveredMarkers = this.hoveredMarkers;
       this.hoveredMarkers = markers;
     },
     updateFeatured(datasetIdentifiers) {
@@ -142,8 +144,8 @@ export const useSettingsStore = defineStore('settings', {
         }
       }
     },
-    updateFacetLabels(facetLabels) {
-      this.facetLabels = facetLabels;
+    updateNumberOfDatasetsForFacets(numberOfDatasetsForFacets) {
+      this.numberOfDatasetsForFacets = numberOfDatasetsForFacets;
     },
     updateUseHelpModeDialog(helpModeOption) {
       this.useHelpModeDialog = helpModeOption;

package/dist/style-UwGHggI4.js

@@ -1,62 +0,0 @@
-import { m as i } from "./ContentMixin-mZX2duoM.js";
-import { mapStores as n } from "pinia";
-import { u as f } from "./index-nmieCwQF.js";
-const p = (e, r, t, o) => {
-  r && r.forEach((a) => {
-    let s = !1;
-    for (let m = 0; m < i.length; m++)
-      if (i[m].id === a) {
-        if (s = !0, t >= i[m].showAtZoom) {
-          let l = "standard-marker";
-          o.includes(a) && (l = "hovered-marker"), e.addMarker(a, { className: l, cluster: !1 });
-        }
-        break;
-      }
-    s || e.addMarker(a, { className: "standard-marker", cluster: !1 });
-  });
-}, k = {
-  computed: {
-    ...n(f)
-  },
-  methods: {
-    flatmapPanZoomCallback: function(e) {
-      if (this.mouseHovered) {
-        const r = {
-          paneIndex: this.entry.id,
-          eventType: "panZoom",
-          payload: e,
-          type: this.entry.type
-        };
-        this.flatmapMarkerZoomUpdate(!1, void 0), this.$emit("resource-selected", r);
-      }
-    },
-    /**
-    * Function used for updating the flatmap markers.
-    * It will only update the markers if zoom level has changed or
-    * the force flag is true.
-    */
-    flatmapMarkerZoomUpdate(e, r) {
-      if (!this.flatmapReady)
-        return;
-      let t = r;
-      if (t || (t = this.getFlatmapImp()), t) {
-        let o = t.getZoom().zoom;
-        if (e || this.zoomLevel !== o) {
-          this.zoomLevel = o, t.clearMarkers();
-          let a = this.settingsStore.markers, s = this.settingsStore.hoveredMarkers;
-          p(t, a, this.zoomLevel, s), this.entry.type === "MultiFlatmap" && this.restoreFeaturedMarkers(t);
-        }
-      }
-    },
-    flatmapReadyForMarkerUpdates: function(e) {
-      if (e) {
-        e.enablePanZoomEvents(!0), this.flatmapReady = !0;
-        const r = e.mapImp;
-        this.flatmapMarkerZoomUpdate(!0, r);
-      }
-    }
-  }
-};
-export {
-  k as D
-};