Merge pull request #177 from mrc-ide/mrc-4456_single_edit

mrc-4456_single_edit Configuration and settings for multi-sensitivity
mrc-ide · Sep 1, 2023 · 70a9512 · 70a9512
2 parents 204997e + dcb982e
commit 70a9512
Show file tree

Hide file tree

Showing 39 changed files with 1,213 additions and 314 deletions.
diff --git a/app/static/src/app/components/basic/BasicApp.vue b/app/static/src/app/components/basic/BasicApp.vue
@@ -21,6 +21,9 @@
         <template v-slot:Sensitivity>
           <sensitivity-tab></sensitivity-tab>
         </template>
+        <template v-slot:Multi-sensitivity>
+          <multi-sensitivity-tab></multi-sensitivity-tab>
+        </template>
       </wodin-tabs>
     </template>
   </wodin-app>
@@ -35,10 +38,11 @@ import CodeTab from "../code/CodeTab.vue";
 import RunTab from "../run/RunTab.vue";
 import OptionsTab from "../options/OptionsTab.vue";
 import SensitivityTab from "../sensitivity/SensitivityTab.vue";
+import MultiSensitivityTab from "../multiSensitivity/MultiSensitivityTab.vue";
 import { AppStateMutation } from "../../store/appState/mutations";
 import { VisualisationTab } from "../../store/appState/state";
 import HelpTab from "../help/HelpTab.vue";
