Initial batch maps cadence control (#1773)

* Initial batch maps cadence control

* Fix lint error

* Update snapshot

* Implement coverage-aware cadences

* Normalize start/end dates to prevent excluding layer timestamps

* Restrict cadence options based on coverage window

* Update logic for enabling batch maps

* Style updates; fix logic for cadence availability

* Exclude quarterly/monthly maps without a full coverage window

* Support quarterly map format

* Fix date formatting

* Add UI messaging for invalid layer and date selections

* Update snapshot

* Ensure error banner stays in print dialog context

* Security bump

* Fix security vulnerabilities in API and alerting dependencies

Agent-Logs-Url: https://github.com/WFP-VAM/prism-app/sessions/d1011152-bb2d-4853-a12e-7b8decd6dd8d

Co-authored-by: ericboucher <16843267+ericboucher@users.noreply.github.com>

* Update dekadal selector to single line layout

* Revert enabling batch maps

---------

Co-authored-by: Eric Boucher <eric.p.boucher@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ericboucher <16843267+ericboucher@users.noreply.github.com>

Author: 3 people

frontend/src/components/MapExport/MapExportLayout.tsx

@@ -13,7 +13,6 @@ import MapGL, { Layer, MapRef, Marker, Source } from 'react-map-gl/maplibre';
 import { useTranslation } from 'react-i18next';
 import useResizeObserver from 'utils/useOnResizeObserver';
 import { getFormattedDate, formatCoverageText } from 'utils/date-utils';
-import { DateFormat } from 'utils/name-utils';
 import { lightGrey } from 'muiTheme';
 import { FloodStationMarker } from 'components/MapView/Layers/AnticipatoryActionFloodLayer/FloodStationMarker';
 import LegendItemsList from 'components/MapView/Legends/LegendItemsList';
@@ -152,14 +151,10 @@ function MapExportLayout({
       );
     }
 
-    // Replace {coverage} with formatted coverage ranges (using DayFirstHyphenMonthName)
+    // Replace {coverage} with formatted coverage ranges (using localized numeric date)
     if (layersCoverage && result.includes('{date_coverage}')) {
       const coverageText =
-        formatCoverageText(
-          layersCoverage,
-          t,
-          DateFormat.DayFirstHyphenMonthName,
-        ) ?? '';
+        formatCoverageText(layersCoverage, t, 'localeNumericUTC') ?? '';
       result = result.replace(/\{date_coverage\}/g, coverageText);
     }
 

frontend/src/components/NavBar/PrintImage/CadenceSelector.tsx

@@ -0,0 +1,169 @@
+import { useContext } from 'react';
+import {
+  Box,
+  TextField,
+  Typography,
+  createStyles,
+  makeStyles,
+} from '@material-ui/core';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import { getFormattedDate } from 'utils/date-utils';
+import { BatchCadence } from 'utils/batchCadenceUtils';
+import { useSafeTranslation } from '../../../i18n';
+import PrintConfigContext from './printConfig.context';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.5rem',
+    },
+    row: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '0.5rem',
+      flexWrap: 'wrap',
+    },
+    header: {
+      fontSize: '14px',
+      fontWeight: 400,
+      marginTop: '8px',
+    },
+    toggleButton: {
+      fontSize: '0.75rem',
+      textTransform: 'none',
+      padding: '4px 10px',
+      marginBottom: '8px',
+    },
+    intervalInput: {
+      zIndex: 0,
+      marginBottom: '8px',
+      '& input': {
+        fontSize: '0.875rem',
+      },
+    },
+    dateList: {
+      maxHeight: '120px',
+      overflowY: 'auto',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '4px',
+      padding: '4px',
+      backgroundColor: 'white',
+      borderRadius: '4px',
+      border: '1px solid #ccc',
+    },
+    dateChip: {
+      color: '#000',
+      fontSize: '0.7rem',
+      padding: '2px 6px',
+      backgroundColor: '#e0e0e0',
+      borderRadius: '4px',
+      whiteSpace: 'nowrap',
+    },
+  }),
+);
+
+const CADENCE_LABELS: Record<BatchCadence, string> = {
+  'every-n-dekads': 'Every N dekads',
+  monthly: 'Monthly',
+  quarterly: 'Quarterly',
+};
+
+function getDateFormat(
+  cadence: BatchCadence,
+): 'localeShortUTC' | 'monthYearUTC' | 'quarterYearUTC' {
+  switch (cadence) {
+    case 'every-n-dekads':
+      return 'localeShortUTC';
+    case 'monthly':
+      return 'monthYearUTC';
+    case 'quarterly':
+      return 'quarterYearUTC';
+    default:
+      return 'localeShortUTC';
+  }
+}
+
+export default function CadenceSelector() {
+  const classes = useStyles();
+  const { t } = useSafeTranslation();
+  const { printConfig } = useContext(PrintConfigContext);
+
+  if (!printConfig) {
+    return null;
+  }
+
+  const {
+    cadence,
+    setCadence,
+    dekadInterval,
+    setDekadInterval,
+    filteredBatchDates,
+    availableCadences,
+    disabledCadences,
+  } = printConfig;
+
+  return (
+    <Box className={classes.root}>
+      <Typography variant="h4" className={classes.header}>
+        {t('Cadence')}
+      </Typography>
+      <Box className={classes.row}>
+        <ToggleButtonGroup
+          value={cadence}
+          exclusive
+          size="small"
+          onChange={(_e, value: BatchCadence | null) => {
+            if (value !== null) {
+              if (!disabledCadences.has(value)) {
+                setCadence(value);
+              }
+            }
+          }}
+        >
+          {availableCadences.map(option => {
+            const isDisabled = disabledCadences.has(option);
+            return (
+              <ToggleButton
+                key={option}
+                value={option}
+                disabled={isDisabled}
+                className={classes.toggleButton}
+              >
+                {t(CADENCE_LABELS[option])}
+              </ToggleButton>
+            );
+          })}
+        </ToggleButtonGroup>
+        {cadence === 'every-n-dekads' && (
+          <TextField
+            className={classes.intervalInput}
+            type="number"
+            size="small"
+            variant="outlined"
+            label="Dekad interval"
+            value={dekadInterval}
+            inputProps={{ min: 1 }}
+            onChange={e => {
+              const val = parseInt(e.target.value, 10);
+              setDekadInterval(val);
+            }}
+          />
+        )}
+      </Box>
+      {filteredBatchDates.length > 0 && (
+        <Box className={classes.dateList}>
+          {filteredBatchDates.map(ts => (
+            <span key={ts} className={classes.dateChip}>
+              {getFormattedDate(ts, getDateFormat(cadence))}
+            </span>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}

frontend/src/components/NavBar/PrintImage/DateRangePicker.tsx

@@ -22,10 +22,10 @@ function DateRangePicker() {
 
   useEffect(() => {
     if (selectedDateFromMap) {
-      setDateRange({
+      setDateRange(prev => ({
+        ...prev,
         startDate: selectedDateFromMap,
-        endDate: new Date().getTime(),
-      });
+      }));
     }
   }, [selectedDateFromMap]);
 
@@ -103,13 +103,7 @@ function DateRangePicker() {
           <DatePicker
             locale={t('date_locale')}
             dateFormat="dd/MM/yyyy"
-            selected={
-              endDate
-                ? new Date(endDate)
-                : selectedDateFromMap
-                  ? new Date()
-                  : null
-            }
+            selected={endDate ? new Date(endDate) : null}
             onChange={handleEndDateChange}
             minDate={startDate ? new Date(startDate) : minDate}
             includeDates={includedDates}