Merge pull request #2 from OHIF/v3-stable

V3 stable

.docker/Viewer-v3.x/default.conf.template

@@ -1,10 +1,16 @@
 server {
   listen ${PORT};
-  # listen 3000;
   location / {
     root   /usr/share/nginx/html;
     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
+    add_header Cross-Origin-Resource-Policy same-origin;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {

.docker/Viewer-v3.x/entrypoint.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-envsubst `${PORT}` < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
+envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
 
 if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
   then

Dockerfile

@@ -63,11 +63,10 @@ RUN yarn run build
 # which runs Nginx using Alpine Linux
 FROM nginxinc/nginx-unprivileged:1.23.1-alpine as final
 #RUN apk add --no-cache bash
-ENV PORT=3000
+ENV PORT=80
 RUN rm /etc/nginx/conf.d/default.conf
 USER nginx
 COPY --chown=nginx:nginx .docker/Viewer-v3.x /usr/src
-RUN envsubst `${PORT}` < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
 RUN chmod 777 /usr/src/entrypoint.sh
 COPY --from=builder /usr/src/app/platform/viewer/dist /usr/share/nginx/html
 ENTRYPOINT ["/usr/src/entrypoint.sh"]

extensions/cornerstone-dicom-sr/package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "7.16.3",
     "classnames": "^2.2.6",
-    "@cornerstonejs/core": "^0.21.5",
-    "@cornerstonejs/tools": "^0.29.8"
+    "@cornerstonejs/core": "^0.22.3",
+    "@cornerstonejs/tools": "^0.30.6"
   }
 }

extensions/cornerstone/package.json

@@ -43,9 +43,9 @@
   },
   "dependencies": {
     "@babel/runtime": "7.17.9",
-    "@cornerstonejs/core": "^0.21.5",
-    "@cornerstonejs/streaming-image-volume-loader": "^0.6.5",
-    "@cornerstonejs/tools": "^0.29.8",
+    "@cornerstonejs/core": "^0.22.3",
+    "@cornerstonejs/streaming-image-volume-loader": "^0.6.11",
+    "@cornerstonejs/tools": "^0.30.6",
     "@kitware/vtk.js": "25.9.0",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/cornerstone/src/init.tsx

@@ -70,6 +70,7 @@ export default async function init({
     DisplaySetService,
     UIDialogService,
     UIModalService,
+    UINotificationService,
     CineService,
     CornerstoneViewportService,
     HangingProtocolService,
@@ -79,6 +80,15 @@ export default async function init({
 
   window.services = servicesManager.services;
 
+  if (!window.crossOriginIsolated) {
+    UINotificationService.show({
+      title: 'Cross Origin Isolation',
+      message:
+        'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
+      type: 'warning',
+    });
+  }
+
   if (cornerstone.getShouldUseCPURendering()) {
     _showCPURenderingModal(UIModalService, HangingProtocolService);
   }

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -1332,9 +1332,7 @@ class SegmentationService {
       segDisplaySetInstanceUID
     );
 
-    const {
-      FrameOfReferenceUID: segFrameOfReferenceUID,
-    } = segDisplaySet.instance;
+    const segFrameOfReferenceUID = segDisplaySet.instance?.FrameOfReferenceUID;
 
     viewportDisplaySetInstanceUIDs.forEach(displaySetInstanceUID => {
       // check if the displaySet is sharing the same frameOfReferenceUID

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -136,7 +136,7 @@ class CornerstoneViewportService implements IViewportService {
   public destroy() {
     this._removeResizeObserver();
     this.viewportGridResizeObserver = null;
-    this.renderingEngine.destroy();
+    this.renderingEngine?.destroy?.();
     this.viewportsDisplaySets.clear();
     this.renderingEngine = null;
     cache.purgeCache();

extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx

@@ -82,6 +82,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
           <div className="w-1/2">
             <InputRange
               value={instanceNumber}
+              key={selectedDisplaySetInstanceUID}
               onChange={value => {
                 setInstanceNumber(parseInt(value));
               }}

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -234,6 +234,7 @@ function PanelStudyBrowser({
   return (
     <StudyBrowser
       tabs={tabs}
+      servicesManager={servicesManager}
       activeTabName={activeTabName}
       onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
       activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}

extensions/default/src/ViewerLayout/index.tsx

@@ -202,6 +202,7 @@ function ViewerLayout({
     <div>
       <Header
         menuOptions={menuOptions}
+        isReturnEnabled={!!appConfig.showStudyList}
         onClickReturnButton={onClickReturnButton}
         WhiteLabeling={appConfig.whiteLabeling}
       >

extensions/default/src/getCustomizationModule.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ *
+ * Note: this is an example of how the customization module can be used
+ * using the customization module. Below, we are adding a new custom route
+ * to the application at the path /custom and rendering a custom component
+ * Real world use cases of the having a custom route would be to add a
+ * custom page for the user to view their profile, or to add a custom
+ * page for login etc.
+ */
+export default function getCustomizationModule() {
+  return [
+    {
+      name: 'helloPage',
+      value: {
+        id: 'customRoutes',
+        routes: [
+          {
+            path: '/custom',
+            children: () => (
+              <h1 style={{ color: 'white' }}>Hello Custom Route</h1>
+            ),
+          },
+        ],
+      },
+    },
+  ];
+}

extensions/default/src/index.js

@@ -6,6 +6,7 @@ import getToolbarModule from './getToolbarModule';
 import commandsModule from './commandsModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
 import getStudiesForPatientByStudyInstanceUID from './Panels/getStudiesForPatientByStudyInstanceUID';
+import getCustomizationModule from './getCustomizationModule';
 import { id } from './id.js';
 import init from './init';
 
@@ -36,6 +37,8 @@ const defaultExtension = {
       },
     ];
   },
+
+  getCustomizationModule,
 };
 
 export default defaultExtension;

extensions/measurement-tracking/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "classnames": "^2.2.6",
-    "@cornerstonejs/core": "^0.21.5",
-    "@cornerstonejs/tools": "^0.29.8",
+    "@cornerstonejs/core": "^0.22.3",
+    "@cornerstonejs/tools": "^0.30.6",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "dcmjs": "^0.28.3",
     "prop-types": "^15.6.2",

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -349,6 +349,7 @@ function PanelStudyBrowserTracking({
   return (
     <StudyBrowser
       tabs={tabs}
+      servicesManager={servicesManager}
       activeTabName={activeTabName}
       expandedStudyInstanceUIDs={expandedStudyInstanceUIDs}
       onClickStudy={_handleStudyClick}

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -86,6 +86,8 @@ function TrackedCornerstoneViewport(props) {
       cineService.playClip(element, {
         framesPerSecond: validFrameRate,
       });
+    } else {
+      cineService.stopClip(element);
     }
   };
 

modes/basic-dev-mode/src/index.js

@@ -140,7 +140,6 @@ function modeFactory({ modeConfiguration }) {
       } = servicesManager.services;
 
       ToolBarService.reset();
-      MeasurementService.clearMeasurements();
       ToolGroupService.destroy();
     },
     validationTags: {

modes/longitudinal/src/index.js

@@ -67,7 +67,13 @@ function modeFactory() {
      * Lifecycle hooks
      */
     onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
-      const { ToolBarService, ToolGroupService } = servicesManager.services;
+      const {
+        MeasurementService,
+        ToolBarService,
+        ToolGroupService,
+      } = servicesManager.services;
+
+      MeasurementService.clearMeasurements();
 
       // Init Default and SR ToolGroups
       initToolGroups(extensionManager, ToolGroupService, commandsManager);
@@ -120,20 +126,16 @@ function modeFactory() {
       const {
         ToolGroupService,
         SyncGroupService,
-        MeasurementService,
         ToolBarService,
         SegmentationService,
         CornerstoneViewportService,
-        HangingProtocolService,
       } = servicesManager.services;
 
       ToolBarService.reset();
-      MeasurementService.clearMeasurements();
       ToolGroupService.destroy();
       SyncGroupService.destroy();
       SegmentationService.destroy();
       CornerstoneViewportService.destroy();
-      HangingProtocolService.reset();
     },
     validationTags: {
       study: [],

modes/tmtv/src/index.js

@@ -136,21 +136,17 @@ function modeFactory({ modeConfiguration }) {
       const {
         ToolGroupService,
         SyncGroupService,
-        MeasurementService,
         ToolBarService,
         SegmentationService,
         CornerstoneViewportService,
-        HangingProtocolService,
       } = servicesManager.services;
 
       unsubscriptions.forEach(unsubscribe => unsubscribe());
       ToolBarService.reset();
-      MeasurementService.clearMeasurements();
       ToolGroupService.destroy();
       SyncGroupService.destroy();
       SegmentationService.destroy();
       CornerstoneViewportService.destroy();
-      HangingProtocolService.reset();
     },
     validationTags: {
       study: [],

modes/tmtv/src/utils/setFusionActiveVolume.js

@@ -32,14 +32,17 @@ export default function setFusionActiveVolume(
     toolNames.EllipticalROI
   );
 
+  // Todo: this should not take into account the loader id
+  const volumeId = `cornerstoneStreamingImageVolume:${displaySets[0].displaySetInstanceUID}`;
+
   const windowLevelConfig = {
     ...wlToolConfig,
-    volumeId: displaySets[0].displaySetInstanceUID,
+    volumeId,
   };
 
   const ellipticalROIConfig = {
     ...ellipticalToolConfig,
-    volumeId: displaySets[0].displaySetInstanceUID,
+    volumeId,
   };
 
   ToolGroupService.setToolConfiguration(

platform/core/src/extensions/ExtensionManager.js

@@ -40,13 +40,12 @@ export default class ExtensionManager {
       _extensionLifeCycleHooks,
     } = this;
 
-    const {
-      MeasurementService,
-      ViewportGridService,
-    } = _servicesManager.services;
-
-    MeasurementService.clearMeasurements();
-    ViewportGridService.reset();
+    // The onModeEnter of the service must occur BEFORE the extension
+    // onModeEnter in order to reset the state to a standard state
+    // before the extension restores and cached data.
+    for (const service of Object.values(_servicesManager.services)) {
+      service?.onModeEnter?.();
+    }
 
     registeredExtensionIds.forEach(extensionId => {
       const onModeEnter = _extensionLifeCycleHooks.onModeEnter[extensionId];
@@ -69,14 +68,6 @@ export default class ExtensionManager {
       _extensionLifeCycleHooks,
     } = this;
 
-    const {
-      MeasurementService,
-      ViewportGridService,
-    } = _servicesManager.services;
-
-    MeasurementService.clearMeasurements();
-    ViewportGridService.reset();
-
     registeredExtensionIds.forEach(extensionId => {
       const onModeExit = _extensionLifeCycleHooks.onModeExit[extensionId];
 
@@ -87,6 +78,16 @@ export default class ExtensionManager {
         });
       }
     });
+
+    // The service onModeExit calls must occur after the extension ones
+    // so that extension ones can store/restore data.
+    for (const service of Object.values(_servicesManager.services)) {
+      try {
+        service?.onModeExit?.();
+      } catch (e) {
+        console.warn('onModeExit caught', e);
+      }
+    }
   }
 
   /**
@@ -200,6 +201,7 @@ export default class ExtensionManager {
           case MODULE_TYPES.SOP_CLASS_HANDLER:
           case MODULE_TYPES.CONTEXT:
           case MODULE_TYPES.LAYOUT_TEMPLATE:
+          case MODULE_TYPES.CUSTOMIZATION:
           case MODULE_TYPES.UTILITY:
             // Default for most extension points,
             // Just adds each entry ready for consumption by mode.

platform/core/src/extensions/ExtensionManager.test.js

@@ -235,6 +235,9 @@ describe('ExtensionManager.js', () => {
         getUtilityModule: () => {
           return [{}];
         },
+        getCustomizationModule: () => {
+          return [{}];
+        },
       };
 
       await extensionManager.registerExtension(extension);

platform/core/src/extensions/MODULE_TYPES.js

@@ -1,5 +1,6 @@
 export default {
   COMMANDS: 'commandsModule',
+  CUSTOMIZATION: 'customizationModule',
   DATA_SOURCE: 'dataSourcesModule',
   PANEL: 'panelModule',
   SOP_CLASS_HANDLER: 'sopClassHandlerModule',

platform/core/src/index.test.js

@@ -24,6 +24,7 @@ describe('Top level exports', () => {
       'OHIF',
       //
       'CineService',
+      'CustomizationServiceRegistration',
       'UIDialogService',
       'UIModalService',
       'UINotificationService',

platform/core/src/index.ts

@@ -27,6 +27,7 @@ import {
   HangingProtocolService,
   pubSubServiceInterface,
   UserAuthenticationService,
+  CustomizationServiceRegistration,
 } from './services';
 
 import IWebApiDataSource from './DataSources/IWebApiDataSource';
@@ -57,6 +58,7 @@ const OHIF = {
   viewer: {},
   //
   CineService,
+  CustomizationServiceRegistration,
   UIDialogService,
   UIModalService,
   UINotificationService,
@@ -92,6 +94,7 @@ export {
   DICOMWeb,
   //
   CineService,
+  CustomizationServiceRegistration,
   UIDialogService,
   UIModalService,
   UINotificationService,