show small landfall popup

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

@@ -0,0 +1,81 @@
+import { Popup } from 'react-map-gl/maplibre';
+import { ParsedStormData } from 'context/anticipatoryAction/AAStormStateSlice/parsedStromDataTypes';
+import _React from 'react';
+import { createStyles, makeStyles, Typography } from '@material-ui/core';
+import { findLandfallWindPoint } from '../utils';
+
+function AAStormLandfallMarker({ stormData }: AAStormLandfallPopupProps) {
+  const classes = useStyles();
+
+  const windpoint = findLandfallWindPoint(stormData);
+
+  if (!windpoint) {
+    return null;
+  }
+
+  const lng = windpoint.geometry.coordinates[0];
+  const lat = windpoint.geometry.coordinates[1];
+
+  return (
+    <Popup
+      longitude={lng}
+      latitude={lat}
+      anchor="bottom"
+      offset={25}
+      closeButton={false}
+      closeOnClick={false}
+      className={classes.popup}
+    >
+      <Typography className={classes.tooltipText} variant="body1">
+        landfall
+      </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,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} />
       </>
     );
   },