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>

platform/viewer/src/utils/cornerstoneWADOImageLoader.js

@@ -0,0 +1,79 @@
+import OHIF from '@ohif/core';
+import cornerstone from 'cornerstone-core';
+import dicomParser from 'dicom-parser';
+import React from 'react';
+
+export function getCornerstoneWADOImageLoader() {
+  return import(
+    /* webpackChunkName: "CornerstoneWADOImageLoader" */ 'cornerstone-wado-image-loader'
+  );
+}
+
+let initialized = false;
+export async function initCornerstoneWADOImageLoader() {
+  if (initialized) return;
+  const cornerstoneWADOImageLoader = await getCornerstoneWADOImageLoader();
+  // For debugging
+  //if (process.env.node_env === 'development') {
+  window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
+  //}
+
+  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
+
+  OHIF.user.getAccessToken = () => {
+    // TODO: Get the Redux store from somewhere else
+    const state = window.store.getState();
+    if (!state.oidc || !state.oidc.user) {
+      return;
+    }
+
+    return state.oidc.user.accesstoken;
+  };
+
+  cornerstoneWADOImageLoader.configure({
+    beforeSend: function (xhr) {
+      const headers = OHIF.DICOMWeb.getAuthorizationHeader();
+
+      if (headers.Authorization) {
+        xhr.setRequestHeader('Authorization', headers.Authorization);
+      }
+    },
+  });
+
+  const config = {
+    maxWebWorkers: Math.max(navigator.hardwareConcurrency - 1, 1),
+    startWebWorkersOnDemand: true,
+    taskConfiguration: {
+      decodeTask: {
+        initializeCodecsOnStartup: false,
+        usePDFJS: false,
+        strict: false,
+      },
+    },
+  };
+  cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
+
+  initialized = true;
+}
+
+export function withCornerstone(Component) {
+  // eslint-disable-next-line react/display-name
+  return props => {
+    const [
+      cornerstoneWADOImageLoaderInitialized,
+      setCornerstoneWADOImageLoaderInitialized,
+    ] = React.useState(false);
+
+    React.useEffect(() => {
+      initCornerstoneWADOImageLoader().then(() =>
+        setCornerstoneWADOImageLoaderInitialized(true)
+      );
+    }, []);
+
+    if (!cornerstoneWADOImageLoaderInitialized) {
+      return null;
+    }
+    return <Component {...props} />;
+  };
+}

platform/viewer/src/utils/index.js

@@ -1,4 +1,3 @@
 import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js';
-import initWebWorkers from './initWebWorkers.js';
 
-export { getUserManagerForOpenIdConnectClient, initWebWorkers };
+export { getUserManagerForOpenIdConnectClient };

platform/viewer/src/utils/index.test.js

@@ -5,7 +5,7 @@ describe('utils', () => {
     const utilExports = Object.keys(utils).sort();
 
     expect(utilExports).toEqual(
-      ['getUserManagerForOpenIdConnectClient', 'initWebWorkers'].sort()
+      ['getUserManagerForOpenIdConnectClient'].sort()
     );
   });
 });

platform/viewer/src/utils/initWebWorkers.js

@@ -1,22 +0,0 @@
-import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
-
-let initialized = false;
-
-export default function initWebWorkers() {
-  const config = {
-    maxWebWorkers: Math.max(navigator.hardwareConcurrency - 1, 1),
-    startWebWorkersOnDemand: true,
-    taskConfiguration: {
-      decodeTask: {
-        initializeCodecsOnStartup: false,
-        usePDFJS: false,
-        strict: false,
-      },
-    },
-  };
-
-  if (!initialized) {
-    cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
-    initialized = true;
-  }
-}

platform/viewer/src/utils/initWebWorkers.test.js

@@ -1,23 +0,0 @@
-import initWebWorkers from './initWebWorkers.js';
-import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
-
-describe('initWebWorkers', () => {
-  it("initializes cornerstoneWADOImageLoader's web workers", () => {
-    initWebWorkers();
-
-    expect(
-      cornerstoneWADOImageLoader.webWorkerManager.initialize
-    ).toHaveBeenCalled();
-  });
-});
-
-describe('initWebWorkers', () => {
-  it("initializes cornerstoneWADOImageLoader's web workers only once", () => {
-    initWebWorkers();
-    initWebWorkers();
-
-    expect(
-      cornerstoneWADOImageLoader.webWorkerManager.initialize
-    ).toHaveBeenCalledTimes(1);
-  });
-});