should work with existing ui, new store structure

app/static/src/app/components/code/SelectedVariables.vue

@@ -19,14 +19,14 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
-import { ModelAction } from "../../store/model/actions";
+import {GraphsAction} from "../../store/graphs/actions";
 
 export default defineComponent({
     name: "SelectedVariables",
     setup() {
         const store = useStore();
         const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const selectedVariables = computed<string[]>(() => store.state.model.selectedVariables);
+        const selectedVariables = computed<string[]>(() => store.state.graphs.config[0].selectedVariables);
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
@@ -38,7 +38,7 @@ export default defineComponent({
         };
 
         const updateSelectedVariables = (newVariables: string[]) => {
-            store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, newVariables);
+            store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {index: 0, selectedVariables: newVariables});
         };
 
         const toggleVariable = (variable: string) => {

app/static/src/app/components/mixins/baseSensitivity.ts

@@ -8,6 +8,7 @@ import { sensitivityUpdateRequiredExplanation, verifyValidPlotSettingsTime } fro
 import { Dict } from "../../types/utilTypes";
 import { BaseSensitivityMutation } from "../../store/sensitivity/mutations";
 import { BaseSensitivityAction } from "../../store/sensitivity/actions";
+import {GraphsGetter} from "../../store/graphs/getters";
 
 export interface BaseSensitivityMixin {
     sensitivityPrerequisitesReady: ComputedRef<boolean>;
@@ -22,6 +23,7 @@ export default (store: Store<AppState>, multiSensitivity: boolean): BaseSensitiv
     const namespace = multiSensitivity ? "multiSensitivity" : "sensitivity";
 
     const hasRunner = computed(() => store.getters[`model/${ModelGetter.hasRunner}`]);
+    const allSelectedVariables = computed(() =>  store.getters[`graphs/${GraphsGetter.allSelectedVariables}`]);
 
     const sensitivityPrerequisitesReady = computed(() => {
         return hasRunner.value && !!store.state.model.odin && !store.state.model.compileRequired;
@@ -36,7 +38,7 @@ export default (store: Store<AppState>, multiSensitivity: boolean): BaseSensitiv
                 return userMessages.sensitivity.compileRequiredForUpdate(multiSensitivity);
             }
 
-            if (!store.state.model.selectedVariables.length) {
+            if (!allSelectedVariables.value.length) {
                 return userMessages.model.selectAVariable;
             }
 

app/static/src/app/excel/wodinModelOutputDownload.ts

@@ -6,6 +6,7 @@ import { FitData } from "../store/fitData/state";
 import { AppType } from "../store/appState/state";
 import { FitState } from "../store/fit/state";
 import { FitDataGetter } from "../store/fitData/getters";
+import {GraphsGetter} from "../store/graphs/getters";
 
 export class WodinModelOutputDownload extends WodinExcelDownload {
     private readonly _points: number;
@@ -45,7 +46,7 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 tEnd: end,
                 nPoints: this._points
             });
-            const { selectedVariables } = this._state.model;
+            const selectedVariables = this._state.graphs.config.flatMap((c) => c.selectedVariables);
 
             const worksheet = WodinModelOutputDownload._generateModelledOutput(
                 selectedVariables,
@@ -67,7 +68,7 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
             if (fitData && timeVariable) {
                 const times = fitData.map((row: Dict<number>) => row[timeVariable]);
                 const solutionOutput = solution({ mode: "given", times });
-                const { selectedVariables } = this._state.model;
+                const selectedVariables = this._rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`];
 
                 const worksheet = WodinModelOutputDownload._generateModelledOutput(
                     selectedVariables,

app/static/src/app/serialise.ts

@@ -17,7 +17,7 @@ import {
     SerialisedModelFitState,
     SerialisedMultiSensitivityState
 } from "./types/serialisationTypes";
-import { GraphSettingsState } from "./store/graphs/state";
+import { GraphsState} from "./store/graphs/state";
 import { Dict } from "./types/utilTypes";
 import { MultiSensitivityState } from "./store/multiSensitivity/state";
 
@@ -34,10 +34,7 @@ function serialiseModel(model: ModelState): SerialisedModelState {
         odinModelResponse: model.odinModelResponse,
         hasOdin: !!model.odin,
         odinModelCodeError: model.odinModelCodeError,
-        paletteModel: model.paletteModel,
-        //selectedVariables: model.selectedVariables,
-        //unselectedVariables: model.unselectedVariables
-        graphs: model.graphs
+        paletteModel: model.paletteModel
     };
 }
 
@@ -143,7 +140,7 @@ function serialiseModelFit(modelFit: ModelFitState): SerialisedModelFitState {
     };
 }
 
-export const serialiseGraphSettings = (state: GraphSettingsState): GraphSettingsState => {
+export const serialiseGraphs = (state: GraphsState): GraphsState => {
     return { ...state };
 };
 
@@ -155,7 +152,7 @@ export const serialiseState = (state: AppState): string => {
         run: serialiseRun(state.run),
         sensitivity: serialiseSensitivity(state.sensitivity),
         multiSensitivity: serialiseMultiSensitivity(state.multiSensitivity),
-        graphSettings: serialiseGraphSettings(state.graphSettings)
+        graphs: serialiseGraphs(state.graphs)
     };
 
     if (state.appType === AppType.Fit) {
@@ -175,22 +172,21 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     });
 
     // Initialise selected variables if required
-    const { model } = targetState;
-    // TODO: tweak for multiple graphs
+    const { model, graphs } = targetState;
     if (
         model.odinModelResponse?.metadata?.variables &&
-        !model.graphs["Graph 1"].selectedVariables.length &&
-        !model.graphs["Graph 1"].unselectedVariables?.length
+        !graphs.config[0].selectedVariables.length &&
+        !graphs.config[0].unselectedVariables?.length
     ) {
         /* eslint-disable no-param-reassign */
         const selectedVariables = [...(model.odinModelResponse?.metadata?.variables || [])];
         const unselectedVariables: string[] = [];
 
-        targetState.model.graphs = {
-            "Graph 1": {
+        targetState.graphs.config = [
+            {
                 selectedVariables,
                 unselectedVariables
             }
-        };
+        ];
     }
 };

app/static/src/app/store/fitData/actions.ts

@@ -8,6 +8,7 @@ import { RunMutation } from "../run/mutations";
 import { ModelFitMutation } from "../modelFit/mutations";
 import { ModelFitAction } from "../modelFit/actions";
 import { SensitivityMutation } from "../sensitivity/mutations";
+import {GraphsGetter} from "../graphs/getters";
 
 export enum FitDataAction {
     Upload = "Upload",
@@ -21,9 +22,9 @@ const updateLinkedVariables = (context: ActionContext<FitDataState, FitState>) =
     // This is called whenever new data is uploaded, or selected time variable changes, or the model changes, which
     // may partially or fully invalidate any existing links. We retain any we can from previous selection.
     // Empty string means no link
-    const { commit, state, rootState, getters } = context;
+    const { commit, state, rootState, getters, rootGetters } = context;
     const modelResponse = rootState.model.odinModelResponse;
-    const modelVariables = modelResponse?.valid ? rootState.graphs.config.flatMap((c) => c.selectedVariables) : [];
+    const modelVariables = modelResponse?.valid ? rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`] : [];
     const dataColumns = getters.nonTimeColumns;
     let newLinks = {};
     if (dataColumns) {

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

@@ -0,0 +1,17 @@
+import {GraphsState} from "./state";
+import {Getter, GetterTree} from "vuex";
+import {AppState} from "../appState/state";
+
+export enum GraphsGetter {
+    allSelectedVariables= "allSelectedVariables"
+}
+
+export interface GraphsGetters {
+    [GraphsGetter.allSelectedVariables]: Getter<GraphsState, AppState>
+}
+
+export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
+    [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
+        return state.config.flatMap((c) => c.selectedVariables);
+    }
+};

app/static/src/app/types/serialisationTypes.ts

@@ -11,9 +11,8 @@ import { VisualisationTab } from "../store/appState/state";
 import { CodeState } from "../store/code/state";
 import { FitDataState } from "../store/fitData/state";
 import { Palette } from "../palette";
-import { GraphSettingsState } from "../store/graphs/state";
+import { GraphsState} from "../store/graphs/state";
 import { Dict } from "./utilTypes";
-import { GraphConfig } from "../store/model/state";
 
 export interface SerialisedRunResult {
     inputs: OdinRunInputs | OdinFitInputs;
@@ -27,9 +26,6 @@ export interface SerialisedModelState {
     hasOdin: boolean;
     odinModelCodeError: WodinError | null;
     paletteModel: Palette | null;
-    //selectedVariables: string[];
-    //unselectedVariables: string[];
-    graphs: Dict<GraphConfig>;
 }
 
 export interface SerialisedRunState {
@@ -84,7 +80,7 @@ export interface SerialisedAppState {
     run: SerialisedRunState;
     sensitivity: SerialisedSensitivityState;
     multiSensitivity: SerialisedMultiSensitivityState;
-    graphSettings: GraphSettingsState;
+    graphs: GraphsState;
     fitData?: FitDataState;
     modelFit?: SerialisedModelFitState;
 }