Wire marker selection to floaters

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

@@ -1,5 +1,5 @@
 import { useMap, Popup } from 'react-leaflet';
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 // use new ReactLeafletDriftMarker instead of DriftMarker
 import ReactLeafletDriftMarker from 'react-leaflet-drift-marker';
 import { MarkerProps, Bounds } from './Types';
@@ -15,7 +15,7 @@ export interface BoundsDriftMarkerProps extends MarkerProps {
   // selectedMarkers state
   selectedMarkers?: string[];
   // selectedMarkers setState
-  setSelectedMarkers?: React.Dispatch<React.SetStateAction<string[]>>;
+  setSelectedMarkers?: (selectedMarkers: string[] | undefined) => void;
 }
 
 /**
@@ -281,30 +281,33 @@ export default function BoundsDriftMarker({
   };
 
   // add click events for highlighting markers
-  const handleClick = (e: LeafletMouseEvent) => {
-    // check the number of mouse click and enable function for single click only
-    if (e.originalEvent.detail === 1) {
-      if (setSelectedMarkers) {
-        if (selectedMarkers?.find((id) => id === props.id)) {
-          setSelectedMarkers((prevSelectedMarkers: string[]) =>
-            prevSelectedMarkers.filter((id: string) => id !== props.id)
-          );
-        } else {
-          // select
-          setSelectedMarkers((prevSelectedMarkers: string[]) => [
-            ...prevSelectedMarkers,
-            props.id,
-          ]);
+  const handleClick = useCallback(
+    (e: LeafletMouseEvent) => {
+      // check the number of mouse click and enable function for single click only
+      if (e.originalEvent.detail === 1) {
+        if (setSelectedMarkers) {
+          if (selectedMarkers?.find((id) => id === props.id)) {
+            setSelectedMarkers(
+              selectedMarkers.filter((id: string) => id !== props.id)
+            );
+          } else if (e.originalEvent.shiftKey) {
+            // add to selection if SHIFT key pressed
+            setSelectedMarkers([...(selectedMarkers ?? []), props.id]);
+          } else {
+            // replace selection
+            setSelectedMarkers([props.id]);
+          }
         }
-      }
 
-      // Sometimes clicking throws off the popup's orientation, so reorient it
-      orientPopup(popupOrientationRef.current);
-      // Default popup behavior is to open on marker click
-      // Prevent by immediately closing it
-      e.target.closePopup();
-    }
-  };
+        // Sometimes clicking throws off the popup's orientation, so reorient it
+        orientPopup(popupOrientationRef.current);
+        // Default popup behavior is to open on marker click
+        // Prevent by immediately closing it
+        e.target.closePopup();
+      }
+    },
+    [setSelectedMarkers, selectedMarkers, props.id]
+  );
 
   const handleDoubleClick = () => {
     if (map) {

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

@@ -151,8 +151,6 @@ export interface MapVEuMapProps {
   scrollingEnabled?: boolean;
   /** pass default viewport */
   defaultViewport?: Viewport;
-  /* selectedMarkers setState (for on-click reset) **/
-  setSelectedMarkers?: React.Dispatch<React.SetStateAction<string[]>>;
   children?: React.ReactNode;
   onMapClick?: () => void;
   onMapDrag?: () => void;
