perf(segmentation): make segmentation read 3x faster (#3577)

platform/app/package.json

@@ -30,7 +30,6 @@
     "dev:dcm4chee": "cross-env NODE_ENV=development APP_CONFIG=config/local_dcm4chee.js webpack serve --config .webpack/webpack.pwa.js",
     "dev:static": "cross-env NODE_ENV=development APP_CONFIG=config/local_static.js webpack serve --config .webpack/webpack.pwa.js",
     "dev:viewer": "yarn run dev",
-    "preinstall": "node preinstall.js",
     "start": "yarn run dev",
     "test:e2e": "cypress open",
     "test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
@@ -51,7 +50,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.7.1",
+    "@cornerstonejs/dicom-image-loader": "^1.9.3",
     "@ohif/core": "3.7.0-beta.42",
     "@ohif/extension-cornerstone": "3.7.0-beta.42",
     "@ohif/extension-cornerstone-dicom-rt": "3.7.0-beta.42",

platform/core/package.json

@@ -35,7 +35,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.7.1",
+    "@cornerstonejs/dicom-image-loader": "^1.9.3",
     "@ohif/ui": "3.7.0-beta.42",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/core/src/classes/MetadataProvider.js

@@ -70,6 +70,11 @@ class MetadataProvider {
       SeriesInstanceUID,
       SOPInstanceUID
     );
+
+    if (!instance) {
+      return;
+    }
+
     return (
       (frameNumber && combineFrameInstance(frameNumber, instance)) || instance
     );

platform/core/src/extensions/ExtensionManager.ts

@@ -27,6 +27,7 @@ export type ExtensionConfiguration = Record<string, unknown>;
  */
 export interface ExtensionParams extends ExtensionConstructor {
   extensionManager: ExtensionManager;
+  servicesManager: ServicesManager;
   configuration?: ExtensionConfiguration;
 }
 
@@ -43,6 +44,7 @@ export interface Extension {
   getViewportModule?: (p: ExtensionParams) => unknown;
   getUtilityModule?: (p: ExtensionParams) => unknown;
   getCustomizationModule?: (p: ExtensionParams) => unknown;
+  getSopClassHandlerModule?: (p: ExtensionParams) => unknown;
   onModeEnter?: () => void;
   onModeExit?: () => void;
 }

platform/core/src/services/DisplaySetService/DisplaySetService.ts

@@ -1,3 +1,4 @@
+import { ExtensionManager } from '../../extensions';
 import { InstanceMetadata } from '../../types';
 import { PubSubService } from '../_shared/pubSubServiceInterface';
 import EVENTS from './EVENTS';
@@ -47,6 +48,7 @@ export default class DisplaySetService extends PubSubService {
   };
 
   public activeDisplaySets = [];
+  extensionManager: ExtensionManager;
 
   protected activeDisplaySetsMap = new Map<string, DisplaySet>();
 

platform/docs/docs/deployment/iframe.md

@@ -161,3 +161,9 @@ devServer: {
   }
 }
 ```
+
+:::tip
+Take a look at how other people have integrated OHIF in their react app
+
+example1: https://github.com/OHIF/Viewers/issues/3371#issuecomment-1630405255
+:::

platform/ui/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx

@@ -21,26 +21,23 @@ function LoadingIndicatorTotalPercent({
   loadingText = 'Loading...',
   targetText = 'segments',
 }: Props): JSX.Element {
-  percentComplete = percentComplete !== null ? percentComplete : null;
-
-  const progress = percentComplete !== null ? percentComplete : null;
+  const progress = percentComplete;
   const totalNumbersText = totalNumbers !== null ? `${totalNumbers}` : '';
   const numTargetsLoadedText =
     percentComplete !== null
       ? Math.floor((percentComplete * totalNumbers) / 100)
       : '';
 
-  const textBlock = !totalNumbers ? (
-    <div className="text-white text-sm">{loadingText}</div>
-  ) : (
-    <div className="text-white text-sm flex items-baseline space-x-1">
-      <div>Loaded</div>
-      <div>{numTargetsLoadedText}</div>
-      <div>of</div>
-      <div>{totalNumbersText}</div>
-      <div>{targetText}</div>
-    </div>
-  );
+  const textBlock =
+    !totalNumbers && percentComplete === null ? (
+      <div className="text-white text-sm">{loadingText}</div>
+    ) : !totalNumbers && percentComplete !== null ? (
+      <div className="text-white text-sm">Loaded {percentComplete}%</div>
+    ) : (
+      <div className="text-white text-sm">
+        Loaded {numTargetsLoadedText} of {totalNumbersText} {targetText}
+      </div>
+    );
 
   return (
     <LoadingIndicatorProgress

platform/ui/src/components/PatientInfo/PatientInfo.tsx

@@ -19,6 +19,7 @@ function PatientInfo({
   patientAge,
   MRN,
   thickness,
+  thicknessUnits,
   spacing,
   scanner,
   isOpen,
@@ -29,7 +30,6 @@ function PatientInfo({
   while (patientAge.charAt(0) === '0') {
     patientAge = patientAge.substr(1);
   }
-
   return (
     <div ref={showPatientInfoRef}>
       <Tooltip
@@ -90,7 +90,9 @@ function PatientInfo({
                       className={classnames(classes.infoText)}
                       title={thickness}
                     >
-                      {thickness}
+                      {thicknessUnits
+                        ? `${thickness}${thicknessUnits}`
+                        : `${thickness}`}
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
@@ -136,6 +138,7 @@ PatientInfo.propTypes = {
   patientAge: PropTypes.string,
   MRN: PropTypes.string,
   thickness: PropTypes.string,
+  thicknessUnits: PropTypes.string,
   spacing: PropTypes.string,
   scanner: PropTypes.string,
   isOpen: PropTypes.bool,

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -34,6 +34,7 @@ const ViewportActionBar = ({
     patientAge,
     MRN,
     thickness,
+    thicknessUnits,
     spacing,
     scanner,
   } = patientInformation;
@@ -169,6 +170,7 @@ const ViewportActionBar = ({
           patientAge={patientAge}
           MRN={MRN}
           thickness={thickness}
+          thicknessUnits={thicknessUnits}
           spacing={spacing}
           scanner={scanner}
         />
@@ -192,6 +194,7 @@ ViewportActionBar.propTypes = {
       patientAge: PropTypes.string.isRequired,
       MRN: PropTypes.string.isRequired,
       thickness: PropTypes.string.isRequired,
+      thicknessUnits: PropTypes.string.isRequired,
       spacing: PropTypes.string.isRequired,
       scanner: PropTypes.string.isRequired,
     }),