@opengeoweb/warnings 9.32.0 → 9.33.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Polygons, Share, ExitDomain, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawPolygon, Visibility, Add, breakpoints, Close, Options, ChevronDown, ChevronUp, Copy, Success, Expire, Remove } from '@opengeoweb/theme';
+import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, breakpoints, Close, Options, ChevronDown, ChevronUp, Copy, Success, Expire, Remove } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, useSetupDialog } from '@opengeoweb/store';
 import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, MapView, MapViewLayer, getFeatureExtent } from '@opengeoweb/webmap-react';
 import { SHARED_NAMESPACE, useConfirmationDialog, ToggleMenu, dateUtils, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, CustomToggleButton, Filter, getPosition, FilterChip, FilterListItem, FilterLabel, FilterOption, StatusTag, LastUpdateTime, ErrorBoundary, pollingIntervalTimeout, isAxiosError as isAxiosError$1 } from '@opengeoweb/shared';
@@ -8,17 +8,17 @@ import { createEntityAdapter, createSlice, createSelector, createListenerMiddlew
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
-import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
+import { FORM_FIELDS_NAMESPACE, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 import { LayerType, generateMapId, getWMJSMapById, getGeoCoordFromLatLong, WMBBOX } from '@opengeoweb/webmap';
 import { snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
-import { styled, Box, Typography, ListItem, Grid2, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch } from '@mui/material';
+import { styled, Box, Typography, ListItem, Grid2, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, MenuItem, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider, getHeaders, useAuthQuery, ProductStatus } from '@opengeoweb/api';
 import { useFormContext } from 'react-hook-form';
-import { isEqual, cloneDeep, clamp } from 'lodash';
+import { isEqual, cloneDeep, clamp, uniq, pick } from 'lodash';
 import { getConfig, useAuthenticationContext } from '@opengeoweb/authentication';
 import { SigmetForm, isInstanceOfCancelSigmet, AirmetForm, isInstanceOfCancelAirmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
 import { produce } from 'immer';
@@ -74,11 +74,11 @@ var en = {
 	"warning-button-add-object": "Add Areas & Objects",
 	"warning-description-original": "Description original",
 	"warning-description-translation": "Description translation",
+	"warning-unspecified": "(not specified)",
 	"warning-level": "Level",
 	"warning-level-moderate": "Moderate",
 	"warning-level-severe": "Severe",
 	"warning-level-extreme": "Extreme",
-	"warning-level-unspecified": "(not specified)",
 	"warning-phenomenon": "Phenomenon",
 	"warning-phenomenon-wind": "Wind",
 	"warning-phenomenon-fog": "Fog",
@@ -4817,294 +4817,31 @@ $$6({ target: 'Array', proto: true, forced: FORCED$2 }, {
   }
 });
 
-const getWarningPhenomenaIcon = key => {
-  switch (key) {
-    case 'wind':
-      return jsx(Wind, {});
-    case 'fog':
-      return jsx(Fog, {});
-    case 'thunderstorm':
-      return jsx(Lightning, {});
-    case 'snowIce':
-      return jsx(Snow, {});
-    case 'rain':
-      return jsx(Rain, {});
-    case 'highTemp':
-      return jsx(TemperatureHigh, {});
-    case 'lowTemp':
-      return jsx(TemperatureLow, {});
-    case 'coastalEvent':
-      return jsx(CoastalEvent, {});
-    default:
-      return undefined;
-  }
-};
-const getAviationPhenomenaIcon = key => {
-  switch (key) {
-    case 'RDOACT_CLD':
-      return jsx(RadioactiveMaterials, {});
-    case 'HVY_SS':
-      return jsx(SandStorm, {});
-    case 'SEV_TURB':
-      return jsx(SevereTurbulence, {});
-    case 'MOD_TURB':
-      return jsx(ModerateTurbulence, {});
-    case 'SEV_ICE':
-      return jsx(SevereAircraftIcing, {});
-    case 'MOD_ICE':
-      return jsx(ModerateAircraftIcing, {});
-    case 'SEV_ICE_FRZ_RN':
-      return jsx(FreezingPrecipitation, {});
-    case 'HVY_DS':
-      return jsx(Haze, {});
-    case 'VA_CLD':
-      return jsx(VulcanicEruption, {});
-    case 'EMBD_TS':
-    case 'EMBD_TSGR':
-    case 'FRQ_TS':
-    case 'FRQ_TSGR':
-    case 'OBSC_TS':
-    case 'OBSC_TSGR':
-    case 'SQL_TSGR':
-    case 'ISOL_TS':
-    case 'ISOL_TSGR':
-    case 'OCNL_TS':
-    case 'OCNL_TSGR':
-      return jsx(Thunderstorm, {});
-    default:
-      return undefined;
-  }
-};
-const warningPhenomena = [{
-  translationKey: 'warning-phenomenon-wind',
-  key: 'wind',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-fog',
-  key: 'fog',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-thunderstorm',
-  key: 'thunderstorm',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-snow-ice',
-  key: 'snowIce',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-rain',
-  key: 'rain',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-high-temp',
-  key: 'highTemp',
-  isAviation: false
-},
-// {
-//   title: 'warning-phenomenon-funnel-cloud',
-//   key: 'funnelCloud',
-// },
-{
-  translationKey: 'warning-phenomenon-low-temp',
-  key: 'lowTemp',
-  isAviation: false
-}, {
-  translationKey: 'warning-phenomenon-coastal-event',
-  key: 'coastalEvent',
-  isAviation: false
-}, {
-  translationKey: 'aviation-phenomenon-radioactive-cloud',
-  key: 'RDOACT_CLD',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-heavy-sandstorm',
-  key: 'HVY_SS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-severe-turbulence',
-  key: 'SEV_TURB',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-moderate-turbulence',
-  key: 'MOD_TURB',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-severe-ice',
-  key: 'SEV_ICE',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-moderate-ice',
-  key: 'MOD_ICE',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-severe-ice-freezing-rain',
-  key: 'SEV_ICE_FRZ_RN',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-heavy-dust-storm',
-  key: 'HVY_DS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-volcanic-cloud',
-  key: 'VA_CLD',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-embedded-thunderstorm',
-  key: 'EMBD_TS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-embedded-thunderstorm-with-hail',
-  key: 'EMBD_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-obscured-thunderstorm-with-hail',
-  key: 'OBSC_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-squall-thunderstorm-with-hail',
-  key: 'SQL_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-isolated-thunderstorm',
-  key: 'ISOL_TS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-isolated-thunderstorm-with-hail',
-  key: 'ISOL_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-occasional-thunderstorm',
-  key: 'OCNL_TS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-occasional-thunderstorm-with-hail',
-  key: 'OCNL_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-frequent-thunderstorm',
-  key: 'FRQ_TS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-frequent-thunderstorm-with-hail',
-  key: 'FRQ_TSGR',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-severe-mountain-waves',
-  key: 'SEV_MTW',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-surface-visibility',
-  key: 'SFC_VIS',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-surface-wind',
-  key: 'SFC_WIND',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-overcast-cloud',
-  key: 'OVC_CLD',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-broken-cloud',
-  key: 'BKN_CLD',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-isolated-cumulonimbus-cloud',
-  key: 'ISOL_CB',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-occasional-cumulonimbus-cloud',
-  key: 'OCNL_CB',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-frequent-cumulonimbus-cloud',
-  key: 'FRQ_CB',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-isolated-towering-cumulus-cloud',
-  key: 'ISOL_TCU',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-occasional-towering-cumulus-cloud',
-  key: 'OCNL_TCU',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-frequent-towering-cumulus-cloud',
-  key: 'FRQ_TCU',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-moderate-mountain-wave',
-  key: 'MOD_MTW',
-  isAviation: true
-}, {
-  translationKey: 'aviation-phenomenon-mountains-obscured',
-  key: 'MT_OBSC',
-  isAviation: true
-}];
-const allPhenomenaDict = warningPhenomena.reduce((list, item) => Object.assign({}, list, {
-  [item.key]: item
-}), {});
-const getPhenomenaIcon = key => {
-  return getWarningPhenomenaIcon(key) || getAviationPhenomenaIcon(key);
-};
-const Phenomenon = ({
-  isDisabled,
-  isReadOnly
-}) => {
-  const {
-    t
-  } = useWarningsTranslation();
-  const {
-    isRequired
-  } = useDraftFormHelpers();
-  // These phenomena are sent to Public Warning Form
-  const warningFormPhenomena = warningPhenomena.filter(phenomenon => !phenomenon.isAviation);
-  return jsx(ReactHookFormSelect, {
-    name: "phenomenon",
-    label: t('warning-phenomenon'),
-    rules: {
-      validate: {
-        isRequired
-      }
-    },
-    disabled: isDisabled || isReadOnly,
-    isReadOnly: isReadOnly,
-    children: warningFormPhenomena.map(phenomenon => jsx(MenuItem, {
-      value: phenomenon.key,
-      children: jsxs(Grid2, {
-        container: true,
-        justifyContent: "space-between",
-        children: [jsx(Grid2, {
-          children: t(phenomenon.translationKey)
-        }), jsx(Grid2, {
-          sx: {
-            minWidth: 56
-          },
-          children: getPhenomenaIcon(phenomenon.key)
-        })]
-      })
-    }, phenomenon.key))
-  });
-};
-
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 const emptyFilter = {
-  id: 'empty',
+  id: 'unspecified',
   name: '(not specified)',
   checked: true
 };
-const getFilterlistWithTranslationKeys = filterList => filterList.reduce((fiterList, {
-  key,
-  translationKey
-}) => Object.assign({}, fiterList, {
-  [key]: translationKey
-}), {});
 const defaultFilters = [{
   key: 'incident',
   translationKey: 'filter-incident'
-}, {
-  key: 'phenomenon',
-  translationKey: 'filter-phenomenon',
-  translations: getFilterlistWithTranslationKeys(warningPhenomena)
 }, {
   key: 'warningProposalSource',
   translationKey: 'filter-source'
@@ -11903,127 +11640,401 @@ const DescriptionField = ({
   });
 };
 
-const formatDate = lastUpdatedTime => dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime, false), `${dateUtils.DATE_FORMAT_DATEPICKER} 'UTC'`);
-const getObjectName = (geoJSON, objectName, t) => {
-  if (geoJSON) {
-    return objectName || t('object-manager-object-selected');
+const formatDate = lastUpdatedTime => dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime, false), `${dateUtils.DATE_FORMAT_DATEPICKER} 'UTC'`);
+const getObjectName = (geoJSON, objectName, t) => {
+  if (geoJSON) {
+    return objectName || t('object-manager-object-selected');
+  }
+  return t('object-manager-no-object-selected');
+};
+const AreaField = ({
+  onEditObject: _onEditObject = () => {},
+  onViewObject: _onViewObject = () => {},
+  onDeleteObject: _onDeleteObject = () => {},
+  onAddObject: _onAddObject = () => {},
+  isDisabled: _isDisabled = false
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const {
+    getValues,
+    formState: {
+      errors
+    }
+  } = useFormContext();
+  const {
+    isRequired
+  } = useDraftFormHelpers();
+  const lastUpdatedTime = getValues('object.lastUpdatedTime');
+  const geoJSON = getValues('areas[0].geoJSON');
+  const objectName = getObjectName(geoJSON, getValues('areas[0].objectName'), t);
+  const hasErrors = (errors == null ? void 0 : errors.areas) !== undefined;
+  return jsxs(Fragment, {
+    children: [jsx(Typography, Object.assign({
+      variant: "h3",
+      color: "text.secondary",
+      sx: Object.assign({
+        fontSize: '0.75rem',
+        fontWeight: 'normal',
+        lineHeight: 1.83,
+        paddingLeft: 1.5
+      }, hasErrors && {
+        color: 'geowebColors.captions.captionError.color'
+      })
+    }, hasErrors && {
+      'aria-errormessage': errorMessages.required
+    }, {
+      children: t('warning-area')
+    })), jsx(Card, {
+      elevation: 0,
+      sx: Object.assign({}, !geoJSON && {
+        background: 'none'
+      }),
+      children: jsxs(CardContent, {
+        sx: {
+          position: 'relative',
+          padding: 1,
+          '&:last-child': {
+            paddingBottom: 1
+          }
+        },
+        children: [jsx(Typography, {
+          variant: "h4",
+          sx: {
+            color: 'text.primary',
+            fontSize: '0.75rem',
+            fontWeight: 'normal',
+            lineHeight: 1.83
+          },
+          role: "heading",
+          children: objectName
+        }), jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: 'text.secondary'
+          },
+          children: lastUpdatedTime ? formatDate(lastUpdatedTime) : ''
+        }), geoJSON ? jsx(ToggleMenu, {
+          menuTitle: t('object-manager-options-menu'),
+          tooltipTitle: t('object-manager-options-menu'),
+          buttonSx: {
+            position: 'absolute',
+            right: 0,
+            margin: 'auto',
+            top: 0,
+            bottom: 0,
+            marginRight: '8px'
+          },
+          menuPosition: "bottom",
+          isDisabled: true,
+          menuItems: [{
+            text: t('object-manager-button-edit'),
+            action: _onEditObject,
+            icon: jsx(Edit, {})
+          }, {
+            text: t('object-manager-button-view'),
+            action: _onViewObject,
+            icon: jsx(Visibility, {})
+          }, {
+            text: t('object-manager-button-delete'),
+            action: _onDeleteObject,
+            icon: jsx(Delete, {})
+          }]
+        }) : null]
+      })
+    }), jsx(ReactHookFormHiddenInput, {
+      rules: {
+        validate: {
+          isRequired
+        }
+      },
+      name: "areas[0].geoJSON"
+    }), jsx(Button, {
+      sx: {
+        marginTop: 1
+      },
+      variant: "tertiary",
+      startIcon: jsx(Add, {}),
+      size: "small",
+      onClick: _onAddObject,
+      disabled: _isDisabled,
+      children: t('warning-button-add-object')
+    })]
+  });
+};
+
+const getWarningPhenomenaIcon = key => {
+  switch (key) {
+    case 'wind':
+      return jsx(Wind, {});
+    case 'fog':
+      return jsx(Fog, {});
+    case 'thunderstorm':
+      return jsx(Lightning, {});
+    case 'snowIce':
+      return jsx(Snow, {});
+    case 'rain':
+      return jsx(Rain, {});
+    case 'highTemp':
+      return jsx(TemperatureHigh, {});
+    case 'lowTemp':
+      return jsx(TemperatureLow, {});
+    case 'coastalEvent':
+      return jsx(CoastalEvent, {});
+    default:
+      return undefined;
   }
-  return t('object-manager-no-object-selected');
 };
-const AreaField = ({
-  onEditObject: _onEditObject = () => {},
-  onViewObject: _onViewObject = () => {},
-  onDeleteObject: _onDeleteObject = () => {},
-  onAddObject: _onAddObject = () => {},
-  isDisabled: _isDisabled = false
+const getAviationPhenomenaIcon = key => {
+  switch (key) {
+    case 'RDOACT_CLD':
+      return jsx(RadioactiveMaterials, {});
+    case 'HVY_SS':
+      return jsx(SandStorm, {});
+    case 'SEV_TURB':
+      return jsx(SevereTurbulence, {});
+    case 'MOD_TURB':
+      return jsx(ModerateTurbulence, {});
+    case 'SEV_ICE':
+      return jsx(SevereAircraftIcing, {});
+    case 'MOD_ICE':
+      return jsx(ModerateAircraftIcing, {});
+    case 'SEV_ICE_FRZ_RN':
+      return jsx(FreezingPrecipitation, {});
+    case 'HVY_DS':
+      return jsx(Haze, {});
+    case 'VA_CLD':
+      return jsx(VulcanicEruption, {});
+    case 'EMBD_TS':
+    case 'EMBD_TSGR':
+    case 'FRQ_TS':
+    case 'FRQ_TSGR':
+    case 'OBSC_TS':
+    case 'OBSC_TSGR':
+    case 'SQL_TSGR':
+    case 'ISOL_TS':
+    case 'ISOL_TSGR':
+    case 'OCNL_TS':
+    case 'OCNL_TSGR':
+      return jsx(Thunderstorm, {});
+    default:
+      return undefined;
+  }
+};
+const warningPhenomena = [{
+  translationKey: 'warning-unspecified',
+  key: 'unspecified',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-wind',
+  key: 'wind',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-fog',
+  key: 'fog',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-thunderstorm',
+  key: 'thunderstorm',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-snow-ice',
+  key: 'snowIce',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-rain',
+  key: 'rain',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-high-temp',
+  key: 'highTemp',
+  isAviation: false
+},
+// {
+//   title: 'warning-phenomenon-funnel-cloud',
+//   key: 'funnelCloud',
+// },
+{
+  translationKey: 'warning-phenomenon-low-temp',
+  key: 'lowTemp',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-coastal-event',
+  key: 'coastalEvent',
+  isAviation: false
+}, {
+  translationKey: 'aviation-phenomenon-radioactive-cloud',
+  key: 'RDOACT_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-heavy-sandstorm',
+  key: 'HVY_SS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-turbulence',
+  key: 'SEV_TURB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-turbulence',
+  key: 'MOD_TURB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-ice',
+  key: 'SEV_ICE',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-ice',
+  key: 'MOD_ICE',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-ice-freezing-rain',
+  key: 'SEV_ICE_FRZ_RN',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-heavy-dust-storm',
+  key: 'HVY_DS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-volcanic-cloud',
+  key: 'VA_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-embedded-thunderstorm',
+  key: 'EMBD_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-embedded-thunderstorm-with-hail',
+  key: 'EMBD_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-obscured-thunderstorm-with-hail',
+  key: 'OBSC_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-squall-thunderstorm-with-hail',
+  key: 'SQL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-thunderstorm',
+  key: 'ISOL_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-thunderstorm-with-hail',
+  key: 'ISOL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-thunderstorm',
+  key: 'OCNL_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-thunderstorm-with-hail',
+  key: 'OCNL_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-thunderstorm',
+  key: 'FRQ_TS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-thunderstorm-with-hail',
+  key: 'FRQ_TSGR',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-severe-mountain-waves',
+  key: 'SEV_MTW',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-surface-visibility',
+  key: 'SFC_VIS',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-surface-wind',
+  key: 'SFC_WIND',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-overcast-cloud',
+  key: 'OVC_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-broken-cloud',
+  key: 'BKN_CLD',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-cumulonimbus-cloud',
+  key: 'ISOL_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-cumulonimbus-cloud',
+  key: 'OCNL_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-cumulonimbus-cloud',
+  key: 'FRQ_CB',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-isolated-towering-cumulus-cloud',
+  key: 'ISOL_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-occasional-towering-cumulus-cloud',
+  key: 'OCNL_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-frequent-towering-cumulus-cloud',
+  key: 'FRQ_TCU',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-moderate-mountain-wave',
+  key: 'MOD_MTW',
+  isAviation: true
+}, {
+  translationKey: 'aviation-phenomenon-mountains-obscured',
+  key: 'MT_OBSC',
+  isAviation: true
+}];
+const allPhenomenaDict = warningPhenomena.reduce((list, item) => Object.assign({}, list, {
+  [item.key]: item
+}), {});
+const getPhenomenaIcon = key => {
+  return getWarningPhenomenaIcon(key) || getAviationPhenomenaIcon(key);
+};
+const Phenomenon$1 = ({
+  isDisabled,
+  isReadOnly
 }) => {
   const {
     t
   } = useWarningsTranslation();
-  const {
-    getValues,
-    formState: {
-      errors
-    }
-  } = useFormContext();
   const {
     isRequired
   } = useDraftFormHelpers();
-  const lastUpdatedTime = getValues('object.lastUpdatedTime');
-  const geoJSON = getValues('areas[0].geoJSON');
-  const objectName = getObjectName(geoJSON, getValues('areas[0].objectName'), t);
-  const hasErrors = (errors == null ? void 0 : errors.areas) !== undefined;
-  return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      variant: "h3",
-      color: "text.secondary",
-      sx: Object.assign({
-        fontSize: '0.75rem',
-        fontWeight: 'normal',
-        lineHeight: 1.83,
-        paddingLeft: 1.5
-      }, hasErrors && {
-        color: 'geowebColors.captions.captionError.color'
-      })
-    }, hasErrors && {
-      'aria-errormessage': errorMessages.required
-    }, {
-      children: t('warning-area')
-    })), jsx(Card, {
-      elevation: 0,
-      sx: Object.assign({}, !geoJSON && {
-        background: 'none'
-      }),
-      children: jsxs(CardContent, {
-        sx: {
-          position: 'relative',
-          padding: 1,
-          '&:last-child': {
-            paddingBottom: 1
-          }
-        },
-        children: [jsx(Typography, {
-          variant: "h4",
-          sx: {
-            color: 'text.primary',
-            fontSize: '0.75rem',
-            fontWeight: 'normal',
-            lineHeight: 1.83
-          },
-          role: "heading",
-          children: objectName
-        }), jsx(Typography, {
-          variant: "body2",
+  // These phenomena are sent to Public Warning Form
+  const warningFormPhenomena = warningPhenomena.filter(phenomenon => !phenomenon.isAviation);
+  return jsx(ReactHookFormSelect, {
+    name: "phenomenon",
+    label: t('warning-phenomenon'),
+    rules: {
+      validate: {
+        isRequired
+      }
+    },
+    disabled: isDisabled || isReadOnly,
+    isReadOnly: isReadOnly,
+    children: warningFormPhenomena.map(phenomenon => jsx(MenuItem, {
+      value: phenomenon.key,
+      children: jsxs(Grid2, {
+        container: true,
+        justifyContent: "space-between",
+        children: [jsx(Grid2, {
+          children: t(phenomenon.translationKey)
+        }), jsx(Grid2, {
           sx: {
-            color: 'text.secondary'
-          },
-          children: lastUpdatedTime ? formatDate(lastUpdatedTime) : ''
-        }), geoJSON ? jsx(ToggleMenu, {
-          menuTitle: t('object-manager-options-menu'),
-          tooltipTitle: t('object-manager-options-menu'),
-          buttonSx: {
-            position: 'absolute',
-            right: 0,
-            margin: 'auto',
-            top: 0,
-            bottom: 0,
-            marginRight: '8px'
+            minWidth: 56
           },
-          menuPosition: "bottom",
-          isDisabled: true,
-          menuItems: [{
-            text: t('object-manager-button-edit'),
-            action: _onEditObject,
-            icon: jsx(Edit, {})
-          }, {
-            text: t('object-manager-button-view'),
-            action: _onViewObject,
-            icon: jsx(Visibility, {})
-          }, {
-            text: t('object-manager-button-delete'),
-            action: _onDeleteObject,
-            icon: jsx(Delete, {})
-          }]
-        }) : null]
+          children: getPhenomenaIcon(phenomenon.key)
+        })]
       })
-    }), jsx(ReactHookFormHiddenInput, {
-      rules: {
-        validate: {
-          isRequired
-        }
-      },
-      name: "areas[0].geoJSON"
-    }), jsx(Button, {
-      sx: {
-        marginTop: 1
-      },
-      variant: "tertiary",
-      startIcon: jsx(Add, {}),
-      size: "small",
-      onClick: _onAddObject,
-      disabled: _isDisabled,
-      children: t('warning-button-add-object')
-    })]
+    }, phenomenon.key))
   });
 };
 
@@ -12717,7 +12728,7 @@ const Form = ({
             size: {
               xs: 12
             },
-            children: jsx(Phenomenon, {
+            children: jsx(Phenomenon$1, {
               isDisabled: areFieldsDisabled,
               isReadOnly: _isReadOnly2
             })
@@ -14144,41 +14155,134 @@ const FilterChipWithOptions = ({
     })]
   });
 };
-
-const FilterChipWithOptionsConnect = ({
-  filter
-}) => {
-  const dispatch = useDispatch();
-  const toggleFilter = React.useCallback((filterId, isChecked) => {
-    dispatch(publicWarningActions.toggleFilter({
-      filterId,
-      isChecked
-    }));
-  }, [dispatch]);
-  const toggleOption = React.useCallback((filterId, optionId) => {
-    dispatch(publicWarningActions.toggleOption({
-      filterId,
-      optionId
-    }));
-  }, [dispatch]);
-  const enableOnlyOneFilterOption = React.useCallback((filterId, optionId) => {
-    dispatch(publicWarningActions.enableOnlyOneFilterOption({
-      filterId,
-      optionId
-    }));
-  }, [dispatch]);
-  const filterListWithActions = filter.filterList.map(option => {
-    return Object.assign({}, option, {
-      toggleFilter: () => toggleOption(filter.id, option.filter.id),
-      enableOnlyOneFilter: () => enableOnlyOneFilterOption(filter.id, option.filter.id)
-    });
-  });
-  return jsx(FilterChipWithOptions, Object.assign({}, filter, {
-    handleClick: toggleFilter,
-    filterList: filterListWithActions
-  }));
+
+const FilterChipWithOptionsConnect = ({
+  filter
+}) => {
+  const dispatch = useDispatch();
+  const toggleFilter = React.useCallback((filterId, isChecked) => {
+    dispatch(publicWarningActions.toggleFilter({
+      filterId,
+      isChecked
+    }));
+  }, [dispatch]);
+  const toggleOption = React.useCallback((filterId, optionId) => {
+    dispatch(publicWarningActions.toggleOption({
+      filterId,
+      optionId
+    }));
+  }, [dispatch]);
+  const enableOnlyOneFilterOption = React.useCallback((filterId, optionId) => {
+    dispatch(publicWarningActions.enableOnlyOneFilterOption({
+      filterId,
+      optionId
+    }));
+  }, [dispatch]);
+  const filterListWithActions = filter.filterList.map(option => {
+    return Object.assign({}, option, {
+      toggleFilter: () => toggleOption(filter.id, option.filter.id),
+      enableOnlyOneFilter: () => enableOnlyOneFilterOption(filter.id, option.filter.id)
+    });
+  });
+  return jsx(FilterChipWithOptions, Object.assign({}, filter, {
+    handleClick: toggleFilter,
+    filterList: filterListWithActions
+  }));
+};
+
+const warningColors = Object.assign({}, LevelColors);
+
+const _excluded$5 = ["id", "warningDetail", "status", "editor"],
+  _excluded2 = ["id", "linked_to_id", "proposal_id", "warning_handle_uuid"],
+  _excluded3 = ["id"],
+  _excluded4 = ["id", "warningDetail"],
+  _excluded5 = ["id"];
+const getSortedStatus = status => {
+  switch (status) {
+    case 'DRAFT_PUBLISHED':
+      {
+        return PublicWarningStatus.DRAFT;
+      }
+    default:
+      {
+        return status;
+      }
+  }
+};
+const getWarningWithoutIdStatusEditor = warning => {
+  const {
+      warningDetail
+    } = warning,
+    fullWarning = _objectWithoutPropertiesLoose(warning, _excluded$5);
+  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded2);
+  return Object.assign({}, fullWarning, {
+    warningDetail: cleanWarningDetail
+  });
+};
+const getWarningWithLinkedToId = warning => {
+  const {
+    id,
+    warningDetail
+  } = warning;
+  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded3);
+  return Object.assign({}, warning, {
+    warningDetail: Object.assign({}, cleanWarningDetail, {
+      linked_to_id: id
+    }),
+    status: PublicWarningStatus.DRAFT_PUBLISHED
+  });
+};
+const getWarningWithProposalId = warning => {
+  const {
+      id,
+      warningDetail
+    } = warning,
+    fullWarning = _objectWithoutPropertiesLoose(warning, _excluded4);
+  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded5);
+  return Object.assign({}, fullWarning, {
+    warningDetail: Object.assign({}, cleanWarningDetail, {
+      proposal_id: id
+    })
+  });
+};
+function useOverflowCheck(text) {
+  const ref = React__default.useRef(null);
+  const [isOverflowing, setIsOverflowing] = React__default.useState(false);
+  React__default.useEffect(() => {
+    const checkOverflow = () => {
+      if (ref.current) {
+        setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
+      }
+    };
+    checkOverflow();
+  }, [text]);
+  return {
+    ref,
+    isOverflowing
+  };
+}
+const getTranslationKey = (optionId, id) => {
+  const phenomena = warningPhenomena.find(phenomenon => phenomenon.key === optionId);
+  return phenomena ? phenomena.translationKey : `warning-${id}-${optionId}`;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 var Domain;
 (function (Domain) {
   Domain["aviation"] = "aviation";
@@ -14187,11 +14291,21 @@ var Domain;
 })(Domain || (Domain = {}));
 var Level;
 (function (Level) {
-  Level["unspecified"] = "unspecified";
   Level["extreme"] = "extreme";
   Level["moderate"] = "moderate";
   Level["severe"] = "severe";
 })(Level || (Level = {}));
+var Phenomenon;
+(function (Phenomenon) {
+  Phenomenon["wind"] = "wind";
+  Phenomenon["fog"] = "fog";
+  Phenomenon["thunderstorm"] = "thunderstorm";
+  Phenomenon["snowIce"] = "snowIce";
+  Phenomenon["rain"] = "rain";
+  Phenomenon["highTemp"] = "highTemp";
+  Phenomenon["lowTemp"] = "lowTemp";
+  Phenomenon["coastalEvent"] = "coastalEvent";
+})(Phenomenon || (Phenomenon = {}));
 const defaultDomainFilter = {
   aviation: false,
   maritime: false,
@@ -14203,64 +14317,16 @@ const defaultLevelFilter = {
   moderate: true,
   severe: true
 };
-const useWarningFilters = () => {
-  const [domainFilter, setDomainFilter] = useState(defaultDomainFilter);
-  const [levelFilter, setLevelsFilter] = useState(defaultLevelFilter);
-  const {
-    allSelected: allDomainSelected
-  } = useSelectedOptions(domainFilter);
-  const {
-    allSelected: allLevelSelected
-  } = useSelectedOptions(levelFilter);
-  const allSelected = allDomainSelected && allLevelSelected;
-  const updateState = (state, optionKey, value, only) => {
-    if (only) {
-      return Object.keys(state).reduce((acc, k) => Object.assign({}, acc, {
-        [k]: k === optionKey
-      }), {});
-    }
-    return optionKey === 'ALL' ? Object.keys(state).reduce((acc, k) => Object.assign({}, acc, {
-      [k]: value
-    }), {}) : Object.assign({}, state, {
-      [optionKey]: value
-    });
-  };
-  /**
-   * @param filterKey - Name of the filter | "ALL" filters
-   * @param optionKey - Name of the option | "ALL" options
-   * @param value - The new value
-   * @param only - Flag that decides if all other options should be disabled
-   */
-  const updateFilter = (filterKey, optionKey, value, only) => {
-    if (filterKey === 'ALL') {
-      setDomainFilter(state => updateState(state, 'ALL', value));
-      setLevelsFilter(state => updateState(state, 'ALL', value));
-    } else if (filterKey === 'domain') {
-      setDomainFilter(state => updateState(state, optionKey, value, only));
-    } else if (filterKey === 'level') {
-      setLevelsFilter(state => updateState(state, optionKey, value, only));
-    }
-  };
-  const byFilterState = warning => {
-    const levelDomain = ['SIG', 'AIR'].find(d => d === warning.warningDetail.level) ? Domain.aviation : Domain.public;
-    if (!domainFilter[levelDomain]) {
-      return false;
-    }
-    const level = Object.values(Level).find(level => level === warning.warningDetail.level) || Level.unspecified;
-    if (!levelFilter[level]) {
-      return false;
-    }
-    return true;
-  };
-  return {
-    filterState: {
-      domain: domainFilter,
-      level: levelFilter
-    },
-    allSelected,
-    updateFilter,
-    byFilterState
-  };
+const defaultPhenomenonFilter = {
+  unspecified: true,
+  coastalEvent: true,
+  fog: true,
+  highTemp: true,
+  lowTemp: true,
+  rain: true,
+  snowIce: true,
+  thunderstorm: true,
+  wind: true
 };
 const useSelectedOptions = options => {
   const selectedOptions = Object.keys(options).filter(k => options[k]);
@@ -14271,8 +14337,6 @@ const useSelectedOptions = options => {
   };
 };
 
-const warningColors = Object.assign({}, LevelColors);
-
 const ExpandableFilterChip = ({
   id,
   options,
@@ -14388,9 +14452,14 @@ const ExpandableFilterChip = ({
               onClick: (checked, only) => updateFilter(id, optionId, checked, only),
               labelStyle: Object.assign({}, getLevelStyle(warningColor), {
                 width: 'fit-content',
-                fontSize: '16px'
+                fontSize: '16px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1
               }),
-              label: t(`warning-${id}-${optionId}`)
+              label: jsxs(Fragment, {
+                children: [getWarningPhenomenaIcon(optionId), ' ', t(getTranslationKey(optionId, id))]
+              })
             }, `${id}-${optionId}`);
           })
         })]
