implement setting narrowing based on choices

owid · May 30, 2024 · f47861a · f47861a
1 parent 26f1b2f
commit f47861a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/site/multi-dim/MultiDimDataPageConfig.ts b/site/multi-dim/MultiDimDataPageConfig.ts
@@ -47,6 +47,50 @@ export class MultiDimDataPageConfig {
         return matchingViews[0]
     }
 
+    filterToAvailableChoices(selectedChoices: Record<string, string>) {
+        const updatedSelectedChoices: Record<string, string> = {}
+        const dimensionsWithAvailableChoices = this.dimensions
+        for (const [dimSlug, dim] of Object.entries(
+            dimensionsWithAvailableChoices
+        )) {
+            const availableViewsBeforeSelection = this.filterViewsByDimensions(
+                updatedSelectedChoices
+            )
+            if (
+                selectedChoices[dimSlug] &&
+                dim.choices[selectedChoices[dimSlug]]
+            ) {
+                updatedSelectedChoices[dimSlug] = selectedChoices[dimSlug]
+            } else {
+                throw new Error(
+                    `Missing or invalid choice for dimension ${dimSlug}`
+                )
+            }
+
+            const availableViewsAfterSelection = this.filterViewsByDimensions(
+                updatedSelectedChoices
+            )
+            if (availableViewsAfterSelection.length === 0) {
+                updatedSelectedChoices[dimSlug] = Object.values(
+                    dim.choices
+                )[0].slug
+            }
+
+            dim.choices = Object.fromEntries(
+                Object.entries(dim.choices).filter(([slug, _]) =>
+                    availableViewsBeforeSelection.some(
+                        (view) => view.dimensions[dimSlug] === slug
+                    )
+                )
+            )
+        }
+
+        return {
+            selectedChoices: updatedSelectedChoices,
+            dimensionsWithAvailableChoices,
+        }
+    }
+
     static transformIndicatorPathObj(
         indicatorPathObj: Record<string, DimensionProperty>
     ): Record<DimensionProperty, string[]> {

diff --git a/site/multi-dim/MultiDimDataPageContent.tsx b/site/multi-dim/MultiDimDataPageContent.tsx
@@ -54,6 +54,7 @@ import {
     memoize,
     Url,
     getWindowQueryParams,
+    isEqual,
 } from "@ourworldindata/utils"
 import { AttachmentsContext, DocumentContext } from "../gdocs/OwidGdoc.js"
 import StickyNav from "../blocks/StickyNav.js"
@@ -236,12 +237,26 @@ const MultiDimSettingsPanel = (props: {
 
     const [currentSettings, setCurrentSettings] = useState(initialSettings)
 
+    const [availableSettings, setAvailableSettings] = useState<
+        Record<string, DimensionWithChoicesKeyedBySlug>
+    >({})
+
+    useEffect(() => {
+        if (!config) return
+        const { dimensionsWithAvailableChoices, selectedChoices } =
+            config.filterToAvailableChoices(currentSettings)
+
+        setAvailableSettings(dimensionsWithAvailableChoices)
+        if (!isEqual(selectedChoices, currentSettings))
+            setCurrentSettings(selectedChoices)
+    }, [currentSettings, config])
+
     useEffect(
         () => props.updateSettings?.(currentSettings),
         [props, currentSettings]
     )
 
-    const settings = Object.values(dimensions).map((dim) => (
+    const settings = Object.values(availableSettings).map((dim) => (
         <DimensionDropdown
             key={dim.slug}
             dimension={dim}