AA storm feature / revisit landfall popup display

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormDatePopup/index.tsx

@@ -2,7 +2,7 @@ import { MapLayerMouseEvent, Popup } from 'react-map-gl/maplibre';
 import _React, { useCallback, useState } from 'react';
 import { createStyles, makeStyles, Typography } from '@material-ui/core';
 import { useMapCallback } from 'utils/map-utils';
-import { formatInUTC, getDateInUTC } from '../utils';
+import { formatWindPointDate } from '../utils';
 import {
   FeaturePropertyDataType,
   TimeSeries,
@@ -48,16 +48,6 @@ function AAStormDatePopup({ timeSeries }: AAStormDatePopupProps) {
     onMouseLeave,
   );
 
-  function getDayAndTime(time: string) {
-    const dateInUTC = getDateInUTC(time);
-
-    if (!dateInUTC) {
-      return '';
-    }
-
-    return formatInUTC(dateInUTC, 'dd - Kaaa');
-  }
-
   const lastAnalyzedTimePoint: TimeSeriesFeature | undefined =
     // eslint-disable-next-line fp/no-mutating-methods
     timeSeries?.features
@@ -73,8 +63,8 @@ function AAStormDatePopup({ timeSeries }: AAStormDatePopupProps) {
       return null;
     }
 
-    const lng = feature.geometry.coordinates[0];
-    const lat = feature.geometry.coordinates[1];
+    const [lng, lat] = feature.geometry.coordinates;
+
     const { time } = feature.properties;
 
     return (
@@ -90,7 +80,7 @@ function AAStormDatePopup({ timeSeries }: AAStormDatePopupProps) {
         className={classes.popup}
       >
         <Typography className={classes.toolTipDate} variant="body1">
-          {getDayAndTime(time)}
+          {formatWindPointDate(time)}
         </Typography>
       </Popup>
     );

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormLandfallPopup/AAStormLandfallMarker/AAStormLandfallMarker.tsx

@@ -0,0 +1,87 @@
+import { Popup } from 'react-map-gl/maplibre';
+import { ParsedStormData } from 'context/anticipatoryAction/AAStormStateSlice/parsedStormDataTypes';
+import _React from 'react';
+import { createStyles, makeStyles, Typography } from '@material-ui/core';
+import { findLandfallWindPoint, hasLandfallOccured } from '../utils';
+import { formatWindPointDate } from '../../utils';
+
+function AAStormLandfallMarker({ stormData }: AAStormLandfallPopupProps) {
+  const classes = useStyles();
+
+  const windpoint = findLandfallWindPoint(stormData);
+
+  if (!windpoint) {
+    return null;
+  }
+
+  const isVisible = !hasLandfallOccured(stormData);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const [lng, lat] = windpoint.geometry.coordinates;
+
+  return (
+    <Popup
+      longitude={lng}
+      latitude={lat}
+      anchor="bottom"
+      offset={25}
+      closeButton={false}
+      closeOnClick={false}
+      className={classes.popup}
+    >
+      <Typography className={classes.tooltipText} variant="body1">
+        LF: {formatWindPointDate(windpoint.properties.time)}
+      </Typography>
+    </Popup>
+  );
+}
+
+interface AAStormLandfallPopupProps {
+  stormData: ParsedStormData;
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    tooltipText: {
+      fontSize: '14px',
+      fontWeight: 600,
+      lineHeight: '14px',
+      paddingBottom: '2px',
+    },
+
+    popup: {
+      '& > .maplibregl-popup-content': {
+        border: 'none',
+        padding: '4px',
+        borderRadius: '4px',
+        background: 'white',
+        boxShadow: 'inset 0px 0px 0px 1px #A4A4A4',
+        position: 'relative',
+      },
+
+      '& > .maplibregl-popup-tip': {
+        display: 'none',
+      },
+
+      // hack to display the popup tip without overlapping border
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        left: '50%',
+        bottom: '-5px',
+        width: '10px',
+        height: '10px',
+        background: 'white',
+        transform: 'translateX(-50%) rotate(45deg)',
+        borderWidth: '0px 1px 1px 0px',
+        borderColor: '#A4A4A4',
+        borderStyle: 'solid',
+      },
+    },
+  }),
+);
+
+export default AAStormLandfallMarker;

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormLandfallPopup/index.tsx

