Merge pull request #279 from bnmajor/improvements

Improvements
Kitware · Jul 31, 2023 · 6b94af8 · 6b94af8
2 parents 97bbdc8 + aa16a6e
commit 6b94af8
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 84 deletions.
diff --git a/client/src/components/core/App/template.html b/client/src/components/core/App/template.html
@@ -41,97 +41,89 @@
             class="playback-controls"
             v-on:mouseover="hoverOut"
           >
-            <v-row class="mx-1" :style="{height: '10px'}">
-              <v-col :sm="1" class="text-xs-center">
-                <v-icon
-                  v-on:click="decrementTimeStep(true)"
-                  :disabled="!dataLoaded || currentTimeStep === minTimeStep"
-                >
-                  arrow_back_ios
-                </v-icon>
-              </v-col>
-              <v-col :sm="10">
-                <v-slider
-                  :min="minTimeStep"
-                  :max="maxTimeStep"
-                  :disabled="!dataLoaded"
-                  height="1px"
-                  :value="sliderValue"
-                  @change="updateTimeStep"
-                />
-              </v-col>
-              <v-col :sm="1" class="text-xs-center">
-                <v-icon
-                  v-on:click="incrementTimeStep(true)"
-                  :disabled="!dataLoaded || currentTimeStep === maxTimeStep"
-                >
-                  arrow_forward_ios
-                </v-icon>
-              </v-col>
+            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+              <v-slider
+                dense
+                hide-details
+                :min="minTimeStep"
+                :max="maxTimeStep"
+                :disabled="!dataLoaded"
+                :value="sliderValue"
+                @change="updateTimeStep"
+              >
+                <template v-slot:prepend>
+                  <v-icon
+                    v-on:click="decrementTimeStep(true)"
+                    :disabled="!dataLoaded || currentTimeStep === minTimeStep"
+                  >
+                    arrow_back_ios
+                  </v-icon>
+                </template>
+                <template v-slot:append>
+                  <v-icon
+                    v-on:click="incrementTimeStep(true)"
+                    :disabled="!dataLoaded || currentTimeStep === maxTimeStep"
+                  >
+                    arrow_forward_ios
+                  </v-icon>
+                </template>
+              </v-slider>
             </v-row>
-            <v-row class="ma-0 pa-0" :style="{height: '15px'}">
-              <v-col :sm="5" :style="{alignItems: 'flex-end'}">
-                <v-icon
-                  v-show="paused"
-                  v-on:click="togglePlayPause"
-                  :disabled="!dataLoaded"
-                >
-                  &#9654;
-                </v-icon>
-                <v-icon
-                  v-show="!paused"
-                  v-on:click="togglePlayPause"
-                  :disabled="!dataLoaded"
-                >
-                  &#9208;
-                </v-icon>
-              </v-col>
-              <v-spacer />
-              <v-col :sm="6">
-                <input
+            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
+              <v-col :sm="4">
+                <v-text-field
+                  dense
+                  hide-details
+                  filled
                   type="number"
                   min="minTimeStep"
                   :max="maxTimeStep"
-                  size="4"
                   :disabled="!dataLoaded"
                   :value="currentTimeStep"
                   @change="(e) => {updateTimeStep(e.target.value)}"
-                />
+                >
+                  <template>
+                    <v-icon
+                      slot="prepend"
+                      v-show="paused"
+                      v-on:click="togglePlayPause"
+                      :disabled="!dataLoaded"
+                    >
+                      &#9654;
+                    </v-icon>
+                    <v-icon
+                      slot="prepend"
+                      v-show="!paused"
+                      v-on:click="togglePlayPause"
+                      :disabled="!dataLoaded"
+                    >
+                      &#9208;
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
             </v-row>
-            <v-row class="ma-0 pa-0">
+            <v-row class="ma-0 pa-0" :style="{height: '25px'}">
               <v-col :sm="6">
-                <v-row :style="{alignItems: 'center'}">
-                  <v-col :sm="4">
-                    <v-icon v-on:click="removeRow()" :disabled="numrows < 2">
-                      remove_circle_outline
-                    </v-icon>
-                  </v-col>
-                  <v-col :sm="4" :style="{alignItems: 'center'}">
-                    <span> rows </span>
-                  </v-col>
-                  <v-col :sm="4">
-                    <v-icon v-on:click="addRow()" :disabled="numrows > 7">
-                      add_circle_outline
-                    </v-icon>
-                  </v-col>
+                <v-row class="align-center justify-space-evenly">
+                  <v-icon v-on:click="removeRow()" :disabled="numrows < 2">
+                    remove_circle_outline
+                  </v-icon>
+                  <span> rows </span>
+                  <v-icon v-on:click="addRow()" :disabled="numrows > 7">
+                    add_circle_outline
+                  </v-icon>
                 </v-row>
               </v-col>
               <v-col :sm="6">
