[NM-95] Update naomi population pyramid to not filter aggregated proportions on selected area

src/app/static/src/app/components/plots/population/PopulationGrid.vue

@@ -28,12 +28,13 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { FilterOption, PopulationResponseData } from "../../../generated";
+import { FilterOption } from "../../../generated";
 import Population from "./Population.vue";
 import { useStore } from "vuex";
 import { RootState } from "../../../root";
 import PageControl from "../timeSeries/PageControl.vue";
 import {PopulationChartData} from "../../../store/plotSelections/plotSelections";
+import {PopulationPyramidData} from "../../../store/plotData/plotData";
 
 const subplotsConfig = {
   columns: 3,
@@ -52,7 +53,7 @@ watch(
 );
 
 const data = computed(
-  () => store.state.plotData.population as PopulationResponseData
+  () => store.state.plotData.population as PopulationPyramidData
 );
 
 const ageGroups = computed(

src/app/static/src/app/components/plots/table/Table.vue

@@ -18,7 +18,7 @@ import DownloadButton from '../timeSeries/downloadTimeSeries/DownloadButton.vue'
 import { exportService } from '../../../dataExportService';
 import { appendCurrentDateTime } from '../../../utils';
 import { formatOutput, getIndicatorMetadata } from '../utils';
-import { PlotData } from "../../../store/plotData/plotData";
+import {TableData} from "../../../store/plotData/plotData";
 import { PlotName } from "../../../store/plotSelections/plotSelections";
 
 // defines the order of headers on the excel download
@@ -45,7 +45,7 @@ export default defineComponent({
     },
     setup(props) {
         const store = useStore<RootState>();
-        const plotData = computed<PlotData>(() => store.state.plotData[props.plotName]);
+        const plotData = computed<TableData>(() => store.state.plotData[props.plotName] as TableData);
         const filterSelections = computed(() => store.state.plotSelections[props.plotName].filters);
         const indicatorMetadata = computed<IndicatorMetadata>(() => {
             const indicator = filterSelections.value.find(f => f.stateFilterId === "indicator")!.selection[0].id;

src/app/static/src/app/components/plots/table/TableReshapeData.vue

@@ -11,17 +11,18 @@ import { computed, defineComponent, PropType } from 'vue';
 import TableDisplay from './TableDisplay.vue';
 import { useStore } from 'vuex';
 import { RootState } from '../../../root';
-import {CalibrateDataResponse, FilterOption, InputComparisonData, TableMetadata} from '../../../generated';
+import {FilterOption, TableMetadata} from '../../../generated';
 import { FilterSelection, PlotName } from "../../../store/plotSelections/plotSelections";
 import {getTableValues, TableHeaderDef} from "./utils";
+import {TableData} from "../../../store/plotData/plotData";
 
 export default defineComponent({
     components: {
         TableDisplay
     },
     props: {
         data: {
-            type: Object as PropType<CalibrateDataResponse["data"] | InputComparisonData>,
+            type: Object as PropType<TableData>,
             required: true
         },
         plot: {

src/app/static/src/app/components/plots/table/utils.ts

@@ -1,4 +1,4 @@
-import {PlotData} from "../../../store/plotData/plotData";
+import {TableData} from "../../../store/plotData/plotData";
 import {FilterSelection, PlotName,} from "../../../store/plotSelections/plotSelections";
 import {
     CalibrateDataResponse,
@@ -21,7 +21,7 @@ export interface TableHeaderDef {
 export const DIFFERENCE_POSITIVE_COLOR = "rgb(55, 126, 184)";
 export const DIFFERENCE_NEGATIVE_COLOR = "rgb(228, 26, 28)";
 
-export const getTableValues = (plot: PlotName, disaggregateColumn: string, row: PlotData[0]) => {
+export const getTableValues = (plot: PlotName, disaggregateColumn: string, row: TableData[0]) => {
     if (plot === "table") {
         const r = row as CalibrateDataResponse["data"][0];
         return {

src/app/static/src/app/hintVersion.ts

@@ -1 +1 @@
-export const currentHintVersion = "3.13.0";
+export const currentHintVersion = "3.13.1";

src/app/static/src/app/store/plotData/filter.ts

@@ -270,11 +270,17 @@ export const getPopulationFilteredData = async (payload: PlotSelectionUpdate, co
         return;
     }
 
-    // Filter the data on the current selections
-    // filteredData still contains data for all uploaded area levels, which is then handled in the aggregation logic below
+    // Filter the data on the current selections. The raw data has no area_level column so the
+    // filteredData still contains data for all uploaded area levels. Setting the area filter is
+    // handled in the area aggregation logic below
+    // We want to show national proportions too, to calculate this we need to remove any specific area level filter,
+    // but we still want to filter on all other items e.g. calendar quarter.
     const { filters } = payload.selections;
     const { filterTypes } = getMetadataFromPlotName(rootState, payload.plot);
-    const filteredData: PopulationResponseData = filterData(filters, data, filterTypes);
+    const nonAreaFilter = filters.filter((f: FilterSelection) => f.filterId !== "area")
+    const areaFilter = filters.filter((f: FilterSelection) => f.filterId === "area")
+    const allAreaData = filterData(nonAreaFilter, data, filterTypes);
+    const filteredData: PopulationResponseData = filterData(areaFilter, allAreaData, filterTypes);
 
     const selectedAreaLevel = Number(filters.find(f=>f.stateFilterId === 'area_level')?.selection[0].id) || 0;
     const areaIdToPropertiesMap: Dict<AreaProperties> = rootGetters["baseline/areaIdToPropertiesMap"];
@@ -286,9 +292,14 @@ export const getPopulationFilteredData = async (payload: PlotSelectionUpdate, co
         areaIdToPropertiesMap[a.area_id].area_sort_order - areaIdToPropertiesMap[b.area_id].area_sort_order
     )
 
+    const nationalData = aggregatePopulation(allAreaData, 0, areaIdToPropertiesMap, areaIdToParentPath);
+
     const plotDataPayload: PlotDataUpdate = {
         plot: payload.plot,
-        data: aggregatedData
+        data: {
+            data: aggregatedData,
+            nationalLevelData: nationalData
+        },
     };
 
     commit(`plotData/${PlotDataMutations.updatePlotData}`, { payload: plotDataPayload }, { root: true });

src/app/static/src/app/store/plotData/plotData.ts

@@ -10,7 +10,13 @@ import {
 import { PlotName, plotNames } from "../plotSelections/plotSelections"
 import { mutations } from "./mutations"
 
-export type PlotData = CalibrateDataResponse["data"] | InputTimeSeriesData | CalibratePlotData | ComparisonPlotData | InputComparisonData | PopulationResponseData;
+export type PopulationPyramidData = {
+    data: PopulationResponseData;
+    nationalLevelData: PopulationResponseData;
+}
+
+export type PlotData = CalibrateDataResponse["data"] | InputTimeSeriesData | CalibratePlotData | ComparisonPlotData | InputComparisonData | PopulationPyramidData;
+export type TableData = CalibrateDataResponse["data"] | InputComparisonData;
 export type InputTimeSeriesKey = keyof InputTimeSeriesRow;
 export type PlotDataState = {
     [P in PlotName]: PlotData

src/app/static/src/app/store/plotSelections/getters.ts

@@ -14,7 +14,7 @@ import {
     sortDatasets
 } from "../../components/plots/bar/utils";
 import {RootState} from "../../root";
-import {PlotData} from "../plotData/plotData";
+import {PlotData, PopulationPyramidData} from "../plotData/plotData";
 import {Dict} from "../../types";
 import {getMetadataFromPlotName} from "./actions";
 import {AreaProperties} from "../baseline/baseline";
@@ -88,7 +88,7 @@ export const getters = {
     // Called with already filtered and aggregated PopulationResponseData, this getter transforms the table of
     // data into the format needed for chart js.
     populationChartData: (state: PlotSelectionsState, getters: any) =>
-        (plotName: PlotName, plotData: PopulationResponseData, ageGroups: FilterOption[]): PopulationChartData => {
+        (plotName: PlotName, plotData: PopulationPyramidData, ageGroups: FilterOption[]): PopulationChartData => {
 
         const plotType = getters.controlSelectionFromId(plotName, "plot");
 
@@ -103,11 +103,11 @@ export const getters = {
         // Country data for stepped outline
         let countryData: PopulationChartDataset[] = []
         if (isProportion) {
-            countryData = getSinglePopulationChartDataset({indicators: plotData, ageGroups, isOutline: true, isProportion})
+            countryData = getSinglePopulationChartDataset({indicators: plotData.nationalLevelData, ageGroups, isOutline: true, isProportion})
         }
 
         // Group data by area_id
-        plotData.forEach((ind: PopulationResponseData[0]) => {
+        plotData.data.forEach((ind: PopulationResponseData[0]) => {
           if (!groupedData[ind.area_id]) {
             groupedData[ind.area_id] = [];
           }

src/app/static/src/tests/components/plots/timeSeries/downloadTimeSeries/downloadTimeSeries.test.ts

@@ -42,7 +42,7 @@ describe("download indicator", () => {
 
     const reviewInputDatasets = {
         anc: mockReviewInputDataset({
-            data: mockUnfilteredDataset as PlotData
+            data: mockUnfilteredDataset
         })
     }
 

src/app/static/src/tests/mocks.ts

@@ -59,7 +59,7 @@ import {
     initialPlotSelectionsState,
     PlotSelectionsState
 } from "../app/store/plotSelections/plotSelections";
-import { PlotDataState, initialPlotDataState } from "../app/store/plotData/plotData";
+import {PlotDataState, initialPlotDataState, PopulationPyramidData} from "../app/store/plotData/plotData";
 import { PlotState, initialPlotState } from "../app/store/plotState/plotState";
 
 export const mockAxios = new MockAdapter(axios);
@@ -557,6 +557,27 @@ export const mockPopulationDataResponse = (): PopulationResponseData => {
     }]
 }
 
+export const mockPopulationPyramidData = (): PopulationPyramidData => {
+    return {
+        data: [{
+            area_id: "MWI_4_10_demo",
+            area_name: "Ntchisi",
+            calendar_quarter: "CY2008Q2",
+            sex: "female",
+            age_group: "Y000_004",
+            population: 21299
+        }],
+        nationalLevelData: [{
+            area_id: "MWI",
+            area_name: "Malawi",
+            calendar_quarter: "CY2008Q2",
+            sex: "female",
+            age_group: "Y000_004",
+            population: 21299
+        }]
+    }
+}
+
 export const mockCalibrateDataResponse = (): CalibrateDataResponse["data"] => {
     return [{
         area_id: "MWI",

src/app/static/src/tests/plotData/filter.test.ts

@@ -939,7 +939,10 @@ describe("filter tests", () => {
             expect(commit.mock.calls[0][0]).toStrictEqual(`plotData/${PlotDataMutations.updatePlotData}`);
             expect(commit.mock.calls[0][1].payload).toStrictEqual({
                 plot: "population",
-                data: expectedData
+                data: {
+                    data: expectedData,
+                    nationalLevelData: expectedData
+                }
             });
         });
 
@@ -970,11 +973,18 @@ describe("filter tests", () => {
                 {area_id: "MWI_1_2", area_name: "Central", calendar_quarter: "CY2019Q1", sex: "male", age_group: "Y000_004", population: 24},
                 {area_id: "MWI_1_2", area_name: "Central", calendar_quarter: "CY2019Q1", sex: "female", age_group: "Y000_004", population: 25}
             ]
+            const expectedNationalData: PopulationResponseData = [
+                {area_id: "MWI", area_name: "Malawi", calendar_quarter: "CY2019Q1", sex: "male", age_group: "Y000_004", population: 13 + 11 + 24},
+                {area_id: "MWI", area_name: "Malawi", calendar_quarter: "CY2019Q1", sex: "female", age_group: "Y000_004", population: 15 + 13 + 25},
+            ]
             expect(commit.mock.calls.length).toBe(1);
             expect(commit.mock.calls[0][0]).toStrictEqual(`plotData/${PlotDataMutations.updatePlotData}`);
             expect(commit.mock.calls[0][1].payload).toStrictEqual({
                 plot: "population",
-                data: expectedData
+                data: {
+                    data: expectedData,
+                    nationalLevelData: expectedNationalData
+                }
             });
         });
 

src/app/static/src/tests/plotSelections/getters.test.ts

@@ -9,7 +9,7 @@ import {
     mockRootState,
     mockReviewInputState,
     mockInputComparisonMetadata,
-    mockPopulationDataResponse
+    mockPopulationDataResponse, mockPopulationPyramidData
 } from "../mocks";
 import {getters, PopulationColors} from "../../app/store/plotSelections/getters";
 import {PlotName} from "../../app/store/plotSelections/plotSelections";
@@ -397,40 +397,76 @@ describe("plotSelections getters", () => {
         expect(data.datasets[1].label).toBe("Option A");
     });
 
-    const populationData = [
-        {
-            area_id: "MWI_4_10_demo",
-            area_name: "Ntchisi",
-            calendar_quarter: "CY2008Q2",
-            sex: "female",
-            age_group: "Y000_004",
-            population: 2
-        },
-        {
-            area_id: "MWI_4_10_demo",
-            area_name: "Ntchisi",
-            calendar_quarter: "CY2008Q2",
-            sex: "female",
-            age_group: "Y005_009",
-            population: 3
-        },
-        {
-            area_id: "MWI_4_10_demo",
-            area_name: "Ntchisi",
-            calendar_quarter: "CY2008Q2",
-            sex: "male",
-            age_group: "Y000_004",
-            population: 4
-        },
-        {
-            area_id: "MWI_4_10_demo",
-            area_name: "Ntchisi",
-            calendar_quarter: "CY2008Q2",
-            sex: "male",
-            age_group: "Y005_009",
-            population: 5
-        }
-    ];
+    const populationData = {
+        data: [
+            {
+                area_id: "MWI_4_10_demo",
+                area_name: "Ntchisi",
+                calendar_quarter: "CY2008Q2",
+                sex: "female",
+                age_group: "Y000_004",
+                population: 2
+            },
+            {
+                area_id: "MWI_4_10_demo",
+                area_name: "Ntchisi",
+                calendar_quarter: "CY2008Q2",
+                sex: "female",
+                age_group: "Y005_009",
+                population: 3
+            },
+            {
+                area_id: "MWI_4_10_demo",
+                area_name: "Ntchisi",
+                calendar_quarter: "CY2008Q2",
+                sex: "male",
+                age_group: "Y000_004",
+                population: 4
+            },
+            {
+                area_id: "MWI_4_10_demo",
+                area_name: "Ntchisi",
+                calendar_quarter: "CY2008Q2",
+                sex: "male",
+                age_group: "Y005_009",
+                population: 5
+            }
+        ],
+        nationalLevelData: [
+            {
+                area_id: "MWI",
+                area_name: "Malawi",
+                calendar_quarter: "CY2008Q2",
+                sex: "female",
+                age_group: "Y000_004",
+                population: 2
+            },
+            {
+                area_id: "MWI",
+                area_name: "Malawi",
+                calendar_quarter: "CY2008Q2",
+                sex: "female",
+                age_group: "Y005_009",
+                population: 3
+            },
+            {
+                area_id: "MWI",
+                area_name: "Malawi",
+                calendar_quarter: "CY2008Q2",
+                sex: "male",
+                age_group: "Y000_004",
+                population: 4
+            },
+            {
+                area_id: "MWI",
+                area_name: "Malawi",
+                calendar_quarter: "CY2008Q2",
+                sex: "male",
+                age_group: "Y005_009",
+                population: 5
+            },
+        ]
+    };
 
     it ('population data returns two datasets when population plot type is selected', () => {
         const getter = getters.populationChartData(mockPlotSelectionsState(), mockGetters);
@@ -515,7 +551,7 @@ describe("plotSelections getters", () => {
     })
 
     it ('population data returns 0 datasets when plot type not known ', () => {
-        const plotData = mockPopulationDataResponse();
+        const plotData = mockPopulationPyramidData();
         const mockGetters = {
             controlSelectionFromId: (plotName: PlotName, controlId: string) => {
                 return null