@@ -1,26 +1,42 @@
 import { createStyles, makeStyles } from '@material-ui/core';
-import { Point } from 'geojson';
+import { Offset } from 'maplibre-gl';
 import { Popup } from 'react-map-gl/maplibre';
 import { LandfallInfo } from 'context/anticipatoryAction/AAStormStateSlice/parsedStormDataTypes';
+import { AAStormTimeSeriesFeature } from 'context/anticipatoryAction/AAStormStateSlice/rawStormDataTypes';
 import PopupContent from './PopupContent';
+import { isFeatureAtLandfallEstimateTime } from './utils';
+
+const verticalLandfallPopupOffset = -50;
+const horizontalLandfallPopupOffset = 25;
 
 function AAStormLandfallPopup({
-  point,
+  feature,
   onClose,
   landfallInfo,
   reportDate,
 }: AAStormLandfallPopupProps) {
   const classes = useStyles();
 
-  const lng = point.coordinates[0];
-  const lat = point.coordinates[1];
+  if (!landfallInfo) {
+    return null;
+  }
+
+  const isVisible = isFeatureAtLandfallEstimateTime(feature, landfallInfo.time);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const [lng, lat] = feature.geometry.coordinates;
 
   return (
     <Popup
       longitude={lng}
       latitude={lat}
-      anchor="top"
-      offset={15}
+      anchor="top-left"
+      offset={
+        [verticalLandfallPopupOffset, horizontalLandfallPopupOffset] as Offset
+      }
       closeButton={false}
       onClose={onClose}
       closeOnClick
@@ -33,8 +49,8 @@ function AAStormLandfallPopup({
 }
 
 interface AAStormLandfallPopupProps {
-  point: Point;
-  landfallInfo: LandfallInfo;
+  feature: AAStormTimeSeriesFeature;
+  landfallInfo: LandfallInfo | undefined;
   reportDate: string;
   onClose: () => void;
 }
@@ -43,15 +59,31 @@ const useStyles = makeStyles(() =>
   createStyles({
     popup: {
       width: '280px',
-
       '& > .maplibregl-popup-content': {
         background: '#F1F1F1',
         padding: '0px 2px 0px 2px',
+        border: 'none',
+        borderRadius: '4px',
+        boxShadow: 'inset 0px 1px 0px 0px #A4A4A4',
+        position: 'relative',
       },
+
       '& > .maplibregl-popup-tip': {
-        borderBottomColor: '#F1F1F1',
-        borderLeftWidth: '8px',
-        borderRightWidth: '8px',
+        display: 'none',
+      },
+
+      // hack to display the popup tip without overlapping border
+      '&::after': {
+        background: '#F1F1F1',
+        content: '""',
+        position: 'absolute',
+        left: `${horizontalLandfallPopupOffset * 2}px`,
+        top: -5,
+        width: '10px',
+        height: '10px',
+
+        transform: 'translateX(-50%) rotate(45deg)',
+        boxShadow: 'inset 1px 1px 0px 0px #A4A4A4',
       },
     },
   }),

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormLandfallPopup/utils.ts

@@ -0,0 +1,60 @@
+import { ParsedStormData } from 'context/anticipatoryAction/AAStormStateSlice/parsedStormDataTypes';
+import { AAStormTimeSeriesFeature } from 'context/anticipatoryAction/AAStormStateSlice/rawStormDataTypes';
+import { getDateInUTC } from '../utils';
+
+function getLandfallEstimatedTime(stormData: ParsedStormData) {
+  const { landfall } = stormData;
+  if (!landfall) {
+    return null;
+  }
+
+  return landfall.time;
+}
+
+/* find the wind point which time corresponds to the landfall estimated time */
+export function findLandfallWindPoint(stormData: ParsedStormData) {
+  const landfallEstimatedtime = getLandfallEstimatedTime(stormData);
+
+  const windpoints = stormData.timeSeries?.features;
+  const foundWindPoint = windpoints?.find(windpoint =>
+    isFeatureAtLandfallEstimateTime(windpoint, landfallEstimatedtime),
+  );
+
+  return foundWindPoint || null;
+}
+
+export function isFeatureAtLandfallEstimateTime(
+  feature: AAStormTimeSeriesFeature,
+  landfallEstimatedtime: string[] | null,
+) {
+  return (
+    landfallEstimatedtime &&
+    feature.properties.time === landfallEstimatedtime[0]
+  );
+}
+
+export function hasLandfallOccured(stormData: ParsedStormData) {
+  const reportTime = stormData.forecastDetails?.reference_time;
+
+  const reportTimeDate = getDateInUTC(reportTime);
+
+  if (!reportTimeDate) {
+    return null;
+  }
+
+  const landfallEstimatedtimeRange = getLandfallEstimatedTime(stormData);
+
+  if (!landfallEstimatedtimeRange) {
+    return null;
+  }
+
+  const landfallEstimatedStartTime = getDateInUTC(
+    landfallEstimatedtimeRange[0],
+  );
+
+  if (!landfallEstimatedStartTime) {
+    return null;
+  }
+
+  return reportTimeDate?.valueOf() > landfallEstimatedStartTime.valueOf();
+}

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/index.tsx

@@ -23,10 +23,13 @@ import { useWindStatesByTime } from 'components/MapView/DateSelector/TimelineIte
 import { getAAColor } from 'components/MapView/LeftPanel/AnticipatoryActionPanel/AnticipatoryActionStormPanel/utils';
 import { AACategory } from 'context/anticipatoryAction/AAStormStateSlice/parsedStormDataTypes';
 import anticipatoryActionIcons from 'components/Common/AnticipatoryAction/icons';
+import { AAStormTimeSeriesFeature } from 'context/anticipatoryAction/AAStormStateSlice/rawStormDataTypes';
 import AAStormDatePopup from './AAStormDatePopup';
 import AAStormLandfallPopup from './AAStormLandfallPopup';
 
 import { TimeSeries } from './types';
+import AAStormLandfallMarker from './AAStormLandfallPopup/AAStormLandfallMarker/AAStormLandfallMarker';
+import { parseGeoJsonFeature } from './utils';
 
 interface AnticipatoryActionStormLayerProps {
   layer: AnticipatoryActionLayerProps;
@@ -104,8 +107,10 @@ const AnticipatoryActionStormLayer = React.memo(
     ) as LayerData<BoundaryLayerProps> | undefined;
     const { data: boundaryData } = boundaryLayerState || {};
 
-    const [selectedFeature, setSelectedFeature] =
-      useState<Feature<Point> | null>(null);
+    const [selectedFeature, setSelectedFeature] = useState<{
+      feature: AAStormTimeSeriesFeature | null;
+      hasBeenDeselected: boolean;
+    }>({ feature: null, hasBeenDeselected: false });
 
     function enhanceTimeSeries(timeSeries: TimeSeries) {
       const { features, ...timeSeriesRest } = timeSeries;
@@ -169,7 +174,7 @@ const AnticipatoryActionStormLayer = React.memo(
     }
 
     function landfallPopupCloseHandler() {
-      setSelectedFeature(null);
+      setSelectedFeature({ feature: null, hasBeenDeselected: true });
     }
 
     // Load all images from the mapping
@@ -227,7 +232,19 @@ const AnticipatoryActionStormLayer = React.memo(
       e.preventDefault();
       dispatch(hidePopup()); // hides the black tooltip containing the district names
       const feature = e.features?.[0];
-      setSelectedFeature(feature as Feature<Point>);
+
+      if (!selectedFeature.feature) {
+        if (selectedFeature.hasBeenDeselected) {
+          setSelectedFeature({
+            feature: null,
+            hasBeenDeselected: false,
+          });
+        }
+        setSelectedFeature({
+          feature: parseGeoJsonFeature(feature),
+          hasBeenDeselected: false,
+        });
+      }
     };
 
     useMapCallback<'click', null>(
@@ -436,14 +453,16 @@ const AnticipatoryActionStormLayer = React.memo(
 
         <AAStormDatePopup timeSeries={stormData.timeSeries} />
 
-        {selectedFeature && stormData.landfall?.time && (
+        {selectedFeature.feature && (
           <AAStormLandfallPopup
-            point={selectedFeature.geometry}
+            feature={selectedFeature.feature}
             reportDate={stormData.forecastDetails?.reference_time || ''}
             landfallInfo={stormData.landfall}
             onClose={() => landfallPopupCloseHandler()}
           />
         )}
+
+        <AAStormLandfallMarker stormData={stormData} />
       </>
     );
   },