OHIF-285/OHIF-274: Fix default hanging of display sets into the ViewportGrid (#1917)

* OHIF-285/OHIF-274: Fix default hanging of display sets into the ViewportGrid

Co-authored-by: James A. Petts <jamesapetts@gmail.com>

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,7 +1,7 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
@@ -22,21 +22,53 @@ function ViewerViewportGrid(props) {
   } = viewportGrid;
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
-  const { DisplaySetService, MeasurementService } = servicesManager.services;
+  const {
+    DisplaySetService,
+    MeasurementService,
+    HangingProtocolService,
+  } = servicesManager.services;
 
+  // This is a placeholder for applying hanging protocols
+  // It probably shouldn't be done here
+  // For now it just hangs the first display set in the study in 1x1
+  // as sorted by SeriesNumber
   useEffect(() => {
     const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
-      displaySets => {
-        displaySets.sort((a, b) => {
-          const isImageSet = x => x instanceof ImageSet;
-          return isImageSet(a) === isImageSet(b) ? 0 : isImageSet(a) ? -1 : 1;
-        });
+      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      eventData => {
+        const { displaySetsAdded } = eventData;
 
-        viewportGridService.setDisplaysetForViewport({
-          viewportIndex: 0,
-          displaySetInstanceUID: displaySets[0].displaySetInstanceUID,
-        });
+        const data = HangingProtocolService.getState();
+
+        // TODO: Sometimes this is undefined?
+        const { hpAlreadyApplied } = data;
+
+        // Match each viewport individually
+        const numViewports = numRows * numCols;
+        for (let i = 0; i < numViewports; i++) {
+          if (hpAlreadyApplied[i] === true) {
+            return;
+          }
+
+          // Temporary until matching is ported back over from the Meteor version.
+          const reqSeriesInstanceUID =
+            data.hangingProtocol.stages[0].viewports[0].seriesMatchingRules[0]
+              .constraint.equals.value;
+          const matchingDisplaySet = displaySetsAdded.find(ds => {
+            return ds.SeriesInstanceUID === reqSeriesInstanceUID;
+          });
+
+          if (!matchingDisplaySet) {
+            return;
+          }
+
+          viewportGridService.setDisplaysetForViewport({
+            viewportIndex: i,
+            displaySetInstanceUID: matchingDisplaySet.displaySetInstanceUID,
+          });
+
+          HangingProtocolService.setHangingProtocolAppliedForViewport(i);
+        }
       }
     );
 
@@ -70,32 +102,6 @@ function ViewerViewportGrid(props) {
     };
   }, [viewports]);
 
-  // TODO -> Make a HangingProtocolService
-  // Commented out whilst not in use to avoid pointlessly regenerating this function.
-  // const HangingProtocolService = displaySets => {
-  //   let displaySetInstanceUID;
-
-  //   // Fallback
-  //   if (!displaySets || !displaySets.length) {
-  //     const displaySet = DisplaySetService.activeDisplaySets[0];
-  //     displaySetInstanceUID = displaySet.displaySetInstanceUID;
-  //   } else {
-  //     const displaySet = displaySets[0];
-  //     displaySetInstanceUID = displaySet.displaySetInstanceUID;
-  //   }
-
-  //   return {
-  //     numRows: 1,
-  //     numCols: 1,
-  //     activeViewportIndex: 0,
-  //     viewports: [
-  //       {
-  //         displaySetInstanceUID,
-  //       },
-  //     ],
-  //   };
-  // };
-
   const onDoubleClick = viewportIndex => {
     // TODO -> Disabled for now.
     // onNewImage on a cornerstone viewport is firing setDisplaySetForViewport.
@@ -138,30 +144,6 @@ function ViewerViewportGrid(props) {
     });
   };
 
-  // TODO:
-  // Hmm... Should a "displaySet" being added update the viewport based on HP?
-  // I guess it might.
-  // This is where you would likely "fill" emptyViewports if none had content
-  // Or to recheck best placement/priority based on all activeDisplaySets
-  // useEffect(() => {
-  //   const { unsubscribe } = DisplaySetService.subscribe(
-  //     DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-  //     displaySets => {
-  //       displaySets.forEach(ds => console.log(`VPG:ADD::${ds.StudyInstanceUID}`));
-  //       const hp = HangingProtocolService(displaySets);
-  //       viewportGrid.setViewportGrid(hp);
-  //     },
-  //   );
-
-  //   return unsubscribe;
-  // }, []);
-
-  // const droppedDisplaySet = DisplaySetService.getDisplaySetByUID(
-  //   displaySetInstanceUID
-  // );
-  // const updatedViewportGridState = HangingProtocolService([
-  //   droppedDisplaySet,
-  // ]);
   const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
     console.warn(`DROPPED: ${displaySetInstanceUID}`);
     viewportGridService.setDisplaysetForViewport({
@@ -188,7 +170,7 @@ function ViewerViewportGrid(props) {
         viewportComponents
       );
 
-      const onInterationHandler = (event) => {
+      const onInterationHandler = event => {
         if (isActive) return;
 
         if (event) {
@@ -211,7 +193,11 @@ function ViewerViewportGrid(props) {
           onInteraction={onInterationHandler}
           isActive={isActive}
         >
-          <div className={classNames('h-full w-full flex flex-col align-center', { 'pointer-events-none': !isActive })}>
+          <div
+            className={classNames('h-full w-full flex flex-col align-center', {
+              'pointer-events-none': !isActive,
+            })}
+          >
             <ViewportComponent
               displaySet={displaySet}
               viewportIndex={viewportIndex}