[DONT MERGE] feat(webworker): Reworking Web Worker API and new WebWorkerManager

api-extractor.json

@@ -28,7 +28,7 @@
    *
    * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
    */
-  "mainEntryPointFilePath": "<projectFolder>/dist/cjs/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/esm/index.d.ts",
 
   /**
    * A list of NPM package names whose exports should be treated as part of this package.

common/reviews/api/core.api.md

@@ -920,6 +920,9 @@ function getVolumeViewportScrollInfo(viewport: IVolumeViewport, volumeId: string
     };
 };
 
+// @public (undocumented)
+export function getWebWorkerManager(): any;
+
 // @public (undocumented)
 function hasNaNValues(input: number[] | number): boolean;
 
@@ -2271,6 +2274,8 @@ function renderToCanvasGPU(canvas: HTMLCanvasElement, image: IImage, modality?:
 
 // @public (undocumented)
 enum RequestType {
+    // (undocumented)
+    Compute = "compute",
     // (undocumented)
     Interaction = "interaction",
     // (undocumented)

common/reviews/api/streaming-image-volume-loader.api.md

@@ -1525,6 +1525,7 @@ type PublicViewportInput = {
 
 // @public
 enum RequestType {
+    Compute = 'compute',
     Interaction = 'interaction',
     Prefetch = 'prefetch',
     Thumbnail = 'thumbnail',

karma.conf.js

@@ -97,15 +97,15 @@ module.exports = function (config) {
           },
           // NOTE: For better debugging you can comment out the
           // istanbul-instrumenter-loader below
-          {
-            test: /\.ts$/,
-            exclude: [path.resolve(__dirname, 'test')],
-            enforce: 'post',
-            use: {
-              loader: 'istanbul-instrumenter-loader',
-              options: { esModules: true },
-            },
-          },
+          // {
+          //   test: /\.ts$/,
+          //   exclude: [path.resolve(__dirname, 'test')],
+          //   enforce: 'post',
+          //   use: {
+          //     loader: 'istanbul-instrumenter-loader',
+          //     options: { esModules: true },
+          //   },
+          // },
         ],
       },
       resolve: {

package.json

@@ -102,7 +102,6 @@
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.1",
     "husky": "^8.0.3",
-    "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine": "^4.6.0",
     "jest": "^29.5.0",
     "jsdoc": "^3.6.7",
@@ -148,7 +147,7 @@
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.13.3",
     "webpack-merge": "5.8.0",
-    "worker-loader": "^3.0.8",
+    "webpack": "5.81.0",
     "xml2js": "^0.5.0"
   },
   "lint-staged": {

packages/core/api-extractor.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../api-extractor.json",
   "projectFolder": ".",
-  "mainEntryPointFilePath": "<projectFolder>/dist/cjs/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/esm/index.d.ts",
   "apiReport": {
     "reportFileName": "<unscopedPackageName>.api.md",
     "reportFolder": "../../common/reviews/api"

packages/core/package.json

@@ -19,7 +19,7 @@
     "build:esm": "tsc --project ./tsconfig.esm.json",
     "build:esm:watch": "tsc --project ./tsconfig.esm.json --watch",
     "build:umd": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
-    "build:all": "yarn run build:umd && yarn run build:cjs && yarn run build:esm",
+    "build:all": "yarn run build:umd && yarn run build:esm",
     "clean": "shx rm -rf dist",
     "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" dist/cjs && copyfiles -u 1 \"src/**/*.d.ts\" dist/esm",
     "build": "yarn run build:all && yarn run copy-dts",
@@ -33,7 +33,8 @@
     "@kitware/vtk.js": "27.3.1",
     "detect-gpu": "^5.0.22",
     "gl-matrix": "^3.4.3",
