AA storm display panel

frontend/src/components/MapView/DateSelector/TimelineItems/index.test.tsx

@@ -24,7 +24,10 @@ const props = {
 const mockStore = configureStore([]);
 
 const store = mockStore({
-  anticipatoryActionState: {
+  anticipatoryActionDroughtState: {
+    availableDates: undefined,
+  },
+  anticipatoryActionStormState: {
     availableDates: undefined,
   },
   mapState: {

frontend/src/components/MapView/DateSelector/index.test.tsx

@@ -37,7 +37,10 @@ test('renders as expected', () => {
       panelSize: PanelSize.medium,
     },
     serverState: { availableDates: {}, loading: false },
-    anticipatoryActionState: {
+    anticipatoryActionDroughtState: {
+      availableDates: undefined,
+    },
+    anticipatoryActionStormState: {
       availableDates: undefined,
     },
   });

frontend/src/components/MapView/DateSelector/index.tsx

@@ -34,8 +34,7 @@ import { format } from 'date-fns';
 import { leftPanelTabValueSelector } from 'context/leftPanelStateSlice';
 import { updateDateRange } from 'context/mapStateSlice';
 import { getRequestDate } from 'utils/server-utils';
-import { AAAvailableDatesSelector } from 'context/anticipatoryActionStateSlice';
-import { isAnticipatoryActionLayer } from 'config/utils';
+import { AAAvailableDatesSelector } from 'context/anticipatoryAction/AADroughtStateSlice';
 import TickSvg from './tick.svg';
 import DateSelectorInput from './DateSelectorInput';
 import TimelineItems from './TimelineItems';
@@ -57,10 +56,10 @@ const POINTER_ID = 'datePointerSelector';
 const calculateStartAndEndDates = (startDate: Date, selectedTab: string) => {
   const year =
     startDate.getFullYear() -
-    (isAnticipatoryActionLayer(selectedTab) && startDate.getMonth() < 3
+    (selectedTab === Panel.AnticipatoryActionDrought && startDate.getMonth() < 3
       ? 1
       : 0);
-  const startMonth = isAnticipatoryActionLayer(selectedTab) ? 3 : 0; // April for anticipatory_action, January otherwise
+  const startMonth = selectedTab === Panel.AnticipatoryActionDrought ? 3 : 0; // April for anticipatory_action, January otherwise
   const start = new Date(year, startMonth, 1);
   const end = new Date(year, startMonth + 11, 31);
 
@@ -153,8 +152,8 @@ const DateSelector = memo(() => {
       // eslint-disable-next-line fp/no-mutating-methods
       selectedLayers
         .sort((a, b) => {
-          const aIsAnticipatory = a.id.includes('anticipatory_action');
-          const bIsAnticipatory = b.id.includes('anticipatory_action');
+          const aIsAnticipatory = a.id.includes('anticipatory_action_drought');
+          const bIsAnticipatory = b.id.includes('anticipatory_action_drought');
           if (aIsAnticipatory && !bIsAnticipatory) {
             return -1;
           }
@@ -163,8 +162,7 @@ const DateSelector = memo(() => {
           }
           return 0;
         })
-        .filter(l => l.type !== AnticipatoryAction.storm) // disable showing anticipatory action storm data
-        .map(l => (isAnticipatoryActionLayer(l.type) ? AALayers : l))
+        .map(l => (l.id === 'anticipatory_action_drought' ? AALayers : l))
         .flat(),
     [selectedLayers, AALayers],
   );

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

@@ -26,8 +26,8 @@ import {
   setAAMarkers,
   setAASelectedDistrict,
   setAAView,
-} from 'context/anticipatoryActionStateSlice';
-import { getAAColor } from 'components/MapView/LeftPanel/AnticipatoryActionPanel/utils';
+} from 'context/anticipatoryAction/AADroughtStateSlice';
+import { getAAColor } from 'components/MapView/LeftPanel/AnticipatoryActionPanel/AnticipatoryActionDroughtPanel/utils';
 import {
   calculateCentroids,
   useAAMarkerScalePercent,
@@ -37,8 +37,8 @@ import { getBoundaryLayersByAdminLevel } from 'config/utils';
 import {
   calculateAAMarkers,
   calculateCombinedAAMapData,
-} from 'context/anticipatoryActionStateSlice/utils';
-import { AAView } from 'context/anticipatoryActionStateSlice/types';
+} from 'context/anticipatoryAction/AADroughtStateSlice/utils';
+import { AAView } from 'context/anticipatoryAction/AADroughtStateSlice/types';
 import { Tooltip } from '@material-ui/core';
 
 // Use admin level 2 boundary layer for Anticipatory Action

frontend/src/components/MapView/Layers/AnticipatoryActionStormLayer/AAStormLandfallPopup/PopupContent/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`AAStormLandfallPopup component renders as expected 1`] = `
       classname="makeStyles-text-4 makeStyles-title-5"
       variant="body1"
     >
-      Report date: 
+      Forecast date: 
       2024-03-01 6pm
     </mock-typography>
     <div

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

@@ -1,16 +1,14 @@
 import { render } from '@testing-library/react';
+import { AACategory } from 'context/anticipatoryAction/AAStormStateSlice/types';
 import PopupContent from '.';
 
 describe('AAStormLandfallPopup component', () => {
   it('renders as expected', () => {
     const reportDate = '2024-03-01 18:00:00';
     const landfallInfo = {
-      landfall_time: ['2024-03-12 01:00:00', '2024-03-12 06:00:00'],
-      landfall_impact_district: 'Inhassoro',
-      landfall_impact_intensity: [
-        'severe tropical storm',
-        'moderate tropical storm',
-      ],
+      time: ['2024-03-12 01:00:00', '2024-03-12 06:00:00'],
+      district: 'Inhassoro',
+      severity: [AACategory.Severe, AACategory.Moderate],
     };
     const timelineDate = '2024-03-12 00:00:00';
 

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

@@ -1,4 +1,5 @@
 import { createStyles, makeStyles, Typography } from '@material-ui/core';
+import { LandfallInfo } from 'context/anticipatoryAction/AAStormStateSlice/types';
 import {
   formatLandfallDate,
   formatLandfallEstimatedLeadtime,
@@ -19,7 +20,7 @@ function PopupContent({
         variant="body1"
         className={`${classes.text} ${classes.title}`}
       >
-        Report date: {formatReportDate(reportDate)}
+        Forecast date: {formatReportDate(reportDate)}
       </Typography>
       <div className={classes.itemContainer}>
         <Typography variant="body1" className={classes.text}>
@@ -29,9 +30,9 @@ function PopupContent({
           variant="body1"
           className={`${classes.text} ${classes.textAlignRight}`}
         >
-          {formatLandfallDate(landfallInfo.landfall_time)}
+          {formatLandfallDate(landfallInfo.time)}
           <span className={classes.block}>
-            {formatLandfallTimeRange(landfallInfo.landfall_time)}
+            {formatLandfallTimeRange(landfallInfo.time)}
           </span>
         </Typography>
       </div>
@@ -44,10 +45,7 @@ function PopupContent({
           variant="body1"
           className={`${classes.text} ${classes.textAlignRight}`}
         >
-          {formatLandfallEstimatedLeadtime(
-            landfallInfo.landfall_time,
-            timelineDate,
-          )}
+          {formatLandfallEstimatedLeadtime(landfallInfo.time, timelineDate)}
         </Typography>
       </div>
       <div className={classes.itemContainer}>
@@ -59,7 +57,7 @@ function PopupContent({
           variant="body1"
           className={`${classes.text} ${classes.textAlignRight}`}
         >
-          {landfallInfo.landfall_impact_district}
+          {landfallInfo.district}
         </Typography>
       </div>
     </div>
@@ -97,12 +95,6 @@ const useStyles = makeStyles(() =>
   }),
 );
 
-export interface LandfallInfo {
-  landfall_time: string[];
-  landfall_impact_district: string;
-  landfall_impact_intensity: string[];
-}
-
 interface PopupContentProps {
   landfallInfo: LandfallInfo;
   reportDate: string;

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

@@ -1,7 +1,8 @@
 import { createStyles, makeStyles } from '@material-ui/core';
 import { Point } from 'geojson';
 import { Popup } from 'react-map-gl/maplibre';
-import PopupContent, { LandfallInfo } from './PopupContent';
+import { LandfallInfo } from 'context/anticipatoryAction/AAStormStateSlice/types';
+import PopupContent from './PopupContent';
 
 function AAStormLandfallPopup({
   point,