From 7b7f8cd594ba24bdc289faf4cbaacda196bc46fd Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Wed, 9 Aug 2023 16:30:42 -0400
Subject: [PATCH 01/21] Update ui and plot state for plot display options

We will need to support the user being able to select whether or not to display
plot axes, scalar bars, titles, etc. Plots should also default to applying the
global range with the option to turn off. Add these options to the state.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/store/plot.js | 34 +++++++++++++++++++++++++++
 client/src/store/ui.js   | 50 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)

diff --git a/client/src/store/plot.js b/client/src/store/plot.js
index 9ddeac86..658239de 100644
--- a/client/src/store/plot.js
+++ b/client/src/store/plot.js
@@ -10,6 +10,9 @@ export default {
     times: null,
     loadedTimeStepData: null,
     availableTimeSteps: null,
+    xRange: null,
+    yRange: null,
+    colorRange: null,
   }),
   getters: {
     PLOT_LEGEND_VISIBILITY(state) {
@@ -42,6 +45,15 @@ export default {
     PLOT_AVAILABLE_TIME_STEPS(state) {
       return state.availableTimeSteps;
     },
+    PLOT_X_RANGE(state) {
+      return state.xRange;
+    },
+    PLOT_Y_RANGE(state) {
+      return state.yRange;
+    },
+    PLOT_COLOR_RANGE(state) {
+      return state.colorRange;
+    },
   },
   mutations: {
     PLOT_LEGEND_VISIBILITY_SET(state, val) {
@@ -71,6 +83,15 @@ export default {
     PLOT_AVAILABLE_TIME_STEPS_SET(state, val) {
       state.availableTimeSteps = val;
     },
+    PLOT_X_RANGE_SET(state, val) {
+      state.xRange = val;
+    },
+    PLOT_Y_RANGE_SET(state, val) {
+      state.yRange = val;
+    },
+    PLOT_COLOR_RANGE_SET(state, val) {
+      state.colorRange = val;
+    },
   },
   actions: {
     PLOT_DATA_RESET({ commit }) {
@@ -112,5 +133,18 @@ export default {
         commit("VIEW_TIME_STEP_SET", newCurr, { root: true });
       }
     },
+    PLOT_META_DATA_CHANGED({ commit, dispatch }, meta) {
+      dispatch("PLOT_AVAILABLE_TIME_STEPS_CHANGED", meta.steps);
+
+      if (meta?.x_range) {
+        commit("PLOT_X_RANGE_SET", meta.x_range);
+      }
+      if (meta?.y_range) {
+        commit("PLOT_Y_RANGE_SET", meta.y_range);
+      }
+      if (meta?.color_range) {
+        commit("PLOT_COLOR_RANGE_SET", meta.color_range);
+      }
+    },
   },
 };
diff --git a/client/src/store/ui.js b/client/src/store/ui.js
index c7ea0195..abbcc527 100644
--- a/client/src/store/ui.js
+++ b/client/src/store/ui.js
@@ -25,6 +25,11 @@ export default {
     boxSelector: null,
     showSettings: false,
     autoSavedViewDialogEnabled: true,
+    useRunGlobals: true,
+    showXAxis: false,
+    showYAxis: false,
+    showScalarBar: false,
+    showTitle: false,
   },
   getters: {
     UI_AUTO_SAVE_DIALOG(state) {
@@ -75,6 +80,21 @@ export default {
     UI_AUTO_SAVE_DIALOG_ENABLED(state) {
       return state.autoSavedViewDialogEnabled;
     },
+    UI_USE_RUN_GLOBALS(state) {
+      return state.useRunGlobals;
+    },
+    UI_SHOW_X_AXIS(state) {
+      return state.showXAxis;
+    },
+    UI_SHOW_Y_AXIS(state) {
+      return state.showYAxis;
+    },
+    UI_SHOW_SCALAR_BAR(state) {
+      return state.showScalarBar;
+    },
+    UI_SHOW_TITLE(state) {
+      return state.showTitle;
+    },
   },
   mutations: {
     UI_AUTO_SAVE_DIALOG_SET(state, val) {
@@ -122,6 +142,21 @@ export default {
     UI_AUTO_SAVE_DIALOG_ENABLED_SET(state, val) {
       state.autoSavedViewDialogEnabled = val;
     },
+    UI_USE_RUN_GLOBALS_SET(state, val) {
+      state.useRunGlobals = val;
+    },
+    UI_SHOW_X_AXIS_SET(state, val) {
+      state.showXAxis = val;
+    },
+    UI_SHOW_Y_AXIS_SET(state, val) {
+      state.showYAxis = val;
+    },
+    UI_SHOW_SCALAR_BAR_SET(state, val) {
+      state.showScalarBar = val;
+    },
+    UI_SHOW_TITLE(state, val) {
+      state.showTitle = val;
+    },
   },
   actions: {
     UI_TOGGLE_PLAY_PAUSE({ state }) {
@@ -136,5 +171,20 @@ export default {
     UI_TOGGLE_SHOW_SETTINGS({ state }) {
       state.showSettings = !state.showSettings;
     },
+    UI_TOGGLE_RUN_GLOBALS({ state }) {
+      state.useRunGlobals = !state.useRunGlobals;
+    },
+    UI_TOGGLE_X_AXIS({ state }) {
+      state.showXAxis = !state.showXAxis;
+    },
+    UI_TOGGLE_Y_AXIS({ state }) {
+      state.showYAxis = !state.showYAxis;
+    },
+    UI_TOGGLE_SCALAR_BAR({ state }) {
+      state.showScalarBar = !state.showScalarBar;
+    },
+    UI_TOGGLE_TITLE({ state }) {
+      state.showTitle = !state.showTitle;
+    },
   },
 };

From 061235f54639a323b25c2078d1dc8704d971601e Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Wed, 9 Aug 2023 16:52:51 -0400
Subject: [PATCH 02/21] Add toggle buttons for plot settings

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../widgets/SettingsPanel/script.js           | 25 ++++++
 .../widgets/SettingsPanel/template.html       | 82 +++++++++++++++++--
 2 files changed, 101 insertions(+), 6 deletions(-)

diff --git a/client/src/components/widgets/SettingsPanel/script.js b/client/src/components/widgets/SettingsPanel/script.js
index 6ae8bba8..24dcd8eb 100644
--- a/client/src/components/widgets/SettingsPanel/script.js
+++ b/client/src/components/widgets/SettingsPanel/script.js
@@ -17,6 +17,11 @@ export default {
       zoomSync: true,
       selectTimeStep: false,
       autoSavePrompt: true,
+      runGlobals: true,
+      xAxis: false,
+      yAxis: false,
+      scalarBar: false,
+      title: false,
     };
   },
 
@@ -37,6 +42,21 @@ export default {
     autoSavePrompt(status) {
       this.setAutoSaveDialogEnabled(status);
     },
+    runGlobals() {
+      this.toggleRunGlobals();
+    },
+    xAxis() {
+      this.toggleXAxis();
+    },
+    yAxis() {
+      this.toggleYAxis();
+    },
+    scalarBar() {
+      this.toggleScalarBar();
+    },
+    title() {
+      this.toggleTitle();
+    },
   },
 
   methods: {
@@ -45,6 +65,11 @@ export default {
       toggleSelectTimeStep: "UI_TOGGLE_TIME_STEP",
       fetchAllViews: "VIEWS_FETCH_ALL_AVAILABLE",
       toggleShowSettings: "UI_TOGGLE_SHOW_SETTINGS",
+      toggleRunGlobals: "UI_TOGGLE_RUN_GLOBALS",
+      toggleXAxis: "UI_TOGGLE_X_AXIS",
+      toggleYAxis: "UI_TOGGLE_Y_AXIS",
+      toggleScalarBar: "UI_TOGGLE_SCALAR_BAR",
+      toggleTitle: "UI_TOGGLE_TITLE",
     }),
     ...mapMutations({
       setPaused: "UI_PAUSE_GALLERY_SET",
diff --git a/client/src/components/widgets/SettingsPanel/template.html b/client/src/components/widgets/SettingsPanel/template.html
index 6171d163..a6284def 100644
--- a/client/src/components/widgets/SettingsPanel/template.html
+++ b/client/src/components/widgets/SettingsPanel/template.html
@@ -27,7 +27,7 @@
       <v-divider />
       <v-row>
         <v-col sm="6">
-          <v-tooltip left>
+          <v-tooltip left bottom>
             <template v-slot:activator="{on, attrs}">
               <div v-on="on" v-bind="attrs">
                 <v-switch v-model="zoomSync" label="Sync zoom" hide-details />
@@ -38,7 +38,7 @@
           </v-tooltip>
         </v-col>
         <v-col sm="6">
-          <v-tooltip right>
+          <v-tooltip left bottom>
             <template v-slot:activator="{on, attrs}">
               <div v-on="on" v-bind="attrs">
                 <v-switch
@@ -57,7 +57,7 @@
       <v-divider />
       <v-row>
         <v-col sm="12">
-          <v-tooltip left>
+          <v-tooltip left bottom>
             <template v-slot:activator="{on, attrs}">
               <div v-on="on" v-bind="attrs">
                 <v-switch label="View completed runs" hide-details disabled />
@@ -71,7 +71,7 @@
       <v-divider />
       <v-row>
         <v-col sm="12">
-          <v-tooltip left>
+          <v-tooltip left bottom>
             <template v-slot:activator="{on, attrs}">
               <div v-on="on" v-bind="attrs">
                 <v-switch
@@ -82,13 +82,83 @@
               </div>
             </template>
             <p class="mb-0">
-              {{autoSavePrompt ? "Do not show" : "Show"}} the prompt asking if
-              you would
+              {{autoSavePrompt ? "Hiding" : "Showing"}} the prompt asking if you
+              would
             </p>
             <p class="mb-0">like to load the last auto-saved layout.</p>
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-subheader> Plots </v-subheader>
+      <v-divider />
+      <v-row>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch dense v-model="xAxis" label="x-axis" hide-details />
+              </div>
+            </template>
+            <p class="mb-0">{{xAxis ? "Showing" : "Hiding"}} the x axis.</p>
+          </v-tooltip>
+        </v-col>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch dense v-model="yAxis" label="y-axis" hide-details />
+              </div>
+            </template>
+            <p class="mb-0">{{yAxis ? "Showing" : "Hiding"}} the y axis.</p>
+          </v-tooltip>
+        </v-col>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch
+                  dense
+                  v-model="scalarBar"
+                  label="scalar bar"
+                  hide-details
+                />
+              </div>
+            </template>
+            <p class="mb-0">
+              {{scalarBar ? "Showing" : "Hiding"}} the scalar bar.
+            </p>
+          </v-tooltip>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch dense v-model="title" label="title" hide-details />
+              </div>
+            </template>
+            <p class="mb-0">{{title ? "Showing" : "Hiding"}} the plot title.</p>
+          </v-tooltip>
+        </v-col>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch
+                  dense
+                  v-model="runGlobals"
+                  label="global values"
+                  hide-details
+                />
+              </div>
+            </template>
+            <p class="mb-0">
+              Using {{runGlobals ? "global" : "time step"}} ranges.
+            </p>
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-col>
   </div>
   <v-row class="ma-0 pa-0" :style="{height: '25px'}">

From ddfa9f29ab27eddca10648ec185a9dee09049a61 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Wed, 9 Aug 2023 17:01:53 -0400
Subject: [PATCH 03/21] Remove unused tooltip

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/core/App/script.js     | 34 --------------------
 client/src/components/core/App/template.html | 23 +------------
 2 files changed, 1 insertion(+), 56 deletions(-)

diff --git a/client/src/components/core/App/script.js b/client/src/components/core/App/script.js
index 936a9a50..fa12e490 100644
--- a/client/src/components/core/App/script.js
+++ b/client/src/components/core/App/script.js
@@ -32,10 +32,7 @@ export default {
       dataLoaded: false,
       forgotPasswordUrl: "/#?dialog=resetpassword",
       runId: null,
-      range: "",
-      pos: [],
       parameter: "",
-      cancel: false,
       showMenu: false,
       paramIsJson: false,
     };
@@ -84,37 +81,6 @@ export default {
       this.setPaused(should_pause);
     },
 
-    hoverOut() {
-      this.range = "";
-      this.cancel = true;
-    },
-
-    hoverIn: _.debounce(function (event) {
-      if (this.showMenu) return;
-
-      const node = event.target;
-      const parent = node ? node.parentNode : null;
-      if (
-        (parent && parent.classList.value.includes("pl-3")) ||
-        (node.classList.value.includes("pl-3") &&
-          node.textContent != parent.textContent)
-      ) {
-        this.parameter = node.textContent.trim();
-        this.cancel = false;
-        // this.getRangeData(event);
-      }
-    }, 100),
-
-    updateRange(yVals, event) {
-      this.pos = event ? [event.clientX, event.clientY] : this.pos;
-      this.range =
-        "[" +
-        Math.min(...yVals).toExponential(3) +
-        ", " +
-        Math.max(...yVals).toExponential(3) +
-        "]";
-    },
-
     updateTimeStep(val) {
       if (this.minTimeStep <= val && val <= this.maxTimeStep) {
         this.setCurrentTimeStep(parseInt(val));
diff --git a/client/src/components/core/App/template.html b/client/src/components/core/App/template.html
index d89778a1..4ffc7e07 100644
--- a/client/src/components/core/App/template.html
+++ b/client/src/components/core/App/template.html
@@ -14,23 +14,9 @@
         <v-col v-bind:style="{padding: '0 10px'}">
           <!-- Girder data table browser. -->
           <div class="girder-placeholder" v-if="!location" />
-          <div>
-            <v-tooltip
-              right
-              light
-              v-if="range"
-              :value="range"
-              :position-x="pos[0]"
-              :position-y="pos[1]"
-            >
-              <span v-if="range">{{range}}</span>
-            </v-tooltip>
-          </div>
           <girder-file-manager
             ref="girderFileManager"
             v-if="location && !showSettings"
-            v-on:mouseover.native="hoverIn($event)"
-            v-on:mouseout.native="hoverOut"
             :location.sync="location"
             :selectable="false"
             :drag-enabled="true"
@@ -42,7 +28,6 @@
             v-if="!showSettings"
             :fluid="true"
             class="playback-controls"
-            v-on:mouseover="hoverOut"
           >
             <v-row class="ma-0 pa-0" :style="{height: '25px'}">
               <v-slider
@@ -160,13 +145,7 @@
       </v-row>
     </pane>
     <!-- Scientific data on the right. -->
-    <pane
-      id="mainContent"
-      min-size="50"
-      :size="85"
-      class="main-content"
-      v-on:mouseover.native="hoverOut"
-    >
+    <pane id="mainContent" min-size="50" :size="85" class="main-content">
       <!-- image gallery grid. -->
       <render-window ref="renderWindow" id="renderWindow" class="plots" />
       <v-container v-bind:style="{padding: '0', maxWidth: '100%'}">

From 144c07c8467313636bbc85ee7fb95ec5da748a43 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Thu, 10 Aug 2023 16:22:29 -0400
Subject: [PATCH 04/21] Update Plotly plots to use user plot settings

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../components/widgets/PlotlyPlot/script.js   | 161 +++++++++++++-----
 1 file changed, 119 insertions(+), 42 deletions(-)

diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index 09e099c7..fba96ecd 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -55,11 +55,16 @@ export default {
       averagingValues: [],
       avgAnnotation: "",
       computingTimeAverage: false,
+      plotLabels: {},
     };
   },
 
   computed: {
     ...mapGetters({
+      xaxisVisible: "UI_SHOW_X_AXIS",
+      yaxisVisible: "UI_SHOW_Y_AXIS",
+      showTitle: "UI_SHOW_TITLE",
+      runGlobals: "UI_USE_RUN_GLOBALS",
       syncZoom: "UI_ZOOM_SYNC",
       timeStepSelectorMode: "UI_TIME_STEP_SELECTOR",
       currentTimeStep: "VIEW_TIME_STEP",
@@ -92,9 +97,24 @@ export default {
     xAxis() {
       return this.$store.getters[`${this.itemId}/PLOT_X_AXIS`] || null;
     },
+    xRange() {
+      return this.$store.getters[`${this.itemId}/PLOT_X_RANGE`] || null;
+    },
+    yRange() {
+      return this.$store.getters[`${this.itemId}/PLOT_Y_RANGE`] || null;
+    },
     zoom() {
       return this.$store.getters[`${this.itemId}/PLOT_ZOOM`] || null;
     },
+    localTimeStep() {
+      const ts = this.currentTimeStep;
+      if (this.availableTimeSteps.includes(ts)) {
+        return ts;
+      }
+      let idx = this.availableTimeSteps.findIndex((step) => step >= ts);
+      idx = Math.max((idx -= 1), 0);
+      return this.availableTimeSteps[idx];
+    },
   },
 
   watch: {
@@ -113,29 +133,37 @@ export default {
     legendVisibility: {
       immediate: true,
       handler(newVal, oldVal) {
-        let needRerender = !isEqual(newVal, oldVal);
-        this.react(needRerender);
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
       },
     },
     logScaling: {
       immediate: true,
       handler(newVal, oldVal) {
-        let needRerender = !isEqual(newVal, oldVal);
-        this.react(needRerender);
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
       },
     },
     range: {
       immediate: true,
       handler(newVal, oldVal) {
-        let needRerender = !isEqual(newVal, oldVal);
-        this.react(needRerender);
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
       },
     },
     zoom: {
       immediate: true,
       handler(newVal, oldVal) {
-        let needRerender = !isEqual(newVal, oldVal);
-        this.react(needRerender);
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
       },
     },
     itemId: {
@@ -163,6 +191,42 @@ export default {
         }
       },
     },
+    xaxisVisible: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
+      },
+    },
+    yaxisVisible: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
+      },
+    },
+    showTitle: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
+      },
+    },
+    runGlobals: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (isEqual(newVal, oldVal)) {
+          return;
+        }
+        this.react();
+      },
+    },
   },
 
   methods: {
@@ -199,55 +263,64 @@ export default {
       let xAxis = image.layout.xaxis.title.text;
       this.$store.commit(`${this.itemId}/PLOT_X_AXIS_SET`, xAxis);
     },
+    setPlotLabels(image) {
+      this.plotLabels = {
+        title: image.layout.title.text,
+        xaxis: image.layout.xaxis.title.text,
+        yaxis: image.layout.yaxis.title.text,
+      };
+    },
     applyLogScaling(image) {
       image.layout.xaxis.type = this.logScaling ? "log" : "linear";
       image.layout.yaxis.type = this.logScaling ? "log" : "linear";
     },
     applyZoom(image) {
-      image.layout.xaxis.range = this.zoom.xAxis;
-      image.layout.yaxis.range = this.zoom.yAxis;
+      image.layout.xaxis.range = this.zoom.xaxis;
+      image.layout.yaxis.range = this.zoom.yaxis;
       image.layout.yaxis.autorange = false;
     },
     useGlobalRange(image) {
       image.layout.yaxis.range = [...this.range];
       image.layout.yaxis.autorange = false;
     },
+    useRunGlobals(image) {
+      if (this.logScaling || this.zoom) {
+        return;
+      }
+
+      image.layout.xaxis.range = [...this.xRange];
+      image.layout.xaxis.autorange = false;
+      image.layout.yaxis.range = [...this.yRange];
+      image.layout.yaxis.autorange = false;
+    },
+    updatePlotDetails(image) {
+      ["xaxis", "yaxis"].forEach((axis) => {
+        image.layout[`${axis}`].title.text = this[`${axis}Visible`]
+          ? this.plotLabels[`${axis}`]
+          : "";
+        image.layout[`${axis}`].showticklabels = this[`${axis}Visible`];
+      });
+      image.layout.title.text = this.showTitle ? this.plotLabels.title : "";
+      image.layout.margin.b = this.xaxisVisible ? 30 : 10;
+      image.layout.margin.l = this.yaxisVisible ? 60 : 10;
+      image.layout.margin.t = this.showTitle ? 30 : 10;
+    },
     plotPreProcessing(image) {
       if (!this.xAxis) this.setXAxis(image);
+      if (!this.plotLabels.title) this.setPlotLabels(image);
       this.applyLogScaling(image);
       image.layout.yaxis.autorange = true;
       image.layout.showlegend = this.legendVisibility;
-      if (this.zoom) this.applyZoom(image);
       if (this.range) this.useGlobalRange(image);
+      if (this.runGlobals) this.useRunGlobals(image);
+      if (this.zoom) this.applyZoom(image);
       this.setAnnotations(image.data[0]);
+      this.updatePlotDetails(image);
     },
-    getNextImage(timeStep) {
-      // Grab the data for the current time step
+    findImage() {
       let nextImage = this.loadedTimeStepData.find(
-        (img) => img.timestep == timeStep,
+        (img) => img.timestep == this.localTimeStep,
       );
-
-      // If no data is available for the current time step, find the most
-      // recent previous time step that does have data and display that instead
-      const ats = this.availableTimeSteps;
-      if (
-        !this.timeAverage &&
-        isNil(nextImage) &&
-        this.loadedTimeStepData.length >= 1
-      ) {
-        let idx = ats.findIndex((step) => step >= timeStep);
-        // Use the data for the first time step available if the current time
-        // step is before the first available for this variable
-        idx = Math.max((idx -= 1), 0);
-        let prevTimeStep = ats[idx];
-        nextImage = this.loadedTimeStepData.find(
-          (img) => img.timestep === prevTimeStep,
-        );
-      }
-      return nextImage;
-    },
-    findImage() {
-      let nextImage = this.getNextImage(this.currentTimeStep);
       if (!this.timeAverage) {
         this.avgAnnotation = "";
         if (!isEmpty(this.averagingValues)) {
@@ -259,7 +332,6 @@ export default {
           Math.max(...this.availableTimeSteps),
         );
         this.avgAnnotation = `Averaging Over Time Steps ${this.currentTimeStep} - ${end}`;
-        // call getNextImage for each time step in range
         this.averagingValues = [];
         for (
           let i = this.currentTimeStep;
@@ -267,7 +339,9 @@ export default {
           i++
         ) {
           if (this.availableTimeSteps.includes(i)) {
-            nextImage = this.getNextImage(i);
+            nextImage = this.loadedTimeStepData.find(
+              (img) => img.timestep == i,
+            );
             if (!isNil(nextImage)) {
               nextImage.data.forEach((data, idx) => {
                 // append y data to 2d array
@@ -298,7 +372,7 @@ export default {
       }
       return nextImage;
     },
-    react: function (needRerender = false) {
+    react: function () {
       if (!this.itemId) {
         return;
       }
@@ -309,8 +383,7 @@ export default {
       const plotReadyForUpdate =
         !isNil(nextImage) &&
         !isNil(this.$refs.plotly) &&
-        nextImage.type === PlotType.Plotly &&
-        (this.lastLoadedTimeStep !== nextImage.timestep || needRerender);
+        nextImage.type === PlotType.Plotly;
       if (plotReadyForUpdate) {
         this.lastLoadedTimeStep = nextImage.timestep;
         this.plotPreProcessing(nextImage);
@@ -342,7 +415,11 @@ export default {
     },
     setEventHandlers() {
       this.$refs.plotly.on("plotly_relayout", (eventdata) => {
-        if (!eventdata["xaxis.range[0]"] || !eventdata["yaxis.range[0]"]) {
+        if (
+          this.runGlobals ||
+          !eventdata["xaxis.range[0]"] ||
+          !eventdata["yaxis.range[0]"]
+        ) {
           return;
         }
         let zoomRange = parseZoomValues(eventdata, this.range);

From 66563916402296bb2c046991b8e705b2df12db00 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Thu, 10 Aug 2023 16:29:41 -0400
Subject: [PATCH 05/21] Fetch all metadata not just time steps

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/widgets/Plots/script.js | 14 ++++++--------
 fastapi/app/api/api_v1/endpoints/variables.py | 13 ++++++++++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index 106aef63..84f2fffa 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -97,7 +97,8 @@ export default {
         if (this.itemId) {
           this.plotFetcher = new PlotFetcher(
             this.itemId,
-            (itemId) => this.callFastEndpoint(`variables/${itemId}/timesteps`),
+            (itemId) =>
+              this.callFastEndpoint(`variables/${itemId}/timesteps/meta`),
             (itemId, timestep) =>
               this.callFastEndpoint(
                 `variables/${itemId}/timesteps/${timestep}/plot`,
@@ -141,15 +142,12 @@ export default {
       setShouldAutoSave: "VIEWS_AUTO_SAVE_RUN_SET",
       updateNumReady: "VIEW_NUM_READY_SET",
     }),
-    setAvailableTimeSteps: function (steps) {
+    setMetaData: function (meta) {
       if (!this.itemId) {
         return;
       }
 
-      this.$store.dispatch(
-        `${this.itemId}/PLOT_AVAILABLE_TIME_STEPS_CHANGED`,
-        steps,
-      );
+      this.$store.dispatch(`${this.itemId}/PLOT_META_DATA_CHANGED`, meta);
     },
     setLoadedTimeStepData: function (loaded) {
       this.$store.commit(`${this.itemId}/PLOT_LOADED_TIME_STEPS_SET`, loaded);
@@ -261,8 +259,8 @@ export default {
       const firstAvailableStep = await this.plotFetcher
         .initialize()
         .then((response) => {
+          this.setMetaData(response);
           ats = response.steps.sort((a, b) => a - b);
-          this.setAvailableTimeSteps(ats);
           this.updateTimes(response.time);
           // Make sure there is an image associated with this time step
           let step = ats.find((step) => step === this.currentTimeStep);
@@ -421,7 +419,7 @@ export default {
     },
     clearGallery() {
       this.updateVisiblePlots({ newId: null, oldId: this.itemId });
-      this.setAvailableTimeSteps([]);
+      this.setMetaData({});
       this.itemId = "";
       this.setInitialLoad(true);
     },
diff --git a/fastapi/app/api/api_v1/endpoints/variables.py b/fastapi/app/api/api_v1/endpoints/variables.py
index f8e7f636..6475090b 100644
--- a/fastapi/app/api/api_v1/endpoints/variables.py
+++ b/fastapi/app/api/api_v1/endpoints/variables.py
@@ -126,14 +126,21 @@ async def generate_plot_data(bp, variable: str):
     raise HTTPException(status_code=400, detail="Unsupported plot type.")
 
 
-@router.get("/{variable_id}/timesteps")
+@router.get("/{variable_id}/timesteps/meta")
 async def get_timesteps(variable_id: str, girder_token: str = Header(None)):
     gc = get_girder_client(girder_token)
 
     item = gc.getItem(variable_id)
-    meta = item["meta"]
+    meta = {"steps": item["meta"]["timesteps"], "time": item["meta"]["time"]}
 
-    return {"steps": meta["timesteps"], "time": meta["time"]}
+    if x_range := item["meta"].get("x_range", None):
+        meta["x_range"] = x_range
+    if y_range := item["meta"].get("y_range", None):
+        meta["y_range"] = y_range
+    if color_range := item["meta"].get("color_range", None):
+        meta["color_range"] = color_range
+
+    return meta
 
 
 # variable_id => Girder item id for item used to represent the variable.

From 2bd4f37cf5f4ba79c30c83e18c1bda570eab3c9b Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Thu, 10 Aug 2023 16:31:40 -0400
Subject: [PATCH 06/21] Move toggle legend to settings panel

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../src/components/widgets/LoadDialog/script.js |  1 -
 .../src/components/widgets/PlotlyPlot/script.js | 17 +----------------
 client/src/components/widgets/Plots/script.js   |  4 ----
 .../components/widgets/SettingsPanel/script.js  |  5 +++++
 .../widgets/SettingsPanel/template.html         | 12 ++++++++++++
 client/src/store/plot.js                        |  8 --------
 client/src/store/ui.js                          | 12 +++++++++++-
 client/src/store/views.js                       |  3 +--
 fastapi/app/api/api_v1/endpoints/images.py      |  2 --
 9 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/client/src/components/widgets/LoadDialog/script.js b/client/src/components/widgets/LoadDialog/script.js
index afebf2ff..f709a7a4 100644
--- a/client/src/components/widgets/LoadDialog/script.js
+++ b/client/src/components/widgets/LoadDialog/script.js
@@ -107,7 +107,6 @@ export default {
             log: data ? value.log : false,
             xAxis: data ? value.xAxis : "",
             range: data ? value.range : null,
-            legend: data ? value.legend : false,
           };
         }
       }
diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index fba96ecd..5e009b29 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -64,6 +64,7 @@ export default {
       xaxisVisible: "UI_SHOW_X_AXIS",
       yaxisVisible: "UI_SHOW_Y_AXIS",
       showTitle: "UI_SHOW_TITLE",
+      legendVisibility: "UI_SHOW_LEGEND",
       runGlobals: "UI_USE_RUN_GLOBALS",
       syncZoom: "UI_ZOOM_SYNC",
       timeStepSelectorMode: "UI_TIME_STEP_SELECTOR",
@@ -77,11 +78,6 @@ export default {
         this.$store.getters[`${this.itemId}/PLOT_AVAILABLE_TIME_STEPS`] || []
       );
     },
-    legendVisibility() {
-      return (
-        this.$store.getters[`${this.itemId}/PLOT_LEGEND_VISIBILITY`] || false
-      );
-    },
     loadedTimeStepData() {
       return this.$store.getters[`${this.itemId}/PLOT_LOADED_TIME_STEPS`] || [];
     },
@@ -401,11 +397,6 @@ export default {
               icon: Plotly.Icons["3d_rotate"],
               click: this.toggleLogScale,
             },
-            {
-              name: "toggle legend visibility",
-              icon: Plotly.Icons["tooltip_basic"],
-              click: this.toggleLegendVisibility,
-            },
           ],
           modeBarButtonsToRemove: ["toImage"],
         });
@@ -497,12 +488,6 @@ export default {
         !this.logScaling,
       );
     },
-    toggleLegendVisibility() {
-      this.$store.commit(
-        `${this.itemId}/PLOT_LEGEND_VISIBILITY_SET`,
-        !this.legendVisibility,
-      );
-    },
   },
 
   mounted() {
diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index 84f2fffa..d14203c7 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -159,9 +159,6 @@ export default {
 
       this.$store.commit(`${this.itemId}/PLOT_TIMES_SET`, times);
     },
-    updatePlotLegendVisibility: function (legend) {
-      this.$store.commit(`${this.itemId}/PLOT_LEGEND_VISIBILITY_SET`, legend);
-    },
     updatePlotLogScaling: function (log) {
       this.$store.commit(`${this.itemId}/PLOT_LOG_SCALING_SET`, log);
     },
@@ -317,7 +314,6 @@ export default {
       this.itemId = item.id || "";
       this.updateRegisteredModules(oldId);
       this.updateVisiblePlots({ newId: this.itemId, oldId });
-      this.updatePlotLegendVisibility(item.legend);
       this.updatePlotLogScaling(item.log);
       this.updatePlotXAxis(item.xAxis);
       this.updatePlotZoom(item.zoom);
diff --git a/client/src/components/widgets/SettingsPanel/script.js b/client/src/components/widgets/SettingsPanel/script.js
index 24dcd8eb..eba88d80 100644
--- a/client/src/components/widgets/SettingsPanel/script.js
+++ b/client/src/components/widgets/SettingsPanel/script.js
@@ -22,6 +22,7 @@ export default {
       yAxis: false,
       scalarBar: false,
       title: false,
+      legend: false,
     };
   },
 
@@ -57,6 +58,9 @@ export default {
     title() {
       this.toggleTitle();
     },
+    legend() {
+      this.toggleLegend();
+    },
   },
 
   methods: {
@@ -70,6 +74,7 @@ export default {
       toggleYAxis: "UI_TOGGLE_Y_AXIS",
       toggleScalarBar: "UI_TOGGLE_SCALAR_BAR",
       toggleTitle: "UI_TOGGLE_TITLE",
+      toggleLegend: "UI_TOGGLE_LEGEND",
     }),
     ...mapMutations({
       setPaused: "UI_PAUSE_GALLERY_SET",
diff --git a/client/src/components/widgets/SettingsPanel/template.html b/client/src/components/widgets/SettingsPanel/template.html
index a6284def..fc376c37 100644
--- a/client/src/components/widgets/SettingsPanel/template.html
+++ b/client/src/components/widgets/SettingsPanel/template.html
@@ -141,6 +141,18 @@
             <p class="mb-0">{{title ? "Showing" : "Hiding"}} the plot title.</p>
           </v-tooltip>
         </v-col>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch dense v-model="legend" label="legend" hide-details />
+              </div>
+            </template>
+            <p class="mb-0">
+              {{legend ? "Showing" : "Hiding"}} the plot legend.
+            </p>
+          </v-tooltip>
+        </v-col>
         <v-col>
           <v-tooltip left bottom>
             <template v-slot:activator="{on, attrs}">
diff --git a/client/src/store/plot.js b/client/src/store/plot.js
index 658239de..0fb134c4 100644
--- a/client/src/store/plot.js
+++ b/client/src/store/plot.js
@@ -1,7 +1,6 @@
 export default {
   namespaced: true,
   state: () => ({
-    legend: false,
     log: false,
     range: null,
     timeAverage: 0,
@@ -15,9 +14,6 @@ export default {
     colorRange: null,
   }),
   getters: {
-    PLOT_LEGEND_VISIBILITY(state) {
-      return state.legend;
-    },
     PLOT_LOG_SCALING(state) {
       return state.log;
     },
@@ -56,9 +52,6 @@ export default {
     },
   },
   mutations: {
-    PLOT_LEGEND_VISIBILITY_SET(state, val) {
-      state.legend = val;
-    },
     PLOT_LOG_SCALING_SET(state, val) {
       state.log = val;
     },
@@ -95,7 +88,6 @@ export default {
   },
   actions: {
     PLOT_DATA_RESET({ commit }) {
-      commit("PLOT_LEGEND_VISIBILITY_SET", false);
       commit("PLOT_LOG_SCALING_SET", false);
       commit("PLOT_GLOBAL_RANGE_SET", null);
       commit("PLOT_TIME_AVERAGE_SET", 0);
diff --git a/client/src/store/ui.js b/client/src/store/ui.js
index abbcc527..5c993ff0 100644
--- a/client/src/store/ui.js
+++ b/client/src/store/ui.js
@@ -30,6 +30,7 @@ export default {
     showYAxis: false,
     showScalarBar: false,
     showTitle: false,
+    showLegend: false,
   },
   getters: {
     UI_AUTO_SAVE_DIALOG(state) {
@@ -95,6 +96,9 @@ export default {
     UI_SHOW_TITLE(state) {
       return state.showTitle;
     },
+    UI_SHOW_LEGEND(state) {
+      return state.showLegend;
+    },
   },
   mutations: {
     UI_AUTO_SAVE_DIALOG_SET(state, val) {
@@ -154,9 +158,12 @@ export default {
     UI_SHOW_SCALAR_BAR_SET(state, val) {
       state.showScalarBar = val;
     },
-    UI_SHOW_TITLE(state, val) {
+    UI_SHOW_TITLE_SET(state, val) {
       state.showTitle = val;
     },
+    UI_SHOW_LEGEND_SET(state, val) {
+      state.showLegend = val;
+    },
   },
   actions: {
     UI_TOGGLE_PLAY_PAUSE({ state }) {
@@ -186,5 +193,8 @@ export default {
     UI_TOGGLE_TITLE({ state }) {
       state.showTitle = !state.showTitle;
     },
+    UI_TOGGLE_LEGEND({ state }) {
+      state.showLegend = !state.showLegend;
+    },
   },
 };
diff --git a/client/src/store/views.js b/client/src/store/views.js
index 676d1179..19e8fcf2 100644
--- a/client/src/store/views.js
+++ b/client/src/store/views.js
@@ -168,11 +168,10 @@ export default {
       layout.forEach((item) => {
         const { row, col, itemId } = item;
         if (itemId) {
-          const { legend, log, range, xAxis, zoom } =
+          const { log, range, xAxis, zoom } =
             getters[`${itemId}/PLOT_DATA_COMPLETE`];
           items[`${row}::${col}`] = {
             id: itemId,
-            legend,
             log,
             range,
             xAxis,
diff --git a/fastapi/app/api/api_v1/endpoints/images.py b/fastapi/app/api/api_v1/endpoints/images.py
index 7ad31c77..194c3fe5 100644
--- a/fastapi/app/api/api_v1/endpoints/images.py
+++ b/fastapi/app/api/api_v1/endpoints/images.py
@@ -58,8 +58,6 @@ def create_plotly_image(plot_data: dict, format: str, details: dict):
     plot_data["layout"]["xaxis"]["automargin"] = True
     plot_data["layout"]["yaxis"]["automargin"] = True
     plot_data["layout"]["title"]["x"] = 0.5
-    # TODO: Find the best solution for legends that take up too much space
-    # plot_data["layout"]["showlegend"] = False
     plot_data["layout"].pop("name", None)
     plot_data["layout"].pop("frames", None)
     if details:

From 14140b788a4cfd292b7d8e6e6d43e1242b118443 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Thu, 10 Aug 2023 17:05:01 -0400
Subject: [PATCH 07/21] Move log scaling to context menu

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../components/widgets/ContextMenu/script.js    | 17 +++++++++++++++++
 .../widgets/ContextMenu/template.html           |  5 +++++
 .../src/components/widgets/PlotlyPlot/script.js | 14 --------------
 client/src/store/views.js                       | 11 +++++------
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/client/src/components/widgets/ContextMenu/script.js b/client/src/components/widgets/ContextMenu/script.js
index 7fbb3451..cc68d624 100644
--- a/client/src/components/widgets/ContextMenu/script.js
+++ b/client/src/components/widgets/ContextMenu/script.js
@@ -88,6 +88,15 @@ export default {
         this.$store.getters[`${this.itemInfo?.id}/PLOT_DATA_COMPLETE`] || {}
       );
     },
+    logScaling() {
+      if (!this.itemInfo?.id) {
+        return false;
+      }
+
+      return (
+        this.$store.getters[`${this.itemInfo?.id}/PLOT_LOG_SCALING`] || false
+      );
+    },
   },
 
   methods: {
@@ -189,5 +198,13 @@ export default {
       const xAxis = this.itemInfo?.xAxis || "";
       return !xAxis.toLowerCase().includes("time") && this.itemInfo?.isPlotly;
     },
+    toggleLogScale() {
+      if (this.itemInfo?.id) {
+        this.$store.commit(
+          `${this.itemInfo.id}/PLOT_LOG_SCALING_SET`,
+          !this.logScaling,
+        );
+      }
+    },
   },
 };
diff --git a/client/src/components/widgets/ContextMenu/template.html b/client/src/components/widgets/ContextMenu/template.html
index 4afe9253..cb59779a 100644
--- a/client/src/components/widgets/ContextMenu/template.html
+++ b/client/src/components/widgets/ContextMenu/template.html
@@ -12,6 +12,11 @@
         <v-list-item dense @click="showRangeDialog=true">
           <v-list-item-title> Set global range </v-list-item-title>
         </v-list-item>
+        <v-list-item dense @click="toggleLogScale()">
+          <v-list-item-title>
+            {{logScaling ? "Clear" : "Apply"}} log scaling</v-list-item-title
+          >
+        </v-list-item>
       </v-list>
       <v-divider v-if="itemInfo && itemInfo.isPlotly" />
       <v-list>
diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index 5e009b29..474ece52 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -391,14 +391,6 @@ export default {
         };
         Plotly.react(this.$refs.plotly, nextImage.data, layout, {
           autosize: true,
-          modeBarButtonsToAdd: [
-            {
-              name: "toggle log scaling",
-              icon: Plotly.Icons["3d_rotate"],
-              click: this.toggleLogScale,
-            },
-          ],
-          modeBarButtonsToRemove: ["toImage"],
         });
         if (!this.eventHandlersSet) this.setEventHandlers();
         this.updateNumReady(this.numReady + 1);
@@ -482,12 +474,6 @@ export default {
       const [x0, x1, y0, y1] = range.map((r) => r.toPrecision(4));
       this.rangeText = `xRange: [${x0}, ${x1}] yRange: [${y0}, ${y1}]`;
     },
-    toggleLogScale() {
-      this.$store.commit(
-        `${this.itemId}/PLOT_LOG_SCALING_SET`,
-        !this.logScaling,
-      );
-    },
   },
 
   mounted() {
diff --git a/client/src/store/views.js b/client/src/store/views.js
index 19e8fcf2..6934536f 100644
--- a/client/src/store/views.js
+++ b/client/src/store/views.js
@@ -168,14 +168,13 @@ export default {
       layout.forEach((item) => {
         const { row, col, itemId } = item;
         if (itemId) {
-          const { log, range, xAxis, zoom } =
-            getters[`${itemId}/PLOT_DATA_COMPLETE`];
+          const plotData = getters[`${itemId}/PLOT_DATA_COMPLETE`];
           items[`${row}::${col}`] = {
             id: itemId,
-            log,
-            range,
-            xAxis,
-            zoom,
+            log: plotData?.log || false,
+            range: plotData?.range || null,
+            xAxis: plotData?.xAxis || "",
+            zoom: plotData?.zoom || null,
           };
         }
       });

From 30d4f11746a46befc1a3ef885b6b5f670a712088 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Thu, 10 Aug 2023 17:05:53 -0400
Subject: [PATCH 08/21] Hide modebar for Plotly plots

The toggle option is now in the settings panel and log scaling has been moved
to the context menu so there is no longer a need for the modebar. Hide it to
keep plot types (Plotly vs VTK) more in sync.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/scss/gallery.scss | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/client/src/scss/gallery.scss b/client/src/scss/gallery.scss
index 0cee2e7f..44c27b7c 100755
--- a/client/src/scss/gallery.scss
+++ b/client/src/scss/gallery.scss
@@ -126,15 +126,8 @@
 // Make sure toolbar doesn't cover plot title
 // when visible
 .show-toolbar {
-  .modebar-container {
-    display: flex;
-    height: auto;
-    div {
-      height: auto;
-    }
-  }
   .modebar {
-    top: 20px !important;
+    display: none;
   }
 }
 

From 972bafe27178467796703aa744ac8ed0698edd46 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 11 Aug 2023 17:48:44 -0400
Subject: [PATCH 09/21] Remember user settings after panel is toggled

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../widgets/SettingsPanel/script.js           | 119 ++++++++++++------
 1 file changed, 80 insertions(+), 39 deletions(-)

diff --git a/client/src/components/widgets/SettingsPanel/script.js b/client/src/components/widgets/SettingsPanel/script.js
index eba88d80..4e86832b 100644
--- a/client/src/components/widgets/SettingsPanel/script.js
+++ b/client/src/components/widgets/SettingsPanel/script.js
@@ -14,15 +14,6 @@ export default {
     return {
       showSaveDialog: false,
       showLoadDialog: false,
-      zoomSync: true,
-      selectTimeStep: false,
-      autoSavePrompt: true,
-      runGlobals: true,
-      xAxis: false,
-      yAxis: false,
-      scalarBar: false,
-      title: false,
-      legend: false,
     };
   },
 
@@ -33,36 +24,6 @@ export default {
     },
   },
 
-  watch: {
-    zoomSync() {
-      this.toggleSyncZoom();
-    },
-    selectTimeStep() {
-      this.toggleSelectTimeStep();
-    },
-    autoSavePrompt(status) {
-      this.setAutoSaveDialogEnabled(status);
-    },
-    runGlobals() {
-      this.toggleRunGlobals();
-    },
-    xAxis() {
-      this.toggleXAxis();
-    },
-    yAxis() {
-      this.toggleYAxis();
-    },
-    scalarBar() {
-      this.toggleScalarBar();
-    },
-    title() {
-      this.toggleTitle();
-    },
-    legend() {
-      this.toggleLegend();
-    },
-  },
-
   methods: {
     ...mapActions({
       toggleSyncZoom: "UI_TOGGLE_ZOOM_SYNC",
@@ -96,6 +57,14 @@ export default {
 
   computed: {
     ...mapGetters({
+      showLegend: "UI_SHOW_LEGEND",
+      showScalarBar: "UI_SHOW_SCALAR_BAR",
+      showYAxis: "UI_SHOW_Y_AXIS",
+      showXAxis: "UI_SHOW_X_AXIS",
+      useRunGlobals: "UI_USE_RUN_GLOBALS",
+      showAutoSaveDialog: "UI_AUTO_SAVE_DIALOG_ENABLED",
+      syncZoom: "UI_ZOOM_SYNC",
+      showTitle: "UI_SHOW_TITLE",
       showSettings: "UI_SHOW_SETTINGS",
       timeStepSelectorMode: "UI_TIME_STEP_SELECTOR",
       lastSaved: "VIEWS_LAST_SAVED",
@@ -105,5 +74,77 @@ export default {
       simulation: "VIEWS_SIMULATION",
       step: "VIEW_TIME_STEP",
     }),
+    zoomSync: {
+      get() {
+        return this.syncZoom;
+      },
+      set() {
+        this.toggleSyncZoom();
+      },
+    },
+    selectTimeStep: {
+      get() {
+        return this.timeStepSelectorMode;
+      },
+      set() {
+        this.toggleSelectTimeStep();
+      },
+    },
+    autoSavePrompt: {
+      get() {
+        return this.showAutoSaveDialog;
+      },
+      set(val) {
+        this.setAutoSaveDialogEnabled(val);
+      },
+    },
+    runGlobals: {
+      get() {
+        return this.useRunGlobals;
+      },
+      set() {
+        this.toggleRunGlobals();
+      },
+    },
+    xAxis: {
+      get() {
+        return this.showXAxis;
+      },
+      set() {
+        this.toggleXAxis();
+      },
+    },
+    yAxis: {
+      get() {
+        return this.showYAxis;
+      },
+      set() {
+        this.toggleYAxis();
+      },
+    },
+    scalarBar: {
+      get() {
+        return this.showScalarBar;
+      },
+      set() {
+        this.toggleScalarBar();
+      },
+    },
+    legend: {
+      get() {
+        return this.showLegend;
+      },
+      set() {
+        this.toggleLegend();
+      },
+    },
+    title: {
+      get() {
+        return this.showTitle;
+      },
+      set() {
+        this.toggleTitle();
+      },
+    },
   },
 };

From 34f876a4f3a3c775419a1babccc2b26350e60f61 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 18 Aug 2023 13:30:33 -0400
Subject: [PATCH 10/21] Add tooltip with range information

The tooltip will appear on hover over the information icon in the lower right
corner. Range information is only shown for axes/scalar bars that are hidden.
The Settings panel contains an option to disable this tooltip altogether.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../components/widgets/PlotlyPlot/script.js   | 24 +++++++--
 .../widgets/PlotlyPlot/template.html          | 24 +++++++++
 .../widgets/SettingsPanel/script.js           | 10 ++++
 .../widgets/SettingsPanel/template.html       | 19 +++++++
 .../src/components/widgets/VTKPlot/script.js  | 49 +++++++++++++++++++
 .../components/widgets/VTKPlot/template.html  | 29 +++++++++++
 client/src/store/ui.js                        |  7 +++
 7 files changed, 157 insertions(+), 5 deletions(-)

diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index 474ece52..d78a76ad 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -56,11 +56,13 @@ export default {
       avgAnnotation: "",
       computingTimeAverage: false,
       plotLabels: {},
+      currentRange: null,
     };
   },
 
   computed: {
     ...mapGetters({
+      enableRangeTooltip: "UI_SHOW_RANGE_TOOLTIP",
       xaxisVisible: "UI_SHOW_X_AXIS",
       yaxisVisible: "UI_SHOW_Y_AXIS",
       showTitle: "UI_SHOW_TITLE",
@@ -310,6 +312,11 @@ export default {
       if (this.range) this.useGlobalRange(image);
       if (this.runGlobals) this.useRunGlobals(image);
       if (this.zoom) this.applyZoom(image);
+      const data = image.data[0];
+      const xRange = [Math.min(...data.x), Math.max(...data.y)];
+      let yRange = this.range;
+      if (!yRange) yRange = [Math.min(...data.y), Math.max(...data.y)];
+      this.currentRange = [...xRange, ...yRange];
       this.setAnnotations(image.data[0]);
       this.updatePlotDetails(image);
     },
@@ -467,13 +474,20 @@ export default {
         this.rangeText = "";
         return;
       }
-      const xRange = [data.x[0], data.x[data.x.length - 1]];
-      let yRange = this.range;
-      if (!yRange) yRange = [Math.min(...data.y), Math.max(...data.y)];
-      const range = [...xRange, ...yRange];
-      const [x0, x1, y0, y1] = range.map((r) => r.toPrecision(4));
+      const [x0, x1, y0, y1] = this.currentRange.map((r) => r.toPrecision(4));
       this.rangeText = `xRange: [${x0}, ${x1}] yRange: [${y0}, ${y1}]`;
     },
+    tooltipText() {
+      let [x0, x1] = this.xRange;
+      let [y0, y1] = this.yRange;
+      if (!this.runGlobals && this.currentRange) {
+        [x0, x1, y0, y1] = this.currentRange;
+      }
+      return {
+        x: `[${x0.toExponential(3)}, ${x1.toExponential(3)}]`,
+        y: `[${y0.toExponential(3)}, ${y1.toExponential(3)}]`,
+      };
+    },
   },
 
   mounted() {
diff --git a/client/src/components/widgets/PlotlyPlot/template.html b/client/src/components/widgets/PlotlyPlot/template.html
index 426a87ff..a0527e8d 100644
--- a/client/src/components/widgets/PlotlyPlot/template.html
+++ b/client/src/components/widgets/PlotlyPlot/template.html
@@ -1,4 +1,28 @@
 <div ref="plotly" class="plot">
+  <v-menu
+    v-if="enableRangeTooltip"
+    open-on-hover
+    offset-y
+    left
+    top
+    :close-on-content-click="false"
+    min-width="fit-content"
+    height="fit-content"
+  >
+    <template v-slot:activator="{ on }">
+      <v-icon v-on="on" :style="{position: 'absolute', right: '0', bottom: '0'}"
+        >mdi-information-variant</v-icon
+      >
+    </template>
+    <v-list>
+      <v-list-item dense v-if="!xaxisVisible">
+        <v-list-item-title>X Range: {{tooltipText().x}}</v-list-item-title>
+      </v-list-item>
+      <v-list-item dense v-if="!yaxisVisible">
+        <v-list-item-title>Y Range: {{tooltipText().y}}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
   <annotations
     v-if="rangeText.length"
     :text="rangeText"
diff --git a/client/src/components/widgets/SettingsPanel/script.js b/client/src/components/widgets/SettingsPanel/script.js
index 4e86832b..e402da2e 100644
--- a/client/src/components/widgets/SettingsPanel/script.js
+++ b/client/src/components/widgets/SettingsPanel/script.js
@@ -43,6 +43,7 @@ export default {
       setSaveDialogVisible: "UI_SHOW_SAVE_DIALOG_SET",
       toggleSettingsVisibility: "UI_SHOW_SETTINGS_SET",
       setAutoSaveDialogEnabled: "UI_AUTO_SAVE_DIALOG_ENABLED_SET",
+      setRangeTooltipEnabled: "UI_SHOW_RANGE_TOOLTIP_SET",
     }),
     async saveView() {
       await this.fetchAllViews();
@@ -57,6 +58,7 @@ export default {
 
   computed: {
     ...mapGetters({
+      enableRangeTooltip: "UI_SHOW_RANGE_TOOLTIP",
       showLegend: "UI_SHOW_LEGEND",
       showScalarBar: "UI_SHOW_SCALAR_BAR",
       showYAxis: "UI_SHOW_Y_AXIS",
@@ -146,5 +148,13 @@ export default {
         this.toggleTitle();
       },
     },
+    rangeInfo: {
+      get() {
+        return this.enableRangeTooltip;
+      },
+      set(val) {
+        this.setRangeTooltipEnabled(val);
+      },
+    },
   },
 };
diff --git a/client/src/components/widgets/SettingsPanel/template.html b/client/src/components/widgets/SettingsPanel/template.html
index fc376c37..466939fe 100644
--- a/client/src/components/widgets/SettingsPanel/template.html
+++ b/client/src/components/widgets/SettingsPanel/template.html
@@ -171,6 +171,25 @@
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip left bottom>
+            <template v-slot:activator="{on, attrs}">
+              <div v-on="on" v-bind="attrs">
+                <v-switch
+                  dense
+                  v-model="rangeInfo"
+                  label="range info"
+                  hide-details
+                />
+              </div>
+            </template>
+            <p class="mb-0">
+              Range info on hover {{rangeInfo ? "enabled" : "disabled"}}.
+            </p>
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-col>
   </div>
   <v-row class="ma-0 pa-0" :style="{height: '25px'}">
diff --git a/client/src/components/widgets/VTKPlot/script.js b/client/src/components/widgets/VTKPlot/script.js
index 69467944..b8d4ff6d 100644
--- a/client/src/components/widgets/VTKPlot/script.js
+++ b/client/src/components/widgets/VTKPlot/script.js
@@ -56,11 +56,16 @@ export default {
       rangeText: "",
       plotType: null,
       lastLoadedTimeStep: -1,
+      currentRange: null,
     };
   },
 
   computed: {
     ...mapGetters({
+      enableRangeTooltip: "UI_SHOW_RANGE_TOOLTIP",
+      xaxisVisible: "UI_SHOW_X_AXIS",
+      yaxisVisible: "UI_SHOW_Y_AXIS",
+      showScalarBar: "UI_SHOW_SCALAR_BAR",
       renderWindow: "UI_RENDER_WINDOW",
       syncZoom: "UI_ZOOM_SYNC",
       interactor: "UI_INTERACTOR",
@@ -83,6 +88,15 @@ export default {
     xAxis() {
       return this.$store.getters[`${this.itemId}/PLOT_X_AXIS`] || null;
     },
+    scalarRange() {
+      return this.$store.getters[`${this.itemId}/PLOT_COLOR_RANGE`] || null;
+    },
+    xRange() {
+      return this.$store.getters[`${this.itemId}/PLOT_X_RANGE`] || null;
+    },
+    yRange() {
+      return this.$store.getters[`${this.itemId}/PLOT_Y_RANGE`] || null;
+    },
     zoom() {
       return this.$store.getters[`${this.itemId}/PLOT_ZOOM`] || null;
     },
@@ -124,6 +138,27 @@ export default {
         }
       },
     },
+    xaxisVisible: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        let forceRerender = !isEqual(newVal, oldVal);
+        this.react(forceRerender);
+      },
+    },
+    yaxisVisible: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        let forceRerender = !isEqual(newVal, oldVal);
+        this.react(forceRerender);
+      },
+    },
+    showScalarBar: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        let forceRerender = !isEqual(newVal, oldVal);
+        this.react(forceRerender);
+      },
+    },
   },
 
   methods: {
@@ -599,6 +634,20 @@ export default {
         }
       }
     },
+    tooltipText() {
+      let [x0, x1] = this.xRange;
+      let [y0, y1] = this.yRange;
+      let [s0, s1] = this.scalarRange;
+      if (!this.runGlobals && this.currentRange) {
+        [x0, x1, y0, y1] = this.currentRange;
+        [s0, s1] = this.mapper.getScalarRange();
+      }
+      return {
+        x: `[${x0.toExponential(3)}, ${x1.toExponential(3)}]`,
+        y: `[${y0.toExponential(3)}, ${y1.toExponential(3)}]`,
+        scalar: `[${s0.toExponential(3)}, ${s1.toExponential(3)}]`,
+      };
+    },
   },
 
   mounted() {
diff --git a/client/src/components/widgets/VTKPlot/template.html b/client/src/components/widgets/VTKPlot/template.html
index 4ef47880..176e8c56 100644
--- a/client/src/components/widgets/VTKPlot/template.html
+++ b/client/src/components/widgets/VTKPlot/template.html
@@ -1,4 +1,33 @@
 <div ref="vtk" class="plot">
+  <v-menu
+    v-if="enableRangeTooltip"
+    open-on-hover
+    offset-y
+    left
+    top
+    :close-on-content-click="false"
+    min-width="fit-content"
+    height="fit-content"
+  >
+    <template v-slot:activator="{ on }">
+      <v-icon v-on="on" :style="{position: 'absolute', right: '0', bottom: '0'}"
+        >mdi-information-variant</v-icon
+      >
+    </template>
+    <v-list>
+      <v-list-item dense v-if="!xaxisVisible">
+        <v-list-item-title>X Range: {{tooltipText().x}}</v-list-item-title>
+      </v-list-item>
+      <v-list-item dense v-if="!yaxisVisible">
+        <v-list-item-title>Y Range: {{tooltipText().y}}</v-list-item-title>
+      </v-list-item>
+      <v-list-item dense v-if="!showScalarBar">
+        <v-list-item-title
+          >Scalar Range: {{tooltipText().scalar}}</v-list-item-title
+        >
+      </v-list-item>
+    </v-list>
+  </v-menu>
   <annotations
     v-if="rangeText.length  && itemId"
     :text="rangeText"
diff --git a/client/src/store/ui.js b/client/src/store/ui.js
index 5c993ff0..9b0fd7b8 100644
--- a/client/src/store/ui.js
+++ b/client/src/store/ui.js
@@ -31,6 +31,7 @@ export default {
     showScalarBar: false,
     showTitle: false,
     showLegend: false,
+    rangeTooltip: true,
   },
   getters: {
     UI_AUTO_SAVE_DIALOG(state) {
@@ -99,6 +100,9 @@ export default {
     UI_SHOW_LEGEND(state) {
       return state.showLegend;
     },
+    UI_SHOW_RANGE_TOOLTIP(state) {
+      return state.rangeTooltip;
+    },
   },
   mutations: {
     UI_AUTO_SAVE_DIALOG_SET(state, val) {
@@ -164,6 +168,9 @@ export default {
     UI_SHOW_LEGEND_SET(state, val) {
       state.showLegend = val;
     },
+    UI_SHOW_RANGE_TOOLTIP_SET(state, val) {
+      state.rangeTooltip = val;
+    },
   },
   actions: {
     UI_TOGGLE_PLAY_PAUSE({ state }) {

From 5d1bee99ddb34171e2c6f00181100d62f00a55b3 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 18 Aug 2023 13:34:40 -0400
Subject: [PATCH 11/21] Add support for toggling axes visibility to VTK plots

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../src/components/widgets/VTKPlot/script.js  | 164 +++++++++++++-----
 client/src/utils/vtkCustomCubeAxesActor.js    |  11 +-
 2 files changed, 134 insertions(+), 41 deletions(-)

diff --git a/client/src/components/widgets/VTKPlot/script.js b/client/src/components/widgets/VTKPlot/script.js
index b8d4ff6d..004e8899 100644
--- a/client/src/components/widgets/VTKPlot/script.js
+++ b/client/src/components/widgets/VTKPlot/script.js
@@ -23,6 +23,7 @@ import vtkCustomCubeAxesActor from "../../../utils/vtkCustomCubeAxesActor";
 
 const X_AXES_LABEL_BOUNDS_ADJUSTMENT = 0.3;
 const Y_AXES_LABEL_BOUNDS_ADJUSTMENT = 0.001;
+const MESH_XAXIS_SCALE_OFFSET = 0.1;
 
 export default {
   name: "VTKPlot",
@@ -62,6 +63,7 @@ export default {
 
   computed: {
     ...mapGetters({
+      runGlobals: "UI_USE_RUN_GLOBALS",
       enableRangeTooltip: "UI_SHOW_RANGE_TOOLTIP",
       xaxisVisible: "UI_SHOW_X_AXIS",
       yaxisVisible: "UI_SHOW_Y_AXIS",
@@ -100,6 +102,15 @@ export default {
     zoom() {
       return this.$store.getters[`${this.itemId}/PLOT_ZOOM`] || null;
     },
+    localTimeStep() {
+      const ts = this.currentTimeStep;
+      if (this.availableTimeSteps.includes(ts)) {
+        return ts;
+      }
+      let idx = this.availableTimeSteps.findIndex((step) => step >= ts);
+      idx = Math.max((idx -= 1), 0);
+      return this.availableTimeSteps[idx];
+    },
   },
 
   watch: {
@@ -141,22 +152,34 @@ export default {
     xaxisVisible: {
       immediate: true,
       handler(newVal, oldVal) {
-        let forceRerender = !isEqual(newVal, oldVal);
-        this.react(forceRerender);
+        if (!isEqual(newVal, oldVal)) {
+          this.react();
+        }
       },
     },
     yaxisVisible: {
       immediate: true,
       handler(newVal, oldVal) {
-        let forceRerender = !isEqual(newVal, oldVal);
-        this.react(forceRerender);
+        if (!isEqual(newVal, oldVal)) {
+          this.react();
+        }
       },
     },
     showScalarBar: {
       immediate: true,
       handler(newVal, oldVal) {
-        let forceRerender = !isEqual(newVal, oldVal);
-        this.react(forceRerender);
+        if (!isEqual(newVal, oldVal)) {
+          this.react();
+        }
+      },
+    },
+    runGlobals: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (!isEqual(newVal, oldVal)) {
+          this.react();
+          this.resetCameraBounds();
+        }
       },
     },
   },
@@ -179,25 +202,12 @@ export default {
     },
     react: function () {
       let nextImage = this.loadedTimeStepData.find(
-        (img) => img.timestep == this.currentTimeStep,
+        (img) => img.timestep == this.localTimeStep,
       );
-      if (isNil(nextImage) && this.loadedTimeStepData.length >= 1) {
-        let idx = this.availableTimeSteps.findIndex(
-          (step) => step >= this.currentTimeStep,
-        );
-        idx = Math.max((idx -= 1), 0);
-        let prevTimeStep = this.availableTimeSteps[idx];
-        nextImage = this.loadedTimeStepData.find(
-          (img) => img.timestep === prevTimeStep,
-        );
-      }
       // Plots can be added faster than the data can update. Make sure that the
       // nextImage is the correct plot type.
-
       const readyForUpdate =
-        !isNil(nextImage) &&
-        !Array.isArray(nextImage.data) &&
-        this.lastLoadedTimeStep != nextImage?.timestep;
+        !isNil(nextImage) && !Array.isArray(nextImage.data);
       if (readyForUpdate) {
         if (!this.xaxis) {
           let xAxis = nextImage.data.xLabel;
@@ -288,20 +298,20 @@ export default {
       this.axes.setAxisLabels(data.xLabel, data.yLabel, "");
       this.axes.getProperty().setColor("black");
       this.axes.getProperty().setLineWidth(0.1);
-      if (this.plotType === PlotType.ColorMap) {
-        this.axes.setGridLines(false);
-      }
+      this.axes.setGridLines(false);
+      this.axes.setVisibleLabels([this.xaxisVisible, this.yaxisVisible]);
       this.renderer.addActor(this.axes);
 
       // Build color bar
       this.scalarBar = vtkScalarBarActor.newInstance();
-      this.scalarBar.setGenerateTicks(customGenerateTicks(6));
+      this.scalarBar.setGenerateTicks(customGenerateTicks(1));
       this.scalarBar.setScalarsToColors(lut);
       this.scalarBar.setAxisLabel(data.colorLabel);
       this.scalarBar.setAxisTextStyle({ fontColor: "black" });
       this.scalarBar.setTickTextStyle({ fontColor: "black" });
       this.scalarBar.setDrawNanAnnotation(false);
       this.scalarBar.setAutoLayout(scalarBarAutoLayout(this.scalarBar));
+      this.scalarBar.setVisibility(this.showScalarBar);
       this.renderer.addActor2D(this.scalarBar);
 
       if (this.plotType === PlotType.Scatter) {
@@ -366,7 +376,10 @@ export default {
 
         // Build the polydata
         this.mesh.getPointData().setScalars(scalars);
-        this.mapper.setScalarRange(...scalars.getRange());
+        const scalarRange = this.runGlobals
+          ? this.scalarRange
+          : scalars.getRange();
+        this.mapper.setScalarRange(...scalarRange);
 
         // Setup colormap
         const lut = this.mapper.getLookupTable();
@@ -385,9 +398,13 @@ export default {
       // TODO: Remove this when we have more functionality in VTK charts
       // Use the original data from the mesh rather than the potentially scaled
       // actor data
-      this.axes.setDataBounds(this.actor.getBounds());
+      this.axes.setDataBounds(...this.axesDataBounds());
       const [scale] = this.actor.getScale();
       this.axes.setTicksScale(scale);
+      this.axes.setVisibleLabels([this.xaxisVisible, this.yaxisVisible]);
+
+      // Update scalar bar
+      this.scalarBar.setVisibility(this.showScalarBar);
 
       // TODO: Remove this when we have more functionality in VTK charts
       // Hack to adjust the bounds to include the x label
@@ -452,13 +469,11 @@ export default {
       }
       this.mesh.getPoints().setData(points, 3);
       this.mesh.getPolys().setData(cells);
-      // FIXME: This is a hack to attempt to keep
-      // the plot ratio relatively square
-      const yRange = Math.max(...y) - Math.min(...y);
-      const xRange = Math.max(...x) - Math.min(...x);
-      const actorScale = yRange / xRange;
       if (!this.zoom) {
-        this.actor.setScale(actorScale, 1, 1);
+        // FIXME: This is a hack to attempt to keep
+        // the plot ratio relatively square
+        const scale = this.actorScale(x, y);
+        this.actor.setScale(scale, 1, 1);
       }
     },
     updateMeshRenderer(data) {
@@ -513,13 +528,11 @@ export default {
       this.actor.getProperty().setColor(0, 0, 1);
 
       this.mesh.getPoints().setData(points, 3);
-      // FIXME: This is a hack to attempt to keep
-      // the plot ratio relatively square
-      const yRange = Math.max(...y) - Math.min(...y);
-      const xRange = Math.max(...x) - Math.min(...x);
-      const actorScale = yRange / xRange;
       if (!this.zoom) {
-        this.actor.setScale(actorScale, 1, 1);
+        // FIXME: This is a hack to attempt to keep
+        // the plot ratio relatively square
+        const scale = this.actorScale(x, y);
+        this.actor.setScale(scale, 1, 1);
       }
     },
     removeRenderer() {
@@ -648,6 +661,79 @@ export default {
         scalar: `[${s0.toExponential(3)}, ${s1.toExponential(3)}]`,
       };
     },
+    axesDataBounds() {
+      if (!this.runGlobals) {
+        return [...this.actor.getBounds()];
+      }
+      const [x0, x1, y0, y1] = this.actor.getBounds();
+      let xBounds = this.runGlobals ? [...this.xRange] : [x0, x1];
+      let yBounds = this.runGlobals ? [...this.yRange] : [y0, y1];
+      const meshBounds = [...xBounds, ...yBounds, 0, 0];
+      if (this.plotType === PlotType.ColorMap) {
+        const [xscale] = this.actor.getScale();
+        meshBounds[1] =
+          meshBounds[1] * xscale + xscale * MESH_XAXIS_SCALE_OFFSET;
+      }
+      return meshBounds;
+    },
+    cameraBoundsOffset() {
+      const parent = document
+        .getElementById("mainContent")
+        .getBoundingClientRect();
+      const { width, height } = this.$el.getBoundingClientRect();
+      let w = Math.abs(Math.log(width / parent.width));
+      let h = Math.abs(Math.log(height / parent.height));
+      return height > width ? w / 2 : h / 2;
+    },
+    resetCameraBounds() {
+      if (!this.renderer) {
+        return;
+      }
+      // TODO: Remove this when we have more functionality in VTK charts
+      const bounds = this.axesDataBounds();
+      if (this.plotType === PlotType.Mesh) {
+        if (this.xaxisVisible) {
+          // Hack to adjust the bounds to include the x label
+          bounds[2] -= this.cameraBoundsOffset();
+        }
+        if (this.yaxisVisible) {
+          // Hack to adjust the bounds to include the y label
+          bounds[0] -= this.cameraBoundsOffset();
+        }
+      } else if (this.plotType === PlotType.Scatter) {
+        // Hack to adjust the bounds to include the y label
+        bounds[1] -= Y_AXES_LABEL_BOUNDS_ADJUSTMENT;
+      } else if (this.plotType === PlotType.ColorMap) {
+        if (this.yaxisVisible) {
+          bounds[0] -= this.cameraBoundsOffset() * 0.0005;
+        }
+      }
+      this.renderer.resetCamera(bounds);
+    },
+    actorScale(xVals, yVals) {
+      const [x0, x1] = this.runGlobals
+        ? this.xRange
+        : [Math.min(...xVals), Math.max(...xVals)];
+      const [y0, y1] = this.runGlobals
+        ? this.yRange
+        : [Math.min(...yVals), Math.max(...yVals)];
+      this.currentRange = [x0, x1, y0, y1];
+      return (y1 - y0) / (x1 - x0);
+    },
+    tooltipText() {
+      let [x0, x1] = this.xRange;
+      let [y0, y1] = this.yRange;
+      let [s0, s1] = this.scalarRange;
+      if (!this.runGlobals && this.currentRange) {
+        [x0, x1, y0, y1] = this.currentRange;
+        [s0, s1] = this.mapper.getScalarRange();
+      }
+      return {
+        x: `[${x0.toExponential(3)}, ${x1.toExponential(3)}]`,
+        y: `[${y0.toExponential(3)}, ${y1.toExponential(3)}]`,
+        scalar: `[${s0.toExponential(3)}, ${s1.toExponential(3)}]`,
+      };
+    },
   },
 
   mounted() {
diff --git a/client/src/utils/vtkCustomCubeAxesActor.js b/client/src/utils/vtkCustomCubeAxesActor.js
index de233dae..ffe5d652 100644
--- a/client/src/utils/vtkCustomCubeAxesActor.js
+++ b/client/src/utils/vtkCustomCubeAxesActor.js
@@ -45,11 +45,16 @@ function vtkCustomCubeAxesActor(publicAPI, model) {
       tickStrings[2] = ["0"];
       ticks[2] = [0];
 
+      const [showX, showY] = model.visibleLabels;
+      let edges = [...edgesToDraw];
+      edges[4] = showX ? 1 : 2;
+      edges[7] = showY ? 1 : 2;
+
       // update gridlines / edge lines
-      publicAPI.updatePolyData(facesToDraw, edgesToDraw, ticks);
+      publicAPI.updatePolyData(facesToDraw, edges, ticks);
 
       // compute label world coords and text
-      publicAPI.updateTextData(facesToDraw, edgesToDraw, ticks, tickStrings);
+      publicAPI.updateTextData(facesToDraw, edges, ticks, tickStrings);
 
       // rebuild the texture only when force or changed bounds, face
       // visibility changes do to change the atlas
@@ -65,6 +70,7 @@ function vtkCustomCubeAxesActor(publicAPI, model) {
 const DEFAULT_VALUES = {
   ticksNo: 4,
   ticksScale: 1,
+  visibleLabels: [true, true],
 };
 
 export function extend(publicAPI, model, initialValues = {}) {
@@ -73,6 +79,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   vtkCubeAxesActor.extend(publicAPI, model, initialValues);
   macro.setGet(publicAPI, model, ["ticksNo"]);
   macro.setGet(publicAPI, model, ["ticksScale"]);
+  macro.setGetArray(publicAPI, model, ["visibleLabels"], 2);
   vtkCustomCubeAxesActor(publicAPI, model);
 }
 

From 92e671edc7a6b4db524a5b00219466e8377a1c88 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 18 Aug 2023 13:36:09 -0400
Subject: [PATCH 12/21] Default to showing plot titles

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/store/ui.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/store/ui.js b/client/src/store/ui.js
index 9b0fd7b8..fe7f91f2 100644
--- a/client/src/store/ui.js
+++ b/client/src/store/ui.js
@@ -29,7 +29,7 @@ export default {
     showXAxis: false,
     showYAxis: false,
     showScalarBar: false,
-    showTitle: false,
+    showTitle: true,
     showLegend: false,
     rangeTooltip: true,
   },

From a6697e8152629f646fcc08c41806e90f5fdd2034 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Mon, 21 Aug 2023 14:49:23 -0400
Subject: [PATCH 13/21] Update camera bounds hacks

Adjust some of the hacks that we have in place to keep plots centered and axes
visible when they're toogled on.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../src/components/widgets/VTKPlot/script.js  | 77 ++++++-------------
 client/src/utils/vtkCustomCubeAxesActor.js    |  6 +-
 2 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/client/src/components/widgets/VTKPlot/script.js b/client/src/components/widgets/VTKPlot/script.js
index 004e8899..f109ea8a 100644
--- a/client/src/components/widgets/VTKPlot/script.js
+++ b/client/src/components/widgets/VTKPlot/script.js
@@ -21,9 +21,9 @@ import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
 import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
 import vtkCustomCubeAxesActor from "../../../utils/vtkCustomCubeAxesActor";
 
-const X_AXES_LABEL_BOUNDS_ADJUSTMENT = 0.3;
 const Y_AXES_LABEL_BOUNDS_ADJUSTMENT = 0.001;
 const MESH_XAXIS_SCALE_OFFSET = 0.1;
+const RECTANGULAR_VIEWPORT_SCALING = 1.5;
 
 export default {
   name: "VTKPlot",
@@ -154,6 +154,7 @@ export default {
       handler(newVal, oldVal) {
         if (!isEqual(newVal, oldVal)) {
           this.react();
+          this.resetCameraBounds();
         }
       },
     },
@@ -162,6 +163,7 @@ export default {
       handler(newVal, oldVal) {
         if (!isEqual(newVal, oldVal)) {
           this.react();
+          this.resetCameraBounds();
         }
       },
     },
@@ -240,22 +242,25 @@ export default {
           (x - parent.x + width) / parent.width,
           1 - y / parent.height,
         ];
+        const h = viewport[3] - viewport[1];
+        const w = viewport[2] - viewport[0];
+        const midx = w / 2 + viewport[0];
+        const midy = h / 2 + viewport[1];
+        // Keep the viewport square for square plots
+        let size = h > w ? w / 2 : h / 2;
         if (this.plotType === PlotType.Mesh) {
-          this.renderer.setViewport(...viewport);
-        } else {
-          // Keep the viewport square for square plots
-          const h = viewport[3] - viewport[1];
-          const w = viewport[2] - viewport[0];
-          const midx = w / 2 + viewport[0];
-          const midy = h / 2 + viewport[1];
-          let size = h > w ? w / 2 : h / 2;
-          this.renderer.setViewport(
-            midx - size,
-            midy - size,
-            midx + size,
-            midy + size,
-          );
+          if (h > w && this.numrows !== this.numcols) {
+            // Keep the viewport rectangular for Mesh plots
+            size *= RECTANGULAR_VIEWPORT_SCALING;
+          }
         }
+        this.renderer.setViewport(
+          Math.max(viewport[0], midx - size),
+          Math.max(viewport[1], midy - size),
+          Math.min(viewport[2], midx + size),
+          Math.min(viewport[3], midy + size),
+        );
+        this.resetCameraBounds();
       });
     },
     addRenderer(data) {
@@ -406,21 +411,10 @@ export default {
       // Update scalar bar
       this.scalarBar.setVisibility(this.showScalarBar);
 
-      // TODO: Remove this when we have more functionality in VTK charts
-      // Hack to adjust the bounds to include the x label
-      const bounds = [...this.actor.getBounds()];
-
       // Update camera
       if (!this.zoom) {
         // TODO: Remove this when we have more functionality in VTK charts
-        if (this.plotType === PlotType.Mesh) {
-          // Hack to adjust the bounds to include the x label
-          bounds[2] -= X_AXES_LABEL_BOUNDS_ADJUSTMENT;
-        } else if (this.plotType === PlotType.Scatter) {
-          // Hack to adjust the bounds to include the y label
-          bounds[1] -= Y_AXES_LABEL_BOUNDS_ADJUSTMENT;
-        }
-        this.renderer.resetCamera(bounds);
+        this.resetCameraBounds();
         if (!this.position) {
           this.position = this.camera.getPosition();
         }
@@ -626,19 +620,11 @@ export default {
         return;
       }
       if (!this.zoom) {
-        const bounds = [...this.actor.getBounds()];
+        // TODO: Remove this when we have more functionality in VTK charts
         if (this.plotType !== PlotType.ColorMap) {
           this.camera.setPosition(...this.position);
-          // Hack to adjust the bounds to include the x label
-          if (this.plotType === PlotType.Mesh) {
-            // This can be removed when vtk.js include the text labels in its bounds.
-            bounds[2] -= X_AXES_LABEL_BOUNDS_ADJUSTMENT;
-          } else if (this.plotType === PlotType.Scatter) {
-            // This can be removed when vtk.js include the text labels in its bounds.
-            bounds[1] -= Y_AXES_LABEL_BOUNDS_ADJUSTMENT;
-          }
         }
-        this.renderer.resetCamera(bounds);
+        this.resetCameraBounds();
         this.rangeText = "";
       } else if (!isEqual(this.zoom.focalPoint, this.camera.getFocalPoint())) {
         if (this.zoom.scale) {
@@ -705,7 +691,8 @@ export default {
         bounds[1] -= Y_AXES_LABEL_BOUNDS_ADJUSTMENT;
       } else if (this.plotType === PlotType.ColorMap) {
         if (this.yaxisVisible) {
-          bounds[0] -= this.cameraBoundsOffset() * 0.0005;
+          bounds[0] -=
+            this.cameraBoundsOffset() * (Y_AXES_LABEL_BOUNDS_ADJUSTMENT / 2);
         }
       }
       this.renderer.resetCamera(bounds);
@@ -720,20 +707,6 @@ export default {
       this.currentRange = [x0, x1, y0, y1];
       return (y1 - y0) / (x1 - x0);
     },
-    tooltipText() {
-      let [x0, x1] = this.xRange;
-      let [y0, y1] = this.yRange;
-      let [s0, s1] = this.scalarRange;
-      if (!this.runGlobals && this.currentRange) {
-        [x0, x1, y0, y1] = this.currentRange;
-        [s0, s1] = this.mapper.getScalarRange();
-      }
-      return {
-        x: `[${x0.toExponential(3)}, ${x1.toExponential(3)}]`,
-        y: `[${y0.toExponential(3)}, ${y1.toExponential(3)}]`,
-        scalar: `[${s0.toExponential(3)}, ${s1.toExponential(3)}]`,
-      };
-    },
   },
 
   mounted() {
diff --git a/client/src/utils/vtkCustomCubeAxesActor.js b/client/src/utils/vtkCustomCubeAxesActor.js
index ffe5d652..493e9f9e 100644
--- a/client/src/utils/vtkCustomCubeAxesActor.js
+++ b/client/src/utils/vtkCustomCubeAxesActor.js
@@ -3,7 +3,7 @@ import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";
 import * as d3 from "d3-scale";
 
 const facesToDraw = [false, false, false, false, false, true];
-const edgesToDraw = [0, 0, 0, 0, 1, 2, 2, 1, 0, 0, 0, 0];
+const edgesToDraw = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
 function vtkCustomCubeAxesActor(publicAPI, model) {
   model.classHierarchy.push("vtkCustomCubeAxesActor");
@@ -47,8 +47,8 @@ function vtkCustomCubeAxesActor(publicAPI, model) {
 
       const [showX, showY] = model.visibleLabels;
       let edges = [...edgesToDraw];
-      edges[4] = showX ? 1 : 2;
-      edges[7] = showY ? 1 : 2;
+      edges[4] = showX ? 1 : 0;
+      edges[7] = showY ? 1 : 0;
 
       // update gridlines / edge lines
       publicAPI.updatePolyData(facesToDraw, edges, ticks);

From 49bda5d417f918d50473d3353941ecceca63b654 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Tue, 22 Aug 2023 13:51:23 -0400
Subject: [PATCH 14/21] Fix auto-save

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/core/App/script.js     |  2 +-
 client/src/components/core/App/template.html | 11 ++++++-----
 client/src/store/views.js                    |  6 +++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/core/App/script.js b/client/src/components/core/App/script.js
index fa12e490..37c32b5a 100644
--- a/client/src/components/core/App/script.js
+++ b/client/src/components/core/App/script.js
@@ -237,7 +237,7 @@ export default {
       viewTimeStep: "VIEW_SAVED_TIME_STEP",
       numReady: "VIEW_NUM_READY",
       loadedFromSaved: "VIEW_LOADING_FROM_SAVED",
-      lastSaved: "VIEW_LAST_SAVED",
+      lastSaved: "VIEWS_LAST_SAVED",
       creator: "VIEWS_CREATOR",
       gridSize: "VIEWS_GRID_SIZE",
       items: "VIEWS_ITEMS",
diff --git a/client/src/components/core/App/template.html b/client/src/components/core/App/template.html
index 4ffc7e07..ad8831dc 100644
--- a/client/src/components/core/App/template.html
+++ b/client/src/components/core/App/template.html
@@ -29,7 +29,7 @@
             :fluid="true"
             class="playback-controls"
           >
-            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
               <v-slider
                 dense
                 hide-details
@@ -57,7 +57,7 @@
                 </template>
               </v-slider>
             </v-row>
-            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
               <v-col :sm="4">
                 <v-text-field
                   dense
@@ -91,7 +91,7 @@
                 </v-text-field>
               </v-col>
             </v-row>
-            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 mt-4 mb-0 pa-0" :style="{height: '25px'}">
               <v-col :sm="6">
                 <v-row class="align-center justify-space-evenly">
                   <v-icon v-on:click="removeRow()" :disabled="numrows < 2">
@@ -115,7 +115,7 @@
                 </v-row>
               </v-col>
             </v-row>
-            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
               <v-col class="align-center">
                 <v-tooltip top>
                   <template v-slot:activator="{on, attrs}">
@@ -134,7 +134,8 @@
             </v-row>
             <v-row
               v-show="lastSaved"
-              :style="{height: '5px', alignContent: 'start'}"
+              class="mx-0 my-1 pa-0"
+              :style="{height: '25px'}"
             >
               <span v-bind:style="{fontSize: 'small', opacity: '0.5'}">
                 View Autosaved: {{ new Date(lastSaved).toLocaleTimeString() }}
diff --git a/client/src/store/views.js b/client/src/store/views.js
index 6934536f..64ce7155 100644
--- a/client/src/store/views.js
+++ b/client/src/store/views.js
@@ -200,8 +200,8 @@ export default {
       });
       commit("VIEWS_INFO_SET", info);
     },
-    async VIEW_FETCH_AUTO_SAVE({ state, commit, getters }) {
-      commit("VIEW_AUTO_SAVE_RUN_SET", false);
+    async VIEWS_FETCH_AUTO_SAVE({ state, commit, getters }) {
+      commit("VIEWS_AUTO_SAVE_RUN_SET", false);
       const userId = this.$girderRest.user._id;
       const viewName = `${state.simulation}_${state.runId}_${userId}`;
       commit("VIEWS_AUTO_SAVE_NAME_SET", viewName);
@@ -210,7 +210,7 @@ export default {
       );
       const view = data[0];
       if (view) {
-        commit("VIEW_AUTO_SAVED_SET", view);
+        commit("VIEWS_AUTO_SAVED_SET", view);
         // Show the auto-save dialog if it hasn't been disabled in the settings
         commit("UI_AUTO_SAVE_DIALOG_SET", getters.UI_AUTO_SAVE_DIALOG_ENABLED);
       }

From 08b4fd6584ed9a5ca94098d0677334ce12e067fb Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Tue, 22 Aug 2023 13:52:09 -0400
Subject: [PATCH 15/21] Fix manually entering time step

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/core/App/template.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/core/App/template.html b/client/src/components/core/App/template.html
index ad8831dc..a1dece58 100644
--- a/client/src/components/core/App/template.html
+++ b/client/src/components/core/App/template.html
@@ -68,7 +68,8 @@
                   :max="maxTimeStep"
                   :disabled="!dataLoaded"
                   :value="currentTimeStep"
-                  @change="(e) => {updateTimeStep(e.target.value)}"
+                  @change="updateTimeStep"
+                  :style="{minWidth: '110px'}"
                 >
                   <template>
                     <v-icon

From ff237922ad2de2aeb893dec44ceb973bf01f9864 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Tue, 22 Aug 2023 13:56:31 -0400
Subject: [PATCH 16/21] Keep divider handle on top of plots

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/scss/gallery.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/scss/gallery.scss b/client/src/scss/gallery.scss
index 44c27b7c..08e1193e 100755
--- a/client/src/scss/gallery.scss
+++ b/client/src/scss/gallery.scss
@@ -146,6 +146,7 @@
   min-width: 3px;
   width: 10px;
   background: linear-gradient(90deg, #ccc, #a5a4a4);
+  z-index: 1;
 }
 
 // Resize plot labels when plots resize

From 3d7aec031d1639e55de114c259eacd95089ea311 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Tue, 22 Aug 2023 16:05:29 -0400
Subject: [PATCH 17/21] Fix numReady/gridSize count

Values were not being reset properly, preventing some rendering from happening
when it needed to.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/core/App/script.js      | 1 +
 client/src/components/widgets/Plots/script.js | 5 -----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/src/components/core/App/script.js b/client/src/components/core/App/script.js
index 37c32b5a..e6973016 100644
--- a/client/src/components/core/App/script.js
+++ b/client/src/components/core/App/script.js
@@ -172,6 +172,7 @@ export default {
     },
 
     applyView() {
+      this.updateNumReady(0);
       this.$refs.plots.forEach((cell) => {
         const { row, col } = cell;
         const item = this.items[`${row}::${col}`];
diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index d14203c7..bb46f683 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -447,13 +447,8 @@ export default {
     },
   },
 
-  mounted() {
-    this.setGridSize(this.numcols * this.numrows);
-  },
-
   destroyed() {
     this.updateVisiblePlots({ newId: null, oldId: this.itemId });
-    this.setGridSize(this.gridSize - 1);
   },
 
   beforeDestroyed() {

From 522e35b08fab0aab1974834ace6df9327a9fd919 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Mon, 28 Aug 2023 14:38:24 -0400
Subject: [PATCH 18/21] Reset plot type on clear

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/widgets/Plots/script.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index bb46f683..c2122c62 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -418,6 +418,7 @@ export default {
       this.setMetaData({});
       this.itemId = "";
       this.setInitialLoad(true);
+      this.plotType = PlotType.None;
     },
     async setRun() {
       const { data } = await this.girderRest.get(

From 466ddc3dee13004cc530ed700bfcc374dc24128b Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Mon, 28 Aug 2023 15:06:20 -0400
Subject: [PATCH 19/21] Remove unused argument

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/widgets/PlotlyPlot/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index d78a76ad..2946ccf1 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -469,7 +469,7 @@ export default {
       });
       this.timeIndex = this.times.findIndex((time) => time === closestVal);
     },
-    setAnnotations(data) {
+    setAnnotations() {
       if (!this.zoom) {
         this.rangeText = "";
         return;

From 31ebe25ee2195b38ebb09d3a417659db338d2b95 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 1 Sep 2023 11:58:49 -0400
Subject: [PATCH 20/21] Clean up/simplify some of the code changes

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 client/src/components/core/App/template.html         | 12 ++++++------
 .../src/components/widgets/ContextMenu/template.html |  6 +++---
 client/src/components/widgets/PlotlyPlot/script.js   |  2 +-
 .../src/components/widgets/PlotlyPlot/template.html  |  6 +++---
 client/src/components/widgets/Plots/script.js        |  2 +-
 client/src/components/widgets/VTKPlot/template.html  | 12 ++++++------
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/core/App/template.html b/client/src/components/core/App/template.html
index a1dece58..7f8d4c46 100644
--- a/client/src/components/core/App/template.html
+++ b/client/src/components/core/App/template.html
@@ -29,7 +29,7 @@
             :fluid="true"
             class="playback-controls"
           >
-            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" style="height: 25px">
               <v-slider
                 dense
                 hide-details
@@ -57,7 +57,7 @@
                 </template>
               </v-slider>
             </v-row>
-            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" style="height: 25px">
               <v-col :sm="4">
                 <v-text-field
                   dense
@@ -69,7 +69,7 @@
                   :disabled="!dataLoaded"
                   :value="currentTimeStep"
                   @change="updateTimeStep"
-                  :style="{minWidth: '110px'}"
+                  style="min-width: 110px"
                 >
                   <template>
                     <v-icon
@@ -92,7 +92,7 @@
                 </v-text-field>
               </v-col>
             </v-row>
-            <v-row class="mx-0 mt-4 mb-0 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 mt-4 mb-0 pa-0" style="height: 25px">
               <v-col :sm="6">
                 <v-row class="align-center justify-space-evenly">
                   <v-icon v-on:click="removeRow()" :disabled="numrows < 2">
@@ -116,7 +116,7 @@
                 </v-row>
               </v-col>
             </v-row>
-            <v-row class="mx-0 my-1 pa-0" :style="{height: '25px'}">
+            <v-row class="mx-0 my-1 pa-0" style="height: 25px">
               <v-col class="align-center">
                 <v-tooltip top>
                   <template v-slot:activator="{on, attrs}">
@@ -136,7 +136,7 @@
             <v-row
               v-show="lastSaved"
               class="mx-0 my-1 pa-0"
-              :style="{height: '25px'}"
+              style="height: 25px"
             >
               <span v-bind:style="{fontSize: 'small', opacity: '0.5'}">
                 View Autosaved: {{ new Date(lastSaved).toLocaleTimeString() }}
diff --git a/client/src/components/widgets/ContextMenu/template.html b/client/src/components/widgets/ContextMenu/template.html
index cb59779a..b0e73f16 100644
--- a/client/src/components/widgets/ContextMenu/template.html
+++ b/client/src/components/widgets/ContextMenu/template.html
@@ -12,10 +12,10 @@
         <v-list-item dense @click="showRangeDialog=true">
           <v-list-item-title> Set global range </v-list-item-title>
         </v-list-item>
-        <v-list-item dense @click="toggleLogScale()">
+        <v-list-item dense @click="toggleLogScale">
           <v-list-item-title>
-            {{logScaling ? "Clear" : "Apply"}} log scaling</v-list-item-title
-          >
+            {{logScaling ? "Clear" : "Apply"}} log scaling
+          </v-list-item-title>
         </v-list-item>
       </v-list>
       <v-divider v-if="itemInfo && itemInfo.isPlotly" />
diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index 2946ccf1..0b470cf0 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -375,7 +375,7 @@ export default {
       }
       return nextImage;
     },
-    react: function () {
+    react() {
       if (!this.itemId) {
         return;
       }
diff --git a/client/src/components/widgets/PlotlyPlot/template.html b/client/src/components/widgets/PlotlyPlot/template.html
index a0527e8d..84144d50 100644
--- a/client/src/components/widgets/PlotlyPlot/template.html
+++ b/client/src/components/widgets/PlotlyPlot/template.html
@@ -10,9 +10,9 @@
     height="fit-content"
   >
     <template v-slot:activator="{ on }">
-      <v-icon v-on="on" :style="{position: 'absolute', right: '0', bottom: '0'}"
-        >mdi-information-variant</v-icon
-      >
+      <v-icon v-on="on" style="position: absolute; right: 0; bottom: 0">
+        mdi-information-variant
+      </v-icon>
     </template>
     <v-list>
       <v-list-item dense v-if="!xaxisVisible">
diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index c2122c62..d126f989 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -142,7 +142,7 @@ export default {
       setShouldAutoSave: "VIEWS_AUTO_SAVE_RUN_SET",
       updateNumReady: "VIEW_NUM_READY_SET",
     }),
-    setMetaData: function (meta) {
+    setMetaData(meta) {
       if (!this.itemId) {
         return;
       }
diff --git a/client/src/components/widgets/VTKPlot/template.html b/client/src/components/widgets/VTKPlot/template.html
index 176e8c56..583bfcb1 100644
--- a/client/src/components/widgets/VTKPlot/template.html
+++ b/client/src/components/widgets/VTKPlot/template.html
@@ -10,9 +10,9 @@
     height="fit-content"
   >
     <template v-slot:activator="{ on }">
-      <v-icon v-on="on" :style="{position: 'absolute', right: '0', bottom: '0'}"
-        >mdi-information-variant</v-icon
-      >
+      <v-icon v-on="on" style="position: absolute; right: 0; bottom: 0">
+        mdi-information-variant
+      </v-icon>
     </template>
     <v-list>
       <v-list-item dense v-if="!xaxisVisible">
@@ -22,9 +22,9 @@
         <v-list-item-title>Y Range: {{tooltipText().y}}</v-list-item-title>
       </v-list-item>
       <v-list-item dense v-if="!showScalarBar">
-        <v-list-item-title
-          >Scalar Range: {{tooltipText().scalar}}</v-list-item-title
-        >
+        <v-list-item-title>
+          Scalar Range: {{tooltipText().scalar}}
+        </v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>

From 22050358aad9b67904086542a03361e88600c0a0 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Fri, 1 Sep 2023 12:28:05 -0400
Subject: [PATCH 21/21] Use a helper function for min/max of arrays

The spread operator has the potential to be expensive for large arrays. Use a
for-loop helper function to find the min and max instead.

Signed-off-by: Brianna Major <brianna.major@kitware.com>
---
 .../components/widgets/DownloadOptions/script.js    | 13 +++++++------
 client/src/components/widgets/PlotlyPlot/script.js  | 11 +++++------
 client/src/components/widgets/Plots/script.js       |  4 +++-
 client/src/components/widgets/VTKPlot/script.js     |  9 +++------
 client/src/store/plot.js                            |  6 +++---
 client/src/utils/helpers.js                         | 13 +++++++++++++
 6 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 client/src/utils/helpers.js

diff --git a/client/src/components/widgets/DownloadOptions/script.js b/client/src/components/widgets/DownloadOptions/script.js
index d662b4cf..1f9fc968 100644
--- a/client/src/components/widgets/DownloadOptions/script.js
+++ b/client/src/components/widgets/DownloadOptions/script.js
@@ -1,5 +1,6 @@
 import _ from "lodash";
 import { mapGetters, mapMutations } from "vuex";
+import { extractRange } from "../../../utils/helpers";
 
 export default {
   inject: ["girderRest"],
@@ -61,17 +62,17 @@ export default {
     },
     minStep() {
       if (this.id) {
-        return Math.min(
-          ...this.$store.getters[`${this.id}/PLOT_AVAILABLE_TIME_STEPS`],
-        );
+        let ats = this.$store.getters[`${this.id}/PLOT_AVAILABLE_TIME_STEPS`];
+        let [min] = extractRange(ats);
+        return min;
       }
       return 0;
     },
     maxStep() {
       if (this.id) {
-        return Math.max(
-          ...this.$store.getters[`${this.id}/PLOT_AVAILABLE_TIME_STEPS`],
-        );
+        let ats = this.$store.getters[`${this.id}/PLOT_AVAILABLE_TIME_STEPS`];
+        let [, max] = extractRange(ats);
+        return max;
       }
       return 0;
     },
diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
index 0b470cf0..b294c102 100644
--- a/client/src/components/widgets/PlotlyPlot/script.js
+++ b/client/src/components/widgets/PlotlyPlot/script.js
@@ -3,6 +3,7 @@ import { isEmpty, isEqual, isNil } from "lodash";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 import { PlotType } from "../../../utils/constants";
 import Annotations from "../Annotations";
+import { extractRange } from "../../../utils/helpers";
 
 //-----------------------------------------------------------------------------
 // Utility Functions
@@ -313,9 +314,9 @@ export default {
       if (this.runGlobals) this.useRunGlobals(image);
       if (this.zoom) this.applyZoom(image);
       const data = image.data[0];
-      const xRange = [Math.min(...data.x), Math.max(...data.y)];
+      const xRange = extractRange(data.x);
       let yRange = this.range;
-      if (!yRange) yRange = [Math.min(...data.y), Math.max(...data.y)];
+      if (!yRange) yRange = extractRange(data.y);
       this.currentRange = [...xRange, ...yRange];
       this.setAnnotations(image.data[0]);
       this.updatePlotDetails(image);
@@ -330,10 +331,8 @@ export default {
           this.averagingValues = [];
         }
       } else {
-        let end = Math.min(
-          this.currentTimeStep + this.timeAverage,
-          Math.max(...this.availableTimeSteps),
-        );
+        let [, max] = extractRange(this.availableTimeSteps);
+        let end = Math.min(this.currentTimeStep + this.timeAverage, max);
         this.avgAnnotation = `Averaging Over Time Steps ${this.currentTimeStep} - ${end}`;
         this.averagingValues = [];
         for (
diff --git a/client/src/components/widgets/Plots/script.js b/client/src/components/widgets/Plots/script.js
index d126f989..6e610abc 100644
--- a/client/src/components/widgets/Plots/script.js
+++ b/client/src/components/widgets/Plots/script.js
@@ -7,6 +7,7 @@ import { PlotType } from "../../../utils/constants";
 import { PlotFetcher } from "../../../utils/plotFetcher";
 
 import plot from "../../../store/plot";
+import { extractRange } from "../../../utils/helpers";
 
 // // Number of timesteps to prefetch data for.
 // const TIMESTEPS_TO_PREFETCH = 3;
@@ -276,7 +277,8 @@ export default {
       );
       await this.plotFetcher.fetchTimeStepFn(response, firstAvailableStep);
 
-      this.setMaxTimeStep(Math.max(this.maxTimeStep, Math.max(...ats)));
+      let [, max] = extractRange(ats);
+      this.setMaxTimeStep(Math.max(this.maxTimeStep, max));
       this.setItemId(this.itemId);
       this.setInitialLoad(false);
       this.$refs[`${this.row}-${this.col}`].react();
diff --git a/client/src/components/widgets/VTKPlot/script.js b/client/src/components/widgets/VTKPlot/script.js
index f109ea8a..fd0b0571 100644
--- a/client/src/components/widgets/VTKPlot/script.js
+++ b/client/src/components/widgets/VTKPlot/script.js
@@ -20,6 +20,7 @@ import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
 import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
 import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
 import vtkCustomCubeAxesActor from "../../../utils/vtkCustomCubeAxesActor";
+import { extractRange } from "../../../utils/helpers";
 
 const Y_AXES_LABEL_BOUNDS_ADJUSTMENT = 0.001;
 const MESH_XAXIS_SCALE_OFFSET = 0.1;
@@ -698,12 +699,8 @@ export default {
       this.renderer.resetCamera(bounds);
     },
     actorScale(xVals, yVals) {
-      const [x0, x1] = this.runGlobals
-        ? this.xRange
-        : [Math.min(...xVals), Math.max(...xVals)];
-      const [y0, y1] = this.runGlobals
-        ? this.yRange
-        : [Math.min(...yVals), Math.max(...yVals)];
+      const [x0, x1] = this.runGlobals ? this.xRange : extractRange(xVals);
+      const [y0, y1] = this.runGlobals ? this.yRange : extractRange(yVals);
       this.currentRange = [x0, x1, y0, y1];
       return (y1 - y0) / (x1 - x0);
     },
diff --git a/client/src/store/plot.js b/client/src/store/plot.js
index 0fb134c4..02b2f50d 100644
--- a/client/src/store/plot.js
+++ b/client/src/store/plot.js
@@ -1,3 +1,5 @@
+import { extractRange } from "../utils/helpers";
+
 export default {
   namespaced: true,
   state: () => ({
@@ -111,9 +113,7 @@ export default {
       let newMax = -Infinity;
       rootGetters.VIEW_SELECTIONS.forEach((id) => {
         let steps = rootGetters[`${id}/PLOT_AVAILABLE_TIME_STEPS`] || [];
-        let tsMin = Math.min(...steps);
-        let tsMax = Math.max(...steps);
-
+        let [tsMin, tsMax] = extractRange(steps);
         newMin = Math.min(newMin, tsMin);
         newMax = Math.max(newMax, tsMax);
       });
diff --git a/client/src/utils/helpers.js b/client/src/utils/helpers.js
new file mode 100644
index 00000000..94806d71
--- /dev/null
+++ b/client/src/utils/helpers.js
@@ -0,0 +1,13 @@
+export function extractRange(array) {
+  let minValue = array[0];
+  let maxValue = array[0];
+  for (let i = 0; i < array.length; i++) {
+    const v = array[i];
+    if (v < minValue) {
+      minValue = v;
+    } else if (v > maxValue) {
+      maxValue = v;
+    }
+  }
+  return [minValue, maxValue];
+}