-    "lodash.clonedeep": "4.5.0"
+    "lodash.clonedeep": "4.5.0",
+    "comlink": "^4.4.1"
   },
   "contributors": [
     {

packages/core/src/RenderingEngine/StackViewport.ts

@@ -11,6 +11,7 @@ import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransf
 import * as metaData from '../metaData';
 import Viewport from './Viewport';
 import eventTarget from '../eventTarget';
+
 import {
   triggerEvent,
   isEqual,
@@ -1914,6 +1915,7 @@ class StackViewport extends Viewport implements IStackViewport {
           enabled: true,
         },
         useRGBA: true,
+        requestType,
       };
 
       const eventDetail: EventTypes.PreStackNewImageEventDetail = {
@@ -2024,6 +2026,7 @@ class StackViewport extends Viewport implements IStackViewport {
           enabled: true,
         },
         useRGBA: false,
+        requestType,
       };
 
       const eventDetail: EventTypes.PreStackNewImageEventDetail = {

packages/core/src/enums/RequestType.ts

@@ -6,8 +6,10 @@ enum RequestType {
   Interaction = 'interaction',
   /** Second highest priority for loading*/
   Thumbnail = 'thumbnail',
-  /** Lowest priority for loading*/
+  /** Third highest priority for loading, usually used for image loading in the background*/
   Prefetch = 'prefetch',
+  /** Lower priority, often used for background computations in the worker */
+  Compute = 'compute',
 }
 
 export default RequestType;

packages/core/src/index.ts

@@ -40,6 +40,7 @@ import {
   resetUseSharedArrayBuffer,
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
 } from './init';
 
 // Classes
@@ -69,6 +70,7 @@ export {
   // configs
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
   // enums
   Enums,
   CONSTANTS,

packages/core/src/init.ts

@@ -6,6 +6,8 @@ let useSharedArrayBuffer = true;
 let sharedArrayBufferMode = SharedArrayBufferModes.TRUE;
 import { deepMerge } from './utilities';
 import { Cornerstone3DConfig } from './types';
+import CentralizedWebWorkerManager from './webWorkerManager/webWorkerManager';
+
 // TODO: move sharedArrayBuffer into config.
 // TODO: change config into a class with methods to better control get/set
 const defaultConfig: Cornerstone3DConfig = {
@@ -36,6 +38,8 @@ let config: Cornerstone3DConfig = {
   // ...
 };
 
+let webWorkerManager = null;
+
 function _getGLContext(): RenderingContext {
   // Create canvas element. The canvas is not added to the
   // document itself, so it is never displayed in the
@@ -133,6 +137,11 @@ async function init(configuration = config): Promise<boolean> {
   setUseSharedArrayBuffer(sharedArrayBufferMode);
 
   csRenderInitialized = true;
+
+  if (!webWorkerManager) {
+    webWorkerManager = new CentralizedWebWorkerManager();
+  }
+
   return csRenderInitialized;
 }
 
@@ -256,6 +265,14 @@ function _updateRenderingPipelinesForAllViewports(): void {
   );
 }
 
+function getWebWorkerManager() {
+  if (!webWorkerManager) {
+    webWorkerManager = new CentralizedWebWorkerManager();
+  }
+
+  return webWorkerManager;
+}
+
 export {
   init,
   getShouldUseCPURendering,
@@ -268,4 +285,5 @@ export {
   resetUseSharedArrayBuffer,
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
 };

packages/core/src/requestPool/requestPoolManager.ts

@@ -78,12 +78,14 @@ class RequestPoolManager {
     interaction: 0,
     thumbnail: 0,
     prefetch: 0,
+    compute: 0,
   };
   /* maximum number of requests of each type. */
   public maxNumRequests: {
     interaction: number;
     thumbnail: number;
     prefetch: number;
+    compute: number;
   };
   /* A public property that is used to set the delay between requests. */
   public grabDelay: number;
@@ -101,6 +103,7 @@ class RequestPoolManager {
       interaction: { 0: [] },
       thumbnail: { 0: [] },
       prefetch: { 0: [] },
+      compute: { 0: [] },
     };
 
     this.grabDelay = 5;
@@ -110,12 +113,14 @@ class RequestPoolManager {
       interaction: 0,
       thumbnail: 0,
       prefetch: 0,
+      compute: 0,
     };
 
     this.maxNumRequests = {
       interaction: 6,
       thumbnail: 6,
       prefetch: 5,
+      compute: 15,
     };
   }
 
@@ -185,15 +190,7 @@ class RequestPoolManager {
     // Adding the request to the correct priority group of the request type
     this.requestPool[type][priority].push(requestDetails);
 
-    // Wake up
-    if (!this.awake) {
-      this.awake = true;
-      this.startGrabbing();
-    } else if (type === RequestType.Interaction) {
-      // Todo: this is a hack for interaction right now, we should separate
-      // the grabbing from the adding requests
-      this.startGrabbing();
-    }
+    this.startGrabbing();
   }
 
   /**
@@ -273,11 +270,13 @@ class RequestPoolManager {
     const hasRemainingPrefetchRequests = this.sendRequests(
       RequestType.Prefetch
     );
+    const hasRemainingComputeRequests = this.sendRequests(RequestType.Compute);
 
     if (
       !hasRemainingInteractionRequests &&
       !hasRemainingThumbnailRequests &&
-      !hasRemainingPrefetchRequests
+      !hasRemainingPrefetchRequests &&
+      !hasRemainingComputeRequests
     ) {
       this.awake = false;
     }
@@ -323,7 +322,4 @@ class RequestPoolManager {
   }
 }
 
-const requestPoolManager = new RequestPoolManager();
-
 export { RequestPoolManager };
-export default requestPoolManager;