@@ -14439,15 +14508,17 @@ const FilterList = ({
       return jsx(FilterChipWithOptionsConnect, {
         filter: filter
       }, filter.id);
-    }), filterState && Object.keys(filterState).map(filterId => jsx(ExpandableFilterChip, {
-      id: filterId,
-      options: filterState[filterId],
-      updateFilter: updateFilter
-    }, filterId))]
+    }), Object.keys(filterState).map(filterId => {
+      return jsx(ExpandableFilterChip, {
+        id: filterId,
+        options: filterState[filterId],
+        updateFilter: updateFilter
+      }, filterId);
+    })]
   });
 };
 
-const _excluded$5 = ["totalWarnings", "status", "isExpanded", "onClick"];
+const _excluded$4 = ["totalWarnings", "status", "isExpanded", "onClick"];
 const HEADER_SIZE = 32;
 const WarningListItemSeperator = _ref => {
   let {
@@ -14456,7 +14527,7 @@ const WarningListItemSeperator = _ref => {
       isExpanded,
       onClick
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const {
     t
   } = useWarningsTranslation();
@@ -14497,76 +14568,6 @@ const WarningListItemSeperator = _ref => {
   }));
 };
 
-const _excluded$4 = ["id", "warningDetail", "status", "editor"],
-  _excluded2 = ["id", "linked_to_id", "proposal_id", "warning_handle_uuid"],
-  _excluded3 = ["id"],
-  _excluded4 = ["id", "warningDetail"],
-  _excluded5 = ["id"];
-const getSortedStatus = status => {
-  switch (status) {
-    case 'DRAFT_PUBLISHED':
-      {
-        return PublicWarningStatus.DRAFT;
-      }
-    default:
-      {
-        return status;
-      }
-  }
-};
-const getWarningWithoutIdStatusEditor = warning => {
-  const {
-      warningDetail
-    } = warning,
-    fullWarning = _objectWithoutPropertiesLoose(warning, _excluded$4);
-  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded2);
-  return Object.assign({}, fullWarning, {
-    warningDetail: cleanWarningDetail
-  });
-};
-const getWarningWithLinkedToId = warning => {
-  const {
-    id,
-    warningDetail
-  } = warning;
-  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded3);
-  return Object.assign({}, warning, {
-    warningDetail: Object.assign({}, cleanWarningDetail, {
-      linked_to_id: id
-    }),
-    status: PublicWarningStatus.DRAFT_PUBLISHED
-  });
-};
-const getWarningWithProposalId = warning => {
-  const {
-      id,
-      warningDetail
-    } = warning,
-    fullWarning = _objectWithoutPropertiesLoose(warning, _excluded4);
-  const cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded5);
-  return Object.assign({}, fullWarning, {
-    warningDetail: Object.assign({}, cleanWarningDetail, {
-      proposal_id: id
-    })
-  });
-};
-function useOverflowCheck(text) {
-  const ref = React__default.useRef(null);
-  const [isOverflowing, setIsOverflowing] = React__default.useState(false);
-  React__default.useEffect(() => {
-    const checkOverflow = () => {
-      if (ref.current) {
-        setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
-      }
-    };
-    checkOverflow();
-  }, [text]);
-  return {
-    ref,
-    isOverflowing
-  };
-}
-
 const _excluded$3 = ["title", "status", "children", "width"];
 const WarningListColumnContent = _ref => {
   let {
@@ -14973,6 +14974,80 @@ const WarningListItem = _ref => {
   }), warning.id);
 };
 
