From b3e17263daba4416aeefce84177400fa8966b7db Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 26 Jun 2024 18:35:33 +0100
Subject: [PATCH 01/80] migrate changes from POC

---
 app/static/package-lock.json                  | 175 ++++++++++++------
 app/static/package.json                       |   2 +
 .../src/app/components/code/CodeTab.vue       |  36 +++-
 .../app/components/code/HiddenVariables.vue   | 108 +++++++++++
 .../app/components/code/SelectedVariables.vue | 107 +++++++----
 app/static/src/app/components/run/RunPlot.vue |  10 +-
 .../app/components/run/RunStochasticPlot.vue  |  10 +-
 app/static/src/app/components/run/RunTab.vue  |  18 +-
 .../src/app/excel/wodinModelOutputDownload.ts |   1 -
 app/static/src/app/store/graphs/actions.ts    |   8 +-
 app/static/src/app/store/graphs/getters.ts    |  15 +-
 app/static/src/app/store/graphs/mutations.ts  |   9 +-
 app/static/src/scss/style.scss                |  15 ++
 13 files changed, 399 insertions(+), 115 deletions(-)
 create mode 100644 app/static/src/app/components/code/HiddenVariables.vue

diff --git a/app/static/package-lock.json b/app/static/package-lock.json
index 97ca57d6..54aeea1a 100644
--- a/app/static/package-lock.json
+++ b/app/static/package-lock.json
@@ -13,6 +13,7 @@
                 "@types/d3-format": "^3.0.1",
                 "axios": "^0.26.0",
                 "bootstrap": "^5.1.3",
+                "color": "^4.2.3",
                 "csv-parse": "^5.2.1",
                 "d3-format": "^3.1.0",
                 "i18next": "^22.4.11",
@@ -32,6 +33,7 @@
             "devDependencies": {
                 "@playwright/test": "1.37.0",
                 "@types/bootstrap": "^5.2.6",
+                "@types/color": "^3.0.6",
                 "@types/jest": "^27.4.0",
                 "@types/markdown-it": "^12.2.3",
                 "@types/plotly.js-basic-dist-min": "^2.12.1",
@@ -3388,6 +3390,30 @@
                 "@popperjs/core": "^2.9.2"
             }
         },
+        "node_modules/@types/color": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+            "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+            "dev": true,
+            "dependencies": {
+                "@types/color-convert": "*"
+            }
+        },
+        "node_modules/@types/color-convert": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+            "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+            "dev": true,
+            "dependencies": {
+                "@types/color-name": "*"
+            }
+        },
+        "node_modules/@types/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+            "dev": true
+        },
         "node_modules/@types/connect": {
             "version": "3.4.35",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -10102,20 +10128,21 @@
             }
         },
         "node_modules/color": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-            "dev": true,
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+            "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
             "dependencies": {
-                "color-convert": "^1.9.3",
-                "color-string": "^1.6.0"
+                "color-convert": "^2.0.1",
+                "color-string": "^1.9.0"
+            },
+            "engines": {
+                "node": ">=12.5.0"
             }
         },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
             "dependencies": {
                 "color-name": "~1.1.4"
             },
@@ -10126,34 +10153,17 @@
         "node_modules/color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "node_modules/color-string": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
             "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-            "dev": true,
             "dependencies": {
                 "color-name": "^1.0.0",
                 "simple-swizzle": "^0.2.2"
             }
         },
-        "node_modules/color/node_modules/color-convert": {
-            "version": "1.9.3",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
-            "dependencies": {
-                "color-name": "1.1.3"
-            }
-        },
-        "node_modules/color/node_modules/color-name": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-            "dev": true
-        },
         "node_modules/combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -21904,6 +21914,31 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/postcss-colormin/node_modules/color": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^1.9.3",
+                "color-string": "^1.6.0"
+            }
+        },
+        "node_modules/postcss-colormin/node_modules/color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "1.1.3"
+            }
+        },
+        "node_modules/postcss-colormin/node_modules/color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+            "dev": true
+        },
         "node_modules/postcss-colormin/node_modules/picocolors": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -25110,7 +25145,6 @@
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
             "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-            "dev": true,
             "dependencies": {
                 "is-arrayish": "^0.3.1"
             }
@@ -25118,8 +25152,7 @@
         "node_modules/simple-swizzle/node_modules/is-arrayish": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-            "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-            "dev": true
+            "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         },
         "node_modules/sisteransi": {
             "version": "1.0.5",
@@ -32080,6 +32113,30 @@
                 "@popperjs/core": "^2.9.2"
             }
         },
+        "@types/color": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+            "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+            "dev": true,
+            "requires": {
+                "@types/color-convert": "*"
+            }
+        },
+        "@types/color-convert": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+            "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+            "dev": true,
+            "requires": {
+                "@types/color-name": "*"
+            }
+        },
+        "@types/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+            "dev": true
+        },
         "@types/connect": {
             "version": "3.4.35",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -37398,37 +37455,18 @@
             }
         },
         "color": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-            "dev": true,
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+            "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
             "requires": {
-                "color-convert": "^1.9.3",
-                "color-string": "^1.6.0"
-            },
-            "dependencies": {
-                "color-convert": {
-                    "version": "1.9.3",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-                    "dev": true,
-                    "requires": {
-                        "color-name": "1.1.3"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.3",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-                    "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-                    "dev": true
-                }
+                "color-convert": "^2.0.1",
+                "color-string": "^1.9.0"
             }
         },
         "color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
             "requires": {
                 "color-name": "~1.1.4"
             }
@@ -37436,14 +37474,12 @@
         "color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "color-string": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
             "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-            "dev": true,
             "requires": {
                 "color-name": "^1.0.0",
                 "simple-swizzle": "^0.2.2"
@@ -46863,6 +46899,31 @@
                 "postcss-value-parser": "^3.0.0"
             },
             "dependencies": {
+                "color": {
+                    "version": "3.2.1",
+                    "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+                    "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+                    "dev": true,
+                    "requires": {
+                        "color-convert": "^1.9.3",
+                        "color-string": "^1.6.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "1.9.3",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "1.1.3"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+                    "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+                    "dev": true
+                },
                 "picocolors": {
                     "version": "0.2.1",
                     "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -49425,7 +49486,6 @@
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
             "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-            "dev": true,
             "requires": {
                 "is-arrayish": "^0.3.1"
             },
@@ -49433,8 +49493,7 @@
                 "is-arrayish": {
                     "version": "0.3.2",
                     "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-                    "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-                    "dev": true
+                    "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
                 }
             }
         },
diff --git a/app/static/package.json b/app/static/package.json
index b68b3811..b3b57a9e 100644
--- a/app/static/package.json
+++ b/app/static/package.json
@@ -31,6 +31,7 @@
         "@types/d3-format": "^3.0.1",
         "axios": "^0.26.0",
         "bootstrap": "^5.1.3",
+        "color": "^4.2.3",
         "csv-parse": "^5.2.1",
         "d3-format": "^3.1.0",
         "i18next": "^22.4.11",
@@ -50,6 +51,7 @@
     "devDependencies": {
         "@playwright/test": "1.37.0",
         "@types/bootstrap": "^5.2.6",
+        "@types/color": "^3.0.6",
         "@types/jest": "^27.4.0",
         "@types/markdown-it": "^12.2.3",
         "@types/plotly.js-basic-dist-min": "^2.12.1",
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index f72d3260..ef0d7812 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -16,14 +16,30 @@
         <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">
+                    Drag variables to move to another graph, or to hide variable. Press the Ctrl key on drag to make a
+                    copy of a variable.
+                </div>
+                <selected-variables
+                    v-for="(_, index) in graphsConfig"
+                    :graph-index="index"
+                    :key="index"
+                    :dragging="draggingVariable"
+                    @setDragging="setDraggingVariable"
+                ></selected-variables>
+                <hidden-variables
+                    @setDragging="setDraggingVariable"
+                    :dragging="draggingVariable"
+                    style="clear: both"
+                ></hidden-variables>
+                <button class="btn btn-primary mt-2 float-end" id="add-graph-btn" @click="addGraph">Add Graph</button>
             </vertical-collapse>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
 // eslint-disable-next-line import/no-webpack-loader-syntax
@@ -33,20 +49,25 @@ import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
 import SelectedVariables from "./SelectedVariables.vue";
+import HiddenVariables from "./HiddenVariables.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
+import { GraphsAction } from "@/app/store/graphs/actions";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
         GenericHelp,
         SelectedVariables,
+        HiddenVariables,
         ErrorInfo,
         CodeEditor,
         VueFeather,
         VerticalCollapse
     },
     setup() {
+        // TODO: move all graphs stuff into another component
+        const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
         const store = useStore();
         const codeIsValid = computed(() => store.state.model.odinModelResponse?.valid);
         const codeValidating = computed(() => store.state.code.loading);
@@ -58,8 +79,13 @@ export default defineComponent({
         const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
         const showSelectedVariables = computed(() => allVariables.value.length && !store.state.model.compileRequired);
         const appIsConfigured = computed(() => store.state.configured);
+        const graphsConfig = computed(() => store.state.graphs.config);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
+        const addGraph = () => {
+            store.commit(`graphs/${GraphsAction.NewGraph}`);
+        };
         const loadingMessage = userMessages.code.isValidating;
+        const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
 
         return {
             appIsConfigured,
@@ -72,7 +98,11 @@ export default defineComponent({
             showSelectedVariables,
             codeHelp,
             codeValidating,
-            loadingMessage
+            loadingMessage,
+            graphsConfig,
+            addGraph,
+            draggingVariable,
+            setDraggingVariable
         };
     }
 });
diff --git a/app/static/src/app/components/code/HiddenVariables.vue b/app/static/src/app/components/code/HiddenVariables.vue
new file mode 100644
index 00000000..756f58a1
--- /dev/null
+++ b/app/static/src/app/components/code/HiddenVariables.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="selected-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+        <h5>Hidden variables</h5>
+        <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
+            <template v-for="variable in hiddenVariables" :key="variable">
+                <span
+                    class="badge variable me-2 mb-2"
+                    :style="getStyle(variable)"
+                    draggable="true"
+                    @dragstart="startDrag($event, variable)"
+                    @dragend="endDrag"
+                >
+                    {{ variable }}
+                </span>
+            </template>
+            <div v-if="!hiddenVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+                Drag variables here to hide them on all graphs.
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+import VueFeather from "vue-feather";
+import tooltip from "../../directives/tooltip";
+import * as Color from "color";
+import { GraphsGetter } from "../../store/graphs/getters";
+import { GraphsAction } from "../../store/graphs/actions";
+
+export default defineComponent({
+    name: "HiddenVariables",
+    computed: {
+        tooltip() {
+            return tooltip;
+        }
+    },
+    components: { VueFeather },
+    props: {
+        dragging: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        const store = useStore();
+        const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
+        const palette = computed(() => store.state.model.paletteModel!);
+
+        const getStyle = (variable: string) => {
+            const bgcolor = palette.value ? palette.value[variable] : "#eee";
+            const desatBgColor = Color(bgcolor).desaturate(0.6).fade(0.4).rgb().string();
+            return { "background-color": desatBgColor };
+        };
+
+        // TODO: share code with selectedVariables - but remember hidden won't need copy but Selected will, and some other differences
+        const startDrag = (evt: DragEvent, variable: string) => {
+            const { dataTransfer } = evt;
+            dataTransfer!!.dropEffect = "move";
+            dataTransfer!!.effectAllowed = "move";
+            dataTransfer!!.setData("variable", variable);
+            dataTransfer!!.setData("srcGraph", "hidden");
+
+            emit("setDragging", true);
+        };
+
+        const endDrag = () => {
+            emit("setDragging", false);
+        };
+
+        const onDrop = (evt: DragEvent) => {
+            const { dataTransfer } = evt;
+            const variable = dataTransfer!!.getData("variable");
+            const srcGraph = dataTransfer!!.getData("srcGraph");
+            if (srcGraph !== "hidden") {
+                // remove from source graph
+                const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
+                    (v) => v !== variable
+                );
+                store.dispatch(`model/${GraphsAction.UpdateSelectedVariables}`, {
+                    index: srcGraph,
+                    selectedVariables: srcVariables
+                });
+            }
+        };
+
+        return {
+            hiddenVariables,
+            getStyle,
+            startDrag,
+            endDrag,
+            onDrop
+        };
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.selected-variables-panel {
+    width: 100%;
+
+    .variable {
+        font-size: large;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/app/static/src/app/components/code/SelectedVariables.vue b/app/static/src/app/components/code/SelectedVariables.vue
index d1eb6d62..8b581be9 100644
--- a/app/static/src/app/components/code/SelectedVariables.vue
+++ b/app/static/src/app/components/code/SelectedVariables.vue
@@ -1,18 +1,22 @@
 <template>
-    <div class="ms-2">Click to toggle variables to include in graphs.</div>
-    <div class="selected-variables-panel m-2">
-        <span
-            v-for="variable in allVariables"
-            class="badge variable me-2 mb-2"
-            :style="getStyle(variable)"
-            :key="variable"
-            @click="toggleVariable(variable)"
-            >{{ variable }}</span
-        >
-    </div>
-    <div class="ms-2">
-        <span class="clickable text-primary" id="select-variables-all" @click="selectAll">Select all</span> |
-        <span class="clickable text-primary" id="select-variables-none" @click="selectNone">Select none</span>
+    <div class="selected-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+        <h5>Graph {{ graphIndex + 1 }}</h5>
+        <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
+            <template v-for="variable in selectedVariables" :key="variable">
+                <span
+                    class="badge variable me-2 mb-2"
+                    :style="getStyle(variable)"
+                    :draggable="true"
+                    @dragstart="startDrag($event, variable)"
+                    @dragend="endDrag"
+                >
+                    {{ variable }}
+                </span>
+            </template>
+            <div v-if="!selectedVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+                Drag variables here to select them for this graph.
+            </div>
+        </div>
     </div>
 </template>
 
@@ -21,12 +25,24 @@ import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import { GraphsAction } from "../../store/graphs/actions";
 
+// TODO: rename this component?
 export default defineComponent({
     name: "SelectedVariables",
-    setup() {
+    props: {
+        dragging: {
+            type: Boolean,
+            required: true
+        },
+        graphIndex: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
         const store = useStore();
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const selectedVariables = computed<string[]>(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed<string[]>(
+            () => store.state.graphs.config[props.graphIndex].selectedVariables
+        );
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
@@ -37,37 +53,58 @@ export default defineComponent({
             return { "background-color": bgcolor };
         };
 
-        const updateSelectedVariables = (newVariables: string[]) => {
+        const updateSelectedVariables = (index: number, newVariables: string[]) => {
             store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                index: 0,
+                index,
                 selectedVariables: newVariables
             });
         };
 
-        const toggleVariable = (variable: string) => {
-            let newVars: string[];
-            if (selectedVariables.value.includes(variable)) {
-                newVars = selectedVariables.value.filter((v) => v !== variable);
-            } else {
-                newVars = [...selectedVariables.value, variable];
-            }
-            updateSelectedVariables(newVars);
+        const startDrag = (evt: DragEvent, variable: string) => {
+            const { dataTransfer } = evt;
+            dataTransfer!!.dropEffect = "move";
+            dataTransfer!!.effectAllowed = "move";
+            dataTransfer!!.setData("variable", variable);
+            dataTransfer!!.setData("srcGraph", props.graphIndex.toString());
+            emit("setDragging", true);
         };
 
-        const selectAll = () => {
-            updateSelectedVariables([...allVariables.value]);
+        // TODO: share the drag stuff with HiddenVariables
+        const endDrag = () => {
+            emit("setDragging", false);
         };
 
-        const selectNone = () => {
-            updateSelectedVariables([]);
+        // Remove variable from the graph it was dragged from
+        const removeVariable = (srcGraphIdx: number, variable: string) => {
+            const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
+                (v) => v !== variable
+            );
+            updateSelectedVariables(srcGraphIdx, srcVariables);
+        };
+
+        const onDrop = (evt: DragEvent) => {
+            const { dataTransfer } = evt;
+            const variable = dataTransfer!!.getData("variable");
+            const srcGraph = dataTransfer!!.getData("srcGraph");
+            if (srcGraph !== props.graphIndex.toString()) {
+                // remove from source graph
+                if (srcGraph !== "hidden") {
+                    removeVariable(parseInt(srcGraph), variable);
+                }
+                // add to this graph if necessary
+                if (!selectedVariables.value.includes(variable)) {
+                    const newVars = [...selectedVariables.value, variable];
+                    updateSelectedVariables(props.graphIndex, newVars);
+                }
+            }
         };
 
         return {
-            allVariables,
+            selectedVariables,
             getStyle,
-            toggleVariable,
-            selectAll,
-            selectNone
+            startDrag,
+            endDrag,
+            onDrop
         };
     }
 });
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 51841f68..696aee44 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -26,12 +26,16 @@ import { ParameterSet } from "../../store/run/state";
 export default defineComponent({
     name: "RunPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+      graphIndex: {
+        type: Number,
+        default: 0
+      }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
         const solution = computed(() => store.state.run.resultOde?.solution);
@@ -58,7 +62,7 @@ export default defineComponent({
 
         const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index a655090e..cf2313a1 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -21,15 +21,19 @@ import { StochasticConfig } from "../../types/responseTypes";
 export default defineComponent({
     name: "RunStochasticPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+      graphIndex: {
+        type: Number,
+        default: 0
+      }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const solution = computed(() => store.state.run.resultDiscrete?.solution);
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 805abc78..c4929dfd 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -4,12 +4,14 @@
             <button class="btn btn-primary" id="run-btn" :disabled="!canRunModel" @click="runModel">Run model</button>
         </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">
-            <div v-if="sumOfSquares">
-                <span>Sum of squares: {{ sumOfSquares }}</span>
-            </div>
-        </run-plot>
+        <template v-for="(_, index) in graphConfigs" :key="index">
+          <run-stochastic-plot v-if="isStochastic" :fade-plot="!!updateMsg" :graph-index="index"></run-stochastic-plot>
+          <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false" :graph-index="index">
+              <div v-if="sumOfSquares">
+                  <span>Sum of squares: {{ sumOfSquares }}</span>
+              </div>
+          </run-plot>
+        </template>
         <error-info :error="error"></error-info>
         <div>
             <button
@@ -83,6 +85,7 @@ export default defineComponent({
 
         const hasRunner = computed(() => store.getters[`model/${ModelGetter.hasRunner}`]);
         const allSelectedVariables = computed(() => store.getters[`graphs/${GraphsGetter.allSelectedVariables}`]);
+        const graphConfigs = computed(() => store.state.graphs.config);
 
         // Enable run button if model has initialised and compile is not required
         const canRunModel = computed(() => {
@@ -132,7 +135,8 @@ export default defineComponent({
             canDownloadOutput,
             downloadUserFileName,
             toggleShowDownloadOutput,
-            download
+            download,
+          graphConfigs
         };
     }
 });
diff --git a/app/static/src/app/excel/wodinModelOutputDownload.ts b/app/static/src/app/excel/wodinModelOutputDownload.ts
index 47cc1db4..3d20110e 100644
--- a/app/static/src/app/excel/wodinModelOutputDownload.ts
+++ b/app/static/src/app/excel/wodinModelOutputDownload.ts
@@ -47,7 +47,6 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 nPoints: this._points
             });
             const selectedVariables = this._rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`];
-            console.log(`selectedVariables are ${JSON.stringify(selectedVariables)}`);
 
             const worksheet = WodinModelOutputDownload._generateModelledOutput(
                 selectedVariables,
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index ea401578..be1bc7be 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -5,7 +5,8 @@ import { FitDataAction } from "../fitData/actions";
 import { GraphsState } from "./state";
 
 export enum GraphsAction {
-    UpdateSelectedVariables = "UpdateSelectedVariables"
+    UpdateSelectedVariables = "UpdateSelectedVariables",
+    NewGraph = "AddGraph"
 }
 
 export const actions: ActionTree<GraphsState, AppState> = {
@@ -21,5 +22,10 @@ export const actions: ActionTree<GraphsState, AppState> = {
         if (rootState.appType === AppType.Fit) {
             dispatch(`fitData/${FitDataAction.UpdateLinkedVariables}`, null, { root: true });
         }
+    },
+    NewGraph(context) {
+        const { rootState, commit } = context;
+        const unselectedVariables = [...(rootState.model.odinModelResponse?.metadata?.variables || [])];
+        commit(GraphsMutation.AddGraph, { selectedVariables: [], unselectedVariables });
     }
 };
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index 0f370f18..cddfb0bb 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -3,15 +3,26 @@ import { GraphsState } from "./state";
 import { AppState } from "../appState/state";
 
 export enum GraphsGetter {
-    allSelectedVariables = "allSelectedVariables"
+    allSelectedVariables = "allSelectedVariables",
+    hiddenVariables = "hiddenVariables" // variable which are not selected in any graph
 }
 
 export interface GraphsGetters {
     [GraphsGetter.allSelectedVariables]: Getter<GraphsState, AppState>;
+    [GraphsGetter.hiddenVariables]: Getter<GraphsState, AppState>;
 }
 
 export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
-        return state.config.flatMap((c) => c.selectedVariables);
+        return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
+    },
+    [GraphsGetter.hiddenVariables]: (
+        state: GraphsState,
+        graphsGetters: GraphsGetters,
+        rootState,
+        rootGetters
+    ): string[] => {
+        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables](state, getters, rootState, rootGetters);
+        return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     }
 };
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index e86fc022..42d05dc3 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -1,10 +1,11 @@
 import { MutationTree } from "vuex";
-import { YAxisRange, GraphsState } from "./state";
+import { YAxisRange, GraphsState, GraphConfig } from "./state";
 
 export enum GraphsMutation {
     SetLogScaleYAxis = "SetLogScaleYAxis",
     SetLockYAxis = "SetLockYAxis",
     SetYAxisRange = "SetYAxisRange",
+    AddGraph = "AddGraph",
     SetSelectedVariables = "SetSelectedVariables"
 }
 
@@ -29,7 +30,11 @@ export const mutations: MutationTree<GraphsState> = {
 
     [GraphsMutation.SetSelectedVariables](state: GraphsState, payload: SetSelectedVariablesPayload) {
         // We don't simply replace the GraphConfig in the index here, as that will eventually include GraphSettings too
-        state.config[payload.index].selectedVariables = payload.selectedVariables;
+        state.config[payload.index].selectedVariables = payload.selectedVariables.sort();
         state.config[payload.index].unselectedVariables = payload.unselectedVariables;
+    },
+
+    [GraphsMutation.AddGraph](state: GraphsState, payload: GraphConfig) {
+        state.config.push(payload);
     }
 };
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index 161c84e0..3cd4c025 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -116,3 +116,18 @@ $grey: #ccc;
     padding-top: 0;
     padding-bottom: 0;
 }
+
+.drop-zone {
+    border-width: 4px;
+    padding: 4px;
+    border-style: dashed;
+    margin-right: 6px;
+}
+
+.drop-zone-active {
+    border-color: #eee;
+}
+
+.drop-zone-inactive {
+    border-color: #fff;
+}
\ No newline at end of file

From a57622761dfdb6f6215e75a0515a03cf9216dc17 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 12:02:39 +0100
Subject: [PATCH 02/80] working version as per POC

---
 app/static/src/app/components/code/CodeTab.vue         | 7 +++----
 app/static/src/app/components/code/HiddenVariables.vue | 7 ++++---
 app/static/src/app/store/graphs/actions.ts             | 2 +-
 app/static/src/app/store/graphs/getters.ts             | 9 ++-------
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index ef0d7812..b17c35a1 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -17,8 +17,7 @@
         <div class="mt-3">
             <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
                 <div class="ms-2">
-                    Drag variables to move to another graph, or to hide variable. Press the Ctrl key on drag to make a
-                    copy of a variable.
+                    Drag variables to move to another graph, or to hide variable.
                 </div>
                 <selected-variables
                     v-for="(_, index) in graphsConfig"
@@ -52,7 +51,7 @@ import SelectedVariables from "./SelectedVariables.vue";
 import HiddenVariables from "./HiddenVariables.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
-import { GraphsAction } from "@/app/store/graphs/actions";
+import { GraphsAction } from "../../store/graphs/actions";
 
 export default defineComponent({
     name: "CodeTab",
@@ -82,7 +81,7 @@ export default defineComponent({
         const graphsConfig = computed(() => store.state.graphs.config);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const addGraph = () => {
-            store.commit(`graphs/${GraphsAction.NewGraph}`);
+            store.dispatch(`graphs/${GraphsAction.NewGraph}`);
         };
         const loadingMessage = userMessages.code.isValidating;
         const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
diff --git a/app/static/src/app/components/code/HiddenVariables.vue b/app/static/src/app/components/code/HiddenVariables.vue
index 756f58a1..30085415 100644
--- a/app/static/src/app/components/code/HiddenVariables.vue
+++ b/app/static/src/app/components/code/HiddenVariables.vue
@@ -75,11 +75,12 @@ export default defineComponent({
             const srcGraph = dataTransfer!!.getData("srcGraph");
             if (srcGraph !== "hidden") {
                 // remove from source graph
-                const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
+                const srcGraphInt = parseInt(srcGraph);
+                const srcVariables = [...store.state.graphs.config[srcGraphInt].selectedVariables].filter(
                     (v) => v !== variable
                 );
-                store.dispatch(`model/${GraphsAction.UpdateSelectedVariables}`, {
-                    index: srcGraph,
+                store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+                    graphIndex: srcGraphInt,
                     selectedVariables: srcVariables
                 });
             }
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index 5e2cfe4e..2fa4f1b8 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -6,7 +6,7 @@ import { GraphsState } from "./state";
 
 export enum GraphsAction {
     UpdateSelectedVariables = "UpdateSelectedVariables",
-    NewGraph = "AddGraph"
+    NewGraph = "NewGraph"
 }
 
 export const actions: ActionTree<GraphsState, AppState> = {
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index cddfb0bb..cf2217ca 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -16,13 +16,8 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
         return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
     },
-    [GraphsGetter.hiddenVariables]: (
-        state: GraphsState,
-        graphsGetters: GraphsGetters,
-        rootState,
-        rootGetters
-    ): string[] => {
-        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables](state, getters, rootState, rootGetters);
+    [GraphsGetter.hiddenVariables]: (_, graphsGetters, rootState): string[] => {
+        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables] as string[];
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     }
 };

From b34ed78e0e446b7abea1a31ae11143caa74a6d61 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 13:35:55 +0100
Subject: [PATCH 03/80] UI tweaks from review

---
 app/static/src/app/components/code/CodeTab.vue    | 11 +++++++----
 .../src/app/components/code/SelectedVariables.vue |  4 ++++
 app/static/src/scss/style.scss                    | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index b17c35a1..06b2f33e 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,9 +15,10 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
+            <vertical-collapse v-if="showSelectedVariables" title="Graphs" collapse-id="select-variables">
                 <div class="ms-2">
-                    Drag variables to move to another graph, or to hide variable.
+                  Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
+                  new graph to move them to.
                 </div>
                 <selected-variables
                     v-for="(_, index) in graphsConfig"
@@ -26,12 +27,14 @@
                     :dragging="draggingVariable"
                     @setDragging="setDraggingVariable"
                 ></selected-variables>
+                <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
+                  <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
+                  Add Graph
+                </button>
                 <hidden-variables
                     @setDragging="setDraggingVariable"
                     :dragging="draggingVariable"
-                    style="clear: both"
                 ></hidden-variables>
-                <button class="btn btn-primary mt-2 float-end" id="add-graph-btn" @click="addGraph">Add Graph</button>
             </vertical-collapse>
         </div>
     </div>
diff --git a/app/static/src/app/components/code/SelectedVariables.vue b/app/static/src/app/components/code/SelectedVariables.vue
index ed3f30a8..a1caf357 100644
--- a/app/static/src/app/components/code/SelectedVariables.vue
+++ b/app/static/src/app/components/code/SelectedVariables.vue
@@ -11,6 +11,9 @@
                     @dragend="endDrag"
                 >
                     {{ variable }}
+                    <span class="variable-delete">
+                      <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
+                    </span>
                 </span>
             </template>
             <div v-if="!selectedVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
@@ -101,6 +104,7 @@ export default defineComponent({
 
         return {
             selectedVariables,
+            removeVariable,
             getStyle,
             startDrag,
             endDrag,
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index 3cd4c025..b76fc3ed 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -130,4 +130,19 @@ $grey: #ccc;
 
 .drop-zone-inactive {
     border-color: #fff;
+}
+
+.variable-delete {
+    font-weight: normal;
+    margin-left: 0.3rem;
+    span {
+        opacity: 0.5;
+    }
+
+    button {
+        background-color: transparent;
+        border-width: 0;
+        color: white;
+        padding: 0;
+    }
 }
\ No newline at end of file

From 78623f60fc9cc7ba9c93a720cbbddc2e8af4362e Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 14:05:59 +0100
Subject: [PATCH 04/80] refactor selectedVariabled component into graphConfigs

---
 .../src/app/components/code/CodeTab.vue       | 47 ++-------------
 .../GraphConfig.vue}                          |  3 +-
 .../components/graphConfig/GraphConfigs.vue   | 60 +++++++++++++++++++
 .../{code => graphConfig}/HiddenVariables.vue |  0
 .../components/code/selectedVariables.test.ts |  2 +-
 5 files changed, 66 insertions(+), 46 deletions(-)
 rename app/static/src/app/components/{code/SelectedVariables.vue => graphConfig/GraphConfig.vue} (98%)
 create mode 100644 app/static/src/app/components/graphConfig/GraphConfigs.vue
 rename app/static/src/app/components/{code => graphConfig}/HiddenVariables.vue (100%)

diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index 06b2f33e..8612f0cf 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,27 +15,7 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showSelectedVariables" title="Graphs" collapse-id="select-variables">
-                <div class="ms-2">
-                  Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
-                  new graph to move them to.
-                </div>
-                <selected-variables
-                    v-for="(_, index) in graphsConfig"
-                    :graph-index="index"
-                    :key="index"
-                    :dragging="draggingVariable"
-                    @setDragging="setDraggingVariable"
-                ></selected-variables>
-                <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
-                  <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
-                  Add Graph
-                </button>
-                <hidden-variables
-                    @setDragging="setDraggingVariable"
-                    :dragging="draggingVariable"
-                ></hidden-variables>
-            </vertical-collapse>
+            <graph-configs></graph-configs>
         </div>
     </div>
 </template>
@@ -50,26 +30,19 @@ import CodeEditor from "./CodeEditor.vue";
 import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
-import SelectedVariables from "./SelectedVariables.vue";
-import HiddenVariables from "./HiddenVariables.vue";
-import VerticalCollapse from "../VerticalCollapse.vue";
+import GraphConfigs from "../graphConfig/GraphConfigs.vue";
 import GenericHelp from "../help/GenericHelp.vue";
-import { GraphsAction } from "../../store/graphs/actions";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
         GenericHelp,
-        SelectedVariables,
-        HiddenVariables,
+        GraphConfigs,
         ErrorInfo,
         CodeEditor,
-        VueFeather,
-        VerticalCollapse
+        VueFeather
     },
     setup() {
-        // TODO: move all graphs stuff into another component
-        const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
         const store = useStore();
         const codeIsValid = computed(() => store.state.model.odinModelResponse?.valid);
         const codeValidating = computed(() => store.state.code.loading);
@@ -78,16 +51,9 @@ export default defineComponent({
         const validIcon = computed(() => (codeIsValid.value ? "check" : "x"));
         const iconValidatedClass = computed(() => (codeIsValid.value ? "text-success" : "text-danger"));
         const iconClass = computed(() => (codeValidating.value ? "code-validating-icon" : iconValidatedClass.value));
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const showSelectedVariables = computed(() => allVariables.value.length && !store.state.model.compileRequired);
         const appIsConfigured = computed(() => store.state.configured);
-        const graphsConfig = computed(() => store.state.graphs.config);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
-        const addGraph = () => {
-            store.dispatch(`graphs/${GraphsAction.NewGraph}`);
-        };
         const loadingMessage = userMessages.code.isValidating;
-        const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
 
         return {
             appIsConfigured,
@@ -97,14 +63,9 @@ export default defineComponent({
             iconClass,
             compile,
             error,
-            showSelectedVariables,
             codeHelp,
             codeValidating,
             loadingMessage,
-            graphsConfig,
-            addGraph,
-            draggingVariable,
-            setDraggingVariable
         };
     }
 });
diff --git a/app/static/src/app/components/code/SelectedVariables.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
similarity index 98%
rename from app/static/src/app/components/code/SelectedVariables.vue
rename to app/static/src/app/components/graphConfig/GraphConfig.vue
index a1caf357..64b505a5 100644
--- a/app/static/src/app/components/code/SelectedVariables.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -28,9 +28,8 @@ import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import { GraphsAction } from "../../store/graphs/actions";
 
-// TODO: rename this component?
 export default defineComponent({
-    name: "SelectedVariables",
+    name: "GraphConfig",
     props: {
         dragging: {
             type: Boolean,
diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
new file mode 100644
index 00000000..530ca5c0
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -0,0 +1,60 @@
+<template>
+  <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
+    <div class="ms-2">
+      Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
+      new graph to move them to.
+    </div>
+    <graph-config
+        v-for="(_, index) in graphConfigs"
+        :graph-index="index"
+        :key="index"
+        :dragging="draggingVariable"
+        @setDragging="setDraggingVariable"
+    ></graph-config>
+    <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
+      <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
+      Add Graph
+    </button>
+    <hidden-variables
+        @setDragging="setDraggingVariable"
+        :dragging="draggingVariable"
+    ></hidden-variables>
+  </vertical-collapse>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, ref} from "vue";
+import {useStore} from "vuex";
+import VueFeather from "vue-feather";
+import VerticalCollapse from "../VerticalCollapse.vue";
+import HiddenVariables from "./HiddenVariables.vue";
+import GraphConfig from "./GraphConfig.vue";
+import {GraphsAction} from "../../store/graphs/actions";
+
+export default defineComponent({
+  components: {
+    VueFeather,
+    GraphConfig,
+    HiddenVariables,
+    VerticalCollapse
+  },
+  setup() {
+    const store = useStore();
+    const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
+    const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
+    const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
+    const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
+    const graphConfigs = computed(() => store.state.graphs.config);
+    const addGraph = () => {
+      store.dispatch(`graphs/${GraphsAction.NewGraph}`);
+    };
+    return {
+      showGraphs,
+      draggingVariable,
+      setDraggingVariable,
+      graphConfigs,
+      addGraph
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/app/static/src/app/components/code/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
similarity index 100%
rename from app/static/src/app/components/code/HiddenVariables.vue
rename to app/static/src/app/components/graphConfig/HiddenVariables.vue
diff --git a/app/static/tests/unit/components/code/selectedVariables.test.ts b/app/static/tests/unit/components/code/selectedVariables.test.ts
index e6a6c3a1..42b7d92d 100644
--- a/app/static/tests/unit/components/code/selectedVariables.test.ts
+++ b/app/static/tests/unit/components/code/selectedVariables.test.ts
@@ -1,7 +1,7 @@
 import Vuex from "vuex";
 import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
-import SelectedVariables from "../../../../src/app/components/code/SelectedVariables.vue";
+import SelectedVariables from "../../../../src/app/components/graphConfig/SelectedVariables.vue";
 import { ModelAction } from "../../../../src/app/store/model/actions";
 import { GraphsAction } from "../../../../src/app/store/graphs/actions";
 

From 4fdf8cbfdbf522b9b6d3008046672a2071fefe34 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 14:08:59 +0100
Subject: [PATCH 05/80] add graphs UI to options tab

---
 app/static/src/app/components/options/OptionsTab.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index f271e519..9519292d 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -30,6 +30,7 @@
         <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
             <parameter-sets></parameter-sets>
         </vertical-collapse>
+        <graph-configs></graph-configs>
     </div>
 </template>
 
@@ -46,10 +47,12 @@ import { AppType, VisualisationTab } from "../../store/appState/state";
 import GraphSettings from "./GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
+import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
 
 export default defineComponent({
     name: "OptionsTab",
     components: {
+      GraphConfigs,
         ParameterSets,
         LinkData,
         OptimisationOptions,

From 723dcd96f527efea5e61adb88138c14affee1cda Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 14:30:34 +0100
Subject: [PATCH 06/80] use mixin for drag variables

---
 .../components/graphConfig/GraphConfig.vue    | 16 ++--------
 .../graphConfig/HiddenVariables.vue           | 17 ++--------
 .../app/components/mixins/dragVariables.ts    | 32 +++++++++++++++++++
 3 files changed, 36 insertions(+), 29 deletions(-)
 create mode 100644 app/static/src/app/components/mixins/dragVariables.ts

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 64b505a5..bb44e851 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -27,6 +27,7 @@
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import { GraphsAction } from "../../store/graphs/actions";
+import DragVariables from "../mixins/dragVariables";
 
 export default defineComponent({
     name: "GraphConfig",
@@ -42,6 +43,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
+        const { startDrag, endDrag } = DragVariables(store, emit, false, props.graphIndex);
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
         );
@@ -62,20 +64,6 @@ export default defineComponent({
             });
         };
 
-        const startDrag = (evt: DragEvent, variable: string) => {
-            const { dataTransfer } = evt;
-            dataTransfer!!.dropEffect = "move";
-            dataTransfer!!.effectAllowed = "move";
-            dataTransfer!!.setData("variable", variable);
-            dataTransfer!!.setData("srcGraph", props.graphIndex.toString());
-            emit("setDragging", true);
-        };
-
-        // TODO: share the drag stuff with HiddenVariables
-        const endDrag = () => {
-            emit("setDragging", false);
-        };
-
         // Remove variable from the graph it was dragged from
         const removeVariable = (srcGraphIdx: number, variable: string) => {
             const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 30085415..317fd20e 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -28,6 +28,7 @@ import tooltip from "../../directives/tooltip";
 import * as Color from "color";
 import { GraphsGetter } from "../../store/graphs/getters";
 import { GraphsAction } from "../../store/graphs/actions";
+import DragVariables from "../mixins/dragVariables";
 
 export default defineComponent({
     name: "HiddenVariables",
@@ -45,6 +46,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
+        const  { startDrag, endDrag } = DragVariables(store, emit, true);
         const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
         const palette = computed(() => store.state.model.paletteModel!);
 
@@ -54,21 +56,6 @@ export default defineComponent({
             return { "background-color": desatBgColor };
         };
 
-        // TODO: share code with selectedVariables - but remember hidden won't need copy but Selected will, and some other differences
-        const startDrag = (evt: DragEvent, variable: string) => {
-            const { dataTransfer } = evt;
-            dataTransfer!!.dropEffect = "move";
-            dataTransfer!!.effectAllowed = "move";
-            dataTransfer!!.setData("variable", variable);
-            dataTransfer!!.setData("srcGraph", "hidden");
-
-            emit("setDragging", true);
-        };
-
-        const endDrag = () => {
-            emit("setDragging", false);
-        };
-
         const onDrop = (evt: DragEvent) => {
             const { dataTransfer } = evt;
             const variable = dataTransfer!!.getData("variable");
diff --git a/app/static/src/app/components/mixins/dragVariables.ts b/app/static/src/app/components/mixins/dragVariables.ts
new file mode 100644
index 00000000..0ca01d52
--- /dev/null
+++ b/app/static/src/app/components/mixins/dragVariables.ts
@@ -0,0 +1,32 @@
+import {AppState} from "../../store/appState/state";
+import {Store} from "vuex";
+
+export interface DragVariablesMixin {
+    startDrag: (evt: DragEvent, variable: string) => void;
+    endDrag: () => void,
+}
+
+export default (
+    store: Store<AppState>,
+    emit: (event: string, ...args: any[]) => void,
+    hiddenVariables: boolean,
+    graphIndex?: number): DragVariablesMixin  => {
+    const startDrag = (evt: DragEvent, variable: string) => {
+        const { dataTransfer } = evt;
+        dataTransfer!!.dropEffect = "move";
+        dataTransfer!!.effectAllowed = "move";
+        dataTransfer!!.setData("variable", variable);
+        dataTransfer!!.setData("srcGraph", hiddenVariables ? "hidden" : graphIndex!.toString());
+
+        emit("setDragging", true);
+    };
+
+    const endDrag = () => {
+        emit("setDragging", false);
+    };
+
+    return {
+        startDrag,
+        endDrag,
+    };
+}
\ No newline at end of file

From 1d7ea2d87891561ee4aedd229054e1fabf34e231 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 14:55:36 +0100
Subject: [PATCH 07/80] use mixin for drop

---
 .../components/graphConfig/GraphConfig.vue    | 37 +--------
 .../graphConfig/HiddenVariables.vue           | 22 +-----
 .../app/components/mixins/dragVariables.ts    | 32 --------
 .../app/components/mixins/selectVariables.ts  | 77 +++++++++++++++++++
 4 files changed, 81 insertions(+), 87 deletions(-)
 delete mode 100644 app/static/src/app/components/mixins/dragVariables.ts
 create mode 100644 app/static/src/app/components/mixins/selectVariables.ts

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index bb44e851..b6daea43 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -26,8 +26,7 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
-import { GraphsAction } from "../../store/graphs/actions";
-import DragVariables from "../mixins/dragVariables";
+import SelectVariables from "../mixins/selectVariables";
 
 export default defineComponent({
     name: "GraphConfig",
@@ -43,7 +42,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
-        const { startDrag, endDrag } = DragVariables(store, emit, false, props.graphIndex);
+        const { startDrag, endDrag, onDrop, removeVariable } = SelectVariables(store, emit, false, props.graphIndex);
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
         );
@@ -57,38 +56,6 @@ export default defineComponent({
             return { "background-color": bgcolor };
         };
 
-        const updateSelectedVariables = (graphIndex: number, newVariables: string[]) => {
-            store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                graphIndex,
-                selectedVariables: newVariables
-            });
-        };
-
-        // Remove variable from the graph it was dragged from
-        const removeVariable = (srcGraphIdx: number, variable: string) => {
-            const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
-                (v) => v !== variable
-            );
-            updateSelectedVariables(srcGraphIdx, srcVariables);
-        };
-
-        const onDrop = (evt: DragEvent) => {
-            const { dataTransfer } = evt;
-            const variable = dataTransfer!!.getData("variable");
-            const srcGraph = dataTransfer!!.getData("srcGraph");
-            if (srcGraph !== props.graphIndex.toString()) {
-                // remove from source graph
-                if (srcGraph !== "hidden") {
-                    removeVariable(parseInt(srcGraph), variable);
-                }
-                // add to this graph if necessary
-                if (!selectedVariables.value.includes(variable)) {
-                    const newVars = [...selectedVariables.value, variable];
-                    updateSelectedVariables(props.graphIndex, newVars);
-                }
-            }
-        };
-
         return {
             selectedVariables,
             removeVariable,
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 317fd20e..f43b9bc6 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -27,8 +27,7 @@ import VueFeather from "vue-feather";
 import tooltip from "../../directives/tooltip";
 import * as Color from "color";
 import { GraphsGetter } from "../../store/graphs/getters";
-import { GraphsAction } from "../../store/graphs/actions";
-import DragVariables from "../mixins/dragVariables";
+import SelectVariables from "../mixins/selectVariables";
 
 export default defineComponent({
     name: "HiddenVariables",
@@ -46,7 +45,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
-        const  { startDrag, endDrag } = DragVariables(store, emit, true);
+        const  { startDrag, endDrag, onDrop } = SelectVariables(store, emit, true);
         const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
         const palette = computed(() => store.state.model.paletteModel!);
 
@@ -56,23 +55,6 @@ export default defineComponent({
             return { "background-color": desatBgColor };
         };
 
-        const onDrop = (evt: DragEvent) => {
-            const { dataTransfer } = evt;
-            const variable = dataTransfer!!.getData("variable");
-            const srcGraph = dataTransfer!!.getData("srcGraph");
-            if (srcGraph !== "hidden") {
-                // remove from source graph
-                const srcGraphInt = parseInt(srcGraph);
-                const srcVariables = [...store.state.graphs.config[srcGraphInt].selectedVariables].filter(
-                    (v) => v !== variable
-                );
-                store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                    graphIndex: srcGraphInt,
-                    selectedVariables: srcVariables
-                });
-            }
-        };
-
         return {
             hiddenVariables,
             getStyle,
diff --git a/app/static/src/app/components/mixins/dragVariables.ts b/app/static/src/app/components/mixins/dragVariables.ts
deleted file mode 100644
index 0ca01d52..00000000
--- a/app/static/src/app/components/mixins/dragVariables.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {AppState} from "../../store/appState/state";
-import {Store} from "vuex";
-
-export interface DragVariablesMixin {
-    startDrag: (evt: DragEvent, variable: string) => void;
-    endDrag: () => void,
-}
-
-export default (
-    store: Store<AppState>,
-    emit: (event: string, ...args: any[]) => void,
-    hiddenVariables: boolean,
-    graphIndex?: number): DragVariablesMixin  => {
-    const startDrag = (evt: DragEvent, variable: string) => {
-        const { dataTransfer } = evt;
-        dataTransfer!!.dropEffect = "move";
-        dataTransfer!!.effectAllowed = "move";
-        dataTransfer!!.setData("variable", variable);
-        dataTransfer!!.setData("srcGraph", hiddenVariables ? "hidden" : graphIndex!.toString());
-
-        emit("setDragging", true);
-    };
-
-    const endDrag = () => {
-        emit("setDragging", false);
-    };
-
-    return {
-        startDrag,
-        endDrag,
-    };
-}
\ No newline at end of file
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
new file mode 100644
index 00000000..652090e3
--- /dev/null
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -0,0 +1,77 @@
+import {AppState} from "../../store/appState/state";
+import {Store} from "vuex";
+import {GraphsAction} from "../../store/graphs/actions";
+import {computed} from "vue";
+
+export interface SelectVariablesMixin {
+    startDrag: (evt: DragEvent, variable: string) => void;
+    endDrag: () => void,
+    onDrop: (evt: DragEvent) => void,
+    removeVariable: (srcGraphIdx: number, variable: string) => void
+}
+
+export default (
+    store: Store<AppState>,
+    emit: (event: string, ...args: any[]) => void,
+    hiddenVariables: boolean,
+    graphIndex?: number): SelectVariablesMixin  => {
+
+    const thisSrcGraph = hiddenVariables ? "hidden" : graphIndex!.toString();
+
+    const startDrag = (evt: DragEvent, variable: string) => {
+        const { dataTransfer } = evt;
+        dataTransfer!!.dropEffect = "move";
+        dataTransfer!!.effectAllowed = "move";
+        dataTransfer!!.setData("variable", variable);
+        dataTransfer!!.setData("srcGraph", thisSrcGraph);
+
+        emit("setDragging", true);
+    };
+
+    const endDrag = () => {
+        emit("setDragging", false);
+    };
+
+    const updateSelectedVariables = (graphIndex: number, newVariables: string[]) => {
+        store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+            graphIndex,
+            selectedVariables: newVariables
+        });
+    };
+
+    // Remove variable from a given graph
+    const removeVariable = (srcGraphIdx: number, variable: string) => {
+        const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
+            (v) => v !== variable
+        );
+        updateSelectedVariables(srcGraphIdx, srcVariables);
+    };
+
+    const selectedVariables = computed<string[]>(
+        () => hiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
+    );
+
+    const onDrop = (evt: DragEvent) => {
+        const { dataTransfer } = evt;
+        const variable = dataTransfer!!.getData("variable");
+        const srcGraph = dataTransfer!!.getData("srcGraph");
+        if (srcGraph !== thisSrcGraph) {
+            // remove from source graph
+            if (srcGraph !== "hidden") {
+                removeVariable(parseInt(srcGraph), variable);
+            }
+            // add to this graph if necessary
+            if (!hiddenVariables && !selectedVariables.value.includes(variable)) {
+                const newVars = [...selectedVariables.value, variable];
+                updateSelectedVariables(graphIndex!, newVars);
+            }
+        }
+    };
+
+    return {
+        removeVariable,
+        startDrag,
+        endDrag,
+        onDrop
+    };
+}
\ No newline at end of file

From 644b537ae8121c47550df1214d063cce927ff97a Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 15:13:50 +0100
Subject: [PATCH 08/80] variable order should match that in mode

---
 app/static/src/app/store/graphs/actions.ts   | 7 ++++++-
 app/static/src/app/store/graphs/mutations.ts | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index 2fa4f1b8..df552a7d 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -14,11 +14,16 @@ export const actions: ActionTree<GraphsState, AppState> = {
         const { commit, dispatch, rootState } = context;
         // Maintain unselected variables too, so we know which variables had been explicitly unselected when model
         // updates
+        const allVariables = rootState.model.odinModelResponse?.metadata?.variables || [];
         const unselectedVariables =
             rootState.model.odinModelResponse?.metadata?.variables.filter(
                 (s) => !payload.selectedVariables.includes(s)
             ) || [];
-        commit(GraphsMutation.SetSelectedVariables, { ...payload, unselectedVariables });
+        // sort the selected variables to match the order in the model
+        const selectedVariables = payload.selectedVariables
+            .sort((a, b) => allVariables.indexOf(a) > allVariables.indexOf(b) ? 1 : -1);
+
+        commit(GraphsMutation.SetSelectedVariables, { ...payload, selectedVariables, unselectedVariables });
         if (rootState.appType === AppType.Fit) {
             dispatch(`fitData/${FitDataAction.UpdateLinkedVariables}`, null, { root: true });
         }
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index 4f761b87..859346e5 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -30,7 +30,7 @@ export const mutations: MutationTree<GraphsState> = {
 
     [GraphsMutation.SetSelectedVariables](state: GraphsState, payload: SetSelectedVariablesPayload) {
         // We don't simply replace the GraphConfig in the index here, as that will eventually include GraphSettings too
-        state.config[payload.graphIndex].selectedVariables = payload.selectedVariables.sort();
+        state.config[payload.graphIndex].selectedVariables = payload.selectedVariables;
         state.config[payload.graphIndex].unselectedVariables = payload.unselectedVariables;
     },
 

From 1db8c55952d9547ecab16796b0298bd2cfb7b337 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 17:27:08 +0100
Subject: [PATCH 09/80] unit tests for GraphConfig component

---
 .../components/graphConfig/GraphConfig.vue    |   6 +-
 .../graphConfig/HiddenVariables.vue           |   4 +-
 app/static/src/scss/style.scss                |   5 +
 .../components/code/selectedVariables.test.ts | 106 -------------
 .../graphConfig/graphConfig.test.ts           | 145 ++++++++++++++++++
 5 files changed, 155 insertions(+), 111 deletions(-)
 delete mode 100644 app/static/tests/unit/components/code/selectedVariables.test.ts
 create mode 100644 app/static/tests/unit/components/graphConfig/graphConfig.test.ts

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index b6daea43..3959a3fa 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="selected-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+    <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
         <h5>Graph {{ graphIndex + 1 }}</h5>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
@@ -10,13 +10,13 @@
                     @dragstart="startDrag($event, variable)"
                     @dragend="endDrag"
                 >
-                    {{ variable }}
+                    <span class="variable-name">{{ variable }}</span>
                     <span class="variable-delete">
                       <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
                     </span>
                 </span>
             </template>
-            <div v-if="!selectedVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+            <div v-if="!selectedVariables.length" class="drop-zone-instruction p-2 me-4">
                 Drag variables here to select them for this graph.
             </div>
         </div>
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index f43b9bc6..210ff1b1 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="selected-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+    <div class="hidden-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
         <h5>Hidden variables</h5>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in hiddenVariables" :key="variable">
@@ -13,7 +13,7 @@
                     {{ variable }}
                 </span>
             </template>
-            <div v-if="!hiddenVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+            <div v-if="!hiddenVariables.length" class="drop-zone-instruction p-2 me-4">
                 Drag variables here to hide them on all graphs.
             </div>
         </div>
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index b76fc3ed..c013587d 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -132,6 +132,11 @@ $grey: #ccc;
     border-color: #fff;
 }
 
+.drop-zone-instruction {
+    height: 3rem;
+    background-color: #eee
+}
+
 .variable-delete {
     font-weight: normal;
     margin-left: 0.3rem;
diff --git a/app/static/tests/unit/components/code/selectedVariables.test.ts b/app/static/tests/unit/components/code/selectedVariables.test.ts
deleted file mode 100644
index 42b7d92d..00000000
--- a/app/static/tests/unit/components/code/selectedVariables.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import Vuex from "vuex";
-import { shallowMount } from "@vue/test-utils";
-import { BasicState } from "../../../../src/app/store/basic/state";
-import SelectedVariables from "../../../../src/app/components/graphConfig/SelectedVariables.vue";
-import { ModelAction } from "../../../../src/app/store/model/actions";
-import { GraphsAction } from "../../../../src/app/store/graphs/actions";
-
-describe("SelectedVariables", () => {
-    const mockUpdateSelectedVariables = jest.fn();
-
-    const getWrapper = () => {
-        const store = new Vuex.Store<BasicState>({
-            state: {} as any,
-            modules: {
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        config: [
-                            {
-                                selectedVariables: ["S", "R"]
-                            }
-                        ]
-                    },
-                    actions: {
-                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
-                    }
-                },
-                model: {
-                    namespaced: true,
-                    state: {
-                        odinModelResponse: {
-                            metadata: {
-                                variables: ["S", "I", "R"]
-                            }
-                        },
-                        paletteModel: {
-                            S: "#ff0000",
-                            I: "#00ff00",
-                            R: "#0000ff"
-                        }
-                    }
-                }
-            }
-        });
-
-        return shallowMount(SelectedVariables, {
-            global: {
-                plugins: [store]
-            }
-        });
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("renders as expected", () => {
-        const wrapper = getWrapper();
-        const vars = wrapper.findAll(".selected-variables-panel span.variable");
-        expect(vars.length).toBe(3);
-        expect(vars.at(0)!.text()).toBe("S");
-        expect((vars.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgb(255, 0, 0)");
-        expect(vars.at(1)!.text()).toBe("I");
-        expect((vars.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgb(187, 187, 187)");
-        expect(vars.at(2)!.text()).toBe("R");
-        expect((vars.at(2)!.element as HTMLElement).style.backgroundColor).toBe("rgb(0, 0, 255)");
-        expect(wrapper.find("span#select-variables-all").text()).toBe("Select all");
-        expect(wrapper.find("span#select-variables-none").text()).toBe("Select none");
-    });
-
-    it("clicking a selected variable unselects it", async () => {
-        const wrapper = getWrapper();
-        const s = wrapper.findAll(".selected-variables-panel span.variable").at(0)!;
-        await s.trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["R"] });
-    });
-
-    it("clicking an unselected variables selects it", async () => {
-        const wrapper = getWrapper();
-        const i = wrapper.findAll(".selected-variables-panel span.variable").at(1)!;
-        await i.trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
-            graphIndex: 0,
-            selectedVariables: ["S", "R", "I"]
-        });
-    });
-
-    it("clicking select all link selects all variables", async () => {
-        const wrapper = getWrapper();
-        wrapper.find("span#select-variables-all").trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
-            graphIndex: 0,
-            selectedVariables: ["S", "I", "R"]
-        });
-    });
-
-    it("clicking select none link unselects all variables", async () => {
-        const wrapper = getWrapper();
-        wrapper.find("span#select-variables-none").trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: [] });
-    });
-});
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
new file mode 100644
index 00000000..6fefe4a9
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -0,0 +1,145 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+
+describe("GraphConfig", () => {
+    const mockUpdateSelectedVariables = jest.fn();
+    const mockTooltipDirective = jest.fn();
+
+    const getWrapper = (props = {}, selectedVariables: null | string[] = null) => {
+        const store = new Vuex.Store<BasicState>({
+            state: {} as any,
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        config: [
+                            {
+                                selectedVariables: selectedVariables || ["S", "R"]
+                            },
+                            {
+                                selectedVariables: ["I", "J"]
+                            }
+                        ]
+                    },
+                    actions: {
+                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    }
+                },
+                model: {
+                    namespaced: true,
+                    state: {
+                        paletteModel: {
+                            S: "#ff0000",
+                            I: "#00ff00",
+                            R: "#0000ff"
+                        }
+                    }
+                }
+            }
+        });
+
+        return shallowMount(GraphConfig, {
+            props: {
+                graphIndex: 0,
+                dragging: false,
+                ...props
+            },
+            global: {
+                directives: { tooltip: mockTooltipDirective },
+                plugins: [store]
+            }
+        });
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        const varBadges = wrapper.findAll(".graph-config-panel .badge");
+        const varNames = wrapper.findAll(".graph-config-panel span.variable-name");
+        expect(wrapper.find("h5").text()).toBe("Graph 1");
+        expect(varBadges.length).toBe(2);
+        expect(varNames.length).toBe(2);
+        expect(varNames.at(0)!.text()).toBe("S");
+        expect((varBadges.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgb(255, 0, 0)");
+        expect(varNames.at(1)!.text()).toBe("R");
+        expect((varBadges.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgb(0, 0, 255)");
+        // drop zone not active
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-inactive"]);
+        // instruction not shown if at least one selected variable
+        expect(wrapper.findAll(".drop-zone-instruction").length).toBe(0);
+    });
+
+    it("starting drag sets values in event and emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData } });
+        expect(setData.mock.calls[0][0]).toBe("variable");
+        expect(setData.mock.calls[0][1]).toStrictEqual("S");
+        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraph");
+        expect(setData.mock.calls[1][1]).toStrictEqual("0");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
+    });
+
+    it("ending drag emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        await s.trigger("dragend");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
+    });
+
+    it("onDrop selects variable in current graph and removes it from source", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraph") return "1";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["S", "R", "I"] });
+    });
+
+    it("onDrop does not attempt to remove variable if source was hidden variables", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraph") return "hidden";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["S", "R", "I"] });
+    });
+
+    it("clicking remove button removes variable from graph", async () => {
+        const wrapper = getWrapper();
+        const button = wrapper.findAll(".variable-delete button").at(0);
+        await button!.trigger("click");
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["R"] });
+    });
+
+    it("shows drop zone when dragging", () => {
+        const wrapper = getWrapper({dragging: true});
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
+    });
+
+    it("shows instruction if no selected variables", () =>{
+        const wrapper = getWrapper({}, []);
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to select them for this graph.");
+    });
+});

From b9df2c3631bec1073e8663e34e75d49a6761b2b3 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 28 Jun 2024 10:41:36 +0100
Subject: [PATCH 10/80] add GraphConfigs tests

---
 .../src/app/components/code/CodeTab.vue       |  9 +-
 .../components/graphConfig/GraphConfigs.vue   | 15 ++--
 .../graphConfig/HiddenVariables.vue           |  6 --
 .../unit/components/code/codeTab.test.ts      |  4 +
 .../graphConfig/graphConfigs.test.ts          | 83 +++++++++++++++++++
 .../graphConfig/hiddenVariables.test.ts       | 79 ++++++++++++++++++
 6 files changed, 179 insertions(+), 17 deletions(-)
 create mode 100644 app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
 create mode 100644 app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts

diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index 8612f0cf..f4223c66 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,7 +15,9 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <graph-configs></graph-configs>
+            <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
+                <graph-configs></graph-configs>
+            </vertical-collapse>
         </div>
     </div>
 </template>
@@ -32,10 +34,12 @@ import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
 import GraphConfigs from "../graphConfig/GraphConfigs.vue";
 import GenericHelp from "../help/GenericHelp.vue";
+import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
+      VerticalCollapse,
         GenericHelp,
         GraphConfigs,
         ErrorInfo,
@@ -54,6 +58,8 @@ export default defineComponent({
         const appIsConfigured = computed(() => store.state.configured);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const loadingMessage = userMessages.code.isValidating;
+        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
+        const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
 
         return {
             appIsConfigured,
@@ -66,6 +72,7 @@ export default defineComponent({
             codeHelp,
             codeValidating,
             loadingMessage,
+            showGraphs
         };
     }
 });
diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
index 530ca5c0..5e7f3164 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigs.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -1,6 +1,6 @@
 <template>
-  <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
-    <div class="ms-2">
+
+    <div id="graph-configs-instruction" class="ms-2">
       Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
       new graph to move them to.
     </div>
@@ -19,14 +19,13 @@
         @setDragging="setDraggingVariable"
         :dragging="draggingVariable"
     ></hidden-variables>
-  </vertical-collapse>
+
 </template>
 
 <script lang="ts">
 import {computed, defineComponent, ref} from "vue";
 import {useStore} from "vuex";
-import VueFeather from "vue-feather";
-import VerticalCollapse from "../VerticalCollapse.vue";
+import VueFeather from "vue-feather";;
 import HiddenVariables from "./HiddenVariables.vue";
 import GraphConfig from "./GraphConfig.vue";
 import {GraphsAction} from "../../store/graphs/actions";
@@ -35,13 +34,10 @@ export default defineComponent({
   components: {
     VueFeather,
     GraphConfig,
-    HiddenVariables,
-    VerticalCollapse
+    HiddenVariables
   },
   setup() {
     const store = useStore();
-    const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-    const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
     const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
     const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
     const graphConfigs = computed(() => store.state.graphs.config);
@@ -49,7 +45,6 @@ export default defineComponent({
       store.dispatch(`graphs/${GraphsAction.NewGraph}`);
     };
     return {
-      showGraphs,
       draggingVariable,
       setDraggingVariable,
       graphConfigs,
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 210ff1b1..00878a06 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -24,18 +24,12 @@
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
-import tooltip from "../../directives/tooltip";
 import * as Color from "color";
 import { GraphsGetter } from "../../store/graphs/getters";
 import SelectVariables from "../mixins/selectVariables";
 
 export default defineComponent({
     name: "HiddenVariables",
-    computed: {
-        tooltip() {
-            return tooltip;
-        }
-    },
     components: { VueFeather },
     props: {
         dragging: {
diff --git a/app/static/tests/unit/components/code/codeTab.test.ts b/app/static/tests/unit/components/code/codeTab.test.ts
index fbbfc03d..5dc5e3e3 100644
--- a/app/static/tests/unit/components/code/codeTab.test.ts
+++ b/app/static/tests/unit/components/code/codeTab.test.ts
@@ -134,4 +134,8 @@ describe("CodeTab", () => {
         });
         expect(wrapper.findAll("div").length).toBe(0);
     });
+
+    // TODO
+    // Graphs renders nothing if no variables
+    // Graphs renders nothing if compile required
 });
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
new file mode 100644
index 00000000..017ab14a
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
@@ -0,0 +1,83 @@
+import Vuex from "vuex";
+import {BasicState} from "../../../../src/app/store/basic/state";
+import {mockBasicState} from "../../../mocks";
+import {GraphsAction} from "../../../../src/app/store/graphs/actions";
+import {shallowMount} from "@vue/test-utils";
+import GraphConfigs from "../../../../src/app/components/graphConfig/GraphConfigs.vue";
+import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
+import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
+import {nextTick} from "vue";
+
+describe("GraphConfigs", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const mockNewGraph = jest.fn();
+    const namespaced = true;
+    const getWrapper = () => {
+        const store = new Vuex.Store<BasicState>({
+            state: mockBasicState({
+                configured: true
+            }),
+            modules: {
+                graphs: {
+                    namespaced,
+                    state: {
+                        config: [
+                            { selectedVariables: ["S"], unselectedVariables: ["I", "R"] },
+                            { selectedVariables: ["I"], unselectedVariables: ["S", "R"] }
+                        ]
+                    },
+                    actions: {
+                        [GraphsAction.NewGraph]: mockNewGraph
+                    }
+                }
+            }
+        });
+        return shallowMount(GraphConfigs, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.find("#graph-configs-instruction").text()).toContain("Drag variables to 'Hidden variables' to remove");
+        const graphConfigComps = wrapper.findAllComponents(GraphConfig);
+        expect(graphConfigComps.length).toBe(2);
+        expect(graphConfigComps.at(0)!.props("graphIndex")).toBe(0);
+        expect(graphConfigComps.at(0)!.props("dragging")).toBe(false)
+        expect(graphConfigComps.at(1)!.props("graphIndex")).toBe(1);
+        expect(graphConfigComps.at(1)!.props("dragging")).toBe(false);
+        expect(wrapper.find("button").text()).toBe("Add Graph");
+        expect(wrapper.findComponent(HiddenVariables).props("dragging")).toBe(false);
+    });
+
+    it("sets dragging on emit from GraphConfig", async () => {
+        const wrapper = getWrapper();
+        const graphConfig = wrapper.findAllComponents(GraphConfig).at(0)!;
+        graphConfig.vm.$emit("setDragging", true);
+        await nextTick();
+        expect(graphConfig.props("dragging")).toBe(true);
+        expect(wrapper.findComponent(HiddenVariables).props("dragging")).toBe(true);
+    });
+
+    it("sets dragging on emit from HiddenVariables", async () => {
+        const wrapper = getWrapper();
+        const hiddenVars = wrapper.findComponent(HiddenVariables);
+        hiddenVars.vm.$emit("setDragging", true);
+        await nextTick();
+        expect(hiddenVars.props("dragging")).toBe(true);
+        expect(wrapper.findAllComponents(GraphConfig).at(0)!.props("dragging")).toBe(true);
+    });
+
+    it("Add Graph click invokes action", async () => {
+        const wrapper = getWrapper();
+        expect(mockNewGraph).toHaveBeenCalledTimes(0);
+        await wrapper.find("button").trigger("click");
+        expect(mockNewGraph).toHaveBeenCalledTimes(1);
+    });
+
+});
\ No newline at end of file
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
new file mode 100644
index 00000000..093bd375
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -0,0 +1,79 @@
+import Vuex from "vuex";
+import {BasicState} from "../../../../src/app/store/basic/state";
+import {GraphsAction} from "../../../../src/app/store/graphs/actions";
+import {shallowMount} from "@vue/test-utils";
+import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
+import {GraphsGetter} from "../../../../src/app/store/graphs/getters";
+
+describe("HiddenVariables", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const mockUpdateSelectedVariables = jest.fn();
+
+    const getWrapper = () => {
+        const store = new Vuex.Store<BasicState>({
+            state: {} as any,
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        config: [
+                            {
+                                selectedVariables: ["S"]
+                            }
+                        ]
+                    },
+                    actions: {
+                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    },
+                    getters: {
+                        [GraphsGetter.hiddenVariables]: ["I", "R"]
+                    } as any
+                },
+                model: {
+                    namespaced: true,
+                    state: {
+                        paletteModel: {
+                            S: "#ff0000",
+                            I: "#00ff00",
+                            R: "#0000ff"
+                        }
+                    }
+                }
+            }
+        });
+
+        return shallowMount(HiddenVariables, {
+            props: {
+                dragging: false
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+    });
+
+    /*
+    it("starting drag sets values in event and emits setDragging");
+
+    it("ending drag emits setDragging");
+
+    it("onDrop removes variable from source");
+
+    it("shows drop zone when dragging", () => {
+        const wrapper = getWrapper({dragging: true});
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
+    });
+
+    it("shows instruction if no hidden variables", () =>{
+        const wrapper = getWrapper({}, []);
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to select them for this graph.");
+    });*/
+});
\ No newline at end of file

From 2f0ec80b103bf993b4be1c813838b86bea31edb1 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 10:37:31 +0100
Subject: [PATCH 11/80] unit tests

---
 app/static/jest.config.js                     |  1 +
 .../src/app/components/code/CodeTab.vue       | 16 ++--
 .../graphConfig/GraphConfigsCollapsible.vue   | 27 ++++++
 .../graphConfig/HiddenVariables.vue           |  5 +-
 .../src/app/components/graphConfig/utils.ts   |  5 ++
 .../src/app/components/options/OptionsTab.vue |  4 +-
 app/static/src/scss/style.scss                |  5 ++
 app/static/tests/color-shim.js                |  6 ++
 .../unit/components/code/codeTab.test.ts      | 29 +------
 .../graphConfigsCollapsible.test.ts           | 64 ++++++++++++++
 .../graphConfig/hiddenVariables.test.ts       | 84 +++++++++++++++----
 .../components/options/optionsTab.test.ts     |  2 +
 .../tests/unit/components/run/runPlot.test.ts |  3 +-
 .../components/run/runStochasticPlot.test.ts  |  3 +-
 .../tests/unit/components/run/runTab.test.ts  | 40 +++++++--
 .../tests/unit/store/graphs/actions.test.ts   | 22 ++++-
 .../tests/unit/store/graphs/getters.test.ts   | 30 +++++++
 .../tests/unit/store/graphs/mutations.test.ts | 13 +++
 18 files changed, 289 insertions(+), 70 deletions(-)
 create mode 100644 app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
 create mode 100644 app/static/src/app/components/graphConfig/utils.ts
 create mode 100644 app/static/tests/color-shim.js
 create mode 100644 app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
 create mode 100644 app/static/tests/unit/store/graphs/getters.test.ts

diff --git a/app/static/jest.config.js b/app/static/jest.config.js
index 46df619b..e88f717a 100644
--- a/app/static/jest.config.js
+++ b/app/static/jest.config.js
@@ -9,6 +9,7 @@ module.exports = {
     coveragePathIgnorePatterns: ["./tests/mocks.ts"],
     transformIgnorePatterns: ["node_modules/(?!(d3-format))"],
     moduleNameMapper: {
+        //"^color$": "<rootDir>/tests/color-shim.js",
         "raw-loader!.*/help/(.*)$": "<rootDir>/src/app/help/$1"
     }
 };
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index f4223c66..cace4ba6 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,9 +15,7 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
-                <graph-configs></graph-configs>
-            </vertical-collapse>
+          <graph-configs-collapsible></graph-configs-collapsible>
         </div>
     </div>
 </template>
@@ -32,16 +30,15 @@ import CodeEditor from "./CodeEditor.vue";
 import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
-import GraphConfigs from "../graphConfig/GraphConfigs.vue";
 import GenericHelp from "../help/GenericHelp.vue";
-import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
+import GraphConfigsCollapsible from "../graphConfig/GraphConfigsCollapsible.vue";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
-      VerticalCollapse,
+      GraphConfigsCollapsible,
         GenericHelp,
-        GraphConfigs,
+
         ErrorInfo,
         CodeEditor,
         VueFeather
@@ -58,8 +55,6 @@ export default defineComponent({
         const appIsConfigured = computed(() => store.state.configured);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const loadingMessage = userMessages.code.isValidating;
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
 
         return {
             appIsConfigured,
@@ -71,8 +66,7 @@ export default defineComponent({
             error,
             codeHelp,
             codeValidating,
-            loadingMessage,
-            showGraphs
+            loadingMessage
         };
     }
 });
diff --git a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
new file mode 100644
index 00000000..cbe9418d
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
@@ -0,0 +1,27 @@
+<template>
+  <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
+    <graph-configs></graph-configs>
+  </vertical-collapse>
+</template>
+
+<script lang="ts">
+import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
+import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
+import {computed, defineComponent} from "vue";
+import {useStore} from "vuex";
+export default defineComponent({
+  name: "GraphConfigsCollapsible",
+  components: {
+    GraphConfigs,
+    VerticalCollapse
+  },
+  setup(){
+    const store = useStore();
+    const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
+    const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
+    return {
+      showGraphs
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 00878a06..186a7b6c 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -24,9 +24,9 @@
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
-import * as Color from "color";
 import { GraphsGetter } from "../../store/graphs/getters";
 import SelectVariables from "../mixins/selectVariables";
+import {fadeColor} from "./utils";
 
 export default defineComponent({
     name: "HiddenVariables",
@@ -45,8 +45,7 @@ export default defineComponent({
 
         const getStyle = (variable: string) => {
             const bgcolor = palette.value ? palette.value[variable] : "#eee";
-            const desatBgColor = Color(bgcolor).desaturate(0.6).fade(0.4).rgb().string();
-            return { "background-color": desatBgColor };
+            return { "background-color": fadeColor(bgcolor)};
         };
 
         return {
diff --git a/app/static/src/app/components/graphConfig/utils.ts b/app/static/src/app/components/graphConfig/utils.ts
new file mode 100644
index 00000000..afa50149
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/utils.ts
@@ -0,0 +1,5 @@
+import * as Color from "color";
+
+export const fadeColor = (color: string) => {
+    return Color(color).desaturate(0.6).fade(0.4).rgb().string();
+};
\ No newline at end of file
diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index 9519292d..745f5143 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -30,7 +30,7 @@
         <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
             <parameter-sets></parameter-sets>
         </vertical-collapse>
-        <graph-configs></graph-configs>
+        <graph-configs-collapsible></graph-configs-collapsible>
     </div>
 </template>
 
@@ -48,10 +48,12 @@ import GraphSettings from "./GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
 import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
+import GraphConfigsCollapsible from "@/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 export default defineComponent({
     name: "OptionsTab",
     components: {
+      GraphConfigsCollapsible,
       GraphConfigs,
         ParameterSets,
         LinkData,
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index c013587d..7fe36a78 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -137,6 +137,11 @@ $grey: #ccc;
     background-color: #eee
 }
 
+.variable {
+    font-size: large;
+    cursor: pointer;
+}
+
 .variable-delete {
     font-weight: normal;
     margin-left: 0.3rem;
diff --git a/app/static/tests/color-shim.js b/app/static/tests/color-shim.js
new file mode 100644
index 00000000..f6438b98
--- /dev/null
+++ b/app/static/tests/color-shim.js
@@ -0,0 +1,6 @@
+const Color = require("color/index.js");
+const color2 = Color.default;
+//module.exports = color2;
+console.log("Color from shim")
+console.log(typeof Color)
+module.exports = Color;
\ No newline at end of file
diff --git a/app/static/tests/unit/components/code/codeTab.test.ts b/app/static/tests/unit/components/code/codeTab.test.ts
index 5dc5e3e3..8b7357df 100644
--- a/app/static/tests/unit/components/code/codeTab.test.ts
+++ b/app/static/tests/unit/components/code/codeTab.test.ts
@@ -7,8 +7,8 @@ import { BasicState } from "../../../../src/app/store/basic/state";
 import { mockBasicState, mockCodeState, mockModelState } from "../../../mocks";
 import ErrorInfo from "../../../../src/app/components/ErrorInfo.vue";
 import { ModelState } from "../../../../src/app/store/model/state";
-import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
 import GenericHelp from "../../../../src/app/components/help/GenericHelp.vue";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 describe("CodeTab", () => {
     const defaultModelState = {
@@ -63,7 +63,7 @@ describe("CodeTab", () => {
         const statusIcon = wrapper.find("#code-status").findComponent(VueFeather);
         expect(statusIcon.attributes("type")).toBe("check");
         expect(statusIcon.classes()).toContain("text-success");
-        expect(wrapper.findComponent(VerticalCollapse).props("collapseId")).toBe("select-variables");
+        expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
         expect(wrapper.findComponent(GenericHelp).props("title")).toBe("Write odin code");
         expect(wrapper.findComponent(GenericHelp).props("markdown")).toContain("Write code in this editor");
     });
@@ -101,27 +101,6 @@ describe("CodeTab", () => {
         expect(wrapper.findComponent(ErrorInfo).props("error")).toStrictEqual(odinModelResponseError);
     });
 
-    it("does not render selected variables when no variables in model", () => {
-        const wrapper = getWrapper({
-            ...defaultModelState,
-            odinModelResponse: {
-                metadata: {
-                    variables: []
-                },
-                valid: true
-            } as any
-        });
-        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
-    });
-
-    it("does not render selected variables when compile required", () => {
-        const wrapper = getWrapper({
-            ...defaultModelState,
-            compileRequired: true
-        });
-        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
-    });
-
     it("renders nothing when app state is not configured", () => {
         const store = new Vuex.Store<BasicState>({
             state: mockBasicState()
@@ -134,8 +113,4 @@ describe("CodeTab", () => {
         });
         expect(wrapper.findAll("div").length).toBe(0);
     });
-
-    // TODO
-    // Graphs renders nothing if no variables
-    // Graphs renders nothing if compile required
 });
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
new file mode 100644
index 00000000..214adeef
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
@@ -0,0 +1,64 @@
+import {ModelState} from "../../../../src/app/store/model/state";
+import Vuex from "vuex";
+import {BasicState} from "../../../../src/app/store/basic/state";
+import {mockBasicState, mockCodeState, mockModelState} from "../../../mocks";
+import {shallowMount} from "@vue/test-utils";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
+import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
+
+describe("GraphConfigsCollapsible", () => {
+    const defaultModelState = {
+        compileRequired: false,
+        odinModelResponse: {
+            metadata: {
+                variables: ["S", "I", "R"]
+            },
+            valid: true
+        } as any
+    };
+
+    const getWrapper = (modelState: Partial<ModelState> = {}) => {
+        const store = new Vuex.Store<BasicState>({
+            state: mockBasicState({
+                configured: true
+            }),
+            modules: {
+                model: {
+                    namespaced: true,
+                    state: mockModelState({...defaultModelState, ...modelState})
+                }
+            }
+        });
+
+        return shallowMount(GraphConfigsCollapsible, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    it("renders collapsible when graph configs should be shown", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.findComponent(VerticalCollapse).props("title")).toBe("Graphs");
+    });
+
+    it("does not render collapsible when no variables in model", () => {
+        const wrapper = getWrapper({
+            odinModelResponse: {
+                metadata: {
+                    variables: []
+                },
+                valid: true
+            } as any
+        });
+        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
+    });
+
+    it("does not render collapsible when compile required", () => {
+        const wrapper = getWrapper({
+            compileRequired: true
+        });
+        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
+    });
+
+});
\ No newline at end of file
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
index 093bd375..e65dc7cb 100644
--- a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -1,3 +1,17 @@
+// Mock the fadeColor util which uses color package, which doesn't play nicely with jest
+function mockfun() { return "Hello"; };
+jest.mock("../../../../src/app/components/graphConfig/utils", () => {
+    return {
+        fadeColor: (input: string) => {
+            console.log(`calling fade w ${input}`)
+            const match = input.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
+            const result =  `rgba(${match![1]}, ${match![2]}, ${match![3]}, 0.5)`;
+            console.log(result);
+            return result;
+        }
+    }
+});
+
 import Vuex from "vuex";
 import {BasicState} from "../../../../src/app/store/basic/state";
 import {GraphsAction} from "../../../../src/app/store/graphs/actions";
@@ -12,7 +26,7 @@ describe("HiddenVariables", () => {
 
     const mockUpdateSelectedVariables = jest.fn();
 
-    const getWrapper = () => {
+    const getWrapper = (hiddenVariables = ["I", "R"]) => {
         const store = new Vuex.Store<BasicState>({
             state: {} as any,
             modules: {
@@ -21,7 +35,7 @@ describe("HiddenVariables", () => {
                     state: {
                         config: [
                             {
-                                selectedVariables: ["S"]
+                                selectedVariables: ["S", "J"]
                             }
                         ]
                     },
@@ -29,16 +43,17 @@ describe("HiddenVariables", () => {
                         [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
                     },
                     getters: {
-                        [GraphsGetter.hiddenVariables]: ["I", "R"]
+                        [GraphsGetter.hiddenVariables]: () => hiddenVariables
                     } as any
                 },
                 model: {
                     namespaced: true,
                     state: {
                         paletteModel: {
-                            S: "#ff0000",
-                            I: "#00ff00",
-                            R: "#0000ff"
+                            S: "rgb(255, 0, 0)",
+                            I: "rgb(0, 255, 0)",
+                            R: "rgb(0, 0, 255)",
+                            J: "rgb(0, 255, 255)"
                         }
                     }
                 }
@@ -58,22 +73,61 @@ describe("HiddenVariables", () => {
 
     it("renders as expected", () => {
         const wrapper = getWrapper();
+        expect(wrapper.find("h5").text()).toBe("Hidden variables");
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-inactive"]);
+        const variables = wrapper.findAll(".hidden-variables-panel .variable");
+        expect(variables.length).toBe(2);
+        expect(variables.at(0)!.text()).toBe("I");
+        expect((variables.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgba(0, 255, 0, 0.5)");
+        expect(variables.at(1)!.text()).toBe("R");
+        expect((variables.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgba(0, 0, 255, 0.5)");
     });
 
-    /*
-    it("starting drag sets values in event and emits setDragging");
 
-    it("ending drag emits setDragging");
+    it("starting drag sets values in event and emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".hidden-variables-panel .variable").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData } });
+        expect(setData.mock.calls[0][0]).toBe("variable");
+        expect(setData.mock.calls[0][1]).toStrictEqual("I");
+        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraph");
+        expect(setData.mock.calls[1][1]).toStrictEqual("hidden");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
+    });
+
+    it("ending drag emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".hidden-variables-panel .variable").at(0)!;
+        await s.trigger("dragend");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
+    });
 
-    it("onDrop removes variable from source");
 
-    it("shows drop zone when dragging", () => {
-        const wrapper = getWrapper({dragging: true});
+    it("onDrop removes variable from source", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "S";
+                if (s === "srcGraph") return "0";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".hidden-variables-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["J"] });
+    });
+
+
+    it("shows drop zone when dragging", async () => {
+        const wrapper = getWrapper();
+        await wrapper.setProps({dragging: true});
         expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
     });
 
     it("shows instruction if no hidden variables", () =>{
-        const wrapper = getWrapper({}, []);
-        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to select them for this graph.");
-    });*/
+        const wrapper = getWrapper([]);
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to hide them on all graphs.");
+    });
 });
\ No newline at end of file
diff --git a/app/static/tests/unit/components/options/optionsTab.test.ts b/app/static/tests/unit/components/options/optionsTab.test.ts
index d94e3131..da53b7e5 100644
--- a/app/static/tests/unit/components/options/optionsTab.test.ts
+++ b/app/static/tests/unit/components/options/optionsTab.test.ts
@@ -16,6 +16,7 @@ import GraphSettings from "../../../../src/app/components/options/GraphSettings.
 import ParameterSets from "../../../../src/app/components/options/ParameterSets.vue";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
 import AdvancedSettings from "../../../../src/app/components/options/AdvancedSettings.vue";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 describe("OptionsTab", () => {
     const mockTooltipDirective = jest.fn();
@@ -93,6 +94,7 @@ describe("OptionsTab", () => {
         expect(collapses.at(4)!.findComponent(ParameterSets).exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
+        expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
     });
 
     it("can reset model parameters", async () => {
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index a605b9df..234144f1 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -122,7 +122,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index a7eacefe..5a455417 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -56,7 +56,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 8f704738..4b79edee 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -65,7 +65,10 @@ describe("RunTab", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables, unselectedVariables: [] }]
+                        config: [
+                            { selectedVariables, unselectedVariables: [] },
+                            { selectedVariables: [], unselectedVariables: [] }
+                        ]
                     }),
                     getters: graphGetters
                 },
@@ -108,7 +111,10 @@ describe("RunTab", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables: ["S"], unselectedVariables: [] }]
+                        config: [
+                            { selectedVariables: ["S"], unselectedVariables: [] },
+                            { selectedVariables: [], unselectedVariables: [] }
+                        ]
                     }),
                     getters: graphGetters
                 },
@@ -144,7 +150,12 @@ describe("RunTab", () => {
         expect(wrapper.find("button#run-btn").text()).toBe("Run model");
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("graphIndex")).toBe(0);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphIndex")).toBe(1);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -168,7 +179,12 @@ describe("RunTab", () => {
                 solution: jest.fn()
             }
         );
-        expect(wrapper.findComponent(RunStochasticPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("graphIndex")).toBe(0);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphIndex")).toBe(1);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
@@ -224,7 +240,9 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Model code has been updated. Compile code and Run Model to update."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot and shows message when model run required", () => {
@@ -239,7 +257,9 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Plot is out of date: model code has been recompiled. Run model to update."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot and show message when no selected variables", () => {
@@ -247,12 +267,16 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Please select at least one variable."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot when compile required when stochastic", () => {
         const wrapper = getStochasticWrapper({}, {}, true);
-        expect(wrapper.findComponent(RunStochasticPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("invokes run model action when run button is clicked", () => {
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index caba3f8e..6ac9a0d3 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -8,7 +8,7 @@ describe("Graphs actions", () => {
     const modelState = {
         odinModelResponse: {
             metadata: {
-                variables: ["a", "b", "c"]
+                variables: ["b", "a", "c"]
             }
         }
     } as any;
@@ -40,7 +40,7 @@ describe("Graphs actions", () => {
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.SetSelectedVariables);
         expect(commit.mock.calls[0][1]).toStrictEqual({
             graphIndex: 1,
-            selectedVariables: ["a", "b"],
+            selectedVariables: ["b", "a"], // should have reordered variables to match model
             unselectedVariables: ["c"]
         });
         expect(dispatch).not.toHaveBeenCalled();
@@ -67,7 +67,7 @@ describe("Graphs actions", () => {
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.SetSelectedVariables);
         expect(commit.mock.calls[0][1]).toStrictEqual({
             graphIndex: 1,
-            selectedVariables: ["a", "b"],
+            selectedVariables: ["b", "a"],
             unselectedVariables: ["c"]
         });
         expect(dispatch).toHaveBeenCalledTimes(1);
@@ -75,4 +75,20 @@ describe("Graphs actions", () => {
         expect(dispatch.mock.calls[0][1]).toBe(null);
         expect(dispatch.mock.calls[0][2]).toStrictEqual({ root: true });
     });
+    it("NewGraph adds empty graph", () => {
+        const commit = jest.fn();
+
+        (actions[GraphsAction.NewGraph] as any)(
+            {
+                commit,
+                rootState
+            }
+        );
+        expect(commit).toHaveBeenCalledTimes(1);
+        expect(commit.mock.calls[0][0]).toBe(GraphsMutation.AddGraph);
+        expect(commit.mock.calls[0][1]).toStrictEqual({
+            selectedVariables: [],
+            unselectedVariables: ["b", "a", "c"]
+        });
+    });
 });
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
new file mode 100644
index 00000000..d77e61b1
--- /dev/null
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -0,0 +1,30 @@
+import {mockGraphsState} from "../../../mocks";
+import {getters, GraphsGetter} from "../../../../src/app/store/graphs/getters";
+
+describe("GraphsGetters", () => {
+    it("gets allSelectedVariables", () => {
+        const state = mockGraphsState({
+            config: [
+                { selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"] },
+                { selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
+            ]
+        });
+        expect((getters[GraphsGetter.allSelectedVariables] as any)(state)).toStrictEqual(["a", "b", "d"]);
+    });
+
+    it("gets hiddenVariables", () => {
+        const testGetters = {
+            allSelectedVariables: ["a", "b", "d"]
+        };
+        const rootState = {
+            model: {
+                odinModelResponse: {
+                    metadata: {
+                        variables: ["e", "d", "c", "b", "a"]
+                    }
+                }
+            }
+        } as any;
+        expect((getters[GraphsGetter.hiddenVariables] as any)({}, testGetters, rootState)).toStrictEqual(["e", "c"]);
+    });
+});
\ No newline at end of file
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index fd590c10..66aa1ea9 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -41,4 +41,17 @@ describe("Graphs mutations", () => {
         expect(testState.config[1]).toStrictEqual({ selectedVariables: ["x", "z"], unselectedVariables: ["y"] });
         expect(testState.config[0]).toStrictEqual({ selectedVariables: [], unselectedVariables: [] });
     });
+
+    it("AddGraph pushed new graph to config", () => {
+        const testState = mockGraphsState({
+            config: [
+                { selectedVariables: ["a"], unselectedVariables: ["b", "c"] }
+            ]
+        });
+        mutations.AddGraph(testState, { selectedVariables: [], unselectedVariables: ["b", "a", "c"] });
+        expect(testState.config).toStrictEqual([
+            { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+            { selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
+        ]);
+    });
 });

From 1fdd74e27b66d9936dd73e08b6fadd03b1a3ea93 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 13:30:03 +0100
Subject: [PATCH 12/80] playwright tests

---
 app/static/tests/e2e/code.etest.ts | 53 ++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index d1c210e0..a0e06565 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -1,6 +1,7 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
 import { saveSessionTimeout, writeCode } from "./utils";
+import {plot} from "plotly.js-basic-dist-min";
 
 export const newValidCode = `## Derivatives
 deriv(y1) <- sigma * (y2 - y1)
@@ -292,10 +293,11 @@ test.describe("Code Tab tests", () => {
         );
     });
 
-    test("can select and unselect variables", async ({ page }) => {
-        // unselect I
-        const iVariable = await page.locator(":nth-match(.selected-variables-panel span.variable, 2)");
-        await iVariable.click();
+    test("can hide and unhide variables", async ({ page }) => {
+        // drag I to Hidden Variables
+        const iVariable = await page.locator(":nth-match(.graph-config-panel span.variable, 2)");
+        const hiddenVariables = await page.locator(".hidden-variables-panel");
+        await iVariable.dragTo(hiddenVariables);
 
         // check plot no longer contains R series
         await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(2);
@@ -306,8 +308,10 @@ test.describe("Code Tab tests", () => {
             "R"
         );
 
-        // re-select I
-        await iVariable.click();
+        // drag I back to Graph panel
+        const iVariableHidden = await page.locator(".hidden-variables-panel .variable");
+        const graphVariablesPanel = await page.locator(".graph-config-panel .drop-zone");
+        await iVariableHidden.dragTo(graphVariablesPanel);
         await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(3);
         await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
             "S"
@@ -320,6 +324,43 @@ test.describe("Code Tab tests", () => {
         );
     });
 
+    test("can add a graph, and drag variable onto it", async ({ page }) => {
+        // Add graph
+        await page.click("#add-graph-btn");
+
+        // Check second graph has appeared with placeholder text, and second graph config panel is there
+        expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe("No variables are selected.");
+        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toBe("Graph 2");
+        expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent())
+            .toContain("Drag variables here to select them for this graph.");
+
+        // Drag variable to second graph
+        const sVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
+        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+
+        // Check correct variables on first and second config panels, none in Hidden
+        const configPanel1 = await page.locator(":nth-match(.graph-config-panel, 1)");
+        const panel1Vars = await configPanel1.locator(".variable .variable-name");
+        await expect(panel1Vars).toHaveCount(2);
+        await expect(panel1Vars.nth(0)).toHaveText("I");
+        await expect(panel1Vars.nth(1)).toHaveText("R");
+        const configPanel2 = await page.locator(":nth-match(.graph-config-panel, 2)");
+        const panel2Vars = await configPanel2.locator(".variable .variable-name");
+        await expect(panel2Vars).toHaveCount(1);
+        await expect(panel2Vars.nth(0)).toHaveText("S");
+
+        // Check correct variables on first and second graphs
+        const plotSummaries = await page.locator(".wodin-plot-container .wodin-plot-data-summary");
+        await expect(plotSummaries).toHaveCount(2);
+        const plot1Series = await plotSummaries.nth(0).locator(".wodin-plot-data-summary-series");
+        await expect(plot1Series).toHaveCount(2);
+        await expect(plot1Series.nth(0)).toHaveAttribute("name", "I");
+        await expect(plot1Series.nth(1)).toHaveAttribute("name", "R");
+        const plot2Series = await plotSummaries.nth(1).locator(".wodin-plot-data-summary-series");
+        await expect(plot2Series).toHaveCount(1);
+        await expect(plot2Series.nth(0)).toHaveAttribute("name", "S");
+    });
+
     test("can display help dialog", async ({ page }) => {
         await page.click("div.code-tab i.generic-help-icon");
         expect((await page.innerText(".draggable-dialog .dragtarget")).trim()).toBe("Write odin code");

From 1872477eee3ee62559b3a33546d867816b478747 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 13:39:40 +0100
Subject: [PATCH 13/80] lint and format

---
 app/static/jest.config.js                     |  2 +-
 .../src/app/components/code/CodeTab.vue       |  6 +-
 .../components/graphConfig/GraphConfig.vue    |  2 +-
 .../components/graphConfig/GraphConfigs.vue   | 67 +++++++++----------
 .../graphConfig/GraphConfigsCollapsible.vue   | 39 +++++------
 .../graphConfig/HiddenVariables.vue           |  8 +--
 .../src/app/components/graphConfig/utils.ts   |  4 +-
 .../app/components/mixins/selectVariables.ts  | 44 ++++++------
 .../src/app/components/options/OptionsTab.vue |  6 +-
 app/static/src/app/components/run/RunPlot.vue |  8 +--
 .../app/components/run/RunStochasticPlot.vue  |  8 +--
 app/static/src/app/components/run/RunTab.vue  | 18 +++--
 app/static/src/app/store/graphs/actions.ts    |  5 +-
 app/static/src/app/store/model/actions.ts     |  6 +-
 app/static/src/scss/style.scss                |  4 +-
 app/static/tests/color-shim.js                |  6 --
 app/static/tests/e2e/code.etest.ts            | 15 +++--
 .../graphConfig/graphConfig.test.ts           | 18 +++--
 .../graphConfig/graphConfigs.test.ts          | 19 +++---
 .../graphConfigsCollapsible.test.ts           | 13 ++--
 .../graphConfig/hiddenVariables.test.ts       | 34 +++++-----
 .../tests/unit/store/graphs/actions.test.ts   | 10 ++-
 .../tests/unit/store/graphs/getters.test.ts   |  6 +-
 .../tests/unit/store/graphs/mutations.test.ts |  4 +-
 24 files changed, 177 insertions(+), 175 deletions(-)
 delete mode 100644 app/static/tests/color-shim.js

diff --git a/app/static/jest.config.js b/app/static/jest.config.js
index e88f717a..e872026b 100644
--- a/app/static/jest.config.js
+++ b/app/static/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
     coveragePathIgnorePatterns: ["./tests/mocks.ts"],
     transformIgnorePatterns: ["node_modules/(?!(d3-format))"],
     moduleNameMapper: {
-        //"^color$": "<rootDir>/tests/color-shim.js",
+        // "^color$": "<rootDir>/tests/color-shim.js",
         "raw-loader!.*/help/(.*)$": "<rootDir>/src/app/help/$1"
     }
 };
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index cace4ba6..dccf09a6 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,13 +15,13 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-          <graph-configs-collapsible></graph-configs-collapsible>
+            <graph-configs-collapsible></graph-configs-collapsible>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
 // eslint-disable-next-line import/no-webpack-loader-syntax
@@ -36,7 +36,7 @@ import GraphConfigsCollapsible from "../graphConfig/GraphConfigsCollapsible.vue"
 export default defineComponent({
     name: "CodeTab",
     components: {
-      GraphConfigsCollapsible,
+        GraphConfigsCollapsible,
         GenericHelp,
 
         ErrorInfo,
diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 3959a3fa..70db5f67 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -12,7 +12,7 @@
                 >
                     <span class="variable-name">{{ variable }}</span>
                     <span class="variable-delete">
-                      <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
+                        <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
                     </span>
                 </span>
             </template>
diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
index 5e7f3164..b4978216 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigs.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -1,8 +1,7 @@
 <template>
-
     <div id="graph-configs-instruction" class="ms-2">
-      Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
-      new graph to move them to.
+        Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a new graph
+        to move them to.
     </div>
     <graph-config
         v-for="(_, index) in graphConfigs"
@@ -12,44 +11,42 @@
         @setDragging="setDraggingVariable"
     ></graph-config>
     <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
-      <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
-      Add Graph
+        <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
+        Add Graph
     </button>
-    <hidden-variables
-        @setDragging="setDraggingVariable"
-        :dragging="draggingVariable"
-    ></hidden-variables>
-
+    <hidden-variables @setDragging="setDraggingVariable" :dragging="draggingVariable"></hidden-variables>
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, ref} from "vue";
-import {useStore} from "vuex";
-import VueFeather from "vue-feather";;
+import { computed, defineComponent, ref } from "vue";
+import { useStore } from "vuex";
+import VueFeather from "vue-feather";
 import HiddenVariables from "./HiddenVariables.vue";
 import GraphConfig from "./GraphConfig.vue";
-import {GraphsAction} from "../../store/graphs/actions";
+import { GraphsAction } from "../../store/graphs/actions";
 
 export default defineComponent({
-  components: {
-    VueFeather,
-    GraphConfig,
-    HiddenVariables
-  },
-  setup() {
-    const store = useStore();
-    const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
-    const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);
-    const graphConfigs = computed(() => store.state.graphs.config);
-    const addGraph = () => {
-      store.dispatch(`graphs/${GraphsAction.NewGraph}`);
-    };
-    return {
-      draggingVariable,
-      setDraggingVariable,
-      graphConfigs,
-      addGraph
-    };
-  }
+    components: {
+        VueFeather,
+        GraphConfig,
+        HiddenVariables
+    },
+    setup() {
+        const store = useStore();
+        const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
+        const setDraggingVariable = (value: boolean) => {
+            draggingVariable.value = value;
+        };
+        const graphConfigs = computed(() => store.state.graphs.config);
+        const addGraph = () => {
+            store.dispatch(`graphs/${GraphsAction.NewGraph}`);
+        };
+        return {
+            draggingVariable,
+            setDraggingVariable,
+            graphConfigs,
+            addGraph
+        };
+    }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
index cbe9418d..3d8c1d81 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
@@ -1,27 +1,28 @@
 <template>
-  <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
-    <graph-configs></graph-configs>
-  </vertical-collapse>
+    <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
+        <graph-configs></graph-configs>
+    </vertical-collapse>
 </template>
 
 <script lang="ts">
 import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
 import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
-import {computed, defineComponent} from "vue";
-import {useStore} from "vuex";
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+
 export default defineComponent({
-  name: "GraphConfigsCollapsible",
-  components: {
-    GraphConfigs,
-    VerticalCollapse
-  },
-  setup(){
-    const store = useStore();
-    const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-    const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
-    return {
-      showGraphs
-    };
-  }
+    name: "GraphConfigsCollapsible",
+    components: {
+        GraphConfigs,
+        VerticalCollapse
+    },
+    setup() {
+        const store = useStore();
+        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
+        const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
+        return {
+            showGraphs
+        };
+    }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 186a7b6c..12282a6e 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -23,14 +23,12 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
-import VueFeather from "vue-feather";
 import { GraphsGetter } from "../../store/graphs/getters";
 import SelectVariables from "../mixins/selectVariables";
-import {fadeColor} from "./utils";
+import { fadeColor } from "./utils";
 
 export default defineComponent({
     name: "HiddenVariables",
-    components: { VueFeather },
     props: {
         dragging: {
             type: Boolean,
@@ -39,13 +37,13 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
-        const  { startDrag, endDrag, onDrop } = SelectVariables(store, emit, true);
+        const { startDrag, endDrag, onDrop } = SelectVariables(store, emit, true);
         const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
             const bgcolor = palette.value ? palette.value[variable] : "#eee";
-            return { "background-color": fadeColor(bgcolor)};
+            return { "background-color": fadeColor(bgcolor) };
         };
 
         return {
diff --git a/app/static/src/app/components/graphConfig/utils.ts b/app/static/src/app/components/graphConfig/utils.ts
index afa50149..dd407b79 100644
--- a/app/static/src/app/components/graphConfig/utils.ts
+++ b/app/static/src/app/components/graphConfig/utils.ts
@@ -1,5 +1,5 @@
 import * as Color from "color";
 
-export const fadeColor = (color: string) => {
+export const fadeColor = (color: string): string => {
     return Color(color).desaturate(0.6).fade(0.4).rgb().string();
-};
\ No newline at end of file
+};
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 652090e3..05616822 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -1,29 +1,29 @@
-import {AppState} from "../../store/appState/state";
-import {Store} from "vuex";
-import {GraphsAction} from "../../store/graphs/actions";
-import {computed} from "vue";
+import { Store } from "vuex";
+import { computed } from "vue";
+import { AppState } from "../../store/appState/state";
+import { GraphsAction } from "../../store/graphs/actions";
 
 export interface SelectVariablesMixin {
     startDrag: (evt: DragEvent, variable: string) => void;
-    endDrag: () => void,
-    onDrop: (evt: DragEvent) => void,
-    removeVariable: (srcGraphIdx: number, variable: string) => void
+    endDrag: () => void;
+    onDrop: (evt: DragEvent) => void;
+    removeVariable: (srcGraphIdx: number, variable: string) => void;
 }
 
 export default (
     store: Store<AppState>,
-    emit: (event: string, ...args: any[]) => void,
+    emit: (event: string, ...args: unknown[]) => void,
     hiddenVariables: boolean,
-    graphIndex?: number): SelectVariablesMixin  => {
-
+    graphIndex?: number
+): SelectVariablesMixin => {
     const thisSrcGraph = hiddenVariables ? "hidden" : graphIndex!.toString();
 
     const startDrag = (evt: DragEvent, variable: string) => {
         const { dataTransfer } = evt;
-        dataTransfer!!.dropEffect = "move";
-        dataTransfer!!.effectAllowed = "move";
-        dataTransfer!!.setData("variable", variable);
-        dataTransfer!!.setData("srcGraph", thisSrcGraph);
+        dataTransfer!.dropEffect = "move";
+        dataTransfer!.effectAllowed = "move";
+        dataTransfer!.setData("variable", variable);
+        dataTransfer!.setData("srcGraph", thisSrcGraph);
 
         emit("setDragging", true);
     };
@@ -32,9 +32,9 @@ export default (
         emit("setDragging", false);
     };
 
-    const updateSelectedVariables = (graphIndex: number, newVariables: string[]) => {
+    const updateSelectedVariables = (graphIdx: number, newVariables: string[]) => {
         store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-            graphIndex,
+            graphIdx,
             selectedVariables: newVariables
         });
     };
@@ -47,18 +47,18 @@ export default (
         updateSelectedVariables(srcGraphIdx, srcVariables);
     };
 
-    const selectedVariables = computed<string[]>(
-        () => hiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
+    const selectedVariables = computed<string[]>(() =>
+        hiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
     );
 
     const onDrop = (evt: DragEvent) => {
         const { dataTransfer } = evt;
-        const variable = dataTransfer!!.getData("variable");
-        const srcGraph = dataTransfer!!.getData("srcGraph");
+        const variable = dataTransfer!.getData("variable");
+        const srcGraph = dataTransfer!.getData("srcGraph");
         if (srcGraph !== thisSrcGraph) {
             // remove from source graph
             if (srcGraph !== "hidden") {
-                removeVariable(parseInt(srcGraph), variable);
+                removeVariable(parseInt(srcGraph, 10), variable);
             }
             // add to this graph if necessary
             if (!hiddenVariables && !selectedVariables.value.includes(variable)) {
@@ -74,4 +74,4 @@ export default (
         endDrag,
         onDrop
     };
-}
\ No newline at end of file
+};
diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index 745f5143..61bee5ae 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -37,6 +37,7 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
+import GraphConfigsCollapsible from "@/app/components/graphConfig/GraphConfigsCollapsible.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import ParameterValues from "./ParameterValues.vue";
 import RunOptions from "./RunOptions.vue";
@@ -47,14 +48,11 @@ import { AppType, VisualisationTab } from "../../store/appState/state";
 import GraphSettings from "./GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
-import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
-import GraphConfigsCollapsible from "@/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 export default defineComponent({
     name: "OptionsTab",
     components: {
-      GraphConfigsCollapsible,
-      GraphConfigs,
+        GraphConfigsCollapsible,
         ParameterSets,
         LinkData,
         OptimisationOptions,
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 696aee44..47574be4 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -27,10 +27,10 @@ export default defineComponent({
     name: "RunPlot",
     props: {
         fadePlot: Boolean,
-      graphIndex: {
-        type: Number,
-        default: 0
-      }
+        graphIndex: {
+            type: Number,
+            default: 0
+        }
     },
     components: {
         WodinPlot
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index cf2313a1..bf293c23 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -22,10 +22,10 @@ export default defineComponent({
     name: "RunStochasticPlot",
     props: {
         fadePlot: Boolean,
-      graphIndex: {
-        type: Number,
-        default: 0
-      }
+        graphIndex: {
+            type: Number,
+            default: 0
+        }
     },
     components: {
         WodinPlot
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index c4929dfd..4a4c3cd9 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -5,12 +5,16 @@
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
         <template v-for="(_, index) in graphConfigs" :key="index">
-          <run-stochastic-plot v-if="isStochastic" :fade-plot="!!updateMsg" :graph-index="index"></run-stochastic-plot>
-          <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false" :graph-index="index">
-              <div v-if="sumOfSquares">
-                  <span>Sum of squares: {{ sumOfSquares }}</span>
-              </div>
-          </run-plot>
+            <run-stochastic-plot
+                v-if="isStochastic"
+                :fade-plot="!!updateMsg"
+                :graph-index="index"
+            ></run-stochastic-plot>
+            <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false" :graph-index="index">
+                <div v-if="sumOfSquares">
+                    <span>Sum of squares: {{ sumOfSquares }}</span>
+                </div>
+            </run-plot>
         </template>
         <error-info :error="error"></error-info>
         <div>
@@ -136,7 +140,7 @@ export default defineComponent({
             downloadUserFileName,
             toggleShowDownloadOutput,
             download,
-          graphConfigs
+            graphConfigs
         };
     }
 });
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index df552a7d..ce2a1501 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -20,8 +20,9 @@ export const actions: ActionTree<GraphsState, AppState> = {
                 (s) => !payload.selectedVariables.includes(s)
             ) || [];
         // sort the selected variables to match the order in the model
-        const selectedVariables = payload.selectedVariables
-            .sort((a, b) => allVariables.indexOf(a) > allVariables.indexOf(b) ? 1 : -1);
+        const selectedVariables = payload.selectedVariables.sort((a, b) =>
+            allVariables.indexOf(a) > allVariables.indexOf(b) ? 1 : -1
+        );
 
         commit(GraphsMutation.SetSelectedVariables, { ...payload, selectedVariables, unselectedVariables });
         if (rootState.appType === AppType.Fit) {
diff --git a/app/static/src/app/store/model/actions.ts b/app/static/src/app/store/model/actions.ts
index b2d45dd9..d1418d6a 100644
--- a/app/static/src/app/store/model/actions.ts
+++ b/app/static/src/app/store/model/actions.ts
@@ -70,7 +70,11 @@ const compileModelAndUpdateStore = (context: ActionContext<ModelState, AppState>
 
         // Retain variable selections. Newly added variables will be selected by default in the first graph
         const selectedVariables = variables.filter((s) => !rootState.graphs.config[0].unselectedVariables.includes(s));
-        dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, { graphIndex: 0, selectedVariables }, { root: true });
+        dispatch(
+            `graphs/${GraphsAction.UpdateSelectedVariables}`,
+            { graphIndex: 0, selectedVariables },
+            { root: true }
+        );
 
         if (state.compileRequired) {
             commit(ModelMutation.SetCompileRequired, false);
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index 7fe36a78..5586575e 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -134,7 +134,7 @@ $grey: #ccc;
 
 .drop-zone-instruction {
     height: 3rem;
-    background-color: #eee
+    background-color: #eee;
 }
 
 .variable {
@@ -155,4 +155,4 @@ $grey: #ccc;
         color: white;
         padding: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/app/static/tests/color-shim.js b/app/static/tests/color-shim.js
deleted file mode 100644
index f6438b98..00000000
--- a/app/static/tests/color-shim.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const Color = require("color/index.js");
-const color2 = Color.default;
-//module.exports = color2;
-console.log("Color from shim")
-console.log(typeof Color)
-module.exports = Color;
\ No newline at end of file
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index a0e06565..36c79559 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -1,7 +1,7 @@
 import { expect, test, Page } from "@playwright/test";
+import { plot } from "plotly.js-basic-dist-min";
 import PlaywrightConfig from "../../playwright.config";
 import { saveSessionTimeout, writeCode } from "./utils";
-import {plot} from "plotly.js-basic-dist-min";
 
 export const newValidCode = `## Derivatives
 deriv(y1) <- sigma * (y2 - y1)
@@ -84,8 +84,8 @@ test.describe("Code Tab tests", () => {
     const { timeout } = PlaywrightConfig;
 
     const getRunPlotOpacity = async (page: Page) => {
-        const plot = await page.locator(".wodin-plot-container");
-        return plot.evaluate((el) => window.getComputedStyle(el).getPropertyValue("opacity"));
+        const plotEl = await page.locator(".wodin-plot-container");
+        return plotEl.evaluate((el) => window.getComputedStyle(el).getPropertyValue("opacity"));
     };
 
     test("can update code, compile and run model", async ({ page }) => {
@@ -329,10 +329,13 @@ test.describe("Code Tab tests", () => {
         await page.click("#add-graph-btn");
 
         // Check second graph has appeared with placeholder text, and second graph config panel is there
-        expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe("No variables are selected.");
+        expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe(
+            "No variables are selected."
+        );
         expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toBe("Graph 2");
-        expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent())
-            .toContain("Drag variables here to select them for this graph.");
+        expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent()).toContain(
+            "Drag variables here to select them for this graph."
+        );
 
         // Drag variable to second graph
         const sVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index 6fefe4a9..a4f92200 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -107,7 +107,10 @@ describe("GraphConfig", () => {
         await dropPanel.trigger("drop", { dataTransfer });
         expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
         expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
-        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["S", "R", "I"] });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
     });
 
     it("onDrop does not attempt to remove variable if source was hidden variables", async () => {
@@ -122,7 +125,10 @@ describe("GraphConfig", () => {
         const dropPanel = wrapper.find(".graph-config-panel");
         await dropPanel.trigger("drop", { dataTransfer });
         expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["S", "R", "I"] });
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
     });
 
     it("clicking remove button removes variable from graph", async () => {
@@ -134,12 +140,14 @@ describe("GraphConfig", () => {
     });
 
     it("shows drop zone when dragging", () => {
-        const wrapper = getWrapper({dragging: true});
+        const wrapper = getWrapper({ dragging: true });
         expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
     });
 
-    it("shows instruction if no selected variables", () =>{
+    it("shows instruction if no selected variables", () => {
         const wrapper = getWrapper({}, []);
-        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to select them for this graph.");
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe(
+            "Drag variables here to select them for this graph."
+        );
     });
 });
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
index 017ab14a..6803ef7e 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
@@ -1,12 +1,12 @@
 import Vuex from "vuex";
-import {BasicState} from "../../../../src/app/store/basic/state";
-import {mockBasicState} from "../../../mocks";
-import {GraphsAction} from "../../../../src/app/store/graphs/actions";
-import {shallowMount} from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { mockBasicState } from "../../../mocks";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
 import GraphConfigs from "../../../../src/app/components/graphConfig/GraphConfigs.vue";
 import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
 import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
-import {nextTick} from "vue";
 
 describe("GraphConfigs", () => {
     beforeEach(() => {
@@ -44,11 +44,13 @@ describe("GraphConfigs", () => {
 
     it("renders as expected", () => {
         const wrapper = getWrapper();
-        expect(wrapper.find("#graph-configs-instruction").text()).toContain("Drag variables to 'Hidden variables' to remove");
+        expect(wrapper.find("#graph-configs-instruction").text()).toContain(
+            "Drag variables to 'Hidden variables' to remove"
+        );
         const graphConfigComps = wrapper.findAllComponents(GraphConfig);
         expect(graphConfigComps.length).toBe(2);
         expect(graphConfigComps.at(0)!.props("graphIndex")).toBe(0);
-        expect(graphConfigComps.at(0)!.props("dragging")).toBe(false)
+        expect(graphConfigComps.at(0)!.props("dragging")).toBe(false);
         expect(graphConfigComps.at(1)!.props("graphIndex")).toBe(1);
         expect(graphConfigComps.at(1)!.props("dragging")).toBe(false);
         expect(wrapper.find("button").text()).toBe("Add Graph");
@@ -79,5 +81,4 @@ describe("GraphConfigs", () => {
         await wrapper.find("button").trigger("click");
         expect(mockNewGraph).toHaveBeenCalledTimes(1);
     });
-
-});
\ No newline at end of file
+});
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
index 214adeef..daaca313 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
@@ -1,8 +1,8 @@
-import {ModelState} from "../../../../src/app/store/model/state";
 import Vuex from "vuex";
-import {BasicState} from "../../../../src/app/store/basic/state";
-import {mockBasicState, mockCodeState, mockModelState} from "../../../mocks";
-import {shallowMount} from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
+import { ModelState } from "../../../../src/app/store/model/state";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { mockBasicState, mockCodeState, mockModelState } from "../../../mocks";
 import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
 import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
 
@@ -25,7 +25,7 @@ describe("GraphConfigsCollapsible", () => {
             modules: {
                 model: {
                     namespaced: true,
-                    state: mockModelState({...defaultModelState, ...modelState})
+                    state: mockModelState({ ...defaultModelState, ...modelState })
                 }
             }
         });
@@ -60,5 +60,4 @@ describe("GraphConfigsCollapsible", () => {
         });
         expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
     });
-
-});
\ No newline at end of file
+});
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
index e65dc7cb..e548f6cb 100644
--- a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -1,24 +1,26 @@
 // Mock the fadeColor util which uses color package, which doesn't play nicely with jest
-function mockfun() { return "Hello"; };
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
+import { GraphsGetter } from "../../../../src/app/store/graphs/getters";
+
+function mockfun() {
+    return "Hello";
+}
 jest.mock("../../../../src/app/components/graphConfig/utils", () => {
     return {
         fadeColor: (input: string) => {
-            console.log(`calling fade w ${input}`)
+            console.log(`calling fade w ${input}`);
             const match = input.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
-            const result =  `rgba(${match![1]}, ${match![2]}, ${match![3]}, 0.5)`;
+            const result = `rgba(${match![1]}, ${match![2]}, ${match![3]}, 0.5)`;
             console.log(result);
             return result;
         }
-    }
+    };
 });
 
-import Vuex from "vuex";
-import {BasicState} from "../../../../src/app/store/basic/state";
-import {GraphsAction} from "../../../../src/app/store/graphs/actions";
-import {shallowMount} from "@vue/test-utils";
-import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
-import {GraphsGetter} from "../../../../src/app/store/graphs/getters";
-
 describe("HiddenVariables", () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -70,7 +72,6 @@ describe("HiddenVariables", () => {
         });
     };
 
-
     it("renders as expected", () => {
         const wrapper = getWrapper();
         expect(wrapper.find("h5").text()).toBe("Hidden variables");
@@ -83,7 +84,6 @@ describe("HiddenVariables", () => {
         expect((variables.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgba(0, 0, 255, 0.5)");
     });
 
-
     it("starting drag sets values in event and emits setDragging", async () => {
         const wrapper = getWrapper();
         const s = wrapper.findAll(".hidden-variables-panel .variable").at(0)!;
@@ -103,7 +103,6 @@ describe("HiddenVariables", () => {
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
     });
 
-
     it("onDrop removes variable from source", async () => {
         const wrapper = getWrapper();
         const dataTransfer = {
@@ -119,15 +118,14 @@ describe("HiddenVariables", () => {
         expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["J"] });
     });
 
-
     it("shows drop zone when dragging", async () => {
         const wrapper = getWrapper();
-        await wrapper.setProps({dragging: true});
+        await wrapper.setProps({ dragging: true });
         expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
     });
 
-    it("shows instruction if no hidden variables", () =>{
+    it("shows instruction if no hidden variables", () => {
         const wrapper = getWrapper([]);
         expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to hide them on all graphs.");
     });
-});
\ No newline at end of file
+});
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index 6ac9a0d3..073397e9 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -78,12 +78,10 @@ describe("Graphs actions", () => {
     it("NewGraph adds empty graph", () => {
         const commit = jest.fn();
 
-        (actions[GraphsAction.NewGraph] as any)(
-            {
-                commit,
-                rootState
-            }
-        );
+        (actions[GraphsAction.NewGraph] as any)({
+            commit,
+            rootState
+        });
         expect(commit).toHaveBeenCalledTimes(1);
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.AddGraph);
         expect(commit.mock.calls[0][1]).toStrictEqual({
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
index d77e61b1..feefc629 100644
--- a/app/static/tests/unit/store/graphs/getters.test.ts
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -1,5 +1,5 @@
-import {mockGraphsState} from "../../../mocks";
-import {getters, GraphsGetter} from "../../../../src/app/store/graphs/getters";
+import { mockGraphsState } from "../../../mocks";
+import { getters, GraphsGetter } from "../../../../src/app/store/graphs/getters";
 
 describe("GraphsGetters", () => {
     it("gets allSelectedVariables", () => {
@@ -27,4 +27,4 @@ describe("GraphsGetters", () => {
         } as any;
         expect((getters[GraphsGetter.hiddenVariables] as any)({}, testGetters, rootState)).toStrictEqual(["e", "c"]);
     });
-});
\ No newline at end of file
+});
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index 66aa1ea9..a65ba15c 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -44,9 +44,7 @@ describe("Graphs mutations", () => {
 
     it("AddGraph pushed new graph to config", () => {
         const testState = mockGraphsState({
-            config: [
-                { selectedVariables: ["a"], unselectedVariables: ["b", "c"] }
-            ]
+            config: [{ selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
         });
         mutations.AddGraph(testState, { selectedVariables: [], unselectedVariables: ["b", "a", "c"] });
         expect(testState.config).toStrictEqual([

From 6d58e14926cc1bbde0cb55f086c4417c60bbbf6c Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 13:48:57 +0100
Subject: [PATCH 14/80] fix test

---
 app/static/src/app/components/mixins/selectVariables.ts    | 2 +-
 .../unit/components/graphConfig/hiddenVariables.test.ts    | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 05616822..9bc033eb 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -34,7 +34,7 @@ export default (
 
     const updateSelectedVariables = (graphIdx: number, newVariables: string[]) => {
         store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-            graphIdx,
+            graphIndex: graphIdx,
             selectedVariables: newVariables
         });
     };
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
index e548f6cb..2f141c69 100644
--- a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -1,4 +1,3 @@
-// Mock the fadeColor util which uses color package, which doesn't play nicely with jest
 import Vuex from "vuex";
 import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
@@ -6,16 +5,12 @@ import { GraphsAction } from "../../../../src/app/store/graphs/actions";
 import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
 import { GraphsGetter } from "../../../../src/app/store/graphs/getters";
 
-function mockfun() {
-    return "Hello";
-}
+// Mock the fadeColor util which uses color package, which doesn't play nicely with jest
 jest.mock("../../../../src/app/components/graphConfig/utils", () => {
     return {
         fadeColor: (input: string) => {
-            console.log(`calling fade w ${input}`);
             const match = input.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
             const result = `rgba(${match![1]}, ${match![2]}, ${match![3]}, 0.5)`;
-            console.log(result);
             return result;
         }
     };

From 665b90b59cf65e6c3c93861ed7b085fb220d8e2b Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 14:19:53 +0100
Subject: [PATCH 15/80] add util to browser test and add delete button test

---
 app/static/tests/e2e/code.etest.ts | 61 +++++++++++-------------------
 1 file changed, 23 insertions(+), 38 deletions(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 36c79559..369747c2 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -293,6 +293,20 @@ test.describe("Code Tab tests", () => {
         );
     });
 
+    const expectGraphVariables = async (page: Page, graphIndex: number, expectedVariables: string[]) => {
+        // expect to find these variables in config panel and on plot series
+        const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex+1})`);
+        const configVars = await configPanel.locator(".variable .variable-name");
+        await expect(configVars).toHaveCount(expectedVariables.length);
+
+        const plotSummary = await page.locator(`:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex+1})`);
+        for(let i = 0; i < expectedVariables.length; i++) {
+            await expect(configVars.nth(i)).toHaveText(expectedVariables[i]);
+            await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i+1})`))
+                .toHaveAttribute("name", expectedVariables[i]);
+        }
+    };
+
     test("can hide and unhide variables", async ({ page }) => {
         // drag I to Hidden Variables
         const iVariable = await page.locator(":nth-match(.graph-config-panel span.variable, 2)");
@@ -300,28 +314,17 @@ test.describe("Code Tab tests", () => {
         await iVariable.dragTo(hiddenVariables);
 
         // check plot no longer contains R series
-        await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(2);
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
-            "S"
-        );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 2)").getAttribute("name")).toBe(
-            "R"
-        );
+        await expectGraphVariables(page, 0, ["S", "R"]);
 
         // drag I back to Graph panel
         const iVariableHidden = await page.locator(".hidden-variables-panel .variable");
         const graphVariablesPanel = await page.locator(".graph-config-panel .drop-zone");
         await iVariableHidden.dragTo(graphVariablesPanel);
-        await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(3);
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
-            "S"
-        );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 2)").getAttribute("name")).toBe(
-            "I"
-        );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 3)").getAttribute("name")).toBe(
-            "R"
-        );
+        await expectGraphVariables(page, 0, ["S", "I", "R"]);
+
+        // Can also click x button to hide variable
+        await page.click(":nth-match(.graph-config-panel .variable-delete, 1)");
+        await expectGraphVariables(page, 0, ["I", "R"]);
     });
 
     test("can add a graph, and drag variable onto it", async ({ page }) => {
@@ -341,27 +344,9 @@ test.describe("Code Tab tests", () => {
         const sVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
         await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
 
-        // Check correct variables on first and second config panels, none in Hidden
-        const configPanel1 = await page.locator(":nth-match(.graph-config-panel, 1)");
-        const panel1Vars = await configPanel1.locator(".variable .variable-name");
-        await expect(panel1Vars).toHaveCount(2);
-        await expect(panel1Vars.nth(0)).toHaveText("I");
-        await expect(panel1Vars.nth(1)).toHaveText("R");
-        const configPanel2 = await page.locator(":nth-match(.graph-config-panel, 2)");
-        const panel2Vars = await configPanel2.locator(".variable .variable-name");
-        await expect(panel2Vars).toHaveCount(1);
-        await expect(panel2Vars.nth(0)).toHaveText("S");
-
-        // Check correct variables on first and second graphs
-        const plotSummaries = await page.locator(".wodin-plot-container .wodin-plot-data-summary");
-        await expect(plotSummaries).toHaveCount(2);
-        const plot1Series = await plotSummaries.nth(0).locator(".wodin-plot-data-summary-series");
-        await expect(plot1Series).toHaveCount(2);
-        await expect(plot1Series.nth(0)).toHaveAttribute("name", "I");
-        await expect(plot1Series.nth(1)).toHaveAttribute("name", "R");
-        const plot2Series = await plotSummaries.nth(1).locator(".wodin-plot-data-summary-series");
-        await expect(plot2Series).toHaveCount(1);
-        await expect(plot2Series.nth(0)).toHaveAttribute("name", "S");
+        await expectGraphVariables(page, 0, ["I", "R"]);
+        await expectGraphVariables(page, 1, ["S"]);
+        await expect(page.locator(".hiden-variables-panel .variable")).toHaveCount(0);
     });
 
     test("can display help dialog", async ({ page }) => {

From 632fe5eb7eff58b68e3ae0358d33eebcfe46b56d Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 14:21:39 +0100
Subject: [PATCH 16/80] format

---
 app/static/tests/e2e/code.etest.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 369747c2..f75e2c1c 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -295,15 +295,19 @@ test.describe("Code Tab tests", () => {
 
     const expectGraphVariables = async (page: Page, graphIndex: number, expectedVariables: string[]) => {
         // expect to find these variables in config panel and on plot series
-        const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex+1})`);
+        const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex + 1})`);
         const configVars = await configPanel.locator(".variable .variable-name");
         await expect(configVars).toHaveCount(expectedVariables.length);
 
-        const plotSummary = await page.locator(`:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex+1})`);
-        for(let i = 0; i < expectedVariables.length; i++) {
+        const plotSummary = await page.locator(
+            `:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex + 1})`
+        );
+        for (let i = 0; i < expectedVariables.length; i++) {
             await expect(configVars.nth(i)).toHaveText(expectedVariables[i]);
-            await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i+1})`))
-                .toHaveAttribute("name", expectedVariables[i]);
+            await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i + 1})`)).toHaveAttribute(
+                "name",
+                expectedVariables[i]
+            );
         }
     };
 

From 3ce85fa76954261cc7e55140f65ee159ea2e36d3 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 14:46:11 +0100
Subject: [PATCH 17/80] remove unused change

---
 app/static/jest.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/static/jest.config.js b/app/static/jest.config.js
index e872026b..46df619b 100644
--- a/app/static/jest.config.js
+++ b/app/static/jest.config.js
@@ -9,7 +9,6 @@ module.exports = {
     coveragePathIgnorePatterns: ["./tests/mocks.ts"],
     transformIgnorePatterns: ["node_modules/(?!(d3-format))"],
     moduleNameMapper: {
-        // "^color$": "<rootDir>/tests/color-shim.js",
         "raw-loader!.*/help/(.*)$": "<rootDir>/src/app/help/$1"
     }
 };

From f49637b4c4b6938be5937d903fa956b91bcfee80 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 15:58:36 +0100
Subject: [PATCH 18/80] delete graph

---
 .../components/graphConfig/GraphConfig.vue    | 30 +++++++++++++++++--
 app/static/src/app/store/graphs/mutations.ts  |  5 ++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 70db5f67..51a9f746 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -1,6 +1,20 @@
 <template>
     <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
-        <h5>Graph {{ graphIndex + 1 }}</h5>
+        <h5>
+          Graph {{ graphIndex + 1 }}
+          <button
+              type="button"
+              class="btn btn-light mx-2"
+              v-if="canDelete"
+              @click="deleteGraph"
+              v-tooltip="'Delete Graph'"
+          >
+            <vue-feather
+                class="inline-icon clickable ms-2"
+                type="trash-2"
+            ></vue-feather>
+          </button>
+        </h5>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
                 <span
@@ -24,12 +38,17 @@
 </template>
 
 <script lang="ts">
+import VueFeather from "vue-feather";
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import SelectVariables from "../mixins/selectVariables";
+import {GraphsMutation} from "../../store/graphs/mutations";
 
 export default defineComponent({
     name: "GraphConfig",
+    components: {
+      VueFeather
+    },
     props: {
         dragging: {
             type: Boolean,
@@ -46,6 +65,7 @@ export default defineComponent({
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
         );
+        const canDelete = computed(() => store.state.graphs.config.length > 1);
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
@@ -56,13 +76,19 @@ export default defineComponent({
             return { "background-color": bgcolor };
         };
 
+        const deleteGraph = () => {
+           store.commit(`graphs/${GraphsMutation.DeleteGraph}`, props.graphIndex);
+        };
+
         return {
             selectedVariables,
+            canDelete,
             removeVariable,
             getStyle,
             startDrag,
             endDrag,
-            onDrop
+            onDrop,
+            deleteGraph
         };
     }
 });
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index 859346e5..a634223c 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -6,6 +6,7 @@ export enum GraphsMutation {
     SetLockYAxis = "SetLockYAxis",
     SetYAxisRange = "SetYAxisRange",
     AddGraph = "AddGraph",
+    DeleteGraph = "DeleteGraph",
     SetSelectedVariables = "SetSelectedVariables"
 }
 
@@ -36,5 +37,9 @@ export const mutations: MutationTree<GraphsState> = {
 
     [GraphsMutation.AddGraph](state: GraphsState, payload: GraphConfig) {
         state.config.push(payload);
+    },
+
+    [GraphsMutation.DeleteGraph](state: GraphsState, payload: number) {
+        state.config.splice(payload, 1);
     }
 };

From ecd56a71f18ff98d11179e051114627acb1f1811 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 16:51:03 +0100
Subject: [PATCH 19/80] unit tests

---
 .../components/graphConfig/GraphConfig.vue    |  2 +-
 .../graphConfig/graphConfig.test.ts           | 55 +++++++++++++++----
 .../tests/unit/store/graphs/mutations.test.ts | 17 +++++-
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 51a9f746..25d106e4 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -4,7 +4,7 @@
           Graph {{ graphIndex + 1 }}
           <button
               type="button"
-              class="btn btn-light mx-2"
+              class="btn btn-light mx-2 delete-graph"
               v-if="canDelete"
               @click="deleteGraph"
               v-tooltip="'Delete Graph'"
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index a4f92200..9360f1e6 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -3,29 +3,39 @@ import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
 import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import {GraphsState} from "../../../../src/app/store/graphs/state";
+import {GraphsMutation} from "../../../../src/app/store/graphs/mutations";
 
 describe("GraphConfig", () => {
     const mockUpdateSelectedVariables = jest.fn();
+    const mockDeleteGraph = jest.fn();
     const mockTooltipDirective = jest.fn();
+    const defaultGraphState = {
+        config: [
+            {
+                selectedVariables: ["S", "R"]
+            },
+            {
+                selectedVariables: ["I", "J"]
+            }
+        ]
+    } as any;
 
-    const getWrapper = (props = {}, selectedVariables: null | string[] = null) => {
+    const getWrapper = (props = {}, graphState: Partial<GraphsState> = {}) => {
         const store = new Vuex.Store<BasicState>({
             state: {} as any,
             modules: {
                 graphs: {
                     namespaced: true,
                     state: {
-                        config: [
-                            {
-                                selectedVariables: selectedVariables || ["S", "R"]
-                            },
-                            {
-                                selectedVariables: ["I", "J"]
-                            }
-                        ]
+                        ...defaultGraphState,
+                        ...graphState
                     },
                     actions: {
                         [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    },
+                    mutations: {
+                        [GraphsMutation.DeleteGraph]: mockDeleteGraph
                     }
                 },
                 model: {
@@ -63,6 +73,7 @@ describe("GraphConfig", () => {
         const varBadges = wrapper.findAll(".graph-config-panel .badge");
         const varNames = wrapper.findAll(".graph-config-panel span.variable-name");
         expect(wrapper.find("h5").text()).toBe("Graph 1");
+        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(true);
         expect(varBadges.length).toBe(2);
         expect(varNames.length).toBe(2);
         expect(varNames.at(0)!.text()).toBe("S");
@@ -145,9 +156,33 @@ describe("GraphConfig", () => {
     });
 
     it("shows instruction if no selected variables", () => {
-        const wrapper = getWrapper({}, []);
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: []
+                }
+            ]
+        } as any);
         expect(wrapper.find(".drop-zone-instruction").text()).toBe(
             "Drag variables here to select them for this graph."
         );
     });
+
+    it("does not render delete button if there is only one graph", () => {
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: ["S", "R"]
+                }
+            ]
+        } as any);
+        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(false);
+    });
+
+    it("delete button commits mutation", async () => {
+        const wrapper = getWrapper();
+        await wrapper.find("button.delete-graph").trigger("click");
+        expect(mockDeleteGraph).toHaveBeenCalledTimes(1);
+        expect(mockDeleteGraph.mock.calls[0][1]).toBe(0);
+    });
 });
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index a65ba15c..3dea91a2 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -42,7 +42,7 @@ describe("Graphs mutations", () => {
         expect(testState.config[0]).toStrictEqual({ selectedVariables: [], unselectedVariables: [] });
     });
 
-    it("AddGraph pushed new graph to config", () => {
+    it("AddGraph pushes new graph to config", () => {
         const testState = mockGraphsState({
             config: [{ selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
         });
@@ -52,4 +52,19 @@ describe("Graphs mutations", () => {
             { selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
         ]);
     });
+
+    it("DeleteGraph removes graph from config", () => {
+        const testState = mockGraphsState({
+            config: [
+                { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+                { selectedVariables: ["b"], unselectedVariables: ["a", "c"] },
+                { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+            ]
+        });
+        mutations.DeleteGraph(testState, 1);
+        expect(testState.config).toStrictEqual([
+            { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+            { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+        ]);
+    });
 });

From d005e6fd87be755c85bf2cfe914ce3c0727655ca Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 16:56:15 +0100
Subject: [PATCH 20/80] add browser test

---
 app/static/tests/e2e/code.etest.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index f75e2c1c..8053acda 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -331,7 +331,7 @@ test.describe("Code Tab tests", () => {
         await expectGraphVariables(page, 0, ["I", "R"]);
     });
 
-    test("can add a graph, and drag variable onto it", async ({ page }) => {
+    test("can add a graph, drag a variable onto it and delete it", async ({ page }) => {
         // Add graph
         await page.click("#add-graph-btn");
 
@@ -350,7 +350,15 @@ test.describe("Code Tab tests", () => {
 
         await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S"]);
-        await expect(page.locator(".hiden-variables-panel .variable")).toHaveCount(0);
+        await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
+
+        // Delete second graph
+        await page.click(":nth-match(.graph-config-panel .delete-graph, 2)")
+        await expect(page.locator(".graph-config-panel")).toHaveCount(1);
+        await expect(page.locator(".graph-config-panel h5")).toHaveText("Graph 1");
+
+        // First graph should not be deletable
+        await expect(page.locator(".delete-graph")).toHaveCount(0);
     });
 
     test("can display help dialog", async ({ page }) => {

From 97f0fdf120990f348cc02490b062354355296d7a Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 16:57:18 +0100
Subject: [PATCH 21/80] fix typo

---
 app/static/tests/e2e/code.etest.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index f75e2c1c..e28d690e 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -350,7 +350,7 @@ test.describe("Code Tab tests", () => {
 
         await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S"]);
-        await expect(page.locator(".hiden-variables-panel .variable")).toHaveCount(0);
+        await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
     });
 
     test("can display help dialog", async ({ page }) => {

From 217b3fbf80750fca2aa4417d850c534e3a862b02 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 17:06:07 +0100
Subject: [PATCH 22/80] lint

---
 .../components/graphConfig/GraphConfig.vue    | 29 +++++++++----------
 app/static/tests/e2e/code.etest.ts            |  5 ++--
 .../graphConfig/graphConfig.test.ts           |  4 +--
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 25d106e4..6d004795 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -1,19 +1,16 @@
 <template>
     <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
         <h5>
-          Graph {{ graphIndex + 1 }}
-          <button
-              type="button"
-              class="btn btn-light mx-2 delete-graph"
-              v-if="canDelete"
-              @click="deleteGraph"
-              v-tooltip="'Delete Graph'"
-          >
-            <vue-feather
-                class="inline-icon clickable ms-2"
-                type="trash-2"
-            ></vue-feather>
-          </button>
+            Graph {{ graphIndex + 1 }}
+            <button
+                type="button"
+                class="btn btn-light mx-2 delete-graph"
+                v-if="canDelete"
+                @click="deleteGraph"
+                v-tooltip="'Delete Graph'"
+            >
+                <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
+            </button>
         </h5>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
@@ -42,12 +39,12 @@ import VueFeather from "vue-feather";
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import SelectVariables from "../mixins/selectVariables";
-import {GraphsMutation} from "../../store/graphs/mutations";
+import { GraphsMutation } from "../../store/graphs/mutations";
 
 export default defineComponent({
     name: "GraphConfig",
     components: {
-      VueFeather
+        VueFeather
     },
     props: {
         dragging: {
@@ -77,7 +74,7 @@ export default defineComponent({
         };
 
         const deleteGraph = () => {
-           store.commit(`graphs/${GraphsMutation.DeleteGraph}`, props.graphIndex);
+            store.commit(`graphs/${GraphsMutation.DeleteGraph}`, props.graphIndex);
         };
 
         return {
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 8053acda..aeff8784 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -339,7 +339,7 @@ test.describe("Code Tab tests", () => {
         expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe(
             "No variables are selected."
         );
-        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toBe("Graph 2");
+        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toContain("Graph 2");
         expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent()).toContain(
             "Drag variables here to select them for this graph."
         );
@@ -353,9 +353,10 @@ test.describe("Code Tab tests", () => {
         await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
 
         // Delete second graph
-        await page.click(":nth-match(.graph-config-panel .delete-graph, 2)")
+        await page.click(":nth-match(.graph-config-panel .delete-graph, 2)");
         await expect(page.locator(".graph-config-panel")).toHaveCount(1);
         await expect(page.locator(".graph-config-panel h5")).toHaveText("Graph 1");
+        await expectGraphVariables(page, 0, ["I", "R"]);
 
         // First graph should not be deletable
         await expect(page.locator(".delete-graph")).toHaveCount(0);
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index 9360f1e6..74118a2b 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -3,8 +3,8 @@ import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
 import { GraphsAction } from "../../../../src/app/store/graphs/actions";
-import {GraphsState} from "../../../../src/app/store/graphs/state";
-import {GraphsMutation} from "../../../../src/app/store/graphs/mutations";
+import { GraphsState } from "../../../../src/app/store/graphs/state";
+import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 
 describe("GraphConfig", () => {
     const mockUpdateSelectedVariables = jest.fn();

From cd1acd70d3b3ea52a25fcd62cd833031d6855989 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 2 Jul 2024 11:21:04 +0100
Subject: [PATCH 23/80] updates for PR comments

---
 .../graphConfig/GraphConfigsCollapsible.vue   |  2 +-
 .../app/components/mixins/selectVariables.ts  | 24 ++++++++-----------
 app/static/src/app/store/graphs/actions.ts    |  5 +---
 app/static/src/app/store/graphs/getters.ts    |  9 +++++--
 .../graphConfig/graphConfig.test.ts           |  6 ++---
 .../graphConfig/hiddenVariables.test.ts       |  4 ++--
 6 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
index 3d8c1d81..b70e17d8 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
@@ -19,7 +19,7 @@ export default defineComponent({
     setup() {
         const store = useStore();
         const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
+        const showGraphs = computed(() => allVariables.value.length > 0 && !store.state.model.compileRequired);
         return {
             showGraphs
         };
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 9bc033eb..ade2ef79 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -13,17 +13,17 @@ export interface SelectVariablesMixin {
 export default (
     store: Store<AppState>,
     emit: (event: string, ...args: unknown[]) => void,
-    hiddenVariables: boolean,
+    hasHiddenVariables: boolean,
     graphIndex?: number
 ): SelectVariablesMixin => {
-    const thisSrcGraph = hiddenVariables ? "hidden" : graphIndex!.toString();
+    const thisSrcGraphConfig = hasHiddenVariables ? "hidden" : graphIndex!.toString();
 
     const startDrag = (evt: DragEvent, variable: string) => {
         const { dataTransfer } = evt;
         dataTransfer!.dropEffect = "move";
         dataTransfer!.effectAllowed = "move";
         dataTransfer!.setData("variable", variable);
-        dataTransfer!.setData("srcGraph", thisSrcGraph);
+        dataTransfer!.setData("srcGraphConfig", thisSrcGraphConfig);
 
         emit("setDragging", true);
     };
@@ -39,29 +39,25 @@ export default (
         });
     };
 
-    // Remove variable from a given graph
     const removeVariable = (srcGraphIdx: number, variable: string) => {
-        const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
-            (v) => v !== variable
-        );
+        const srcVariables = store.state.graphs.config[srcGraphIdx].selectedVariables.filter((v) => v !== variable);
         updateSelectedVariables(srcGraphIdx, srcVariables);
     };
 
     const selectedVariables = computed<string[]>(() =>
-        hiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
+        hasHiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
     );
 
     const onDrop = (evt: DragEvent) => {
         const { dataTransfer } = evt;
         const variable = dataTransfer!.getData("variable");
-        const srcGraph = dataTransfer!.getData("srcGraph");
-        if (srcGraph !== thisSrcGraph) {
-            // remove from source graph
-            if (srcGraph !== "hidden") {
-                removeVariable(parseInt(srcGraph, 10), variable);
+        const srcGraphConfig = dataTransfer!.getData("srcGraphConfig");
+        if (srcGraphConfig !== thisSrcGraphConfig) {
+            if (srcGraphConfig !== "hidden") {
+                removeVariable(parseInt(srcGraphConfig, 10), variable);
             }
             // add to this graph if necessary
-            if (!hiddenVariables && !selectedVariables.value.includes(variable)) {
+            if (!hasHiddenVariables && !selectedVariables.value.includes(variable)) {
                 const newVars = [...selectedVariables.value, variable];
                 updateSelectedVariables(graphIndex!, newVars);
             }
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index ce2a1501..eb10262e 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -15,10 +15,7 @@ export const actions: ActionTree<GraphsState, AppState> = {
         // Maintain unselected variables too, so we know which variables had been explicitly unselected when model
         // updates
         const allVariables = rootState.model.odinModelResponse?.metadata?.variables || [];
-        const unselectedVariables =
-            rootState.model.odinModelResponse?.metadata?.variables.filter(
-                (s) => !payload.selectedVariables.includes(s)
-            ) || [];
+        const unselectedVariables = allVariables.filter((s) => !payload.selectedVariables.includes(s)) || [];
         // sort the selected variables to match the order in the model
         const selectedVariables = payload.selectedVariables.sort((a, b) =>
             allVariables.indexOf(a) > allVariables.indexOf(b) ? 1 : -1
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index cf2217ca..f825ebb5 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -12,12 +12,17 @@ export interface GraphsGetters {
     [GraphsGetter.hiddenVariables]: Getter<GraphsState, AppState>;
 }
 
+export interface GraphsGettersValues {
+    [GraphsGetter.allSelectedVariables]: string[];
+    [GraphsGetter.hiddenVariables]: string[];
+}
+
 export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
         return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
     },
-    [GraphsGetter.hiddenVariables]: (_, graphsGetters, rootState): string[] => {
-        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables] as string[];
+    [GraphsGetter.hiddenVariables]: (_, graphsGetters: GraphsGettersValues, rootState: AppState): string[] => {
+        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables];
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     }
 };
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index a4f92200..91032a3c 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -82,7 +82,7 @@ describe("GraphConfig", () => {
         await s.trigger("dragstart", { dataTransfer: { setData } });
         expect(setData.mock.calls[0][0]).toBe("variable");
         expect(setData.mock.calls[0][1]).toStrictEqual("S");
-        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraph");
+        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
         expect(setData.mock.calls[1][1]).toStrictEqual("0");
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
     });
@@ -99,7 +99,7 @@ describe("GraphConfig", () => {
         const dataTransfer = {
             getData: (s: string) => {
                 if (s === "variable") return "I";
-                if (s === "srcGraph") return "1";
+                if (s === "srcGraphConfig") return "1";
                 return null;
             }
         };
@@ -118,7 +118,7 @@ describe("GraphConfig", () => {
         const dataTransfer = {
             getData: (s: string) => {
                 if (s === "variable") return "I";
-                if (s === "srcGraph") return "hidden";
+                if (s === "srcGraphConfig") return "hidden";
                 return null;
             }
         };
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
index 2f141c69..2e34a1a8 100644
--- a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -86,7 +86,7 @@ describe("HiddenVariables", () => {
         await s.trigger("dragstart", { dataTransfer: { setData } });
         expect(setData.mock.calls[0][0]).toBe("variable");
         expect(setData.mock.calls[0][1]).toStrictEqual("I");
-        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraph");
+        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
         expect(setData.mock.calls[1][1]).toStrictEqual("hidden");
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
     });
@@ -103,7 +103,7 @@ describe("HiddenVariables", () => {
         const dataTransfer = {
             getData: (s: string) => {
                 if (s === "variable") return "S";
-                if (s === "srcGraph") return "0";
+                if (s === "srcGraphConfig") return "0";
                 return null;
             }
         };

From 8c572de2567448eda3074e5ad0b211383ed5ecf2 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 2 Jul 2024 17:27:12 +0100
Subject: [PATCH 24/80] generate width of legend from maximum length of
 selected variable

---
 app/static/src/app/components/WodinPlot.vue   | 71 +++++++++++++++----
 app/static/src/app/components/run/RunPlot.vue | 21 ++++--
 app/static/src/app/components/run/RunTab.vue  | 20 +++++-
 app/static/src/app/store/graphs/getters.ts    |  9 ++-
 4 files changed, 101 insertions(+), 20 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 025f9875..eb28b837 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -18,6 +18,13 @@ import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
 import { YAxisRange } from "../store/graphs/state";
+import {GraphsGetter} from "../store/graphs/getters";
+
+export interface XAxisOptions {
+    autorange: boolean;
+    min?: number;
+    max?: number;
+}
 
 export default defineComponent({
     name: "WodinPlot",
@@ -44,9 +51,20 @@ export default defineComponent({
             type: Boolean,
             required: false,
             default: true
+        },
+        hasLinkedXAxis: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        linkedXAxisOptions: {
+            type: Object as PropType<XAxisOptions | null>,
+            required: false,
+            default: null
         }
     },
-    setup(props) {
+    emits: ["updateXAxis"],
+    setup(props, { emit }) {
         const store = useStore();
 
         const plotStyle = computed(() => (props.fadePlot ? fadePlotStyle : ""));
@@ -62,6 +80,7 @@ export default defineComponent({
         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 legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
 
         const updateAxesRange = () => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,21 +91,16 @@ export default defineComponent({
             }
         };
 
-        const relayout = async (event: PlotRelayoutEvent) => {
+        const updateXAxisRange = async (xAxisOptions: XAxisOptions) => {
             let data;
-            if (event["xaxis.autorange"] === true) {
+            if (xAxisOptions.autorange) {
                 data = baseData.value;
             } else {
-                const t0 = event["xaxis.range[0]"];
-                const t1 = event["xaxis.range[1]"];
-                if (t0 === undefined || t1 === undefined) {
-                    return;
-                }
-                data = props.plotData(t0, t1, nPoints);
+                data = props.plotData(xAxisOptions.min!, xAxisOptions.max!, nPoints);
             }
-
+            console.log(`Legend width is ${legendWidth.value}`);
             const layout: Partial<Layout> = {
-                margin,
+                margin: {...margin, r: legendWidth.value},
                 uirevision: "true",
                 xaxis: { title: "Time", autorange: true },
                 yaxis: { autorange: true, type: yAxisType.value }
@@ -96,6 +110,32 @@ export default defineComponent({
             await react(el, data, layout, config);
         };
 
+        const relayout = async (event: PlotRelayoutEvent) => {
+            let xAxisOptions;
+            if (event["xaxis.autorange"] === true) {
+                xAxisOptions = { autorange: true };
+            } else {
+                const t0 = event["xaxis.range[0]"];
+                const t1 = event["xaxis.range[1]"];
+                if (t0 === undefined || t1 === undefined) {
+                    return;
+                }
+                xAxisOptions = {
+                    autorange: false,
+                    min: t0,
+                    max: t1
+                };
+            }
+
+            if (props.hasLinkedXAxis) {
+                // Emit the x axis change, and handle update when options are propagated through prop
+                emit("updateXAxis", xAxisOptions);
+            } else {
+                // No linked x axis, so this plot can just update itself directly
+                await updateXAxisRange(xAxisOptions);
+            }
+        };
+
         const resize = () => {
             if (plot.value) {
                 Plots.resize(plot.value as HTMLElement);
@@ -110,8 +150,10 @@ export default defineComponent({
 
                 if (hasPlotData.value) {
                     const el = plot.value as unknown;
+                    // TODO: build margin in a nicer way!
+                    console.log(`Legend width is ${legendWidth.value}`);
                     const layout: Partial<Layout> = {
-                        margin,
+                        margin: {...margin, r: legendWidth.value},
                         yaxis: {
                             type: yAxisType.value
                         },
@@ -152,6 +194,11 @@ export default defineComponent({
                 drawPlot(true);
             }
         });
+        watch(() => props.linkedXAxisOptions, () => {
+          if (props.linkedXAxisOptions) {
+            updateXAxisRange(props.linkedXAxisOptions);
+          }
+        });
 
         onUnmounted(() => {
             if (resizeObserver) {
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 47574be4..00a0f0ca 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -5,18 +5,21 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
+        :has-linked-x-axis="true"
+        :linked-x-axis-options="linkedXAxisOptions"
+        @updateXAxis="updateXAxis"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import {computed, defineComponent, PropType} from "vue";
 import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
 import { odinToPlotly, allFitDataToPlotly, WodinPlotData, filterSeriesSet } from "../../plot";
-import WodinPlot from "../WodinPlot.vue";
+import WodinPlot, {XAxisOptions} from "../WodinPlot.vue";
 import { RunGetter } from "../../store/run/getters";
 import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
@@ -30,12 +33,17 @@ export default defineComponent({
         graphIndex: {
             type: Number,
             default: 0
+        },
+        linkedXAxisOptions: {
+          type: Object as PropType<XAxisOptions | null>,
+          required: true
         }
     },
     components: {
         WodinPlot
     },
-    setup(props) {
+    emits: ["updateXAxis"],
+    setup(props, {emit}) {
         const store = useStore();
 
         const solution = computed(() => store.state.run.resultOde?.solution);
@@ -111,6 +119,10 @@ export default defineComponent({
             return allData;
         };
 
+        const updateXAxis = (options: XAxisOptions) => {
+          emit("updateXAxis", options);
+        }
+
         return {
             placeholderMessage,
             endTime,
@@ -119,7 +131,8 @@ export default defineComponent({
             allPlotData,
             selectedVariables,
             parameterSetSolutions,
-            displayNames
+            displayNames,
+            updateXAxis
         };
     }
 });
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 4a4c3cd9..12733f26 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -10,7 +10,12 @@
                 :fade-plot="!!updateMsg"
                 :graph-index="index"
             ></run-stochastic-plot>
-            <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false" :graph-index="index">
+            <run-plot v-else
+                      :fade-plot="!!updateMsg"
+                      :model-fit="false"
+                      :graph-index="index"
+                      :linked-x-axis-options="xAxisOptions"
+                      @updateXAxis="updateXAxisOptions">
                 <div v-if="sumOfSquares">
                     <span>Sum of squares: {{ sumOfSquares }}</span>
                 </div>
@@ -46,7 +51,7 @@
 
 <script lang="ts">
 import { useStore } from "vuex";
-import { computed, defineComponent, ref } from "vue";
+import {computed, defineComponent, Ref, ref} from "vue";
 import VueFeather from "vue-feather";
 import { RunMutation } from "../../store/run/mutations";
 import RunPlot from "./RunPlot.vue";
@@ -62,6 +67,7 @@ import { AppType } from "../../store/appState/state";
 import { ModelGetter } from "../../store/model/getters";
 import RunStochasticPlot from "./RunStochasticPlot.vue";
 import { GraphsGetter } from "../../store/graphs/getters";
+import {XAxisOptions} from "../WodinPlot.vue";
 
 export default defineComponent({
     name: "RunTab",
@@ -78,6 +84,8 @@ export default defineComponent({
         const store = useStore();
 
         const showDownloadOutput = ref(false);
+        const xAxisOptions: Ref<XAxisOptions> = ref({ autorange: true });
+
         const isStochastic = computed(() => store.state.appType === AppType.Stochastic);
 
         const error = computed(() => {
@@ -127,6 +135,10 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
+        const updateXAxisOptions = (options: XAxisOptions) => {
+            xAxisOptions.value = options;
+        };
+
         return {
             canRunModel,
             isStochastic,
@@ -140,7 +152,9 @@ export default defineComponent({
             downloadUserFileName,
             toggleShowDownloadOutput,
             download,
-            graphConfigs
+            graphConfigs,
+            xAxisOptions,
+            updateXAxisOptions
         };
     }
 });
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index f825ebb5..43418d51 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -4,17 +4,20 @@ import { AppState } from "../appState/state";
 
 export enum GraphsGetter {
     allSelectedVariables = "allSelectedVariables",
-    hiddenVariables = "hiddenVariables" // variable which are not selected in any graph
+    hiddenVariables = "hiddenVariables", // variable which are not selected in any graph
+    legendWidth = "legendWidth" // plot legend width, in pixels, derived from max selected variable name length
 }
 
 export interface GraphsGetters {
     [GraphsGetter.allSelectedVariables]: Getter<GraphsState, AppState>;
     [GraphsGetter.hiddenVariables]: Getter<GraphsState, AppState>;
+    [GraphsGetter.legendWidth]: Getter<GraphsState, AppState>;
 }
 
 export interface GraphsGettersValues {
     [GraphsGetter.allSelectedVariables]: string[];
     [GraphsGetter.hiddenVariables]: string[];
+    [GraphsGetter.legendWidth]: number;
 }
 
 export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
@@ -24,5 +27,9 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.hiddenVariables]: (_, graphsGetters: GraphsGettersValues, rootState: AppState): string[] => {
         const allSelected = graphsGetters[GraphsGetter.allSelectedVariables];
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
+    },
+    [GraphsGetter.legendWidth]: (_, graphsGetters): number  => {
+        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) => a.length < b.length ? 1 : -1)[0];
+        return (longestVar.length * 10) + 40;
     }
 };

From 803f8da5845b13918f71738da6c99dec67c2da11 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 4 Jul 2024 16:07:34 +0100
Subject: [PATCH 25/80] works for x,y zoom

---
 app/static/src/app/components/WodinPlot.vue   | 94 +++++++++++++++++--
 app/static/src/app/components/run/RunPlot.vue |  6 +-
 app/static/src/app/components/run/RunTab.vue  |  7 +-
 3 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index eb28b837..71bad1ed 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="wodin-plot-container" :style="plotStyle">
+        <div>{{JSON.stringify(linkedXAxisOptions)}}</div>
         <div class="plot" ref="plot" id="plot"></div>
         <div v-if="!hasPlotData" class="plot-placeholder">
             {{ placeholderMessage }}
@@ -10,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType } from "vue";
+import {computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref} from "vue";
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
 import { newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config } from "plotly.js-basic-dist-min";
@@ -20,7 +21,7 @@ import { GraphsMutation } from "../store/graphs/mutations";
 import { YAxisRange } from "../store/graphs/state";
 import {GraphsGetter} from "../store/graphs/getters";
 
-export interface XAxisOptions {
+export interface AxisOptions {
     autorange: boolean;
     min?: number;
     max?: number;
@@ -58,7 +59,7 @@ export default defineComponent({
             default: false
         },
         linkedXAxisOptions: {
-            type: Object as PropType<XAxisOptions | null>,
+            type: Object as PropType<AxisOptions | null>,
             required: false,
             default: null
         }
@@ -82,16 +83,21 @@ export default defineComponent({
         const yAxisRange = computed(() => store.state.graphs.settings.yAxisRange as YAxisRange);
         const legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
 
-        const updateAxesRange = () => {
+        const lastYAxisOptionsFromZoom: Ref<AxisOptions | null> = ref(null);
+
+        const commitYAxisRange = () => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
+                // TODO: We do not yet have per-graph settings, so YAxisRange committed here and used when user chooses
+                // to lock range will be overwritten by each graph, and will
                 store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, yRange);
             }
         };
 
-        const updateXAxisRange = async (xAxisOptions: XAxisOptions) => {
+        const updateXAxisRange = async (xAxisOptions: AxisOptions) => {
+
             let data;
             if (xAxisOptions.autorange) {
                 data = baseData.value;
@@ -99,6 +105,10 @@ export default defineComponent({
                 data = props.plotData(xAxisOptions.min!, xAxisOptions.max!, nPoints);
             }
             console.log(`Legend width is ${legendWidth.value}`);
+
+            //const plotLayout = (plot.value as any).layout;
+            //alert("updating xaxis with " + JSON.stringify(plotLayout.yaxis))
+            //TODO: comment on unsetting autorange!
             const layout: Partial<Layout> = {
                 margin: {...margin, r: legendWidth.value},
                 uirevision: "true",
@@ -106,10 +116,37 @@ export default defineComponent({
                 yaxis: { autorange: true, type: yAxisType.value }
             };
 
+            // mrc-5485 - removed from above layout:
+            // ,
+            //  yaxis: { autorange: true, type: yAxisType.value }
+
+            // mrc-5484
+            /*if (lockYAxis.value) {
+                layout.yaxis!.range = [...yAxisRange.value];
+                layout.yaxis!.autorange = false;
+            } else if (lastYAxisOptionsFromZoom.value) {
+                layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
+                layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
+            }*/
+            retainYAxisRange(layout);
+
             const el = plot.value as HTMLElement;
             await react(el, data, layout, config);
         };
 
+        const retainYAxisRange = (layout: Partial<Layout>) => {
+            // When updating plot view in response to some data change or event, retain Y axis range in layout
+            // either from the locked range, or from the last range user zoomed to.
+            // (Locked range will survive re-mount and tab change, the last range from zoom will not)
+            if (lockYAxis.value) {
+              layout.yaxis!.range = [...yAxisRange.value];
+              layout.yaxis!.autorange = false;
+            } else if (lastYAxisOptionsFromZoom.value) {
+              layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
+              layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
+            }
+        };
+
         const relayout = async (event: PlotRelayoutEvent) => {
             let xAxisOptions;
             if (event["xaxis.autorange"] === true) {
@@ -127,6 +164,14 @@ export default defineComponent({
                 };
             }
 
+            lastYAxisOptionsFromZoom.value = {
+              autorange: event["yaxis.autorange"] || false,
+              min: event["yaxis.range[0]"],
+              max: event["yaxis.range[1]"]
+            };
+            //alert("saving last y axis: " + JSON.stringify(lastYAxisOptionsFromZoom.value))
+
+            // TODO: might not be an x axis change...
             if (props.hasLinkedXAxis) {
                 // Emit the x axis change, and handle update when options are propagated through prop
                 emit("updateXAxis", xAxisOptions);
@@ -144,7 +189,21 @@ export default defineComponent({
 
         let resizeObserver: null | ResizeObserver = null;
 
+        /*const getLayout = (toggleLogScale: boolean) => {
+            return {
+              margin: {
+                  ...margin,
+                  r: legendWidth.value
+              },
+              yaxis: {
+                type: yAxisType.value
+              },
+              xaxis: { title: "Time" }
+            };
+        };*/
+
         const drawPlot = (toggleLogScale = false) => {
+            console.log("redrawing..");
             if (props.redrawWatches.length) {
                 baseData.value = props.plotData(startTime, props.endTime, nPoints);
 
@@ -162,15 +221,32 @@ export default defineComponent({
 
                     const configCopy = { ...config } as Partial<Config>;
 
-                    if (lockYAxis.value && !toggleLogScale) {
+                    /*if (lockYAxis.value && !toggleLogScale) {
+                        // We're configured to lock the y axis and we're not in the process of toggling the
+                        // log scale, so lock the y axis range
                         layout.yaxis!.range = [...yAxisRange.value];
                         layout.yaxis!.autorange = false;
+                    }*/
+                    if (!toggleLogScale) {
+                      retainYAxisRange(layout);
+                    }
+
+                    // mrc-5484 - set data appropriate to xAxisOptions
+                    let data;
+                    if (!props.linkedXAxisOptions || props.linkedXAxisOptions.autorange) {
+                      data = baseData.value;
+                    } else {
+                      data = props.plotData(props.linkedXAxisOptions.min!, props.linkedXAxisOptions.max!, nPoints);
                     }
 
-                    newPlot(el as HTMLElement, baseData.value, layout, configCopy);
+                    //newPlot(el as HTMLElement, baseData.value, layout, configCopy);
+                    newPlot(el as HTMLElement, data, layout, configCopy);
 
+                    // We're not locking the YAxis OR we are toggling the log scale (overriding any locked range)
+                    // so commit whatever Y axis range the plot auto-calculates, so we can lock to that in future
+                    // if the user chooses
                     if (!lockYAxis.value || toggleLogScale) {
-                        updateAxesRange();
+                        commitYAxisRange();
                     }
 
                     if (props.recalculateOnRelayout) {
@@ -186,11 +262,13 @@ export default defineComponent({
 
         watch([() => props.redrawWatches, lockYAxis], () => {
             if (plotStyle.value !== fadePlotStyle) {
+                //alert("drawing plot from redrawWatches or lockYAxis")
                 drawPlot();
             }
         });
         watch(yAxisType, () => {
             if (plotStyle.value !== fadePlotStyle) {
+                //alert("drawing plot from yAxisType")
                 drawPlot(true);
             }
         });
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 00a0f0ca..04b17926 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -19,7 +19,7 @@ import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
 import { odinToPlotly, allFitDataToPlotly, WodinPlotData, filterSeriesSet } from "../../plot";
-import WodinPlot, {XAxisOptions} from "../WodinPlot.vue";
+import WodinPlot, {AxisOptions} from "../WodinPlot.vue";
 import { RunGetter } from "../../store/run/getters";
 import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
@@ -35,7 +35,7 @@ export default defineComponent({
             default: 0
         },
         linkedXAxisOptions: {
-          type: Object as PropType<XAxisOptions | null>,
+          type: Object as PropType<AxisOptions | null>,
           required: true
         }
     },
@@ -119,7 +119,7 @@ export default defineComponent({
             return allData;
         };
 
-        const updateXAxis = (options: XAxisOptions) => {
+        const updateXAxis = (options: AxisOptions) => {
           emit("updateXAxis", options);
         }
 
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 12733f26..7a11d664 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="run-tab">
+      <div>{{JSON.stringify(xAxisOptions)}}</div>
         <div>
             <button class="btn btn-primary" id="run-btn" :disabled="!canRunModel" @click="runModel">Run model</button>
         </div>
@@ -67,7 +68,7 @@ import { AppType } from "../../store/appState/state";
 import { ModelGetter } from "../../store/model/getters";
 import RunStochasticPlot from "./RunStochasticPlot.vue";
 import { GraphsGetter } from "../../store/graphs/getters";
-import {XAxisOptions} from "../WodinPlot.vue";
+import {AxisOptions} from "../WodinPlot.vue";
 
 export default defineComponent({
     name: "RunTab",
@@ -84,7 +85,7 @@ export default defineComponent({
         const store = useStore();
 
         const showDownloadOutput = ref(false);
-        const xAxisOptions: Ref<XAxisOptions> = ref({ autorange: true });
+        const xAxisOptions: Ref<AxisOptions> = ref({ autorange: true });
 
         const isStochastic = computed(() => store.state.appType === AppType.Stochastic);
 
@@ -135,7 +136,7 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
-        const updateXAxisOptions = (options: XAxisOptions) => {
+        const updateXAxisOptions = (options: AxisOptions) => {
             xAxisOptions.value = options;
         };
 

From 10cd42825fa2686162084e673708b93ca53a8c46 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 4 Jul 2024 16:41:59 +0100
Subject: [PATCH 26/80] working for single axis zoom

---
 app/static/src/app/components/WodinPlot.vue | 50 ++++++++++-----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 71bad1ed..157235fd 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -108,7 +108,6 @@ export default defineComponent({
 
             //const plotLayout = (plot.value as any).layout;
             //alert("updating xaxis with " + JSON.stringify(plotLayout.yaxis))
-            //TODO: comment on unsetting autorange!
             const layout: Partial<Layout> = {
                 margin: {...margin, r: legendWidth.value},
                 uirevision: "true",
@@ -148,36 +147,35 @@ export default defineComponent({
         };
 
         const relayout = async (event: PlotRelayoutEvent) => {
-            let xAxisOptions;
-            if (event["xaxis.autorange"] === true) {
-                xAxisOptions = { autorange: true };
-            } else {
-                const t0 = event["xaxis.range[0]"];
-                const t1 = event["xaxis.range[1]"];
-                if (t0 === undefined || t1 === undefined) {
-                    return;
-                }
-                xAxisOptions = {
+            //alert("RELAYOUT! " + JSON.stringify(event))
+            if (event["xaxis.autorange"] || event["xaxis.range[0]"]) {
+                let xAxisOptions;
+                if (event["xaxis.autorange"] === true) {
+                  xAxisOptions = {autorange: true};
+                } else {
+                  const t0 = event["xaxis.range[0]"];
+                  const t1 = event["xaxis.range[1]"];
+                  xAxisOptions = {
                     autorange: false,
                     min: t0,
                     max: t1
-                };
+                  };
+                }
+                if (props.hasLinkedXAxis) {
+                  // Emit the x axis change, and handle update when options are propagated through prop
+                  emit("updateXAxis", xAxisOptions);
+                } else {
+                  // No linked x axis, so this plot can just update itself directly
+                  await updateXAxisRange(xAxisOptions);
+                }
             }
 
-            lastYAxisOptionsFromZoom.value = {
-              autorange: event["yaxis.autorange"] || false,
-              min: event["yaxis.range[0]"],
-              max: event["yaxis.range[1]"]
-            };
-            //alert("saving last y axis: " + JSON.stringify(lastYAxisOptionsFromZoom.value))
-
-            // TODO: might not be an x axis change...
-            if (props.hasLinkedXAxis) {
-                // Emit the x axis change, and handle update when options are propagated through prop
-                emit("updateXAxis", xAxisOptions);
-            } else {
-                // No linked x axis, so this plot can just update itself directly
-                await updateXAxisRange(xAxisOptions);
+          if (event["yaxis.autorange"] || event["yaxis.range[0]"]) {
+              lastYAxisOptionsFromZoom.value = {
+                autorange: event["yaxis.autorange"] || false,
+                min: event["yaxis.range[0]"],
+                max: event["yaxis.range[1]"]
+              };
             }
         };
 

From 2de136f33921a0c1250816d6724d4c4cc5de0823 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 4 Jul 2024 16:53:49 +0100
Subject: [PATCH 27/80] use plotly axis type for last Y axis from Zoom

---
 app/static/src/app/components/WodinPlot.vue | 59 ++++-----------------
 1 file changed, 10 insertions(+), 49 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 157235fd..38bf7365 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -14,7 +14,7 @@
 import {computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref} from "vue";
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
-import { newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config } from "plotly.js-basic-dist-min";
+import {newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config, LayoutAxis} from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
@@ -83,7 +83,7 @@ export default defineComponent({
         const yAxisRange = computed(() => store.state.graphs.settings.yAxisRange as YAxisRange);
         const legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
 
-        const lastYAxisOptionsFromZoom: Ref<AxisOptions | null> = ref(null);
+        const lastYAxisFromZoom: Ref<Partial<LayoutAxis> | null> = ref(null);
 
         const commitYAxisRange = () => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -106,8 +106,6 @@ export default defineComponent({
             }
             console.log(`Legend width is ${legendWidth.value}`);
 
-            //const plotLayout = (plot.value as any).layout;
-            //alert("updating xaxis with " + JSON.stringify(plotLayout.yaxis))
             const layout: Partial<Layout> = {
                 margin: {...margin, r: legendWidth.value},
                 uirevision: "true",
@@ -115,18 +113,6 @@ export default defineComponent({
                 yaxis: { autorange: true, type: yAxisType.value }
             };
 
-            // mrc-5485 - removed from above layout:
-            // ,
-            //  yaxis: { autorange: true, type: yAxisType.value }
-
-            // mrc-5484
-            /*if (lockYAxis.value) {
-                layout.yaxis!.range = [...yAxisRange.value];
-                layout.yaxis!.autorange = false;
-            } else if (lastYAxisOptionsFromZoom.value) {
-                layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
-                layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
-            }*/
             retainYAxisRange(layout);
 
             const el = plot.value as HTMLElement;
@@ -140,14 +126,14 @@ export default defineComponent({
             if (lockYAxis.value) {
               layout.yaxis!.range = [...yAxisRange.value];
               layout.yaxis!.autorange = false;
-            } else if (lastYAxisOptionsFromZoom.value) {
-              layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
-              layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
+            } else if (lastYAxisFromZoom.value) {
+              //layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
+              //layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
+              layout.yaxis = {...layout.yaxis, ...lastYAxisFromZoom.value}
             }
         };
 
         const relayout = async (event: PlotRelayoutEvent) => {
-            //alert("RELAYOUT! " + JSON.stringify(event))
             if (event["xaxis.autorange"] || event["xaxis.range[0]"]) {
                 let xAxisOptions;
                 if (event["xaxis.autorange"] === true) {
@@ -171,10 +157,9 @@ export default defineComponent({
             }
 
           if (event["yaxis.autorange"] || event["yaxis.range[0]"]) {
-              lastYAxisOptionsFromZoom.value = {
-                autorange: event["yaxis.autorange"] || false,
-                min: event["yaxis.range[0]"],
-                max: event["yaxis.range[1]"]
+              lastYAxisFromZoom.value = {
+                "autorange": event["yaxis.autorange"] || false,
+                "range": [event["yaxis.range[0]"], event["yaxis.range[1]"]]
               };
             }
         };
@@ -187,28 +172,14 @@ export default defineComponent({
 
         let resizeObserver: null | ResizeObserver = null;
 
-        /*const getLayout = (toggleLogScale: boolean) => {
-            return {
-              margin: {
-                  ...margin,
-                  r: legendWidth.value
-              },
-              yaxis: {
-                type: yAxisType.value
-              },
-              xaxis: { title: "Time" }
-            };
-        };*/
-
         const drawPlot = (toggleLogScale = false) => {
-            console.log("redrawing..");
             if (props.redrawWatches.length) {
                 baseData.value = props.plotData(startTime, props.endTime, nPoints);
 
                 if (hasPlotData.value) {
                     const el = plot.value as unknown;
                     // TODO: build margin in a nicer way!
-                    console.log(`Legend width is ${legendWidth.value}`);
+
                     const layout: Partial<Layout> = {
                         margin: {...margin, r: legendWidth.value},
                         yaxis: {
@@ -219,17 +190,10 @@ export default defineComponent({
 
                     const configCopy = { ...config } as Partial<Config>;
 
-                    /*if (lockYAxis.value && !toggleLogScale) {
-                        // We're configured to lock the y axis and we're not in the process of toggling the
-                        // log scale, so lock the y axis range
-                        layout.yaxis!.range = [...yAxisRange.value];
-                        layout.yaxis!.autorange = false;
-                    }*/
                     if (!toggleLogScale) {
                       retainYAxisRange(layout);
                     }
 
-                    // mrc-5484 - set data appropriate to xAxisOptions
                     let data;
                     if (!props.linkedXAxisOptions || props.linkedXAxisOptions.autorange) {
                       data = baseData.value;
@@ -237,7 +201,6 @@ export default defineComponent({
                       data = props.plotData(props.linkedXAxisOptions.min!, props.linkedXAxisOptions.max!, nPoints);
                     }
 
-                    //newPlot(el as HTMLElement, baseData.value, layout, configCopy);
                     newPlot(el as HTMLElement, data, layout, configCopy);
 
                     // We're not locking the YAxis OR we are toggling the log scale (overriding any locked range)
@@ -260,13 +223,11 @@ export default defineComponent({
 
         watch([() => props.redrawWatches, lockYAxis], () => {
             if (plotStyle.value !== fadePlotStyle) {
-                //alert("drawing plot from redrawWatches or lockYAxis")
                 drawPlot();
             }
         });
         watch(yAxisType, () => {
             if (plotStyle.value !== fadePlotStyle) {
-                //alert("drawing plot from yAxisType")
                 drawPlot(true);
             }
         });

From 69a5a4ccdf8737daa55733d33f0ce6244cdb5df9 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 4 Jul 2024 17:20:51 +0100
Subject: [PATCH 28/80] use layout axis type for linked x axis

---
 app/static/src/app/components/WodinPlot.vue   | 80 ++++++++-----------
 app/static/src/app/components/run/RunPlot.vue | 12 +--
 app/static/src/app/components/run/RunTab.vue  | 13 ++-
 3 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 38bf7365..812e9490 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="wodin-plot-container" :style="plotStyle">
-        <div>{{JSON.stringify(linkedXAxisOptions)}}</div>
         <div class="plot" ref="plot" id="plot"></div>
         <div v-if="!hasPlotData" class="plot-placeholder">
             {{ placeholderMessage }}
@@ -21,12 +20,6 @@ import { GraphsMutation } from "../store/graphs/mutations";
 import { YAxisRange } from "../store/graphs/state";
 import {GraphsGetter} from "../store/graphs/getters";
 
-export interface AxisOptions {
-    autorange: boolean;
-    min?: number;
-    max?: number;
-}
-
 export default defineComponent({
     name: "WodinPlot",
     components: { WodinPlotDataSummary },
@@ -58,8 +51,8 @@ export default defineComponent({
             required: false,
             default: false
         },
-        linkedXAxisOptions: {
-            type: Object as PropType<AxisOptions | null>,
+        linkedXAxis: {
+            type: Object as PropType<Partial<LayoutAxis> | null>,
             required: false,
             default: null
         }
@@ -83,6 +76,7 @@ export default defineComponent({
         const yAxisRange = computed(() => store.state.graphs.settings.yAxisRange as YAxisRange);
         const legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
 
+        // Remember the user's last y axis zoom, when we update from x axis potentially chosen in another graph
         const lastYAxisFromZoom: Ref<Partial<LayoutAxis> | null> = ref(null);
 
         const commitYAxisRange = () => {
@@ -96,13 +90,24 @@ export default defineComponent({
             }
         };
 
-        const updateXAxisRange = async (xAxisOptions: AxisOptions) => {
+        const retainYAxisRange = (layout: Partial<Layout>) => {
+          // When updating plot view in response to some data change or event, retain Y axis range in layout
+          // either from the locked range, or from the last range user zoomed to.
+          // (Locked range will survive re-mount and tab change, the last range from zoom will not)
+          if (lockYAxis.value) {
+            layout.yaxis!.range = [...yAxisRange.value];
+            layout.yaxis!.autorange = false;
+          } else if (lastYAxisFromZoom.value) {
+            layout.yaxis = {...layout.yaxis, ...lastYAxisFromZoom.value}
+          }
+        };
 
+        const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
             let data;
-            if (xAxisOptions.autorange) {
+            if (xAxis.autorange) {
                 data = baseData.value;
             } else {
-                data = props.plotData(xAxisOptions.min!, xAxisOptions.max!, nPoints);
+                data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
             }
             console.log(`Legend width is ${legendWidth.value}`);
 
@@ -119,48 +124,27 @@ export default defineComponent({
             await react(el, data, layout, config);
         };
 
-        const retainYAxisRange = (layout: Partial<Layout>) => {
-            // When updating plot view in response to some data change or event, retain Y axis range in layout
-            // either from the locked range, or from the last range user zoomed to.
-            // (Locked range will survive re-mount and tab change, the last range from zoom will not)
-            if (lockYAxis.value) {
-              layout.yaxis!.range = [...yAxisRange.value];
-              layout.yaxis!.autorange = false;
-            } else if (lastYAxisFromZoom.value) {
-              //layout.yaxis!.autorange = lastYAxisOptionsFromZoom.value.autorange;
-              //layout.yaxis!.range = [lastYAxisOptionsFromZoom.value.min, lastYAxisOptionsFromZoom.value.max];
-              layout.yaxis = {...layout.yaxis, ...lastYAxisFromZoom.value}
-            }
-        };
+        const axisFromEvent = (event: PlotRelayoutEvent, axisLetter: "x" | "y"): Partial<LayoutAxis> => {
+         return {
+            "autorange": event[`${axisLetter}axis.autorange`] || false,
+            "range": [event[`${axisLetter}axis.range[0]`], event[`${axisLetter}axis.range[1]`]]
+          };
+        }
 
         const relayout = async (event: PlotRelayoutEvent) => {
             if (event["xaxis.autorange"] || event["xaxis.range[0]"]) {
-                let xAxisOptions;
-                if (event["xaxis.autorange"] === true) {
-                  xAxisOptions = {autorange: true};
-                } else {
-                  const t0 = event["xaxis.range[0]"];
-                  const t1 = event["xaxis.range[1]"];
-                  xAxisOptions = {
-                    autorange: false,
-                    min: t0,
-                    max: t1
-                  };
-                }
+                const xAxis = axisFromEvent(event, "x");
                 if (props.hasLinkedXAxis) {
                   // Emit the x axis change, and handle update when options are propagated through prop
-                  emit("updateXAxis", xAxisOptions);
+                  emit("updateXAxis", xAxis);
                 } else {
                   // No linked x axis, so this plot can just update itself directly
-                  await updateXAxisRange(xAxisOptions);
+                  await updateXAxisRange(xAxis);
                 }
             }
 
           if (event["yaxis.autorange"] || event["yaxis.range[0]"]) {
-              lastYAxisFromZoom.value = {
-                "autorange": event["yaxis.autorange"] || false,
-                "range": [event["yaxis.range[0]"], event["yaxis.range[1]"]]
-              };
+              lastYAxisFromZoom.value = axisFromEvent(event, "y");
             }
         };
 
@@ -195,10 +179,10 @@ export default defineComponent({
                     }
 
                     let data;
-                    if (!props.linkedXAxisOptions || props.linkedXAxisOptions.autorange) {
+                    if (!props.linkedXAxis || props.linkedXAxis.autorange) {
                       data = baseData.value;
                     } else {
-                      data = props.plotData(props.linkedXAxisOptions.min!, props.linkedXAxisOptions.max!, nPoints);
+                      data = props.plotData(props.linkedXAxis.range![0], props.linkedXAxis.range![1], nPoints);
                     }
 
                     newPlot(el as HTMLElement, data, layout, configCopy);
@@ -231,9 +215,9 @@ export default defineComponent({
                 drawPlot(true);
             }
         });
-        watch(() => props.linkedXAxisOptions, () => {
-          if (props.linkedXAxisOptions) {
-            updateXAxisRange(props.linkedXAxisOptions);
+        watch(() => props.linkedXAxis, () => {
+          if (props.linkedXAxis) {
+            updateXAxisRange(props.linkedXAxis);
           }
         });
 
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 04b17926..16aea789 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -6,7 +6,7 @@
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
         :has-linked-x-axis="true"
-        :linked-x-axis-options="linkedXAxisOptions"
+        :linked-x-axis="linkedXAxis"
         @updateXAxis="updateXAxis"
     >
         <slot></slot>
@@ -16,10 +16,10 @@
 <script lang="ts">
 import {computed, defineComponent, PropType} from "vue";
 import { useStore } from "vuex";
-import { PlotData } from "plotly.js-basic-dist-min";
+import {LayoutAxis, PlotData} from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
 import { odinToPlotly, allFitDataToPlotly, WodinPlotData, filterSeriesSet } from "../../plot";
-import WodinPlot, {AxisOptions} from "../WodinPlot.vue";
+import WodinPlot from "../WodinPlot.vue";
 import { RunGetter } from "../../store/run/getters";
 import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
@@ -34,8 +34,8 @@ export default defineComponent({
             type: Number,
             default: 0
         },
-        linkedXAxisOptions: {
-          type: Object as PropType<AxisOptions | null>,
+        linkedXAxis: {
+          type: Object as PropType<Partial<LayoutAxis> | null>,
           required: true
         }
     },
@@ -119,7 +119,7 @@ export default defineComponent({
             return allData;
         };
 
-        const updateXAxis = (options: AxisOptions) => {
+        const updateXAxis = (options: Partial<LayoutAxis>) => {
           emit("updateXAxis", options);
         }
 
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 7a11d664..7e84cfe8 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="run-tab">
-      <div>{{JSON.stringify(xAxisOptions)}}</div>
         <div>
             <button class="btn btn-primary" id="run-btn" :disabled="!canRunModel" @click="runModel">Run model</button>
         </div>
@@ -15,7 +14,7 @@
                       :fade-plot="!!updateMsg"
                       :model-fit="false"
                       :graph-index="index"
-                      :linked-x-axis-options="xAxisOptions"
+                      :linked-x-axis="xAxisOptions"
                       @updateXAxis="updateXAxisOptions">
                 <div v-if="sumOfSquares">
                     <span>Sum of squares: {{ sumOfSquares }}</span>
@@ -68,7 +67,7 @@ import { AppType } from "../../store/appState/state";
 import { ModelGetter } from "../../store/model/getters";
 import RunStochasticPlot from "./RunStochasticPlot.vue";
 import { GraphsGetter } from "../../store/graphs/getters";
-import {AxisOptions} from "../WodinPlot.vue";
+import {LayoutAxis} from "plotly.js-basic-dist-min";
 
 export default defineComponent({
     name: "RunTab",
@@ -85,7 +84,7 @@ export default defineComponent({
         const store = useStore();
 
         const showDownloadOutput = ref(false);
-        const xAxisOptions: Ref<AxisOptions> = ref({ autorange: true });
+        const xAxis: Ref<Partial<LayoutAxis>> = ref({ autorange: true });
 
         const isStochastic = computed(() => store.state.appType === AppType.Stochastic);
 
@@ -136,8 +135,8 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
-        const updateXAxisOptions = (options: AxisOptions) => {
-            xAxisOptions.value = options;
+        const updateXAxisOptions = (options: Partial<LayoutAxis>) => {
+            xAxis.value = options;
         };
 
         return {
@@ -154,7 +153,7 @@ export default defineComponent({
             toggleShowDownloadOutput,
             download,
             graphConfigs,
-            xAxisOptions,
+            xAxisOptions: xAxis,
             updateXAxisOptions
         };
     }

From cbe818ab964257966247cd0817e13527c75fb19e Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 4 Jul 2024 17:39:41 +0100
Subject: [PATCH 29/80] shared layout code

---
 app/static/src/app/components/WodinPlot.vue | 43 +++++++++------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 812e9490..ed936491 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -84,13 +84,23 @@ export default defineComponent({
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
-                // TODO: We do not yet have per-graph settings, so YAxisRange committed here and used when user chooses
-                // to lock range will be overwritten by each graph, and will
+                // TODO: We do not yet have per-graph settings, so YAxisRange committed here, and used when user chooses
+                // to lock range will be overwritten by each graph, and so the y range of the final graph will be used
+                // by all - to be fixed in mrc-5442
                 store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, yRange);
             }
         };
 
-        const retainYAxisRange = (layout: Partial<Layout>) => {
+        const defaultLayout = (): Partial<Layout> => {
+            // Get generic layout, which will be modifed dynamically as required
+            return {
+                margin: {...margin, r: legendWidth.value},
+                xaxis: { title: "Time" },
+                yaxis: { type: yAxisType.value }
+            };
+        };
+
+        const preserveYAxisRange = (layout: Partial<Layout>) => {
           // When updating plot view in response to some data change or event, retain Y axis range in layout
           // either from the locked range, or from the last range user zoomed to.
           // (Locked range will survive re-mount and tab change, the last range from zoom will not)
@@ -109,16 +119,9 @@ export default defineComponent({
             } else {
                 data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
             }
-            console.log(`Legend width is ${legendWidth.value}`);
-
-            const layout: Partial<Layout> = {
-                margin: {...margin, r: legendWidth.value},
-                uirevision: "true",
-                xaxis: { title: "Time", autorange: true },
-                yaxis: { autorange: true, type: yAxisType.value }
-            };
 
-            retainYAxisRange(layout);
+            const layout = defaultLayout();
+            preserveYAxisRange(layout);
 
             const el = plot.value as HTMLElement;
             await react(el, data, layout, config);
@@ -162,21 +165,11 @@ export default defineComponent({
 
                 if (hasPlotData.value) {
                     const el = plot.value as unknown;
-                    // TODO: build margin in a nicer way!
-
-                    const layout: Partial<Layout> = {
-                        margin: {...margin, r: legendWidth.value},
-                        yaxis: {
-                            type: yAxisType.value
-                        },
-                        xaxis: { title: "Time" }
-                    };
-
-                    const configCopy = { ...config } as Partial<Config>;
-
+                    const layout = defaultLayout();
                     if (!toggleLogScale) {
-                      retainYAxisRange(layout);
+                      preserveYAxisRange(layout);
                     }
+                    const configCopy = { ...config } as Partial<Config>;
 
                     let data;
                     if (!props.linkedXAxis || props.linkedXAxis.autorange) {

From 885c28284889a072d7bcbccafc7c5dc439404897 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 5 Jul 2024 14:44:23 +0100
Subject: [PATCH 30/80] comments

---
 app/static/src/app/store/graphs/getters.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index 43418d51..86e071ee 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -29,6 +29,7 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     },
     [GraphsGetter.legendWidth]: (_, graphsGetters): number  => {
+        // Heuristic for setting graph legend width based on string length of longest variable name
         const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) => a.length < b.length ? 1 : -1)[0];
         return (longestVar.length * 10) + 40;
     }

From 05b0a9dc378f7dde75f1b4e4f94ff42cfdecf783 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 5 Jul 2024 22:42:55 +0100
Subject: [PATCH 31/80] use uid to retain graph component state

---
 .../src/app/components/graphConfig/GraphConfigs.vue       | 4 ++--
 app/static/src/app/components/run/RunTab.vue              | 2 +-
 app/static/src/app/serialise.ts                           | 1 +
 app/static/src/app/store/basic/basic.ts                   | 4 ++--
 app/static/src/app/store/fit/fit.ts                       | 4 ++--
 app/static/src/app/store/graphs/actions.ts                | 3 ++-
 app/static/src/app/store/graphs/graphs.ts                 | 8 +++++---
 app/static/src/app/store/graphs/state.ts                  | 1 +
 app/static/src/app/store/stochastic/stochastic.ts         | 4 ++--
 app/static/src/app/utils.ts                               | 2 +-
 app/static/tests/unit/utils.test.ts                       | 4 ++--
 11 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
index b4978216..df5f5518 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigs.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -4,9 +4,9 @@
         to move them to.
     </div>
     <graph-config
-        v-for="(_, index) in graphConfigs"
+        v-for="(config, index) in graphConfigs"
         :graph-index="index"
-        :key="index"
+        :key="config.id"
         :dragging="draggingVariable"
         @setDragging="setDraggingVariable"
     ></graph-config>
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 7e84cfe8..93e9c58b 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -4,7 +4,7 @@
             <button class="btn btn-primary" id="run-btn" :disabled="!canRunModel" @click="runModel">Run model</button>
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <template v-for="(_, index) in graphConfigs" :key="index">
+        <template v-for="(config, index) in graphConfigs" :key="config.id">
             <run-stochastic-plot
                 v-if="isStochastic"
                 :fade-plot="!!updateMsg"
diff --git a/app/static/src/app/serialise.ts b/app/static/src/app/serialise.ts
index 8de2d76e..5cf16ba2 100644
--- a/app/static/src/app/serialise.ts
+++ b/app/static/src/app/serialise.ts
@@ -184,6 +184,7 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
 
         targetState.graphs.config = [
             {
+                id: graphs!.config[0].id,
                 selectedVariables,
                 unselectedVariables
             }
diff --git a/app/static/src/app/store/basic/basic.ts b/app/static/src/app/store/basic/basic.ts
index 024b18f5..b05493b1 100644
--- a/app/static/src/app/store/basic/basic.ts
+++ b/app/static/src/app/store/basic/basic.ts
@@ -9,7 +9,7 @@ import { code } from "../code/code";
 import { sensitivity } from "../sensitivity/sensitivity";
 import { logMutations, persistState } from "../plugins";
 import { AppType, VisualisationTab } from "../appState/state";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
 import { graphs } from "../graphs/graphs";
@@ -22,7 +22,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Basic,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/store/fit/fit.ts b/app/static/src/app/store/fit/fit.ts
index 6986a46f..03f6a545 100644
--- a/app/static/src/app/store/fit/fit.ts
+++ b/app/static/src/app/store/fit/fit.ts
@@ -11,7 +11,7 @@ import { fitData } from "../fitData/fitData";
 import { modelFit } from "../modelFit/modelFit";
 import { AppType, VisualisationTab } from "../appState/state";
 import { logMutations, persistState } from "../plugins";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
 import { graphs } from "../graphs/graphs";
@@ -24,7 +24,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Fit,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index eb10262e..1f9b1511 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -3,6 +3,7 @@ import { GraphsMutation } from "./mutations";
 import { AppState, AppType } from "../appState/state";
 import { FitDataAction } from "../fitData/actions";
 import { GraphsState } from "./state";
+import {newUid} from "../../utils";
 
 export enum GraphsAction {
     UpdateSelectedVariables = "UpdateSelectedVariables",
@@ -29,6 +30,6 @@ export const actions: ActionTree<GraphsState, AppState> = {
     NewGraph(context) {
         const { rootState, commit } = context;
         const unselectedVariables = [...(rootState.model.odinModelResponse?.metadata?.variables || [])];
-        commit(GraphsMutation.AddGraph, { selectedVariables: [], unselectedVariables });
+        commit(GraphsMutation.AddGraph, { id: newUid(), selectedVariables: [], unselectedVariables });
     }
 };
diff --git a/app/static/src/app/store/graphs/graphs.ts b/app/static/src/app/store/graphs/graphs.ts
index 4a159920..39e2a9bf 100644
--- a/app/static/src/app/store/graphs/graphs.ts
+++ b/app/static/src/app/store/graphs/graphs.ts
@@ -2,10 +2,12 @@ import { GraphsState } from "./state";
 import { actions } from "./actions";
 import { getters } from "./getters";
 import { mutations } from "./mutations";
+import {newUid} from "../../utils";
 
-export const defaultState: GraphsState = {
+export const defaultState = (): GraphsState => ({
     config: [
         {
+            id: newUid(),
             selectedVariables: [],
             unselectedVariables: []
         }
@@ -15,11 +17,11 @@ export const defaultState: GraphsState = {
         lockYAxis: false,
         yAxisRange: [0, 0]
     }
-};
+});
 
 export const graphs = {
     namespaced: true,
-    state: defaultState,
+    state: defaultState(),
     actions,
     getters,
     mutations
diff --git a/app/static/src/app/store/graphs/state.ts b/app/static/src/app/store/graphs/state.ts
index 57d385ec..0579388f 100644
--- a/app/static/src/app/store/graphs/state.ts
+++ b/app/static/src/app/store/graphs/state.ts
@@ -7,6 +7,7 @@ export interface GraphSettings {
 }
 
 export interface GraphConfig {
+    id: string; // We need to keep a persistent id to identify configs in vue when a graph is deleted from the array
     selectedVariables: string[];
     unselectedVariables: string[]; // We keep track of unselected variables too so we can retain on model update
 }
diff --git a/app/static/src/app/store/stochastic/stochastic.ts b/app/static/src/app/store/stochastic/stochastic.ts
index 3a637e64..bf15867a 100644
--- a/app/static/src/app/store/stochastic/stochastic.ts
+++ b/app/static/src/app/store/stochastic/stochastic.ts
@@ -8,7 +8,7 @@ import { run } from "../run/run";
 import { code } from "../code/code";
 import { sensitivity } from "../sensitivity/sensitivity";
 import { AppType, VisualisationTab } from "../appState/state";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { logMutations, persistState } from "../plugins";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
@@ -22,7 +22,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Stochastic,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/utils.ts b/app/static/src/app/utils.ts
index 846aaffc..34a00984 100644
--- a/app/static/src/app/utils.ts
+++ b/app/static/src/app/utils.ts
@@ -203,7 +203,7 @@ export function generateBatchPars(
     };
 }
 
-export const newSessionId = (): string => uid(32);
+export const newUid = (): string => uid(32);
 
 export const joinStringsSentence = (strings: string[], last = " and ", sep = ", "): string => {
     const n = strings.length;
diff --git a/app/static/tests/unit/utils.test.ts b/app/static/tests/unit/utils.test.ts
index 3c37659e..e261a27a 100644
--- a/app/static/tests/unit/utils.test.ts
+++ b/app/static/tests/unit/utils.test.ts
@@ -4,7 +4,7 @@ import {
     generateBatchPars,
     getCodeErrorFromResponse,
     processFitData,
-    newSessionId,
+    newUid,
     joinStringsSentence
 } from "../../src/app/utils";
 import { SensitivityScaleType, SensitivityVariationType } from "../../src/app/store/sensitivity/state";
@@ -485,7 +485,7 @@ describe("generateBatchPars", () => {
 
 describe("newSessionId", () => {
     it("generates expected id format", () => {
-        const id = newSessionId();
+        const id = newUid();
         expect(id).toMatch(/^[a-z0-9]{32}$/);
     });
 });

From 6de251c45b8731d9de54768c1b27ed4e9f04eff4 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Sat, 6 Jul 2024 13:20:54 +0100
Subject: [PATCH 32/80] implement in Stochastic

---
 .../components/graphConfig/GraphConfigs.vue   |  4 ++--
 .../app/components/run/RunStochasticPlot.vue  | 20 ++++++++++++++++---
 app/static/src/app/components/run/RunTab.vue  | 14 +++++++------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
index df5f5518..b4978216 100644
--- a/app/static/src/app/components/graphConfig/GraphConfigs.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -4,9 +4,9 @@
         to move them to.
     </div>
     <graph-config
-        v-for="(config, index) in graphConfigs"
+        v-for="(_, index) in graphConfigs"
         :graph-index="index"
-        :key="config.id"
+        :key="index"
         :dragging="draggingVariable"
         @setDragging="setDraggingVariable"
     ></graph-config>
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index bf293c23..50b52fe5 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -5,14 +5,18 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
+        :has-linked-x-axis="true"
+        :linked-x-axis="linkedXAxis"
+        @updateXAxis="updateXAxis"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
+import {LayoutAxis} from "plotly.js-basic-dist-min";
 import { WodinPlotData, discreteSeriesSetToPlotly, filterSeriesSet } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
 import { runPlaceholderMessage } from "../../utils";
@@ -25,12 +29,17 @@ export default defineComponent({
         graphIndex: {
             type: Number,
             default: 0
+        },
+        linkedXAxis: {
+          type: Object as PropType<Partial<LayoutAxis> | null>,
+          required: true
         }
     },
     components: {
         WodinPlot
     },
-    setup(props) {
+    emits: ["updateXAxis"],
+    setup(props, {emit}) {
         const store = useStore();
 
         const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
@@ -65,11 +74,16 @@ export default defineComponent({
             );
         };
 
+      const updateXAxis = (options: Partial<LayoutAxis>) => {
+        emit("updateXAxis", options);
+      }
+
         return {
             placeholderMessage,
             endTime,
             allPlotData,
-            solution
+            solution,
+            updateXAxis
         };
     }
 });
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 93e9c58b..cfaa246d 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -9,13 +9,15 @@
                 v-if="isStochastic"
                 :fade-plot="!!updateMsg"
                 :graph-index="index"
+                :linked-x-axis="xAxis"
+                @updateXAxis="updateXAxis"
             ></run-stochastic-plot>
             <run-plot v-else
                       :fade-plot="!!updateMsg"
                       :model-fit="false"
                       :graph-index="index"
-                      :linked-x-axis="xAxisOptions"
-                      @updateXAxis="updateXAxisOptions">
+                      :linked-x-axis="xAxis"
+                      @updateXAxis="updateXAxis">
                 <div v-if="sumOfSquares">
                     <span>Sum of squares: {{ sumOfSquares }}</span>
                 </div>
@@ -135,8 +137,8 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
-        const updateXAxisOptions = (options: Partial<LayoutAxis>) => {
-            xAxis.value = options;
+        const updateXAxis = (newAxis: Partial<LayoutAxis>) => {
+            xAxis.value = newAxis;
         };
 
         return {
@@ -153,8 +155,8 @@ export default defineComponent({
             toggleShowDownloadOutput,
             download,
             graphConfigs,
-            xAxisOptions: xAxis,
-            updateXAxisOptions
+            xAxis,
+            updateXAxis
         };
     }
 });

From aae08849f5ead6de2cc0e262d794adff0d66cce5 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Sun, 7 Jul 2024 19:39:01 +0100
Subject: [PATCH 33/80] wodin plot tests

---
 app/static/src/app/components/WodinPlot.vue   |  12 +-
 app/static/src/app/plot.ts                    |   4 +-
 .../tests/unit/components/wodinPlot.test.ts   | 119 +++++++++++++++++-
 3 files changed, 125 insertions(+), 10 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index ed936491..6d786186 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -93,11 +93,15 @@ export default defineComponent({
 
         const defaultLayout = (): Partial<Layout> => {
             // Get generic layout, which will be modifed dynamically as required
-            return {
-                margin: {...margin, r: legendWidth.value},
+            const result =  {
+                margin: {...margin},
                 xaxis: { title: "Time" },
                 yaxis: { type: yAxisType.value }
             };
+            if (legendWidth.value) {
+              result.margin.r = legendWidth.value;
+            }
+            return result;
         };
 
         const preserveYAxisRange = (layout: Partial<Layout>) => {
@@ -135,7 +139,7 @@ export default defineComponent({
         }
 
         const relayout = async (event: PlotRelayoutEvent) => {
-            if (event["xaxis.autorange"] || event["xaxis.range[0]"]) {
+            if (event["xaxis.autorange"] || (event["xaxis.range[0]"] && event["xaxis.range[1]"])) {
                 const xAxis = axisFromEvent(event, "x");
                 if (props.hasLinkedXAxis) {
                   // Emit the x axis change, and handle update when options are propagated through prop
@@ -146,7 +150,7 @@ export default defineComponent({
                 }
             }
 
-          if (event["yaxis.autorange"] || event["yaxis.range[0]"]) {
+          if (event["yaxis.autorange"] || (event["yaxis.range[0]"] && event["yaxis.range[1]"])) {
               lastYAxisFromZoom.value = axisFromEvent(event, "y");
             }
         };
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 09c008f7..70aed056 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -1,4 +1,4 @@
-import { Dash, PlotData } from "plotly.js-basic-dist-min";
+import {Dash, Margin, PlotData} from "plotly.js-basic-dist-min";
 import { format } from "d3-format";
 import { Palette, paletteData } from "./palette";
 import type { AllFitData, FitData, FitDataLink } from "./store/fitData/state";
@@ -14,7 +14,7 @@ export const fadePlotStyle = "opacity:0.5;";
 // legend.
 export const margin = {
     t: 25
-};
+} as Partial<Margin>;
 
 export const config = {
     responsive: true
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index d8050c16..cf44af5d 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -1,4 +1,6 @@
 // Mock the import of plotly so we can mock Plotly methods
+import {margin} from "../../../src/app/plot";
+
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
     react: jest.fn(),
@@ -201,9 +203,8 @@ describe("WodinPlot", () => {
 
     const expectedLayout = {
         margin: { t: 25 },
-        uirevision: "true",
-        xaxis: { autorange: true, title: "Time" },
-        yaxis: { autorange: true, type: "linear" }
+        xaxis: { title: "Time" },
+        yaxis: { type: "linear" }
     };
 
     it("relayout reruns plotData and calls react if not autorange", async () => {
@@ -256,6 +257,60 @@ describe("WodinPlot", () => {
         expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLayout);
     });
 
+    it("relayout preserves locked y axis range", async () => {
+        const store = getStore(false, true);
+        const wrapper = getWrapper({}, store);
+        const { relayout } = wrapper.vm as any;
+        const relayoutEvent = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 7,
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 1,
+            "yaxis.range[1]": 2
+        };
+        await relayout(relayoutEvent);
+        expect(mockPlotDataFn.mock.calls.length).toBe(1);
+        expect(mockPlotDataFn.mock.calls[0][0]).toBe(2);
+        expect(mockPlotDataFn.mock.calls[0][1]).toBe(7);
+        expect(mockPlotDataFn.mock.calls[0][2]).toBe(1000);
+
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual({
+            ...expectedLayout,
+            yaxis: { type: "linear", autorange: false, range: [10, 20] } // locked y axis range
+        });
+    });
+
+    it("relayout saves and uses y axis range from last zoom if no locked y axis", async () => {
+        const wrapper = getWrapper();
+        const { relayout } = wrapper.vm as any;
+        const relayoutEvent1 = {
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 1,
+            "yaxis.range[1]": 2
+        };
+        await relayout(relayoutEvent1);
+
+        const relayoutEvent2 = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 7
+        };
+        await relayout(relayoutEvent2);
+
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls.length).toBe(1);
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual({
+            ...expectedLayout,
+            yaxis: { type: "linear", autorange: false, range: [1, 2] }
+        });
+    });
+
     it("relayout does nothing on autorange false if t0 is undefined", async () => {
         const wrapper = getWrapper();
         mockPlotElementOn(wrapper);
@@ -412,7 +467,7 @@ describe("WodinPlot", () => {
         expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
         const expectedLogScaleLayout = {
             ...expectedLayout,
-            yaxis: { autorange: true, type: "log" }
+            yaxis: { type: "log" }
         };
         expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLogScaleLayout);
     });
@@ -465,4 +520,60 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
     });
+
+    it("relayout emits updateXAxis event, if component has linked x axis and xaxis is in event", async () => {
+        const wrapper = getWrapper({ hasLinkedXAxis: true });
+        const relayoutEvent = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 4
+        };
+
+        const { relayout } = wrapper.vm as any;
+        await relayout(relayoutEvent);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([{autorange: false, range: [2, 4]}]);
+    });
+
+    it("relayout does not emit updateXAxis event, if xaxis is not in event", async () => {
+        const wrapper = getWrapper({ hasLinkedXAxis: true });
+        const relayoutEvent = {
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 2,
+            "yaxis.range[1]": 4
+        };
+
+        const { relayout } = wrapper.vm as any;
+        await relayout(relayoutEvent);
+        expect(wrapper.emitted("updateXAxis")).toBe(undefined);
+    });
+
+    it("update to linkedXAxis triggers relayout", async () => {
+        const wrapper = getWrapper({hasLInkedXAxis: true, linkedXAxis: {autorange: true}});
+        mockPlotElementOn(wrapper);
+        wrapper.setProps({ linkedXAxis: { autorange: false, range: [4, 6] } });
+        await nextTick();
+
+        expect(mockPlotDataFn).toHaveBeenCalledWith(4, 6, 1000);
+        expect(mockPlotlyReact).toHaveBeenCalledTimes(1);
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLayout);
+        expect(mockPlotlyReact.mock.calls[0][3]).toStrictEqual({ responsive: true });
+    });
+
+    it("drawPlot uses linked x axis to generate data", async () => {
+        const wrapper = getWrapper({
+            hasLinkedXAxis: true,
+            linkedXAxis: { autorange: false, range: [3, 5] }
+        });
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotDataFn.mock.calls.length).toBe(2);
+        expect(mockPlotDataFn.mock.calls[1][0]).toBe(3);
+        expect(mockPlotDataFn.mock.calls[1][1]).toBe(5);
+        expect(mockPlotDataFn.mock.calls[1][2]).toBe(1000);
+    });
 });

From 0d8e23717d17b7e834bea5f4825bbddf0466246b Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 12:14:14 +0100
Subject: [PATCH 34/80] fix unit tests and add e2e test

---
 app/static/src/app/components/WodinPlot.vue   |  7 +-
 app/static/src/app/components/run/RunPlot.vue |  1 -
 .../app/components/run/RunStochasticPlot.vue  |  1 -
 app/static/tests/e2e/code.etest.ts            | 18 -----
 app/static/tests/e2e/run.etest.ts             | 50 +++++++++++++
 app/static/tests/e2e/utils.ts                 | 19 +++++
 .../tests/unit/components/run/runPlot.test.ts | 74 +++++++++++++------
 .../components/run/runStochasticPlot.test.ts  | 46 +++++++++++-
 .../tests/unit/components/run/runTab.test.ts  | 34 ++++++++-
 .../tests/unit/components/wodinPlot.test.ts   |  7 +-
 app/static/tests/unit/serialiser.test.ts      |  8 +-
 .../tests/unit/store/basic/basic.test.ts      |  2 +-
 app/static/tests/unit/store/fit/fit.test.ts   |  2 +-
 .../tests/unit/store/graphs/actions.test.ts   |  7 +-
 .../tests/unit/store/graphs/getters.test.ts   | 11 ++-
 .../tests/unit/store/graphs/mutations.test.ts | 28 +++----
 .../unit/store/stochastic/stochastic.test.ts  |  4 +-
 17 files changed, 234 insertions(+), 85 deletions(-)
 create mode 100644 app/static/tests/e2e/run.etest.ts

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 6d786186..f8fb4465 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -46,11 +46,6 @@ export default defineComponent({
             required: false,
             default: true
         },
-        hasLinkedXAxis: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
         linkedXAxis: {
             type: Object as PropType<Partial<LayoutAxis> | null>,
             required: false,
@@ -141,7 +136,7 @@ export default defineComponent({
         const relayout = async (event: PlotRelayoutEvent) => {
             if (event["xaxis.autorange"] || (event["xaxis.range[0]"] && event["xaxis.range[1]"])) {
                 const xAxis = axisFromEvent(event, "x");
-                if (props.hasLinkedXAxis) {
+                if (props.linkedXAxis) {
                   // Emit the x axis change, and handle update when options are propagated through prop
                   emit("updateXAxis", xAxis);
                 } else {
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 16aea789..2128fb0c 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -5,7 +5,6 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
-        :has-linked-x-axis="true"
         :linked-x-axis="linkedXAxis"
         @updateXAxis="updateXAxis"
     >
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index 50b52fe5..a7ab1e8d 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -5,7 +5,6 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
-        :has-linked-x-axis="true"
         :linked-x-axis="linkedXAxis"
         @updateXAxis="updateXAxis"
     >
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index aeff8784..5a4b22cb 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -293,24 +293,6 @@ test.describe("Code Tab tests", () => {
         );
     });
 
-    const expectGraphVariables = async (page: Page, graphIndex: number, expectedVariables: string[]) => {
-        // expect to find these variables in config panel and on plot series
-        const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex + 1})`);
-        const configVars = await configPanel.locator(".variable .variable-name");
-        await expect(configVars).toHaveCount(expectedVariables.length);
-
-        const plotSummary = await page.locator(
-            `:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex + 1})`
-        );
-        for (let i = 0; i < expectedVariables.length; i++) {
-            await expect(configVars.nth(i)).toHaveText(expectedVariables[i]);
-            await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i + 1})`)).toHaveAttribute(
-                "name",
-                expectedVariables[i]
-            );
-        }
-    };
-
     test("can hide and unhide variables", async ({ page }) => {
         // drag I to Hidden Variables
         const iVariable = await page.locator(":nth-match(.graph-config-panel span.variable, 2)");
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
new file mode 100644
index 00000000..f626500a
--- /dev/null
+++ b/app/static/tests/e2e/run.etest.ts
@@ -0,0 +1,50 @@
+import { expect, test, Page } from "@playwright/test";
+import {expectGraphVariables} from "./utils";
+
+const addGraphWithVariable = async (page: Page, variableIdx: number) => {
+    await page.click("#add-graph-btn");
+    const count = await page.locator(".graph-config-panel").count();
+    // assume we drag variable from first graph config
+    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)")
+    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
+    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
+    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
+};
+
+const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
+    const graphs = await page.locator(".plot-container");
+    expect(await graphs.count()).toBe(expectedGraphCount);
+    for(let i = 0; i < expectedGraphCount; i++) {
+        const graph = graphs.nth(i);
+        const ticks = await graph.locator(".xtick text");
+        expect(await ticks.count()).toBe(expectedXTicks.length);
+        for(let tickIdx = 0; tickIdx < expectedXTicks.length; tickIdx++) {
+            await expect(ticks.nth(tickIdx)).toHaveText(expectedXTicks[tickIdx].toString());
+        }
+    }
+};
+
+test.describe("Run Tab", () => {
+    test("x axis zoom on plot is replicated in other plots", async ({ page }) => {
+        await page.goto("/apps/day1");
+
+        // 1. Add 2 additional graphs, and drag one variable to each of them
+        await addGraphWithVariable(page, 1);
+        await addGraphWithVariable(page, 1);
+        await expectGraphVariables(page, 0, ["R"]);
+        await expectGraphVariables(page, 1, ["S"]);
+        await expectGraphVariables(page, 2, ["I"]);
+        //Sanity check that each graph has expected initial x axis ticks for full 0-100 time range
+        await expectXTicks(page, 3, [0, 20, 40, 60, 80, 100]);
+
+        // 2. Drag to zoom to an area on the first graph
+        const firstGraphBoundingBox = await page.locator(":nth-match(.plot-container .draglayer .xy .nsewdrag, 1)").boundingBox()!;
+        await page.mouse.move(firstGraphBoundingBox.x + 100, firstGraphBoundingBox.y + 50);
+        await page.mouse.down();
+        await page.mouse.move(firstGraphBoundingBox.x + 300, firstGraphBoundingBox.y + 100);
+        await page.mouse.up();
+
+        // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
+        await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
+    });
+});
\ No newline at end of file
diff --git a/app/static/tests/e2e/utils.ts b/app/static/tests/e2e/utils.ts
index 337dd525..9a617e81 100644
--- a/app/static/tests/e2e/utils.ts
+++ b/app/static/tests/e2e/utils.ts
@@ -187,3 +187,22 @@ export const expectCanRunMultiSensitivity = async (page: Page, timeout = 10000)
     );
     await expect(await page.locator("#download-summary-btn")).toBeEnabled();
 };
+
+export const expectGraphVariables = async (page: Page, graphIndex: number, expectedVariables: string[]) => {
+    // expect to find these variables in config panel and on plot series
+    const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex + 1})`);
+    const configVars = await configPanel.locator(".variable .variable-name");
+    await expect(configVars).toHaveCount(expectedVariables.length);
+
+    const plotSummary = await page.locator(
+        `:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex + 1})`
+    );
+    for (let i = 0; i < expectedVariables.length; i++) {
+        await expect(configVars.nth(i)).toHaveText(expectedVariables[i]);
+        await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i + 1})`)).toHaveAttribute(
+            "name",
+            expectedVariables[i]
+        );
+    }
+};
+
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index 234144f1..bfdb20bd 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -87,6 +87,29 @@ describe("RunPlot", () => {
         config: [{ selectedVariables, unselectedVariables: [] }]
     };
 
+    const linkedXAxis = { autorange: false, range: [1, 2] };
+
+    const defaultRunState = () => mockRunState({
+        endTime: 99,
+        resultOde: mockResult,
+        parameterSets: [
+            {
+                name: "Set 1",
+                displayName: "Hey",
+                displayNameErrorMsg: "",
+                hidden: false,
+                parameterValues: { a: 2 }
+            },
+            {
+                name: "Set 2",
+                displayName: "Bye",
+                displayNameErrorMsg: "",
+                hidden: false,
+                parameterValues: { a: 4 }
+            }
+        ]
+    });
+
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -98,32 +121,14 @@ describe("RunPlot", () => {
                 model: {
                     paletteModel
                 },
-                run: mockRunState({
-                    endTime: 99,
-                    resultOde: mockResult,
-                    parameterSets: [
-                        {
-                            name: "Set 1",
-                            displayName: "Hey",
-                            displayNameErrorMsg: "",
-                            hidden: false,
-                            parameterValues: { a: 2 }
-                        },
-                        {
-                            name: "Set 2",
-                            displayName: "Bye",
-                            displayNameErrorMsg: "",
-                            hidden: false,
-                            parameterValues: { a: 4 }
-                        }
-                    ]
-                })
+                run: defaultRunState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
                 fadePlot: false,
-                graphIndex: 0
+                graphIndex: 0,
+                linkedXAxis
             },
             global: {
                 plugins: [store]
@@ -141,6 +146,7 @@ describe("RunPlot", () => {
             {},
             ["Hey", "Bye"]
         ]);
+        expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
 
         // Generates expected plot data from model
         const plotData = wodinPlot.props("plotData");
@@ -184,6 +190,32 @@ describe("RunPlot", () => {
         });
     });
 
+    it("emits updateXAxis event", () => {
+        const store = new Vuex.Store<BasicState>({
+            state: {
+                graphs: graphsState,
+                model: {
+                    paletteModel
+                },
+                run: defaultRunState()
+            } as any
+        });
+        const wrapper = shallowMount(RunPlot, {
+            props: {
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+        const wodinPlot = wrapper.findComponent(WodinPlot);
+        const xAxis = {autorange: false, range: [111, 222]}
+        wodinPlot.vm.$emit("updateXAxis", xAxis);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
+    });
+
     it("renders as expected when there are parameter set solutions", () => {
         const store = new Vuex.Store<BasicState>({
             state: {
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index 5a455417..3862e36d 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -32,7 +32,15 @@ describe("RunPlot for stochastic", () => {
 
     const selectedVariables = ["S", "I", "R"];
 
-    const graphsState = mockGraphsState({ config: [{ selectedVariables, unselectedVariables: [] }] });
+    const graphsState = mockGraphsState({
+            config: [{
+            id: "1234",
+            selectedVariables,
+            unselectedVariables: []
+        }]
+    });
+
+    const linkedXAxis = { autorange: false, range: [1, 2] };
 
     afterEach(() => {
         jest.clearAllMocks();
@@ -57,7 +65,8 @@ describe("RunPlot for stochastic", () => {
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
                 fadePlot: false,
-                graphIndex: 0
+                graphIndex: 0,
+                linkedXAxis
             },
             global: {
                 plugins: [store]
@@ -69,6 +78,7 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("endTime")).toBe(99);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution]);
         expect(wodinPlot.props("recalculateOnRelayout")).toBe(true);
+        expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
 
         // Generates expected plot data from model
         const plotData = wodinPlot.props("plotData");
@@ -103,6 +113,38 @@ describe("RunPlot for stochastic", () => {
         ]);
     });
 
+    it("emits updateXAxis event", () => {
+        const store = new Vuex.Store<StochasticState>({
+            state: {
+                graphs: graphsState,
+                model: mockModelState({ paletteModel }),
+                run: {
+                    endTime: 99,
+                    numberOfReplicates: 20,
+                    resultDiscrete: mockResult
+                },
+                config: {
+                    maxReplicatesDisplay: 50,
+                    maxReplicatesRun: 1000
+                }
+            } as any
+        });
+        const wrapper = shallowMount(RunStochasticPlot, {
+            props: {
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+        const wodinPlot = wrapper.findComponent(WodinPlot);
+        const xAxis = {autorange: false, range: [111, 222]}
+        wodinPlot.vm.$emit("updateXAxis", xAxis);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
+    });
+
     it("renders as expected when model has no stochastic result", () => {
         const store = new Vuex.Store<StochasticState>({
             state: {
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 4b79edee..ffd01ed7 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -66,8 +66,8 @@ describe("RunTab", () => {
                     namespaced: true,
                     state: mockGraphsState({
                         config: [
-                            { selectedVariables, unselectedVariables: [] },
-                            { selectedVariables: [], unselectedVariables: [] }
+                            { id: "123", selectedVariables, unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
                         ]
                     }),
                     getters: graphGetters
@@ -112,8 +112,8 @@ describe("RunTab", () => {
                     namespaced: true,
                     state: mockGraphsState({
                         config: [
-                            { selectedVariables: ["S"], unselectedVariables: [] },
-                            { selectedVariables: [], unselectedVariables: [] }
+                            { id: "123", selectedVariables: ["S"], unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
                         ]
                     }),
                     getters: graphGetters
@@ -154,8 +154,10 @@ describe("RunTab", () => {
         expect(plots.length).toBe(2);
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({autorange: true});
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({autorange: true});
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -172,6 +174,17 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(RunStochasticPlot).exists()).toBe(false);
     });
 
+    it("propagates x axis changes to all run plots", async () => {
+       const wrapper = getWrapper();
+       const plots = wrapper.findAllComponents(RunPlot);
+       expect(plots.length).toBe(2);
+       const newXAxis = {autorange: false, range: [1, 10]};
+       plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
+       await nextTick();
+       expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+       expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+    });
+
     it("renders as expected when app is stochastic", () => {
         const wrapper = getStochasticWrapper(
             {},
@@ -183,13 +196,26 @@ describe("RunTab", () => {
         expect(plots.length).toBe(2);
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({autorange: true});
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({autorange: true});
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
     });
 
+    it("propagates x axis changes to all run stochastic plots", async () => {
+        const wrapper = getStochasticWrapper();
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.length).toBe(2);
+        const newXAxis = {autorange: false, range: [1, 10]};
+        plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
+        await nextTick();
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+    });
+
     it("disables run button when state has no runner", () => {
         const wrapper = getWrapper({ odinRunnerOde: null }, defaultRunState, false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(true);
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index cf44af5d..1062bc41 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -522,7 +522,7 @@ describe("WodinPlot", () => {
     });
 
     it("relayout emits updateXAxis event, if component has linked x axis and xaxis is in event", async () => {
-        const wrapper = getWrapper({ hasLinkedXAxis: true });
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
         const relayoutEvent = {
             "xaxis.autorange": false,
             "xaxis.range[0]": 2,
@@ -535,7 +535,7 @@ describe("WodinPlot", () => {
     });
 
     it("relayout does not emit updateXAxis event, if xaxis is not in event", async () => {
-        const wrapper = getWrapper({ hasLinkedXAxis: true });
+        const wrapper = getWrapper({ linkedXAxis: {autorange: true} });
         const relayoutEvent = {
             "yaxis.autorange": false,
             "yaxis.range[0]": 2,
@@ -548,7 +548,7 @@ describe("WodinPlot", () => {
     });
 
     it("update to linkedXAxis triggers relayout", async () => {
-        const wrapper = getWrapper({hasLInkedXAxis: true, linkedXAxis: {autorange: true}});
+        const wrapper = getWrapper({linkedXAxis: {autorange: true}});
         mockPlotElementOn(wrapper);
         wrapper.setProps({ linkedXAxis: { autorange: false, range: [4, 6] } });
         await nextTick();
@@ -564,7 +564,6 @@ describe("WodinPlot", () => {
 
     it("drawPlot uses linked x axis to generate data", async () => {
         const wrapper = getWrapper({
-            hasLinkedXAxis: true,
             linkedXAxis: { autorange: false, range: [3, 5] }
         });
         mockPlotElementOn(wrapper);
diff --git a/app/static/tests/unit/serialiser.test.ts b/app/static/tests/unit/serialiser.test.ts
index 95e2a022..8bac9460 100644
--- a/app/static/tests/unit/serialiser.test.ts
+++ b/app/static/tests/unit/serialiser.test.ts
@@ -371,6 +371,7 @@ describe("serialise", () => {
         },
         config: [
             {
+                id: "123",
                 selectedVariables: ["S", "I"],
                 unselectedVariables: ["R"]
             }
@@ -709,8 +710,6 @@ describe("serialise", () => {
             openVisualisationTab: VisualisationTab.Fit,
             code: mockCodeState(),
             model: mockModelState({
-                selectedVariables: undefined,
-                unselectedVariables: undefined,
                 odinModelResponse: {
                     metadata: {
                         variables: ["S", "I", "R"]
@@ -736,12 +735,13 @@ describe("serialise", () => {
             sensitivity: {},
             fitData: {},
             modelFit: {},
-            graphs: defaultGraphsState,
+            graphs: defaultGraphsState(),
             versions: null
         } as any;
         deserialiseState(target, serialised);
         expect(target.graphs.config[0].selectedVariables).toStrictEqual(["S", "I", "R"]);
         expect(target.graphs.config[0].unselectedVariables).toStrictEqual([]);
+        expect(target.graphs.config[0].id.length).toBe(32);
     });
 
     it("deserialises default graph settings when undefined in serialised state", () => {
@@ -771,7 +771,7 @@ describe("serialise", () => {
             fitData: {},
             modelFit: {},
             versions: null,
-            graphs: defaultGraphsState
+            graphs: defaultGraphsState()
         } as any;
         // sanity check
         expect(target.graphs.settings.logScaleYAxis).toBe(false);
diff --git a/app/static/tests/unit/store/basic/basic.test.ts b/app/static/tests/unit/store/basic/basic.test.ts
index b8e77837..36a52d22 100644
--- a/app/static/tests/unit/store/basic/basic.test.ts
+++ b/app/static/tests/unit/store/basic/basic.test.ts
@@ -2,7 +2,7 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
diff --git a/app/static/tests/unit/store/fit/fit.test.ts b/app/static/tests/unit/store/fit/fit.test.ts
index 33fe67d9..a3066d20 100644
--- a/app/static/tests/unit/store/fit/fit.test.ts
+++ b/app/static/tests/unit/store/fit/fit.test.ts
@@ -2,7 +2,7 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index 073397e9..c3863eef 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -84,9 +84,8 @@ describe("Graphs actions", () => {
         });
         expect(commit).toHaveBeenCalledTimes(1);
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.AddGraph);
-        expect(commit.mock.calls[0][1]).toStrictEqual({
-            selectedVariables: [],
-            unselectedVariables: ["b", "a", "c"]
-        });
+        expect(commit.mock.calls[0][1].selectedVariables).toStrictEqual([]);
+        expect(commit.mock.calls[0][1].unselectedVariables).toStrictEqual(["b", "a", "c"]);
+        expect(commit.mock.calls[0][1].id.length).toBe(32);
     });
 });
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
index feefc629..9885512b 100644
--- a/app/static/tests/unit/store/graphs/getters.test.ts
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -5,8 +5,8 @@ describe("GraphsGetters", () => {
     it("gets allSelectedVariables", () => {
         const state = mockGraphsState({
             config: [
-                { selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"] },
-                { selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
+                { id: "123", selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"] },
+                { id: "456",selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
             ]
         });
         expect((getters[GraphsGetter.allSelectedVariables] as any)(state)).toStrictEqual(["a", "b", "d"]);
@@ -27,4 +27,11 @@ describe("GraphsGetters", () => {
         } as any;
         expect((getters[GraphsGetter.hiddenVariables] as any)({}, testGetters, rootState)).toStrictEqual(["e", "c"]);
     });
+
+    it("gets legend width", () => {
+        const testGetters = {
+            allSelectedVariables: ["a", "zz", "a longer name"]
+        };
+        expect((getters[GraphsGetter.legendWidth] as any)({}, testGetters)).toBe(170);
+    });
 });
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index 3dea91a2..e5a16f23 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -29,8 +29,8 @@ describe("Graphs mutations", () => {
     it("SetSelectedVariables sets selected and unselected variables", () => {
         const testState = mockGraphsState({
             config: [
-                { selectedVariables: [], unselectedVariables: [] },
-                { selectedVariables: [], unselectedVariables: [] }
+                { id: "123", selectedVariables: [], unselectedVariables: [] },
+                { id: "456", selectedVariables: [], unselectedVariables: [] }
             ]
         });
         mutations.SetSelectedVariables(testState, {
@@ -38,33 +38,33 @@ describe("Graphs mutations", () => {
             selectedVariables: ["x", "z"],
             unselectedVariables: ["y"]
         });
-        expect(testState.config[1]).toStrictEqual({ selectedVariables: ["x", "z"], unselectedVariables: ["y"] });
-        expect(testState.config[0]).toStrictEqual({ selectedVariables: [], unselectedVariables: [] });
+        expect(testState.config[1]).toStrictEqual({ id: "456", selectedVariables: ["x", "z"], unselectedVariables: ["y"] });
+        expect(testState.config[0]).toStrictEqual({ id: "123", selectedVariables: [], unselectedVariables: [] });
     });
 
     it("AddGraph pushes new graph to config", () => {
         const testState = mockGraphsState({
-            config: [{ selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
+            config: [{ id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
         });
-        mutations.AddGraph(testState, { selectedVariables: [], unselectedVariables: ["b", "a", "c"] });
+        mutations.AddGraph(testState, { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"] });
         expect(testState.config).toStrictEqual([
-            { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-            { selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
-        ]);
+            { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+            { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
+        ])
     });
 
     it("DeleteGraph removes graph from config", () => {
         const testState = mockGraphsState({
             config: [
-                { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-                { selectedVariables: ["b"], unselectedVariables: ["a", "c"] },
-                { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+                { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+                { id: "2", selectedVariables: ["b"], unselectedVariables: ["a", "c"] },
+                { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
             ]
         });
         mutations.DeleteGraph(testState, 1);
         expect(testState.config).toStrictEqual([
-            { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-            { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+            { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+            { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
         ]);
     });
 });
diff --git a/app/static/tests/unit/store/stochastic/stochastic.test.ts b/app/static/tests/unit/store/stochastic/stochastic.test.ts
index a1b519bc..c4a2e0fe 100644
--- a/app/static/tests/unit/store/stochastic/stochastic.test.ts
+++ b/app/static/tests/unit/store/stochastic/stochastic.test.ts
@@ -2,11 +2,11 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
-describe("basic", () => {
+describe("stochasic", () => {
     it("generates and saves sessionId", async () => {
         const { storeOptions } = await import("../../../../src/app/store/stochastic/stochastic");
         const state = storeOptions.state as any;

From 98125033bdba7d27d58926f146922bf7b3246f1a Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 13:51:18 +0100
Subject: [PATCH 35/80] lint

---
 app/static/src/app/components/WodinPlot.vue   | 23 ++++++++++++-------
 app/static/src/app/components/run/RunTab.vue  |  2 +-
 app/static/src/app/store/graphs/getters.ts    |  3 ++-
 app/static/tests/e2e/code.etest.ts            |  3 +--
 app/static/tests/e2e/run.etest.ts             |  8 +++----
 .../tests/unit/components/wodinPlot.test.ts   |  2 --
 .../tests/unit/store/graphs/mutations.test.ts |  6 ++++-
 7 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index f8fb4465..e2e75450 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -99,16 +99,24 @@ export default defineComponent({
             return result;
         };
 
-        const preserveYAxisRange = (layout: Partial<Layout>) => {
+        const preserveYAxisRange = (layout: Partial<Layout>): Partial<Layout> => {
           // When updating plot view in response to some data change or event, retain Y axis range in layout
           // either from the locked range, or from the last range user zoomed to.
           // (Locked range will survive re-mount and tab change, the last range from zoom will not)
+          const result = {...layout};
           if (lockYAxis.value) {
-            layout.yaxis!.range = [...yAxisRange.value];
-            layout.yaxis!.autorange = false;
+            result.yaxis = {
+              ...result.yaxis,
+              range: [...yAxisRange.value],
+              autorange: false
+            };
           } else if (lastYAxisFromZoom.value) {
-            layout.yaxis = {...layout.yaxis, ...lastYAxisFromZoom.value}
+            result.yaxis = {
+              ...result.yaxis,
+              ...lastYAxisFromZoom.value
+            }
           }
+          return result;
         };
 
         const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
@@ -119,8 +127,7 @@ export default defineComponent({
                 data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
             }
 
-            const layout = defaultLayout();
-            preserveYAxisRange(layout);
+            const layout = preserveYAxisRange(defaultLayout());
 
             const el = plot.value as HTMLElement;
             await react(el, data, layout, config);
@@ -164,9 +171,9 @@ export default defineComponent({
 
                 if (hasPlotData.value) {
                     const el = plot.value as unknown;
-                    const layout = defaultLayout();
+                    let layout = defaultLayout();
                     if (!toggleLogScale) {
-                      preserveYAxisRange(layout);
+                      layout = preserveYAxisRange(layout);
                     }
                     const configCopy = { ...config } as Partial<Config>;
 
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index cfaa246d..06cbe2a8 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -55,6 +55,7 @@
 import { useStore } from "vuex";
 import {computed, defineComponent, Ref, ref} from "vue";
 import VueFeather from "vue-feather";
+import {LayoutAxis} from "plotly.js-basic-dist-min";
 import { RunMutation } from "../../store/run/mutations";
 import RunPlot from "./RunPlot.vue";
 import ActionRequiredMessage from "../ActionRequiredMessage.vue";
@@ -69,7 +70,6 @@ import { AppType } from "../../store/appState/state";
 import { ModelGetter } from "../../store/model/getters";
 import RunStochasticPlot from "./RunStochasticPlot.vue";
 import { GraphsGetter } from "../../store/graphs/getters";
-import {LayoutAxis} from "plotly.js-basic-dist-min";
 
 export default defineComponent({
     name: "RunTab",
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index 86e071ee..a6b7a65c 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -30,7 +30,8 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     },
     [GraphsGetter.legendWidth]: (_, graphsGetters): number  => {
         // Heuristic for setting graph legend width based on string length of longest variable name
-        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) => a.length < b.length ? 1 : -1)[0];
+        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables]
+            .sort((a: string, b: string) => a.length < b.length ? 1 : -1)[0];
         return (longestVar.length * 10) + 40;
     }
 };
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 5a4b22cb..4fedf28f 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -1,7 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
-import { plot } from "plotly.js-basic-dist-min";
 import PlaywrightConfig from "../../playwright.config";
-import { saveSessionTimeout, writeCode } from "./utils";
+import { saveSessionTimeout, writeCode ,expectGraphVariables} from "./utils";
 
 export const newValidCode = `## Derivatives
 deriv(y1) <- sigma * (y2 - y1)
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
index f626500a..f7111077 100644
--- a/app/static/tests/e2e/run.etest.ts
+++ b/app/static/tests/e2e/run.etest.ts
@@ -34,14 +34,14 @@ test.describe("Run Tab", () => {
         await expectGraphVariables(page, 0, ["R"]);
         await expectGraphVariables(page, 1, ["S"]);
         await expectGraphVariables(page, 2, ["I"]);
-        //Sanity check that each graph has expected initial x axis ticks for full 0-100 time range
+        // Sanity check that each graph has expected initial x axis ticks for full 0-100 time range
         await expectXTicks(page, 3, [0, 20, 40, 60, 80, 100]);
 
         // 2. Drag to zoom to an area on the first graph
-        const firstGraphBoundingBox = await page.locator(":nth-match(.plot-container .draglayer .xy .nsewdrag, 1)").boundingBox()!;
-        await page.mouse.move(firstGraphBoundingBox.x + 100, firstGraphBoundingBox.y + 50);
+        const graphBounds = await page.locator(":nth-match(.plot .draglayer .xy .nsewdrag, 1)").boundingBox()!;
+        await page.mouse.move(graphBounds.x + 100, graphBounds.y + 50);
         await page.mouse.down();
-        await page.mouse.move(firstGraphBoundingBox.x + 300, firstGraphBoundingBox.y + 100);
+        await page.mouse.move(graphBounds.x + 300, graphBounds.y + 100);
         await page.mouse.up();
 
         // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index 1062bc41..cf664d21 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -1,6 +1,4 @@
 // Mock the import of plotly so we can mock Plotly methods
-import {margin} from "../../../src/app/plot";
-
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
     react: jest.fn(),
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index e5a16f23..fab10dc8 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -38,7 +38,11 @@ describe("Graphs mutations", () => {
             selectedVariables: ["x", "z"],
             unselectedVariables: ["y"]
         });
-        expect(testState.config[1]).toStrictEqual({ id: "456", selectedVariables: ["x", "z"], unselectedVariables: ["y"] });
+        expect(testState.config[1]).toStrictEqual({
+            id: "456",
+            selectedVariables: ["x", "z"],
+            unselectedVariables: ["y"]
+        });
         expect(testState.config[0]).toStrictEqual({ id: "123", selectedVariables: [], unselectedVariables: [] });
     });
 

From 018a165441c00d483d9b82af6db2356918cf3744 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 13:52:13 +0100
Subject: [PATCH 36/80] lint and format

---
 app/static/src/app/components/WodinPlot.vue   | 94 +++++++++++--------
 app/static/src/app/components/run/RunPlot.vue | 14 +--
 .../app/components/run/RunStochasticPlot.vue  | 14 +--
 app/static/src/app/components/run/RunTab.vue  | 18 ++--
 app/static/src/app/plot.ts                    |  2 +-
 app/static/src/app/store/graphs/actions.ts    |  2 +-
 app/static/src/app/store/graphs/getters.ts    |  9 +-
 app/static/src/app/store/graphs/graphs.ts     |  2 +-
 app/static/tests/e2e/code.etest.ts            |  2 +-
 app/static/tests/e2e/run.etest.ts             | 10 +-
 app/static/tests/e2e/utils.ts                 |  1 -
 .../tests/unit/components/run/runPlot.test.ts | 43 ++++-----
 .../components/run/runStochasticPlot.test.ts  | 14 +--
 .../tests/unit/components/run/runTab.test.ts  | 26 ++---
 .../tests/unit/components/wodinPlot.test.ts   |  6 +-
 .../tests/unit/store/graphs/getters.test.ts   |  2 +-
 .../tests/unit/store/graphs/mutations.test.ts |  2 +-
 17 files changed, 139 insertions(+), 122 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index e2e75450..4c771323 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -10,15 +10,24 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref} from "vue";
+import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref } from "vue";
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
-import {newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config, LayoutAxis} from "plotly.js-basic-dist-min";
+import {
+    newPlot,
+    react,
+    PlotRelayoutEvent,
+    Plots,
+    AxisType,
+    Layout,
+    Config,
+    LayoutAxis
+} from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
 import { YAxisRange } from "../store/graphs/state";
-import {GraphsGetter} from "../store/graphs/getters";
+import { GraphsGetter } from "../store/graphs/getters";
 
 export default defineComponent({
     name: "WodinPlot",
@@ -88,35 +97,35 @@ export default defineComponent({
 
         const defaultLayout = (): Partial<Layout> => {
             // Get generic layout, which will be modifed dynamically as required
-            const result =  {
-                margin: {...margin},
+            const result = {
+                margin: { ...margin },
                 xaxis: { title: "Time" },
                 yaxis: { type: yAxisType.value }
             };
             if (legendWidth.value) {
-              result.margin.r = legendWidth.value;
+                result.margin.r = legendWidth.value;
             }
             return result;
         };
 
         const preserveYAxisRange = (layout: Partial<Layout>): Partial<Layout> => {
-          // When updating plot view in response to some data change or event, retain Y axis range in layout
-          // either from the locked range, or from the last range user zoomed to.
-          // (Locked range will survive re-mount and tab change, the last range from zoom will not)
-          const result = {...layout};
-          if (lockYAxis.value) {
-            result.yaxis = {
-              ...result.yaxis,
-              range: [...yAxisRange.value],
-              autorange: false
-            };
-          } else if (lastYAxisFromZoom.value) {
-            result.yaxis = {
-              ...result.yaxis,
-              ...lastYAxisFromZoom.value
+            // When updating plot view in response to some data change or event, retain Y axis range in layout
+            // either from the locked range, or from the last range user zoomed to.
+            // (Locked range will survive re-mount and tab change, the last range from zoom will not)
+            const result = { ...layout };
+            if (lockYAxis.value) {
+                result.yaxis = {
+                    ...result.yaxis,
+                    range: [...yAxisRange.value],
+                    autorange: false
+                };
+            } else if (lastYAxisFromZoom.value) {
+                result.yaxis = {
+                    ...result.yaxis,
+                    ...lastYAxisFromZoom.value
+                };
             }
-          }
-          return result;
+            return result;
         };
 
         const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
@@ -134,26 +143,26 @@ export default defineComponent({
         };
 
         const axisFromEvent = (event: PlotRelayoutEvent, axisLetter: "x" | "y"): Partial<LayoutAxis> => {
-         return {
-            "autorange": event[`${axisLetter}axis.autorange`] || false,
-            "range": [event[`${axisLetter}axis.range[0]`], event[`${axisLetter}axis.range[1]`]]
-          };
-        }
+            return {
+                autorange: event[`${axisLetter}axis.autorange`] || false,
+                range: [event[`${axisLetter}axis.range[0]`], event[`${axisLetter}axis.range[1]`]]
+            };
+        };
 
         const relayout = async (event: PlotRelayoutEvent) => {
             if (event["xaxis.autorange"] || (event["xaxis.range[0]"] && event["xaxis.range[1]"])) {
                 const xAxis = axisFromEvent(event, "x");
                 if (props.linkedXAxis) {
-                  // Emit the x axis change, and handle update when options are propagated through prop
-                  emit("updateXAxis", xAxis);
+                    // Emit the x axis change, and handle update when options are propagated through prop
+                    emit("updateXAxis", xAxis);
                 } else {
-                  // No linked x axis, so this plot can just update itself directly
-                  await updateXAxisRange(xAxis);
+                    // No linked x axis, so this plot can just update itself directly
+                    await updateXAxisRange(xAxis);
                 }
             }
 
-          if (event["yaxis.autorange"] || (event["yaxis.range[0]"] && event["yaxis.range[1]"])) {
-              lastYAxisFromZoom.value = axisFromEvent(event, "y");
+            if (event["yaxis.autorange"] || (event["yaxis.range[0]"] && event["yaxis.range[1]"])) {
+                lastYAxisFromZoom.value = axisFromEvent(event, "y");
             }
         };
 
@@ -173,15 +182,15 @@ export default defineComponent({
                     const el = plot.value as unknown;
                     let layout = defaultLayout();
                     if (!toggleLogScale) {
-                      layout = preserveYAxisRange(layout);
+                        layout = preserveYAxisRange(layout);
                     }
                     const configCopy = { ...config } as Partial<Config>;
 
                     let data;
                     if (!props.linkedXAxis || props.linkedXAxis.autorange) {
-                      data = baseData.value;
+                        data = baseData.value;
                     } else {
-                      data = props.plotData(props.linkedXAxis.range![0], props.linkedXAxis.range![1], nPoints);
+                        data = props.plotData(props.linkedXAxis.range![0], props.linkedXAxis.range![1], nPoints);
                     }
 
                     newPlot(el as HTMLElement, data, layout, configCopy);
@@ -214,11 +223,14 @@ export default defineComponent({
                 drawPlot(true);
             }
         });
-        watch(() => props.linkedXAxis, () => {
-          if (props.linkedXAxis) {
-            updateXAxisRange(props.linkedXAxis);
-          }
-        });
+        watch(
+            () => props.linkedXAxis,
+            () => {
+                if (props.linkedXAxis) {
+                    updateXAxisRange(props.linkedXAxis);
+                }
+            }
+        );
 
         onUnmounted(() => {
             if (resizeObserver) {
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 2128fb0c..fe5cf83a 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
-import {LayoutAxis, PlotData} from "plotly.js-basic-dist-min";
+import { LayoutAxis, PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
 import { odinToPlotly, allFitDataToPlotly, WodinPlotData, filterSeriesSet } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
@@ -34,15 +34,15 @@ export default defineComponent({
             default: 0
         },
         linkedXAxis: {
-          type: Object as PropType<Partial<LayoutAxis> | null>,
-          required: true
+            type: Object as PropType<Partial<LayoutAxis> | null>,
+            required: true
         }
     },
     components: {
         WodinPlot
     },
     emits: ["updateXAxis"],
-    setup(props, {emit}) {
+    setup(props, { emit }) {
         const store = useStore();
 
         const solution = computed(() => store.state.run.resultOde?.solution);
@@ -119,8 +119,8 @@ export default defineComponent({
         };
 
         const updateXAxis = (options: Partial<LayoutAxis>) => {
-          emit("updateXAxis", options);
-        }
+            emit("updateXAxis", options);
+        };
 
         return {
             placeholderMessage,
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index a7ab1e8d..15330fd6 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
-import {LayoutAxis} from "plotly.js-basic-dist-min";
+import { LayoutAxis } from "plotly.js-basic-dist-min";
 import { WodinPlotData, discreteSeriesSetToPlotly, filterSeriesSet } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
 import { runPlaceholderMessage } from "../../utils";
@@ -30,15 +30,15 @@ export default defineComponent({
             default: 0
         },
         linkedXAxis: {
-          type: Object as PropType<Partial<LayoutAxis> | null>,
-          required: true
+            type: Object as PropType<Partial<LayoutAxis> | null>,
+            required: true
         }
     },
     components: {
         WodinPlot
     },
     emits: ["updateXAxis"],
-    setup(props, {emit}) {
+    setup(props, { emit }) {
         const store = useStore();
 
         const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
@@ -73,9 +73,9 @@ export default defineComponent({
             );
         };
 
-      const updateXAxis = (options: Partial<LayoutAxis>) => {
-        emit("updateXAxis", options);
-      }
+        const updateXAxis = (options: Partial<LayoutAxis>) => {
+            emit("updateXAxis", options);
+        };
 
         return {
             placeholderMessage,
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 06cbe2a8..ecce3640 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -12,12 +12,14 @@
                 :linked-x-axis="xAxis"
                 @updateXAxis="updateXAxis"
             ></run-stochastic-plot>
-            <run-plot v-else
-                      :fade-plot="!!updateMsg"
-                      :model-fit="false"
-                      :graph-index="index"
-                      :linked-x-axis="xAxis"
-                      @updateXAxis="updateXAxis">
+            <run-plot
+                v-else
+                :fade-plot="!!updateMsg"
+                :model-fit="false"
+                :graph-index="index"
+                :linked-x-axis="xAxis"
+                @updateXAxis="updateXAxis"
+            >
                 <div v-if="sumOfSquares">
                     <span>Sum of squares: {{ sumOfSquares }}</span>
                 </div>
@@ -53,9 +55,9 @@
 
 <script lang="ts">
 import { useStore } from "vuex";
-import {computed, defineComponent, Ref, ref} from "vue";
+import { computed, defineComponent, Ref, ref } from "vue";
 import VueFeather from "vue-feather";
-import {LayoutAxis} from "plotly.js-basic-dist-min";
+import { LayoutAxis } from "plotly.js-basic-dist-min";
 import { RunMutation } from "../../store/run/mutations";
 import RunPlot from "./RunPlot.vue";
 import ActionRequiredMessage from "../ActionRequiredMessage.vue";
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 70aed056..bdee7674 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -1,4 +1,4 @@
-import {Dash, Margin, PlotData} from "plotly.js-basic-dist-min";
+import { Dash, Margin, PlotData } from "plotly.js-basic-dist-min";
 import { format } from "d3-format";
 import { Palette, paletteData } from "./palette";
 import type { AllFitData, FitData, FitDataLink } from "./store/fitData/state";
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index 1f9b1511..6e068a7d 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -3,7 +3,7 @@ import { GraphsMutation } from "./mutations";
 import { AppState, AppType } from "../appState/state";
 import { FitDataAction } from "../fitData/actions";
 import { GraphsState } from "./state";
-import {newUid} from "../../utils";
+import { newUid } from "../../utils";
 
 export enum GraphsAction {
     UpdateSelectedVariables = "UpdateSelectedVariables",
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index a6b7a65c..9a891998 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -28,10 +28,11 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
         const allSelected = graphsGetters[GraphsGetter.allSelectedVariables];
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     },
-    [GraphsGetter.legendWidth]: (_, graphsGetters): number  => {
+    [GraphsGetter.legendWidth]: (_, graphsGetters): number => {
         // Heuristic for setting graph legend width based on string length of longest variable name
-        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables]
-            .sort((a: string, b: string) => a.length < b.length ? 1 : -1)[0];
-        return (longestVar.length * 10) + 40;
+        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) =>
+            a.length < b.length ? 1 : -1
+        )[0];
+        return longestVar.length * 10 + 40;
     }
 };
diff --git a/app/static/src/app/store/graphs/graphs.ts b/app/static/src/app/store/graphs/graphs.ts
index 39e2a9bf..9c242084 100644
--- a/app/static/src/app/store/graphs/graphs.ts
+++ b/app/static/src/app/store/graphs/graphs.ts
@@ -2,7 +2,7 @@ import { GraphsState } from "./state";
 import { actions } from "./actions";
 import { getters } from "./getters";
 import { mutations } from "./mutations";
-import {newUid} from "../../utils";
+import { newUid } from "../../utils";
 
 export const defaultState = (): GraphsState => ({
     config: [
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 4fedf28f..49a1d072 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import { saveSessionTimeout, writeCode ,expectGraphVariables} from "./utils";
+import { saveSessionTimeout, writeCode, expectGraphVariables } from "./utils";
 
 export const newValidCode = `## Derivatives
 deriv(y1) <- sigma * (y2 - y1)
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
index f7111077..18cd38d8 100644
--- a/app/static/tests/e2e/run.etest.ts
+++ b/app/static/tests/e2e/run.etest.ts
@@ -1,11 +1,11 @@
 import { expect, test, Page } from "@playwright/test";
-import {expectGraphVariables} from "./utils";
+import { expectGraphVariables } from "./utils";
 
 const addGraphWithVariable = async (page: Page, variableIdx: number) => {
     await page.click("#add-graph-btn");
     const count = await page.locator(".graph-config-panel").count();
     // assume we drag variable from first graph config
-    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)")
+    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
     const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
     await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
     await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
@@ -14,11 +14,11 @@ const addGraphWithVariable = async (page: Page, variableIdx: number) => {
 const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
     const graphs = await page.locator(".plot-container");
     expect(await graphs.count()).toBe(expectedGraphCount);
-    for(let i = 0; i < expectedGraphCount; i++) {
+    for (let i = 0; i < expectedGraphCount; i++) {
         const graph = graphs.nth(i);
         const ticks = await graph.locator(".xtick text");
         expect(await ticks.count()).toBe(expectedXTicks.length);
-        for(let tickIdx = 0; tickIdx < expectedXTicks.length; tickIdx++) {
+        for (let tickIdx = 0; tickIdx < expectedXTicks.length; tickIdx++) {
             await expect(ticks.nth(tickIdx)).toHaveText(expectedXTicks[tickIdx].toString());
         }
     }
@@ -47,4 +47,4 @@ test.describe("Run Tab", () => {
         // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
         await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
     });
-});
\ No newline at end of file
+});
diff --git a/app/static/tests/e2e/utils.ts b/app/static/tests/e2e/utils.ts
index 9a617e81..24c89ae5 100644
--- a/app/static/tests/e2e/utils.ts
+++ b/app/static/tests/e2e/utils.ts
@@ -205,4 +205,3 @@ export const expectGraphVariables = async (page: Page, graphIndex: number, expec
         );
     }
 };
-
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index bfdb20bd..a294067b 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -89,26 +89,27 @@ describe("RunPlot", () => {
 
     const linkedXAxis = { autorange: false, range: [1, 2] };
 
-    const defaultRunState = () => mockRunState({
-        endTime: 99,
-        resultOde: mockResult,
-        parameterSets: [
-            {
-                name: "Set 1",
-                displayName: "Hey",
-                displayNameErrorMsg: "",
-                hidden: false,
-                parameterValues: { a: 2 }
-            },
-            {
-                name: "Set 2",
-                displayName: "Bye",
-                displayNameErrorMsg: "",
-                hidden: false,
-                parameterValues: { a: 4 }
-            }
-        ]
-    });
+    const defaultRunState = () =>
+        mockRunState({
+            endTime: 99,
+            resultOde: mockResult,
+            parameterSets: [
+                {
+                    name: "Set 1",
+                    displayName: "Hey",
+                    displayNameErrorMsg: "",
+                    hidden: false,
+                    parameterValues: { a: 2 }
+                },
+                {
+                    name: "Set 2",
+                    displayName: "Bye",
+                    displayNameErrorMsg: "",
+                    hidden: false,
+                    parameterValues: { a: 4 }
+                }
+            ]
+        });
 
     afterEach(() => {
         jest.clearAllMocks();
@@ -211,7 +212,7 @@ describe("RunPlot", () => {
             }
         });
         const wodinPlot = wrapper.findComponent(WodinPlot);
-        const xAxis = {autorange: false, range: [111, 222]}
+        const xAxis = { autorange: false, range: [111, 222] };
         wodinPlot.vm.$emit("updateXAxis", xAxis);
         expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
     });
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index 3862e36d..a812eb37 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -33,11 +33,13 @@ describe("RunPlot for stochastic", () => {
     const selectedVariables = ["S", "I", "R"];
 
     const graphsState = mockGraphsState({
-            config: [{
-            id: "1234",
-            selectedVariables,
-            unselectedVariables: []
-        }]
+        config: [
+            {
+                id: "1234",
+                selectedVariables,
+                unselectedVariables: []
+            }
+        ]
     });
 
     const linkedXAxis = { autorange: false, range: [1, 2] };
@@ -140,7 +142,7 @@ describe("RunPlot for stochastic", () => {
             }
         });
         const wodinPlot = wrapper.findComponent(WodinPlot);
-        const xAxis = {autorange: false, range: [111, 222]}
+        const xAxis = { autorange: false, range: [111, 222] };
         wodinPlot.vm.$emit("updateXAxis", xAxis);
         expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
     });
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index ffd01ed7..c2c9ecbc 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -154,10 +154,10 @@ describe("RunTab", () => {
         expect(plots.length).toBe(2);
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
-        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({autorange: true});
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
-        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({autorange: true});
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -175,14 +175,14 @@ describe("RunTab", () => {
     });
 
     it("propagates x axis changes to all run plots", async () => {
-       const wrapper = getWrapper();
-       const plots = wrapper.findAllComponents(RunPlot);
-       expect(plots.length).toBe(2);
-       const newXAxis = {autorange: false, range: [1, 10]};
-       plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
-       await nextTick();
-       expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
-       expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+        const wrapper = getWrapper();
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.length).toBe(2);
+        const newXAxis = { autorange: false, range: [1, 10] };
+        plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
+        await nextTick();
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
     });
 
     it("renders as expected when app is stochastic", () => {
@@ -196,10 +196,10 @@ describe("RunTab", () => {
         expect(plots.length).toBe(2);
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
-        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({autorange: true});
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
-        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({autorange: true});
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
@@ -209,7 +209,7 @@ describe("RunTab", () => {
         const wrapper = getStochasticWrapper();
         const plots = wrapper.findAllComponents(RunStochasticPlot);
         expect(plots.length).toBe(2);
-        const newXAxis = {autorange: false, range: [1, 10]};
+        const newXAxis = { autorange: false, range: [1, 10] };
         plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
         await nextTick();
         expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index cf664d21..ff7f3421 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -529,11 +529,11 @@ describe("WodinPlot", () => {
 
         const { relayout } = wrapper.vm as any;
         await relayout(relayoutEvent);
-        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([{autorange: false, range: [2, 4]}]);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([{ autorange: false, range: [2, 4] }]);
     });
 
     it("relayout does not emit updateXAxis event, if xaxis is not in event", async () => {
-        const wrapper = getWrapper({ linkedXAxis: {autorange: true} });
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
         const relayoutEvent = {
             "yaxis.autorange": false,
             "yaxis.range[0]": 2,
@@ -546,7 +546,7 @@ describe("WodinPlot", () => {
     });
 
     it("update to linkedXAxis triggers relayout", async () => {
-        const wrapper = getWrapper({linkedXAxis: {autorange: true}});
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
         mockPlotElementOn(wrapper);
         wrapper.setProps({ linkedXAxis: { autorange: false, range: [4, 6] } });
         await nextTick();
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
index 9885512b..45ac6904 100644
--- a/app/static/tests/unit/store/graphs/getters.test.ts
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -6,7 +6,7 @@ describe("GraphsGetters", () => {
         const state = mockGraphsState({
             config: [
                 { id: "123", selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"] },
-                { id: "456",selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
+                { id: "456", selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
             ]
         });
         expect((getters[GraphsGetter.allSelectedVariables] as any)(state)).toStrictEqual(["a", "b", "d"]);
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index fab10dc8..9da4996b 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -54,7 +54,7 @@ describe("Graphs mutations", () => {
         expect(testState.config).toStrictEqual([
             { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
             { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
-        ])
+        ]);
     });
 
     it("DeleteGraph removes graph from config", () => {

From a770eaf9832f769497ef9e7ea63ae5ae0482ac86 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 14:59:12 +0100
Subject: [PATCH 37/80] do not include graph config id when serialise

---
 app/static/src/app/serialise.ts               | 29 ++++++++++++++++---
 .../src/app/types/serialisationTypes.ts       |  9 ++++--
 app/static/tests/mocks.ts                     |  1 +
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/app/static/src/app/serialise.ts b/app/static/src/app/serialise.ts
index 5cf16ba2..081a819c 100644
--- a/app/static/src/app/serialise.ts
+++ b/app/static/src/app/serialise.ts
@@ -15,11 +15,13 @@ import {
     SerialisedRunResult,
     SerialisedSensitivityResult,
     SerialisedModelFitState,
-    SerialisedMultiSensitivityState
+    SerialisedMultiSensitivityState,
+    SerialisedGraphsState
 } from "./types/serialisationTypes";
-import { GraphsState } from "./store/graphs/state";
+import { GraphConfig, GraphsState } from "./store/graphs/state";
 import { Dict } from "./types/utilTypes";
 import { MultiSensitivityState } from "./store/multiSensitivity/state";
+import { newUid } from "./utils";
 
 function serialiseCode(code: CodeState): CodeState {
     return {
@@ -140,8 +142,26 @@ function serialiseModelFit(modelFit: ModelFitState): SerialisedModelFitState {
     };
 }
 
-export const serialiseGraphs = (state: GraphsState): GraphsState => {
-    return { ...state };
+// Do not include graph config uids in serialised as we don't want them to contribute to duplicate checks
+export const serialiseGraphs = (state: GraphsState): SerialisedGraphsState => {
+    return {
+        ...state,
+        config: state.config.map((c: GraphConfig) => ({
+            selectedVariables: c.selectedVariables,
+            unselectedVariables: c.unselectedVariables
+        }))
+    };
+};
+
+export const deserialiseGraphs = (serialised: SerialisedGraphsState): GraphsState => {
+    return {
+        ...serialised,
+        config: serialised.config.map((s) => ({
+            id: newUid(),
+            selectedVariables: s.selectedVariables,
+            unselectedVariables: s.unselectedVariables
+        }))
+    };
 };
 
 export const serialiseState = (state: AppState): string => {
@@ -168,6 +188,7 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     Object.assign(targetState, {
         ...targetState,
         ...serialised,
+        graphs: deserialiseGraphs(serialised.graphs),
         persisted: true
     });
 
diff --git a/app/static/src/app/types/serialisationTypes.ts b/app/static/src/app/types/serialisationTypes.ts
index 5d0bc185..c5b079ff 100644
--- a/app/static/src/app/types/serialisationTypes.ts
+++ b/app/static/src/app/types/serialisationTypes.ts
@@ -11,7 +11,7 @@ import { VisualisationTab } from "../store/appState/state";
 import { CodeState } from "../store/code/state";
 import { FitDataState } from "../store/fitData/state";
 import { Palette } from "../palette";
-import { GraphsState } from "../store/graphs/state";
+import { GraphSettings } from "../store/graphs/state";
 import { Dict } from "./utilTypes";
 
 export interface SerialisedRunResult {
@@ -73,6 +73,11 @@ export interface SerialisedModelFitState {
     error: null | WodinError;
 }
 
+export interface SerialisedGraphsState {
+    config: { selectedVariables: string[]; unselectedVariables: string[] }[];
+    settings: GraphSettings; // TODO: this will be replaced by per-graph settings in mrc-5442
+}
+
 export interface SerialisedAppState {
     openVisualisationTab: VisualisationTab;
     code: CodeState;
@@ -80,7 +85,7 @@ export interface SerialisedAppState {
     run: SerialisedRunState;
     sensitivity: SerialisedSensitivityState;
     multiSensitivity: SerialisedMultiSensitivityState;
-    graphs: GraphsState;
+    graphs: SerialisedGraphsState;
     fitData?: FitDataState;
     modelFit?: SerialisedModelFitState;
 }
diff --git a/app/static/tests/mocks.ts b/app/static/tests/mocks.ts
index a1c6e7c4..7149bb87 100644
--- a/app/static/tests/mocks.ts
+++ b/app/static/tests/mocks.ts
@@ -126,6 +126,7 @@ export const mockGraphsState = (state: Partial<GraphsState> = {}): GraphsState =
     return {
         config: [
             {
+                id: "123",
                 selectedVariables: [],
                 unselectedVariables: []
             }

From 58bb66ea4ba9ed93b42c20652bd852c01cdc7893 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 16:39:29 +0100
Subject: [PATCH 38/80] do not serialise graph config ids

---
 app/static/src/app/serialise.ts          |  2 +-
 app/static/tests/unit/serialiser.test.ts | 48 ++++++++++++++++++++----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/app/static/src/app/serialise.ts b/app/static/src/app/serialise.ts
index 081a819c..b76b2701 100644
--- a/app/static/src/app/serialise.ts
+++ b/app/static/src/app/serialise.ts
@@ -188,7 +188,7 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     Object.assign(targetState, {
         ...targetState,
         ...serialised,
-        graphs: deserialiseGraphs(serialised.graphs),
+        graphs: serialised.graphs ? deserialiseGraphs(serialised.graphs) : targetState.graphs,
         persisted: true
     });
 
diff --git a/app/static/tests/unit/serialiser.test.ts b/app/static/tests/unit/serialiser.test.ts
index 8bac9460..c1af0cf4 100644
--- a/app/static/tests/unit/serialiser.test.ts
+++ b/app/static/tests/unit/serialiser.test.ts
@@ -26,6 +26,12 @@ import { AdvancedOptions } from "../../src/app/types/responseTypes";
 import { AdvancedComponentType } from "../../src/app/store/run/state";
 import { noSensitivityUpdateRequired } from "../../src/app/store/sensitivity/sensitivity";
 
+jest.mock("../../src/app/utils", () => {
+    return {
+        newUid: jest.fn().mockReturnValue("12345")
+    };
+});
+
 describe("serialise", () => {
     const codeState = {
         currentCode: ["some code"],
@@ -537,6 +543,20 @@ describe("serialise", () => {
         }
     };
 
+    const expectedGraphs = {
+        settings: {
+            logScaleYAxis: true,
+            lockYAxis: true,
+            yAxisRange: [1, 2]
+        },
+        config: [
+            {
+                selectedVariables: ["S", "I"],
+                unselectedVariables: ["R"]
+            }
+        ]
+    };
+
     it("serialises BasicState as expected", () => {
         const serialised = serialiseState(basicState);
         const expected = {
@@ -546,7 +566,7 @@ describe("serialise", () => {
             run: expectedRun,
             sensitivity: expectedSensitivity,
             multiSensitivity: expectedMultiSensitivity,
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -562,7 +582,7 @@ describe("serialise", () => {
             multiSensitivity: expectedMultiSensitivity,
             fitData: expectedFitData,
             modelFit: expectedModelFit,
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -627,7 +647,7 @@ describe("serialise", () => {
                 ...expectedModelFit,
                 result: { ...expectedModelFit.result, hasResult: false }
             },
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -652,7 +672,7 @@ describe("serialise", () => {
             multiSensitivity: { ...expectedMultiSensitivity, result: null },
             fitData: expectedFitData,
             modelFit: { ...expectedModelFit, result: null },
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -701,7 +721,15 @@ describe("serialise", () => {
             fitData: mockFitDataState(),
             modelFit: mockModelFitState(),
             versions: mockVersionsState(),
-            graphs: mockGraphsState()
+            graphs: mockGraphsState({
+                config: [
+                    {
+                        id: "12345", // id from mocked newUid
+                        selectedVariables: [],
+                        unselectedVariables: []
+                    }
+                ]
+            })
         });
     });
 
@@ -739,9 +767,13 @@ describe("serialise", () => {
             versions: null
         } as any;
         deserialiseState(target, serialised);
-        expect(target.graphs.config[0].selectedVariables).toStrictEqual(["S", "I", "R"]);
-        expect(target.graphs.config[0].unselectedVariables).toStrictEqual([]);
-        expect(target.graphs.config[0].id.length).toBe(32);
+        expect(target.graphs.config).toStrictEqual([
+            {
+                id: "12345",
+                selectedVariables: ["S", "I", "R"],
+                unselectedVariables: []
+            }
+        ]);
     });
 
     it("deserialises default graph settings when undefined in serialised state", () => {

From 3400f90a013f75151ebe79c34187946853e67eed Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 16:53:53 +0100
Subject: [PATCH 39/80] fix type error;

---
 .../tests/unit/components/mixins/baseSensitivity.test.ts       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
index 061ad312..eddcc8cd 100644
--- a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
+++ b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
@@ -7,7 +7,6 @@ import { AppState } from "../../../../src/app/store/appState/state";
 import { BaseSensitivityMutation } from "../../../../src/app/store/sensitivity/mutations";
 import { BaseSensitivityAction } from "../../../../src/app/store/sensitivity/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
-import mock = jest.mock;
 import { mockGraphsState } from "../../../mocks";
 
 describe("baseSensitivity mixin", () => {
@@ -30,7 +29,7 @@ describe("baseSensitivity mixin", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables, unselectedVariables: [] }]
+                        config: [{ id: "123", selectedVariables, unselectedVariables: [] }]
                     }),
                     getters: graphGetters
                 },

From ed0caa00bc4f806f6e2ff35d1a1c018455bda9b5 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 8 Jul 2024 17:07:26 +0100
Subject: [PATCH 40/80] another type fix

---
 app/static/tests/unit/components/options/linkData.test.ts       | 2 +-
 .../components/sensitivity/sensitivitySummaryDownload.test.ts   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/static/tests/unit/components/options/linkData.test.ts b/app/static/tests/unit/components/options/linkData.test.ts
index d21406ba..31901c54 100644
--- a/app/static/tests/unit/components/options/linkData.test.ts
+++ b/app/static/tests/unit/components/options/linkData.test.ts
@@ -33,7 +33,7 @@ describe("LinkData", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables: ["I", "R"], unselectedVariables: [] }]
+                        config: [{ id: "123", selectedVariables: ["I", "R"], unselectedVariables: [] }]
                     }),
                     getters: graphGetters
                 },
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
index 6eb09f7a..fcdeecf1 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
@@ -86,6 +86,7 @@ describe("SensitivitySummaryDownload", () => {
                     state: mockGraphsState({
                         config: [
                             {
+                                id: "123",
                                 selectedVariables: ["S"],
                                 unselectedVariables: []
                             }

From 420036706b2cf7d717d57b325c50bfe501c4efdf Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 9 Jul 2024 16:37:13 +0100
Subject: [PATCH 41/80] per graph settings, with separate fit plot settings

---
 .../{options => }/GraphSettings.vue           | 35 +++++++++++++++----
 app/static/src/app/components/WodinPlot.vue   | 26 ++++++++++----
 app/static/src/app/components/fit/FitPlot.vue |  1 +
 .../components/graphConfig/GraphConfig.vue    |  3 ++
 .../src/app/components/options/OptionsTab.vue |  6 ++--
 app/static/src/app/components/run/RunPlot.vue |  2 ++
 .../app/components/run/RunStochasticPlot.vue  |  2 ++
 .../sensitivity/SensitivityTracesPlot.vue     |  2 ++
 app/static/src/app/serialise.ts               | 11 +++---
 app/static/src/app/store/graphs/actions.ts    |  9 +++--
 app/static/src/app/store/graphs/graphs.ts     | 11 +++---
 app/static/src/app/store/graphs/mutations.ts  | 28 +++++++++++----
 app/static/src/app/store/graphs/state.ts      | 10 +++++-
 .../src/app/types/serialisationTypes.ts       |  8 +++--
 .../components/options/graphSettings.test.ts  |  2 +-
 .../components/options/optionsTab.test.ts     |  2 +-
 16 files changed, 117 insertions(+), 41 deletions(-)
 rename app/static/src/app/components/{options => }/GraphSettings.vue (55%)

diff --git a/app/static/src/app/components/options/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
similarity index 55%
rename from app/static/src/app/components/options/GraphSettings.vue
rename to app/static/src/app/components/GraphSettings.vue
index 7974c9e4..4208f1c3 100644
--- a/app/static/src/app/components/options/GraphSettings.vue
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -27,27 +27,50 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "vuex";
-import { GraphsMutation } from "../../store/graphs/mutations";
+import { GraphsMutation } from "../store/graphs/mutations";
 
 export default defineComponent({
     name: "GraphSettings",
-    setup() {
+    props: {
+      graphIndex: {
+        type: Number,
+        required: false,
+        default: -1
+      },
+      fitPlot: {
+        type: Boolean,
+        required: true
+      }
+    },
+    setup(props) {
         const store = useStore();
+        const settings = computed(() => props.fitPlot ? store.state.graphs.fitGraphSettings :
+            store.state.graphs.config[props.graphIndex].settings);
         const logScaleYAxis = computed({
             get() {
-                return store.state.graphs.settings.logScaleYAxis;
+                return settings.value.logScaleYAxis;
             },
             set(newValue) {
-                store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`, newValue);
+                if (props.fitPlot) {
+                  store.commit(`graphs/${GraphsMutation.SetFitLogScaleYAxis}`, newValue);
+                } else {
+                  store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`,
+                      {graphIndex: props.graphIndex, value: newValue});
+                }
             }
         });
 
         const lockYAxis = computed({
             get() {
-                return store.state.graphs.settings.lockYAxis;
+                return settings.value.lockYAxis;
             },
             set(newValue) {
-                store.commit(`graphs/${GraphsMutation.SetLockYAxis}`, newValue);
+                if (props.fitPlot) {
+                  store.commit(`graphs/${GraphsMutation.SetFitLockYAxis}`, newValue);
+                } else {
+                  store.commit(`graphs/${GraphsMutation.SetLockYAxis}`,
+                      {graphIndex: props.graphIndex, value: newValue});
+                }
             }
         });
 
diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 4c771323..6fe39995 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -59,6 +59,15 @@ export default defineComponent({
             type: Object as PropType<Partial<LayoutAxis> | null>,
             required: false,
             default: null
+        },
+        graphIndex: {
+            type: Number,
+            required: false,
+            default: -1
+        },
+        fitPlot: {
+            type: Boolean,
+            required: true
         }
     },
     emits: ["updateXAxis"],
@@ -75,9 +84,11 @@ export default defineComponent({
 
         const hasPlotData = computed(() => !!baseData.value?.length);
 
-        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 settings = computed(() => props.fitPlot ? store.state.graphs.fitGraphSettings :
+            store.state.graphs.config[props.graphIndex].settings);
+        const yAxisType = computed(() => (settings.value.logScaleYAxis ? "log" : ("linear" as AxisType)));
+        const lockYAxis = computed(() => settings.value.lockYAxis);
+        const yAxisRange = computed(() => settings.value.yAxisRange as YAxisRange);
         const legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
 
         // Remember the user's last y axis zoom, when we update from x axis potentially chosen in another graph
@@ -88,10 +99,11 @@ export default defineComponent({
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
-                // TODO: We do not yet have per-graph settings, so YAxisRange committed here, and used when user chooses
-                // to lock range will be overwritten by each graph, and so the y range of the final graph will be used
-                // by all - to be fixed in mrc-5442
-                store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, yRange);
+                if (props.fitPlot) {
+                  store.commit(`graphs/${GraphsMutation.SetFitYAxisRange}`, yRange);
+                } else {
+                  store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, {graphIndex: props.graphIndex, value: yRange});
+                }
             }
         };
 
diff --git a/app/static/src/app/components/fit/FitPlot.vue b/app/static/src/app/components/fit/FitPlot.vue
index cef3f5d8..235193ab 100644
--- a/app/static/src/app/components/fit/FitPlot.vue
+++ b/app/static/src/app/components/fit/FitPlot.vue
@@ -5,6 +5,7 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
+        :fit-plot="true"
     >
         <slot></slot>
     </wodin-plot>
diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 6d004795..1edf5852 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -12,6 +12,7 @@
                 <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
             </button>
         </h5>
+        <graph-settings :fit-plot="false" :graph-index="graphIndex"></graph-settings>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
                 <span
@@ -40,10 +41,12 @@ import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import SelectVariables from "../mixins/selectVariables";
 import { GraphsMutation } from "../../store/graphs/mutations";
+import GraphSettings from "@/app/components/GraphSettings.vue";
 
 export default defineComponent({
     name: "GraphConfig",
     components: {
+      GraphSettings,
         VueFeather
     },
     props: {
diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index 61bee5ae..e4efcb7d 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -16,8 +16,8 @@
         <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
             <optimisation-options></optimisation-options>
         </vertical-collapse>
-        <vertical-collapse v-if="!multiSensitivityOpen" title="Graph Settings" collapse-id="graph-settings">
-            <graph-settings></graph-settings>
+        <vertical-collapse v-if="fitTabIsOpen" title="Graph Settings" collapse-id="graph-settings">
+            <graph-settings :fit-plot="true"></graph-settings>
         </vertical-collapse>
         <vertical-collapse
             v-if="!isStochastic"
@@ -45,7 +45,7 @@ import LinkData from "./LinkData.vue";
 import SensitivityOptions from "./SensitivityOptions.vue";
 import OptimisationOptions from "./OptimisationOptions.vue";
 import { AppType, VisualisationTab } from "../../store/appState/state";
-import GraphSettings from "./GraphSettings.vue";
+import GraphSettings from "../GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
 
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index fe5cf83a..a47ba75d 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -6,6 +6,8 @@
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
         :linked-x-axis="linkedXAxis"
+        :fit-plot="false"
+        :graph-index="graphIndex"
         @updateXAxis="updateXAxis"
     >
         <slot></slot>
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index 15330fd6..59376156 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -6,6 +6,8 @@
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
         :linked-x-axis="linkedXAxis"
+        :fit-plot="false"
+        :graph-index="graphIndex"
         @updateXAxis="updateXAxis"
     >
         <slot></slot>
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index c7bb0729..21129b0f 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -9,6 +9,8 @@
                 ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames]
                 : []
         "
+        :fit-plot="false"
+        :graph-index="0"
     >
         <slot></slot>
     </wodin-plot>
diff --git a/app/static/src/app/serialise.ts b/app/static/src/app/serialise.ts
index b76b2701..6e153b5a 100644
--- a/app/static/src/app/serialise.ts
+++ b/app/static/src/app/serialise.ts
@@ -18,7 +18,7 @@ import {
     SerialisedMultiSensitivityState,
     SerialisedGraphsState
 } from "./types/serialisationTypes";
-import { GraphConfig, GraphsState } from "./store/graphs/state";
+import { GraphConfig, GraphsState, defaultGraphSettings } from "./store/graphs/state";
 import { Dict } from "./types/utilTypes";
 import { MultiSensitivityState } from "./store/multiSensitivity/state";
 import { newUid } from "./utils";
@@ -148,7 +148,8 @@ export const serialiseGraphs = (state: GraphsState): SerialisedGraphsState => {
         ...state,
         config: state.config.map((c: GraphConfig) => ({
             selectedVariables: c.selectedVariables,
-            unselectedVariables: c.unselectedVariables
+            unselectedVariables: c.unselectedVariables,
+            settings: c.settings
         }))
     };
 };
@@ -159,7 +160,8 @@ export const deserialiseGraphs = (serialised: SerialisedGraphsState): GraphsStat
         config: serialised.config.map((s) => ({
             id: newUid(),
             selectedVariables: s.selectedVariables,
-            unselectedVariables: s.unselectedVariables
+            unselectedVariables: s.unselectedVariables,
+            settings: s.settings
         }))
     };
 };
@@ -207,7 +209,8 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
             {
                 id: graphs!.config[0].id,
                 selectedVariables,
-                unselectedVariables
+                unselectedVariables,
+                settings: defaultGraphSettings()
             }
         ];
     }
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index 6e068a7d..806e0663 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -2,7 +2,7 @@ import { ActionTree } from "vuex";
 import { GraphsMutation } from "./mutations";
 import { AppState, AppType } from "../appState/state";
 import { FitDataAction } from "../fitData/actions";
-import { GraphsState } from "./state";
+import { GraphsState, defaultGraphSettings } from "./state";
 import { newUid } from "../../utils";
 
 export enum GraphsAction {
@@ -30,6 +30,11 @@ export const actions: ActionTree<GraphsState, AppState> = {
     NewGraph(context) {
         const { rootState, commit } = context;
         const unselectedVariables = [...(rootState.model.odinModelResponse?.metadata?.variables || [])];
-        commit(GraphsMutation.AddGraph, { id: newUid(), selectedVariables: [], unselectedVariables });
+        commit(GraphsMutation.AddGraph, {
+            id: newUid(),
+            settings: defaultGraphSettings(),
+            selectedVariables: [],
+            unselectedVariables
+        });
     }
 };
diff --git a/app/static/src/app/store/graphs/graphs.ts b/app/static/src/app/store/graphs/graphs.ts
index 9c242084..d83e3ee1 100644
--- a/app/static/src/app/store/graphs/graphs.ts
+++ b/app/static/src/app/store/graphs/graphs.ts
@@ -1,4 +1,4 @@
-import { GraphsState } from "./state";
+import {defaultGraphSettings, GraphsState} from "./state";
 import { actions } from "./actions";
 import { getters } from "./getters";
 import { mutations } from "./mutations";
@@ -9,14 +9,11 @@ export const defaultState = (): GraphsState => ({
         {
             id: newUid(),
             selectedVariables: [],
-            unselectedVariables: []
+            unselectedVariables: [],
+            settings: defaultGraphSettings()
         }
     ],
-    settings: {
-        logScaleYAxis: false,
-        lockYAxis: false,
-        yAxisRange: [0, 0]
-    }
+    fitGraphSettings: defaultGraphSettings()
 });
 
 export const graphs = {
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index a634223c..966665d5 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -5,6 +5,9 @@ export enum GraphsMutation {
     SetLogScaleYAxis = "SetLogScaleYAxis",
     SetLockYAxis = "SetLockYAxis",
     SetYAxisRange = "SetYAxisRange",
+    SetFitLogScaleYAxis = "SetFitLogScaleYAxis",
+    SetFitLockYAxis = "SetFitLockYAxis",
+    SetFitYAxisRange = "SetFitYAxisRange",
     AddGraph = "AddGraph",
     DeleteGraph = "DeleteGraph",
     SetSelectedVariables = "SetSelectedVariables"
@@ -17,20 +20,31 @@ export interface SetSelectedVariablesPayload {
 }
 
 export const mutations: MutationTree<GraphsState> = {
-    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: boolean) {
-        state.settings.logScaleYAxis = payload;
+    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: {graphIndex: number, value: boolean}) {
+        state.config[payload.graphIndex].settings.logScaleYAxis = payload.value;
     },
 
-    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: boolean) {
-        state.settings.lockYAxis = payload;
+    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: {graphIndex: number, value: boolean}) {
+        state.config[payload.graphIndex].settings.lockYAxis = payload.value;
     },
 
-    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: YAxisRange) {
-        state.settings.yAxisRange = payload;
+    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: {graphIndex: number, value: YAxisRange}) {
+        state.config[payload.graphIndex].settings.yAxisRange = payload.value;
+    },
+
+    [GraphsMutation.SetFitLogScaleYAxis](state: GraphsState, payload: boolean) {
+        state.fitGraphSettings.logScaleYAxis = payload;
+    },
+
+    [GraphsMutation.SetFitLockYAxis](state: GraphsState, payload: boolean) {
+        state.fitGraphSettings.lockYAxis = payload;
+    },
+
+    [GraphsMutation.SetFitYAxisRange](state: GraphsState, payload: YAxisRange) {
+        state.fitGraphSettings.yAxisRange = payload;
     },
 
     [GraphsMutation.SetSelectedVariables](state: GraphsState, payload: SetSelectedVariablesPayload) {
-        // We don't simply replace the GraphConfig in the index here, as that will eventually include GraphSettings too
         state.config[payload.graphIndex].selectedVariables = payload.selectedVariables;
         state.config[payload.graphIndex].unselectedVariables = payload.unselectedVariables;
     },
diff --git a/app/static/src/app/store/graphs/state.ts b/app/static/src/app/store/graphs/state.ts
index 0579388f..fe2fed0f 100644
--- a/app/static/src/app/store/graphs/state.ts
+++ b/app/static/src/app/store/graphs/state.ts
@@ -10,9 +10,17 @@ export interface GraphConfig {
     id: string; // We need to keep a persistent id to identify configs in vue when a graph is deleted from the array
     selectedVariables: string[];
     unselectedVariables: string[]; // We keep track of unselected variables too so we can retain on model update
+    settings: GraphSettings;
 }
 
 export interface GraphsState {
     config: GraphConfig[];
-    settings: GraphSettings; // TODO: this will be replaced by per-graph settings in mrc-5442
+    fitGraphSettings: GraphSettings; // For Fit apps, the Fit tab graph needs to have its own settings
 }
+
+export const defaultGraphSettings = (): GraphSettings => ({
+    logScaleYAxis: false,
+    lockYAxis: false,
+    yAxisRange: [0, 0]
+});
+
diff --git a/app/static/src/app/types/serialisationTypes.ts b/app/static/src/app/types/serialisationTypes.ts
index c5b079ff..35a3d1ce 100644
--- a/app/static/src/app/types/serialisationTypes.ts
+++ b/app/static/src/app/types/serialisationTypes.ts
@@ -74,8 +74,12 @@ export interface SerialisedModelFitState {
 }
 
 export interface SerialisedGraphsState {
-    config: { selectedVariables: string[]; unselectedVariables: string[] }[];
-    settings: GraphSettings; // TODO: this will be replaced by per-graph settings in mrc-5442
+    config: {
+        selectedVariables: string[];
+        unselectedVariables: string[];
+        settings: GraphSettings;
+    }[];
+    fitGraphSettings: GraphSettings;
 }
 
 export interface SerialisedAppState {
diff --git a/app/static/tests/unit/components/options/graphSettings.test.ts b/app/static/tests/unit/components/options/graphSettings.test.ts
index 07dc5681..b6f508e4 100644
--- a/app/static/tests/unit/components/options/graphSettings.test.ts
+++ b/app/static/tests/unit/components/options/graphSettings.test.ts
@@ -1,7 +1,7 @@
 import Vuex from "vuex";
 import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
-import GraphSettings from "../../../../src/app/components/options/GraphSettings.vue";
+import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
 import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 
 describe("GraphSettings", () => {
diff --git a/app/static/tests/unit/components/options/optionsTab.test.ts b/app/static/tests/unit/components/options/optionsTab.test.ts
index da53b7e5..c8e60be3 100644
--- a/app/static/tests/unit/components/options/optionsTab.test.ts
+++ b/app/static/tests/unit/components/options/optionsTab.test.ts
@@ -12,7 +12,7 @@ import SensitivityOptions from "../../../../src/app/components/options/Sensitivi
 import OptimisationOptions from "../../../../src/app/components/options/OptimisationOptions.vue";
 import { mockModelState, mockRunState } from "../../../mocks";
 import { RunMutation } from "../../../../src/app/store/run/mutations";
-import GraphSettings from "../../../../src/app/components/options/GraphSettings.vue";
+import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
 import ParameterSets from "../../../../src/app/components/options/ParameterSets.vue";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
 import AdvancedSettings from "../../../../src/app/components/options/AdvancedSettings.vue";

From 2b4b36719eecf12f8333b1946a3c0ef811b26995 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 9 Jul 2024 17:29:57 +0100
Subject: [PATCH 42/80] styling

---
 .../src/app/components/GraphSettings.vue      | 37 +++++++-----------
 .../components/graphConfig/GraphConfig.vue    | 39 +++++++++++--------
 app/static/src/scss/style.scss                |  4 +-
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/static/src/app/components/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
index 4208f1c3..d0bfc679 100644
--- a/app/static/src/app/components/GraphSettings.vue
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -1,26 +1,19 @@
 <template>
-    <div class="container">
-        <div id="log-scale-y-axis" class="row my-2">
-            <div class="col-5">
-                <label class="col-form-label">Log scale y axis</label>
-            </div>
-            <div class="col-6">
-                <input
-                    type="checkbox"
-                    class="form-check-input"
-                    style="vertical-align: bottom"
-                    v-model="logScaleYAxis"
-                />
-            </div>
-        </div>
-        <div id="lock-y-axis" class="row my-2">
-            <div class="col-5">
-                <label class="col-form-label">Lock y axis</label>
-            </div>
-            <div class="col-6">
-                <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
-            </div>
-        </div>
+    <div>
+      <div id="log-scale-y-axis" class="form-check form-check-inline">
+          <label class="form-check-label">Log scale y axis</label>
+          <input
+              type="checkbox"
+              class="form-check-input"
+              style="vertical-align: bottom"
+              v-model="logScaleYAxis"
+          />
+      </div>
+      <div id="lock-y-axis" class="form-check form-check-inline">
+          <label class="form-check-label">Lock y axis</label>
+          <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
+
+      </div>
     </div>
 </template>
 
diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 1edf5852..34ba4da8 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -1,22 +1,18 @@
 <template>
     <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
-        <h5>
-            Graph {{ graphIndex + 1 }}
-            <button
-                type="button"
-                class="btn btn-light mx-2 delete-graph"
-                v-if="canDelete"
-                @click="deleteGraph"
-                v-tooltip="'Delete Graph'"
-            >
-                <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
-            </button>
-        </h5>
-        <graph-settings :fit-plot="false" :graph-index="graphIndex"></graph-settings>
+        <button
+            type="button"
+            class="btn btn-sm btn-light bg-transparent border-0 float-end delete-graph"
+            v-if="canDelete"
+            @click="deleteGraph"
+            v-tooltip="'Delete Graph'"
+        ><vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
+        </button>
+        <graph-settings :fit-plot="false" :graph-index="graphIndex" class="graph-config-settings mb-1"></graph-settings>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
                 <span
-                    class="badge variable me-2 mb-2"
+                    class="badge variable me-2"
                     :style="getStyle(variable)"
                     :draggable="true"
                     @dragstart="startDrag($event, variable)"
@@ -95,12 +91,21 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.selected-variables-panel {
+.graph-config-panel {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+  padding: 4px;
+  .graph-config-settings {
+    margin-left: 8px;
+  }
+  .selected-variables-panel {
     width: 100%;
 
     .variable {
-        font-size: large;
-        cursor: pointer;
+      font-size: large;
+      cursor: pointer;
     }
+  }
 }
 </style>
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index 5586575e..bb4a94f6 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -121,7 +121,6 @@ $grey: #ccc;
     border-width: 4px;
     padding: 4px;
     border-style: dashed;
-    margin-right: 6px;
 }
 
 .drop-zone-active {
@@ -133,8 +132,9 @@ $grey: #ccc;
 }
 
 .drop-zone-instruction {
-    height: 3rem;
+    min-height: 3rem;
     background-color: #eee;
+    width: 100%;
 }
 
 .variable {

From 8f49dcf5f50ba4d8384b27940190022dd3e5253e Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 16 Jul 2024 15:55:09 +0100
Subject: [PATCH 43/80] PR comments

---
 app/static/src/app/components/run/RunPlot.vue | 198 ++++++++----------
 app/static/src/app/store/graphs/getters.ts    |   5 +-
 2 files changed, 92 insertions(+), 111 deletions(-)

diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index fe5cf83a..a8cc5039 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -12,8 +12,8 @@
     </wodin-plot>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, PropType } from "vue";
 import { useStore } from "vuex";
 import { LayoutAxis, PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
@@ -25,114 +25,92 @@ import { Dict } from "../../types/utilTypes";
 import { runPlaceholderMessage } from "../../utils";
 import { ParameterSet } from "../../store/run/state";
 
-export default defineComponent({
-    name: "RunPlot",
-    props: {
-        fadePlot: Boolean,
-        graphIndex: {
-            type: Number,
-            default: 0
-        },
-        linkedXAxis: {
-            type: Object as PropType<Partial<LayoutAxis> | null>,
-            required: true
+const props = defineProps({
+    fadePlot: Boolean,
+    graphIndex: { type: Number, default: 0 },
+    linkedXAxis: { type: Object as PropType<Partial<LayoutAxis> | null>, required: true }
+});
+
+const emit = defineEmits<{
+    (e: "updateXAxis", options: Partial<LayoutAxis>): void;
+}>();
+
+const store = useStore();
+
+const solution = computed(() => store.state.run.resultOde?.solution);
+const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
+const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
+const displayNames = computed(() => {
+    return parameterSets.value.map((paramSet) => paramSet.displayName);
+});
+
+const parameterSetSolutions = computed(() => {
+    const result = {} as Dict<OdinSolution>;
+    Object.keys(store.state.run.parameterSetResults).forEach((name) => {
+        const sln = store.state.run.parameterSetResults[name].solution;
+        if (sln && visibleParameterSetNames.value.includes(name)) {
+            result[name] = sln;
         }
-    },
-    components: {
-        WodinPlot
-    },
-    emits: ["updateXAxis"],
-    setup(props, { emit }) {
-        const store = useStore();
-
-        const solution = computed(() => store.state.run.resultOde?.solution);
-        const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
-        const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
-        const displayNames = computed(() => {
-            return parameterSets.value.map((paramSet) => paramSet.displayName);
-        });
-
-        const parameterSetSolutions = computed(() => {
-            const result = {} as Dict<OdinSolution>;
-            Object.keys(store.state.run.parameterSetResults).forEach((name) => {
-                const sln = store.state.run.parameterSetResults[name].solution;
-                if (sln && visibleParameterSetNames.value.includes(name)) {
-                    result[name] = sln;
-                }
-            });
-            return result;
-        });
-
-        const endTime = computed(() => store.state.run.endTime);
-
-        const palette = computed(() => store.state.model.paletteModel);
-
-        const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
-
-        const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
-        const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
-
-        const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
-            const options = {
-                mode: "grid",
-                tStart: start,
-                tEnd: end,
-                nPoints: points
-            };
-            const result = solution.value && solution.value(options);
-            if (!result) {
-                return [];
-            }
-
-            // 1. Current parameter values
-            const plotOptions = { showLegend: true, includeLegendGroup: true };
-            const allData = [
-                ...odinToPlotly(filterSeriesSet(result, selectedVariables.value), palette.value, plotOptions),
-                ...allFitDataToPlotly(allFitData.value, palette.value, start, end)
-            ];
-
-            // 2. Parameter sets
-            const lineStylesForParamSets = computed(() => store.getters[`run/${RunGetter.lineStylesForParameterSets}`]);
-
-            const updatePlotTraceNameWithParameterSetName = (plotTrace: Partial<PlotData>, setName: string) => {
-                // eslint-disable-next-line no-param-reassign
-                plotTrace.name = `${plotTrace.name} (${setName})`;
-            };
-
-            Object.keys(parameterSetSolutions.value).forEach((name) => {
-                const paramSetSln = parameterSetSolutions.value[name];
-                const paramSetResult = paramSetSln!(options as Times);
-
-                const dash = lineStylesForParamSets.value[name];
-                if (paramSetResult) {
-                    const filteredSetData = filterSeriesSet(paramSetResult, selectedVariables.value);
-                    const paramSetOptions = { dash, showLegend: false, includeLegendGroup: true };
-                    const plotData = odinToPlotly(filteredSetData, palette.value, paramSetOptions);
-                    const currentParamSet = parameterSets.value.find((paramSet) => paramSet.name === name);
-                    plotData.forEach((plotTrace) => {
-                        updatePlotTraceNameWithParameterSetName(plotTrace, currentParamSet!.displayName);
-                    });
-                    allData.push(...plotData);
-                }
-            });
-            return allData;
-        };
-
-        const updateXAxis = (options: Partial<LayoutAxis>) => {
-            emit("updateXAxis", options);
-        };
-
-        return {
-            placeholderMessage,
-            endTime,
-            solution,
-            allFitData,
-            allPlotData,
-            selectedVariables,
-            parameterSetSolutions,
-            displayNames,
-            updateXAxis
-        };
-    }
+    });
+    return result;
 });
+
+const endTime = computed(() => store.state.run.endTime);
+
+const palette = computed(() => store.state.model.paletteModel);
+
+const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
+
+const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
+const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
+
+const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
+    const options = {
+        mode: "grid",
+        tStart: start,
+        tEnd: end,
+        nPoints: points
+    };
+    const result = solution.value && solution.value(options);
+    if (!result) {
+        return [];
+    }
+
+    // 1. Current parameter values
+    const plotOptions = { showLegend: true, includeLegendGroup: true };
+    const allData = [
+        ...odinToPlotly(filterSeriesSet(result, selectedVariables.value), palette.value, plotOptions),
+        ...allFitDataToPlotly(allFitData.value, palette.value, start, end)
+    ];
+
+    // 2. Parameter sets
+    const lineStylesForParamSets = computed(() => store.getters[`run/${RunGetter.lineStylesForParameterSets}`]);
+
+    const updatePlotTraceNameWithParameterSetName = (plotTrace: Partial<PlotData>, setName: string) => {
+        // eslint-disable-next-line no-param-reassign
+        plotTrace.name = `${plotTrace.name} (${setName})`;
+    };
+
+    Object.keys(parameterSetSolutions.value).forEach((name) => {
+        const paramSetSln = parameterSetSolutions.value[name];
+        const paramSetResult = paramSetSln!(options as Times);
+
+        const dash = lineStylesForParamSets.value[name];
+        if (paramSetResult) {
+            const filteredSetData = filterSeriesSet(paramSetResult, selectedVariables.value);
+            const paramSetOptions = { dash, showLegend: false, includeLegendGroup: true };
+            const plotData = odinToPlotly(filteredSetData, palette.value, paramSetOptions);
+            const currentParamSet = parameterSets.value.find((paramSet) => paramSet.name === name);
+            plotData.forEach((plotTrace) => {
+                updatePlotTraceNameWithParameterSetName(plotTrace, currentParamSet!.displayName);
+            });
+            allData.push(...plotData);
+        }
+    });
+    return allData;
+};
+
+const updateXAxis = (options: Partial<LayoutAxis>) => {
+    emit("updateXAxis", options);
+};
 </script>
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index 9a891998..6cd947f5 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -20,6 +20,9 @@ export interface GraphsGettersValues {
     [GraphsGetter.legendWidth]: number;
 }
 
+const LEGEND_LINE_PADDING = 40;
+const LEGEND_WIDTH_PER_CHAR = 10;
+
 export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
         return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
@@ -33,6 +36,6 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
         const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) =>
             a.length < b.length ? 1 : -1
         )[0];
-        return longestVar.length * 10 + 40;
+        return longestVar.length * LEGEND_WIDTH_PER_CHAR + LEGEND_LINE_PADDING;
     }
 };

From 4d1581fbdeccf5ebadbf3603a478983f2f8abfb1 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 16 Jul 2024 16:36:57 +0100
Subject: [PATCH 44/80] fix test

---
 app/static/tests/unit/components/run/runPlot.test.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index a294067b..1ed908e6 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -9,7 +9,7 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import { FitDataGetter } from "../../../../src/app/store/fitData/getters";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
-import { mockBasicState, mockGraphsState, mockRunState } from "../../../mocks";
+import {mockBasicState, mockGraphsState, mockModelState, mockRunState} from "../../../mocks";
 
 describe("RunPlot", () => {
     const mockSolution = jest.fn().mockReturnValue({
@@ -418,7 +418,8 @@ describe("RunPlot", () => {
         const store = new Vuex.Store<BasicState>({
             state: {
                 graphs: graphsState,
-                run: mockRunState()
+                run: mockRunState(),
+                model: mockModelState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {
@@ -558,7 +559,8 @@ describe("RunPlot", () => {
                 graphs: mockGraphsState({
                     config: [{ selectedVariables: [] }]
                 } as any),
-                run: mockRunState()
+                run: mockRunState(),
+                model: mockModelState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {

From ff143a4fa97ab1027acf5f8360b6a69a13ae6872 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 16 Jul 2024 16:44:39 +0100
Subject: [PATCH 45/80] lint

---
 app/static/tests/unit/components/run/runPlot.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index 1ed908e6..f398e2e6 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -9,7 +9,7 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import { FitDataGetter } from "../../../../src/app/store/fitData/getters";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
-import {mockBasicState, mockGraphsState, mockModelState, mockRunState} from "../../../mocks";
+import { mockBasicState, mockGraphsState, mockModelState, mockRunState } from "../../../mocks";
 
 describe("RunPlot", () => {
     const mockSolution = jest.fn().mockReturnValue({

From 0e3f9037b5fa5596e05f0fbbb11298dd59d1912b Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 17 Jul 2024 10:07:38 +0100
Subject: [PATCH 46/80] fix delete bug, provide graph config to plots as props

---
 app/static/src/app/components/WodinPlot.vue               | 8 ++++++--
 app/static/src/app/components/fit/FitPlot.vue             | 1 +
 app/static/src/app/components/run/RunPlot.vue             | 8 +++++++-
 app/static/src/app/components/run/RunStochasticPlot.vue   | 8 +++++++-
 app/static/src/app/components/run/RunTab.vue              | 2 ++
 .../app/components/sensitivity/SensitivityTracesPlot.vue  | 3 +++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 6fe39995..2c0d0886 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -26,7 +26,7 @@ import {
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
-import { YAxisRange } from "../store/graphs/state";
+import {GraphConfig, YAxisRange} from "../store/graphs/state";
 import { GraphsGetter } from "../store/graphs/getters";
 
 export default defineComponent({
@@ -65,6 +65,10 @@ export default defineComponent({
             required: false,
             default: -1
         },
+        graphConfig: {
+            type: Object as PropType<GraphConfig | null>,
+            required: true
+        },
         fitPlot: {
             type: Boolean,
             required: true
@@ -85,7 +89,7 @@ export default defineComponent({
         const hasPlotData = computed(() => !!baseData.value?.length);
 
         const settings = computed(() => props.fitPlot ? store.state.graphs.fitGraphSettings :
-            store.state.graphs.config[props.graphIndex].settings);
+            props.graphConfig!.settings);
         const yAxisType = computed(() => (settings.value.logScaleYAxis ? "log" : ("linear" as AxisType)));
         const lockYAxis = computed(() => settings.value.lockYAxis);
         const yAxisRange = computed(() => settings.value.yAxisRange as YAxisRange);
diff --git a/app/static/src/app/components/fit/FitPlot.vue b/app/static/src/app/components/fit/FitPlot.vue
index 235193ab..a636ae3c 100644
--- a/app/static/src/app/components/fit/FitPlot.vue
+++ b/app/static/src/app/components/fit/FitPlot.vue
@@ -6,6 +6,7 @@
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
         :fit-plot="true"
+        :graph-config="null"
     >
         <slot></slot>
     </wodin-plot>
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index a47ba75d..98fa7ac1 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -8,6 +8,7 @@
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"
+        :graph-config="graphConfig"
         @updateXAxis="updateXAxis"
     >
         <slot></slot>
@@ -26,6 +27,7 @@ import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
 import { runPlaceholderMessage } from "../../utils";
 import { ParameterSet } from "../../store/run/state";
+import {GraphConfig} from "../../store/graphs/state";
 
 export default defineComponent({
     name: "RunPlot",
@@ -35,6 +37,10 @@ export default defineComponent({
             type: Number,
             default: 0
         },
+        graphConfig: {
+          type: Object as PropType<GraphConfig>,
+          required: true
+        },
         linkedXAxis: {
             type: Object as PropType<Partial<LayoutAxis> | null>,
             required: true
@@ -71,7 +77,7 @@ export default defineComponent({
 
         const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
 
-        const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index 59376156..d6acc63e 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -8,6 +8,7 @@
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"
+        :graph-config="graphConfig"
         @updateXAxis="updateXAxis"
     >
         <slot></slot>
@@ -22,6 +23,7 @@ import { WodinPlotData, discreteSeriesSetToPlotly, filterSeriesSet } from "../..
 import WodinPlot from "../WodinPlot.vue";
 import { runPlaceholderMessage } from "../../utils";
 import { StochasticConfig } from "../../types/responseTypes";
+import {GraphConfig} from "../../store/graphs/state";
 
 export default defineComponent({
     name: "RunStochasticPlot",
@@ -31,6 +33,10 @@ export default defineComponent({
             type: Number,
             default: 0
         },
+        graphConfig: {
+          type: Object as PropType<GraphConfig>,
+          required: true
+        },
         linkedXAxis: {
             type: Object as PropType<Partial<LayoutAxis> | null>,
             required: true
@@ -43,7 +49,7 @@ export default defineComponent({
     setup(props, { emit }) {
         const store = useStore();
 
-        const selectedVariables = computed(() => store.state.graphs.config[props.graphIndex].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const solution = computed(() => store.state.run.resultDiscrete?.solution);
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index ecce3640..c6ad6ddd 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -8,6 +8,7 @@
             <run-stochastic-plot
                 v-if="isStochastic"
                 :fade-plot="!!updateMsg"
+                :graph-config="config"
                 :graph-index="index"
                 :linked-x-axis="xAxis"
                 @updateXAxis="updateXAxis"
@@ -16,6 +17,7 @@
                 v-else
                 :fade-plot="!!updateMsg"
                 :model-fit="false"
+                :graph-config="config"
                 :graph-index="index"
                 :linked-x-axis="xAxis"
                 @updateXAxis="updateXAxis"
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index 21129b0f..c5d47a4f 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -11,6 +11,7 @@
         "
         :fit-plot="false"
         :graph-index="0"
+        :graph-config="graphConfig"
     >
         <slot></slot>
     </wodin-plot>
@@ -50,6 +51,7 @@ export default defineComponent({
         const store = useStore();
 
         const solutions = computed(() => store.state.sensitivity.result?.batch?.solutions || []);
+        const graphConfig = computed(() => store.state.graphs.config[0]);
 
         const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
         const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
@@ -195,6 +197,7 @@ export default defineComponent({
         };
 
         return {
+            graphConfig,
             placeholderMessage,
             endTime,
             solutions,

From bf59118fee910aac04a5e313e8dd23b75584344a Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 23 Jul 2024 17:12:37 +0100
Subject: [PATCH 47/80] do not show graph configs on Options Tab if Fit tab is
 open

---
 app/static/src/app/components/options/OptionsTab.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index e4efcb7d..1ee21164 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -16,9 +16,6 @@
         <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
             <optimisation-options></optimisation-options>
         </vertical-collapse>
-        <vertical-collapse v-if="fitTabIsOpen" title="Graph Settings" collapse-id="graph-settings">
-            <graph-settings :fit-plot="true"></graph-settings>
-        </vertical-collapse>
         <vertical-collapse
             v-if="!isStochastic"
             title="Advanced Settings"
@@ -30,7 +27,10 @@
         <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
             <parameter-sets></parameter-sets>
         </vertical-collapse>
-        <graph-configs-collapsible></graph-configs-collapsible>
+        <graph-configs-collapsible v-if="!fitTabIsOpen"></graph-configs-collapsible>
+        <vertical-collapse v-if="fitTabIsOpen" title="Fit Graph Settings" collapse-id="graph-settings">
+          <graph-settings class="pt-2" :fit-plot="true"></graph-settings>
+        </vertical-collapse>
     </div>
 </template>
 

From 0ae34f56918c37e41a703793efc5882420d83e38 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 24 Jul 2024 17:15:06 +0100
Subject: [PATCH 48/80] unit tests

---
 app/static/tests/mocks.ts                     |  11 +-
 .../graphConfig/graphConfig.test.ts           |   7 +-
 .../unit/components/graphSettings.test.ts     | 115 +++++++++++++++
 .../components/options/graphSettings.test.ts  |  71 ----------
 .../components/options/optionsTab.test.ts     |  47 +++----
 .../tests/unit/components/run/runPlot.test.ts |  34 ++++-
 .../components/run/runStochasticPlot.test.ts  |  33 ++++-
 .../tests/unit/components/run/runTab.test.ts  |  14 +-
 .../tests/unit/components/wodinPlot.test.ts   | 131 ++++++++++++++----
 app/static/tests/unit/serialiser.test.ts      |  36 +++--
 .../tests/unit/store/graphs/actions.test.ts   |   2 +
 .../tests/unit/store/graphs/mutations.test.ts |  81 +++++++----
 12 files changed, 402 insertions(+), 180 deletions(-)
 create mode 100644 app/static/tests/unit/components/graphSettings.test.ts
 delete mode 100644 app/static/tests/unit/components/options/graphSettings.test.ts

diff --git a/app/static/tests/mocks.ts b/app/static/tests/mocks.ts
index 7149bb87..597cd6f8 100644
--- a/app/static/tests/mocks.ts
+++ b/app/static/tests/mocks.ts
@@ -26,7 +26,7 @@ import {
     SensitivityVariationType
 } from "../src/app/store/sensitivity/state";
 import { VersionsState } from "../src/app/store/versions/state";
-import { GraphsState } from "../src/app/store/graphs/state";
+import {defaultGraphSettings, GraphsState} from "../src/app/store/graphs/state";
 import { LanguageState } from "../translationPackage/store/state";
 import { Language } from "../src/app/types/languageTypes";
 import { noSensitivityUpdateRequired } from "../src/app/store/sensitivity/sensitivity";
@@ -128,14 +128,11 @@ export const mockGraphsState = (state: Partial<GraphsState> = {}): GraphsState =
             {
                 id: "123",
                 selectedVariables: [],
-                unselectedVariables: []
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
             }
         ],
-        settings: {
-            logScaleYAxis: false,
-            lockYAxis: false,
-            yAxisRange: [0, 0]
-        },
+        fitGraphSettings: defaultGraphSettings(),
         ...state
     };
 };
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index c80a79ce..53f40766 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -5,6 +5,7 @@ import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.
 import { GraphsAction } from "../../../../src/app/store/graphs/actions";
 import { GraphsState } from "../../../../src/app/store/graphs/state";
 import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
+import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
 
 describe("GraphConfig", () => {
     const mockUpdateSelectedVariables = jest.fn();
@@ -72,8 +73,7 @@ describe("GraphConfig", () => {
         const wrapper = getWrapper();
         const varBadges = wrapper.findAll(".graph-config-panel .badge");
         const varNames = wrapper.findAll(".graph-config-panel span.variable-name");
-        expect(wrapper.find("h5").text()).toBe("Graph 1");
-        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(true);
+        expect(wrapper.find("button.delete-graph").exists()).toBe(true);
         expect(varBadges.length).toBe(2);
         expect(varNames.length).toBe(2);
         expect(varNames.at(0)!.text()).toBe("S");
@@ -84,6 +84,9 @@ describe("GraphConfig", () => {
         expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-inactive"]);
         // instruction not shown if at least one selected variable
         expect(wrapper.findAll(".drop-zone-instruction").length).toBe(0);
+        const settings = wrapper.findComponent(GraphSettings);
+        expect(settings.props("fitPlot")).toBe(false);
+        expect(settings.props("graphIndex")).toBe(0);
     });
 
     it("starting drag sets values in event and emits setDragging", async () => {
diff --git a/app/static/tests/unit/components/graphSettings.test.ts b/app/static/tests/unit/components/graphSettings.test.ts
new file mode 100644
index 00000000..3efb17e0
--- /dev/null
+++ b/app/static/tests/unit/components/graphSettings.test.ts
@@ -0,0 +1,115 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../src/app/store/basic/state";
+import GraphSettings from "../../../src/app/components/GraphSettings.vue";
+import { GraphsMutation } from "../../../src/app/store/graphs/mutations";
+import {defaultGraphSettings} from "../../../src/app/store/graphs/state";
+
+describe("GraphSettings", () => {
+    const mockSetLogScaleYAxis = jest.fn();
+    const mockSetLockYAxis = jest.fn();
+
+    const mockSetFitLogScaleYAxis = jest.fn();
+    const mockSetFitLockYAxis = jest.fn();
+
+    const getWrapper = (
+        graphIndex: number | undefined = 1,
+        fitPlot = false,
+        graphSettings = [defaultGraphSettings(), defaultGraphSettings()],
+        fitGraphSettings = defaultGraphSettings()
+    ) => {
+        const store = new Vuex.Store<BasicState>({
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        fitGraphSettings,
+                        config: graphSettings.map((settings) => ({ settings }))
+                    } as any,
+                    mutations: {
+                        [GraphsMutation.SetLogScaleYAxis]: mockSetLogScaleYAxis,
+                        [GraphsMutation.SetLockYAxis]: mockSetLockYAxis,
+                        [GraphsMutation.SetFitLogScaleYAxis]: mockSetFitLogScaleYAxis,
+                        [GraphsMutation.SetFitLockYAxis]: mockSetFitLockYAxis
+                    }
+                }
+            }
+        });
+        return shallowMount(GraphSettings, {
+            props: { graphIndex, fitPlot },
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders as expected when not fit plot", () => {
+        const wrapper = getWrapper(1, false, [
+            defaultGraphSettings(),
+            { lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }
+        ]);
+        const labels = wrapper.findAll("label");
+        const inputs = wrapper.findAll("input");
+        expect(labels.length).toBe(2);
+        expect(inputs.length).toBe(2);
+        expect(labels[0].text()).toBe("Log scale y axis");
+        expect(inputs[0].attributes("type")).toBe("checkbox");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(true);
+        expect(labels[1].text()).toBe("Lock y axis");
+        expect(inputs[1].attributes("type")).toBe("checkbox");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(true);
+    });
+
+    it("renders as expected when fit plot", () => {
+        const wrapper = getWrapper(undefined, true, [
+            { lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }
+        ]);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+    });
+
+    it("commits change to log scale y axis setting, when not fit plot", async () => {
+        const wrapper = getWrapper(1, false);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        await inputs[0].setValue(true);
+        expect(mockSetLogScaleYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toStrictEqual({graphIndex: 1, value: true});
+        expect(mockSetFitLogScaleYAxis).not.toHaveBeenCalled();
+    })
+
+    it("commits change to log scale y axis setting, when fit plot", async () => {
+        const wrapper = getWrapper(undefined, true);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        await inputs[0].setValue(true);
+        expect(mockSetFitLogScaleYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetFitLogScaleYAxis.mock.calls[0][1]).toBe(true);
+        expect(mockSetLogScaleYAxis).not.toHaveBeenCalled();
+    });
+
+    it("commits change to log scale y axis setting, when not fit plot", async () => {
+        const wrapper = getWrapper(1, false);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+        await inputs[1].setValue(true);
+        expect(mockSetLockYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetLockYAxis.mock.calls[0][1]).toStrictEqual({graphIndex: 1, value: true});
+        expect(mockSetFitLockYAxis).not.toHaveBeenCalled();
+    });
+
+    it("commits change to log scale y axis setting, when fit plot", async () => {
+        const wrapper = getWrapper(undefined, true);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+        await inputs[1].setValue(true);
+        expect(mockSetFitLockYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetFitLockYAxis.mock.calls[0][1]).toBe(true);
+        expect(mockSetLockYAxis).not.toHaveBeenCalled();
+    });
+});
diff --git a/app/static/tests/unit/components/options/graphSettings.test.ts b/app/static/tests/unit/components/options/graphSettings.test.ts
deleted file mode 100644
index b6f508e4..00000000
--- a/app/static/tests/unit/components/options/graphSettings.test.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import Vuex from "vuex";
-import { shallowMount } from "@vue/test-utils";
-import { BasicState } from "../../../../src/app/store/basic/state";
-import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
-import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
-
-describe("GraphSettings", () => {
-    const mockSetLogScaleYAxis = jest.fn();
-    const mockSetLockYAxis = jest.fn();
-
-    const getWrapper = (logScaleYAxis = true, lockYAxis = true) => {
-        const store = new Vuex.Store<BasicState>({
-            modules: {
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        settings: {
-                            logScaleYAxis,
-                            lockYAxis
-                        }
-                    } as any,
-                    mutations: {
-                        [GraphsMutation.SetLogScaleYAxis]: mockSetLogScaleYAxis,
-                        [GraphsMutation.SetLockYAxis]: mockSetLockYAxis
-                    }
-                }
-            }
-        });
-        return shallowMount(GraphSettings, {
-            global: {
-                plugins: [store]
-            }
-        });
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("renders as expected", () => {
-        const wrapper = getWrapper();
-        const labels = wrapper.findAll("label");
-        const inputs = wrapper.findAll("input");
-        expect(labels.length).toBe(2);
-        expect(inputs.length).toBe(2);
-        expect(labels[0].text()).toBe("Log scale y axis");
-        expect(inputs[0].attributes("type")).toBe("checkbox");
-        expect((inputs[0].element as HTMLInputElement).checked).toBe(true);
-        expect(labels[1].text()).toBe("Lock y axis");
-        expect(inputs[1].attributes("type")).toBe("checkbox");
-        expect((inputs[1].element as HTMLInputElement).checked).toBe(true);
-    });
-
-    it("commits change to log scale y axis setting", async () => {
-        const wrapper = getWrapper(false);
-        const inputs = wrapper.findAll("input");
-        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
-        await inputs[0].setValue(true);
-        expect(mockSetLogScaleYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toBe(true);
-    });
-
-    it("commits change to log scale y axis setting", async () => {
-        const wrapper = getWrapper(false, false);
-        const inputs = wrapper.findAll("input");
-        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
-        await inputs[1].setValue(true);
-        expect(mockSetLockYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLockYAxis.mock.calls[0][1]).toBe(true);
-    });
-});
diff --git a/app/static/tests/unit/components/options/optionsTab.test.ts b/app/static/tests/unit/components/options/optionsTab.test.ts
index c8e60be3..3de4f040 100644
--- a/app/static/tests/unit/components/options/optionsTab.test.ts
+++ b/app/static/tests/unit/components/options/optionsTab.test.ts
@@ -74,7 +74,7 @@ describe("OptionsTab", () => {
         });
         const wrapper = getWrapper(store);
         const collapses = wrapper.findAllComponents(VerticalCollapse);
-        expect(collapses.length).toBe(5);
+        expect(collapses.length).toBe(4);
         expect(collapses.at(0)!.props("title")).toBe("Model Parameters");
         expect(collapses.at(0)!.props("collapseId")).toBe("model-params");
         const paramValues = collapses.at(0)!.findComponent(ParameterValues);
@@ -82,16 +82,13 @@ describe("OptionsTab", () => {
         expect(collapses.at(1)!.props("title")).toBe("Run Options");
         expect(collapses.at(1)!.props("collapseId")).toBe("run-options");
         expect(collapses.at(1)!.findComponent(RunOptions).exists()).toBe(true);
-        expect(collapses.at(2)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(2)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(2)!.findComponent(GraphSettings).exists()).toBe(true);
-        expect(collapses.at(3)!.props("title")).toBe("Advanced Settings");
-        expect(collapses.at(3)!.props("collapseId")).toBe("advanced-settings");
-        expect(collapses.at(3)!.props("collapsedDefault")).toBe(true);
-        expect(collapses.at(3)!.findComponent(AdvancedSettings).exists()).toBe(true);
-        expect(collapses.at(4)!.props("title")).toBe("Saved Parameter Sets");
-        expect(collapses.at(4)!.props("collapseId")).toBe("parameter-sets");
-        expect(collapses.at(4)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(2)!.props("title")).toBe("Advanced Settings");
+        expect(collapses.at(2)!.props("collapseId")).toBe("advanced-settings");
+        expect(collapses.at(2)!.props("collapsedDefault")).toBe(true);
+        expect(collapses.at(2)!.findComponent(AdvancedSettings).exists()).toBe(true);
+        expect(collapses.at(3)!.props("title")).toBe("Saved Parameter Sets");
+        expect(collapses.at(3)!.props("collapseId")).toBe("parameter-sets");
+        expect(collapses.at(3)!.findComponent(ParameterSets).exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
         expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
@@ -157,7 +154,7 @@ describe("OptionsTab", () => {
                     columnToFit: null
                 },
                 graphs: {
-                    settings: {
+                    fitGraphSettings: {
                         logScaleYAxis: false
                     }
                 }
@@ -189,16 +186,17 @@ describe("OptionsTab", () => {
         expect(collapses.at(3)!.props("title")).toBe("Optimisation");
         expect(collapses.at(3)!.props("collapseId")).toBe("optimisation");
         expect(collapses.at(3)!.findComponent(OptimisationOptions).exists()).toBe(true);
-        expect(collapses.at(4)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(4)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(4)!.findComponent(GraphSettings).exists()).toBe(true);
-        expect(collapses.at(5)!.props("title")).toBe("Advanced Settings");
-        expect(collapses.at(5)!.props("collapseId")).toBe("advanced-settings");
-        expect(collapses.at(5)!.props("collapsedDefault")).toBe(true);
-        expect(collapses.at(5)!.findComponent(AdvancedSettings).exists()).toBe(true);
-        expect(collapses.at(6)!.props("title")).toBe("Saved Parameter Sets");
-        expect(collapses.at(6)!.props("collapseId")).toBe("parameter-sets");
-        expect(collapses.at(6)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(4)!.props("title")).toBe("Advanced Settings");
+        expect(collapses.at(4)!.props("collapseId")).toBe("advanced-settings");
+        expect(collapses.at(4)!.props("collapsedDefault")).toBe(true);
+        expect(collapses.at(4)!.findComponent(AdvancedSettings).exists()).toBe(true);
+        expect(collapses.at(5)!.props("title")).toBe("Saved Parameter Sets");
+        expect(collapses.at(5)!.props("collapseId")).toBe("parameter-sets");
+        expect(collapses.at(5)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(6)!.props("title")).toBe("Fit Graph Settings");
+        expect(collapses.at(6)!.props("collapseId")).toBe("graph-settings");
+        expect(collapses.at(6)!.findComponent(GraphSettings).props("fitPlot")).toBe(true);
+
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
     });
@@ -221,7 +219,7 @@ describe("OptionsTab", () => {
         });
         const wrapper = getWrapper(store);
         const collapses = wrapper.findAllComponents(VerticalCollapse);
-        expect(collapses.length).toBe(3);
+        expect(collapses.length).toBe(2);
         expect(collapses.at(0)!.props("title")).toBe("Model Parameters");
         expect(collapses.at(0)!.props("collapseId")).toBe("model-params");
         const paramValues = collapses.at(0)!.findComponent(ParameterValues);
@@ -229,9 +227,6 @@ describe("OptionsTab", () => {
         expect(collapses.at(1)!.props("title")).toBe("Run Options");
         expect(collapses.at(1)!.props("collapseId")).toBe("run-options");
         expect(collapses.at(1)!.findComponent(RunOptions).exists()).toBe(true);
-        expect(collapses.at(2)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(2)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(2)!.findComponent(GraphSettings).exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
     });
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index a294067b..eb86e01f 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -1,4 +1,6 @@
 // Mock plotly before import RunTab, which indirectly imports plotly via WodinPlot
+import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
+
 jest.mock("plotly.js-basic-dist-min", () => {});
 
 /* eslint-disable import/first */
@@ -111,6 +113,12 @@ describe("RunPlot", () => {
             ]
         });
 
+    const graphConfig = {
+        selectedVariables,
+        unselectedVariables: [],
+        settings: defaultGraphSettings()
+    };
+
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -129,7 +137,8 @@ describe("RunPlot", () => {
             props: {
                 fadePlot: false,
                 graphIndex: 0,
-                linkedXAxis
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -205,7 +214,8 @@ describe("RunPlot", () => {
             props: {
                 fadePlot: false,
                 graphIndex: 0,
-                linkedXAxis
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -263,7 +273,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -274,6 +285,8 @@ describe("RunPlot", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([
             mockSolution,
             mockAllFitData,
@@ -397,7 +410,9 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig,
+                graphIndex: 0
             },
             global: {
                 plugins: [store]
@@ -408,6 +423,8 @@ describe("RunPlot", () => {
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([]);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData(0, 1, 10);
@@ -423,7 +440,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -482,7 +500,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -563,7 +582,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig: {...graphConfig, selectedVariables: []}
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index a812eb37..a64b12df 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -1,4 +1,6 @@
 // Mock plotly before import RunStochasticTab, which indirectly imports plotly via WodinPlot
+import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
+
 jest.mock("plotly.js-basic-dist-min", () => {});
 
 /* eslint-disable import/first */
@@ -37,11 +39,18 @@ describe("RunPlot for stochastic", () => {
             {
                 id: "1234",
                 selectedVariables,
-                unselectedVariables: []
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
             }
         ]
     });
 
+    const graphConfig = {
+        selectedVariables,
+        unselectedVariables: [],
+        settings: defaultGraphSettings()
+    };
+
     const linkedXAxis = { autorange: false, range: [1, 2] };
 
     afterEach(() => {
@@ -68,7 +77,8 @@ describe("RunPlot for stochastic", () => {
             props: {
                 fadePlot: false,
                 graphIndex: 0,
-                linkedXAxis
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -81,6 +91,8 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution]);
         expect(wodinPlot.props("recalculateOnRelayout")).toBe(true);
         expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         // Generates expected plot data from model
         const plotData = wodinPlot.props("plotData");
@@ -135,7 +147,8 @@ describe("RunPlot for stochastic", () => {
             props: {
                 fadePlot: false,
                 graphIndex: 0,
-                linkedXAxis
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -159,7 +172,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -170,6 +184,8 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([]);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData();
@@ -193,7 +209,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -216,7 +233,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -240,7 +258,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index c2c9ecbc..63b25498 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -69,7 +69,7 @@ describe("RunTab", () => {
                             { id: "123", selectedVariables, unselectedVariables: [] },
                             { id: "456", selectedVariables: [], unselectedVariables: [] }
                         ]
-                    }),
+                    } as any),
                     getters: graphGetters
                 },
                 model: {
@@ -115,7 +115,7 @@ describe("RunTab", () => {
                             { id: "123", selectedVariables: ["S"], unselectedVariables: [] },
                             { id: "456", selectedVariables: [], unselectedVariables: [] }
                         ]
-                    }),
+                    } as any),
                     getters: graphGetters
                 },
                 model: {
@@ -155,9 +155,13 @@ describe("RunTab", () => {
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
         expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(0)!.props("graphConfig"))
+            .toStrictEqual({ id: "123", selectedVariables: ["S"], unselectedVariables: [] });
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
         expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(1)!.props("graphConfig"))
+            .toStrictEqual({ id: "456", selectedVariables: [], unselectedVariables: [] });
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -197,9 +201,15 @@ describe("RunTab", () => {
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
         expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(0)!.props("graphConfig"))
+            .toStrictEqual({ id: "123", selectedVariables: ["S"], unselectedVariables: [] });
+
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
         expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(1)!.props("graphConfig"))
+            .toStrictEqual({ id: "456", selectedVariables: [], unselectedVariables: [] });
+
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index ff7f3421..aed29016 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -1,4 +1,6 @@
 // Mock the import of plotly so we can mock Plotly methods
+import {defaultGraphSettings} from "../../../src/app/store/graphs/state";
+
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
     react: jest.fn(),
@@ -55,25 +57,28 @@ describe("WodinPlot", () => {
         endTime: 99,
         redrawWatches: [],
         plotData: mockPlotDataFn,
-        placeholderMessage: "No data available"
+        placeholderMessage: "No data available",
+        fitPlot: false,
+        graphIndex: 0,
+        graphConfig: { settings: defaultGraphSettings() }
     };
 
     const mockSetYAxisRange = jest.fn();
+    const mockSetFitYAxisRange = jest.fn();
 
-    const getStore = (logScaleYAxis = false, lockYAxis = false) => {
+    const getStore = (
+        fitGraphSettings = defaultGraphSettings()
+   ) => {
         return new Vuex.Store<BasicState>({
             modules: {
                 graphs: {
                     namespaced: true,
                     state: {
-                        settings: {
-                            logScaleYAxis,
-                            lockYAxis,
-                            yAxisRange: [10, 20]
-                        }
+                        fitGraphSettings
                     },
                     mutations: {
-                        [GraphsMutation.SetYAxisRange]: mockSetYAxisRange
+                        [GraphsMutation.SetYAxisRange]: mockSetYAxisRange,
+                        [GraphsMutation.SetFitYAxisRange]: mockSetFitYAxisRange
                     }
                 }
             }
@@ -110,7 +115,6 @@ describe("WodinPlot", () => {
     afterEach(() => {
         jest.clearAllMocks();
         jest.restoreAllMocks();
-        mockSetYAxisRange.mockReset();
     });
 
     it("renders plot ref element", () => {
@@ -256,8 +260,16 @@ describe("WodinPlot", () => {
     });
 
     it("relayout preserves locked y axis range", async () => {
-        const store = getStore(false, true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper({
+            graphConfig: {
+                settings: {
+                    ...defaultGraphSettings(),
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
+            }
+        }, store);
         const { relayout } = wrapper.vm as any;
         const relayoutEvent = {
             "xaxis.autorange": false,
@@ -400,8 +412,26 @@ describe("WodinPlot", () => {
     });
 
     it("renders y axis log scale if graph setting is set", async () => {
-        const store = getStore(true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper({
+            graphConfig: {
+                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+            }
+        }, store);
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "log" }
+        });
+    });
+
+    it("renders y axis log scale if fit graph setting is set, and fitPlot is true", async () => {
+        const store = getStore({...defaultGraphSettings(), logScaleYAxis: true});
+        const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -414,8 +444,34 @@ describe("WodinPlot", () => {
     });
 
     it("locks axes if graph setting is set", async () => {
-        const store = getStore(false, true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper({
+            graphConfig: {
+                settings: {
+                    ...defaultGraphSettings(),
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
+            }
+        }, store);
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "linear", autorange: false, range: [10, 20] }
+        });
+    });
+
+    it("locks axes if fit graph setting is set, and fitPlot is true", async () => {
+        const store = getStore({
+            ...defaultGraphSettings(),
+            lockYAxis: true,
+            yAxisRange: [10, 20]
+        });
+        const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -428,7 +484,7 @@ describe("WodinPlot", () => {
     });
 
     it("commits SetYAxisRange on drawPlot", async () => {
-        const store = getStore(false, false);
+        const store = getStore();
         const wrapper = getWrapper({}, store);
         mockPlotElementOn(wrapper);
 
@@ -439,12 +495,33 @@ describe("WodinPlot", () => {
         await nextTick();
         await wrapper.setProps({ redrawWatches: [{} as any] });
         await nextTick();
-        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual([1, 2]);
+        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({graphIndex: 0, value: [1, 2]});
+        expect(mockSetFitYAxisRange).not.toHaveBeenCalled();
+    });
+
+    it("commits SetFitYAxisRange on drawPlot, when fitPlot is true", async () => {
+        const store = getStore();
+        const wrapper = getWrapper({fitPlot: true}, store);
+        mockPlotElementOn(wrapper);
+
+        (wrapper.vm as any).plot = {
+            layout: mockLayout,
+            on: jest.fn()
+        };
+        await nextTick();
+        await wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockSetFitYAxisRange.mock.calls[0][1]).toStrictEqual([1, 2]);
+        expect(mockSetYAxisRange).not.toHaveBeenCalled();
     });
 
     it("relayout uses graph settings log scale y axis value", async () => {
-        const store = getStore(true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper({
+            graphConfig: {
+                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+            }
+        }, store);
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -491,8 +568,11 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
 
-        const store = (wrapper.vm as any).$store;
-        store.state.graphs.settings.logScaleYAxis = true;
+        await wrapper.setProps({
+            graphConfig: {
+                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+            }
+        });
         await nextTick();
 
         expect(mockPlotDataFn).toBeCalledTimes(2);
@@ -509,9 +589,12 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
 
-        await wrapper.setProps({ fadePlot: true });
-        const store = (wrapper.vm as any).$store;
-        store.state.graphs.settings.logScaleYAxis = true;
+        await wrapper.setProps({
+            fadePlot: true,
+            graphConfig: {
+                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+            }
+        });
         await nextTick();
 
         expect(mockPlotDataFn).toBeCalledTimes(1);
diff --git a/app/static/tests/unit/serialiser.test.ts b/app/static/tests/unit/serialiser.test.ts
index c1af0cf4..8ac8ce84 100644
--- a/app/static/tests/unit/serialiser.test.ts
+++ b/app/static/tests/unit/serialiser.test.ts
@@ -25,6 +25,7 @@ import { Language } from "../../src/app/types/languageTypes";
 import { AdvancedOptions } from "../../src/app/types/responseTypes";
 import { AdvancedComponentType } from "../../src/app/store/run/state";
 import { noSensitivityUpdateRequired } from "../../src/app/store/sensitivity/sensitivity";
+import {defaultGraphSettings} from "../../src/app/store/graphs/state";
 
 jest.mock("../../src/app/utils", () => {
     return {
@@ -370,7 +371,7 @@ describe("serialise", () => {
     });
 
     const graphsState = mockGraphsState({
-        settings: {
+        fitGraphSettings: {
             logScaleYAxis: true,
             lockYAxis: true,
             yAxisRange: [1, 2]
@@ -379,7 +380,12 @@ describe("serialise", () => {
             {
                 id: "123",
                 selectedVariables: ["S", "I"],
-                unselectedVariables: ["R"]
+                unselectedVariables: ["R"],
+                settings: {
+                    logScaleYAxis: false,
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
             }
         ]
     });
@@ -544,7 +550,7 @@ describe("serialise", () => {
     };
 
     const expectedGraphs = {
-        settings: {
+        fitGraphSettings: {
             logScaleYAxis: true,
             lockYAxis: true,
             yAxisRange: [1, 2]
@@ -552,7 +558,12 @@ describe("serialise", () => {
         config: [
             {
                 selectedVariables: ["S", "I"],
-                unselectedVariables: ["R"]
+                unselectedVariables: ["R"],
+                settings: {
+                    logScaleYAxis: false,
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
             }
         ]
     };
@@ -726,9 +737,11 @@ describe("serialise", () => {
                     {
                         id: "12345", // id from mocked newUid
                         selectedVariables: [],
-                        unselectedVariables: []
+                        unselectedVariables: [],
+                        settings: defaultGraphSettings()
                     }
-                ]
+                ],
+                fitGraphSettings: defaultGraphSettings()
             })
         });
     });
@@ -771,9 +784,11 @@ describe("serialise", () => {
             {
                 id: "12345",
                 selectedVariables: ["S", "I", "R"],
-                unselectedVariables: []
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
             }
         ]);
+        expect(target.graphs.fitGraphSettings).toStrictEqual(defaultGraphSettings());
     });
 
     it("deserialises default graph settings when undefined in serialised state", () => {
@@ -806,9 +821,12 @@ describe("serialise", () => {
             graphs: defaultGraphsState()
         } as any;
         // sanity check
-        expect(target.graphs.settings.logScaleYAxis).toBe(false);
+        expect(target.graphs.fitGraphSettings.logScaleYAxis).toBe(false);
+        expect(target.graphs.config[0].settings.logScaleYAxis).toBe(false);
 
         deserialiseState(target, serialised);
-        expect(target.graphs.settings.logScaleYAxis).toBe(false);
+        expect(target.graphs.fitGraphSettings.logScaleYAxis).toBe(false);
+        expect(target.graphs.config[0].settings.logScaleYAxis).toBe(false);
+
     });
 });
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index c3863eef..22a0f92b 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -3,6 +3,7 @@ import { actions, GraphsAction } from "../../../../src/app/store/graphs/actions"
 import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 import { AppType } from "../../../../src/app/store/appState/state";
 import { FitDataAction } from "../../../../src/app/store/fitData/actions";
+import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
 
 describe("Graphs actions", () => {
     const modelState = {
@@ -87,5 +88,6 @@ describe("Graphs actions", () => {
         expect(commit.mock.calls[0][1].selectedVariables).toStrictEqual([]);
         expect(commit.mock.calls[0][1].unselectedVariables).toStrictEqual(["b", "a", "c"]);
         expect(commit.mock.calls[0][1].id.length).toBe(32);
+        expect(commit.mock.calls[0][1].settings).toStrictEqual(defaultGraphSettings());
     });
 });
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index 9da4996b..0d969823 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -1,36 +1,64 @@
 import { mutations } from "../../../../src/app/store/graphs/mutations";
-import { GraphsState } from "../../../../src/app/store/graphs/state";
+import {defaultGraphSettings, GraphsState} from "../../../../src/app/store/graphs/state";
 import { mockGraphsState, mockModelState } from "../../../mocks";
 
 describe("Graphs mutations", () => {
-    const state: GraphsState = mockGraphsState();
+    const state: GraphsState = mockGraphsState({
+        config: [
+            {
+                id: "123",
+                selectedVariables: ["S"],
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            },
+            {
+                id: "456",
+                selectedVariables: ["I"],
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            }
+        ]
+    });
 
     it("sets logScaleYAxis", () => {
-        mutations.SetLogScaleYAxis(state, true);
-        expect(state.settings.logScaleYAxis).toBe(true);
+        mutations.SetLogScaleYAxis(state, {graphIndex: 1, value: true});
+        expect(state.config[1].settings.logScaleYAxis).toBe(true);
     });
 
     it("sets lockYAxis", () => {
-        mutations.SetLockYAxis(state, true);
-        expect(state.settings.lockYAxis).toBe(true);
+        mutations.SetLockYAxis(state, {graphIndex: 1, value: true});
+        expect(state.config[1].settings.lockYAxis).toBe(true);
     });
 
     it("sets yAxisRange", () => {
         mutations.SetYAxisRange(state, {
-            x: [1, 2],
-            y: [3, 4]
-        });
-        expect(state.settings.yAxisRange).toStrictEqual({
-            x: [1, 2],
-            y: [3, 4]
+            graphIndex: 1,
+            value: [3, 4]
         });
+        expect(state.config[1].settings.yAxisRange).toStrictEqual([3, 4]);
+    });
+
+    it("sets logScaleYAxis for fit graph", () => {
+        mutations.SetFitLogScaleYAxis(state, true);
+        expect(state.fitGraphSettings.logScaleYAxis).toBe(true);
+    });
+
+    it("sets lockYAxis for fit graph", () => {
+        mutations.SetFitLockYAxis(state, true);
+        expect(state.fitGraphSettings.lockYAxis).toBe(true);
+    });
+
+    it("sets yAxisRange", () => {
+        mutations.SetFitYAxisRange(state, [3, 4]);
+        expect(state.fitGraphSettings.yAxisRange).toStrictEqual([3, 4]);
     });
 
     it("SetSelectedVariables sets selected and unselected variables", () => {
+        const settings = defaultGraphSettings();
         const testState = mockGraphsState({
             config: [
-                { id: "123", selectedVariables: [], unselectedVariables: [] },
-                { id: "456", selectedVariables: [], unselectedVariables: [] }
+                { id: "123", selectedVariables: [], unselectedVariables: [], settings },
+                { id: "456", selectedVariables: [], unselectedVariables: [], settings }
             ]
         });
         mutations.SetSelectedVariables(testState, {
@@ -41,34 +69,37 @@ describe("Graphs mutations", () => {
         expect(testState.config[1]).toStrictEqual({
             id: "456",
             selectedVariables: ["x", "z"],
-            unselectedVariables: ["y"]
+            unselectedVariables: ["y"],
+            settings
         });
-        expect(testState.config[0]).toStrictEqual({ id: "123", selectedVariables: [], unselectedVariables: [] });
+        expect(testState.config[0]).toStrictEqual({ id: "123", selectedVariables: [], unselectedVariables: [], settings });
     });
 
     it("AddGraph pushes new graph to config", () => {
+        const settings = defaultGraphSettings();
         const testState = mockGraphsState({
-            config: [{ id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
+            config: [{ id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings }]
         });
-        mutations.AddGraph(testState, { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"] });
+        mutations.AddGraph(testState, { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"], settings });
         expect(testState.config).toStrictEqual([
-            { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-            { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
+            { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+            { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"], settings }
         ]);
     });
 
     it("DeleteGraph removes graph from config", () => {
+        const settings = defaultGraphSettings();
         const testState = mockGraphsState({
             config: [
-                { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-                { id: "2", selectedVariables: ["b"], unselectedVariables: ["a", "c"] },
-                { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+                { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+                { id: "2", selectedVariables: ["b"], unselectedVariables: ["a", "c"], settings },
+                { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"], settings }
             ]
         });
         mutations.DeleteGraph(testState, 1);
         expect(testState.config).toStrictEqual([
-            { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
-            { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+            { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+            { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"], settings }
         ]);
     });
 });

From e8f63d63b511533d6c20e11f7514aa374261c953 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 08:06:02 +0100
Subject: [PATCH 49/80] fix e2e tests

---
 .../src/app/components/GraphSettings.vue       |  4 ++--
 .../sensitivity/SensitivitySummaryPlot.vue     |  3 ++-
 app/static/tests/e2e/code.etest.ts             |  2 --
 app/static/tests/e2e/fit.etest.ts              |  2 +-
 app/static/tests/e2e/options.etest.ts          | 18 ++++++++----------
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/static/src/app/components/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
index d0bfc679..152860fd 100644
--- a/app/static/src/app/components/GraphSettings.vue
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-      <div id="log-scale-y-axis" class="form-check form-check-inline">
+      <div class="log-scale-y-axis form-check form-check-inline">
           <label class="form-check-label">Log scale y axis</label>
           <input
               type="checkbox"
@@ -9,7 +9,7 @@
               v-model="logScaleYAxis"
           />
       </div>
-      <div id="lock-y-axis" class="form-check form-check-inline">
+      <div class="lock-y-axis form-check form-check-inline">
           <label class="form-check-label">Lock y axis</label>
           <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
 
diff --git a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
index 6f65fc38..b44747d7 100644
--- a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
@@ -54,7 +54,8 @@ export default defineComponent({
 
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
-            const logScale = store.state.graphs.settings.logScaleYAxis && isNotTimePlot;
+
+            const logScale = store.state.graphs.config[0].settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 49a1d072..9cba3c62 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -320,7 +320,6 @@ test.describe("Code Tab tests", () => {
         expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe(
             "No variables are selected."
         );
-        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toContain("Graph 2");
         expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent()).toContain(
             "Drag variables here to select them for this graph."
         );
@@ -336,7 +335,6 @@ test.describe("Code Tab tests", () => {
         // Delete second graph
         await page.click(":nth-match(.graph-config-panel .delete-graph, 2)");
         await expect(page.locator(".graph-config-panel")).toHaveCount(1);
-        await expect(page.locator(".graph-config-panel h5")).toHaveText("Graph 1");
         await expectGraphVariables(page, 0, ["I", "R"]);
 
         // First graph should not be deletable
diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 3a88fe89..92bf13d2 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -189,7 +189,7 @@ test.describe("Wodin App model fit tests", () => {
         await page.click(":nth-match(input.vary-param-check, 2)");
 
         // change advanced setting to sabotage fit
-        await page.click(":nth-match(.collapse-title, 6)"); // Open Advanced Settings
+        await page.click(":nth-match(.collapse-title, 5)"); // Open Advanced Settings
         const advancedSettingPanel = await page.locator("#advanced-settings-panel");
         const input1 = await advancedSettingPanel.locator(":nth-match(input, 1)");
         const input2 = await advancedSettingPanel.locator(":nth-match(input, 2)");
diff --git a/app/static/tests/e2e/options.etest.ts b/app/static/tests/e2e/options.etest.ts
index 306219fc..7eefaec0 100644
--- a/app/static/tests/e2e/options.etest.ts
+++ b/app/static/tests/e2e/options.etest.ts
@@ -204,19 +204,17 @@ test.describe("Options Tab tests", () => {
     });
 
     test("can change graph setting for log scale y axis", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
         // should update y axis tick
         const tickSelector = ":nth-match(.plotly .ytick text, 2)";
         await expect(await page.innerHTML(tickSelector)).toBe("10n");
         // change back to linear
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
         await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
     });
 
     test("can change graph setting for lock axes", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         const tickSelector = ":nth-match(.plotly .ytick text, 6)";
         await expect(await page.innerHTML(tickSelector)).toBe("1M");
@@ -227,20 +225,19 @@ test.describe("Options Tab tests", () => {
 
         // would be 1B if we didn't lock the axes
         await expect(await page.innerHTML(tickSelector)).toBe("1M");
-        await page.locator("#lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         // autorange on deselect of lock axes
         await expect(await page.innerHTML(tickSelector)).toBe("1B");
     });
 
     test("overrides axes lock if log scale toggle changes", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#lock-y-axis input").click();
+         await page.locator(".lock-y-axis input").click();
 
         const tickSelector = ":nth-match(.plotly .ytick text, 2)";
         await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
 
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
 
         // if you've locked the axis, it should not update to 10n, would
         // be 10^115441
@@ -504,7 +501,8 @@ test.describe("Options Tab tests", () => {
     };
 
     test("can edit and run model with advanced settings", async ({ page }) => {
-        await page.click(":nth-match(.collapse-title, 4)");
+        const advancedHeader = page.getByText(/Advanced Settings/);
+        await advancedHeader.click();
 
         await expectAdvancedSetting(page, 0);
         await expectAdvancedSetting(page, 1);

From 6e3c1033058e39790b915ac8e58432399d5e7c89 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 08:17:26 +0100
Subject: [PATCH 50/80] add e2e tests

---
 app/static/tests/e2e/code.etest.ts | 10 ++++++++++
 app/static/tests/e2e/fit.etest.ts  | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 9cba3c62..5de28d12 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -386,4 +386,14 @@ test.describe("Code Tab tests", () => {
         const lineElement = await page.locator(`.view-overlays div:nth-child(${3}) >> div`);
         expect(lineElement).toHaveClass("cdr editor-warning-background");
     });
+
+    test("can change graph setting for log scale y axis from code tab", async ({ page }) => {
+        await page.locator(".log-scale-y-axis input").click();
+        // should update y axis tick
+        const tickSelector = ":nth-match(.plotly .ytick text, 2)";
+        await expect(await page.innerHTML(tickSelector)).toBe("10n");
+        // change back to linear
+        await page.locator(".log-scale-y-axis input").click();
+        await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
+    });
 });
diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 92bf13d2..2664ddea 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -328,4 +328,18 @@ test.describe("Wodin App model fit tests", () => {
         const sumOfSquares = await page.innerText(":nth-match(.wodin-plot-container span, 1)");
         expect(sumOfSquares).toContain("Sum of squares:");
     });
+
+    test("can change graph setting for log scale y axis for fit graph", async ({ page }) => {
+        await startModelFit(page);
+        await waitForModelFitCompletion(page);
+
+        await expect(await page.locator(":nth-match(.collapse-title, 7)")).toHaveText("Fit Graph Settings");
+        await page.locator(".log-scale-y-axis input").click();
+        // should update y axis tick
+        const tickSelector = ":nth-match(.plotly .ytick text, 2)";
+        await expect(await page.innerHTML(tickSelector)).toBe("4");
+        // change back to linear
+        await page.locator(".log-scale-y-axis input").click();
+        await expect(await page.innerHTML(tickSelector)).toBe("2");
+    });
 });

From d8de6d8ff3ccc5d7448c6fab049298b9a0eb9e03 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 09:36:38 +0100
Subject: [PATCH 51/80] lint etc

---
 .../src/app/components/GraphSettings.vue      | 61 +++++++-------
 app/static/src/app/components/WodinPlot.vue   | 14 ++--
 .../components/graphConfig/GraphConfig.vue    | 33 ++++----
 .../src/app/components/options/OptionsTab.vue |  2 +-
 app/static/src/app/components/run/RunPlot.vue |  6 +-
 .../app/components/run/RunStochasticPlot.vue  |  6 +-
 app/static/src/app/store/graphs/graphs.ts     |  2 +-
 app/static/src/app/store/graphs/mutations.ts  |  6 +-
 app/static/src/app/store/graphs/state.ts      |  1 -
 app/static/tests/e2e/options.etest.ts         |  2 +-
 app/static/tests/mocks.ts                     |  2 +-
 .../unit/components/graphSettings.test.ts     | 12 ++-
 .../components/mixins/baseSensitivity.test.ts | 10 ++-
 .../unit/components/options/linkData.test.ts  | 10 ++-
 .../tests/unit/components/run/runPlot.test.ts |  7 +-
 .../components/run/runStochasticPlot.test.ts  |  3 +-
 .../tests/unit/components/run/runTab.test.ts  | 28 +++++--
 .../sensitivitySummaryDownload.test.ts        |  4 +-
 .../sensitivitySummaryPlot.test.ts            | 10 ++-
 .../tests/unit/components/wodinPlot.test.ts   | 83 ++++++++++---------
 app/static/tests/unit/serialiser.test.ts      |  3 +-
 .../tests/unit/store/graphs/actions.test.ts   |  2 +-
 .../tests/unit/store/graphs/getters.test.ts   |  7 +-
 .../tests/unit/store/graphs/mutations.test.ts | 20 +++--
 24 files changed, 194 insertions(+), 140 deletions(-)

diff --git a/app/static/src/app/components/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
index 152860fd..c2dcc77e 100644
--- a/app/static/src/app/components/GraphSettings.vue
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -1,19 +1,13 @@
 <template>
     <div>
-      <div class="log-scale-y-axis form-check form-check-inline">
-          <label class="form-check-label">Log scale y axis</label>
-          <input
-              type="checkbox"
-              class="form-check-input"
-              style="vertical-align: bottom"
-              v-model="logScaleYAxis"
-          />
-      </div>
-      <div class="lock-y-axis form-check form-check-inline">
-          <label class="form-check-label">Lock y axis</label>
-          <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
-
-      </div>
+        <div class="log-scale-y-axis form-check form-check-inline">
+            <label class="form-check-label">Log scale y axis</label>
+            <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="logScaleYAxis" />
+        </div>
+        <div class="lock-y-axis form-check form-check-inline">
+            <label class="form-check-label">Lock y axis</label>
+            <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
+        </div>
     </div>
 </template>
 
@@ -25,30 +19,33 @@ import { GraphsMutation } from "../store/graphs/mutations";
 export default defineComponent({
     name: "GraphSettings",
     props: {
-      graphIndex: {
-        type: Number,
-        required: false,
-        default: -1
-      },
-      fitPlot: {
-        type: Boolean,
-        required: true
-      }
+        graphIndex: {
+            type: Number,
+            required: false,
+            default: -1
+        },
+        fitPlot: {
+            type: Boolean,
+            required: true
+        }
     },
     setup(props) {
         const store = useStore();
-        const settings = computed(() => props.fitPlot ? store.state.graphs.fitGraphSettings :
-            store.state.graphs.config[props.graphIndex].settings);
+        const settings = computed(() =>
+            props.fitPlot ? store.state.graphs.fitGraphSettings : store.state.graphs.config[props.graphIndex].settings
+        );
         const logScaleYAxis = computed({
             get() {
                 return settings.value.logScaleYAxis;
             },
             set(newValue) {
                 if (props.fitPlot) {
-                  store.commit(`graphs/${GraphsMutation.SetFitLogScaleYAxis}`, newValue);
+                    store.commit(`graphs/${GraphsMutation.SetFitLogScaleYAxis}`, newValue);
                 } else {
-                  store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`,
-                      {graphIndex: props.graphIndex, value: newValue});
+                    store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`, {
+                        graphIndex: props.graphIndex,
+                        value: newValue
+                    });
                 }
             }
         });
@@ -59,10 +56,12 @@ export default defineComponent({
             },
             set(newValue) {
                 if (props.fitPlot) {
-                  store.commit(`graphs/${GraphsMutation.SetFitLockYAxis}`, newValue);
+                    store.commit(`graphs/${GraphsMutation.SetFitLockYAxis}`, newValue);
                 } else {
-                  store.commit(`graphs/${GraphsMutation.SetLockYAxis}`,
-                      {graphIndex: props.graphIndex, value: newValue});
+                    store.commit(`graphs/${GraphsMutation.SetLockYAxis}`, {
+                        graphIndex: props.graphIndex,
+                        value: newValue
+                    });
                 }
             }
         });
diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 2c0d0886..a95dc3de 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -26,7 +26,7 @@ import {
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
-import {GraphConfig, YAxisRange} from "../store/graphs/state";
+import { GraphConfig, YAxisRange } from "../store/graphs/state";
 import { GraphsGetter } from "../store/graphs/getters";
 
 export default defineComponent({
@@ -88,8 +88,9 @@ export default defineComponent({
 
         const hasPlotData = computed(() => !!baseData.value?.length);
 
-        const settings = computed(() => props.fitPlot ? store.state.graphs.fitGraphSettings :
-            props.graphConfig!.settings);
+        const settings = computed(() =>
+            props.fitPlot ? store.state.graphs.fitGraphSettings : props.graphConfig!.settings
+        );
         const yAxisType = computed(() => (settings.value.logScaleYAxis ? "log" : ("linear" as AxisType)));
         const lockYAxis = computed(() => settings.value.lockYAxis);
         const yAxisRange = computed(() => settings.value.yAxisRange as YAxisRange);
@@ -104,9 +105,12 @@ export default defineComponent({
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
                 if (props.fitPlot) {
-                  store.commit(`graphs/${GraphsMutation.SetFitYAxisRange}`, yRange);
+                    store.commit(`graphs/${GraphsMutation.SetFitYAxisRange}`, yRange);
                 } else {
-                  store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, {graphIndex: props.graphIndex, value: yRange});
+                    store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, {
+                        graphIndex: props.graphIndex,
+                        value: yRange
+                    });
                 }
             }
         };
diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 34ba4da8..b704c4a2 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -6,7 +6,8 @@
             v-if="canDelete"
             @click="deleteGraph"
             v-tooltip="'Delete Graph'"
-        ><vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
+        >
+            <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
         </button>
         <graph-settings :fit-plot="false" :graph-index="graphIndex" class="graph-config-settings mb-1"></graph-settings>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
@@ -35,14 +36,14 @@
 import VueFeather from "vue-feather";
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
+import GraphSettings from "@/app/components/GraphSettings.vue";
 import SelectVariables from "../mixins/selectVariables";
 import { GraphsMutation } from "../../store/graphs/mutations";
-import GraphSettings from "@/app/components/GraphSettings.vue";
 
 export default defineComponent({
     name: "GraphConfig",
     components: {
-      GraphSettings,
+        GraphSettings,
         VueFeather
     },
     props: {
@@ -92,20 +93,20 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .graph-config-panel {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #ccc;
-  padding: 4px;
-  .graph-config-settings {
-    margin-left: 8px;
-  }
-  .selected-variables-panel {
-    width: 100%;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #ccc;
+    padding: 4px;
+    .graph-config-settings {
+        margin-left: 8px;
+    }
+    .selected-variables-panel {
+        width: 100%;
 
-    .variable {
-      font-size: large;
-      cursor: pointer;
+        .variable {
+            font-size: large;
+            cursor: pointer;
+        }
     }
-  }
 }
 </style>
diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index 1ee21164..256ead22 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -29,7 +29,7 @@
         </vertical-collapse>
         <graph-configs-collapsible v-if="!fitTabIsOpen"></graph-configs-collapsible>
         <vertical-collapse v-if="fitTabIsOpen" title="Fit Graph Settings" collapse-id="graph-settings">
-          <graph-settings class="pt-2" :fit-plot="true"></graph-settings>
+            <graph-settings class="pt-2" :fit-plot="true"></graph-settings>
         </vertical-collapse>
     </div>
 </template>
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 98fa7ac1..4acde1ce 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -27,7 +27,7 @@ import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
 import { runPlaceholderMessage } from "../../utils";
 import { ParameterSet } from "../../store/run/state";
-import {GraphConfig} from "../../store/graphs/state";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "RunPlot",
@@ -38,8 +38,8 @@ export default defineComponent({
             default: 0
         },
         graphConfig: {
-          type: Object as PropType<GraphConfig>,
-          required: true
+            type: Object as PropType<GraphConfig>,
+            required: true
         },
         linkedXAxis: {
             type: Object as PropType<Partial<LayoutAxis> | null>,
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index d6acc63e..fe253757 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -23,7 +23,7 @@ import { WodinPlotData, discreteSeriesSetToPlotly, filterSeriesSet } from "../..
 import WodinPlot from "../WodinPlot.vue";
 import { runPlaceholderMessage } from "../../utils";
 import { StochasticConfig } from "../../types/responseTypes";
-import {GraphConfig} from "../../store/graphs/state";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "RunStochasticPlot",
@@ -34,8 +34,8 @@ export default defineComponent({
             default: 0
         },
         graphConfig: {
-          type: Object as PropType<GraphConfig>,
-          required: true
+            type: Object as PropType<GraphConfig>,
+            required: true
         },
         linkedXAxis: {
             type: Object as PropType<Partial<LayoutAxis> | null>,
diff --git a/app/static/src/app/store/graphs/graphs.ts b/app/static/src/app/store/graphs/graphs.ts
index d83e3ee1..649cd02f 100644
--- a/app/static/src/app/store/graphs/graphs.ts
+++ b/app/static/src/app/store/graphs/graphs.ts
@@ -1,4 +1,4 @@
-import {defaultGraphSettings, GraphsState} from "./state";
+import { defaultGraphSettings, GraphsState } from "./state";
 import { actions } from "./actions";
 import { getters } from "./getters";
 import { mutations } from "./mutations";
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index 966665d5..8cc812d1 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -20,15 +20,15 @@ export interface SetSelectedVariablesPayload {
 }
 
 export const mutations: MutationTree<GraphsState> = {
-    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: {graphIndex: number, value: boolean}) {
+    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: { graphIndex: number; value: boolean }) {
         state.config[payload.graphIndex].settings.logScaleYAxis = payload.value;
     },
 
-    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: {graphIndex: number, value: boolean}) {
+    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: { graphIndex: number; value: boolean }) {
         state.config[payload.graphIndex].settings.lockYAxis = payload.value;
     },
 
-    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: {graphIndex: number, value: YAxisRange}) {
+    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: { graphIndex: number; value: YAxisRange }) {
         state.config[payload.graphIndex].settings.yAxisRange = payload.value;
     },
 
diff --git a/app/static/src/app/store/graphs/state.ts b/app/static/src/app/store/graphs/state.ts
index fe2fed0f..f10e528b 100644
--- a/app/static/src/app/store/graphs/state.ts
+++ b/app/static/src/app/store/graphs/state.ts
@@ -23,4 +23,3 @@ export const defaultGraphSettings = (): GraphSettings => ({
     lockYAxis: false,
     yAxisRange: [0, 0]
 });
-
diff --git a/app/static/tests/e2e/options.etest.ts b/app/static/tests/e2e/options.etest.ts
index 7eefaec0..990ffb02 100644
--- a/app/static/tests/e2e/options.etest.ts
+++ b/app/static/tests/e2e/options.etest.ts
@@ -232,7 +232,7 @@ test.describe("Options Tab tests", () => {
     });
 
     test("overrides axes lock if log scale toggle changes", async ({ page }) => {
-         await page.locator(".lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         const tickSelector = ":nth-match(.plotly .ytick text, 2)";
         await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
diff --git a/app/static/tests/mocks.ts b/app/static/tests/mocks.ts
index 597cd6f8..470b462d 100644
--- a/app/static/tests/mocks.ts
+++ b/app/static/tests/mocks.ts
@@ -26,7 +26,7 @@ import {
     SensitivityVariationType
 } from "../src/app/store/sensitivity/state";
 import { VersionsState } from "../src/app/store/versions/state";
-import {defaultGraphSettings, GraphsState} from "../src/app/store/graphs/state";
+import { defaultGraphSettings, GraphsState } from "../src/app/store/graphs/state";
 import { LanguageState } from "../translationPackage/store/state";
 import { Language } from "../src/app/types/languageTypes";
 import { noSensitivityUpdateRequired } from "../src/app/store/sensitivity/sensitivity";
diff --git a/app/static/tests/unit/components/graphSettings.test.ts b/app/static/tests/unit/components/graphSettings.test.ts
index 3efb17e0..8fc3ee6f 100644
--- a/app/static/tests/unit/components/graphSettings.test.ts
+++ b/app/static/tests/unit/components/graphSettings.test.ts
@@ -3,7 +3,7 @@ import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../src/app/store/basic/state";
 import GraphSettings from "../../../src/app/components/GraphSettings.vue";
 import { GraphsMutation } from "../../../src/app/store/graphs/mutations";
-import {defaultGraphSettings} from "../../../src/app/store/graphs/state";
+import { defaultGraphSettings } from "../../../src/app/store/graphs/state";
 
 describe("GraphSettings", () => {
     const mockSetLogScaleYAxis = jest.fn();
@@ -65,9 +65,7 @@ describe("GraphSettings", () => {
     });
 
     it("renders as expected when fit plot", () => {
-        const wrapper = getWrapper(undefined, true, [
-            { lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }
-        ]);
+        const wrapper = getWrapper(undefined, true, [{ lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }]);
         const inputs = wrapper.findAll("input");
         expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
         expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
@@ -79,9 +77,9 @@ describe("GraphSettings", () => {
         expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
         await inputs[0].setValue(true);
         expect(mockSetLogScaleYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toStrictEqual({graphIndex: 1, value: true});
+        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: true });
         expect(mockSetFitLogScaleYAxis).not.toHaveBeenCalled();
-    })
+    });
 
     it("commits change to log scale y axis setting, when fit plot", async () => {
         const wrapper = getWrapper(undefined, true);
@@ -99,7 +97,7 @@ describe("GraphSettings", () => {
         expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
         await inputs[1].setValue(true);
         expect(mockSetLockYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLockYAxis.mock.calls[0][1]).toStrictEqual({graphIndex: 1, value: true});
+        expect(mockSetLockYAxis.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: true });
         expect(mockSetFitLockYAxis).not.toHaveBeenCalled();
     });
 
diff --git a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
index eddcc8cd..292f6575 100644
--- a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
+++ b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
@@ -8,6 +8,7 @@ import { BaseSensitivityMutation } from "../../../../src/app/store/sensitivity/m
 import { BaseSensitivityAction } from "../../../../src/app/store/sensitivity/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
 import { mockGraphsState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("baseSensitivity mixin", () => {
     const mockSensSetUserSummaryDownloadFileName = jest.fn();
@@ -29,7 +30,14 @@ describe("baseSensitivity mixin", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ id: "123", selectedVariables, unselectedVariables: [] }]
+                        config: [
+                            {
+                                id: "123",
+                                selectedVariables,
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
+                            }
+                        ]
                     }),
                     getters: graphGetters
                 },
diff --git a/app/static/tests/unit/components/options/linkData.test.ts b/app/static/tests/unit/components/options/linkData.test.ts
index 31901c54..8a6d55b2 100644
--- a/app/static/tests/unit/components/options/linkData.test.ts
+++ b/app/static/tests/unit/components/options/linkData.test.ts
@@ -6,6 +6,7 @@ import { getters } from "../../../../src/app/store/fitData/getters";
 import { mockFitDataState, mockFitState, mockGraphsState, mockModelState } from "../../../mocks";
 import { FitDataAction } from "../../../../src/app/store/fitData/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("LinkData", () => {
     const getWrapper = (includeColumns = true, includeValidModel = true, mockUpdateLinkedVariable = jest.fn()) => {
@@ -33,7 +34,14 @@ describe("LinkData", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ id: "123", selectedVariables: ["I", "R"], unselectedVariables: [] }]
+                        config: [
+                            {
+                                id: "123",
+                                selectedVariables: ["I", "R"],
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
+                            }
+                        ]
                     }),
                     getters: graphGetters
                 },
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index eb86e01f..4ce886c9 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -1,6 +1,4 @@
 // Mock plotly before import RunTab, which indirectly imports plotly via WodinPlot
-import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
-
 jest.mock("plotly.js-basic-dist-min", () => {});
 
 /* eslint-disable import/first */
@@ -11,7 +9,8 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import { FitDataGetter } from "../../../../src/app/store/fitData/getters";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
-import { mockBasicState, mockGraphsState, mockRunState } from "../../../mocks";
+import { mockGraphsState, mockRunState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("RunPlot", () => {
     const mockSolution = jest.fn().mockReturnValue({
@@ -583,7 +582,7 @@ describe("RunPlot", () => {
         const wrapper = shallowMount(RunPlot, {
             props: {
                 fadePlot: true,
-                graphConfig: {...graphConfig, selectedVariables: []}
+                graphConfig: { ...graphConfig, selectedVariables: [] }
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index a64b12df..1d515bf0 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -1,6 +1,4 @@
 // Mock plotly before import RunStochasticTab, which indirectly imports plotly via WodinPlot
-import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
-
 jest.mock("plotly.js-basic-dist-min", () => {});
 
 /* eslint-disable import/first */
@@ -11,6 +9,7 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { StochasticState } from "../../../../src/app/store/stochastic/state";
 import RunPlot from "../../../../src/app/components/run/RunPlot.vue";
 import { mockGraphsState, mockModelState, mockRunState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("RunPlot for stochastic", () => {
     const mockSolution = jest.fn().mockReturnValue({
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 63b25498..2acb4961 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -155,13 +155,19 @@ describe("RunTab", () => {
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
         expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
-        expect(plots.at(0)!.props("graphConfig"))
-            .toStrictEqual({ id: "123", selectedVariables: ["S"], unselectedVariables: [] });
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({
+            id: "123",
+            selectedVariables: ["S"],
+            unselectedVariables: []
+        });
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
         expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
-        expect(plots.at(1)!.props("graphConfig"))
-            .toStrictEqual({ id: "456", selectedVariables: [], unselectedVariables: [] });
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: []
+        });
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -201,14 +207,20 @@ describe("RunTab", () => {
         expect(plots.at(0)!.props("graphIndex")).toBe(0);
         expect(plots.at(0)!.props("fadePlot")).toBe(false);
         expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
-        expect(plots.at(0)!.props("graphConfig"))
-            .toStrictEqual({ id: "123", selectedVariables: ["S"], unselectedVariables: [] });
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({
+            id: "123",
+            selectedVariables: ["S"],
+            unselectedVariables: []
+        });
 
         expect(plots.at(1)!.props("graphIndex")).toBe(1);
         expect(plots.at(1)!.props("fadePlot")).toBe(false);
         expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
-        expect(plots.at(1)!.props("graphConfig"))
-            .toStrictEqual({ id: "456", selectedVariables: [], unselectedVariables: [] });
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: []
+        });
 
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
index fcdeecf1..cc8ddf85 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
@@ -15,6 +15,7 @@ import LoadingSpinner from "../../../../src/app/components/LoadingSpinner.vue";
 import { ModelGetter } from "../../../../src/app/store/model/getters";
 import { getters as graphsGetters } from "../../../../src/app/store/graphs/getters";
 import { mockGraphsState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("SensitivitySummaryDownload", () => {
     const mockSetUserSummaryDownloadFileName = jest.fn();
@@ -88,7 +89,8 @@ describe("SensitivitySummaryDownload", () => {
                             {
                                 id: "123",
                                 selectedVariables: ["S"],
-                                unselectedVariables: []
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
                             }
                         ]
                     }),
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
index 36a3f3b4..6263edd0 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
@@ -202,8 +202,12 @@ describe("SensitivitySummaryPlot", () => {
                 graphs: {
                     namespaced: true,
                     state: {
-                        settings: { logScaleYAxis },
-                        config: [{ selectedVariables }]
+                        config: [
+                            {
+                                selectedVariables,
+                                settings: { logScaleYAxis }
+                            }
+                        ]
                     }
                 }
             }
@@ -530,7 +534,7 @@ describe("SensitivitySummaryPlot", () => {
 
     it("redraws plot if graph setting changes", async () => {
         const wrapper = getWrapper();
-        (store!.state as any).graphs.settings.logScaleYAxis = true;
+        (store!.state as any).graphs.config[0].settings.logScaleYAxis = true;
         await nextTick();
         expect(mockPlotlyNewPlot).toHaveBeenCalledTimes(2);
     });
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index aed29016..6c837fde 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -1,6 +1,4 @@
 // Mock the import of plotly so we can mock Plotly methods
-import {defaultGraphSettings} from "../../../src/app/store/graphs/state";
-
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
     react: jest.fn(),
@@ -12,12 +10,13 @@ jest.mock("plotly.js-basic-dist-min", () => ({
 /* eslint-disable import/first */
 import { shallowMount, VueWrapper } from "@vue/test-utils";
 import { nextTick } from "vue";
-import * as plotly from "plotly.js-basic-dist-min";
 import Vuex, { Store } from "vuex";
+import * as plotly from "plotly.js-basic-dist-min";
 import WodinPlot from "../../../src/app/components/WodinPlot.vue";
 import WodinPlotDataSummary from "../../../src/app/components/WodinPlotDataSummary.vue";
 import { BasicState } from "../../../src/app/store/basic/state";
 import { GraphsMutation } from "../../../src/app/store/graphs/mutations";
+import { defaultGraphSettings } from "../../../src/app/store/graphs/state";
 
 describe("WodinPlot", () => {
     const mockPlotlyNewPlot = jest.spyOn(plotly, "newPlot");
@@ -66,9 +65,7 @@ describe("WodinPlot", () => {
     const mockSetYAxisRange = jest.fn();
     const mockSetFitYAxisRange = jest.fn();
 
-    const getStore = (
-        fitGraphSettings = defaultGraphSettings()
-   ) => {
+    const getStore = (fitGraphSettings = defaultGraphSettings()) => {
         return new Vuex.Store<BasicState>({
             modules: {
                 graphs: {
@@ -261,15 +258,18 @@ describe("WodinPlot", () => {
 
     it("relayout preserves locked y axis range", async () => {
         const store = getStore();
-        const wrapper = getWrapper({
-            graphConfig: {
-                settings: {
-                    ...defaultGraphSettings(),
-                    lockYAxis: true,
-                    yAxisRange: [10, 20]
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: {
+                        ...defaultGraphSettings(),
+                        lockYAxis: true,
+                        yAxisRange: [10, 20]
+                    }
                 }
-            }
-        }, store);
+            },
+            store
+        );
         const { relayout } = wrapper.vm as any;
         const relayoutEvent = {
             "xaxis.autorange": false,
@@ -413,11 +413,14 @@ describe("WodinPlot", () => {
 
     it("renders y axis log scale if graph setting is set", async () => {
         const store = getStore();
-        const wrapper = getWrapper({
-            graphConfig: {
-                settings: {...defaultGraphSettings(), logScaleYAxis: true}
-            }
-        }, store);
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+                }
+            },
+            store
+        );
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -430,7 +433,7 @@ describe("WodinPlot", () => {
     });
 
     it("renders y axis log scale if fit graph setting is set, and fitPlot is true", async () => {
-        const store = getStore({...defaultGraphSettings(), logScaleYAxis: true});
+        const store = getStore({ ...defaultGraphSettings(), logScaleYAxis: true });
         const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
@@ -445,15 +448,18 @@ describe("WodinPlot", () => {
 
     it("locks axes if graph setting is set", async () => {
         const store = getStore();
-        const wrapper = getWrapper({
-            graphConfig: {
-                settings: {
-                    ...defaultGraphSettings(),
-                    lockYAxis: true,
-                    yAxisRange: [10, 20]
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: {
+                        ...defaultGraphSettings(),
+                        lockYAxis: true,
+                        yAxisRange: [10, 20]
+                    }
                 }
-            }
-        }, store);
+            },
+            store
+        );
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -495,13 +501,13 @@ describe("WodinPlot", () => {
         await nextTick();
         await wrapper.setProps({ redrawWatches: [{} as any] });
         await nextTick();
-        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({graphIndex: 0, value: [1, 2]});
+        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, value: [1, 2] });
         expect(mockSetFitYAxisRange).not.toHaveBeenCalled();
     });
 
     it("commits SetFitYAxisRange on drawPlot, when fitPlot is true", async () => {
         const store = getStore();
-        const wrapper = getWrapper({fitPlot: true}, store);
+        const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
         (wrapper.vm as any).plot = {
@@ -517,11 +523,14 @@ describe("WodinPlot", () => {
 
     it("relayout uses graph settings log scale y axis value", async () => {
         const store = getStore();
-        const wrapper = getWrapper({
-            graphConfig: {
-                settings: {...defaultGraphSettings(), logScaleYAxis: true}
-            }
-        }, store);
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+                }
+            },
+            store
+        );
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -570,7 +579,7 @@ describe("WodinPlot", () => {
 
         await wrapper.setProps({
             graphConfig: {
-                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+                settings: { ...defaultGraphSettings(), logScaleYAxis: true }
             }
         });
         await nextTick();
@@ -592,7 +601,7 @@ describe("WodinPlot", () => {
         await wrapper.setProps({
             fadePlot: true,
             graphConfig: {
-                settings: {...defaultGraphSettings(), logScaleYAxis: true}
+                settings: { ...defaultGraphSettings(), logScaleYAxis: true }
             }
         });
         await nextTick();
diff --git a/app/static/tests/unit/serialiser.test.ts b/app/static/tests/unit/serialiser.test.ts
index 8ac8ce84..0a8d255b 100644
--- a/app/static/tests/unit/serialiser.test.ts
+++ b/app/static/tests/unit/serialiser.test.ts
@@ -25,7 +25,7 @@ import { Language } from "../../src/app/types/languageTypes";
 import { AdvancedOptions } from "../../src/app/types/responseTypes";
 import { AdvancedComponentType } from "../../src/app/store/run/state";
 import { noSensitivityUpdateRequired } from "../../src/app/store/sensitivity/sensitivity";
-import {defaultGraphSettings} from "../../src/app/store/graphs/state";
+import { defaultGraphSettings } from "../../src/app/store/graphs/state";
 
 jest.mock("../../src/app/utils", () => {
     return {
@@ -827,6 +827,5 @@ describe("serialise", () => {
         deserialiseState(target, serialised);
         expect(target.graphs.fitGraphSettings.logScaleYAxis).toBe(false);
         expect(target.graphs.config[0].settings.logScaleYAxis).toBe(false);
-
     });
 });
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index 22a0f92b..6beebecf 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -3,7 +3,7 @@ import { actions, GraphsAction } from "../../../../src/app/store/graphs/actions"
 import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 import { AppType } from "../../../../src/app/store/appState/state";
 import { FitDataAction } from "../../../../src/app/store/fitData/actions";
-import {defaultGraphSettings} from "../../../../src/app/store/graphs/state";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("Graphs actions", () => {
     const modelState = {
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
index 45ac6904..e1a11c9c 100644
--- a/app/static/tests/unit/store/graphs/getters.test.ts
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -1,12 +1,15 @@
 import { mockGraphsState } from "../../../mocks";
 import { getters, GraphsGetter } from "../../../../src/app/store/graphs/getters";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("GraphsGetters", () => {
+    const settings = defaultGraphSettings();
+
     it("gets allSelectedVariables", () => {
         const state = mockGraphsState({
             config: [
-                { id: "123", selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"] },
-                { id: "456", selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"] }
+                { id: "123", selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"], settings },
+                { id: "456", selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"], settings }
             ]
         });
         expect((getters[GraphsGetter.allSelectedVariables] as any)(state)).toStrictEqual(["a", "b", "d"]);
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index 0d969823..7d364722 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -1,5 +1,5 @@
 import { mutations } from "../../../../src/app/store/graphs/mutations";
-import {defaultGraphSettings, GraphsState} from "../../../../src/app/store/graphs/state";
+import { defaultGraphSettings, GraphsState } from "../../../../src/app/store/graphs/state";
 import { mockGraphsState, mockModelState } from "../../../mocks";
 
 describe("Graphs mutations", () => {
@@ -21,12 +21,12 @@ describe("Graphs mutations", () => {
     });
 
     it("sets logScaleYAxis", () => {
-        mutations.SetLogScaleYAxis(state, {graphIndex: 1, value: true});
+        mutations.SetLogScaleYAxis(state, { graphIndex: 1, value: true });
         expect(state.config[1].settings.logScaleYAxis).toBe(true);
     });
 
     it("sets lockYAxis", () => {
-        mutations.SetLockYAxis(state, {graphIndex: 1, value: true});
+        mutations.SetLockYAxis(state, { graphIndex: 1, value: true });
         expect(state.config[1].settings.lockYAxis).toBe(true);
     });
 
@@ -72,7 +72,12 @@ describe("Graphs mutations", () => {
             unselectedVariables: ["y"],
             settings
         });
-        expect(testState.config[0]).toStrictEqual({ id: "123", selectedVariables: [], unselectedVariables: [], settings });
+        expect(testState.config[0]).toStrictEqual({
+            id: "123",
+            selectedVariables: [],
+            unselectedVariables: [],
+            settings
+        });
     });
 
     it("AddGraph pushes new graph to config", () => {
@@ -80,7 +85,12 @@ describe("Graphs mutations", () => {
         const testState = mockGraphsState({
             config: [{ id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings }]
         });
-        mutations.AddGraph(testState, { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"], settings });
+        mutations.AddGraph(testState, {
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: ["b", "a", "c"],
+            settings
+        });
         expect(testState.config).toStrictEqual([
             { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
             { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"], settings }

From 3aa1ae2590c971a695c8d10f4291acebde148cd1 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 10:04:04 +0100
Subject: [PATCH 52/80] formatting

---
 app/static/src/app/components/run/RunPlot.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 0b787410..b2a69c18 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -30,11 +30,10 @@ import { ParameterSet } from "../../store/run/state";
 import { GraphConfig } from "../../store/graphs/state";
 
 const props = defineProps({
-  fadePlot: Boolean,
-  graphIndex: {type: Number, default: 0},
-  graphConfig: {type: Object as PropType<GraphConfig>, required: true},
-  linkedXAxis: {type: Object as PropType<Partial<LayoutAxis> | null>, required: true}
-
+    fadePlot: Boolean,
+    graphIndex: { type: Number, default: 0 },
+    graphConfig: { type: Object as PropType<GraphConfig>, required: true },
+    linkedXAxis: { type: Object as PropType<Partial<LayoutAxis> | null>, required: true }
 });
 
 const emit = defineEmits<{

From 79a700a1e6e2240a185e8cafa6c202ef0aab3f5e Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 15:52:06 +0100
Subject: [PATCH 53/80] changes following review

---
 app/static/src/app/components/GraphSettings.vue         | 1 +
 app/static/src/app/components/WodinPlot.vue             | 2 ++
 app/static/src/app/components/run/RunPlot.vue           | 2 +-
 app/static/src/app/components/run/RunStochasticPlot.vue | 2 +-
 app/static/src/app/store/graphs/state.ts                | 4 ++++
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/static/src/app/components/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
index c2dcc77e..29fe9aa4 100644
--- a/app/static/src/app/components/GraphSettings.vue
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -24,6 +24,7 @@ export default defineComponent({
             required: false,
             default: -1
         },
+        // fitPlot should be true if graphIndex is not provided - in this case we update the single fit plot settings
         fitPlot: {
             type: Boolean,
             required: true
diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index a95dc3de..86bd9fc3 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -65,6 +65,8 @@ export default defineComponent({
             required: false,
             default: -1
         },
+        // We could look up graphConfig from graphIndex - however this causes a specific reactivity bug
+        // when the last plot is deleted and the plot tries to observe the old maximum index before it is updated.
         graphConfig: {
             type: Object as PropType<GraphConfig | null>,
             required: true
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index b2a69c18..658731ce 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -31,7 +31,7 @@ import { GraphConfig } from "../../store/graphs/state";
 
 const props = defineProps({
     fadePlot: Boolean,
-    graphIndex: { type: Number, default: 0 },
+    graphIndex: { type: Number, required: true },
     graphConfig: { type: Object as PropType<GraphConfig>, required: true },
     linkedXAxis: { type: Object as PropType<Partial<LayoutAxis> | null>, required: true }
 });
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index fe253757..b7fb36d5 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -31,7 +31,7 @@ export default defineComponent({
         fadePlot: Boolean,
         graphIndex: {
             type: Number,
-            default: 0
+            required: true
         },
         graphConfig: {
             type: Object as PropType<GraphConfig>,
diff --git a/app/static/src/app/store/graphs/state.ts b/app/static/src/app/store/graphs/state.ts
index f10e528b..86a341a7 100644
--- a/app/static/src/app/store/graphs/state.ts
+++ b/app/static/src/app/store/graphs/state.ts
@@ -1,11 +1,15 @@
 export type YAxisRange = [number, number];
 
+// User-adjustable settings for a given graph - log/linear y axis scale and lock y axis are selected via checkboxes,
+// yAxisRange is saved on data/variable update in order to implement lock y axis.
 export interface GraphSettings {
     logScaleYAxis: boolean;
     lockYAxis: boolean;
     yAxisRange: YAxisRange;
 }
 
+// GraphConfig holds all the configuration for the user-configurable array of graphs which will be shown on the Run
+// and Sensitivity tabs, both the variable selections and the graph settings.
 export interface GraphConfig {
     id: string; // We need to keep a persistent id to identify configs in vue when a graph is deleted from the array
     selectedVariables: string[];

From 80d7375756f3f8fecfacc136a4d9510dc42a552d Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 16:02:43 +0100
Subject: [PATCH 54/80] fix unit tests

---
 app/static/tests/unit/components/run/runPlot.test.ts           | 1 +
 app/static/tests/unit/components/run/runStochasticPlot.test.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index a2c51c6c..31445288 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -273,6 +273,7 @@ describe("RunPlot", () => {
         const wrapper = shallowMount(RunPlot, {
             props: {
                 fadePlot: false,
+                graphIndex: 0,
                 graphConfig
             },
             global: {
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index 1d515bf0..5add1a83 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -172,6 +172,7 @@ describe("RunPlot for stochastic", () => {
         const wrapper = shallowMount(RunPlot, {
             props: {
                 fadePlot: false,
+                graphIndex: 0,
                 graphConfig
             },
             global: {

From c598d715a30bce3e2fb1a716d058636bd1c6c670 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 16:22:17 +0100
Subject: [PATCH 55/80] Show Time label on final graph only

---
 app/static/src/app/components/WodinPlot.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 86bd9fc3..65917d6e 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -119,9 +119,11 @@ export default defineComponent({
 
         const defaultLayout = (): Partial<Layout> => {
             // Get generic layout, which will be modifed dynamically as required
+            // Show Time label on final graph only
+            const xAxisTitle = props.fitPlot || props.graphIndex === store.state.graphs.config.length - 1 ? "Time" : "";
             const result = {
                 margin: { ...margin },
-                xaxis: { title: "Time" },
+                xaxis: { title: xAxisTitle },
                 yaxis: { type: yAxisType.value }
             };
             if (legendWidth.value) {

From 263f598006b0ff9803ad0b3a7b77040050200b8b Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 25 Jul 2024 16:42:02 +0100
Subject: [PATCH 56/80] add tests

---
 .../tests/unit/components/wodinPlot.test.ts   | 49 +++++++++++++++++--
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index 6c837fde..4227f6a0 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -51,6 +51,7 @@ describe("WodinPlot", () => {
         }
     ];
     const mockPlotDataFn = jest.fn().mockReturnValue(mockPlotData);
+    const settings = defaultGraphSettings();
     const defaultProps = {
         fadePlot: false,
         endTime: 99,
@@ -58,8 +59,8 @@ describe("WodinPlot", () => {
         plotData: mockPlotDataFn,
         placeholderMessage: "No data available",
         fitPlot: false,
-        graphIndex: 0,
-        graphConfig: { settings: defaultGraphSettings() }
+        graphIndex: 1,
+        graphConfig: { settings }
     };
 
     const mockSetYAxisRange = jest.fn();
@@ -71,7 +72,8 @@ describe("WodinPlot", () => {
                 graphs: {
                     namespaced: true,
                     state: {
-                        fitGraphSettings
+                        fitGraphSettings,
+                        config: [{ settings }, { settings }]
                     },
                     mutations: {
                         [GraphsMutation.SetYAxisRange]: mockSetYAxisRange,
@@ -501,7 +503,7 @@ describe("WodinPlot", () => {
         await nextTick();
         await wrapper.setProps({ redrawWatches: [{} as any] });
         await nextTick();
-        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, value: [1, 2] });
+        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: [1, 2] });
         expect(mockSetFitYAxisRange).not.toHaveBeenCalled();
     });
 
@@ -665,4 +667,43 @@ describe("WodinPlot", () => {
         expect(mockPlotDataFn.mock.calls[1][1]).toBe(5);
         expect(mockPlotDataFn.mock.calls[1][2]).toBe(1000);
     });
+
+    it("does not display Time xAxis label if not final config in array", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "" },
+            yaxis: { type: "linear" }
+        });
+    });
+
+    it("does display Time xAxis label if fitPlot is true", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0,
+                fitPlot: true
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "linear" }
+        });
+    });
 });

From 68ba6b1ddcfeff064e01692524260dfc28694cb1 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 26 Jul 2024 13:26:34 +0100
Subject: [PATCH 57/80] e2e tests

---
 app/static/tests/e2e/fit.etest.ts |  2 ++
 app/static/tests/e2e/run.etest.ts | 14 ++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 2664ddea..58b242eb 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -145,6 +145,8 @@ test.describe("Wodin App model fit tests", () => {
 
         const plotSelector = ".wodin-right .wodin-content div.mt-4 .js-plotly-plot";
 
+        await expect(await page.locator(".plotly .xtitle").textContent()).toBe("Time");
+
         // Test line is plotted for fit trace and data points
         const linesSelector = `${plotSelector} .scatterlayer .trace .lines path`;
         await expect((await page.locator(linesSelector).getAttribute("d"))!.startsWith("M")).toBe(true);
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
index 18cd38d8..96e3f695 100644
--- a/app/static/tests/e2e/run.etest.ts
+++ b/app/static/tests/e2e/run.etest.ts
@@ -47,4 +47,18 @@ test.describe("Run Tab", () => {
         // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
         await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
     });
+
+    test("x axis Time label is shown for final plot only", async ({ page }) => {
+        await page.goto("/apps/day1");
+        await addGraphWithVariable(page, 1);
+        const firstGraph = page.locator(":nth-match(.plotly, 1)");
+        const secondGraph = page.locator(":nth-match(.plotly, 2)");
+
+        await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
+        await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+
+        // Delete second config - the Time label should be shown on the first graph
+        await page.locator(":nth-match(button.delete-graph, 2)").click();
+        await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+    });
 });

From a9f3e0bb89a3a9d5a14c5467838cb5094df98a28 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 26 Jul 2024 14:02:14 +0100
Subject: [PATCH 58/80] add graphConfig prop to sensitivity components

---
 .../sensitivity/SensitivitySummaryPlot.vue           | 10 ++++++----
 .../app/components/sensitivity/SensitivityTab.vue    |  9 +++++++--
 .../components/sensitivity/SensitivityTracesPlot.vue | 12 ++++++------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
index b44747d7..f1efaeeb 100644
--- a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import {computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch} from "vue";
 import { AxisType, newPlot, Plots } from "plotly.js-basic-dist-min";
 import { useStore } from "vuex";
 import { config, fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName } from "../../plot";
@@ -23,12 +23,14 @@ import { Dict } from "../../types/utilTypes";
 import WodinPlotDataSummary from "../WodinPlotDataSummary.vue";
 import { ParameterSet } from "../../store/run/state";
 import { verifyValidPlotSettingsTime } from "./support";
+import {GraphConfig} from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivitySummaryPlot",
     components: { WodinPlotDataSummary },
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     setup(props) {
         const store = useStore();
@@ -39,7 +41,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.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const xAxisSettings = computed(() => {
@@ -55,7 +57,7 @@ export default defineComponent({
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
 
-            const logScale = store.state.graphs.config[0].settings.logScaleYAxis && isNotTimePlot;
+            const logScale = graphConfig.settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });
diff --git a/app/static/src/app/components/sensitivity/SensitivityTab.vue b/app/static/src/app/components/sensitivity/SensitivityTab.vue
index 8f141f87..9dc04b9a 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTab.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTab.vue
@@ -11,8 +11,10 @@
             >
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <sensitivity-traces-plot v-if="tracesPlot" :fade-plot="!!updateMsg"></sensitivity-traces-plot>
-        <sensitivity-summary-plot v-else :fade-plot="!!updateMsg"></sensitivity-summary-plot>
+        <template v-for="config in graphConfigs" :key="config.id">
+          <sensitivity-traces-plot v-if="tracesPlot" :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-traces-plot>
+          <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
+        </template>
         <div id="sensitivity-running" v-if="running">
             <loading-spinner class="inline-spinner" size="xs"></loading-spinner>
             <span class="ms-2">{{ sensitivityProgressMsg }}</span>
@@ -65,6 +67,8 @@ export default defineComponent({
             );
         });
 
+        const graphConfigs = computed(() => store.state.graphs.config);
+
         const runSensitivity = () => {
             store.commit(`${namespace}/${SensitivityMutation.SetLoading}`, true);
             // All of the code for sensitivity plot happens synchronously
@@ -91,6 +95,7 @@ export default defineComponent({
         const error = computed(() => store.state.sensitivity.result?.error);
 
         return {
+            graphConfigs,
             canRunSensitivity,
             running,
             sensitivityProgressMsg,
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index c5d47a4f..ff2b294c 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import {computed, defineComponent, PropType} from "vue";
 import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
@@ -38,20 +38,21 @@ import { RunGetter } from "../../store/run/getters";
 import { Dict } from "../../types/utilTypes";
 import { ParameterSet } from "../../store/run/state";
 import { SensitivityMutation } from "../../store/sensitivity/mutations";
+import {GraphConfig} from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivityTracesPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
         const solutions = computed(() => store.state.sensitivity.result?.batch?.solutions || []);
-        const graphConfig = computed(() => store.state.graphs.config[0]);
 
         const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
         const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
@@ -82,7 +83,7 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
@@ -197,7 +198,6 @@ export default defineComponent({
         };
 
         return {
-            graphConfig,
             placeholderMessage,
             endTime,
             solutions,

From 7ab8779e707e0de83138abcd560101d975cbe2ff Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 26 Jul 2024 16:12:59 +0100
Subject: [PATCH 59/80] summary plot

---
 .../src/app/components/sensitivity/SensitivitySummaryPlot.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
index f1efaeeb..a0aeb444 100644
--- a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
@@ -57,7 +57,7 @@ export default defineComponent({
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
 
-            const logScale = graphConfig.settings.logScaleYAxis && isNotTimePlot;
+            const logScale = props.graphConfig.settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });

From 747b48c7f952c410af2762f5907647328dfa27b8 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 30 Jul 2024 14:13:00 +0100
Subject: [PATCH 60/80] update redraw watches to ensure stochastic and
 sensitivity plots update when graph count changes

---
 app/static/src/app/components/WodinPlot.vue   | 20 +++++++++----------
 .../app/components/run/RunStochasticPlot.vue  |  6 +++++-
 .../components/sensitivity/SensitivityTab.vue |  8 ++++++--
 .../sensitivity/SensitivityTracesPlot.vue     | 11 +++++++---
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 65917d6e..621a62ff 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -14,14 +14,14 @@ import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
 import {
-    newPlot,
-    react,
-    PlotRelayoutEvent,
-    Plots,
-    AxisType,
-    Layout,
-    Config,
-    LayoutAxis
+  newPlot,
+  react,
+  PlotRelayoutEvent,
+  Plots,
+  AxisType,
+  Layout,
+  Config,
+  LayoutAxis, update
 } from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
@@ -152,9 +152,9 @@ export default defineComponent({
             return result;
         };
 
-        const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
+        const updateXAxisRange = async (xAxis: Partial<LayoutAxis> | null) => {
             let data;
-            if (xAxis.autorange) {
+            if (!xAxis || xAxis.autorange) {
                 data = baseData.value;
             } else {
                 data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index b7fb36d5..cdcce768 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -4,7 +4,7 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ? [solution] : []"
+        :redrawWatches="solution ? [solution, graphCount] : []"
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"
@@ -58,6 +58,9 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(()=> store.state.graphs.config.length);
+
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
             const result =
                 solution.value &&
@@ -88,6 +91,7 @@ export default defineComponent({
         return {
             placeholderMessage,
             endTime,
+            graphCount,
             allPlotData,
             solution,
             updateXAxis
diff --git a/app/static/src/app/components/sensitivity/SensitivityTab.vue b/app/static/src/app/components/sensitivity/SensitivityTab.vue
index 9dc04b9a..1cf32e5f 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTab.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTab.vue
@@ -11,8 +11,12 @@
             >
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <template v-for="config in graphConfigs" :key="config.id">
-          <sensitivity-traces-plot v-if="tracesPlot" :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-traces-plot>
+        <template v-for="(config, index)  in graphConfigs" :key="config.id">
+          <sensitivity-traces-plot
+              v-if="tracesPlot"
+              :fade-plot="!!updateMsg"
+              :graph-config="config"
+              :graph-index="index"></sensitivity-traces-plot>
           <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
         </template>
         <div id="sensitivity-running" v-if="running">
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index ff2b294c..dbba9a39 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -6,11 +6,11 @@
         :plot-data="allPlotData"
         :redrawWatches="
             solutions
-                ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames]
+                ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames, graphCount]
                 : []
         "
         :fit-plot="false"
-        :graph-index="0"
+        :graph-index="graphIndex"
         :graph-config="graphConfig"
     >
         <slot></slot>
@@ -44,6 +44,7 @@ export default defineComponent({
     name: "SensitivityTracesPlot",
     props: {
         fadePlot: Boolean,
+        graphIndex: { type: Number, required: true },
         graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     components: {
@@ -85,6 +86,9 @@ export default defineComponent({
 
         const selectedVariables = computed(() => props.graphConfig.selectedVariables);
 
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(()=> store.state.graphs.config.length);
+
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
@@ -205,7 +209,8 @@ export default defineComponent({
             allFitData,
             selectedVariables,
             parameterSetBatches,
-            parameterSetDisplayNames
+            parameterSetDisplayNames,
+            graphCount
         };
     }
 });

From 8aab7e279d4fbf635640791b42a30e21256f7e88 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 30 Jul 2024 16:19:13 +0100
Subject: [PATCH 61/80] e2e tests

---
 app/static/playwright.config.ts             |  2 +-
 app/static/src/app/components/WodinPlot.vue | 20 +++++++-------
 app/static/tests/e2e/run.etest.ts           | 29 ++++++--------------
 app/static/tests/e2e/sensitivity.etest.ts   | 30 ++++++++++++++++++++-
 app/static/tests/e2e/utils.ts               | 23 ++++++++++++++++
 5 files changed, 71 insertions(+), 33 deletions(-)

diff --git a/app/static/playwright.config.ts b/app/static/playwright.config.ts
index ff73bf2b..371ebb97 100644
--- a/app/static/playwright.config.ts
+++ b/app/static/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
             permissions: ["clipboard-read", "clipboard-write"]
         }
     },
-    retries: 1,
+    retries: 0,
     timeout: 60000
 };
 
diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 621a62ff..65917d6e 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -14,14 +14,14 @@ import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
 import {
-  newPlot,
-  react,
-  PlotRelayoutEvent,
-  Plots,
-  AxisType,
-  Layout,
-  Config,
-  LayoutAxis, update
+    newPlot,
+    react,
+    PlotRelayoutEvent,
+    Plots,
+    AxisType,
+    Layout,
+    Config,
+    LayoutAxis
 } from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
@@ -152,9 +152,9 @@ export default defineComponent({
             return result;
         };
 
-        const updateXAxisRange = async (xAxis: Partial<LayoutAxis> | null) => {
+        const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
             let data;
-            if (!xAxis || xAxis.autorange) {
+            if (xAxis.autorange) {
                 data = baseData.value;
             } else {
                 data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
index 96e3f695..b4c94a69 100644
--- a/app/static/tests/e2e/run.etest.ts
+++ b/app/static/tests/e2e/run.etest.ts
@@ -1,15 +1,5 @@
 import { expect, test, Page } from "@playwright/test";
-import { expectGraphVariables } from "./utils";
-
-const addGraphWithVariable = async (page: Page, variableIdx: number) => {
-    await page.click("#add-graph-btn");
-    const count = await page.locator(".graph-config-panel").count();
-    // assume we drag variable from first graph config
-    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
-    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
-    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
-    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
-};
+import {expectGraphVariables, addGraphWithVariable, expectXAxisTimeLabelFinalGraph} from "./utils";
 
 const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
     const graphs = await page.locator(".plot-container");
@@ -48,17 +38,14 @@ test.describe("Run Tab", () => {
         await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
     });
 
-    test("x axis Time label is shown for final plot only", async ({ page }) => {
+    test("x axis Time label is shown for final plot only, in Basic app", async ({ page }) => {
         await page.goto("/apps/day1");
-        await addGraphWithVariable(page, 1);
-        const firstGraph = page.locator(":nth-match(.plotly, 1)");
-        const secondGraph = page.locator(":nth-match(.plotly, 2)");
-
-        await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
-        await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
 
-        // Delete second config - the Time label should be shown on the first graph
-        await page.locator(":nth-match(button.delete-graph, 2)").click();
-        await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+    test("x axis Time label is shown for final plot only, in Stochastic app", async ({ page }) => {
+        await page.goto("/apps/day3");
+        await page.click(":nth-match(#right-tabs .nav-link, 2)");
+        await expectXAxisTimeLabelFinalGraph(page);
     });
 });
diff --git a/app/static/tests/e2e/sensitivity.etest.ts b/app/static/tests/e2e/sensitivity.etest.ts
index 5dbe1e9b..2d19d1b1 100644
--- a/app/static/tests/e2e/sensitivity.etest.ts
+++ b/app/static/tests/e2e/sensitivity.etest.ts
@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import { expectSummaryValues } from "./utils";
+import {addGraphWithVariable, expectSummaryValues, expectXAxisTimeLabelFinalGraph} from "./utils";
 
 test.describe("Sensitivity tests", () => {
     const { timeout } = PlaywrightConfig;
@@ -272,4 +272,32 @@ test.describe("Sensitivity tests", () => {
         await expectSummaryValues(page, 8, "I (beta=3.000)", 1000, "#cccc00");
         await expectSummaryValues(page, 9, "R (beta=3.000)", 1000, "#cc0044");
     });
+
+    const expectMultipleSensitivityGraphs = async (page: Page, summary = false) => {
+        const containerClass = summary ? "summary-plot-container" : "wodin-plot-container";
+        const firstPlot = await page.locator(`:nth-match(.${containerClass}, 1)`);
+        const secondPlot = await page.locator(`:nth-match(.${containerClass}, 2)`);
+        expect(await firstPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)")
+            .getAttribute("name")).toBe(summary ? "I" : "I (beta=3.600)");
+        expect(await secondPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)")
+            .getAttribute( "name")).toBe(summary ? "S" : "S (beta=3.600)");
+    };
+
+    test("can see multiple Trace over time graphs", async({page}) => {
+        await page.click("#run-sens-btn");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page);
+    });
+
+    test("can see Time label on final Trace over time graph only", async ({page}) => {
+        await page.click("#run-sens-btn");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
+
+    test("can see multiple summary graphs", async({page}) => {
+        await page.click("#run-sens-btn");
+        await page.locator("#sensitivity-plot-type select").selectOption("ValueAtTime");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page, true);
+    });
 });
diff --git a/app/static/tests/e2e/utils.ts b/app/static/tests/e2e/utils.ts
index 24c89ae5..c3dc6f7f 100644
--- a/app/static/tests/e2e/utils.ts
+++ b/app/static/tests/e2e/utils.ts
@@ -205,3 +205,26 @@ export const expectGraphVariables = async (page: Page, graphIndex: number, expec
         );
     }
 };
+
+export const addGraphWithVariable = async (page: Page, variableIdx: number) => {
+    await page.click("#add-graph-btn");
+    const count = await page.locator(".graph-config-panel").count();
+    // assume we drag variable from first graph config
+    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
+    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
+    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
+    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
+};
+
+export const expectXAxisTimeLabelFinalGraph = async (page: Page) => {
+    await addGraphWithVariable(page, 1);
+    const firstGraph = page.locator(":nth-match(.plotly, 1)");
+    const secondGraph = page.locator(":nth-match(.plotly, 2)");
+
+    await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
+    await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+
+    // Delete second config - the Time label should be shown on the first graph
+    await page.locator(":nth-match(button.delete-graph, 2)").click();
+    await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+};

From 30a2b1efb7b9715e18e794fac0fbdeb45554fe6f Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 30 Jul 2024 17:19:32 +0100
Subject: [PATCH 62/80] unit tests

---
 .../app/components/run/RunStochasticPlot.vue  |  2 +-
 .../sensitivity/SensitivitySummaryPlot.vue    |  4 +--
 .../components/sensitivity/SensitivityTab.vue | 15 +++++-----
 .../sensitivity/SensitivityTracesPlot.vue     | 15 +++++++---
 app/static/tests/e2e/run.etest.ts             |  2 +-
 app/static/tests/e2e/sensitivity.etest.ts     | 18 ++++++-----
 .../components/run/runStochasticPlot.test.ts  |  2 +-
 .../sensitivitySummaryPlot.test.ts            | 30 +++++++++++--------
 .../sensitivity/sensitivityTab.test.ts        | 19 ++++++++++--
 .../sensitivity/sensitivityTracesPlot.test.ts | 27 +++++++++++++----
 10 files changed, 89 insertions(+), 45 deletions(-)

diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index cdcce768..5429f81d 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -59,7 +59,7 @@ export default defineComponent({
         const palette = computed(() => store.state.model.paletteModel);
 
         // TODO: put this in the composable in mrc-5572
-        const graphCount = computed(()=> store.state.graphs.config.length);
+        const graphCount = computed(() => store.state.graphs.config.length);
 
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
             const result =
diff --git a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
index a0aeb444..65599df9 100644
--- a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from "vue";
 import { AxisType, newPlot, Plots } from "plotly.js-basic-dist-min";
 import { useStore } from "vuex";
 import { config, fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName } from "../../plot";
@@ -23,7 +23,7 @@ import { Dict } from "../../types/utilTypes";
 import WodinPlotDataSummary from "../WodinPlotDataSummary.vue";
 import { ParameterSet } from "../../store/run/state";
 import { verifyValidPlotSettingsTime } from "./support";
-import {GraphConfig} from "../../store/graphs/state";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivitySummaryPlot",
diff --git a/app/static/src/app/components/sensitivity/SensitivityTab.vue b/app/static/src/app/components/sensitivity/SensitivityTab.vue
index 1cf32e5f..1e911c1f 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTab.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTab.vue
@@ -11,13 +11,14 @@
             >
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <template v-for="(config, index)  in graphConfigs" :key="config.id">
-          <sensitivity-traces-plot
-              v-if="tracesPlot"
-              :fade-plot="!!updateMsg"
-              :graph-config="config"
-              :graph-index="index"></sensitivity-traces-plot>
-          <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
+        <template v-for="(config, index) in graphConfigs" :key="config.id">
+            <sensitivity-traces-plot
+                v-if="tracesPlot"
+                :fade-plot="!!updateMsg"
+                :graph-config="config"
+                :graph-index="index"
+            ></sensitivity-traces-plot>
+            <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
         </template>
         <div id="sensitivity-running" v-if="running">
             <loading-spinner class="inline-spinner" size="xs"></loading-spinner>
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index dbba9a39..63976e5f 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -6,7 +6,14 @@
         :plot-data="allPlotData"
         :redrawWatches="
             solutions
-                ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames, graphCount]
+                ? [
+                      ...solutions,
+                      allFitData,
+                      selectedVariables,
+                      parameterSetBatches,
+                      parameterSetDisplayNames,
+                      graphCount
+                  ]
                 : []
         "
         :fit-plot="false"
@@ -18,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
@@ -38,7 +45,7 @@ import { RunGetter } from "../../store/run/getters";
 import { Dict } from "../../types/utilTypes";
 import { ParameterSet } from "../../store/run/state";
 import { SensitivityMutation } from "../../store/sensitivity/mutations";
-import {GraphConfig} from "../../store/graphs/state";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivityTracesPlot",
@@ -87,7 +94,7 @@ export default defineComponent({
         const selectedVariables = computed(() => props.graphConfig.selectedVariables);
 
         // TODO: put this in the composable in mrc-5572
-        const graphCount = computed(()=> store.state.graphs.config.length);
+        const graphCount = computed(() => store.state.graphs.config.length);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
index b4c94a69..a6dbd04c 100644
--- a/app/static/tests/e2e/run.etest.ts
+++ b/app/static/tests/e2e/run.etest.ts
@@ -1,5 +1,5 @@
 import { expect, test, Page } from "@playwright/test";
-import {expectGraphVariables, addGraphWithVariable, expectXAxisTimeLabelFinalGraph} from "./utils";
+import { expectGraphVariables, addGraphWithVariable, expectXAxisTimeLabelFinalGraph } from "./utils";
 
 const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
     const graphs = await page.locator(".plot-container");
diff --git a/app/static/tests/e2e/sensitivity.etest.ts b/app/static/tests/e2e/sensitivity.etest.ts
index 2d19d1b1..a7ae17b8 100644
--- a/app/static/tests/e2e/sensitivity.etest.ts
+++ b/app/static/tests/e2e/sensitivity.etest.ts
@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import {addGraphWithVariable, expectSummaryValues, expectXAxisTimeLabelFinalGraph} from "./utils";
+import { addGraphWithVariable, expectSummaryValues, expectXAxisTimeLabelFinalGraph } from "./utils";
 
 test.describe("Sensitivity tests", () => {
     const { timeout } = PlaywrightConfig;
@@ -277,24 +277,26 @@ test.describe("Sensitivity tests", () => {
         const containerClass = summary ? "summary-plot-container" : "wodin-plot-container";
         const firstPlot = await page.locator(`:nth-match(.${containerClass}, 1)`);
         const secondPlot = await page.locator(`:nth-match(.${containerClass}, 2)`);
-        expect(await firstPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)")
-            .getAttribute("name")).toBe(summary ? "I" : "I (beta=3.600)");
-        expect(await secondPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)")
-            .getAttribute( "name")).toBe(summary ? "S" : "S (beta=3.600)");
+        expect(await firstPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "I" : "I (beta=3.600)"
+        );
+        expect(await secondPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "S" : "S (beta=3.600)"
+        );
     };
 
-    test("can see multiple Trace over time graphs", async({page}) => {
+    test("can see multiple Trace over time graphs", async ({ page }) => {
         await page.click("#run-sens-btn");
         await addGraphWithVariable(page, 1);
         await expectMultipleSensitivityGraphs(page);
     });
 
-    test("can see Time label on final Trace over time graph only", async ({page}) => {
+    test("can see Time label on final Trace over time graph only", async ({ page }) => {
         await page.click("#run-sens-btn");
         await expectXAxisTimeLabelFinalGraph(page);
     });
 
-    test("can see multiple summary graphs", async({page}) => {
+    test("can see multiple summary graphs", async ({ page }) => {
         await page.click("#run-sens-btn");
         await page.locator("#sensitivity-plot-type select").selectOption("ValueAtTime");
         await addGraphWithVariable(page, 1);
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index 5add1a83..5d1693a0 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -87,7 +87,7 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
-        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution]);
+        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution, 1]);
         expect(wodinPlot.props("recalculateOnRelayout")).toBe(true);
         expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
         expect(wodinPlot.props("graphIndex")).toBe(0);
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
index 6263edd0..5b5ec00e 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
@@ -16,6 +16,7 @@ import { SensitivityMutation } from "../../../../src/app/store/sensitivity/mutat
 import SensitivitySummaryPlot from "../../../../src/app/components/sensitivity/SensitivitySummaryPlot.vue";
 import { RunGetter } from "../../../../src/app/store/run/getters";
 import WodinPlotDataSummary from "../../../../src/app/components/WodinPlotDataSummary.vue";
+import { GraphConfig } from "../../../../src/app/store/graphs/state";
 
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
@@ -198,26 +199,23 @@ describe("SensitivitySummaryPlot", () => {
                         [SensitivityMutation.SetPlotTime]: mockSetPlotTime,
                         [SensitivityMutation.SetLoading]: mockSetLoading
                     }
-                },
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        config: [
-                            {
-                                selectedVariables,
-                                settings: { logScaleYAxis }
-                            }
-                        ]
-                    }
                 }
             }
         });
 
+        const graphConfig = {
+            selectedVariables,
+            settings: { logScaleYAxis }
+        } as any;
+
         return shallowMount(SensitivitySummaryPlot, {
             global: {
                 plugins: [store]
             },
-            props: { fadePlot }
+            props: {
+                fadePlot,
+                graphConfig
+            }
         });
     };
 
@@ -534,7 +532,13 @@ describe("SensitivitySummaryPlot", () => {
 
     it("redraws plot if graph setting changes", async () => {
         const wrapper = getWrapper();
-        (store!.state as any).graphs.config[0].settings.logScaleYAxis = true;
+        const graphConfig = wrapper.props("graphConfig");
+        await wrapper.setProps({
+            graphConfig: {
+                ...graphConfig,
+                settings: { logScaleYAxis: true } as any
+            }
+        });
         await nextTick();
         expect(mockPlotlyNewPlot).toHaveBeenCalledTimes(2);
     });
diff --git a/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts b/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
index f9e2960c..ac2cd175 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
@@ -43,6 +43,9 @@ describe("SensitivityTab", () => {
                         config: [
                             {
                                 selectedVariables
+                            },
+                            {
+                                selectedVariables: []
                             }
                         ]
                     },
@@ -126,7 +129,14 @@ describe("SensitivityTab", () => {
         const wrapper = getWrapper();
         expect(wrapper.findComponent(LoadingButton).props("isDisabled")).toBe(false);
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
-        expect(wrapper.findComponent(SensitivityTracesPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(SensitivityTracesPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({ selectedVariables: ["S"] });
+        expect(plots.at(0)!.props("graphIndex")).toStrictEqual(0);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({ selectedVariables: [] });
+        expect(plots.at(1)!.props("graphIndex")).toStrictEqual(1);
         expect(wrapper.findComponent(ErrorInfo).props("error")).toBe(null);
         expect(wrapper.find("#sensitivity-running").exists()).toBe(false);
         expect(wrapper.findComponent(SensitivitySummaryPlot).exists()).toBe(false);
@@ -150,7 +160,12 @@ describe("SensitivityTab", () => {
     it("renders as expected when Time at Extreme", () => {
         const sensitivityState = { plotSettings: { plotType: SensitivityPlotType.TimeAtExtreme } as any };
         const wrapper = getWrapper(AppType.Basic, {}, sensitivityState);
-        expect(wrapper.findComponent(SensitivitySummaryPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(SensitivitySummaryPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({ selectedVariables: ["S"] });
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({ selectedVariables: [] });
         expect(wrapper.findComponent(SensitivityTracesPlot).exists()).toBe(false);
     });
 
diff --git a/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
index 7cfc1c97..0a584d49 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
@@ -411,7 +411,7 @@ describe("SensitivityTracesPlot", () => {
                     paletteModel: mockPalette
                 },
                 graphs: {
-                    config: [{ selectedVariables: hasSelectedVariables ? selectedVariables : [] }]
+                    config: []
                 }
             } as any,
             modules: {
@@ -466,7 +466,11 @@ describe("SensitivityTracesPlot", () => {
         });
 
         return shallowMount(SensitivityTracesPlot, {
-            props: { fadePlot },
+            props: {
+                fadePlot,
+                graphConfig: { selectedVariables: hasSelectedVariables ? selectedVariables : [] } as any,
+                graphIndex: 0
+            },
             global: {
                 plugins: [store]
             }
@@ -495,8 +499,13 @@ describe("SensitivityTracesPlot", () => {
             undefined,
             selectedVariables,
             {},
-            []
+            [],
+            0
         ]);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual({
+            selectedVariables: ["y", "z"]
+        });
+        expect(wodinPlot.props("graphIndex")).toBe(0);
 
         const plotData = wodinPlot.props("plotData");
         expect(plotData(0, 1, 100)).toStrictEqual(expectedPlotData);
@@ -515,8 +524,13 @@ describe("SensitivityTracesPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            []
+            [],
+            0
         ]);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual({
+            selectedVariables: ["y", "z"]
+        });
+        expect(wodinPlot.props("graphIndex")).toBe(0);
 
         const plotData = wodinPlot.props("plotData");
         expect(plotData(0, 1, 100)).toStrictEqual([...expectedPlotData, expectedFitPlotData]);
@@ -535,7 +549,8 @@ describe("SensitivityTracesPlot", () => {
             mockAllFitData,
             selectedVariables,
             { "Set 1": mockParameterSetBatch1 },
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            0
         ]);
 
         const plotData = wodinPlot.props("plotData");
@@ -561,7 +576,7 @@ describe("SensitivityTracesPlot", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Sensitivity has not been run.");
         expect(wodinPlot.props("endTime")).toBe(1);
-        expect(wodinPlot.props("redrawWatches")).toStrictEqual([undefined, selectedVariables, {}, []]);
+        expect(wodinPlot.props("redrawWatches")).toStrictEqual([undefined, selectedVariables, {}, [], 0]);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData(0, 1, 100);

From 342c6612efb45cd2c6031df1c15a7fafe2b7cdae Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 31 Jul 2024 09:55:47 +0100
Subject: [PATCH 63/80] restore playwright config

---
 app/static/playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/playwright.config.ts b/app/static/playwright.config.ts
index 371ebb97..ff73bf2b 100644
--- a/app/static/playwright.config.ts
+++ b/app/static/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
             permissions: ["clipboard-read", "clipboard-write"]
         }
     },
-    retries: 0,
+    retries: 1,
     timeout: 60000
 };
 

From 2859341d8a05bfad37aba2158ee8606ca3f7cb47 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 31 Jul 2024 15:40:26 +0100
Subject: [PATCH 64/80] do not show linked fit data on graphs without linked
 variables

---
 .../src/app/components/mixins/selectVariables.ts       |  9 +++++----
 app/static/src/app/components/run/RunPlot.vue          |  2 +-
 .../components/sensitivity/SensitivityTracesPlot.vue   |  3 ++-
 app/static/src/app/plot.ts                             | 10 ++++++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index ade2ef79..908ca341 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -53,14 +53,15 @@ export default (
         const variable = dataTransfer!.getData("variable");
         const srcGraphConfig = dataTransfer!.getData("srcGraphConfig");
         if (srcGraphConfig !== thisSrcGraphConfig) {
-            if (srcGraphConfig !== "hidden") {
-                removeVariable(parseInt(srcGraphConfig, 10), variable);
-            }
-            // add to this graph if necessary
+            // add to this graph if necessary - do this before remove so it is not unlinked if linked variables
             if (!hasHiddenVariables && !selectedVariables.value.includes(variable)) {
                 const newVars = [...selectedVariables.value, variable];
                 updateSelectedVariables(graphIndex!, newVars);
             }
+
+            if (srcGraphConfig !== "hidden") {
+                removeVariable(parseInt(srcGraphConfig, 10), variable);
+            }
         }
     };
 
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 658731ce..e334a27a 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -85,7 +85,7 @@ const allPlotData = (start: number, end: number, points: number): WodinPlotData
     const plotOptions = { showLegend: true, includeLegendGroup: true };
     const allData = [
         ...odinToPlotly(filterSeriesSet(result, selectedVariables.value), palette.value, plotOptions),
-        ...allFitDataToPlotly(allFitData.value, palette.value, start, end)
+        ...allFitDataToPlotly(allFitData.value, palette.value, start, end, props.graphConfig.selectedVariables)
     ];
 
     // 2. Parameter sets
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index 63976e5f..53ee6e4e 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -200,7 +200,8 @@ export default defineComponent({
                 });
 
                 if (allFitData.value) {
-                    result.push(...allFitDataToPlotly(allFitData.value, palette.value, start, end));
+                    result.push(
+                        ...allFitDataToPlotly(allFitData.value, palette.value, start, end, props.graphConfig.selectedVariables));
                 }
             }
 
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index bdee7674..8c3e3450 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -141,15 +141,21 @@ export function allFitDataToPlotly(
     allFitData: AllFitData | null,
     paletteModel: Palette,
     start: number,
-    end: number
+    end: number,
+    selectedVariables: string[]
 ): WodinPlotData {
     if (!allFitData) {
         return [];
     }
     const { data, linkedVariables, timeVariable } = allFitData;
+    console.log("linked variables")
+    console.log(JSON.stringify(linkedVariables))
     const filteredData = filterData(data, timeVariable, start, end);
     const palette = paletteData(Object.keys(linkedVariables));
-    return Object.keys(linkedVariables).map((name: string) => ({
+    // Display column data if it is not linked OR if its linked variable is selected
+    const columns = Object.keys(linkedVariables)
+        .filter((column) => !linkedVariables[column] || selectedVariables.includes(linkedVariables[column]!));
+    return columns.map((name: string) => ({
         name,
         x: filteredData.map((row: Dict<number>) => row[timeVariable]),
         y: filteredData.map((row: Dict<number>) => row[name]),

From 2c5d32828937bfb99d7318084a858da2670613ee Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 31 Jul 2024 16:32:43 +0100
Subject: [PATCH 65/80] show sos after all graphs

---
 app/static/src/app/components/run/RunTab.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index c6ad6ddd..cdb8f6a3 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -22,11 +22,11 @@
                 :linked-x-axis="xAxis"
                 @updateXAxis="updateXAxis"
             >
-                <div v-if="sumOfSquares">
-                    <span>Sum of squares: {{ sumOfSquares }}</span>
-                </div>
             </run-plot>
         </template>
+        <div v-if="sumOfSquares">
+          <span>Sum of squares: {{ sumOfSquares }}</span>
+        </div>
         <error-info :error="error"></error-info>
         <div>
             <button

From 5209f68d0c268eae08a0da4bf949adac4a947b9d Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 1 Aug 2024 14:02:53 +0100
Subject: [PATCH 66/80] show scatter series as transparent if linked variable
 is not seleted

---
 app/static/src/app/plot.ts | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 8c3e3450..40e10da9 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -148,23 +148,30 @@ export function allFitDataToPlotly(
         return [];
     }
     const { data, linkedVariables, timeVariable } = allFitData;
-    console.log("linked variables")
-    console.log(JSON.stringify(linkedVariables))
     const filteredData = filterData(data, timeVariable, start, end);
     const palette = paletteData(Object.keys(linkedVariables));
-    // Display column data if it is not linked OR if its linked variable is selected
-    const columns = Object.keys(linkedVariables)
-        .filter((column) => !linkedVariables[column] || selectedVariables.includes(linkedVariables[column]!));
-    return columns.map((name: string) => ({
-        name,
-        x: filteredData.map((row: Dict<number>) => row[timeVariable]),
-        y: filteredData.map((row: Dict<number>) => row[name]),
-        mode: "markers",
-        type: "scatter",
-        marker: {
-            color: linkedVariables[name] ? paletteModel[linkedVariables[name]!] : palette[name]
+
+    return Object.keys(linkedVariables).map((name: string) => {
+        // Display column data if it is not linked OR if its linked variable is selected - render the series, but as
+        // transparent so that all graph x axes match
+        let color = palette[name];
+        const variable = linkedVariables[name];
+        if (variable) {
+            // If there is a linked variable, only show data if the variable is selected - if not ,render the series,
+            // but as transparent so that all graph x axes match
+            color = selectedVariables.includes(variable) ? paletteModel[variable] : "transparent";
         }
-    }));
+        return {
+            name,
+            x: filteredData.map((row: Dict<number>) => row[timeVariable]),
+            y: filteredData.map((row: Dict<number>) => row[name]),
+            mode: "markers",
+            type: "scatter",
+            marker: {
+                color
+            }
+        };
+    });
 }
 
 const lineStyles = ["dot", "dash", "longdash", "dashdot", "longdashdot"];

From d9e3b99203dbbf148e6f7e18a8d4f96302fc7933 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 1 Aug 2024 16:21:35 +0100
Subject: [PATCH 67/80] unit tests

---
 app/static/src/app/components/run/RunTab.vue  |  2 +-
 app/static/src/app/plot.ts                    |  2 -
 .../graphConfig/graphConfig.test.ts           |  4 +-
 .../tests/unit/components/run/runTab.test.ts  | 45 ++++++++++++++++++-
 app/static/tests/unit/plot.test.ts            | 27 +++++++++--
 5 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index cdb8f6a3..560b7d45 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -25,7 +25,7 @@
             </run-plot>
         </template>
         <div v-if="sumOfSquares">
-          <span>Sum of squares: {{ sumOfSquares }}</span>
+          <span id="squares">Sum of squares: {{ sumOfSquares }}</span>
         </div>
         <error-info :error="error"></error-info>
         <div>
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 40e10da9..77066925 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -152,8 +152,6 @@ export function allFitDataToPlotly(
     const palette = paletteData(Object.keys(linkedVariables));
 
     return Object.keys(linkedVariables).map((name: string) => {
-        // Display column data if it is not linked OR if its linked variable is selected - render the series, but as
-        // transparent so that all graph x axes match
         let color = palette[name];
         const variable = linkedVariables[name];
         if (variable) {
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index 53f40766..32851a6c 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -120,11 +120,11 @@ describe("GraphConfig", () => {
         const dropPanel = wrapper.find(".graph-config-panel");
         await dropPanel.trigger("drop", { dataTransfer });
         expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
-        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
             graphIndex: 0,
             selectedVariables: ["S", "R", "I"]
         });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
     });
 
     it("onDrop does not attempt to remove variable if source was hidden variables", async () => {
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 2acb4961..9354924b 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -8,7 +8,14 @@ import Vuex from "vuex";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
-import { mockBasicState, mockGraphsState, mockModelState, mockRunState, mockStochasticState } from "../../../mocks";
+import {
+    mockBasicState,
+    mockFitState,
+    mockGraphsState, mockModelFitState,
+    mockModelState,
+    mockRunState,
+    mockStochasticState
+} from "../../../mocks";
 import { ModelState } from "../../../../src/app/store/model/state";
 import { RunState } from "../../../../src/app/store/run/state";
 import RunTab from "../../../../src/app/components/run/RunTab.vue";
@@ -26,6 +33,7 @@ import { AppType } from "../../../../src/app/store/appState/state";
 import { RunMutation } from "../../../../src/app/store/run/mutations";
 import { RunAction } from "../../../../src/app/store/run/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
+import {FitState} from "../../../../src/app/store/fit/state";
 
 describe("RunTab", () => {
     const defaultModelState = {
@@ -144,6 +152,35 @@ describe("RunTab", () => {
         });
     };
 
+    const getFitWrapper = () => {
+        const store = new Vuex.Store<FitState>({
+            state: mockFitState(),
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: mockGraphsState({
+                        config: [
+                            { id: "123", selectedVariables: ["S"], unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
+                        ]
+                    } as any),
+                    getters: graphGetters
+                },
+                modelFit: {
+                    namespaced: true,
+                    state: mockModelFitState({
+                        sumOfSquares: 21.2
+                    })
+                }
+            }
+        });
+        return shallowMount(RunTab, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
     it("renders as expected when can run model", () => {
         const runState = { ...defaultRunState, userDownloadFileName: "test.xlsx" };
         const wrapper = getWrapper(defaultModelState, runState);
@@ -184,6 +221,12 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(RunStochasticPlot).exists()).toBe(false);
     });
 
+    it("renders sumOfSquares for Fit app", () => {
+        const wrapper = getFitWrapper();
+        expect(wrapper.findAll("#squares").length).toBe(1);
+        expect(wrapper.find("#squares").text()).toBe("Sum of squares: 21.2");
+    });
+
     it("propagates x axis changes to all run plots", async () => {
         const wrapper = getWrapper();
         const plots = wrapper.findAllComponents(RunPlot);
diff --git a/app/static/tests/unit/plot.test.ts b/app/static/tests/unit/plot.test.ts
index 66f08711..5c520e79 100644
--- a/app/static/tests/unit/plot.test.ts
+++ b/app/static/tests/unit/plot.test.ts
@@ -114,7 +114,7 @@ describe("allFitDataToPlotly", () => {
     };
 
     it("creates unlinked data", () => {
-        const res = allFitDataToPlotly(allFitData, palette, 0, 4);
+        const res = allFitDataToPlotly(allFitData, palette, 0, 4, ["B"]);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" }, // first data colour
@@ -136,12 +136,12 @@ describe("allFitDataToPlotly", () => {
     });
 
     it("returns empty set if data missing", () => {
-        const res = allFitDataToPlotly(null, palette, 0, 4);
+        const res = allFitDataToPlotly(null, palette, 0, 4, ["B"]);
         expect(res).toStrictEqual([]);
     });
 
     it("filters data by time", () => {
-        const res = allFitDataToPlotly(allFitData, palette, 1, 3);
+        const res = allFitDataToPlotly(allFitData, palette, 1, 3, ["B"]);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" },
@@ -168,7 +168,8 @@ describe("allFitDataToPlotly", () => {
             linkedVariables: { a: null, b: "B" },
             timeVariable: "t"
         };
-        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4);
+        const selectedVariables = ["A", "B"];
+        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4, selectedVariables);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" }, // first data colour
@@ -188,6 +189,24 @@ describe("allFitDataToPlotly", () => {
             }
         ]);
     });
+
+    it("adds transparent data for unselected variable", () => {
+        const allFitDataLinked = {
+            data,
+            linkedVariables: { a: null, b: "B" },
+            timeVariable: "t"
+        };
+        const selectedVariables = ["A"];
+        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4, selectedVariables);
+        expect(res[1]).toStrictEqual({
+                marker: { color: "transparent" }, // Model colour
+                mode: "markers",
+                name: "b",
+                type: "scatter",
+                x: [0, 1, 2, 3, 4],
+                y: [2, 4, 6, 8, 10]
+            });
+    });
 });
 
 describe("fitDataToPlotly", () => {

From 403e510a24b5401426928da10335ea15068a53cd Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 2 Aug 2024 10:11:10 +0100
Subject: [PATCH 68/80] e2e test

---
 app/static/tests/e2e/fit.etest.ts         | 58 +++++++++++++++++++++--
 app/static/tests/e2e/sensitivity.etest.ts |  2 +-
 app/static/tests/e2e/utils.ts             | 12 +++--
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 58b242eb..5614b4bb 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -1,11 +1,11 @@
-import { expect, test, Page } from "@playwright/test";
+import {expect, test, Page, Locator} from "@playwright/test";
 import {
     newFitCode,
     uploadCSVData,
     writeCode,
     startModelFit,
     waitForModelFitCompletion,
-    realisticFitData
+    realisticFitData, linkData, addGraphWithVariable, expectWodinPlotDataSummary
 } from "./utils";
 import PlaywrightConfig from "../../playwright.config";
 
@@ -327,7 +327,7 @@ test.describe("Wodin App model fit tests", () => {
         const select1 = await linkContainer.locator(":nth-match(select, 1)");
         await select1.selectOption("onset");
         await page.click(":nth-match(.wodin-right .nav-tabs a, 1)"); // change main to run tab
-        const sumOfSquares = await page.innerText(":nth-match(.wodin-plot-container span, 1)");
+        const sumOfSquares = await page.innerText("#squares");
         expect(sumOfSquares).toContain("Sum of squares:");
     });
 
@@ -344,4 +344,56 @@ test.describe("Wodin App model fit tests", () => {
         await page.locator(".log-scale-y-axis input").click();
         await expect(await page.innerHTML(tickSelector)).toBe("2");
     });
+
+    const expectDataSummaryOnGraph = async (graph: Locator, dataSummaryIdx: number, dataColor: string) => {
+        const dataSummaryLocator = await graph.locator(`:nth-match(.wodin-plot-data-summary-series, ${dataSummaryIdx})`);
+        await expectWodinPlotDataSummary(dataSummaryLocator, "Cases", 32, 0, 31, 0, 13, "markers", null, dataColor );
+    };
+
+    test("data is displayed as expected with multiple graphs", async ({ page }) => {
+        await uploadCSVData(page, realisticFitData);
+        await page.click(":nth-match(.wodin-left .nav-tabs a, 3)");
+
+        // Add second graph and drag 'onset' and 'I' there
+        await addGraphWithVariable(page, 5); // onset
+        let iVariable = await page.locator(":nth-match(.variable, 3)");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+
+        // Expect data to be shown on both graphs
+        const firstGraph = await page.locator(":nth-match(.wodin-plot-container, 1)");
+        const secondGraph = await page.locator(":nth-match(.wodin-plot-container, 2)");
+        const unlinkedDataColor = "#1c0a00";
+        const linkedDataColor = "#cccc00";
+        const unselectedDataColor = "transparent";
+        await expectDataSummaryOnGraph(firstGraph, 4, unlinkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 3, unlinkedDataColor);
+
+        // Link data to 'I'
+        await linkData(page);
+
+        // Expect data to be shown on second graph with I's variable colour. Data should still be present on first graph
+        // but transparent
+        await expectDataSummaryOnGraph(firstGraph, 4, unselectedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 3, linkedDataColor);
+
+        // Drag 'I' back to first graph
+        const secondGraphConfig = page.locator(":nth-match(.graph-config-panel, 2)");
+        iVariable = secondGraphConfig.locator(":nth-match(.variable, 1)");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 1)"));
+
+        // Expect data to be visible on first graph, transparent on second
+        await expectDataSummaryOnGraph(firstGraph, 5, linkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 2, unselectedDataColor);
+
+        // SoS should be shown only once
+        const sumOfSquares = page.locator("#squares");
+        expect(await sumOfSquares.count()).toBe(1);
+        expect(await sumOfSquares.innerText()).toContain("Sum of squares:");
+
+        // Run sensitivity - expect data to be coloured on first graph, transparent on second
+        await page.click(":nth-match(.wodin-right .nav-tabs a, 3)");
+        await page.click("#run-sens-btn");
+        await expectDataSummaryOnGraph(firstGraph, 45, linkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 12, unselectedDataColor);
+    });
 });
diff --git a/app/static/tests/e2e/sensitivity.etest.ts b/app/static/tests/e2e/sensitivity.etest.ts
index a7ae17b8..a52d7c9e 100644
--- a/app/static/tests/e2e/sensitivity.etest.ts
+++ b/app/static/tests/e2e/sensitivity.etest.ts
@@ -104,7 +104,7 @@ test.describe("Sensitivity tests", () => {
         await expect(await page.innerText(".sensitivity-tab .plot-placeholder")).toBe("Sensitivity has not been run.");
 
         // run and see all traces
-        page.click("#run-sens-btn");
+        await page.click("#run-sens-btn");
         const linesSelector = `${plotSelector} .scatterlayer .trace .lines path`;
         expect((await page.locator(`:nth-match(${linesSelector}, 30)`).getAttribute("d"))!.startsWith("M0")).toBe(true);
 
diff --git a/app/static/tests/e2e/utils.ts b/app/static/tests/e2e/utils.ts
index c3dc6f7f..7a884317 100644
--- a/app/static/tests/e2e/utils.ts
+++ b/app/static/tests/e2e/utils.ts
@@ -81,20 +81,22 @@ export const writeCode = async (page: Page, code: string) => {
     await page.fill(".monaco-editor textarea", code);
 };
 
+export const linkData = async (page: Page) => {
+    const linkContainer = await page.locator(":nth-match(.collapse .container, 1)");
+    const select1 = await linkContainer.locator(":nth-match(select, 1)");
+    await select1.selectOption("I");
+};
+
 export const startModelFit = async (page: Page, data: string = realisticFitData) => {
     // Upload data
     await uploadCSVData(page, data);
     await page.click(":nth-match(.wodin-right .nav-tabs a, 2)");
 
-    // link variables
     await page.click(":nth-match(.wodin-left .nav-tabs a, 3)");
     await expect(await page.innerText("#optimisation")).toBe(
         "Please link at least one column in order to set target to fit."
     );
-    const linkContainer = await page.locator(":nth-match(.collapse .container, 1)");
-    const select1 = await linkContainer.locator(":nth-match(select, 1)");
-    await select1.selectOption("I");
-
+    await linkData(page);
     await expect(await page.innerText("#optimisation label#target-fit-label")).toBe("Cases ~ I");
 
     // select param to vary

From 9a7eb0f0c776740e17577acdfe3c756056075522 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 2 Aug 2024 10:14:26 +0100
Subject: [PATCH 69/80] lint

---
 app/static/src/app/components/run/RunTab.vue       |  2 +-
 .../sensitivity/SensitivityTracesPlot.vue          |  9 ++++++++-
 app/static/tests/e2e/fit.etest.ts                  | 11 +++++++----
 .../tests/unit/components/run/runTab.test.ts       |  5 +++--
 app/static/tests/unit/plot.test.ts                 | 14 +++++++-------
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 560b7d45..274a7581 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -25,7 +25,7 @@
             </run-plot>
         </template>
         <div v-if="sumOfSquares">
-          <span id="squares">Sum of squares: {{ sumOfSquares }}</span>
+            <span id="squares">Sum of squares: {{ sumOfSquares }}</span>
         </div>
         <error-info :error="error"></error-info>
         <div>
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index 53ee6e4e..ab166ac6 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -201,7 +201,14 @@ export default defineComponent({
 
                 if (allFitData.value) {
                     result.push(
-                        ...allFitDataToPlotly(allFitData.value, palette.value, start, end, props.graphConfig.selectedVariables));
+                        ...allFitDataToPlotly(
+                            allFitData.value,
+                            palette.value,
+                            start,
+                            end,
+                            props.graphConfig.selectedVariables
+                        )
+                    );
                 }
             }
 
diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 5614b4bb..f6c29a9d 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -1,11 +1,14 @@
-import {expect, test, Page, Locator} from "@playwright/test";
+import { expect, test, Page, Locator } from "@playwright/test";
 import {
     newFitCode,
     uploadCSVData,
     writeCode,
     startModelFit,
     waitForModelFitCompletion,
-    realisticFitData, linkData, addGraphWithVariable, expectWodinPlotDataSummary
+    realisticFitData,
+    linkData,
+    addGraphWithVariable,
+    expectWodinPlotDataSummary
 } from "./utils";
 import PlaywrightConfig from "../../playwright.config";
 
@@ -346,8 +349,8 @@ test.describe("Wodin App model fit tests", () => {
     });
 
     const expectDataSummaryOnGraph = async (graph: Locator, dataSummaryIdx: number, dataColor: string) => {
-        const dataSummaryLocator = await graph.locator(`:nth-match(.wodin-plot-data-summary-series, ${dataSummaryIdx})`);
-        await expectWodinPlotDataSummary(dataSummaryLocator, "Cases", 32, 0, 31, 0, 13, "markers", null, dataColor );
+        const summaryLocator = await graph.locator(`:nth-match(.wodin-plot-data-summary-series, ${dataSummaryIdx})`);
+        await expectWodinPlotDataSummary(summaryLocator, "Cases", 32, 0, 31, 0, 13, "markers", null, dataColor);
     };
 
     test("data is displayed as expected with multiple graphs", async ({ page }) => {
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 9354924b..1bcab6ff 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -11,7 +11,8 @@ import { BasicState } from "../../../../src/app/store/basic/state";
 import {
     mockBasicState,
     mockFitState,
-    mockGraphsState, mockModelFitState,
+    mockGraphsState,
+    mockModelFitState,
     mockModelState,
     mockRunState,
     mockStochasticState
@@ -33,7 +34,7 @@ import { AppType } from "../../../../src/app/store/appState/state";
 import { RunMutation } from "../../../../src/app/store/run/mutations";
 import { RunAction } from "../../../../src/app/store/run/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
-import {FitState} from "../../../../src/app/store/fit/state";
+import { FitState } from "../../../../src/app/store/fit/state";
 
 describe("RunTab", () => {
     const defaultModelState = {
diff --git a/app/static/tests/unit/plot.test.ts b/app/static/tests/unit/plot.test.ts
index 5c520e79..5b73579e 100644
--- a/app/static/tests/unit/plot.test.ts
+++ b/app/static/tests/unit/plot.test.ts
@@ -199,13 +199,13 @@ describe("allFitDataToPlotly", () => {
         const selectedVariables = ["A"];
         const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4, selectedVariables);
         expect(res[1]).toStrictEqual({
-                marker: { color: "transparent" }, // Model colour
-                mode: "markers",
-                name: "b",
-                type: "scatter",
-                x: [0, 1, 2, 3, 4],
-                y: [2, 4, 6, 8, 10]
-            });
+            marker: { color: "transparent" }, // Model colour
+            mode: "markers",
+            name: "b",
+            type: "scatter",
+            x: [0, 1, 2, 3, 4],
+            y: [2, 4, 6, 8, 10]
+        });
     });
 });
 

From 5c423eb7b313aab806f44afe60a1328ddaf26bf4 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 2 Aug 2024 11:18:32 +0100
Subject: [PATCH 70/80] add graphCount to redraw watches in RunPlot

---
 app/static/src/app/components/mixins/selectVariables.ts | 2 +-
 app/static/src/app/components/run/RunPlot.vue           | 7 ++++++-
 app/static/src/app/plot.ts                              | 2 +-
 app/static/tests/unit/components/run/runPlot.test.ts    | 9 ++++++---
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 908ca341..9873a55d 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -53,7 +53,7 @@ export default (
         const variable = dataTransfer!.getData("variable");
         const srcGraphConfig = dataTransfer!.getData("srcGraphConfig");
         if (srcGraphConfig !== thisSrcGraphConfig) {
-            // add to this graph if necessary - do this before remove so it is not unlinked if linked variables
+            // add to this graph if necessary - do this before remove so, if a linked variable, it is not unlinked
             if (!hasHiddenVariables && !selectedVariables.value.includes(variable)) {
                 const newVars = [...selectedVariables.value, variable];
                 updateSelectedVariables(graphIndex!, newVars);
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index e334a27a..541d639b 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -4,7 +4,9 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
+        :redrawWatches="solution ?
+              [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames, graphCount] :
+              []"
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"
@@ -69,6 +71,9 @@ const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData
 const selectedVariables = computed(() => props.graphConfig.selectedVariables);
 const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
+// TODO: put this in the composable in mrc-5572
+const graphCount = computed(() => store.state.graphs.config.length);
+
 const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
     const options = {
         mode: "grid",
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 77066925..3aa3b759 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -156,7 +156,7 @@ export function allFitDataToPlotly(
         const variable = linkedVariables[name];
         if (variable) {
             // If there is a linked variable, only show data if the variable is selected - if not ,render the series,
-            // but as transparent so that all graph x axes match
+            // but as transparent so that all graph x axes are consistent
             color = selectedVariables.includes(variable) ? paletteModel[variable] : "transparent";
         }
         return {
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index 31445288..d92eeef6 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -153,7 +153,8 @@ describe("RunPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            1
         ]);
         expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
 
@@ -292,7 +293,8 @@ describe("RunPlot", () => {
             mockAllFitData,
             selectedVariables,
             { Set1: mockParamSetResult1.solution, Set2: mockParamSetResult2.solution },
-            ["rand1", "rand2", "rand3"]
+            ["rand1", "rand2", "rand3"],
+            1
         ]);
 
         // Generates expected plot data from model
@@ -517,7 +519,8 @@ describe("RunPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            1
         ]);
 
         // Generates expected plot data from model

From 267bb0fb17add8adbbd2ca53ef27445d5b1ba7f7 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 2 Aug 2024 11:25:54 +0100
Subject: [PATCH 71/80] lint

---
 app/static/src/app/components/run/RunPlot.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 541d639b..4754691e 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -4,9 +4,9 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ?
-              [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames, graphCount] :
-              []"
+        :redrawWatches="
+            solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames, graphCount] : []
+        "
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"

From 382599794e0ebbb770f3f92d9483269b0fd21580 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Fri, 2 Aug 2024 11:52:37 +0100
Subject: [PATCH 72/80] Copy on drag it Ctrl key is pressed

---
 app/static/src/app/components/graphConfig/GraphConfig.vue | 1 +
 app/static/src/app/components/mixins/selectVariables.ts   | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index b704c4a2..576d5849 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -27,6 +27,7 @@
             </template>
             <div v-if="!selectedVariables.length" class="drop-zone-instruction p-2 me-4">
                 Drag variables here to select them for this graph.
+                Press the Ctrl key on drag to make a copy of a variable.
             </div>
         </div>
     </div>
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 9873a55d..59465efa 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -20,10 +20,12 @@ export default (
 
     const startDrag = (evt: DragEvent, variable: string) => {
         const { dataTransfer } = evt;
+        const copy = !hasHiddenVariables && evt.ctrlKey;
         dataTransfer!.dropEffect = "move";
         dataTransfer!.effectAllowed = "move";
         dataTransfer!.setData("variable", variable);
         dataTransfer!.setData("srcGraphConfig", thisSrcGraphConfig);
+        dataTransfer!.setData("copyVar", copy.toString());
 
         emit("setDragging", true);
     };
@@ -53,13 +55,15 @@ export default (
         const variable = dataTransfer!.getData("variable");
         const srcGraphConfig = dataTransfer!.getData("srcGraphConfig");
         if (srcGraphConfig !== thisSrcGraphConfig) {
+            const copy = !hasHiddenVariables && dataTransfer!.getData("copyVar") === "true";
+
             // add to this graph if necessary - do this before remove so, if a linked variable, it is not unlinked
             if (!hasHiddenVariables && !selectedVariables.value.includes(variable)) {
                 const newVars = [...selectedVariables.value, variable];
                 updateSelectedVariables(graphIndex!, newVars);
             }
 
-            if (srcGraphConfig !== "hidden") {
+            if (srcGraphConfig !== "hidden" && !copy) {
                 removeVariable(parseInt(srcGraphConfig, 10), variable);
             }
         }

From 9bfb0772e252b5a5e33204abf0578cef7fcef9a7 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Sat, 3 Aug 2024 13:47:59 +0100
Subject: [PATCH 73/80] test

---
 .../components/graphConfig/GraphConfig.vue    |  4 +-
 .../app/components/mixins/selectVariables.ts  | 16 ++++++--
 app/static/tests/e2e/code.etest.ts            | 10 ++++-
 .../graphConfig/graphConfig.test.ts           | 37 ++++++++++++++++++-
 .../graphConfig/hiddenVariables.test.ts       | 11 +++++-
 5 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 576d5849..29fc5ddb 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -26,8 +26,8 @@
                 </span>
             </template>
             <div v-if="!selectedVariables.length" class="drop-zone-instruction p-2 me-4">
-                Drag variables here to select them for this graph.
-                Press the Ctrl key on drag to make a copy of a variable.
+                Drag variables here to select them for this graph. Press the Ctrl key on drag to make a copy of a
+                variable.
             </div>
         </div>
     </div>
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 59465efa..454a2bb6 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -19,8 +19,8 @@ export default (
     const thisSrcGraphConfig = hasHiddenVariables ? "hidden" : graphIndex!.toString();
 
     const startDrag = (evt: DragEvent, variable: string) => {
-        const { dataTransfer } = evt;
-        const copy = !hasHiddenVariables && evt.ctrlKey;
+        const { dataTransfer, ctrlKey } = evt;
+        const copy = !hasHiddenVariables && ctrlKey;
         dataTransfer!.dropEffect = "move";
         dataTransfer!.effectAllowed = "move";
         dataTransfer!.setData("variable", variable);
@@ -64,7 +64,17 @@ export default (
             }
 
             if (srcGraphConfig !== "hidden" && !copy) {
-                removeVariable(parseInt(srcGraphConfig, 10), variable);
+                // Remove variable from all graphs where it occurs if this is HiddenVariables, otherwise from source
+                // graph only
+                if (hasHiddenVariables) {
+                    store.state.graphs.config.forEach((config, index) => {
+                        if (config.selectedVariables.includes(variable)) {
+                            removeVariable(index, variable);
+                        }
+                    });
+                } else {
+                    removeVariable(parseInt(srcGraphConfig, 10), variable);
+                }
             }
         }
     };
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 5de28d12..5ead32a9 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -312,7 +312,7 @@ test.describe("Code Tab tests", () => {
         await expectGraphVariables(page, 0, ["I", "R"]);
     });
 
-    test("can add a graph, drag a variable onto it and delete it", async ({ page }) => {
+    test("can add a graph, drag variables onto it and delete it", async ({ page }) => {
         // Add graph
         await page.click("#add-graph-btn");
 
@@ -332,6 +332,14 @@ test.describe("Code Tab tests", () => {
         await expectGraphVariables(page, 1, ["S"]);
         await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
 
+        // Drag a variable with Ctrl key to make copy
+        const iVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
+        await page.keyboard.down("Control");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+        await page.keyboard.up("Control");
+        await expectGraphVariables(page, 0, ["R"]);
+        await expectGraphVariables(page, 1, ["S", "I"]);
+
         // Delete second graph
         await page.click(":nth-match(.graph-config-panel .delete-graph, 2)");
         await expect(page.locator(".graph-config-panel")).toHaveCount(1);
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index 32851a6c..63634cde 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -93,14 +93,25 @@ describe("GraphConfig", () => {
         const wrapper = getWrapper();
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
-        await s.trigger("dragstart", { dataTransfer: { setData } });
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false });
         expect(setData.mock.calls[0][0]).toBe("variable");
         expect(setData.mock.calls[0][1]).toStrictEqual("S");
         expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
         expect(setData.mock.calls[1][1]).toStrictEqual("0");
+        expect(setData.mock.calls[2][0]).toBe("copyVar");
+        expect(setData.mock.calls[2][1]).toBe("false");
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
     });
 
+    it("start drag sets values copyVar to true in event when Ctrl key pressed", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: true });
+        expect(setData.mock.calls[2][0]).toBe("copyVar");
+        expect(setData.mock.calls[2][1]).toBe("true");
+    });
+
     it("ending drag emits setDragging", async () => {
         const wrapper = getWrapper();
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
@@ -114,6 +125,7 @@ describe("GraphConfig", () => {
             getData: (s: string) => {
                 if (s === "variable") return "I";
                 if (s === "srcGraphConfig") return "1";
+                if (s === "copyVar") return "false";
                 return null;
             }
         };
@@ -133,6 +145,26 @@ describe("GraphConfig", () => {
             getData: (s: string) => {
                 if (s === "variable") return "I";
                 if (s === "srcGraphConfig") return "hidden";
+                if (s === "copyVar") return "false";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
+    });
+
+    it("onDrop does not remove variable if copyVar is true", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraphConfig") return "1";
+                if (s === "copyVar") return "true";
                 return null;
             }
         };
@@ -167,7 +199,8 @@ describe("GraphConfig", () => {
             ]
         } as any);
         expect(wrapper.find(".drop-zone-instruction").text()).toBe(
-            "Drag variables here to select them for this graph."
+            "Drag variables here to select them for this graph. " +
+                "Press the Ctrl key on drag to make a copy of a variable."
         );
     });
 
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
index 2e34a1a8..c0a7781a 100644
--- a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -33,6 +33,9 @@ describe("HiddenVariables", () => {
                         config: [
                             {
                                 selectedVariables: ["S", "J"]
+                            },
+                            {
+                                selectedVariables: ["S"]
                             }
                         ]
                     },
@@ -88,6 +91,8 @@ describe("HiddenVariables", () => {
         expect(setData.mock.calls[0][1]).toStrictEqual("I");
         expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
         expect(setData.mock.calls[1][1]).toStrictEqual("hidden");
+        expect(setData.mock.calls[2][0]).toStrictEqual("copyVar");
+        expect(setData.mock.calls[2][1]).toStrictEqual("false");
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
     });
 
@@ -98,19 +103,21 @@ describe("HiddenVariables", () => {
         expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
     });
 
-    it("onDrop removes variable from source", async () => {
+    it("onDrop removes variable from all configs with variable", async () => {
         const wrapper = getWrapper();
         const dataTransfer = {
             getData: (s: string) => {
                 if (s === "variable") return "S";
                 if (s === "srcGraphConfig") return "0";
+                if (s === "copyVar") return "false";
                 return null;
             }
         };
         const dropPanel = wrapper.find(".hidden-variables-panel");
         await dropPanel.trigger("drop", { dataTransfer });
-        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
         expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["J"] });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 1, selectedVariables: [] });
     });
 
     it("shows drop zone when dragging", async () => {

From 692bc48cd9de1130695981484704aca9b21eca9e Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Sun, 4 Aug 2024 12:46:27 +0100
Subject: [PATCH 74/80] specify drag positions

---
 app/static/tests/e2e/code.etest.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index 5ead32a9..a38171c2 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -326,7 +326,11 @@ test.describe("Code Tab tests", () => {
 
         // Drag variable to second graph
         const sVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
-        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+        const dragPositions = {
+            sourcePosition: { x: 5, y: 5 },
+            targetPosition: { x: 5, y: 5 }
+        };
+        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions );
 
         await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S"]);
@@ -335,9 +339,9 @@ test.describe("Code Tab tests", () => {
         // Drag a variable with Ctrl key to make copy
         const iVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
         await page.keyboard.down("Control");
-        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions);
         await page.keyboard.up("Control");
-        await expectGraphVariables(page, 0, ["R"]);
+        await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S", "I"]);
 
         // Delete second graph

From d3c09a3f4e3ade07370157bc7ba60b3b761f240d Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Sun, 4 Aug 2024 12:53:35 +0100
Subject: [PATCH 75/80] format

---
 app/static/tests/e2e/code.etest.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index a38171c2..3012dfde 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -330,7 +330,7 @@ test.describe("Code Tab tests", () => {
             sourcePosition: { x: 5, y: 5 },
             targetPosition: { x: 5, y: 5 }
         };
-        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions );
+        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions);
 
         await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S"]);

From 47f62808302725a12a81781bd0b6f13002dca707 Mon Sep 17 00:00:00 2001
From: Emma Russell <44669576+EmmaLRussell@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:41:43 +0100
Subject: [PATCH 76/80] Commit suggested comment change

Co-authored-by: David Mears <60350599+david-mears-2@users.noreply.github.com>
---
 app/static/src/app/plot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 3aa3b759..a2f78541 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -155,7 +155,7 @@ export function allFitDataToPlotly(
         let color = palette[name];
         const variable = linkedVariables[name];
         if (variable) {
-            // If there is a linked variable, only show data if the variable is selected - if not ,render the series,
+            // If there is a linked variable, only show data if the variable is selected - if not selected, render the series,
             // but as transparent so that all graph x axes are consistent
             color = selectedVariables.includes(variable) ? paletteModel[variable] : "transparent";
         }

From 43689a8e4f4891e65685a81244e4e674199bcf42 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 5 Aug 2024 14:42:05 +0100
Subject: [PATCH 77/80] lint

---
 app/static/src/app/plot.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index a2f78541..5667d9ef 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -155,8 +155,8 @@ export function allFitDataToPlotly(
         let color = palette[name];
         const variable = linkedVariables[name];
         if (variable) {
-            // If there is a linked variable, only show data if the variable is selected - if not selected, render the series,
-            // but as transparent so that all graph x axes are consistent
+            // If there is a linked variable, only show data if the variable is selected - if not selected, render the
+            // series, but as transparent so that all graph x axes are consistent
             color = selectedVariables.includes(variable) ? paletteModel[variable] : "transparent";
         }
         return {

From acb89fefedc4901dd64fb31ee2ed70835b1cc0d1 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Tue, 6 Aug 2024 09:33:58 +0100
Subject: [PATCH 78/80] support Mac Command key

---
 .../app/components/graphConfig/GraphConfig.vue    |  2 +-
 .../src/app/components/mixins/selectVariables.ts  |  4 ++--
 .../components/graphConfig/graphConfig.test.ts    | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 29fc5ddb..ab3cf87e 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -26,7 +26,7 @@
                 </span>
             </template>
             <div v-if="!selectedVariables.length" class="drop-zone-instruction p-2 me-4">
-                Drag variables here to select them for this graph. Press the Ctrl key on drag to make a copy of a
+                Drag variables here to select them for this graph. Press the Ctrl or ⌘ key on drag to make a copy of a
                 variable.
             </div>
         </div>
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index 454a2bb6..d33d0bd9 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -19,8 +19,8 @@ export default (
     const thisSrcGraphConfig = hasHiddenVariables ? "hidden" : graphIndex!.toString();
 
     const startDrag = (evt: DragEvent, variable: string) => {
-        const { dataTransfer, ctrlKey } = evt;
-        const copy = !hasHiddenVariables && ctrlKey;
+        const { dataTransfer, ctrlKey, metaKey } = evt;
+        const copy = !hasHiddenVariables && (ctrlKey || metaKey);
         dataTransfer!.dropEffect = "move";
         dataTransfer!.effectAllowed = "move";
         dataTransfer!.setData("variable", variable);
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index 63634cde..d2e6bc58 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -93,7 +93,7 @@ describe("GraphConfig", () => {
         const wrapper = getWrapper();
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
-        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false });
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: false });
         expect(setData.mock.calls[0][0]).toBe("variable");
         expect(setData.mock.calls[0][1]).toStrictEqual("S");
         expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
@@ -107,7 +107,16 @@ describe("GraphConfig", () => {
         const wrapper = getWrapper();
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
-        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: true });
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: true, metaKey: false });
+        expect(setData.mock.calls[2][0]).toBe("copyVar");
+        expect(setData.mock.calls[2][1]).toBe("true");
+    });
+
+    it("start drag sets values copyVar to true in event when meta key pressed", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: true });
         expect(setData.mock.calls[2][0]).toBe("copyVar");
         expect(setData.mock.calls[2][1]).toBe("true");
     });
@@ -200,7 +209,7 @@ describe("GraphConfig", () => {
         } as any);
         expect(wrapper.find(".drop-zone-instruction").text()).toBe(
             "Drag variables here to select them for this graph. " +
-                "Press the Ctrl key on drag to make a copy of a variable."
+                "Press the Ctrl or ⌘ key on drag to make a copy of a variable."
         );
     });
 

From fcbdd63699d64047a2d32651a2b4307d6706d4b2 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 8 Aug 2024 17:10:29 +0100
Subject: [PATCH 79/80] updates for PR

---
 .../app/components/mixins/selectVariables.ts  |  4 ++--
 .../graphConfig/graphConfig.test.ts           | 20 +++++++------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
index d33d0bd9..b3364c59 100644
--- a/app/static/src/app/components/mixins/selectVariables.ts
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -18,8 +18,8 @@ export default (
 ): SelectVariablesMixin => {
     const thisSrcGraphConfig = hasHiddenVariables ? "hidden" : graphIndex!.toString();
 
-    const startDrag = (evt: DragEvent, variable: string) => {
-        const { dataTransfer, ctrlKey, metaKey } = evt;
+    const startDrag = (event: DragEvent, variable: string) => {
+        const { dataTransfer, ctrlKey, metaKey } = event;
         const copy = !hasHiddenVariables && (ctrlKey || metaKey);
         dataTransfer!.dropEffect = "move";
         dataTransfer!.effectAllowed = "move";
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
index d2e6bc58..88bd729f 100644
--- a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -94,13 +94,9 @@ describe("GraphConfig", () => {
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
         await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: false });
-        expect(setData.mock.calls[0][0]).toBe("variable");
-        expect(setData.mock.calls[0][1]).toStrictEqual("S");
-        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
-        expect(setData.mock.calls[1][1]).toStrictEqual("0");
-        expect(setData.mock.calls[2][0]).toBe("copyVar");
-        expect(setData.mock.calls[2][1]).toBe("false");
-        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
+        expect(setData).toHaveBeenNthCalledWith(1, "variable", "S");
+        expect(setData).toHaveBeenNthCalledWith(2, "srcGraphConfig", "0");
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "false");
     });
 
     it("start drag sets values copyVar to true in event when Ctrl key pressed", async () => {
@@ -108,8 +104,7 @@ describe("GraphConfig", () => {
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
         await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: true, metaKey: false });
-        expect(setData.mock.calls[2][0]).toBe("copyVar");
-        expect(setData.mock.calls[2][1]).toBe("true");
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "true");
     });
 
     it("start drag sets values copyVar to true in event when meta key pressed", async () => {
@@ -117,8 +112,7 @@ describe("GraphConfig", () => {
         const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
         const setData = jest.fn();
         await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: true });
-        expect(setData.mock.calls[2][0]).toBe("copyVar");
-        expect(setData.mock.calls[2][1]).toBe("true");
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "true");
     });
 
     it("ending drag emits setDragging", async () => {
@@ -148,13 +142,13 @@ describe("GraphConfig", () => {
         expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
     });
 
-    it("onDrop does not attempt to remove variable if source was hidden variables", async () => {
+    it("onDrop does not attempt to remove variable if source is hidden, even with Ctrl key", async () => {
         const wrapper = getWrapper();
         const dataTransfer = {
             getData: (s: string) => {
                 if (s === "variable") return "I";
                 if (s === "srcGraphConfig") return "hidden";
-                if (s === "copyVar") return "false";
+                if (s === "copyVar") return "true";
                 return null;
             }
         };

From 0f19023642d47a8ddd1d74a6bb5e1c7b1d30538d Mon Sep 17 00:00:00 2001
From: Emma <EmmaRussellKilburn@gmail.com>
Date: Mon, 7 Oct 2024 09:49:37 +0100
Subject: [PATCH 80/80] readme tweak

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 7161bcb1..7e7fa6b7 100644
--- a/README.md
+++ b/README.md
@@ -128,10 +128,8 @@ The build includes a docker image build which may be easier to deploy. See [wodi
 
 ### Quickly test drive a feature branch
 
-Use the `./scripts/run-version.sh` script
+Use the `./scripts/run-version.sh` script setting the branch references for the app and api (defaults to main for both):
 
 ```
 ./scripts/run-version.sh --app mrc-1234 --api mrc-2345
 ```
-
-setting the branch references for the app and api (defaults to main for both).