refactor: Reduce bundle size (#1575)

* async load cornerstoneWADOImageLoader chunk

* Lazy initializing of CornerstoneWADIImageLoader - delayed till Viewer creation

* Async loading of react-vtkjs-viewport

* withCornerstone HOC to wrap routes requiring CornerstoneWADOImageLoader initiazation

* removed dead code in comments

* initWeWorkers is no more. Remove al its references.

Co-authored-by: kedar.netelixir <kedar.choudhary@netelixir.com>
Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

extensions/vtk/src/OHIFVTKViewport.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { getImageData, loadImageData } from 'react-vtkjs-viewport';
+import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';
 import ConnectedVTKViewport from './ConnectedVTKViewport';
 import LoadingIndicator from './LoadingIndicator.js';
 import OHIF from '@ohif/core';
@@ -69,7 +69,7 @@ class OHIFVTKViewport extends Component {
   };
 
   static defaultProps = {
-    onScroll: () => {},
+    onScroll: () => { },
   };
 
   static id = 'OHIFVTKViewport';
@@ -133,7 +133,8 @@ class OHIFVTKViewport extends Component {
     displaySetInstanceUID,
     SOPClassUID,
     SOPInstanceUID,
-    frameIndex
+    frameIndex,
+    reactVtkjsViewport
   ) => {
     const stack = OHIFVTKViewport.getCornerstoneStack(
       studies,
@@ -144,7 +145,10 @@ class OHIFVTKViewport extends Component {
       frameIndex
     );
 
-    const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
+    const imageDataObject = reactVtkjsViewport.getImageData(
+      stack.imageIds,
+      displaySetInstanceUID
+    );
     let labelmapDataObject;
     let labelmapColorLUT;
 
@@ -257,7 +261,9 @@ class OHIFVTKViewport extends Component {
     return volumeActor;
   }
 
-  setStateFromProps() {
+  async setStateFromProps() {
+    const reactVtkjsViewport = await getReactVtkjsViewport();
+
     const { studies, displaySet } = this.props.viewportData;
     const {
       StudyInstanceUID,
@@ -295,8 +301,10 @@ class OHIFVTKViewport extends Component {
       studies,
       StudyInstanceUID,
       displaySetInstanceUID,
+      sopClassUIDs[0],
       SOPInstanceUID,
-      frameIndex
+      frameIndex,
+      reactVtkjsViewport
     );
 
     this.imageDataObject = imageDataObject;
@@ -317,7 +325,7 @@ class OHIFVTKViewport extends Component {
         dataDetails,
       },
       () => {
-        this.loadProgressively(imageDataObject);
+        this.loadProgressively(imageDataObject, reactVtkjsViewport);
 
         // TODO: There must be a better way to do this.
         // We do this so that if all the data is available the react-vtkjs-viewport
@@ -335,26 +343,26 @@ class OHIFVTKViewport extends Component {
     );
   }
 
-  componentDidMount() {
-    this.setStateFromProps();
+  async componentDidMount() {
+    await this.setStateFromProps();
   }
 
-  componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps) {
     const { displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
 
     if (
       displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
       displaySet.frameIndex !== prevDisplaySet.frameIndex
     ) {
-      this.setStateFromProps();
+      await this.setStateFromProps();
     }
   }
 
-  loadProgressively(imageDataObject) {
-    loadImageData(imageDataObject);
+  loadProgressively(imageDataObject, reactVtkjsViewport) {
+    reactVtkjsViewport.loadImageData(imageDataObject);
 
     const { isLoading, insertPixelDataPromises } = imageDataObject;
 

extensions/vtk/src/VTKViewport.js

@@ -1,9 +1,16 @@
 import React, { useEffect, useCallback } from 'react';
-import { View2D } from 'react-vtkjs-viewport';
+// import { View2D } from 'react-vtkjs-viewport';
 import PropTypes from 'prop-types';
+import asyncComponent from './asyncComponent.js';
+import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';
 
 import './VTKViewport.css';
 
+const View2D = asyncComponent(async () => {
+  const reactVtkjsViewport = await getReactVtkjsViewport();
+  return { default: reactVtkjsViewport.View2D };
+});
+
 const VTKViewport = props => {
   const style = { width: '100%', height: '100%', position: 'relative' };
 
@@ -52,7 +59,7 @@ VTKViewport.propTypes = {
 };
 
 VTKViewport.defaultProps = {
-  onScroll: () => {},
+  onScroll: () => { },
 };
 
 export default VTKViewport;

extensions/vtk/src/commandsModule.js

@@ -1,10 +1,5 @@
 import throttle from 'lodash.throttle';
-import {
-  vtkInteractorStyleMPRCrosshairs,
-  vtkInteractorStyleMPRWindowLevel,
-  vtkInteractorStyleMPRRotate,
-  vtkSVGCrosshairsWidget,
-} from 'react-vtkjs-viewport';
+import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';
 
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
@@ -124,16 +119,18 @@ const commandsModule = ({ commandsManager }) => {
 
       _setView(api, [0, 1, 0], [0, 0, 1]);
     },
-    enableRotateTool: () => {
+    enableRotateTool: async () => {
+      const reactVtkjsViewport = await getReactVtkjsViewport();
       apis.forEach(api => {
-        const istyle = vtkInteractorStyleMPRRotate.newInstance();
+        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRRotate.newInstance();
 
         api.setInteractorStyle({ istyle });
       });
     },
-    enableCrosshairsTool: () => {
+    enableCrosshairsTool: async () => {
+      const reactVtkjsViewport = await getReactVtkjsViewport();
       apis.forEach((api, apiIndex) => {
-        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,
@@ -141,7 +138,7 @@ const commandsModule = ({ commandsManager }) => {
         });
       });
     },
-    enableLevelTool: () => {
+    enableLevelTool: async () => {
       function updateVOI(apis, windowWidth, windowCenter) {
         apis.forEach(api => {
           api.updateVOI(windowWidth, windowCenter);
@@ -162,8 +159,9 @@ const commandsModule = ({ commandsManager }) => {
         },
       };
 
+      const reactVtkjsViewport = await getReactVtkjsViewport();
       apis.forEach(api => {
-        const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
+        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRWindowLevel.newInstance();
 
         api.setInteractorStyle({ istyle, callbacks });
       });
@@ -260,14 +258,15 @@ const commandsModule = ({ commandsManager }) => {
       }
 
       // Add widgets and set default interactorStyle of each viewport.
+      const reactVtkjsViewport = await getReactVtkjsViewport();
       apis.forEach((api, apiIndex) => {
         api.addSVGWidget(
-          vtkSVGCrosshairsWidget.newInstance(),
+          reactVtkjsViewport.vtkSVGCrosshairsWidget.newInstance(),
           'crosshairsWidget'
         );
 
         const uid = api.uid;
-        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,

extensions/vtk/src/utils/getReactVtkjsViewport.js

@@ -0,0 +1,5 @@
+export function getReactVtkjsViewport() {
+  return import(
+    /* webpackChunkName: "ReactVtkjsViewport" */ 'react-vtkjs-viewport'
+  );
+}