when selecting multiple alerts, force those alerts to be hovered

forest-watcher · Feb 16, 2023 · 3524286 · 3524286
1 parent 8be0150
commit 3524286
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/ui/Map/components/layers/SquareClusterMarkers.tsx b/src/components/ui/Map/components/layers/SquareClusterMarkers.tsx
@@ -31,6 +31,7 @@ export interface IProps {
   points: IPoint[];
   pointStyle?: Record<any, any>;
   onSquareSelect?: (ids: string[], point: mapboxgl.Point) => void;
+  forceHoveredSquareIds?: string[] | null;
   selectedSquareIds?: string[] | null;
   mapRef: MapInstance | null;
   goToPoints?: boolean;
@@ -48,6 +49,7 @@ const SquareClusterMarkers: FC<IProps> = props => {
     pointDataType = EPointDataTypes.Reports,
     points,
     onSquareSelect,
+    forceHoveredSquareIds,
     selectedSquareIds,
     mapRef,
     pointStyle = defaultPointStyle,
@@ -85,7 +87,7 @@ const SquareClusterMarkers: FC<IProps> = props => {
             id: point.id,
             icon: iconGenerator(
               point.type || "",
-              point.id === hoveredPoint,
+              point.id === hoveredPoint || forceHoveredSquareIds?.includes(point.id),
               selectedPoints?.length
                 ? canMultiSelect
                   ? selectedPoints.includes(point.id)
@@ -96,7 +98,7 @@ const SquareClusterMarkers: FC<IProps> = props => {
           })
         )
       ),
-    [hoveredPoint, iconGenerator, points, selectedPoints, canMultiSelect]
+    [hoveredPoint, iconGenerator, points, selectedPoints, forceHoveredSquareIds, canMultiSelect]
   );
 
   useEffect(() => {

diff --git a/src/pages/reports/investigation/components/AreaAlertSource.tsx b/src/pages/reports/investigation/components/AreaAlertSource.tsx
@@ -110,6 +110,7 @@ const AreaAlertMapSource: FC<IProps> = props => {
         id="alerts"
         pointDataType={EPointDataTypes.Alerts}
         points={alertPoints}
+        forceHoveredSquareIds={multipleAlertsToPick}
         selectedSquareIds={selectedAlertIds}
         pointStyle={{
           ...pointStyle,