Make all points in local unit map same color

Author: frozenhelium

app/package.json

@@ -53,6 +53,7 @@
         "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.13",
         "react-router-dom": "^6.18.0",
         "sanitize-html": "^2.10.0"
     },

app/src/components/domain/BaseMap/index.tsx

@@ -3,6 +3,7 @@ import {
     useMemo,
 } from 'react';
 import { LanguageContext } from '@ifrc-go/ui/contexts';
+import { ErrorBoundary } from '@sentry/react';
 import {
     isDefined,
     isFalsyString,
@@ -22,6 +23,8 @@ import {
     defaultNavControlPosition,
 } from '#utils/map';
 
+import styles from './styles.module.css';
+
 type MapProps = Parameters<typeof Map>[0];
 
 type overrides = 'mapStyle' | 'mapOptions' | 'navControlShown' | 'navControlPosition' | 'navControlOptions' | 'scaleControlShown';
@@ -175,4 +178,21 @@ function BaseMap(props: Props) {
     );
 }
 
-export default BaseMap;
+function BaseMapWithErrorBoundary(props: Props) {
+    return (
+        <ErrorBoundary
+            fallback={(
+                <div className={styles.mapError}>
+                    Failed to load map!
+                </div>
+            )}
+        >
+            <BaseMap
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </ErrorBoundary>
+    );
+}
+
+export default BaseMapWithErrorBoundary;

app/src/components/domain/BaseMap/styles.module.css

@@ -0,0 +1,9 @@
+.map-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--go-ui-color-background);
+    min-height: 20rem;
+    color: var(--go-ui-color-red);
+    font-size: var(--go-ui-font-size-lg);
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/i18n.json

@@ -2,15 +2,13 @@
     "namespace": "nationalSocietyLocalUnits",
     "strings": {
         "localUnitDetailAddress": "Address",
-        "localUnitDetailPhoneNumber": "Phone Number",
-        "localUnitDetailLastUpdate": "Last Updated",
-        "localUnitDetailFocalPerson": "Focal Person",
-        "localUnitTooltipMoreDetails": "More Details",
-        "localUnitLegendLocalUnitTitle": "Local Units",
-        "localUnitLocalUnitType": "Local Unit Type",
-        "localUnitHealthFacilityType": "Health Facility Type",
-        "localUnitLegendHealthCareTitle": "Health Care Local Units",
-        "presentationModeButton":"Presentation Mode",
+        "localUnitDetailPhoneNumber": "Phone number",
+        "localUnitDetailLastUpdate": "Last updated",
+        "localUnitDetailFocalPerson": "Focal person",
+        "localUnitTooltipMoreDetails": "More details",
+        "localUnitLocalUnitType": "Local unit types",
+        "localUnitHealthFacilityType": "Health facility types",
+        "presentationModeButton":"Presentation mode",
         "localUnitDetailEmail": "Email"
     }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx

