From a0557e665df7a7bfc4fe83703f3044ed5d66132f Mon Sep 17 00:00:00 2001
From: christof-wittreich <christof.wittreich@nasa.gov>
Date: Tue, 17 Oct 2023 14:34:32 -0500
Subject: [PATCH] WV-2913: Multiple Tracks Incorrectly Highlighted
 Simultaneously  (#4736)

* Added overlay removal by id

* Fixed failing test

* Added createOverlayMapping function
---
 web/js/map/natural-events/event-track.js | 25 +++++++++++++++++-------
 web/js/map/natural-events/util.js        |  2 +-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/js/map/natural-events/event-track.js b/web/js/map/natural-events/event-track.js
index c22878f5d6..e1b8feb0a9 100644
--- a/web/js/map/natural-events/event-track.js
+++ b/web/js/map/natural-events/event-track.js
@@ -23,10 +23,10 @@ import {
   getTrackLines, getTrackPoint, getArrows, getClusterPointEl,
 } from './util';
 
-const removePointOverlays = (map, pointsAndArrows) => {
+const removePointOverlays = (map, pointsAndArrows, overlayMapping) => {
   lodashEach(pointsAndArrows, (pointOverlay) => {
     if (map.getOverlayById(pointOverlay.getId())) {
-      map.removeOverlay(pointOverlay);
+      map.removeOverlay(overlayMapping[pointOverlay.getId()] || pointsAndArrows);
     }
   });
 };
@@ -143,20 +143,31 @@ function EventTrack () {
     showAllTracksRef.current = showAllTracks;
   }, [showAllTracks]);
 
+  const createOverlayMapping = (mapArg) => {
+    const overlayMapping = {};
+    mapArg.getOverlays().forEach((overlay) => {
+      overlayMapping[overlay.getId()] = overlay;
+    });
+    return overlayMapping;
+  };
+
   const removeAllTracks = (mapArg) => {
+    if (!mapArg) return;
+    const overlayMapping = createOverlayMapping(mapArg);
     allTrackDetailsRef.current?.forEach((trackDetail) => {
       const { pointsAndArrows } = trackDetail.newTrackDetails;
       const { track } = trackDetail.newTrackDetails;
-      mapArg.removeOverlay(track);
-      removePointOverlays(mapArg, pointsAndArrows);
+      mapArg.removeOverlay(overlayMapping[track.id] || track);
+      removePointOverlays(mapArg, pointsAndArrows, overlayMapping);
     });
   };
 
   const removeTrack = (mapArg) => {
     if (!mapArg) return;
+    const overlayMapping = createOverlayMapping(mapArg);
     const { track, pointsAndArrows } = trackDetailsRef.current;
-    mapArg.removeOverlay(track);
-    removePointOverlays(mapArg, pointsAndArrows);
+    mapArg.removeOverlay(overlayMapping[track?.id] || track);
+    removePointOverlays(mapArg, pointsAndArrows, overlayMapping);
 
     return {};
   };
@@ -326,7 +337,7 @@ function EventTrack () {
         if (prevMap) {
           update(null);
           removeTrack(prevMap);
-          removePointOverlays(prevMap, trackDetailsRef.current.pointsAndArrows);
+          removePointOverlays(prevMap, trackDetailsRef.current.pointsAndArrows, createOverlayMapping(prevMap));
           if (showAllTracksRef.current) {
             removeAllTracks(prevMap);
           }
diff --git a/web/js/map/natural-events/util.js b/web/js/map/natural-events/util.js
index 89180ee98b..b27569db0f 100644
--- a/web/js/map/natural-events/util.js
+++ b/web/js/map/natural-events/util.js
@@ -219,7 +219,7 @@ export const getTrackLines = function(map, trackCoords, eventID, date, callback,
     insertFirst: true,
     stopEvent: false,
     element: svgEl,
-    id: 'event-track',
+    id: `event-track-${eventID}`,
   });
 };