@@ -179,7 +177,6 @@ function MapVEuMap(props: MapVEuMapProps, ref: Ref<PlotRef>) {
     scrollingEnabled = true,
     interactive = true,
     defaultViewport,
-    setSelectedMarkers,
     onMapClick,
     onMapDrag,
     onMapZoom,
@@ -253,7 +250,7 @@ function MapVEuMap(props: MapVEuMapProps, ref: Ref<PlotRef>) {
       zoom={viewport.zoom}
       minZoom={1}
       zoomSnap={zoomSnap}
-      wheelPxPerZoomLevel={1000}
+      wheelPxPerZoomLevel={100}
       // We add our own custom zoom control below
       zoomControl={false}
       style={{ height, width, ...style }}
@@ -296,7 +293,6 @@ function MapVEuMap(props: MapVEuMapProps, ref: Ref<PlotRef>) {
       <MapVEuMapEvents
         onViewportChanged={onViewportChanged}
         onBaseLayerChanged={onBaseLayerChanged}
-        setSelectedMarkers={setSelectedMarkers}
         onBoundsChanged={onBoundsChanged}
         onMapClick={onMapClick}
         onMapDrag={onMapDrag}
@@ -319,21 +315,17 @@ interface MapVEuMapEventsProps {
   onViewportChanged: (viewport: Viewport) => void;
   onBoundsChanged: (bondsViewport: BoundsViewport) => void;
   onBaseLayerChanged?: (newBaseLayer: BaseLayerChoice) => void;
-  setSelectedMarkers?: React.Dispatch<React.SetStateAction<string[]>>;
   onMapClick?: () => void;
   onMapDrag?: () => void;
   onMapZoom?: () => void;
 }
 
-const EMPTY_MARKERS: string[] = [];
-
 // function to handle map events such as onViewportChanged and baselayerchange
 function MapVEuMapEvents(props: MapVEuMapEventsProps) {
   const {
     onViewportChanged,
     onBaseLayerChanged,
     onBoundsChanged,
-    setSelectedMarkers,
     onMapClick,
     onMapDrag,
     onMapZoom,
@@ -376,8 +368,6 @@ function MapVEuMapEvents(props: MapVEuMapEventsProps) {
     },
     // map click event: remove selected highlight markers
     click: () => {
-      if (setSelectedMarkers != null) setSelectedMarkers(EMPTY_MARKERS);
-
       if (onMapClick != null) onMapClick();
     },
   });

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

@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { AnimationFunction, Bounds } from './Types';
 import { BoundsDriftMarkerProps } from './BoundsDriftMarker';
-import { useMap } from 'react-leaflet';
+import { useMap, useMapEvents } from 'react-leaflet';
 import { LatLngBounds } from 'leaflet';
 import { debounce, isEqual } from 'lodash';
 
@@ -27,7 +27,7 @@ export interface SemanticMarkersProps {
   /* selectedMarkers state **/
   selectedMarkers?: string[];
   /* selectedMarkers setState **/
-  setSelectedMarkers?: React.Dispatch<React.SetStateAction<string[]>>;
+  setSelectedMarkers?: (selectedMarkers: string[] | undefined) => void;
 }
 
 /**
@@ -48,6 +48,13 @@ export default function SemanticMarkers({
   // react-leaflet v3
   const map = useMap();
 
+  // cancel marker selection with a single click on the map
+  useMapEvents({
+    click: () => {
+      if (setSelectedMarkers != null) setSelectedMarkers(undefined);
+    },
+  });
+
   const [prevRecenteredMarkers, setPrevRecenteredMarkers] =
     useState<ReactElement<BoundsDriftMarkerProps>[]>(markers);
 
@@ -128,7 +135,13 @@ export default function SemanticMarkers({
         });
         // set them as current
         // any marker that already existed will move to the modified position
-        setConsolidatedMarkers(animationValues.markers);
+        if (
+          !isEqual(
+            animationValues.markers.map(({ props }) => props),
+            consolidatedMarkers.map(({ props }) => props)
+          )
+        )
+          setConsolidatedMarkers(animationValues.markers);
         // then set a timer to remove the old markers when zooming out
         // or if zooming in, switch to just the new markers straight away
         // (their starting position was set by `animationFunction`)
@@ -139,7 +152,13 @@ export default function SemanticMarkers({
         );
       } else {
         /** First render of markers **/
-        setConsolidatedMarkers(recenteredMarkers);
+        if (
+          !isEqual(
+            recenteredMarkers.map(({ props }) => props),
+            consolidatedMarkers.map(({ props }) => props)
+          )
+        )
+          setConsolidatedMarkers(recenteredMarkers);
       }
 
       // To prevent infinite loops, especially when in "other worlds",
@@ -176,7 +195,14 @@ export default function SemanticMarkers({
         );
       }
     }
-  }, [animation, map, markers, prevRecenteredMarkers, recenterMarkers]);
+  }, [
+    animation,
+    map,
+    markers,
+    prevRecenteredMarkers,
+    recenterMarkers,
+    consolidatedMarkers,
+  ]);
 
   // remove any selectedMarkers that no longer exist in the current markers
   useEffect(() => {
@@ -188,7 +214,7 @@ export default function SemanticMarkers({
       if (prunedSelectedMarkers.length < selectedMarkers.length)
         setSelectedMarkers(prunedSelectedMarkers);
     }
-  }, [consolidatedMarkers, selectedMarkers]);
+  }, [consolidatedMarkers, selectedMarkers, setSelectedMarkers]);
 
   // add the selectedMarkers props and callback
   // (and the scheduled-for-removal showPopup prop)
@@ -201,7 +227,7 @@ export default function SemanticMarkers({
           setSelectedMarkers,
         })
       ),
-    [consolidatedMarkers, selectedMarkers]
+    [consolidatedMarkers, selectedMarkers, setSelectedMarkers]
   );
 
   // this should use the unadulterated markers (which are always in the "main world")

