feat: explicit layout apply via HangingProtocolService (#2936)

* feat: add more types to HP service

* change hp to have apply protocol

* feat: mpr initial work

* apply protocol by id

* feat: mode should be able to apply protocol directly

* fix: wrong inheritance for viewports drag and drop

* apply review comments

platform/viewer/src/routes/Mode/Mode.tsx

@@ -17,7 +17,10 @@ import Compose from './Compose';
  * @param props.dataSource to read the data from
  * @returns array of subscriptions to cancel
  */
-function defaultRouteInit({ servicesManager, studyInstanceUIDs, dataSource }) {
+function defaultRouteInit(
+  { servicesManager, studyInstanceUIDs, dataSource },
+  hangingProtocol
+) {
   const {
     DisplaySetService,
     HangingProtocolService,
@@ -75,8 +78,12 @@ function defaultRouteInit({ servicesManager, studyInstanceUIDs, dataSource }) {
     // study being displayed, and is thus the "active" study.
     const activeStudy = studies[0];
 
-    // run the hanging protocol matching service on the displaySets
-    HangingProtocolService.run({ studies, activeStudy, displaySets });
+    // run the hanging protocol matching on the displaySets with the predefined
+    // hanging protocol in the mode configuration
+    HangingProtocolService.run(
+      { studies, activeStudy, displaySets },
+      hangingProtocol
+    );
   });
 
   return unsubscriptions;
@@ -107,12 +114,9 @@ export default function ModeRoute({
     locationRef.current = location;
   }
 
-  const {
-    DisplaySetService,
-    HangingProtocolService,
-  } = servicesManager.services;
+  const { DisplaySetService } = servicesManager.services;
 
-  const { extensions, sopClassHandlers, hotkeys, hangingProtocols } = mode;
+  const { extensions, sopClassHandlers, hotkeys, hangingProtocol } = mode;
 
   if (dataSourceName === undefined) {
     dataSourceName = extensionManager.defaultDataSourceName;
@@ -239,34 +243,28 @@ export default function ModeRoute({
     });
     mode?.onModeEnter({ servicesManager, extensionManager, commandsManager });
 
-    // Adding hanging protocols of extensions after onModeEnter since
-    // it will reset the protocols
-    hangingProtocols.forEach(extensionProtocols => {
-      const hangingProtocolModule = extensionManager.getModuleEntry(
-        extensionProtocols
-      );
-
-      if (hangingProtocolModule?.protocols) {
-        HangingProtocolService.addProtocols(hangingProtocolModule.protocols);
-      }
-    });
-
     const setupRouteInit = async () => {
       if (route.init) {
-        return await route.init({
-          servicesManager,
-          extensionManager,
-          hotkeysManager,
-          studyInstanceUIDs,
-          dataSource,
-        });
+        return await route.init(
+          {
+            servicesManager,
+            extensionManager,
+            hotkeysManager,
+            studyInstanceUIDs,
+            dataSource,
+          },
+          hangingProtocol
+        );
       }
 
-      return defaultRouteInit({
-        servicesManager,
-        studyInstanceUIDs,
-        dataSource,
-      });
+      return defaultRouteInit(
+        {
+          servicesManager,
+          studyInstanceUIDs,
+          dataSource,
+        },
+        hangingProtocol
+      );
     };
 
     let unsubscriptions;
@@ -291,7 +289,6 @@ export default function ModeRoute({
     hotkeysManager,
     studyInstanceUIDs,
     refresh,
-    hangingProtocols,
   ]);
 
   const renderLayoutData = props => {