Merge pull request #206 from mrc-ide/mrc-5440

mrc-5440 Store changes preliminary to multiple graphs

app/static/src/app/components/WodinPlot.vue

@@ -16,8 +16,8 @@ import { EventEmitter } from "events";
 import { newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config } from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
-import { GraphSettingsMutation } from "../store/graphSettings/mutations";
-import { YAxisRange } from "../store/graphSettings/state";
+import { GraphsMutation } from "../store/graphs/mutations";
+import { YAxisRange } from "../store/graphs/state";
 
 export default defineComponent({
     name: "WodinPlot",
@@ -59,16 +59,16 @@ export default defineComponent({
 
         const hasPlotData = computed(() => !!baseData.value?.length);
 
-        const yAxisType = computed(() => (store.state.graphSettings.logScaleYAxis ? "log" : ("linear" as AxisType)));
-        const lockYAxis = computed(() => store.state.graphSettings.lockYAxis);
-        const yAxisRange = computed(() => store.state.graphSettings.yAxisRange as YAxisRange);
+        const yAxisType = computed(() => (store.state.graphs.settings.logScaleYAxis ? "log" : ("linear" as AxisType)));
+        const lockYAxis = computed(() => store.state.graphs.settings.lockYAxis);
+        const yAxisRange = computed(() => store.state.graphs.settings.yAxisRange as YAxisRange);
 
         const updateAxesRange = () => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
-                store.commit(`graphSettings/${GraphSettingsMutation.SetYAxisRange}`, yRange);
+                store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, yRange);
             }
         };
 

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,10 @@ export default defineComponent({
         };
 
         const updateSelectedVariables = (newVariables: string[]) => {
-            store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, newVariables);
+            store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+                graphIndex: 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/components/options/GraphSettings.vue

@@ -27,27 +27,27 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "vuex";
-import { GraphSettingsMutation } from "../../store/graphSettings/mutations";
+import { GraphsMutation } from "../../store/graphs/mutations";
 
 export default defineComponent({
     name: "GraphSettings",
     setup() {
         const store = useStore();
         const logScaleYAxis = computed({
             get() {
-                return store.state.graphSettings.logScaleYAxis;
+                return store.state.graphs.settings.logScaleYAxis;
             },
             set(newValue) {
-                store.commit(`graphSettings/${GraphSettingsMutation.SetLogScaleYAxis}`, newValue);
+                store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`, newValue);
             }
         });
 
         const lockYAxis = computed({
             get() {
-                return store.state.graphSettings.lockYAxis;
+                return store.state.graphs.settings.lockYAxis;
             },
             set(newValue) {
-                store.commit(`graphSettings/${GraphSettingsMutation.SetLockYAxis}`, newValue);
+                store.commit(`graphs/${GraphsMutation.SetLockYAxis}`, newValue);
             }
         });
 

app/static/src/app/components/options/LinkData.vue

@@ -33,6 +33,7 @@ import { useStore } from "vuex";
 import { FitDataGetter } from "../../store/fitData/getters";
 import userMessages from "../../userMessages";
 import { FitDataAction } from "../../store/fitData/actions";
+import { GraphsGetter } from "../../store/graphs/getters";
 
 export default defineComponent({
     name: "LinkData",
@@ -41,7 +42,7 @@ export default defineComponent({
         const store = useStore();
         const dataColumns = computed(() => store.getters[`${namespace}/${FitDataGetter.nonTimeColumns}`]);
         const modelSuccess = computed(() => store.state.model.odinModelResponse?.valid);
-        const selectedVariables = computed(() => store.state.model.selectedVariables);
+        const selectedVariables = computed(() => store.getters[`graphs/${GraphsGetter.allSelectedVariables}`]);
         const linkedVariables = computed(() => store.state.fitData.linkedVariables);
         const linkPrerequisitesMessage = computed(() => {
             const messages = [];

app/static/src/app/components/run/RunPlot.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 
         const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
 
-        const selectedVariables = computed(() => store.state.model.selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {

app/static/src/app/components/run/RunStochasticPlot.vue

@@ -29,7 +29,7 @@ export default defineComponent({
     setup() {
         const store = useStore();
 
-        const selectedVariables = computed(() => store.state.model.selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const solution = computed(() => store.state.run.resultDiscrete?.solution);

app/static/src/app/components/run/RunTab.vue

@@ -55,6 +55,7 @@ import LoadingSpinner from "../LoadingSpinner.vue";
 import { AppType } from "../../store/appState/state";
 import { ModelGetter } from "../../store/model/getters";
 import RunStochasticPlot from "./RunStochasticPlot.vue";
+import { GraphsGetter } from "../../store/graphs/getters";
 
 export default defineComponent({
     name: "RunTab",
@@ -81,6 +82,7 @@ export default defineComponent({
         const sumOfSquares = computed(() => store.state.modelFit?.sumOfSquares);
 
         const hasRunner = computed(() => store.getters[`model/${ModelGetter.hasRunner}`]);
+        const allSelectedVariables = computed(() => store.getters[`graphs/${GraphsGetter.allSelectedVariables}`]);
 
         // Enable run button if model has initialised and compile is not required
         const canRunModel = computed(() => {
@@ -99,7 +101,7 @@ export default defineComponent({
             if (store.state.model.compileRequired) {
                 return userMessages.run.compileRequired;
             }
-            if (!store.state.model.selectedVariables.length) {
+            if (!allSelectedVariables.value.length) {
                 return userMessages.model.selectAVariable;
             }
             // TODO: eventually make runRequired to runUpdateRequired I think?

app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue

@@ -39,7 +39,7 @@ export default defineComponent({
         const batch = computed(() => store.state.sensitivity.result?.batch);
         const plotSettings = computed(() => store.state.sensitivity.plotSettings);
         const palette = computed(() => store.state.model.paletteModel);
-        const selectedVariables = computed(() => store.state.model.selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const xAxisSettings = computed(() => {
@@ -54,7 +54,7 @@ export default defineComponent({
 
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
-            const logScale = store.state.graphSettings.logScaleYAxis && isNotTimePlot;
+            const logScale = store.state.graphs.settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });

app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
-        const selectedVariables = computed(() => store.state.model.selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 

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,8 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 tEnd: end,
                 nPoints: this._points
             });
-            const { selectedVariables } = this._state.model;
+            const selectedVariables = this._rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`];
+            console.log(`selectedVariables are ${JSON.stringify(selectedVariables)}`);
 
             const worksheet = WodinModelOutputDownload._generateModelledOutput(
                 selectedVariables,
@@ -67,7 +69,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/graphSettings/state";
+import { GraphsState } from "./store/graphs/state";
 import { Dict } from "./types/utilTypes";
 import { MultiSensitivityState } from "./store/multiSensitivity/state";
 
@@ -34,9 +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
+        paletteModel: model.paletteModel
     };
 }
 
@@ -142,7 +140,7 @@ function serialiseModelFit(modelFit: ModelFitState): SerialisedModelFitState {
     };
 }
 
-export const serialiseGraphSettings = (state: GraphSettingsState): GraphSettingsState => {
+export const serialiseGraphs = (state: GraphsState): GraphsState => {
     return { ...state };
 };
 
@@ -154,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) {
@@ -174,14 +172,21 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     });
 
     // Initialise selected variables if required
-    const { model } = targetState;
+    const { model, graphs } = targetState;
     if (
         model.odinModelResponse?.metadata?.variables &&
-        !model.selectedVariables?.length &&
-        !model.unselectedVariables?.length
+        !graphs.config[0].selectedVariables.length &&
+        !graphs.config[0].unselectedVariables?.length
     ) {
         /* eslint-disable no-param-reassign */
-        targetState.model.selectedVariables = [...model.odinModelResponse.metadata.variables];
-        targetState.model.unselectedVariables = [];
+        const selectedVariables = [...(model.odinModelResponse?.metadata?.variables || [])];
+        const unselectedVariables: string[] = [];
+
+        targetState.graphs.config = [
+            {
+                selectedVariables,
+                unselectedVariables
+            }
+        ];
     }
 };

app/static/src/app/store/appState/state.ts

@@ -4,7 +4,7 @@ import { RunState } from "../run/state";
 import { AppConfig } from "../../types/responseTypes";
 import { SensitivityState } from "../sensitivity/state";
 import { VersionsState } from "../versions/state";
-import { GraphSettingsState } from "../graphSettings/state";
+import { GraphsState } from "../graphs/state";
 import { LanguageState } from "../../../../translationPackage/store/state";
 import { MultiSensitivityState } from "../multiSensitivity/state";
 import { SessionsState } from "../sessions/state";
@@ -44,7 +44,7 @@ export interface AppState {
     run: RunState;
     sensitivity: SensitivityState;
     multiSensitivity: MultiSensitivityState;
-    graphSettings: GraphSettingsState;
+    graphs: GraphsState;
     sessions: SessionsState;
     versions: VersionsState;
     language: LanguageState;

app/static/src/app/store/basic/basic.ts

@@ -12,7 +12,7 @@ import { AppType, VisualisationTab } from "../appState/state";
 import { newSessionId } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
-import { graphSettings } from "../graphSettings/graphSettings";
+import { graphs } from "../graphs/graphs";
 import { getters } from "../appState/getters";
 import { getStoreModule } from "../../../../translationPackage";
 import { multiSensitivity } from "../multiSensitivity/multiSensitivity";
@@ -52,7 +52,7 @@ export const storeOptions: StoreOptions<BasicState> = {
         multiSensitivity,
         sessions,
         versions,
-        graphSettings,
+        graphs,
         language
     },
     plugins: [logMutations, persistState]

app/static/src/app/store/fit/fit.ts

@@ -14,7 +14,7 @@ import { logMutations, persistState } from "../plugins";
 import { newSessionId } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
-import { graphSettings } from "../graphSettings/graphSettings";
+import { graphs } from "../graphs/graphs";
 import { getters } from "../appState/getters";
 import { getStoreModule } from "../../../../translationPackage";
 import { multiSensitivity } from "../multiSensitivity/multiSensitivity";
@@ -56,7 +56,7 @@ export const storeOptions: StoreOptions<FitState> = {
         multiSensitivity,
         sessions,
         versions,
-        graphSettings,
+        graphs,
         language
     },
     plugins: [logMutations, persistState]

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.model.selectedVariables : [];
+    const modelVariables = modelResponse?.valid ? rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`] : [];
     const dataColumns = getters.nonTimeColumns;
     let newLinks = {};
     if (dataColumns) {