feat(country-risk-watch): build out JBA and ARC event details for Malawi Risk Watch

- render JBA forecast COGs as a map raster overlay with layer panel, opacity and HDX choropleth controls
- present band_5 ensemble stats as population exposed (not flood depth) with a people-scale impact threshold
- add forecast trajectory and 30-day rainfall history charts, plus district RP100 flood-exposure context
- prefill field reports with population exposed and external source/id; surface activation status (trigger, MRCS review, report created) with a review deep link

Author: frozenhelium

.github/workflows/ci.yml

@@ -244,14 +244,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Generate types
+        run: pnpm generate:type
+
       - uses: actions/download-artifact@v4
         with:
           name: ui-build
           path: packages/ui/dist
 
-      - name: Generate types
-        run: pnpm generate:type
-
       - name: Typecheck
         run: pnpm typecheck
 

app/env.ts

@@ -24,6 +24,7 @@ export default defineConfig({
     APP_TINY_API_KEY: Schema.string(),
     APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
     APP_MALAWI_RISK_WATCH_GRAPHQL_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+    APP_MALAWI_RISK_WATCH_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_POWER_BI_REPORT_ID_1: Schema.string.optional(),
     APP_SENTRY_DSN: Schema.string.optional(),

app/package.json

@@ -43,6 +43,7 @@
         "surge:teardown": "branch=$(git rev-parse --symbolic-full-name --abbrev-ref HEAD); branch=$(echo $branch  | tr ./ -); surge teardown https://ifrc-go-$branch.surge.sh"
     },
     "dependencies": {
+        "@graphql-typed-document-node/core": "^3.2.0",
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "workspace:^",
         "@sentry/react": "^10.0.0",
@@ -57,6 +58,7 @@
         "diff-match-patch": "^1.0.5",
         "exceljs": "^4.4.0",
         "file-saver": "^2.0.5",
+        "geotiff": "^3.0.5",
         "graphql": "^16.14.0",
         "html-to-image": "^1.11.13",
         "mapbox-gl": "^1.13.3",

app/src/components/Link/index.tsx

@@ -133,7 +133,7 @@ function Link(props: Props) {
         </ButtonLayout>
     );
 
-    if (nonLink) {
+    if (nonLink || disabled) {
         return (
             <div className={styles.link}>
                 {content}
@@ -148,6 +148,7 @@ function Link(props: Props) {
                 target="_blank"
                 rel="noopener noreferrer"
                 href={toLink}
+                aria-disabled={disabled}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...linkProps}
             >
@@ -164,6 +165,7 @@ function Link(props: Props) {
                 search: urlSearch,
                 hash: urlHash,
             }}
+            aria-disabled={disabled}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...linkProps}
         >

app/src/components/Navbar/index.tsx

@@ -23,6 +23,7 @@ import {
     sdtUrl,
 } from '#config';
 import useAuth from '#hooks/domain/useAuth';
+import { FIELD_REPORT_STATUS_EARLY_WARNING } from '#utils/constants';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import CountryDropdown from './CountryDropdown';
@@ -313,7 +314,11 @@ function Navbar(props: Props) {
                                             to="fieldReportFormNew"
                                             colorVariant="primary"
                                             styleVariant="action"
-                                            state={{ earlyWarning: true }}
+                                            state={{
+                                                initialValue: {
+                                                    status: FIELD_REPORT_STATUS_EARLY_WARNING,
+                                                },
+                                            }}
                                             withoutFullWidth
                                         >
                                             {strings.userMenuCreateEarlyActionFieldReport}

app/src/components/StepGradientBar/styles.module.css

@@ -1,8 +1,9 @@
 .step-gradient-bar {
-    width: min(30cqi, 10rem);
+    width: min(36cqi, 16rem);
 
     .step {
         flex-grow: 1;
+        text-align: center;
 
         .swatch {
             height: 0.5rem;

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

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { MapLayer } from '@togglecorp/re-map';
 import {
+    type BackgroundLayer,
     type FillLayer,
     type LineLayer,
     type SymbolLayer,
 } from 'mapbox-gl';
 
 import {
     COLOR_ACTIVE_REGION,
-    COLOR_LIGHT_GREY,
     COLOR_WHITE,
 } from '#utils/constants';
 
@@ -19,6 +19,18 @@ const hiddenFillLayerOptions: Omit<FillLayer, 'id'> = {
     },
 };
 
+const hiddenLineLayerOptions: Omit<LineLayer, 'id'> = {
+    type: 'line',
+    layout: {
+        visibility: 'none',
+    },
+};
+
+const backgroundLayerOptions: Omit<BackgroundLayer, 'id'> = {
+    type: 'background',
+    paint: { 'background-color': COLOR_WHITE },
+};
+
 interface Props {
     activeCountryIso3: string | undefined | null;
 }
@@ -32,20 +44,13 @@ function ActiveCountryBaseMapLayer(props: Props) {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-color': [
-                    'interpolate',
-                    ['linear'],
-                    ['zoom'],
-                    2,
-                    [
-                        'match',
-                        ['get', 'iso3'],
-                        activeCountryIso3,
-                        COLOR_ACTIVE_REGION,
-                        COLOR_LIGHT_GREY,
-                    ],
-                    10,
-                    COLOR_LIGHT_GREY,
+                    'match',
+                    ['get', 'iso3'],
+                    activeCountryIso3,
+                    COLOR_ACTIVE_REGION,
+                    COLOR_WHITE,
                 ],
+                'fill-opacity': 0.2,
             },
         }),
         [activeCountryIso3],
@@ -56,17 +61,11 @@ function ActiveCountryBaseMapLayer(props: Props) {
             type: 'line',
             layout: { visibility: 'visible' },
             paint: {
-                'line-color': [
-                    'match',
-                    ['get', 'country_iso3'],
-                    activeCountryIso3,
-                    COLOR_WHITE,
-                    COLOR_LIGHT_GREY,
-                ],
+                'line-color': COLOR_WHITE,
                 'line-opacity': 1,
             },
         }),
-        [activeCountryIso3],
+        [],
     );
 
     const adminOneLabelLayerOptions = useMemo<Omit<SymbolLayer, 'id'>>(
@@ -89,16 +88,58 @@ function ActiveCountryBaseMapLayer(props: Props) {
         [activeCountryIso3],
     );
 
+    const adminZeroLabelLayerOptions = useMemo<Omit<SymbolLayer, 'id'>>(
+        () => ({
+            type: 'symbol',
+            layout: {
+                visibility: 'none',
+            },
+        }),
+        [],
+    );
+
     return (
         <>
             <MapLayer
-                layerKey="admin-0"
-                layerOptions={adminZeroHighlightLayerOptions}
+                layerKey="background"
+                layerOptions={backgroundLayerOptions}
+            />
+            <MapLayer
+                layerKey="hillshade"
+                layerOptions={hiddenFillLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0-boundary-mask"
+                layerOptions={hiddenLineLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0-boundary"
+                layerOptions={hiddenLineLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0-boundary-disputed"
+                layerOptions={hiddenLineLayerOptions}
             />
             <MapLayer
                 layerKey="admin-0-highlight"
                 layerOptions={hiddenFillLayerOptions}
             />
+            <MapLayer
+                layerKey="admin-0-label"
+                layerOptions={adminZeroLabelLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0-label-priority"
+                layerOptions={adminZeroLabelLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0-label-non-independent"
+                layerOptions={adminZeroLabelLayerOptions}
+            />
+            <MapLayer
+                layerKey="admin-0"
+                layerOptions={adminZeroHighlightLayerOptions}
+            />
             <MapLayer
                 layerKey="admin-1-boundary"
                 layerOptions={adminOneBoundaryLayerOptions}

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

@@ -75,7 +75,6 @@ function ImminentEventListItem(props: Props) {
             withDarkBackground
             withPadding
             withoutSpacingOpticalCorrection
-            withContentWell
         >
             {children}
         </Container>