Merge pull request #209 from ddjnw1yu/zoom-in-marker

zoom in marker

package.json

@@ -48,8 +48,8 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.0.2",
-    "@abi-software/map-side-bar": "2.1.0",
+    "@abi-software/flatmapvuer": "1.0.1",
+    "@abi-software/map-side-bar": "^2.2.0",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "1.0.1",
     "@abi-software/simulationvuer": "1.0.0",

src/components/SplitFlow.vue

@@ -28,6 +28,7 @@
           @actionClick="actionClick"
           @tabClicked="tabClicked"
           @search-changed="searchChanged($event)"
+          @hover-changed="hoverChanged($event)"
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
         />
@@ -253,6 +254,11 @@ export default {
       }
       payload.data.cb(suggestions);
     },
+    hoverChanged: function (data) {
+      const hoverEntries = data && data.anatomy ? data.anatomy : []
+      this.settingsStore.updateHoveredMarkers(hoverEntries);
+      EventBus.emit("markerUpdate");
+    },
     searchChanged: function (data) {
       if (data && data.type == "query-update") {
         this.search = data.value;

src/components/viewers/MultiFlatmap.vue

@@ -431,6 +431,14 @@ export default {
       transform: translate(45px, -7px);
     }
   }
+  &.hovered-marker {
+    cursor: pointer !important;
+    z-index: 2;
+    div {
+      scale: 2;
+      transform: translate(0px, -5px);
+    }
+  }
 }
 
 </style>

src/mixins/DynamicMarkerMixin.js

@@ -9,7 +9,7 @@ import { useSettingsStore } from '../stores/settings';
 * 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) => {
+const checkMarkersAtZoomLevel = (flatmapImp, markers, zoomLevel, hoveredMarkers) => {
   if (markers) {
     markers.forEach(id => {
       let foundInArray = false;
@@ -19,7 +19,9 @@ const checkMarkersAtZoomLevel = (flatmapImp, markers, zoomLevel) => {
         if (markerZoomLevels[i].id === id) {
           foundInArray = true;
           if (zoomLevel >= markerZoomLevels[i].showAtZoom) {
-            flatmapImp.addMarker(id, {className: "standard-marker"});
+            let markerClass = "standard-marker"
+            if (hoveredMarkers.includes(id)) markerClass = "hovered-marker"
+            flatmapImp.addMarker(id, { className: markerClass });
           }
           break;
         }
@@ -69,7 +71,8 @@ export default {
           this.zoomLevel = currentZoom;
           flatmapImp.clearMarkers();
           let markers = this.settingsStore.markers;
-          checkMarkersAtZoomLevel(flatmapImp, markers, this.zoomLevel);
+          let hoveredMarkers = this.settingsStore.hoveredMarkers;
+          checkMarkersAtZoomLevel(flatmapImp, markers, this.zoomLevel, hoveredMarkers);
           if (this.entry.type === "MultiFlatmap") {
             this.restoreFeaturedMarkers(flatmapImp);
           }

src/stores/settings.js

@@ -17,6 +17,7 @@ export const useSettingsStore = defineStore('settings', {
       facets: { species: [], gender: [], organ: [] },
       facetLabels: [],
       markers: [],
+      hoveredMarkers: [],
       featuredMarkers: [],
       featuredMarkerIdentifiers: [],
       featuredMarkerDois: [],
@@ -67,6 +68,9 @@ export const useSettingsStore = defineStore('settings', {
     updateMarkers(markers) {
       this.markers = markers;
     },
+    updateHoveredMarkers(markers) {
+      this.hoveredMarkers = markers;
+    },
     updateFeatured(datasetIdentifiers) {
       this.featuredMarkerIdentifiers = new Array(datasetIdentifiers.length);
       this.featuredMarkers = new Array(datasetIdentifiers.length);