feat(ViewportActionMenu): window level per viewport / new patient info / colorbars/ 3D presets and 3D volume rendering (#3963)

Co-authored-by: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>

platform/app/cypress/integration/MultiStudy.spec.js

@@ -15,7 +15,7 @@ describe('OHIF Multi Study', () => {
     cy.get('[data-cy="viewport-pane"]').as('viewportPane');
     cy.get('@viewportPane').its('length').should('be.eq', 4);
 
-    cy.get('[data-cy="studyDate"]').as('studyDate');
+    cy.get('[data-cy="viewport-overlay-top-left"] [title="Study date"]').as('studyDate');
 
     cy.get('@studyDate').should(studyDate => {
       expect(studyDate.length).to.be.eq(4);

platform/app/cypress/integration/customization/HangingProtocol.spec.js

@@ -36,6 +36,6 @@ describe('OHIF HP', () => {
     cy.initCommonElementsAliases();
 
     // The specified series/sop UID's are index 101, so ensure that image is displayed
-    cy.get('@viewportInfoTopRight').should('contains.text', 'I:6');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'I:6');
   });
 });

platform/app/cypress/integration/measurement-tracking/OHIFCornerstoneHotkeys.spec.js

@@ -29,10 +29,10 @@ describe('OHIF Cornerstone Hotkeys', () => {
   it('checks if hotkeys "ArrowUp" and "ArrowDown" can navigate in the stack', () => {
     // Hotkey ArrowDown
     cy.get('body').type('{downarrow}');
-    cy.get('@viewportInfoTopRight').should('contains.text', 'I:2 (2/26)');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'I:2 (2/26)');
     // Hotkey ArrowUp
     cy.get('body').type('{uparrow}');
-    cy.get('@viewportInfoTopRight').should('contains.text', 'I:1 (1/26)');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'I:1 (1/26)');
   });
 
   it('checks if hotkeys "V" and "H" can flip the image', () => {

platform/app/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js

@@ -83,7 +83,7 @@ describe('OHIF Cornerstone Toolbar', () => {
       .trigger('mouseup', { buttons: 1 });
 
     // The exact text is slightly dependent on the viewport resolution, so leave a range
-    cy.get('@viewportInfoTopLeft').should($txt => {
+    cy.get('@viewportInfoBottomLeft').should($txt => {
       const text = $txt.text();
       expect(text).to.include('W:118').include('L:479');
     });
@@ -143,7 +143,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.resetViewport();
 
     const expectedText = 'W:958L:479';
-    cy.get('@viewportInfoTopLeft').should('have.text', expectedText);
+    cy.get('@viewportInfoBottomLeft').should('have.text', expectedText);
   });
 
   /*it('checks if CINE tool will prompt a modal with working controls', () => {

platform/app/cypress/integration/measurement-tracking/OHIFGeneralViewer.spec.js

@@ -8,7 +8,7 @@ describe('OHIF General Viewer', function () {
   it('scrolls series stack using scrollbar', function () {
     cy.scrollToIndex(13);
 
-    cy.get('@viewportInfoTopRight').should('contains.text', '14');
+    cy.get('@viewportInfoBottomRight').should('contains.text', '14');
   });
 
   it('performs right click to zoom', function () {
@@ -32,7 +32,7 @@ describe('OHIF General Viewer', function () {
       .trigger('mouseup');
 
     // make sure the new zoom level is less than the initial
-    cy.get('@viewportInfoTopLeft').then($viewportInfo => {
+    cy.get('@viewportInfoBottomLeft').then($viewportInfo => {
       const zoomLevelFinal = $viewportInfo.text().substring(6, 9);
       expect(zoomLevelFinal < zoomLevelInitial).to.eq(true);
     });

platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js

@@ -51,13 +51,13 @@ describe('OHIF Measurement Panel', function () {
     // Reset to default tool so that the new add length works
     cy.addLengthMeasurement([100, 100], [200, 200]); //Adding measurement in the viewport
 
-    cy.get('@viewportInfoTopRight').should('contains.text', '(14/');
+    cy.get('@viewportInfoBottomRight').should('contains.text', '(14/');
 
     // Click on first measurement item
     cy.get('[data-cy="measurement-item"]').eq(0).click();
 
-    cy.get('@viewportInfoTopRight').should('contains.text', '(1/');
-    cy.get('@viewportInfoTopRight').should('not.contains.text', '(14/');
+    cy.get('@viewportInfoBottomRight').should('contains.text', '(1/');
+    cy.get('@viewportInfoBottomRight').should('not.contains.text', '(14/');
   });
 
   /*

platform/app/cypress/integration/volume/MPR.spec.js

@@ -31,31 +31,8 @@ describe('OHIF MPR', () => {
     cy.wait(250);
     cy.get('[data-cy="MPR"]').click();
 
-    cy.get('[data-cy="thumbnail-viewport-labels"]').should('have.length', 3);
-
     cy.get('.cornerstone-canvas').should('have.length', 3);
 
-    cy.get('[data-cy="thumbnail-viewport-labels"]')
-      .eq(2)
-      .find('div')
-      .should('have.length', 3)
-      .each(($div, index) => {
-        const text = $div.text();
-        switch (index) {
-          case 0:
-            expect(text).to.equal('A');
-            break;
-          case 1:
-            expect(text).to.equal('B');
-            break;
-          case 2:
-            expect(text).to.equal('C');
-            break;
-          default:
-            throw new Error(`Unexpected div found with text: ${text}`);
-        }
-      });
-
     // check cornerstone to see if each has images
     // we can later do visual testing to match the images with a baseline
     cy.window()
@@ -81,9 +58,6 @@ describe('OHIF MPR', () => {
     cy.get('[data-cy="MPR"]').click();
 
     cy.get('.cornerstone-canvas').should('have.length', 1);
-
-    // should not have any div under it
-    cy.get('[data-cy="thumbnail-viewport-labels"]').eq(2).find('div').should('have.length', 0);
   });
 
   it('should correctly render Crosshairs for MPR', () => {

platform/app/src/App.tsx

@@ -5,7 +5,13 @@ import i18n from '@ohif/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 import Compose from './routes/Mode/Compose';
-import { ServicesManager, ExtensionManager, CommandsManager, HotkeysManager } from '@ohif/core';
+import {
+  ServicesManager,
+  ExtensionManager,
+  CommandsManager,
+  HotkeysManager,
+  ServiceProvidersManager,
+} from '@ohif/core';
 import {
   DialogProvider,
   Modal,
@@ -28,6 +34,7 @@ import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes';
 let commandsManager: CommandsManager,
   extensionManager: ExtensionManager,
   servicesManager: ServicesManager,
+  serviceProvidersManager: ServiceProvidersManager,
   hotkeysManager: HotkeysManager;
 
 function App({ config, defaultExtensions, defaultModes }) {
@@ -48,6 +55,7 @@ function App({ config, defaultExtensions, defaultModes }) {
   commandsManager = init.commandsManager;
   extensionManager = init.extensionManager;
   servicesManager = init.servicesManager;
+  serviceProvidersManager = init.serviceProvidersManager;
   hotkeysManager = init.hotkeysManager;
 
   // Set appConfig
@@ -78,6 +86,15 @@ function App({ config, defaultExtensions, defaultModes }) {
     [DialogProvider, { service: uiDialogService }],
     [ModalProvider, { service: uiModalService, modal: Modal }],
   ];
+
+  // Loop through and register each of the service providers registered with the ServiceProvidersManager.
+  const providersFromManager = Object.entries(serviceProvidersManager.providers);
+  if (providersFromManager.length > 0) {
+    providersFromManager.forEach(([serviceName, provider]) => {
+      providers.push([provider, { service: servicesManager.services[serviceName] }]);
+    });
+  }
+
   const CombinedProviders = ({ children }) => Compose({ components: providers, children });
 
   let authRoutes = null;

platform/app/src/appInit.js

@@ -2,6 +2,7 @@ import {
   CommandsManager,
   ExtensionManager,
   ServicesManager,
+  ServiceProvidersManager,
   HotkeysManager,
   UINotificationService,
   UIModalService,
@@ -34,6 +35,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
 
   const commandsManager = new CommandsManager(commandsManagerConfig);
   const servicesManager = new ServicesManager(commandsManager);
+  const serviceProvidersManager = new ServiceProvidersManager();
   const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
 
   const appConfig = {
@@ -45,6 +47,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
   const extensionManager = new ExtensionManager({
     commandsManager,
     servicesManager,
+    serviceProvidersManager,
     hotkeysManager,
     appConfig,
   });
@@ -130,6 +133,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     commandsManager,
     extensionManager,
     servicesManager,
+    serviceProvidersManager,
     hotkeysManager,
   };
 }

platform/app/src/routes/WorkList/WorkList.tsx

@@ -32,8 +32,12 @@ import {
   ButtonEnums,
 } from '@ohif/ui';
 
+import { Types } from '@ohif/ui';
+
 import i18n from '@ohif/i18n';
 
+const PatientInfoVisibility = Types.PatientInfoVisibility;
+
 const { sortBySeriesDate } = utils;
 
 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
@@ -527,6 +531,7 @@ function WorkList({
         menuOptions={menuOptions}
         isReturnEnabled={false}
         WhiteLabeling={appConfig.whiteLabeling}
+        showPatientInfo={PatientInfoVisibility.DISABLED}
       />
       <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
       <div className="ohif-scrollbar flex grow flex-col overflow-y-auto">