Ensure pages are re-rendered to fix filter bugs when years don't match

compendium-frontend/src/App.tsx

@@ -71,9 +71,9 @@ import SurveyLanding from "./survey/Landing";
 const router = createBrowserRouter([
   { path: "/budget", element: <BudgetPage /> },
   { path: "/funding", element: <FundingSourcePage /> },
-  { path: "/data/employment", element: <StaffGraphPage /> },
+  { path: "/data/employment", element: <StaffGraphPage key={'staffgraph'} /> },
   { path: "/data/traffic-ratio", element: <TrafficRatioPage /> },
-  { path: "/data/roles", element: <StaffGraphPage roles /> },
+  { path: "/data/roles", element: <StaffGraphPage roles key={'staffgraphroles'} /> },
   { path: "/employee-count", element: <StaffGraphAbsolutePage /> },
   { path: "/charging", element: <ChargingStructurePage /> },
   { path: "/suborganisations", element: <SubOrganisationPage /> },
@@ -83,21 +83,21 @@ const router = createBrowserRouter([
   { path: "/traffic-volume", element: <TrafficVolumePage /> },
   { path: "/data", element: <CompendiumData /> },
   { path: "/institutions-urls", element: <ConnectedInstitutionsURLsPage /> },
-  { path: "/connected-proportion", element: <ConnectedUserPage page={ConnectivityPage.ConnectedProportion} /> },
-  { path: "/connectivity-level", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLevel} /> },
-  { path: "/connectivity-growth", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityGrowth} /> },
-  { path: "/connection-carrier", element: <ConnectedUserPage page={ConnectivityPage.ConnectionCarrier} /> },
-  { path: "/connectivity-load", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLoad} /> },
-  { path: "/commercial-charging-level", element: <ConnectedUserPage page={ConnectivityPage.CommercialChargingLevel} /> },
-  { path: "/commercial-connectivity", element: <ConnectedUserPage page={ConnectivityPage.CommercialConnectivity} /> },
-  { path: "/network-services", element: <ServicesPage category={ServiceCategory.network_services} /> },
-  { path: "/isp-support-services", element: <ServicesPage category={ServiceCategory.isp_support} /> },
-  { path: "/security-services", element: <ServicesPage category={ServiceCategory.security} /> },
-  { path: "/identity-services", element: <ServicesPage category={ServiceCategory.identity} /> },
-  { path: "/collaboration-services", element: <ServicesPage category={ServiceCategory.collaboration} /> },
-  { path: "/multimedia-services", element: <ServicesPage category={ServiceCategory.multimedia} /> },
-  { path: "/storage-and-hosting-services", element: <ServicesPage category={ServiceCategory.storage_and_hosting} /> },
-  { path: "/professional-services", element: <ServicesPage category={ServiceCategory.professional_services} /> },
+  { path: "/connected-proportion", element: <ConnectedUserPage page={ConnectivityPage.ConnectedProportion} key={ConnectivityPage.ConnectedProportion} /> },
+  { path: "/connectivity-level", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLevel} key={ConnectivityPage.ConnectivityLevel} /> },
+  { path: "/connectivity-growth", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityGrowth} key={ConnectivityPage.ConnectivityGrowth} /> },
+  { path: "/connection-carrier", element: <ConnectedUserPage page={ConnectivityPage.ConnectionCarrier} key={ConnectivityPage.ConnectionCarrier} /> },
+  { path: "/connectivity-load", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLoad} key={ConnectivityPage.ConnectivityLoad} /> },
+  { path: "/commercial-charging-level", element: <ConnectedUserPage page={ConnectivityPage.CommercialChargingLevel} key={ConnectivityPage.CommercialChargingLevel} /> },
+  { path: "/commercial-connectivity", element: <ConnectedUserPage page={ConnectivityPage.CommercialConnectivity} key={ConnectivityPage.CommercialConnectivity} /> },
+  { path: "/network-services", element: <ServicesPage category={ServiceCategory.network_services} key={ServiceCategory.network_services} /> },
+  { path: "/isp-support-services", element: <ServicesPage category={ServiceCategory.isp_support} key={ServiceCategory.isp_support} /> },
+  { path: "/security-services", element: <ServicesPage category={ServiceCategory.security} key={ServiceCategory.security} /> },
+  { path: "/identity-services", element: <ServicesPage category={ServiceCategory.identity} key={ServiceCategory.identity} /> },
+  { path: "/collaboration-services", element: <ServicesPage category={ServiceCategory.collaboration} key={ServiceCategory.collaboration} /> },
+  { path: "/multimedia-services", element: <ServicesPage category={ServiceCategory.multimedia} key={ServiceCategory.multimedia} /> },
+  { path: "/storage-and-hosting-services", element: <ServicesPage category={ServiceCategory.storage_and_hosting} key={ServiceCategory.storage_and_hosting} /> },
+  { path: "/professional-services", element: <ServicesPage category={ServiceCategory.professional_services} key={ServiceCategory.professional_services} /> },
   { path: "/fibre-light", element: <FibreLightPage /> },
   { path: "/monitoring-tools", element: <MonitoringToolsPage /> },
   { path: "/pert-team", element: <PertTeamPage /> },

compendium-frontend/src/pages/Organization/StaffGraph.tsx

@@ -114,7 +114,6 @@ function StaffGraphPage({ roles = false }: inputProps) {
 
     const selectedData = staffData.filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
-
     );
 
     const nrenStaffDataset = createNRENStaffDataset(selectedData, roles, filterSelection.selectedYears[0]);