SNT-225 Users can work on a scenario by filtering on a specific "parent OU" by bramj · Pull Request #180 · BLSQ/snt-malaria

bramj · 2026-02-02T10:15:47Z

Changes

Add a sidebar to the planning page that allows filtering by province (org unit), with filter state persisted in URL query params
Apply the org unit filter across budget, intervention plan, and map views
Handle map resizing when filters change or the sidebar is toggled

Related JIRA tickets

https://bluesquare.atlassian.net/browse/SNT-225

Print screen / video

filter-by-ou-parent-2026-02-02_11.08.17.webm

How to test

Verify sidebar opens/closes and map tiles re-render correctly
Select a province filter and confirm budget, intervention plan, and maps all update
Verify filter state persists in URL and survives page reload
Check that clearing the filter returns to national-level view

bramj

General comment: I think this PR stands up fairly well on its own, but will come together better with https://bluesquare.atlassian.net/browse/SNT-254 (showing the province boundaries)

I propose to better handle the visualization of this in a PR for that ticket.

bramj · 2026-02-02T10:59:00Z

js/src/components/InvalidateOnResize.tsx

+    }, [bounds, boundsOptions, map]);
+
+    return null;
+};


@Bewi I'll be honest: My frontend skills are not sufficient to know if this is the correct approach. It works well, and it feels like a clean pattern, but would be great if you can verify.

Looks good to me, I would only move FitBounds on its own file and type the InvalidateOnResize to be a FC

bramj · 2026-02-02T11:00:09Z

js/src/domains/planning/components/PlanningFiltersSidebar.tsx

+    // ancestors of the districts/zones de sante, so we can show these borders on the
+    // map.
+    // I think this will require us to configure somewhere the OU type that we're
+    // assigning interventions on.


Let's of complexity here can be simplified when we have a config for the country that states which OU type we actually want to show, instead of relying on the "valid OUs with geoms".

bramj · 2026-02-02T11:00:45Z

js/src/domains/planning/components/PlanningFiltersSidebar.tsx

+                    const currDepth =
+                        (curr.original as { depth?: number | null }).depth ??
+                        Infinity;
+                    return currDepth < prevDepth ? curr : prev;


Same here, this is ugly, can can be simplified, but out of scope for this PR I'd say

bramj · 2026-02-02T11:12:16Z

js/src/domains/planning/hooks/useGetOrgUnits.tsx

    };
+    if (orgUnitParentId) {
+        params.orgUnitParentId = orgUnitParentId;
+    }


I had to go with backend filtering since the OU payload doesn't contain enough data about the whole ancestor chain (e.g. for BFA, you probably want to filter on Region instead of Province, which is 2 levels up from the district)

Bewi

Overall it looks good.
I do wonder few things:

When country OU type is selected, do we really want to display the org unit selector ?
Overall it feels super complex, I suggest we have another task to try to think of a simplified approach.
Budgeting is acting weird on my side, the breakdown chart seems broken

Bewi · 2026-02-02T12:25:53Z

js/src/components/InvalidateOnResize.tsx

+ * Place this inside a `<MapContainer>` to handle dynamic layout changes
+ * (e.g. sidebar open/close) that Leaflet can't detect on its own.
+ */
+export const InvalidateOnResize = () => {


I would type this as a FC as well to know exactly what it is, I thought it was an utility function at first :D

Bewi · 2026-02-02T15:18:34Z

js/src/components/InvalidateOnResize.tsx

+    }, [bounds, boundsOptions, map]);
+
+    return null;
+};


Looks good to me, I would only move FitBounds on its own file and type the InvalidateOnResize to be a FC

Bewi · 2026-02-02T15:26:55Z

js/src/domains/planning/components/budgeting/Budgeting.tsx

-                            {formatMessage(MESSAGES.total)} :{' '}
-                            {formatBigNumber(totalCost)}
-                        </Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>


SX should be in a style object, it makes it easier to track and reduces html complexity

Bewi · 2026-02-02T15:32:56Z

js/src/domains/planning/components/PlanningFiltersSidebar.tsx

+    }, [orgUnits]);
+
+    // Filter org unit types to show only types with depth <= parentTypeDepth
+    // Note: The original object from API includes depth, but OriginalOrgUnitType type doesn't declare it


We could just add it and make it nullable on the model ?

I remember now: I wanted to avoid having to add something to such a basic type in IASO for fear of breaking something

Bewi · 2026-02-02T15:40:52Z

js/src/domains/planning/index.tsx

+        [params, redirectToReplace],
+    );
+
+    const handleToggleSidebar = useCallback(() => {


Feels like this useCallback is pointless, could use setIsSidebarOpen directly

Bewi · 2026-02-02T15:57:18Z

js/src/components/InterventionCategorySelect.tsx

-                        </Typography>
-                    </MenuItem>
-                )}
+                <MenuItem value={0}>


I am not sure about this, don't like having an intervention selector if there is only one assigned to all org units.
Even if the user has stripped down his view.

I am guessing that you changed this because when we select a parent OU, we might reach a point when we only have one intervention assigned but for the country we might have mulitple ?

Actually, I changed that one because it produced a ton of MUI warnings in the console, and it felt like an unnecessary check. Here is the commit: a101190, we can always revert it

I'll revert for now 👍

Bewi · 2026-02-02T16:02:50Z