packages/libs/components/src/map/animation_functions/geohash.tsx

@@ -40,7 +40,7 @@ export default function geohashAnimation({
   } else {
     /** No difference in geohashes - Render markers as they are **/
     zoomType = null;
-    consolidatedMarkers = [...markers];
+    consolidatedMarkers = markers;
   }
 
   return { zoomType: zoomType, markers: consolidatedMarkers };

packages/libs/components/src/stories/MarkerSelection.stories.tsx

@@ -45,7 +45,8 @@ export const DonutMarkers: Story<MapVEuMapProps> = (args) => {
   });
 
   // make an array of objects state to list highlighted markers
-  const [selectedMarkers, setSelectedMarkers] = useState<string[]>([]);
+  const [selectedMarkers, setSelectedMarkers] =
+    useState<string[] | undefined>();
 
   console.log('selectedMarkers =', selectedMarkers);
 
@@ -72,7 +73,6 @@ export const DonutMarkers: Story<MapVEuMapProps> = (args) => {
         onViewportChanged={setViewport}
         onBoundsChanged={handleViewportChanged}
         zoomLevelToGeohashLevel={leafletZoomLevelToGeohashLevel}
-        setSelectedMarkers={setSelectedMarkers}
       >
         <SemanticMarkers
           markers={markerElements}
@@ -110,7 +110,8 @@ export const ChartMarkers: Story<MapVEuMapProps> = (args) => {
   const duration = defaultAnimationDuration;
 
   // make an array of objects state to list highlighted markers
-  const [selectedMarkers, setSelectedMarkers] = useState<string[]>([]);
+  const [selectedMarkers, setSelectedMarkers] =
+    useState<string[] | undefined>();
 
   console.log('selectedMarkers =', selectedMarkers);
 
@@ -142,7 +143,6 @@ export const ChartMarkers: Story<MapVEuMapProps> = (args) => {
         onBoundsChanged={handleViewportChanged}
         showGrid={true}
         zoomLevelToGeohashLevel={leafletZoomLevelToGeohashLevel}
-        setSelectedMarkers={setSelectedMarkers}
       >
         <SemanticMarkers
           markers={markerElements}

packages/libs/eda/src/lib/core/components/layouts/types.ts

@@ -23,7 +23,7 @@ export interface LayoutOptions {
 }
 
 export interface TitleOptions {
-  getPlotSubtitle?(config: unknown): ReactNode;
+  getPlotSubtitle?(config?: unknown): ReactNode;
 }
 
 export interface LegendOptions {

packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx

@@ -98,7 +98,7 @@ import {
   barplotDefaultDependentAxisMinPos,
 } from '../../../utils/axis-range-calculations';
 import { createVisualizationPlugin } from '../VisualizationPlugin';
-import { LayoutOptions } from '../../layouts/types';
+import { LayoutOptions, TitleOptions } from '../../layouts/types';
 import { OverlayOptions, RequestOptions } from '../options/types';
 import { useDeepValue } from '../../../hooks/immutability';
 
@@ -138,6 +138,7 @@ export const barplotVisualization = createVisualizationPlugin({
 interface Options
   extends LayoutOptions,
     OverlayOptions,
+    TitleOptions,
     RequestOptions<BarplotConfig, {}, BarplotRequestParams> {}
 
 function FullscreenComponent(props: VisualizationProps<Options>) {
@@ -902,6 +903,7 @@ function BarplotViz(props: VisualizationProps<Options>) {
       .every((reqdVar) => !!(vizConfig as any)[reqdVar[0]]);
 
   const LayoutComponent = options?.layoutComponent ?? PlotLayout;
+  const plotSubtitle = options?.getPlotSubtitle?.();
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -935,7 +937,11 @@ function BarplotViz(props: VisualizationProps<Options>) {
 
       <PluginError error={data.error} outputSize={outputSize} />
       {!hideInputsAndControls && (
-        <OutputEntityTitle entity={outputEntity} outputSize={outputSize} />
+        <OutputEntityTitle
+          entity={outputEntity}
+          outputSize={outputSize}
+          subtitle={plotSubtitle}
+        />
       )}
       <LayoutComponent
         isFaceted={isFaceted(data.value)}

packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx

@@ -849,7 +849,6 @@ function BoxplotViz(props: VisualizationProps<Options>) {
     </>
   );
 
-  // plot subtitle
   const plotSubtitle = options?.getPlotSubtitle?.(
     computation.descriptor.configuration
   );