From 74e80c8d80a417cd4923460082050d7b59a3c53d Mon Sep 17 00:00:00 2001
From: Rob Ashton <robertashton94@gmail.com>
Date: Mon, 2 Dec 2024 10:14:52 +0000
Subject: [PATCH 1/4] Update naomi population pyramid to not filter aggregated
 proportions on selected area

---
 .../plots/population/PopulationGrid.vue       |   5 +-
 .../src/app/components/plots/table/Table.vue  |   4 +-
 .../src/app/components/plots/table/utils.ts   |   4 +-
 src/app/static/src/app/hintVersion.ts         |   2 +-
 .../static/src/app/store/plotData/filter.ts   |  11 +-
 .../static/src/app/store/plotData/plotData.ts |   8 +-
 .../src/app/store/plotSelections/getters.ts   |   8 +-
 .../downloadTimeSeries.test.ts                |   2 +-
 src/app/static/src/tests/mocks.ts             |  23 +++-
 .../static/src/tests/plotData/filter.test.ts  |  14 ++-
 .../src/tests/plotSelections/getters.test.ts  | 108 ++++++++++++------
 11 files changed, 136 insertions(+), 53 deletions(-)

diff --git a/src/app/static/src/app/components/plots/population/PopulationGrid.vue b/src/app/static/src/app/components/plots/population/PopulationGrid.vue
index 7d77294ed..dcce13c43 100644
--- a/src/app/static/src/app/components/plots/population/PopulationGrid.vue
+++ b/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(
diff --git a/src/app/static/src/app/components/plots/table/Table.vue b/src/app/static/src/app/components/plots/table/Table.vue
index 83f64000f..e344767ef 100644
--- a/src/app/static/src/app/components/plots/table/Table.vue
+++ b/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 { SquarePlotData } 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<SquarePlotData>(() => store.state.plotData[props.plotName] as SquarePlotData);
         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;
diff --git a/src/app/static/src/app/components/plots/table/utils.ts b/src/app/static/src/app/components/plots/table/utils.ts
index 5802687d5..f0e3ef605 100644
--- a/src/app/static/src/app/components/plots/table/utils.ts
+++ b/src/app/static/src/app/components/plots/table/utils.ts
@@ -1,4 +1,4 @@
-import {PlotData} from "../../../store/plotData/plotData";
+import {SquarePlotData} 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: SquarePlotData[0]) => {
     if (plot === "table") {
         const r = row as CalibrateDataResponse["data"][0];
         return {
diff --git a/src/app/static/src/app/hintVersion.ts b/src/app/static/src/app/hintVersion.ts
index 707788155..b922a38fe 100644
--- a/src/app/static/src/app/hintVersion.ts
+++ b/src/app/static/src/app/hintVersion.ts
@@ -1 +1 @@
-export const currentHintVersion = "3.13.0";
+export const currentHintVersion = "3.13.1";
diff --git a/src/app/static/src/app/store/plotData/filter.ts b/src/app/static/src/app/store/plotData/filter.ts
index ed7039420..edd162164 100644
--- a/src/app/static/src/app/store/plotData/filter.ts
+++ b/src/app/static/src/app/store/plotData/filter.ts
@@ -286,9 +286,18 @@ export const getPopulationFilteredData = async (payload: PlotSelectionUpdate, co
         areaIdToPropertiesMap[a.area_id].area_sort_order - areaIdToPropertiesMap[b.area_id].area_sort_order
     )
 
+    // For showing the national proportion, we want to remove any specific area level filter
+    // but we still want to filter on all other items e.g. calendar quarter. And then aggregate up too
+    const filtersForNational = filters.filter((f: FilterSelection) => f.filterId !== "area")
+    const nationalLevelData = filterData(filtersForNational, data, filterTypes);
+    const nationalData = aggregatePopulation(nationalLevelData, 0, areaIdToPropertiesMap, areaIdToParentPath);
+
     const plotDataPayload: PlotDataUpdate = {
         plot: payload.plot,
-        data: aggregatedData
+        data: {
+            data: aggregatedData,
+            nationalLevelData: nationalData
+        },
     };
       
     commit(`plotData/${PlotDataMutations.updatePlotData}`, { payload: plotDataPayload }, { root: true });
diff --git a/src/app/static/src/app/store/plotData/plotData.ts b/src/app/static/src/app/store/plotData/plotData.ts
index 4cb44b00b..6137fa87f 100644
--- a/src/app/static/src/app/store/plotData/plotData.ts
+++ b/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 SquarePlotData = Exclude<PlotData, PopulationPyramidData>;
 export type InputTimeSeriesKey = keyof InputTimeSeriesRow;
 export type PlotDataState = {
     [P in PlotName]: PlotData
diff --git a/src/app/static/src/app/store/plotSelections/getters.ts b/src/app/static/src/app/store/plotSelections/getters.ts
index 725a84a43..7f9981ee1 100644
--- a/src/app/static/src/app/store/plotSelections/getters.ts
+++ b/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] = [];
           }
diff --git a/src/app/static/src/tests/components/plots/timeSeries/downloadTimeSeries/downloadTimeSeries.test.ts b/src/app/static/src/tests/components/plots/timeSeries/downloadTimeSeries/downloadTimeSeries.test.ts
index a132e6e87..e965b138e 100644
--- a/src/app/static/src/tests/components/plots/timeSeries/downloadTimeSeries/downloadTimeSeries.test.ts
+++ b/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
         })
     }
 
