From b8b597ff9a5d777f3d50b3d01cfd49509354cf1d Mon Sep 17 00:00:00 2001
From: Julia Wu <juliawu@google.com>
Date: Tue, 6 Jun 2023 09:29:56 -0700
Subject: [PATCH] [Disaster Dashboard] Fix zoom buttons on disaster specific
 maps (#2776)

Fixes a bug where the (+)/(-) zoom buttons on the individual disaster
maps don't do anything on click. This PR makes the ids of each button
div unique, which fixes the issue.


https://github.com/datacommonsorg/website/assets/4034366/e9cc526f-29a8-4e98-b1e0-34a4a9244aea
---
 .../tiles/disaster_event_map_tile.tsx         | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/js/components/tiles/disaster_event_map_tile.tsx b/static/js/components/tiles/disaster_event_map_tile.tsx
index e4931b93be..d651e0f355 100644
--- a/static/js/components/tiles/disaster_event_map_tile.tsx
+++ b/static/js/components/tiles/disaster_event_map_tile.tsx
@@ -28,6 +28,7 @@ import {
   addPolygonLayer,
   drawD3Map,
   getProjection,
+  MapZoomParams,
 } from "../../chart/draw_d3_map";
 import {
   GeoJsonData,
@@ -110,7 +111,10 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
     _.isNull(props.disasterEventData);
   const shouldShowMap =
     !isInitialLoading && !_.isEmpty(baseMapGeoJson.features);
-
+  const zoomParams = {
+    zoomInButtonId: `${ZOOM_IN_BUTTON_ID}-${props.id}`,
+    zoomOutButtonId: `${ZOOM_OUT_BUTTON_ID}-${props.id}`,
+  };
   useEffect(() => {
     if (_.isNull(props.disasterEventData)) {
       return;
@@ -143,7 +147,8 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
         baseMapGeoJson,
         props.disasterEventData,
         polygonGeoJson,
-        pathGeoJson
+        pathGeoJson,
+        zoomParams
       );
     }
   }, [
@@ -187,13 +192,13 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
           {shouldShowMap && (
             <div className={`${CSS_SELECTOR_PREFIX}-zoom-button-section`}>
               <div
-                id={ZOOM_IN_BUTTON_ID}
+                id={zoomParams.zoomInButtonId}
                 className={`${CSS_SELECTOR_PREFIX}-zoom-button`}
               >
                 <i className="material-icons">add</i>
               </div>
               <div
-                id={ZOOM_OUT_BUTTON_ID}
+                id={zoomParams.zoomOutButtonId}
                 className={`${CSS_SELECTOR_PREFIX}-zoom-button`}
               >
                 <i className="material-icons">remove</i>
@@ -343,14 +348,11 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
     geoJsonData: GeoJsonData,
     disasterEventData: Record<string, DisasterEventPointData>,
     polygonGeoJson: GeoJsonData,
-    pathGeoJson: GeoJsonData
+    pathGeoJson: GeoJsonData,
+    zoomParams: MapZoomParams
   ): void {
     const width = svgContainerRef.current.offsetWidth;
     const height = svgHeight;
-    const zoomParams = {
-      zoomInButtonId: ZOOM_IN_BUTTON_ID,
-      zoomOutButtonId: ZOOM_OUT_BUTTON_ID,
-    };
     const isUsaPlace = isChildPlaceOf(
       props.place.dcid,
       USA_PLACE_DCID,