-                <v-row :style="{alignItems: 'center'}">
-                  <v-col :sm="4">
-                    <v-icon v-on:click="removeColumn()" :disabled="numcols < 2">
-                      remove_circle_outline
-                    </v-icon>
-                  </v-col>
-                  <v-col :sm="4" :style="{alignItems: 'center'}">
-                    <span> cols </span>
-                  </v-col>
-                  <v-col :sm="4">
-                    <v-icon v-on:click="addColumn()" :disabled="numcols > 7">
-                      add_circle_outline
-                    </v-icon>
-                  </v-col>
+                <v-row class="align-center justify-space-evenly">
+                  <v-icon v-on:click="removeColumn()" :disabled="numcols < 2">
+                    remove_circle_outline
+                  </v-icon>
+                  <span> cols </span>
+                  <v-icon v-on:click="addColumn()" :disabled="numcols > 7">
+                    add_circle_outline
+                  </v-icon>
                 </v-row>
               </v-col>
             </v-row>

diff --git a/client/src/components/core/ViewControls/script.js b/client/src/components/core/ViewControls/script.js
@@ -15,7 +15,6 @@ export default {
       showSaveDialog: false,
       showLoadDialog: false,
       zoomSync: 0,
-      selectTimeStep: null,
     };
   },
 
@@ -50,6 +49,7 @@ export default {
 
   computed: {
     ...mapGetters({
+      timeStepSelectorMode: "UI_TIME_STEP_SELECTOR",
       lastSaved: "VIEWS_LAST_SAVED",
       numcols: "VIEWS_COLUMNS",
       numrows: "VIEWS_ROWS",

diff --git a/client/src/components/core/ViewControls/template.html b/client/src/components/core/ViewControls/template.html
@@ -15,7 +15,7 @@
     <v-col :sm="2" v-bind:style="{alignItems: 'center'}">
       <v-tooltip top>
         <template v-slot:activator="{on, attrs}">
-          <v-btn-toggle v-model="selectTimeStep" borderless rounded>
+          <v-btn-toggle v-model="timeStepSelectorMode" borderless rounded>
             <v-btn icon v-on:click="toggleSelectTimeStep">
               <v-icon v-on="on" v-bind="attrs"> mdi-timetable </v-icon>
             </v-btn>

diff --git a/client/src/components/widgets/PlotlyPlot/script.js b/client/src/components/widgets/PlotlyPlot/script.js
@@ -1,6 +1,6 @@
 import Plotly from "plotly.js-basic-dist-min";
 import { isEmpty, isEqual, isNil } from "lodash";
-import { mapGetters, mapMutations } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
 import { PlotType } from "../../../utils/constants";
 import Annotations from "../Annotations";
 
@@ -166,6 +166,9 @@ export default {
   },
 
   methods: {
+    ...mapActions({
+      toggleSelectTimeStep: "UI_TOGGLE_TIME_STEP",
+    }),
     ...mapMutations({
       setPauseGallery: "UI_PAUSE_GALLERY_SET",
       setTimeStep: "VIEW_TIME_STEP_SET",
@@ -181,10 +184,13 @@ export default {
       this.$nextTick(() => {
         const node = this.$refs.plotly;
         const elems = node?.getElementsByClassName("plot-container");
+        const { width, height } = this.$el.getBoundingClientRect();
         if (node !== undefined && elems.length > 0) {
           Plotly.relayout(this.$refs.plotly, {
             "xaxis.autorange": true,
             "yaxis.autorange": true,
+            width: width - 4,
+            height: height - 10,
           });
         }
       });
@@ -308,7 +314,13 @@ export default {
       if (plotReadyForUpdate) {
         this.lastLoadedTimeStep = nextImage.timestep;
         this.plotPreProcessing(nextImage);
-        Plotly.react(this.$refs.plotly, nextImage.data, nextImage.layout, {
+        const { width, height } = this.$el.getBoundingClientRect();
+        let layout = {
+          ...nextImage.layout,
+          width: width - 4,
+          height: height - 10,
+        };
+        Plotly.react(this.$refs.plotly, nextImage.data, layout, {
           autosize: true,
           modeBarButtonsToAdd: [
             {
@@ -344,6 +356,7 @@ export default {
             this.selectedTime = parseFloat(data.points[0].x);
             this.findClosestTime();
             this.selectTimeStepFromPlot();
+            this.toggleSelectTimeStep();
           }
         }
       });

diff --git a/client/src/components/widgets/Plots/template.html b/client/src/components/widgets/Plots/template.html
@@ -1,8 +1,6 @@
 <div>
   <v-card
     vertical-center
-    flat
-    :outlined="!itemId"
     v-on:drop="loadGallery($event)"
     v-on:dragover="preventDefault($event)"
     @contextmenu.prevent="requestContextMenu"

diff --git a/client/src/scss/gallery.scss b/client/src/scss/gallery.scss
@@ -151,6 +151,7 @@
 // Create border on data browser panel
 .splitpanes--vertical > .splitpanes__splitter {
   min-width: 3px;
+  width: 10px;
   background: linear-gradient(90deg, #ccc, #a5a4a4);
 }
 
@@ -258,3 +259,7 @@
 html {
   overflow: hidden;
 }
+
+.user-select-none {
+  margin: 2px 0 !important;
+}