-import includeHelpTab from "../mixins/includeHelpTab";
+import includeConfiguredTabs from "../mixins/includeConfiguredTabs";
 
 export default defineComponent({
     name: "BasicApp",
@@ -48,18 +52,20 @@ export default defineComponent({
         RunTab,
         OptionsTab,
         SensitivityTab,
+        MultiSensitivityTab,
         WodinApp,
         WodinTabs
     },
     setup() {
         const store = useStore();
         const rightTabSelected = (tab: string) => { store.commit(AppStateMutation.SetOpenVisualisationTab, tab); };
-        const { helpTabName, rightTabNames } = includeHelpTab(store,
+        const { helpTabName, multiSensitivityTabName, rightTabNames } = includeConfiguredTabs(store,
             [VisualisationTab.Run, VisualisationTab.Sensitivity]);
 
         return {
             rightTabSelected,
             helpTabName,
+            multiSensitivityTabName,
             rightTabNames
         };
     }

diff --git a/app/static/src/app/components/fit/FitApp.vue b/app/static/src/app/components/fit/FitApp.vue
@@ -27,6 +27,9 @@
         <template v-slot:Sensitivity>
           <sensitivity-tab></sensitivity-tab>
         </template>
+        <template v-slot:Multi-sensitivity>
+          <multi-sensitivity-tab></multi-sensitivity-tab>
+        </template>
       </wodin-tabs>
     </template>
   </wodin-app>
@@ -35,6 +38,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useStore } from "vuex";
+import MultiSensitivityTab from "@/app/components/multiSensitivity/MultiSensitivityTab.vue";
 import WodinApp from "../WodinApp.vue";
 import WodinTabs from "../WodinTabs.vue";
 import CodeTab from "../code/CodeTab.vue";
@@ -46,11 +50,12 @@ import OptionsTab from "../options/OptionsTab.vue";
 import SensitivityTab from "../sensitivity/SensitivityTab.vue";
 import { VisualisationTab } from "../../store/appState/state";
 import { AppStateMutation } from "../../store/appState/mutations";
-import includeHelpTab from "../mixins/includeHelpTab";
+import includeConfiguredTabs from "../mixins/includeConfiguredTabs";
 
 export default defineComponent({
     name: "FitApp",
     components: {
+        MultiSensitivityTab,
         CodeTab,
         DataTab,
         FitTab,
@@ -67,7 +72,7 @@ export default defineComponent({
         const rightTabSelected = (tab: string) => {
             store.commit(AppStateMutation.SetOpenVisualisationTab, tab);
         };
-        const { helpTabName, rightTabNames } = includeHelpTab(store,
+        const { helpTabName, rightTabNames } = includeConfiguredTabs(store,
             [VisualisationTab.Run, VisualisationTab.Fit, VisualisationTab.Sensitivity]);
 
         return {

diff --git a/...c/app/components/mixins/includeHelpTab.ts → ...omponents/mixins/includeConfiguredTabs.ts b/...c/app/components/mixins/includeHelpTab.ts → ...omponents/mixins/includeConfiguredTabs.ts
@@ -1,17 +1,23 @@
 import { Store } from "vuex";
 import { computed } from "vue";
-import { AppState } from "../../store/appState/state";
+import { AppState, VisualisationTab } from "../../store/appState/state";
 
-export default (store: Store<AppState>, nonHelpTabNames: string[]) => {
+export default (store: Store<AppState>, fixedTabNames: string[]) => {
     const helpTabName = computed(() => {
         if (store.state.config?.help?.markdown?.length) {
             return store.state.config.help.tabName || "Explanation"; // default if markdown but no tab name
         }
         // do not show tab if no markdown
         return null;
     });
+    const multiSensitivityTabName = computed(() => {
+        return store.state.config?.multiSensitivity ? VisualisationTab.MultiSensitivity : null;
+    });
     const rightTabNames = computed(() => {
-        const result = [...nonHelpTabNames];
+        const result = [...fixedTabNames];
+        if (multiSensitivityTabName.value) {
+            result.push(multiSensitivityTabName.value);
+        }
         if (helpTabName.value) {
             result.unshift(helpTabName.value);
         }
@@ -20,6 +26,7 @@ export default (store: Store<AppState>, nonHelpTabNames: string[]) => {
 
     return {
         helpTabName,
+        multiSensitivityTabName,
         rightTabNames
     };
 };
diff --git a/app/static/src/app/components/multiSensitivity/MultiSensitivityTab.vue b/app/static/src/app/components/multiSensitivity/MultiSensitivityTab.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="multi-sensitivity-tab">
+    Multi-sensitivity coming soon!
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "MultiSensitivityTab"
+});
+</script>
diff --git a/app/static/src/app/components/options/EditParamSettings.vue b/app/static/src/app/components/options/EditParamSettings.vue
@@ -82,7 +82,7 @@
                   <label class="col-form-label">Values</label>
                 </div>
                 <div class="col-6">
-                  <tag-input :tags="settingsInternal.customValues" :numeric-only="true" @update="updateUserValues">
+                  <tag-input :tags="settingsInternal.customValues" :numeric-only="true" @update="updateCustomValues">
                   </tag-input>
                 </div>
               </div>
@@ -123,10 +123,9 @@
 
 <script lang="ts">
 import {
-    computed, defineComponent, reactive, watch
+    computed, defineComponent, PropType, reactive, watch
 } from "vue";
 import { useStore } from "vuex";
-import { SensitivityMutation } from "../../store/sensitivity/mutations";
 import {
     SensitivityParameterSettings,
     SensitivityScaleType,
@@ -139,11 +138,15 @@ import ErrorInfo from "../ErrorInfo.vue";
 import TagInput from "./TagInput.vue";
 
 export default defineComponent({
-    name: "EditParamSettings.vue",
+    name: "EditParamSettings",
     props: {
         open: {
             type: Boolean,
             required: true
+        },
+        paramSettings: {
+            type: Object as PropType<SensitivityParameterSettings>,
+            required: false
         }
     },
     components: {
@@ -169,7 +172,7 @@ export default defineComponent({
 
         watch(() => props.open, (newValue) => {
             if (newValue) {
-                Object.assign(settingsInternal, { ...store.state.sensitivity.paramSettings });
+                Object.assign(settingsInternal, { ...props.paramSettings });
             }
         });
 
@@ -191,7 +194,7 @@ export default defineComponent({
             }
             return batchParsResult.value?.error;
         });
-        const updateUserValues = (newValues: number[]) => {
+        const updateCustomValues = (newValues: number[]) => {
             // sort and remove duplicates
             settingsInternal.customValues = newValues;
         };
@@ -200,8 +203,7 @@ export default defineComponent({
         const updateSettings = () => {
             // sort custom values
             const customValues = settingsInternal.customValues.sort((a, b) => a - b);
-            store.commit(`sensitivity/${SensitivityMutation.SetParamSettings}`,
-                { ...settingsInternal, customValues });
+            emit("update", { ...settingsInternal, customValues });
             close();
         };
 
@@ -214,7 +216,7 @@ export default defineComponent({
             centralValue,
             batchPars,
             batchParsError,
-            updateUserValues,
+            updateCustomValues,
             close,
             updateSettings
         };

diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
@@ -1,31 +1,32 @@
 <template>
-    <div>
-        <sensitivity-options v-if="sensitivityOpen"></sensitivity-options>
-        <vertical-collapse v-if="isFit" title="Link" collapse-id="link-data">
-          <link-data></link-data>
-        </vertical-collapse>
-        <vertical-collapse title="Model Parameters" collapse-id="model-params">
-          <parameter-values></parameter-values>
-        </vertical-collapse>
-        <vertical-collapse title="Run Options" collapse-id="run-options">
-          <run-options></run-options>
-        </vertical-collapse>
-        <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
-          <optimisation-options></optimisation-options>
-        </vertical-collapse>
-        <vertical-collapse title="Graph Settings" collapse-id="graph-settings">
-          <graph-settings></graph-settings>
-        </vertical-collapse>
-        <vertical-collapse v-if="!isStochastic"
-                           title="Advanced Settings"
-                           collapse-id="advanced-settings"
-                           :collapsed-default="true">
-          <advanced-settings></advanced-settings>
-        </vertical-collapse>
-        <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
-          <parameter-sets></parameter-sets>
-        </vertical-collapse>
-    </div>
+  <div>
+    <sensitivity-options v-if="sensitivityOpen || multiSensitivityOpen"
+                         :multi-sensitivity="multiSensitivityOpen"></sensitivity-options>
+    <vertical-collapse v-if="isFit" title="Link" collapse-id="link-data">
+      <link-data></link-data>
+    </vertical-collapse>
+    <vertical-collapse title="Model Parameters" collapse-id="model-params">
+      <parameter-values></parameter-values>
+    </vertical-collapse>
+    <vertical-collapse title="Run Options" collapse-id="run-options">
+      <run-options></run-options>
+    </vertical-collapse>
+    <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
+      <optimisation-options></optimisation-options>
+    </vertical-collapse>
+    <vertical-collapse title="Graph Settings" collapse-id="graph-settings">
+      <graph-settings></graph-settings>
+    </vertical-collapse>
+    <vertical-collapse v-if="!isStochastic"
+                       title="Advanced Settings"
+                       collapse-id="advanced-settings"
+                       :collapsed-default="true">
+      <advanced-settings></advanced-settings>
+    </vertical-collapse>
+    <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
+      <parameter-sets></parameter-sets>
+    </vertical-collapse>
+  </div>
 </template>
 
 <script lang="ts">
@@ -61,12 +62,16 @@ export default {
         const isStochastic = computed(() => store.state.appType === AppType.Stochastic);
 
         const sensitivityOpen = computed(() => store.state.openVisualisationTab === VisualisationTab.Sensitivity);
+        const multiSensitivityOpen = computed(() => {
+            return store.state.openVisualisationTab === VisualisationTab.MultiSensitivity;
+        });
         const fitTabIsOpen = computed(() => store.state.openVisualisationTab === VisualisationTab.Fit);
 
         return {
             isFit,
             isStochastic,
             sensitivityOpen,
+            multiSensitivityOpen,
             fitTabIsOpen
         };
     }