show small landfall popup

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

@@ -1,19 +1,30 @@
 import { createStyles, makeStyles } from '@material-ui/core';
-import { Point } from 'geojson';
 import { Popup } from 'react-map-gl/maplibre';
 import { LandfallInfo } from 'context/anticipatoryAction/AAStormStateSlice/parsedStromDataTypes';
+import { AAStormTimeSeriesFeature } from 'context/anticipatoryAction/AAStormStateSlice/rawStormDataTypes';
 import PopupContent from './PopupContent';
+import { isFeatureAtLandfallEstimateTime } from './utils';
 
 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 || !landfallInfo) {
+    return null;
+  }
+
+  const lng = feature.geometry.coordinates[0];
+  const lat = feature.geometry.coordinates[1];
 
   return (
     <Popup
@@ -33,8 +44,8 @@ function AAStormLandfallPopup({
 }
 
 interface AAStormLandfallPopupProps {
-  point: Point;
-  landfallInfo: LandfallInfo;
+  feature: AAStormTimeSeriesFeature;
+  landfallInfo: LandfallInfo | undefined;
   reportDate: string;
   onClose: () => void;
 }

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

@@ -0,0 +1,27 @@
+import { ParsedStormData } from 'context/anticipatoryAction/AAStormStateSlice/parsedStromDataTypes';
+import { AAStormTimeSeriesFeature } from 'context/anticipatoryAction/AAStormStateSlice/rawStormDataTypes';
+
+/* find the wind point which time corresponds to the landfall estimated time */
+export function findLandfallWindPoint(stormData: ParsedStormData) {
+  const { landfall } = stormData;
+  if (!landfall) {
+    return null;
+  }
+
+  const landfallEstimatedtime = landfall.time;
+
+  const windpoints = stormData.timeSeries?.features;
+  return windpoints?.find(windpoint =>
+    isFeatureAtLandfallEstimateTime(windpoint, landfallEstimatedtime),
+  );
+}
+
+export function isFeatureAtLandfallEstimateTime(
+  feature: AAStormTimeSeriesFeature,
+  landfallEstimatedtime: string[],
+) {
+  return (
+    landfallEstimatedtime &&
+    feature.properties.time === landfallEstimatedtime[0]
+  );
+}

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

@@ -23,10 +23,12 @@ import { useWindStatesByTime } from 'components/MapView/DateSelector/TimelineIte
 import { getAAColor } from 'components/MapView/LeftPanel/AnticipatoryActionPanel/AnticipatoryActionStormPanel/utils';
 import { AACategory } from 'context/anticipatoryAction/AAStormStateSlice/parsedStromDataTypes';
 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';
 
 interface AnticipatoryActionStormLayerProps {
   layer: AnticipatoryActionLayerProps;
@@ -105,7 +107,7 @@ const AnticipatoryActionStormLayer = React.memo(
     const { data: boundaryData } = boundaryLayerState || {};
 
     const [selectedFeature, setSelectedFeature] =
-      useState<Feature<Point> | null>(null);
+      useState<AAStormTimeSeriesFeature | null>(null);
 
     function enhanceTimeSeries(timeSeries: TimeSeries) {
       const { features, ...timeSeriesRest } = timeSeries;
@@ -227,7 +229,7 @@ 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>);
+      setSelectedFeature(feature as unknown as AAStormTimeSeriesFeature);
     };
 
     useMapCallback<'click', null>(
@@ -436,14 +438,16 @@ const AnticipatoryActionStormLayer = React.memo(
 
         <AAStormDatePopup timeSeries={stormData.timeSeries} />
 
-        {selectedFeature && stormData.landfall?.time && (
+        {selectedFeature && (
           <AAStormLandfallPopup
-            point={selectedFeature.geometry}
+            feature={selectedFeature}
             reportDate={stormData.forecastDetails?.reference_time || ''}
             landfallInfo={stormData.landfall}
             onClose={() => landfallPopupCloseHandler()}
           />
         )}
+
+        <AAStormLandfallMarker stormData={stormData} />
       </>
     );
   },