Issue 889: Add Observation Only Zones

components/observations/ObservationDetailView.tsx

@@ -16,6 +16,7 @@ import {NACIcon} from 'components/icons/nac-icons';
 import {matchesZone} from 'components/observations/ObservationsFilterForm';
 import {AllCapsSm, AllCapsSmBlack, Body, BodyBlack, BodySemibold, bodySize} from 'components/text';
 import {HTML} from 'components/text/HTML';
+import {useMergedMapLayer} from 'hooks/useAlternateObservationZones';
 import {useAvalancheCenterCapabilities} from 'hooks/useAvalancheCenterCapabilities';
 import {useMapLayer} from 'hooks/useMapLayer';
 import {useNACObservation} from 'hooks/useNACObservation';
@@ -46,7 +47,7 @@ import {
   FormatSnowAvailableForTransport,
   FormatWindLoading,
   InstabilityDistribution,
-  MapLayer,
+  MergedMapLayer,
   Observation,
   SnowAvailableForTransport,
   WindLoading,
@@ -80,12 +81,13 @@ export const ObservationDetailView: React.FunctionComponent<{
   const mapLayer = mapResult.data;
   const capabilitiesResult = useAvalancheCenterCapabilities();
   const capabilities = capabilitiesResult.data;
+  const mergedMapLayer = useMergedMapLayer(observation?.center_id?.toUpperCase() as AvalancheCenterID, mapLayer);
 
-  if (incompleteQueryState(observationResult, mapResult, capabilitiesResult) || !observation || !mapLayer || !capabilities || !capabilities) {
+  if (incompleteQueryState(observationResult, mapResult, capabilitiesResult) || !observation || !mergedMapLayer || !capabilities || !capabilities) {
     return <QueryState results={[observationResult, mapResult, capabilitiesResult]} />;
   }
 
-  return <ObservationCard observation={observation} mapLayer={mapLayer} capabilities={capabilities} />;
+  return <ObservationCard observation={observation} mapLayer={mergedMapLayer} capabilities={capabilities} />;
 };
 
 const dataTableFlex = [1, 1];
@@ -201,7 +203,7 @@ export const withUnits = (value: string | number | null | undefined, units: stri
 
 export const ObservationCard: React.FunctionComponent<{
   observation: Observation;
-  mapLayer: MapLayer;
+  mapLayer: MergedMapLayer;
   capabilities: AllAvalancheCenterCapabilities;
 }> = ({observation, mapLayer, capabilities}) => {
   const navigation = useNavigation<ObservationsStackNavigationProps>();

components/observations/ObservationsFilterForm.tsx

@@ -21,7 +21,7 @@ import type {Resolver} from 'react-hook-form';
 import {FieldErrors, FormProvider, useForm} from 'react-hook-form';
 import {KeyboardAvoidingView, Platform, View as RNView, SafeAreaView, ScrollView, TouchableOpacity, findNodeHandle} from 'react-native';
 import {colorLookup} from 'theme';
-import {MapLayer, ObservationFragment, PartnerType} from 'types/nationalAvalancheCenter';
+import {MergedMapLayer, ObservationFragment, PartnerType} from 'types/nationalAvalancheCenter';
 import {RequestedTime, requestedTimeToUTCDate} from 'utils/date';
 import {z} from 'zod';
 
@@ -107,7 +107,7 @@ interface FilterListItem {
   label: string;
   removeFilter?: (config: ObservationFilterConfig) => ObservationFilterConfig;
 }
-export const filtersForConfig = (mapLayer: MapLayer, config: ObservationFilterConfig, additionalFilters: Partial<ObservationFilterConfig> | undefined): FilterListItem[] => {
+export const filtersForConfig = (mapLayer: MergedMapLayer, config: ObservationFilterConfig, additionalFilters: Partial<ObservationFilterConfig> | undefined): FilterListItem[] => {
   if (!config) {
     return [];
   }
@@ -171,7 +171,7 @@ export const filtersForConfig = (mapLayer: MapLayer, config: ObservationFilterCo
 
 interface ObservationsFilterFormProps {
   requestedTime: RequestedTime;
-  mapLayer: MapLayer;
+  mapLayer: MergedMapLayer;
   initialFilterConfig: ObservationFilterConfig;
   currentFilterConfig: ObservationFilterConfig;
   setFilterConfig: React.Dispatch<React.SetStateAction<ObservationFilterConfig>>;
@@ -324,6 +324,7 @@ export const ObservationsFilterForm: React.FunctionComponent<ObservationsFilterF
                     </View>
                   )}
                   {mapLayer && (
+                    // TODO: Render in two groups with respective labels: <Center_ID> Forecast Zones & Other Regions
                     <CheckboxSelectField
                       name="zones"
                       items={
@@ -401,7 +402,7 @@ export const ObservationsFilterForm: React.FunctionComponent<ObservationsFilterF
   );
 };
 
-export const matchesZone = (mapLayer: MapLayer, lat: number | null | undefined, long: number | null | undefined): string => {
+export const matchesZone = (mapLayer: MergedMapLayer, lat: number | null | undefined, long: number | null | undefined): string => {
   if (!lat || !long) {
     return 'Unknown Zone';
   }

components/observations/ObservationsListView.tsx

@@ -15,13 +15,16 @@ import {ObservationFilterConfig, ObservationsFilterForm, createDefaultFilterConf
 import {usePendingObservations} from 'components/observations/uploader/usePendingObservations';
 import {Body, BodyBlack, BodySm, BodySmBlack, BodyXSm, Caption1Semibold, bodySize, bodyXSmSize} from 'components/text';
 import {compareDesc, formatDuration, isBefore, parseISO, sub} from 'date-fns';
+import {useAlternateObservationZones, useMergedMapLayer} from 'hooks/useAlternateObservationZones';
+import {useAvalancheCenterMetadata} from 'hooks/useAvalancheCenterMetadata';
 import {useMapLayer} from 'hooks/useMapLayer';
 import {useNACObservations} from 'hooks/useNACObservations';
 import {useNWACObservations} from 'hooks/useNWACObservations';
 import {useRefresh} from 'hooks/useRefresh';
 import {useToggle} from 'hooks/useToggle';
 import {LoggerContext, LoggerProps} from 'loggerContext';
 import {usePostHog} from 'posthog-react-native';
+
 import {
   ActivityIndicator,
   ColorValue,
@@ -73,8 +76,13 @@ export const ObservationsListView: React.FunctionComponent<ObservationsListViewP
   const originalFilterConfig: ObservationFilterConfig = useMemo(() => createDefaultFilterConfig(additionalFilters), [additionalFilters]);
   const [filterConfig, setFilterConfig] = useState<ObservationFilterConfig>(originalFilterConfig);
   const [filterModalVisible, {set: setFilterModalVisible, on: showFilterModal, off: hideFilterModal}] = useToggle(false);
+  const avalancheZoneMetadataResult = useAvalancheCenterMetadata(center_id);
+  const alternateZonesUrl: string = avalancheZoneMetadataResult.data?.widget_config?.observation_viewer?.alternate_zones || '';
+  const alternateObservationZonesResult = useAlternateObservationZones(alternateZonesUrl, center_id);
+
   const mapResult = useMapLayer(center_id);
   const mapLayer = mapResult.data;
+  const mergedMapLayer = useMergedMapLayer(center_id, mapLayer);
 
   const postHog = usePostHog();
 
@@ -117,6 +125,7 @@ export const ObservationsListView: React.FunctionComponent<ObservationsListViewP
       ),
     [observationsResult],
   );
+
   const observations: ObservationFragmentWithPageIndexAndZoneAndSource[] = useMemo(
     () =>
       flatObservationList
@@ -138,16 +147,20 @@ export const ObservationsListView: React.FunctionComponent<ObservationsListViewP
         // calculate the zone and cache it now
         .map(observation => ({
           ...observation,
-          zone: mapLayer ? matchesZone(mapLayer, observation.locationPoint.lat, observation.locationPoint.lng) : '',
+          zone: mergedMapLayer ? matchesZone(mergedMapLayer, observation.locationPoint.lat, observation.locationPoint.lng) : '',
         })),
-    [flatObservationList, mapLayer, displayNWACObservations],
+    [flatObservationList, mergedMapLayer, displayNWACObservations],
   );
+
   const {isRefreshing, refresh} = useRefresh(observationsResult.refetch);
   const refreshWrapper = useCallback(() => void refresh(), [refresh]);
 
   // the displayed observations need to match all filters - for instance, if a user chooses a zone *and*
   // an observer type, we only show observations that match both of those at the same time
-  const resolvedFilters = useMemo(() => (mapLayer ? filtersForConfig(mapLayer, filterConfig, additionalFilters) : []), [mapLayer, filterConfig, additionalFilters]);
+  const resolvedFilters = useMemo(
+    () => (mergedMapLayer ? filtersForConfig(mergedMapLayer, filterConfig, additionalFilters) : []),
+    [mergedMapLayer, filterConfig, additionalFilters],
+  );
 
   // Set a date limit for how far back to look for observations
   const [lookBackLimit, setLookBackLimit] = useState<Duration>({years: 1});
@@ -315,7 +328,9 @@ export const ObservationsListView: React.FunctionComponent<ObservationsListViewP
     [filterConfig, setFilterConfig],
   );
 
-  if (incompleteQueryState(observationsResult, mapResult) || !mapLayer) {
+  const mergedMapLayerExists = !!mergedMapLayer;
+
+  if ((incompleteQueryState(observationsResult, mapResult, avalancheZoneMetadataResult, alternateObservationZonesResult) || !mapLayer, !mergedMapLayerExists)) {
     return (
       <Center width="100%" height="100%">
         <QueryState results={[observationsResult, mapResult]} />
@@ -331,7 +346,7 @@ export const ObservationsListView: React.FunctionComponent<ObservationsListViewP
       <Modal visible={filterModalVisible} onRequestClose={hideFilterModal}>
         <ObservationsFilterForm
           requestedTime={requestedTime}
-          mapLayer={mapLayer}
+          mapLayer={mergedMapLayer}
           initialFilterConfig={originalFilterConfig}
           currentFilterConfig={filterConfig}
           setFilterConfig={setFilterConfig}