perf: ⚡️ Throttle UI refresh of synced WL value in vtk port (#1070)

extensions/vtk/package.json

@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "react-vtkjs-viewport": "^0.3.1"
+    "react-vtkjs-viewport": "^0.3.1",
+    "lodash.throttle": "^4.1.1"
   },
   "devDependencies": {
     "@ohif/core": "^1.4.0",

extensions/vtk/src/OHIFVTKViewport.js

@@ -213,6 +213,10 @@ class OHIFVTKViewport extends Component {
 
     volumeMapper.setSampleDistance(sampleDistance);
 
+    // Be generous to surpress warnings, as the logging really hurts performance.
+    // TODO: maybe we should auto adjust samples to 1000.
+    volumeMapper.setMaximumSamplesPerRay(4000);
+
     volumeCache[displaySetInstanceUid] = volumeActor;
 
     return volumeActor;

extensions/vtk/src/commandsModule.js

@@ -9,6 +9,7 @@ import {
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
+import throttle from 'lodash.throttle';
 
 const { BlendMode } = Constants;
 
@@ -102,15 +103,23 @@ const actions = {
     });
   },
   enableLevelTool: () => {
+    function updateVOI(apis, windowWidth, windowCenter) {
+      apis.forEach(api => {
+        api.updateVOI(windowWidth, windowCenter);
+      });
+    }
+
+    const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
+
     const callbacks = {
       setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
         apis.forEach(api => {
           const renderWindow = api.genericRenderWindow.getRenderWindow();
 
           renderWindow.render();
-
-          api.updateVOI(windowWidth, windowCenter);
         });
+
+        throttledUpdateVOIs(apis, windowWidth, windowCenter);
       },
     };