Fix storm tooltip

WFP-VAM · Feb 26, 2025 · 684cbf2 · 684cbf2
1 parent b38a654
commit 684cbf2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 32 deletions.
diff --git a/frontend/src/components/MapView/DateSelector/TimelineItems/TimelineLabel/index.tsx b/frontend/src/components/MapView/DateSelector/TimelineItems/TimelineLabel/index.tsx
@@ -17,6 +17,8 @@ function TimelineLabel({
         variant="body2"
         className={classes.dateItemLabel}
         style={{ cursor: showDraggingCursor ? 'ew-resize' : 'default' }}
+        // prevent click on the label from triggering the date selection
+        onClick={e => e.stopPropagation()}
       >
         {format(
           date.value,

diff --git a/frontend/src/components/MapView/DateSelector/TimelineItems/index.tsx b/frontend/src/components/MapView/DateSelector/TimelineItems/index.tsx
@@ -65,7 +65,7 @@ const TimelineItems = memo(
       [classes],
     );
 
-    const isShowingAAStormLayer = orderedLayers.find(
+    const isShowingAAStormLayer = orderedLayers.some(
       layer => layer.id === AnticipatoryAction.storm,
     );
 
@@ -93,31 +93,31 @@ const TimelineItems = memo(
         {dateRange.map((date, index) => {
           const isDateAvailable = availableDatesToDisplay.includes(date.value);
           return (
-            <Grid
-              key={`Root-${date.label}-${date.value}`}
-              item
-              xs
-              className={`${
-                date.isFirstDay ? classes.dateItemFull : classes.dateItem
-              }`}
-              onClick={() => clickDate(index)}
-              data-date-index={index}
+            <Tooltip
+              title={<>{getTooltipContent(date)}</>}
+              TransitionComponent={Fade}
+              TransitionProps={{ timeout: 0 }}
+              placement="top"
+              arrow
+              {...(isShowingAAStormLayer ? { interactive: true } : null)}
+              classes={{
+                tooltip: isShowingAAStormLayer
+                  ? classes.AAStormTooltip
+                  : classes.defaultTooltip,
+                arrow: isShowingAAStormLayer
+                  ? classes.AAStormTooltipArrow
+                  : undefined,
+              }}
             >
-              <Tooltip
-                title={<>{getTooltipContent(date)}</>}
-                TransitionComponent={Fade}
-                TransitionProps={{ timeout: 0 }}
-                placement="top"
-                arrow
-                {...(isShowingAAStormLayer ? { interactive: true } : null)}
-                classes={{
-                  tooltip: isShowingAAStormLayer
-                    ? classes.AAStormTooltip
-                    : classes.defaultTooltip,
-                  arrow: isShowingAAStormLayer
-                    ? classes.AAStormTooltipArrow
-                    : undefined,
-                }}
+              <Grid
+                key={`Root-${date.label}-${date.value}`}
+                item
+                xs
+                className={`${
+                  date.isFirstDay ? classes.dateItemFull : classes.dateItem
+                }`}
+                onClick={() => clickDate(index)}
+                data-date-index={index}
               >
                 <div>
                   {isShowingAAStormLayer ? (
@@ -131,13 +131,14 @@ const TimelineItems = memo(
                     />
                   )}
                 </div>
-              </Tooltip>
-              <TimelineLabel
-                locale={locale}
-                date={date}
-                showDraggingCursor={showDraggingCursor}
-              />
-            </Grid>
+
+                <TimelineLabel
+                  locale={locale}
+                  date={date}
+                  showDraggingCursor={showDraggingCursor}
+                />
+              </Grid>
+            </Tooltip>
           );
         })}
       </>