use download image mixin in sensitivity summary plot

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

@@ -1,14 +1,14 @@
 import {reactive, Ref, ref} from "vue";
-import {PlotlyDataLayoutConfig, RootOrData} from "plotly.js-basic-dist-min";
+import {Config, PlotlyDataLayoutConfig, RootOrData} from "plotly.js-basic-dist-min";
 import * as Plotly from "plotly.js-basic-dist-min";
 
 export interface DownloadPlotMixin {
     showDownloadImageModal: Ref<boolean>,
     plotlyContext: Ref<PlotlyDataLayoutConfig | null>,
     downloadImageProps: { title: string, xLabel: string, yLabel: string },
-    downloadImageClick: (gd: PlotlyDataLayoutConfig) => void,
     closeModal: () => void,
-    downloadImage: (title: string, xLabel: string, yLabel: string) => void
+    downloadImage: (title: string, xLabel: string, yLabel: string) => void,
+    config: Partial<Config>
 }
 
 export default (): DownloadPlotMixin => {
@@ -41,12 +41,27 @@ export default (): DownloadPlotMixin => {
         });
     };
 
+    const config = {
+        responsive: true,
+        modeBarButtons: [[{
+            name: "Custom Download",
+            icon: (Plotly as any).Icons.camera,
+            click: downloadImageClick
+        },
+            "zoom2d",
+            "pan2d",
+            "zoomIn2d",
+            "zoomOut2d",
+            "autoScale2d",
+            "resetScale2d"]]
+    } as Partial<Config>;
+
     return {
         showDownloadImageModal,
         plotlyContext,
         downloadImageProps,
-        downloadImageClick,
         closeModal,
-        downloadImage
+        downloadImage,
+        config
     };
 };

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

@@ -23,10 +23,10 @@ import {
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
 import {
-  newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config
+  newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout
 } from "plotly.js-basic-dist-min";
 import {
-    WodinPlotData, fadePlotStyle, margin, config
+    WodinPlotData, fadePlotStyle, margin
 } from "../../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphSettingsMutation } from "../../store/graphSettings/mutations";
@@ -67,9 +67,9 @@ export default defineComponent({
         const {
             showDownloadImageModal,
             downloadImageProps,
-            downloadImageClick,
             closeModal,
-            downloadImage
+            downloadImage,
+            config
         } = downloadPlot();
 
         const plotStyle = computed(() => (props.fadePlot ? fadePlotStyle : ""));
@@ -116,7 +116,7 @@ export default defineComponent({
             };
 
             const el = plot.value as HTMLElement;
-            await react(el, data, layout, config(downloadImageClick));
+            await react(el, data, layout, config);
         };
 
         const resize = () => {
@@ -141,14 +141,12 @@ export default defineComponent({
                         xaxis: { title: "Time" }
                     };
 
-                    const configCopy = config(downloadImageClick) as Partial<Config>;
-
                     if (lockYAxis.value && !toggleLogScale) {
                         layout.yaxis!.range = [...yAxisRange.value];
                         layout.yaxis!.autorange = false;
                     }
 
-                    newPlot(el as HTMLElement, baseData.value, layout, configCopy);
+                    newPlot(el as HTMLElement, baseData.value, layout, config);
 
                     if (!lockYAxis.value || toggleLogScale) {
                         updateAxesRange();
@@ -192,7 +190,6 @@ export default defineComponent({
             hasPlotData,
             closeModal,
             downloadImage,
-            downloadImageClick,
             showDownloadImageModal
         };
     }

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

@@ -7,6 +7,12 @@
     </div>
     <wodin-plot-data-summary :data="plotData"></wodin-plot-data-summary>
     <slot></slot>
+    <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>
 
@@ -17,8 +23,10 @@ import {
 } from "vue";
 import { AxisType, newPlot, Plots } from "plotly.js-basic-dist-min";
 import { useStore } from "vuex";
+import WodinPlotDownloadImageModal from "@/app/components/plot/WodinPlotDownloadImageModal.vue";
+import downloadPlot from "../mixins/downloadPlot";
 import {
-    config, fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName
+    fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName
 } from "../../plot";
 import { SensitivityPlotExtremePrefix, SensitivityPlotType, SensitivityScaleType } from "../../store/sensitivity/state";
 import { SensitivityMutation } from "../../store/sensitivity/mutations";
@@ -32,13 +40,21 @@ import { verifyValidPlotSettingsTime } from "./support";
 
 export default defineComponent({
     name: "SensitivitySummaryPlot",
-    components: { WodinPlotDataSummary },
+    components: { WodinPlotDownloadImageModal, WodinPlotDataSummary },
     props: {
         fadePlot: Boolean
     },
     setup(props) {
         const store = useStore();
         const namespace = "sensitivity";
+        const {
+            showDownloadImageModal,
+            downloadImageProps,
+            closeModal,
+            downloadImage,
+            config
+        } = downloadPlot();
+
         const plotStyle = computed(() => (props.fadePlot ? fadePlotStyle : ""));
         const plot = ref<null | HTMLElement>(null); // Picks up the element with 'plot' ref in the template
 
@@ -154,8 +170,7 @@ export default defineComponent({
                     yaxis: yAxisSettings.value,
                     xaxis: xAxisSettings.value
                 };
-                // TODO: sort this out! put the download stuff in a mixin
-                newPlot(el as HTMLElement, plotData.value, layout, config(() => {}));
+                newPlot(el as HTMLElement, plotData.value, layout, config);
                 resizeObserver = new ResizeObserver(resize);
                 resizeObserver.observe(plot.value as HTMLElement);
             }
@@ -175,9 +190,13 @@ export default defineComponent({
             placeholderMessage,
             plot,
             plotStyle,
+            downloadImageProps,
             plotData,
             hasPlotData,
-            resize
+            resize,
+            closeModal,
+            downloadImage,
+            showDownloadImageModal
         };
     }
 });

app/static/src/app/plot.ts

@@ -19,21 +19,6 @@ export const margin = {
     t: 25
 };
 
-export const config = (downloadClick: (gd: PlotlyDataLayoutConfig) => void) => ({
-    responsive: true,
-    modeBarButtons: [[{
-        name: "Custom Download",
-        icon: (Plotly as any).Icons.camera,
-        click: downloadClick
-    },
-    "zoom2d",
-    "pan2d",
-    "zoomIn2d",
-    "zoomOut2d",
-    "autoScale2d",
-    "resetScale2d"]]
-} as any);
-
 export function filterUserTypeSeriesSet(s: OdinUserTypeSeriesSet, param: string, names: string[]): OdinSeriesSet {
     const values = s.values.filter((v) => names.includes(v.name));
     const xValues = s.x.map((x) => x[param]);