+const useWarningFilters = warnings => {
+  const [domainFilter, setDomainFilter] = useState(defaultDomainFilter);
+  const [levelFilter, setLevelsFilter] = useState(defaultLevelFilter);
+  const [phenomenonFilter, setPhenomenonFilter] = useState(defaultPhenomenonFilter);
+  const existingPhenomenon = uniq(warnings.map(w => w.warningDetail.phenomenon).filter(w => w)).sort();
+  const pickedPhenomenonFilter = pick(phenomenonFilter, ['unspecified', ...existingPhenomenon]);
+  const {
+    allSelected: allDomainSelected
+  } = useSelectedOptions(domainFilter);
+  const {
+    allSelected: allLevelSelected
+  } = useSelectedOptions(levelFilter);
+  const {
+    allSelected: allPhenomenonSelected
+  } = useSelectedOptions(phenomenonFilter);
+  const allSelected = allDomainSelected && allLevelSelected && allPhenomenonSelected;
+  const updateState = (state, optionKey, value, only) => {
+    if (only) {
+      return Object.keys(state).reduce((acc, k) => Object.assign({}, acc, {
+        [k]: k === optionKey
+      }), {});
+    }
+    return optionKey === 'ALL' ? Object.keys(state).reduce((acc, k) => Object.assign({}, acc, {
+      [k]: value
+    }), {}) : Object.assign({}, state, {
+      [optionKey]: value
+    });
+  };
+  /**
+   * @param filterKey - Name of the filter | "ALL" filters
+   * @param optionKey - Name of the option | "ALL" options
+   * @param value - The new value
+   * @param only - Flag that decides if all other options should be disabled
+   */
+  const updateFilter = (filterKey, optionKey, value, only) => {
+    if (filterKey === 'ALL') {
+      setDomainFilter(state => updateState(state, 'ALL', value));
+      setLevelsFilter(state => updateState(state, 'ALL', value));
+      setPhenomenonFilter(state => updateState(state, 'ALL', value));
+    } else if (filterKey === 'domain') {
+      setDomainFilter(state => updateState(state, optionKey, value, only));
+    } else if (filterKey === 'level') {
+      setLevelsFilter(state => updateState(state, optionKey, value, only));
+    } else if (filterKey === 'phenomenon') {
+      setPhenomenonFilter(state => updateState(state, optionKey, value, only));
+    }
+  };
+  const byFilterState = warning => {
+    const levelDomain = ['SIG', 'AIR'].find(d => d === warning.warningDetail.level) ? Domain.aviation : Domain.public;
+    if (!domainFilter[levelDomain]) {
+      return false;
+    }
+    const level = Object.values(Level).find(level => level === warning.warningDetail.level) || 'unspecified';
+    if (!levelFilter[level]) {
+      return false;
+    }
+    const phenomenon = Object.values(Phenomenon).find(p => p === warning.warningDetail.phenomenon) || 'unspecified';
+    if (!phenomenonFilter[phenomenon]) {
+      return false;
+    }
+    return true;
+  };
+  return {
+    filterState: {
+      domain: domainFilter,
+      phenomenon: pickedPhenomenonFilter,
+      level: levelFilter
+    },
+    allSelected,
+    updateFilter,
+    byFilterState
+  };
+};
+
 const _excluded$1 = ["title", "width"];
 const sortWarningsOnStatus = warnings => {
   return warnings.reduce((allWarnings, warning) => {
@@ -15055,7 +15130,7 @@ const PublicWarningList = ({
     allSelected,
     updateFilter,
     byFilterState
-  } = useWarningFilters();
+  } = useWarningFilters(_warnings);
   const onClickAll = isChecked => {
     _onClickAllChip(isChecked);
     updateFilter('ALL', 'ALL', !isChecked);