diff --git a/src/app/static/src/tests/mocks.ts b/src/app/static/src/tests/mocks.ts
index 1355dd489..725bd7eb1 100644
--- a/src/app/static/src/tests/mocks.ts
+++ b/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",
diff --git a/src/app/static/src/tests/plotData/filter.test.ts b/src/app/static/src/tests/plotData/filter.test.ts
index afc6a05e5..ce647c787 100644
--- a/src/app/static/src/tests/plotData/filter.test.ts
+++ b/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
+                }
             });
         });
 
diff --git a/src/app/static/src/tests/plotSelections/getters.test.ts b/src/app/static/src/tests/plotSelections/getters.test.ts
index af4f56b62..5652746df 100644
--- a/src/app/static/src/tests/plotSelections/getters.test.ts
+++ b/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

From c003104c3e6241c8ac84b3802dfb0c94fbfa85f7 Mon Sep 17 00:00:00 2001
From: Rob Ashton <robertashton94@gmail.com>
Date: Mon, 2 Dec 2024 12:10:11 +0000
Subject: [PATCH 2/4] Tidy up the logic a little bit

---
 .../static/src/app/store/plotData/filter.ts   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/static/src/app/store/plotData/filter.ts b/src/app/static/src/app/store/plotData/filter.ts
index edd162164..2aa07ff02 100644
--- a/src/app/static/src/app/store/plotData/filter.ts
+++ b/src/app/static/src/app/store/plotData/filter.ts
@@ -270,11 +270,19 @@ 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")
+    console.log("nonAreaFilter", nonAreaFilter)
+    const areaFilter = filters.filter((f: FilterSelection) => f.filterId === "area")
+    const allAreaData = filterData(nonAreaFilter, data, filterTypes);
+    console.log("allAreaData", allAreaData)
+    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,11 +294,7 @@ export const getPopulationFilteredData = async (payload: PlotSelectionUpdate, co
         areaIdToPropertiesMap[a.area_id].area_sort_order - areaIdToPropertiesMap[b.area_id].area_sort_order
     )
 
