add graph

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

@@ -16,7 +16,9 @@
         <error-info :error="error"></error-info>
         <div class="mt-3">
             <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
-                <selected-variables></selected-variables>
+                <div class="ms-2">Click to toggle variables to include in graphs.</div>
+                <selected-variables v-for="graphKey in graphKeys" :graph-key="graphKey"></selected-variables>
+                <button class="btn btn-primary mt-2" id="add-graph-btn" @click="addGraph">Add Graph</button>
             </vertical-collapse>
         </div>
     </div>
@@ -60,6 +62,11 @@ export default defineComponent({
         const appIsConfigured = computed(() => store.state.configured);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const loadingMessage = userMessages.code.isValidating;
+        const graphKeys = computed(() => Object.keys(store.state.model.graphs));
+        const addGraph = () => {
+            const newGraphKey = `Graph ${Object.keys(store.state.model.graphs).length + 1}`;
+            store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, { key: newGraphKey, selectedVariables: [] });
+        };
 
         return {
             appIsConfigured,
@@ -72,7 +79,9 @@ export default defineComponent({
             showSelectedVariables,
             codeHelp,
             codeValidating,
-            loadingMessage
+            loadingMessage,
+            graphKeys,
+            addGraph
         };
     }
 });

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

@@ -1,6 +1,6 @@
 <template>
-    <div class="ms-2">Click to toggle variables to include in graphs.</div>
     <div class="selected-variables-panel m-2">
+        <h5>{{ graphKey }}</h5>
         <span
             v-for="variable in allVariables"
             class="badge variable me-2 mb-2"