@@ -12,12 +12,16 @@ import {
 import {
     Button,
     Container,
-    LegendItem,
+    Legend,
     List,
     TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { sumSafe } from '@ifrc-go/ui/utils';
+import {
+    numericIdSelector,
+    stringNameSelector,
+    sumSafe,
+} from '@ifrc-go/ui/utils';
 import {
     isDefined,
     isNotDefined,
@@ -30,10 +34,7 @@ import {
     MapSource,
 } from '@togglecorp/re-map';
 import getBbox from '@turf/bbox';
-import type {
-    CircleLayer,
-    SymbolLayer,
-} from 'mapbox-gl';
+import { type SymbolLayer } from 'mapbox-gl';
 
 import ActiveCountryBaseMapLayer from '#components/domain/ActiveCountryBaseMapLayer';
 import BaseMap from '#components/domain/BaseMap';
@@ -44,8 +45,7 @@ import useAuth from '#hooks/domain/useAuth';
 import useFilterState from '#hooks/useFilterState';
 import { getFirstTruthyString } from '#utils/common';
 import {
-    COLOR_DARK_GREY,
-    COLOR_PRIMARY_BLUE,
+    COLOR_PRIMARY_RED,
     COLOR_WHITE,
     DEFAULT_MAP_PADDING,
     DURATION_MAP_ZOOM,
@@ -63,13 +63,22 @@ import {
     VALIDATED,
 } from '../common';
 import Filters, { FilterValue } from '../Filters';
+import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 const LOCAL_UNIT_ICON_KEY = 'local-units';
 const HEALTHCARE_ICON_KEY = 'healthcare';
 
+function iconSourceSelector({ image_url }: { image_url?: string | undefined }) {
+    return image_url;
+}
+
+function primaryRedColorSelector() {
+    return COLOR_PRIMARY_RED;
+}
+
 const localUnitIconLayerOptions: Omit<SymbolLayer, 'id'> = {
     layout: {
         visibility: 'visible',
@@ -211,35 +220,6 @@ function LocalUnitsMap(props: Props) {
         [loadedIcons, localUnitsOptions],
     );
 
-    const localUnitPointLayerOptions: Omit<CircleLayer, 'id'> = useMemo(() => ({
-        layout: {
-            visibility: 'visible',
-        },
-        type: 'circle',
-        paint: {
-            'circle-radius': 12,
-            'circle-color': isDefined(localUnitsOptions) ? [
-                'match',
-                ['get', 'type'],
-                ...localUnitsOptions.type.flatMap(
-                    ({ code, colour }) => [code, colour],
-                ),
-                COLOR_DARK_GREY,
-            ] : COLOR_DARK_GREY,
-            'circle-opacity': 0.6,
-            'circle-stroke-color': isDefined(localUnitsOptions) ? [
-                'match',
-                ['get', 'type'],
-                ...localUnitsOptions.type.flatMap(
-                    ({ code, colour }) => [code, colour],
-                ),
-                COLOR_DARK_GREY,
-            ] : COLOR_DARK_GREY,
-            'circle-stroke-width': 1,
-            'circle-stroke-opacity': 1,
-        },
-    }), [localUnitsOptions]);
-
     const countryBounds = useMemo(() => (
         (countryResponse && countryResponse.bbox)
             ? getBbox(countryResponse.bbox)
@@ -295,8 +275,9 @@ function LocalUnitsMap(props: Props) {
                     properties: {
                         id: localUnit.id,
                         localUnitId: localUnit.id,
+                        radius: 12,
                         type: localUnit.type,
-                        subType: isDefined(localUnit.health_details)
+                        subType: localUnit.type === TYPE_HEALTH_CARE
                             ? localUnit.health_details.health_facility_type
                             : undefined,
                         iconKey: isDefined(localUnit.health_details)
@@ -378,8 +359,8 @@ function LocalUnitsMap(props: Props) {
         >
             <div className={styles.mapContainerWithContactDetails}>
                 <BaseMap
-                    mapStyle={localUnitMapStyle}
                     withoutLabel
+                    mapStyle={localUnitMapStyle}
                     baseLayers={(
                         <ActiveCountryBaseMapLayer
                             activeCountryIso3={countryResponse?.iso3}
@@ -390,6 +371,13 @@ function LocalUnitsMap(props: Props) {
                     <MapContainerWithDisclaimer
                         className={styles.mapContainer}
                     />
+                    {countryBounds && (
+                        <MapBounds
+                            duration={DURATION_MAP_ZOOM}
+                            padding={DEFAULT_MAP_PADDING}
+                            bounds={countryBounds}
+                        />
+                    )}
                     {localUnitsOptions?.type.map(
                         (typeOption) => (
                             <MapImage
@@ -419,7 +407,13 @@ function LocalUnitsMap(props: Props) {
                     >
                         <MapLayer
                             layerKey="point"
-                            layerOptions={localUnitPointLayerOptions}
+                            layerOptions={{
+                                type: 'circle',
+                                paint: {
+                                    'circle-radius': ['get', 'radius'],
+                                    'circle-color': COLOR_PRIMARY_RED,
+                                },
+                            }}
                             onClick={handlePointClick}
                         />
                         {allIconsLoaded && (
@@ -429,11 +423,6 @@ function LocalUnitsMap(props: Props) {
                             />
                         )}
                     </MapSource>
-                    <MapBounds
-                        duration={DURATION_MAP_ZOOM}
-                        padding={DEFAULT_MAP_PADDING}
-                        bounds={countryBounds}
-                    />
                     {isDefined(clickedPointProperties) && clickedPointProperties.lngLat && (
                         <MapPopup
                             popupClassName={styles.mapPopup}
@@ -544,50 +533,28 @@ function LocalUnitsMap(props: Props) {
                     </Container>
                 )}
             </div>
-            {
-                isDefined(localUnitsOptions) && (
-                    <Container
-                        contentViewType="vertical"
-                        spacing="comfortable"
-                    >
-                        <Container
-                            heading={strings.localUnitLegendLocalUnitTitle}
-                            headingLevel={4}
-                            contentViewType="grid"
-                            numPreferredGridContentColumns={5}
-                            spacing="compact"
-                        >
-                            {localUnitsOptions?.type.map((legendItem) => (
-                                <LegendItem
-                                    key={legendItem.id}
-                                    iconSrc={legendItem.image_url}
-                                    iconClassName={styles.legendIcon}
-                                    color={legendItem.colour ?? COLOR_DARK_GREY}
-                                    label={legendItem.name}
-                                />
-                            ))}
-                        </Container>
-                        <Container
-                            heading={strings.localUnitLegendHealthCareTitle}
-                            headingLevel={5}
-                            contentViewType="grid"
-                            numPreferredGridContentColumns={5}
-                            spacing="compact"
-                        >
-                            {localUnitsOptions?.health_facility_type.map((legendItem) => (
-                                <LegendItem
-                                    key={legendItem.id}
-                                    // FIXME: use color from server
-                                    color={COLOR_PRIMARY_BLUE}
-                                    iconSrc={legendItem.image_url}
-                                    iconClassName={styles.legendIcon}
-                                    label={legendItem.name}
-                                />
-                            ))}
-                        </Container>
-                    </Container>
-                )
-            }
+            {filter.type === TYPE_HEALTH_CARE && (
+                <Legend
+                    label={strings.localUnitHealthFacilityType}
+                    items={localUnitsOptions?.health_facility_type}
+                    keySelector={numericIdSelector}
+                    labelSelector={stringNameSelector}
+                    iconSrcSelector={iconSourceSelector}
+                    colorSelector={primaryRedColorSelector}
+                    iconElementClassName={styles.legendIcon}
+                />
+            )}
+            {filter.type !== TYPE_HEALTH_CARE && (
+                <Legend
+                    label={strings.localUnitLocalUnitType}
+                    items={localUnitsOptions?.type}
+                    keySelector={numericIdSelector}
+                    labelSelector={stringNameSelector}
+                    iconSrcSelector={iconSourceSelector}
+                    colorSelector={primaryRedColorSelector}
+                    iconElementClassName={styles.legendIcon}
+                />
+            )}
         </Container>
     );
 }

packages/ui/src/components/Legend/index.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+
+import LegendItem, { Props as LegendItemProps } from '#components/LegendItem';
+import RawList from '#components/RawList';
+
+import styles from './styles.module.css';
+
+export interface Props<ITEM> {
+    className?: string;
+    label?: React.ReactNode;
+    items: ITEM[] | undefined | null;
+    keySelector: (item: ITEM) => React.Key;
+    colorSelector?: (item: ITEM) => string | undefined;
+    labelSelector?: (item: ITEM) => React.ReactNode;
+    iconSrcSelector?: (item: ITEM) => string | undefined;
+    colorElementClassName?: string;
+    iconElementClassName?: string;
+    itemClassName?: string;
+}
+
+function Legend<ITEM>(props: Props<ITEM>) {
+    const {
+        className,
+        label,
+        items,
+        keySelector,
+        colorSelector,
+        labelSelector,
+        iconSrcSelector,
+        itemClassName,
+        iconElementClassName,
+        colorElementClassName,
+    } = props;
+
+    const legendItemRendererParams = useCallback(
+        (_: React.Key, item: ITEM): LegendItemProps => ({
+            className: itemClassName,
+            colorClassName: colorElementClassName,
+            label: labelSelector?.(item),
+            iconSrc: iconSrcSelector?.(item),
+            color: colorSelector?.(item),
+            iconClassName: iconElementClassName,
+        }),
+        [
+            colorElementClassName,
+            iconElementClassName,
+            labelSelector,
+            iconSrcSelector,
+            colorSelector,
+            itemClassName,
+        ],
+    );
+
+    return (
+        <div className={_cs(styles.legend, className)}>
+            {isDefined(label) && (
+                <div className={styles.label}>
+                    {label}
+                </div>
+            )}
+            <div className={styles.legendItems}>
+                <RawList
+                    data={items}
+                    renderer={LegendItem}
+                    keySelector={keySelector}
+                    rendererParams={legendItemRendererParams}
+                />
+            </div>
+        </div>
+    );
+}
+
+export default Legend;