js/src/components/InterventionSelect.tsx

                </MenuItem>
            )}
-            {showAllOption && sortedInterventions.length > 1 && (
+            {showAllOption && (


Same here, not sure we still want to display this if there is only one intervention

bramj · 2026-02-03T14:25:31Z

@Bewi

When country OU type is selected, do we really want to display the org unit selector ?

I agree, but the OU type names are not fixed, so we'd need to be smart about it. In this implementation, I take all ancestors that are higher than the OU level at which we do intervention planning. We don't know beforehand how many ancestors there are, and what they're named. Not sure how to work around that 🤔

Overall it feels super complex, I suggest we have another task to try to think of a simplified approach.

I was also surprised at how complex this all turned out to be 😅 .

Budgeting is acting weird on my side, the breakdown chart seems broken

That's a bug, I'll check this.

bramj · 2026-02-09T08:33:14Z

@Bewi Okay I fixed most of your review comments, thanks for them 🙏

I also had a look at the complexity again, and I agree, it hurts the head. One of the main sources for complexity is the automatic determining of the OU level at which we do intervention planning.

I feel like I need a "country account configuration", like the BudgetSettings singleton. Here we could then store things like:

the OU type that we use for intervention planning
other OU types that we want to show shapes for (e.g. provinces)

Perhaps I can use the IASO JsonDataStore (iaso/models/data_store.py)? Maybe we can do a quick call to discuss.

bramj · 2026-02-20T20:43:08Z

Finally! I'm happy with the implementation. I'll do a rebase after getting this one merged #195 and then it's good to go I think.

I made big simplifications mainly on:

Deciding which filters to add to the sidebar: an admin can now add a JsonDataStore record to configure the country + district level. That way we populate the "National" + in between layers. Still a bit complicated, but way better than "guessing" the layers based on shape presence.
The Budgeting module was simplified a lot by making the budget function return the full breakdown per OU: feat: Add full cost_class details per intervention to get_places_costs() output (SNT-225) snt-malaria-budgeting#40. This allows the frontend to simply filter on OU and aggregate the numbers.

or when sidebar is expanded/collapsed.

to InvalidateOnResize component.

- Use the `JsonDataStore` to determine the filtering levels - Massively simplify the component - Improve the UX: showing "National" as default

bramj commented Feb 2, 2026

View reviewed changes

bramj requested a review from Bewi February 2, 2026 11:08

bramj commented Feb 2, 2026

View reviewed changes

Bewi requested changes Feb 2, 2026

View reviewed changes

bramj force-pushed the SNT-225-filter-by-province branch from 6534452 to 2af2b6e Compare February 8, 2026 20:30

bramj force-pushed the SNT-225-filter-by-province branch from 3a07ac1 to 4dbf009 Compare February 10, 2026 08:40

bramj mentioned this pull request Feb 12, 2026

refac: Add support for the cost breakdown per org unit (SNT-225) #188

Merged

bramj force-pushed the SNT-225-filter-by-province branch from 51a3bd4 to 83a6d53 Compare February 18, 2026 16:19

bramj mentioned this pull request Feb 20, 2026

fix: Handle soft deletable models in demo creation script #195

Open

bramj force-pushed the SNT-225-filter-by-province branch from 3450c5c to f24a915 Compare February 20, 2026 20:32

bramj added 17 commits February 20, 2026 21:43

fix: Handle soft deletable models in demo creation script

6f38d12

feat: Add sidebar to planning page

3428a53

Improve sidebar icon toggle state

cb5bc2f

OU filter sidebar v1

fa0e8d4

Sidebar v2

56e0dd1

Improve dropdown labels

c259d10

Pre-set the filter to national level

bd32d11

Improve loading states

d80a1c7

Add filter state to URL query params + adapt zoom on main map

5c4a84a

Filter budget on displayed org units

c754320

Visually display the OU filter on the budget

3410f51

Don't fetch too much data for the OU parents list

b337cad

Filter intervention plan on displayed OU

dcac967

Filter intervention plan map on displayed OU

70d609c

refac: Cleanup unneeded renaming

907b196

Fix MUI console warnings

9414014

refac: Map resizing when filter changes...

f0444bd

or when sidebar is expanded/collapsed.

bramj added 9 commits February 20, 2026 21:43

Add translations

a089aff

refac: Extract FitBounds to its own file + add typing...

0f1f71a

to InvalidateOnResize component.

refac: Extract SX into styles object for Budgeting component

e80b981

refac: Remove useless callback

a6eedb0

cleanup: Extract SX clause

803ae9f

refac: Simplify the PlanningFiltersSidebar component

7bbfd1a

- Use the `JsonDataStore` to determine the filtering levels - Massively simplify the component - Improve the UX: showing "National" as default

revert based on PR feedback

992bec1

feat: Filter the budgeting on the OU selection

d13b282

fix: Give demo user the permission to read JsonDataStore

a803535

bramj force-pushed the SNT-225-filter-by-province branch from f24a915 to a803535 Compare February 20, 2026 20:43

Comments

Conversation

bramj commented Feb 2, 2026

Changes

Related JIRA tickets

Print screen / video

How to test

Uh oh!

bramj left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Bewi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bramj commented Feb 3, 2026

Uh oh!

bramj commented Feb 9, 2026

Uh oh!

bramj commented Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants