testing multiple markers selection with SAM

packages/libs/components/public/css/vb-popbio-maps.css

@@ -95,16 +95,10 @@ body {
   text-align: left;
   line-height: 15px;
   color: #555555;
-  /* DKDK changed margin-bottom from 5 to 0 */
   margin-bottom: 0px !important;
   border-radius: 0 !important;
-  /* DKDK change these for mapveu v2
-    width         : 280px;
-    min-height    : 300px; */
   width: 250px;
   min-height: 210px;
-  /* DKDK combine with other CSS defined */
-  /* padding: 6px 8px 6px 8px; */
   padding: 0px 0px 0px 0px;
   background: white;
   /*max-width     : 230px;
@@ -128,17 +122,14 @@ body {
   min-width: 50px;
   text-align: right;
   font-weight: 600;
-  /*DKDK VB-8650*/
   width: 27%;
 }
 
 .summ-by-value {
   float: left;
-  /*DKDK VB-8650 */
-  /*width: 79%;*/
 }
 
-/*DKDK VB-8650 add below class to handle active-legend and external link separately*/
+/* VB-8650 add below class to handle active-legend and external link separately*/
 .active-legend-area {
   float: left;
   width: 73%;
@@ -150,18 +141,11 @@ body {
 
 .legend {
   position: absolute;
-  /* DKDK set bottom to be smaller
-    bottom: 40px; */
   bottom: 10px;
   right: 0px;
   z-index: 10000;
 }
 
-/* .legend > div {
-    /* DKDK change padding from 0 8px to 0 4px
-    padding: 0 2px;
-} */
-
 .legend p {
   font-size: smaller;
   word-wrap: break-word;
@@ -212,7 +196,7 @@ body {
 
 .mapboxbottom .overlaybottom {
   position: absolute;
-  /*DKDK VB-8707 change bottom from 3 to 25 px*/
+  /* VB-8707 change bottom from 3 to 25 px*/
   bottom: 25px;
   left: 40%;
   width: 30%;
@@ -278,12 +262,29 @@ path,
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;
 }
-.highlight-marker {
-  background-clip: padding-box;
-  border-radius: 30px;
-  box-shadow: 0px 0px 0px 4px rgba(255, 255, 0, 1);
+
+/* donut and bubble markers highlight */
+.highlight-donutmarker,
+.highlight-bubblemarker {
+  /* background-clip: padding-box; */
+  border-radius: 50%;
+  /* add inset to reduce a gap between the element and the box-shadow */
+  box-shadow: 2.5px 2.5px 0px 6px rgba(255, 255, 0, 1),
+    2.5px 2.5px 0px 2px rgba(255, 255, 0, 1) inset;
   z-index: 9999 !important;
 }
+
+/* chart marker highlight */
+.highlight-chartmarker {
+  /* background-clip: padding-box; */
+  /* the rounded corner of the chart marker has 10px in radius */
+  border-radius: 10px;
+  /* add inset to reduce a gap between the element and the box-shadow */
+  box-shadow: -1px -0.5px 0px 6px rgba(255, 255, 0, 1),
+    -1px -0.5px 0px 2px rgba(255, 255, 0, 1) inset;
+  z-index: 9999 !important;
+}
+
 .top-marker {
   z-index: 3100 !important;
 }
@@ -449,7 +450,7 @@ path,
   fill: none;
   stroke: #000000;
   stroke-width: 1px;
-  /* DKDK temporarily block below */
+  /* temporarily block below */
   /* color-rendering : optimizeQuality !important; */
   shape-rendering: crispEdges !important;
   text-rendering: geometricPrecision !important;
@@ -541,7 +542,7 @@ html {
   border-radius: 0px;
   box-shadow: none;
 }
-/* x-jsrender active terms DKDK VB-8650 */
+/* x-jsrender active terms VB-8650 */
 .active-term,
 .active-legend,
 .active-others,
@@ -741,13 +742,13 @@ div.hint div {
   text-overflow: ellipsis;
 }
 
-/* DKDK VB-8650 */
+/* VB-8650 */
 .active-legend,
 .insertExternalLinkLegend {
   line-height: 17px;
 }
 
-/* DKDK VB-8650 */
+/* VB-8650 */
 /* .active-legend i, #Other-Terms-List i{ */
 .active-legend .summ-by-value .summ-by-value-item,
 .insertExternalLinkLegend .summ-by-value .summ-by-value-item,
@@ -1079,7 +1080,7 @@ div.hint div {
   text-align: center;
 }
 
-/*DKDK add vectorbase-icon*/
+/* add vectorbase-icon*/
 #vectorbase-icon {
   height: 40px;
   font-size: 12pt;
@@ -1274,7 +1275,7 @@ div.hint div {
   text-align: center;
 }
 
-/* DKDK VB-8112 disabling cursor change on pie chart legend */
+/* VB-8112 disabling cursor change on pie chart legend */
 .nvd3 .nv-legend .nv-series {
   cursor: default !important;
 }
@@ -1291,7 +1292,7 @@ div.hint div {
   cursor: ew-resize;
 }
 
-/* DKDK VB-8650 related CSS */
+/* VB-8650 related CSS */
 /*.insertExternalLinkLegend .insertExternalLink {
     float: initial;
 }

packages/libs/components/src/map/BoundsDriftMarker.tsx

@@ -1,15 +1,46 @@
 import { useMap, Popup } from 'react-leaflet';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 // use new ReactLeafletDriftMarker instead of DriftMarker
 import ReactLeafletDriftMarker from 'react-leaflet-drift-marker';
 import { MarkerProps, Bounds } from './Types';
 import L, { LeafletMouseEvent, LatLngBounds } from 'leaflet';
 
+// define markerData type to have as many info as possible
+export interface markerDataProp {
+  id: string;
+  latLng: {
+    lat: number;
+    lng: number;
+  };
+  data?: {
+    value: number;
+    label: string;
+    color?: string;
+  }[];
+  // bubble marker's data is not array, so define it as bubbleData
+  bubbleData?: {
+    value: number;
+    diameter?: number;
+    colorValue?: number;
+    colorLabel?: string;
+    color?: string;
+  };
+  markerType: 'donut' | 'chart' | 'bubble';
+}
+
 export interface BoundsDriftMarkerProps extends MarkerProps {
   bounds: Bounds;
   duration: number;
   // A class to add to the popup element
   popupClass?: string;
+  // selectedMarkers state
+  selectedMarkers?: markerDataProp[];
+  // selectedMarkers setState
+  setSelectedMarkers?: React.Dispatch<React.SetStateAction<markerDataProp[]>>;
+  // marker type to be used for highlighting markers
+  markerType?: 'donut' | 'chart' | 'bubble';
+  // marker data
+  markerData?: markerDataProp;
 }
 
 /**
@@ -39,8 +70,14 @@ export default function BoundsDriftMarker({
   popupContent,
   popupClass,
   zIndexOffset,
+  selectedMarkers,
+  setSelectedMarkers,
+  markerType,
+  markerData,
+  ...props
 }: BoundsDriftMarkerProps) {
   const map = useMap();
+
   const boundingBox = new LatLngBounds([
     [bounds.southWest.lat, bounds.southWest.lng],
     [bounds.northEast.lat, bounds.northEast.lng],
@@ -270,7 +307,54 @@ export default function BoundsDriftMarker({
     e.target.closePopup();
   };
 
+  // add click events for highlighting markers
   const handleClick = (e: LeafletMouseEvent) => {
+    // hightlight donutmarker and highlight chartmarker
+    if (
+      e.target._icon.classList.contains('highlight-donutmarker') ||
+      e.target._icon.classList.contains('highlight-chartmarker') ||
+      e.target._icon.classList.contains('highlight-bubblemarker')
+    ) {
+      if (markerType === 'donut')
+        e.target._icon.classList.remove('highlight-donutmarker');
+      else if (markerType === 'chart')
+        e.target._icon.classList.remove('highlight-chartmarker');
+      else if (markerType === 'bubble')
+        e.target._icon.classList.remove('highlight-bubblemarker');
+
+      if (
+        selectedMarkers != null &&
+        setSelectedMarkers != null &&
+        markerData != null
+      ) {
+        // functional updates
+        setSelectedMarkers((prevSelectedMarkers: markerDataProp[]) =>
+          prevSelectedMarkers.filter(
+            (item: markerDataProp) => item.id !== props.id
+          )
+        );
+      }
+    } else {
+      if (markerType === 'donut')
+        e.target._icon.classList.add('highlight-donutmarker');
+      else if (markerType === 'chart')
+        e.target._icon.classList.add('highlight-chartmarker');
+      else if (markerType === 'bubble')
+        e.target._icon.classList.add('highlight-bubblemarker');
+
+      if (
+        selectedMarkers != null &&
+        setSelectedMarkers != null &&
+        markerData != null
+      ) {
+        // functional updates
+        setSelectedMarkers((prevSelectedMarkers: markerDataProp[]) => [
+          ...prevSelectedMarkers,
+          markerData,
+        ]);
+      }
+    }
+
     // Sometimes clicking throws off the popup's orientation, so reorient it
     orientPopup(popupOrientationRef.current);
     // Default popup behavior is to open on marker click

packages/libs/components/src/map/BubbleMarker.tsx

@@ -4,10 +4,13 @@ import BoundsDriftMarker, { BoundsDriftMarkerProps } from './BoundsDriftMarker';
 
 import { ContainerStylesAddon } from '../types/plots';
 
+import { markerDataProp } from './BoundsDriftMarker';
+
 export interface BubbleMarkerProps extends BoundsDriftMarkerProps {
   data: {
     /* The size value */
     value: number;
+    // make this undefined?
     diameter: number;
     /* The color value (shown in the popup) */
     colorValue?: number;
@@ -18,17 +21,48 @@ export interface BubbleMarkerProps extends BoundsDriftMarkerProps {
   // isAtomic: add a special thumbtack icon if this is true
   isAtomic?: boolean;
   onClick?: (event: L.LeafletMouseEvent) => void | undefined;
+  /* add selectedMarkers state and its setState props but these are not used for this BubbleMarker **/
+  selectedMarkers?: markerDataProp[];
+  setSelectedMarkers?: React.Dispatch<React.SetStateAction<markerDataProp[]>>;
 }
 
 /**
  * this is a SVG bubble marker icon
  */
 export default function BubbleMarker(props: BubbleMarkerProps) {
+  const selectedMarkers = props.selectedMarkers;
+  const setSelectedMarkers = props.setSelectedMarkers;
+
   const { html: svgHTML, diameter: size } = bubbleMarkerSVGIcon(props);
 
+  // make a prop to pass to BoundsDriftMarker
+  const markerData: markerDataProp = {
+    id: props.id,
+    latLng: props.position,
+    // use bubbleData, not data for bubble marker
+    // bubbleData: props.data,
+    markerType: 'bubble',
+  };
+
+  // add class, highlight-chartmarker, for panning
+  // Note: map panning calls for new data request, resulting that marker elements are completely regenerated, which causes new className without highlighting
+  // Thus, it is necessary to add a highlight for a marker based on whether it is included in the selectedMarkers
+  // One inevitable disadvantage is that this possibly results in on & off of highlighting (may look like a blink)
+  const addHighlightClassName =
+    selectedMarkers != null &&
+    selectedMarkers.length > 0 &&
+    selectedMarkers.some((selectedMarker) => selectedMarker.id === props.id)
+      ? ' highlight-bubblemarker'
+      : '';
+
   // set icon as divIcon
   const SVGBubbleIcon = L.divIcon({
-    className: 'leaflet-canvas-icon', // may need to change this className but just leave it as it for now
+    className:
+      'leaflet-canvas-icon ' +
+      'marker-id-' +
+      props.id +
+      ' bubble-marker' +
+      addHighlightClassName,
     iconSize: new L.Point(size, size), // this will make icon to cover up SVG area!
     iconAnchor: new L.Point(size / 2, size / 2), // location of topleft corner: this is used for centering of the icon like transform/translate in CSS
     html: svgHTML, // divIcon HTML svg code generated above
@@ -70,6 +104,11 @@ export default function BubbleMarker(props: BubbleMarkerProps) {
         },
       }}
       showPopup={props.showPopup}
+      // pass selectedMarkers state and setState
+      selectedMarkers={selectedMarkers}
+      setSelectedMarkers={setSelectedMarkers}
+      markerType={'bubble'}
+      markerData={markerData}
     />
   );
 }