diff --git a/src/layout/MobileCalculatorPage.jsx b/src/layout/MobileCalculatorPage.jsx index 83f8c3c1e..10351b1a1 100644 --- a/src/layout/MobileCalculatorPage.jsx +++ b/src/layout/MobileCalculatorPage.jsx @@ -276,7 +276,7 @@ function MobileBottomMenu(props) { function MobileTreeNavigationHolder(props) { const { metadata, type, buttonHeight } = props; // Try to find the current focus in the tree. - const [searchParams] = useSearchParams(); + const [searchParams, setSearchParams] = useSearchParams(); const focus = searchParams.get("focus"); @@ -354,6 +354,11 @@ function MobileTreeNavigationHolder(props) { margin: 0, fontWeight: i === breadcrumbs.length - 1 ? "normal" : "lighter", }} + onClick={() => { + let newSearch = new URLSearchParams(searchParams); + newSearch.set("focus", breadcrumb.name); + setSearchParams(newSearch); + }} > {breadcrumb.label} {i < breadcrumbs.length - 1 && ( diff --git a/src/pages/PolicyPage.jsx b/src/pages/PolicyPage.jsx index 9f24aa178..75b8c4849 100644 --- a/src/pages/PolicyPage.jsx +++ b/src/pages/PolicyPage.jsx @@ -19,6 +19,7 @@ import { Helmet } from "react-helmet"; import SearchParamNavButton from "../controls/SearchParamNavButton"; import style from "../style"; import DeprecationModal from "../modals/DeprecationModal"; +import { impactKeys } from "../pages/policy/output/ImpactTypes.jsx"; export function ParameterSearch(props) { const { metadata, callback } = props; @@ -155,15 +156,53 @@ export default function PolicyPage(props) { ); } else if (isOutput) { - middle = ( - <> + const POLICY_OUTPUT_TREE = getPolicyOutputTree(metadata.countryId); + const validFocusValues = impactKeys; + const stripped_focus = focus.replace("policyOutput.", ""); + + // Check if the current focus is within validFocusValues + if ( + focus === "policyOutput.policyBreakdown" || + focus === "policyOutput.codeReproducibility" || + validFocusValues.includes(stripped_focus) + ) { + middle = ( - - ); + ); + } else { + // Find the node in the tree where the name matches the focus + const findNodeByName = (node, name) => { + if (node.name === name) { + return node; + } + if (node.children) { + for (let child of node.children) { + const result = findNodeByName(child, name); + if (result) { + return result; + } + } + } + return null; + }; + + const node = findNodeByName(POLICY_OUTPUT_TREE[0], focus); + + // Render FolderPage with its children if the node is found + if (node) { + middle = ( + + {node.children} + + ); + } else { + middle =
Page cannot be found.
; + } + } } if (mobile) {