-    // For showing the national proportion, we want to remove any specific area level filter
-    // but we still want to filter on all other items e.g. calendar quarter. And then aggregate up too
-    const filtersForNational = filters.filter((f: FilterSelection) => f.filterId !== "area")
-    const nationalLevelData = filterData(filtersForNational, data, filterTypes);
-    const nationalData = aggregatePopulation(nationalLevelData, 0, areaIdToPropertiesMap, areaIdToParentPath);
+    const nationalData = aggregatePopulation(allAreaData, 0, areaIdToPropertiesMap, areaIdToParentPath);
 
     const plotDataPayload: PlotDataUpdate = {
         plot: payload.plot,

From 27c2f4095b785ec110330507ddb89f78d22231ce Mon Sep 17 00:00:00 2001
From: Rob Ashton <robertashton94@gmail.com>
Date: Mon, 2 Dec 2024 12:28:47 +0000
Subject: [PATCH 3/4] Remove old logs

---
 src/app/static/src/app/store/plotData/filter.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/static/src/app/store/plotData/filter.ts b/src/app/static/src/app/store/plotData/filter.ts
index 2aa07ff02..0684637e2 100644
--- a/src/app/static/src/app/store/plotData/filter.ts
+++ b/src/app/static/src/app/store/plotData/filter.ts
@@ -278,10 +278,8 @@ export const getPopulationFilteredData = async (payload: PlotSelectionUpdate, co
     const { filters } = payload.selections;
     const { filterTypes } = getMetadataFromPlotName(rootState, payload.plot);
     const nonAreaFilter = filters.filter((f: FilterSelection) => f.filterId !== "area")
-    console.log("nonAreaFilter", nonAreaFilter)
     const areaFilter = filters.filter((f: FilterSelection) => f.filterId === "area")
     const allAreaData = filterData(nonAreaFilter, data, filterTypes);
-    console.log("allAreaData", allAreaData)
     const filteredData: PopulationResponseData = filterData(areaFilter, allAreaData, filterTypes);
 
     const selectedAreaLevel = Number(filters.find(f=>f.stateFilterId === 'area_level')?.selection[0].id) || 0;

From 879f222a950468469a7cda126d5e94d53bddbe57 Mon Sep 17 00:00:00 2001
From: Rob Ashton <robertashton94@gmail.com>
Date: Tue, 3 Dec 2024 09:32:48 +0000
Subject: [PATCH 4/4] Replace squareplotdata type with TableData

---
 src/app/static/src/app/components/plots/table/Table.vue      | 4 ++--
 .../src/app/components/plots/table/TableReshapeData.vue      | 5 +++--
 src/app/static/src/app/components/plots/table/utils.ts       | 4 ++--
 src/app/static/src/app/store/plotData/plotData.ts            | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/static/src/app/components/plots/table/Table.vue b/src/app/static/src/app/components/plots/table/Table.vue
index e344767ef..2b044b776 100644
--- a/src/app/static/src/app/components/plots/table/Table.vue
+++ b/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 { SquarePlotData } 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<SquarePlotData>(() => store.state.plotData[props.plotName] as SquarePlotData);
+        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;
diff --git a/src/app/static/src/app/components/plots/table/TableReshapeData.vue b/src/app/static/src/app/components/plots/table/TableReshapeData.vue
index 31ec20a79..baf63edff 100644
--- a/src/app/static/src/app/components/plots/table/TableReshapeData.vue
+++ b/src/app/static/src/app/components/plots/table/TableReshapeData.vue
@@ -11,9 +11,10 @@ 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: {
@@ -21,7 +22,7 @@ export default defineComponent({
     },
     props: {
         data: {
-            type: Object as PropType<CalibrateDataResponse["data"] | InputComparisonData>,
+            type: Object as PropType<TableData>,
             required: true
         },
         plot: {
diff --git a/src/app/static/src/app/components/plots/table/utils.ts b/src/app/static/src/app/components/plots/table/utils.ts
index f0e3ef605..cd6315d81 100644
--- a/src/app/static/src/app/components/plots/table/utils.ts
+++ b/src/app/static/src/app/components/plots/table/utils.ts
@@ -1,4 +1,4 @@
-import {SquarePlotData} 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: SquarePlotData[0]) => {
+export const getTableValues = (plot: PlotName, disaggregateColumn: string, row: TableData[0]) => {
     if (plot === "table") {
         const r = row as CalibrateDataResponse["data"][0];
         return {
diff --git a/src/app/static/src/app/store/plotData/plotData.ts b/src/app/static/src/app/store/plotData/plotData.ts
index 6137fa87f..4a94ca2da 100644
--- a/src/app/static/src/app/store/plotData/plotData.ts
+++ b/src/app/static/src/app/store/plotData/plotData.ts
@@ -16,7 +16,7 @@ export type PopulationPyramidData = {
 }
 
 export type PlotData = CalibrateDataResponse["data"] | InputTimeSeriesData | CalibratePlotData | ComparisonPlotData | InputComparisonData | PopulationPyramidData;
-export type SquarePlotData = Exclude<PlotData, PopulationPyramidData>;
+export type TableData = CalibrateDataResponse["data"] | InputComparisonData;
 export type InputTimeSeriesKey = keyof InputTimeSeriesRow;
 export type PlotDataState = {
     [P in PlotName]: PlotData