From 4d3b7aa853137cabcf7a7996c629f391d96335ad Mon Sep 17 00:00:00 2001
From: christof-wittreich <christof.wittreich@nasa.gov>
Date: Thu, 19 Oct 2023 09:28:13 -0500
Subject: [PATCH] WV-2913: Multiple Tracks Incorrectly Highlighted
 Simultaneously FIX (#4739)

* Added overlay removal by id

* Fixed failing test

* Added createOverlayMapping function

* Added support for multiple tracks of the same id

* Consolidated track removal into reusable function

* Fixed linting issue
---
 web/js/map/natural-events/event-track.js | 29 ++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/js/map/natural-events/event-track.js b/web/js/map/natural-events/event-track.js
index e1b8feb0a9..8cc70d8d04 100644
--- a/web/js/map/natural-events/event-track.js
+++ b/web/js/map/natural-events/event-track.js
@@ -26,7 +26,13 @@ import {
 const removePointOverlays = (map, pointsAndArrows, overlayMapping) => {
   lodashEach(pointsAndArrows, (pointOverlay) => {
     if (map.getOverlayById(pointOverlay.getId())) {
-      map.removeOverlay(overlayMapping[pointOverlay.getId()] || pointsAndArrows);
+      if (overlayMapping[pointOverlay.getId()]) {
+        overlayMapping[pointOverlay.getId()].forEach((subPointsAndArrows) => {
+          map.removeOverlay(subPointsAndArrows);
+        });
+      } else {
+        map.removeOverlay(pointsAndArrows);
+      }
     }
   });
 };
@@ -146,18 +152,33 @@ function EventTrack () {
   const createOverlayMapping = (mapArg) => {
     const overlayMapping = {};
     mapArg.getOverlays().forEach((overlay) => {
-      overlayMapping[overlay.getId()] = overlay;
+      if (!overlay.getId()) return;
+      if (!overlayMapping[overlay.getId()]) {
+        overlayMapping[overlay.getId()] = [];
+      }
+      overlayMapping[overlay.getId()].push(overlay);
     });
     return overlayMapping;
   };
 
+  const removeTrackById = (mapArg, overlayMapping, track) => {
+    const id = track?.id;
+    if (overlayMapping[id]) {
+      overlayMapping[id].forEach((subTrack) => {
+        mapArg.removeOverlay(subTrack);
+      });
+    } else {
+      mapArg.removeOverlay(track);
+    }
+  };
+
   const removeAllTracks = (mapArg) => {
     if (!mapArg) return;
     const overlayMapping = createOverlayMapping(mapArg);
     allTrackDetailsRef.current?.forEach((trackDetail) => {
       const { pointsAndArrows } = trackDetail.newTrackDetails;
       const { track } = trackDetail.newTrackDetails;
-      mapArg.removeOverlay(overlayMapping[track.id] || track);
+      removeTrackById(mapArg, overlayMapping, track);
       removePointOverlays(mapArg, pointsAndArrows, overlayMapping);
     });
   };
@@ -166,7 +187,7 @@ function EventTrack () {
     if (!mapArg) return;
     const overlayMapping = createOverlayMapping(mapArg);
     const { track, pointsAndArrows } = trackDetailsRef.current;
-    mapArg.removeOverlay(overlayMapping[track?.id] || track);
+    removeTrackById(mapArg, overlayMapping, track);
     removePointOverlays(mapArg, pointsAndArrows, overlayMapping);
 
     return {};