Improve styling of local unit maps

Author: frozenhelium

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

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import { MapLayer } from '@togglecorp/re-map';
+import {
+    FillLayer,
+    LineLayer,
+    SymbolLayer,
+} from 'mapbox-gl';
+
+import {
+    COLOR_ACTIVE_REGION,
+    COLOR_LIGHT_GREY,
+    COLOR_WHITE,
+} from '#utils/constants';
+
+interface Props {
+    activeCountryIso3: string | undefined | null;
+}
+
+function ActiveCountryBaseMapLayer(props: Props) {
+    const { activeCountryIso3 } = props;
+
+    const adminZeroHighlightLayerOptions = useMemo<Omit<FillLayer, 'id'>>(
+        () => ({
+            type: 'fill',
+            layout: { visibility: 'visible' },
+            paint: {
+                'fill-color': [
+                    'match',
+                    ['get', 'iso3'],
+                    activeCountryIso3,
+                    COLOR_ACTIVE_REGION,
+                    COLOR_LIGHT_GREY,
+                ],
+            },
+        }),
+        [activeCountryIso3],
+    );
+
+    const adminOneBoundaryLayerOptions = useMemo<Omit<LineLayer, 'id'>>(
+        () => ({
+            type: 'line',
+            layout: { visibility: 'visible' },
+            paint: {
+                'line-color': [
+                    'match',
+                    ['get', 'country_iso3'],
+                    activeCountryIso3,
+                    COLOR_WHITE,
+                    COLOR_LIGHT_GREY,
+                ],
+                'line-opacity': 1,
+            },
+        }),
+        [activeCountryIso3],
+    );
+
+    const adminOneLabelLayerOptions = useMemo<Omit<SymbolLayer, 'id'>>(
+        () => ({
+            type: 'symbol',
+            layout: {
+                visibility: 'visible',
+                'text-size': 12,
+            },
+            paint: {
+                'text-opacity': [
+                    'match',
+                    ['get', 'country_iso3'],
+                    activeCountryIso3,
+                    1.0,
+                    0,
+                ],
+            },
+        }),
+        [activeCountryIso3],
+    );
+
+    return (
+        <>
+            <MapLayer
+                layerKey="admin-0"
+                layerOptions={adminZeroHighlightLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-1-boundary"
+                layerOptions={adminOneBoundaryLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-1-label"
+                layerOptions={adminOneLabelLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-1-label-selected"
+                layerOptions={adminOneLabelLayerOptions}
+            />
+        </>
+    );
+}
+
+export default ActiveCountryBaseMapLayer;

app/src/utils/constants.ts

@@ -69,6 +69,8 @@ export const COLOR_DARK_RED = '#730413';
 export const COLOR_PRIMARY_BLUE = '#011e41';
 export const COLOR_PRIMARY_RED = '#f5333f';
 
+export const COLOR_ACTIVE_REGION = '#7d8b9d';
+
 // Three W
 
 type OperationTypeEnum = components<'read'>['schemas']['DeploymentsProjectOperationTypeEnumKey'];

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

@@ -1,8 +1,4 @@
-import {
-    useCallback,
-    useMemo,
-    useState,
-} from 'react';
+import react from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     LocationIcon,
@@ -30,10 +26,10 @@ import {
 import getBbox from '@turf/bbox';
 import type {
     CircleLayer,
-    FillLayer,
     SymbolLayer,
 } from 'mapbox-gl';
 
+import ActiveCountryBaseMapLayer from '#components/domain/ActiveCountryBaseMapLayer';
 import BaseMap from '#components/domain/BaseMap';
 import Link, { type Props as LinkProps } from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
@@ -119,7 +115,7 @@ function LocalUnitsMap() {
         pageSize: 9999,
     });
 
-    const urlQuery = useMemo<GoApiUrlQuery<'/api/v2/public-local-units/'>>(
+    const urlQuery = react.useMemo<GoApiUrlQuery<'/api/v2/public-local-units/'>>(
         () => ({
             limit,
             type__code: filter.type,
@@ -160,11 +156,11 @@ function LocalUnitsMap() {
     const [
         clickedPointProperties,
         setClickedPointProperties,
-    ] = useState<ClickedPoint | undefined>();
+    ] = react.useState<ClickedPoint | undefined>();
 
-    const [loadedIcons, setLoadedIcons] = useState<Record<string, boolean>>({});
+    const [loadedIcons, setLoadedIcons] = react.useState<Record<string, boolean>>({});
 
-    const handleIconLoad = useCallback(
+    const handleIconLoad = react.useCallback(
         (loaded: boolean, key: string) => {
             setLoadedIcons((prevValue) => ({
                 ...prevValue,
@@ -174,7 +170,7 @@ function LocalUnitsMap() {
         [],
     );
 
-    const allIconsLoaded = useMemo(
+    const allIconsLoaded = react.useMemo(
         () => (
             Object.values(loadedIcons).filter(Boolean).length === sumSafe([
                 localUnitsOptions?.type.length,
@@ -184,7 +180,7 @@ function LocalUnitsMap() {
         [loadedIcons, localUnitsOptions],
     );
 
-    const localUnitPointLayerOptions: Omit<CircleLayer, 'id'> = useMemo(() => ({
+    const localUnitPointLayerOptions: Omit<CircleLayer, 'id'> = react.useMemo(() => ({
         layout: {
             visibility: 'visible',
         },
@@ -213,7 +209,7 @@ function LocalUnitsMap() {
         },
     }), [localUnitsOptions]);
 
-    const countryBounds = useMemo(() => (
+    const countryBounds = react.useMemo(() => (
         countryResponse ? getBbox(countryResponse.bbox) : undefined
     ), [countryResponse]);
 
@@ -255,7 +251,7 @@ function LocalUnitsMap() {
         ? superLocalUnitDetailError
         : publicLocalUnitDetailError;
 
-    const localUnitsGeoJson = useMemo<GeoJSON.FeatureCollection<GeoJSON.Geometry>>(
+    const localUnitsGeoJson = react.useMemo<GeoJSON.FeatureCollection<GeoJSON.Geometry>>(
         () => ({
             type: 'FeatureCollection' as const,
             features: localUnits?.results?.map(
@@ -284,20 +280,7 @@ function LocalUnitsMap() {
         [localUnits],
     );
 
-    const adminZeroHighlightLayerOptions = useMemo<Omit<FillLayer, 'id'>>(
-        () => ({
-            type: 'fill',
-            layout: { visibility: 'visible' },
-            filter: isDefined(countryResponse) ? [
-                '!in',
-                'country_id',
-                countryResponse.id,
-            ] : undefined,
-        }),
-        [countryResponse],
-    );
-
-    const handlePointClick = useCallback(
+    const handlePointClick = react.useCallback(
         (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLat) => {
             setClickedPointProperties({
                 id: feature.properties?.id,
@@ -309,14 +292,14 @@ function LocalUnitsMap() {
         [setClickedPointProperties],
     );
 
-    const handlePointClose = useCallback(
+    const handlePointClose = react.useCallback(
         () => {
             setClickedPointProperties(undefined);
         },
         [setClickedPointProperties],
     );
 
-    const emailRendererParams = useCallback(
+    const emailRendererParams = react.useCallback(
         (_: string, email: string): LinkProps => ({
             className: styles.email,
             withUnderline: true,
@@ -354,10 +337,10 @@ function LocalUnitsMap() {
         >
             <div className={styles.mapContainerWithContactDetails}>
                 <BaseMap
+                    withoutLabel
                     baseLayers={(
-                        <MapLayer
-                            layerKey="admin-0-highlight"
-                            layerOptions={adminZeroHighlightLayerOptions}
+                        <ActiveCountryBaseMapLayer
+                            activeCountryIso3={countryResponse?.iso3}
                         />
                     )}
                     mapOptions={{ bounds: countryBounds }}
@@ -411,6 +394,7 @@ function LocalUnitsMap() {
                     />
                     {isDefined(clickedPointProperties) && clickedPointProperties.lngLat && (
                         <MapPopup
+                            popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.lngLat}
                             onCloseButtonClick={handlePointClose}
                             heading={isTruthyString(localUnitDetail?.english_branch_name)
@@ -420,6 +404,8 @@ function LocalUnitsMap() {
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}
                             errorMessage={localUnitDetailError?.value.messageForNotification}
+                            compactMessage
+                            ellipsizeHeading
                         >
                             <TextOutput
                                 label={strings.localUnitDetailLastUpdate}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css

@@ -3,7 +3,7 @@
         position: relative;
 
         .map-container {
-            height: 40rem;
+            height: 45rem;
         }
 
         .contact-detail {
@@ -30,5 +30,8 @@
     .legend-icon {
         filter: invert(1);
     }
+}
 
+.map-popup {
+    height: 16rem;
 }

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

@@ -70,17 +70,13 @@ function Header(props: Props) {
                 <>
                     <Heading
                         level={headingLevel}
-                        className={_cs(styles.heading, headingClassName)}
+                        className={headingClassName}
+                        ellipsize={ellipsizeHeading}
                     >
                         {heading}
                     </Heading>
                     {headingDescription && (
-                        <div
-                            className={_cs(
-                                styles.headingDescription,
-                                headingDescriptionContainerClassName,
-                            )}
-                        >
+                        <div className={headingDescriptionContainerClassName}>
                             {headingDescription}
                         </div>
                     )}
@@ -89,6 +85,7 @@ function Header(props: Props) {
         },
         [
             heading,
+            ellipsizeHeading,
             headingDescription,
             headingClassName,
             headingDescriptionContainerClassName,
@@ -103,7 +100,7 @@ function Header(props: Props) {
         actions,
         actionsContainerClassName,
         children: headingChildren,
-        childrenContainerClassName: _cs(styles.headingContainer, headingContainerClassName),
+        childrenContainerClassName: headingContainerClassName,
         className: headingSectionClassName,
         icons,
         iconsContainerClassName,
@@ -125,14 +122,13 @@ function Header(props: Props) {
         <div
             className={_cs(
                 styles.header,
-                ellipsizeHeading && styles.headingEllipsized,
                 gapSpacing,
                 className,
             )}
             ref={elementRef}
         >
             {content && (
-                <div className={_cs(styles.headingSection, containerClassName)}>
+                <div className={containerClassName}>
                     {content}
                 </div>
             )}

packages/ui/src/components/Header/styles.module.css

@@ -1,35 +1,4 @@
 .header {
     display: flex;
     flex-direction: column;
-
-    .heading-section {
-        display: flex;
-
-        .heading-container {
-            display: flex;
-            flex-wrap: wrap;
-            overflow-x: auto;
-
-            .heading {
-                display: flex;
-                flex-grow: 1;
-                overflow-x: auto;
-                overflow-y: hidden;
-            }
-        }
-    }
-
-    &.heading-ellipsized {
-        .heading-section {
-            .heading-container {
-                min-width: 0;
-
-                .heading {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
-            }
-        }
-    }
 }