feat(4D): Add 4D dynamic volume rendering and new pre-clinical 4d pt/ct mode (#3664)

Co-authored-by: Alireza <ar.sedghi@gmail.com>
Co-authored-by: Neil <neil.a.macphee@gmail.com>

platform/app/src/appInit.js

@@ -19,6 +19,7 @@ import {
   errorHandler,
   CustomizationService,
   PanelService,
+  WorkflowStepsService,
   // utils,
 } from '@ohif/core';
 
@@ -68,6 +69,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     CineService.REGISTRATION,
     UserAuthenticationService.REGISTRATION,
     PanelService.REGISTRATION,
+    WorkflowStepsService.REGISTRATION,
     StateSyncService.REGISTRATION,
   ]);
 

platform/app/src/routes/Mode/Mode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useContext, createContext } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router';
 import PropTypes from 'prop-types';
 import { ServicesManager, utils } from '@ohif/core';
@@ -60,7 +60,7 @@ export default function ModeRoute({
     locationRef.current = location;
   }
 
-  const { displaySetService, hangingProtocolService, userAuthenticationService } = (
+  const { displaySetService, panelService, hangingProtocolService, userAuthenticationService } = (
     servicesManager as ServicesManager
   ).services;
 
@@ -141,7 +141,17 @@ export default function ModeRoute({
         servicesManager,
         studyInstanceUIDs,
       });
+
       if (isMounted.current) {
+        const { leftPanels = [], rightPanels = [], ...layoutProps } = layoutData.props;
+
+        panelService.reset();
+        panelService.addPanels(panelService.PanelPosition.Left, leftPanels);
+        panelService.addPanels(panelService.PanelPosition.Right, rightPanels);
+
+        // layoutProps contains all props but leftPanels and rightPanels
+        layoutData.props = layoutProps;
+
         layoutTemplateData.current = layoutData;
         setRefresh(!refresh);
       }
@@ -244,8 +254,10 @@ export default function ModeRoute({
           }
         }, {}) ?? {};
 
+      let unsubs;
+
       if (route.init) {
-        return await route.init(
+        unsubs = await route.init(
           {
             servicesManager,
             extensionManager,
@@ -273,6 +285,14 @@ export default function ModeRoute({
     let unsubscriptions;
     setupRouteInit().then(unsubs => {
       unsubscriptions = unsubs;
+
+      // Some code may need to run after hanging protocol initialization
+      // (eg: workflowStepsService initialization on 4D mode)
+      mode?.onSetupRouteComplete?.({
+        servicesManager,
+        extensionManager,
+        commandsManager,
+      });
     });
 
     return () => {

platform/app/src/routes/Mode/defaultRouteInit.ts

@@ -15,7 +15,7 @@ const { sortingCriteria } = utils;
  * @param props.filters filters from query params to read the data from
  * @returns array of subscriptions to cancel
  */
-export function defaultRouteInit(
+export async function defaultRouteInit(
   { servicesManager, studyInstanceUIDs, dataSource, filters, appConfig },
   hangingProtocolId
 ) {
@@ -95,7 +95,7 @@ export function defaultRouteInit(
     });
   });
 
-  Promise.allSettled(allRetrieves).then(promises => {
+  await Promise.allSettled(allRetrieves).then(async promises => {
     log.timeEnd(Enums.TimingEnum.STUDY_TO_DISPLAY_SETS);
     log.time(Enums.TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE);
     log.time(Enums.TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
@@ -120,7 +120,7 @@ export function defaultRouteInit(
       }
     });
 
-    Promise.allSettled(allPromises).then(applyHangingProtocol);
+    await Promise.allSettled(allPromises).then(applyHangingProtocol);
     startRemainingPromises(remainingPromises);
     applyHangingProtocol();
   });