show current plot props as defaults in dialog

mrc-ide · Nov 5, 2023 · 0228b21 · 0228b21
1 parent aefc421
commit 0228b21
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/app/static/src/app/components/plot/WodinPlot.vue b/app/static/src/app/components/plot/WodinPlot.vue
@@ -7,13 +7,18 @@
     </div>
     <wodin-plot-data-summary :data="baseData"></wodin-plot-data-summary>
     <slot></slot>
-    <wodin-plot-download-image-modal :open="showDownloadImageModal" @close="close" @confirm="downloadImage"></wodin-plot-download-image-modal>
+    <wodin-plot-download-image-modal :open="showDownloadImageModal"
+                                     :title="downloadImageProps.title"
+                                     :x-label="downloadImageProps.xLabel"
+                                     :y-label="downloadImageProps.yLabel"
+                                     @close="closeModal"
+                                     @confirm="downloadImage"></wodin-plot-download-image-modal>
   </div>
 </template>
 
 <script lang="ts">
 import {
-  computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref
+  computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref, reactive
 } from "vue";
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
@@ -61,6 +66,7 @@ export default defineComponent({
 
         const showDownloadImageModal = ref(false);
         const plotlyContext: Ref<PlotlyDataLayoutConfig | null> = ref(null);
+        const downloadImageProps = reactive({ title: "", xLabel: "", yLabel: "" });
 
         const plotStyle = computed(() => (props.fadePlot ? fadePlotStyle : ""));
 
@@ -78,6 +84,12 @@ export default defineComponent({
 
         const downloadImageClick = (gd: PlotlyDataLayoutConfig) => {
           plotlyContext.value = gd;
+          const layout = gd.layout! as any;
+          console.log("xaxis is: " + JSON.stringify(layout.xaxis))
+          console.log("yaxis is: " + JSON.stringify(layout.yaxis))
+          downloadImageProps.title = layout.title || "";
+          downloadImageProps.xLabel = layout.xaxis.title?.text || "";
+          downloadImageProps.yLabel = layout.yaxis.title?.text || "";
           showDownloadImageModal.value = true;
         };
 
@@ -198,6 +210,7 @@ export default defineComponent({
         return {
             plotStyle,
             plot,
+            downloadImageProps,
             relayout,
             resize,
             baseData,

diff --git a/app/static/src/app/components/plot/WodinPlotDownloadImageModal.vue b/app/static/src/app/components/plot/WodinPlotDownloadImageModal.vue
@@ -13,23 +13,23 @@
                 <label class="col-form-label">Title</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editTitle">
+                <input type="text" class="form-control" v-model="editProps.title">
               </div>
             </div>
-            <div class="row">
+            <div class="row mt-2">
               <div class="col-4">
                 <label class="col-form-label">X axis label</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editXLabel">
+                <input type="text" class="form-control" v-model="editProps.xLabel">
               </div>
             </div>
-            <div class="row">
+            <div class="row mt-2">
               <div class="col-4">
                 <label class="col-form-label">Y axis label</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editYLabel">
+                <input type="text" class="form-control" v-model="editProps.yLabel">
               </div>
             </div>
           </div>
@@ -48,7 +48,10 @@
 </template>
 
 <script setup lang="ts">
-import {computed, defineProps, defineEmits, ref} from "vue";
+import {computed, defineProps, defineEmits, watch, reactive} from "vue";
+
+// TODO: sort out buttons - put 'custom' download first, then the other standard buttons except download
+// TODO put the WodinPlot changes in a mixin and use that from Sensitivity Summary plot too
 
 const props = defineProps({
     open: Boolean,
@@ -59,20 +62,30 @@ const props = defineProps({
 
 const emit = defineEmits(["close", "confirm"]);
 
-const editTitle = ref(props.title);
-const editXLabel = ref(props.xLabel);
-const editYLabel = ref(props.yLabel);
+const editProps = reactive({
+  title: "",
+  xLabel: "",
+  yLabel: ""
+});
 
 const modalStyle = computed(() => {
     return { display: props.open ? "block" : "none" };
 });
 
+watch(() => props.open, (newValue) => {
+  if (newValue) {
+    editProps.title = props.title;
+    editProps.xLabel = props.xLabel;
+    editProps.yLabel = props.yLabel;
+  }
+});
+
 const close = () => {
     emit("close");
 };
 
 const confirm = () => {
-    emit("confirm", editTitle.value, editXLabel.value, editYLabel.value);
+    emit("confirm", editProps.title, editProps.xLabel, editProps.yLabel);
     close();
 };
 </script>
diff --git a/app/static/src/app/store/appState/mutations.ts b/app/static/src/app/store/appState/mutations.ts
@@ -21,7 +21,8 @@ export enum AppStateMutation {
 export const StateUploadMutations = [
     AppStateMutation.ClearQueuedStateUpload,
     AppStateMutation.SetQueuedStateUpload,
-    AppStateMutation.SetStateUploadInProgress
+    AppStateMutation.SetStateUploadInProgress,
+    AppStateMutation.SetPersisted
 ] as string[];
 
 export const appStateMutations: MutationTree<AppState> = {