@@ -23,10 +23,16 @@ import { ModelAction } from "../../store/model/actions";
 
 export default defineComponent({
     name: "SelectedVariables",
-    setup() {
+    props: {
+        graphKey: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
         const store = useStore();
         const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const selectedVariables = computed<string[]>(() => store.state.model.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed<string[]>(() => store.state.model.graphs[props.graphKey].selectedVariables);
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
@@ -39,7 +45,7 @@ export default defineComponent({
 
         const updateSelectedVariables = (newVariables: string[]) => {
             store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, {
-                key: "graph1",
+                key: props.graphKey,
                 selectedVariables: newVariables
             });
         };

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

@@ -37,7 +37,7 @@ export default (store: Store<AppState>, multiSensitivity: boolean): BaseSensitiv
             }
 
             // TODO: will need to tweak this to use combined set
-            if (!store.state.model.graphs["graph1"].selectedVariables.length) {
+            if (!store.state.model.graphs["Graph 1"].selectedVariables.length) {
                 return userMessages.model.selectAVariable;
             }
 

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

@@ -42,7 +42,7 @@ export default defineComponent({
         const dataColumns = computed(() => store.getters[`${namespace}/${FitDataGetter.nonTimeColumns}`]);
         const modelSuccess = computed(() => store.state.model.odinModelResponse?.valid);
         // TODO: will need to tweak this to use combined set
-        const selectedVariables = computed(() => store.state.model.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed(() => store.state.model.graphs["Graph 1"].selectedVariables);
         const linkedVariables = computed(() => store.state.fitData.linkedVariables);
         const linkPrerequisitesMessage = computed(() => {
             const messages = [];

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

@@ -1,4 +1,5 @@
 <template>
+    <h5>{{ graphKey }}</h5>
     <wodin-plot
         :fade-plot="fadePlot"
         :placeholder-message="placeholderMessage"
@@ -26,12 +27,16 @@ import { ParameterSet } from "../../store/run/state";
 export default defineComponent({
     name: "RunPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphKey: {
+            type: String,
+            default: "Graph 1"
+        }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
         const solution = computed(() => store.state.run.resultOde?.solution);
@@ -58,8 +63,7 @@ export default defineComponent({
 
         const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
 
-        // TODO: tweak for multiple plots
-        const selectedVariables = computed(() => store.state.model.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed(() => store.state.model.graphs[props.graphKey].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

@@ -30,7 +30,7 @@ export default defineComponent({
         const store = useStore();
 
         // TODO: tweak for multiple graphs
-        const selectedVariables = computed(() => store.state.model.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed(() => store.state.model.graphs["Graph 1"].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const solution = computed(() => store.state.run.resultDiscrete?.solution);

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

@@ -5,7 +5,13 @@
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
         <run-stochastic-plot v-if="isStochastic" :fade-plot="!!updateMsg"></run-stochastic-plot>
-        <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false">
+        <run-plot
+            v-for="graphKey in graphKeys"
+            v-else
+            :fade-plot="!!updateMsg"
+            :model-fit="false"
+            :graph-key="graphKey"
+        >
             <div v-if="sumOfSquares">
                 <span>Sum of squares: {{ sumOfSquares }}</span>
             </div>
@@ -100,7 +106,7 @@ export default defineComponent({
                 return userMessages.run.compileRequired;
             }
             // TODO: tweak for multiple graphs
-            if (!store.state.model.graphs["graph1"].selectedVariables.length) {
+            if (!store.state.model.graphs["Graph 1"].selectedVariables.length) {
                 return userMessages.model.selectAVariable;
             }
             // TODO: eventually make runRequired to runUpdateRequired I think?
@@ -119,6 +125,8 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
+        const graphKeys = computed(() => Object.keys(store.state.model.graphs));
+
         return {
             canRunModel,
             isStochastic,
@@ -131,7 +139,8 @@ export default defineComponent({
             canDownloadOutput,
             downloadUserFileName,
             toggleShowDownloadOutput,
-            download
+            download,
+            graphKeys
         };
     }
 });

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.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed(() => store.state.model.graphs["Graph 1"].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const xAxisSettings = computed(() => {

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

@@ -79,7 +79,7 @@ export default defineComponent({
         const palette = computed(() => store.state.model.paletteModel);
 
         // TODO: tweak for multiple graphs
-        const selectedVariables = computed(() => store.state.model.graphs["graph1"].selectedVariables);
+        const selectedVariables = computed(() => store.state.model.graphs["Graph 1"].selectedVariables);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 

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

@@ -46,7 +46,7 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 nPoints: this._points
             });
             // TODO: tweak for multiple graphs
-            const { selectedVariables } = this._state.model.graphs["graph1"];
+            const { selectedVariables } = this._state.model.graphs["Graph 1"];
 
             const worksheet = WodinModelOutputDownload._generateModelledOutput(
                 selectedVariables,
@@ -69,7 +69,7 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 const times = fitData.map((row: Dict<number>) => row[timeVariable]);
                 const solutionOutput = solution({ mode: "given", times });
                 // TODO: Tweak for multiple graphs
-                const { selectedVariables } = this._state.model.graphs["graph1"];
+                const { selectedVariables } = this._state.model.graphs["Graph 1"];
 
                 const worksheet = WodinModelOutputDownload._generateModelledOutput(
                     selectedVariables,

app/static/src/app/serialise.ts

@@ -179,15 +179,15 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     // TODO: tweak for multiple graphs
     if (
         model.odinModelResponse?.metadata?.variables &&
-        !model.graphs["graph1"].selectedVariables.length &&
-        !model.graphs["graph1"].unselectedVariables?.length
+        !model.graphs["Graph 1"].selectedVariables.length &&
+        !model.graphs["Graph 1"].unselectedVariables?.length
     ) {
         /* eslint-disable no-param-reassign */
         const selectedVariables = [...(model.odinModelResponse?.metadata?.variables || [])];
         const unselectedVariables: string[] = [];
 
         targetState.model.graphs = {
-            graph1: {
+            "Graph 1": {
                 selectedVariables,
                 unselectedVariables
             }

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

@@ -24,7 +24,7 @@ const updateLinkedVariables = (context: ActionContext<FitDataState, FitState>) =
     const { commit, state, rootState, getters } = context;
     const modelResponse = rootState.model.odinModelResponse;
     // TODO: tweak for multiple graphs
-    const modelVariables = modelResponse?.valid ? rootState.model.graphs["graph1"].selectedVariables : [];
+    const modelVariables = modelResponse?.valid ? rootState.model.graphs["Graph 1"].selectedVariables : [];
     const dataColumns = getters.nonTimeColumns;
     let newLinks = {};
     if (dataColumns) {

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

@@ -70,8 +70,8 @@ const compileModelAndUpdateStore = (context: ActionContext<ModelState, AppState>
 
         // Retain variable selections. Newly added variables will be selected by default
         // TODO: tweak for multiple graphs
-        const select = variables.filter((s) => !state.graphs["graph1"].unselectedVariables.includes(s));
-        commit(ModelMutation.SetSelectedVariables, { key: "graph1", selectedVariables: select });
+        const select = variables.filter((s) => !state.graphs["Graph 1"].unselectedVariables.includes(s));
+        commit(ModelMutation.SetSelectedVariables, { key: "Graph 1", selectedVariables: select });
 
         if (state.compileRequired) {
             commit(ModelMutation.SetCompileRequired, false);

app/static/src/app/store/model/model.ts

@@ -14,7 +14,7 @@ export const defaultState: ModelState = {
     //selectedVariables: [],
     //unselectedVariables: []
     graphs: {
-        graph1: {
+        "Graph 1": {
             selectedVariables: [],
             unselectedVariables: []
         }

app/static/src/app/store/model/mutations.ts

@@ -44,6 +44,12 @@ export const mutations: MutationTree<ModelState> = {
     },
 
     [ModelMutation.SetSelectedVariables](state: ModelState, payload: { key: string; selectedVariables: string[] }) {
+        if (!Object.keys(state.graphs).includes(payload.key)) {
+            state.graphs[payload.key] = {
+                selectedVariables: [],
+                unselectedVariables: []
+            };
+        }
         state.graphs[payload.key].selectedVariables = payload.selectedVariables;
         // Maintain unselected variables too, so we know which variables had been explicitly unselected when model
         // updates