Make swapToFrame method faster (#633)

* Debounce render method so frame slider will respond faster

* Remove console log

Co-authored-by: Zach Mullen <zach.mullen@kitware.com>

* Add explanatory comment and remove start time const

Co-authored-by: Zach Mullen <zach.mullen@kitware.com>

Author: annehaley

web_client/src/components/ControlPanel.vue

@@ -88,11 +88,11 @@ export default {
   methods: {
     ...mapActions([
       'setLock',
+      'setCurrentFrame',
     ]),
     ...mapMutations([
       'setShowCrosshairs',
       'setStoreCrosshairs',
-      'setCurrentFrameId',
     ]),
     openScanLink() {
       window.open(this.currentViewData.scanLink, '_blank');
@@ -135,13 +135,13 @@ export default {
       }
     },
     slideToFrame(framePosition) {
-      this.setCurrentFrameId(this.currentViewData.scanFramesList[framePosition - 1]);
+      this.setCurrentFrame(this.currentViewData.scanFramesList[framePosition - 1]);
     },
     updateImage() {
       if (this.direction === 'back') {
-        this.setCurrentFrameId(this.previousFrame);
+        this.setCurrentFrame(this.previousFrame);
       } else if (this.direction === 'forward') {
-        this.setCurrentFrameId(this.nextFrame);
+        this.setCurrentFrame(this.nextFrame);
       } else if (this.direction === 'previous') {
         this.navigateToScan(this.currentViewData.upTo);
       } else if (this.direction === 'next') {
@@ -379,8 +379,6 @@ export default {
                         </div>
                         <v-slider
                           :value="currentViewData.framePosition"
-                          ticks="always"
-                          tick-size="4"
                           :min="1"
                           :max="currentViewData.scanFramesList.length"
                           @input="slideToFrame"

web_client/src/store/index.ts

@@ -4,6 +4,7 @@ import { createDirectStore } from 'direct-vuex';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import vtkProxyManager from 'vtk.js/Sources/Proxy/Core/ProxyManager';
+import macro from 'vtk.js/Sources/macros';
 import { InterpolationType } from 'vtk.js/Sources/Rendering/Core/ImageProperty/Constants';
 
 import '../utils/registerReaders';
@@ -49,9 +50,12 @@ function prepareProxyManager(proxyManager) {
       view.setOrientationAxesVisibility(false);
       view.getRepresentations().forEach((representation) => {
         representation.setInterpolationType(InterpolationType.NEAREST);
-        representation.onModified(() => {
+        representation.onModified(macro.debounce(() => {
           view.render(true);
-        });
+        }, 0));
+        // debounce timer doesn't need a wait time because
+        // the many onModified changes that it needs to collapse to a single rerender
+        // all happen simultaneously when the input data is changed.
       });
     });
   }
@@ -755,38 +759,39 @@ const {
     },
     async swapToFrame({
       state, dispatch, getters, commit,
-    }, { frame, onDownloadProgress = null }) {
+    }, { frame, onDownloadProgress = null, loadAll = true }) {
       if (!frame) {
         throw new Error("frame id doesn't exist");
       }
       commit('setLoadingFrame', true);
       commit('setErrorLoadingFrame', false);
-      const oldScan = getters.currentScan;
-      const newScan = state.scans[frame.scan];
-
-      if (newScan !== oldScan && newScan) {
-        queueLoadScan(
-          newScan, 3,
-        );
-      }
 
-      let newProxyManager = false;
-      if (oldScan !== newScan && state.proxyManager) {
-        // If we don't "shrinkProxyManager()" and reinitialize it between
-        // scans, then we can end up with no frame
-        // slices displayed, even though we have the data and attempted
-        // to render it.  This may be due to frame extents changing between
-        // scans, which is not the case from one timestep of a single scan
-        // to tne next.
-        shrinkProxyManager(state.proxyManager);
-        newProxyManager = true;
-      }
+      if (loadAll) {
+        const oldScan = getters.currentScan;
+        const newScan = state.scans[frame.scan];
 
-      if (!state.proxyManager || newProxyManager) {
-        state.proxyManager = vtkProxyManager.newInstance({
-          proxyConfiguration: proxy,
-        });
-        state.vtkViews = [];
+        if (newScan !== oldScan && newScan) {
+          queueLoadScan(
+            newScan, 3,
+          );
+        }
+        let newProxyManager = false;
+        if (oldScan !== newScan && state.proxyManager) {
+          // If we don't "shrinkProxyManager()" and reinitialize it between
+          // scans, then we can end up with no frame
+          // slices displayed, even though we have the data and attempted
+          // to render it.  This may be due to frame extents changing between
+          // scans, which is not the case from one timestep of a single scan
+          // to tne next.
+          shrinkProxyManager(state.proxyManager);
+          newProxyManager = true;
+        }
+        if (!state.proxyManager || newProxyManager) {
+          state.proxyManager = vtkProxyManager.newInstance({
+            proxyConfiguration: proxy,
+          });
+          state.vtkViews = [];
+        }
       }
 
       let sourceProxy = state.proxyManager.getActiveSource();
@@ -829,7 +834,7 @@ const {
       }
 
       // check for window lock expiry
-      if (state.windowLocked.lock) {
+      if (loadAll && state.windowLocked.lock) {
         const { currentViewData } = getters;
         const unlock = () => {
           commit('setWindowLocked', {

web_client/src/views/Scan.vue

@@ -82,6 +82,7 @@ export default {
       await this.swapToFrame({
         frame: this.frames[frameId],
         onDownloadProgress: this.onFrameDownloadProgress,
+        loadAll: false,
       });
     },
   },