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/ui/index.js

@@ -23,6 +23,9 @@ export {
   ViewportGridContext,
   ViewportGridProvider,
   useViewportGrid,
+  HangingProtocolContext,
+  HangingProtocolProvider,
+  useHangingProtocol,
 } from './src/contextProviders';
 
 /** COMPONENTS */

platform/ui/src/components/Button/Button.jsx

@@ -144,7 +144,7 @@ const Button = ({
 
 Button.propTypes = {
   children: PropTypes.node,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'initial']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']),
   rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
   color: PropTypes.oneOf([

platform/ui/src/components/ButtonGroup/ButtonGroup.jsx

@@ -135,7 +135,7 @@ ButtonGroup.propTypes = {
   fullWidth: PropTypes.bool,
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),
   rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'inherit']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
 };
 

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -164,7 +164,7 @@ SidePanel.propTypes = {
       iconLabel: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
       label: PropTypes.string.isRequired,
-      content: PropTypes.node,
+      content: PropTypes.func, // TODO: Should be node, but it keeps complaining?
     }),
     PropTypes.arrayOf(
       PropTypes.shape({
@@ -172,7 +172,7 @@ SidePanel.propTypes = {
         iconLabel: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
-        content: PropTypes.node,
+        content: PropTypes.func, // TODO: Should be node, but it keeps complaining?
       })
     ),
   ]),

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -143,7 +143,7 @@ StudyBrowser.propTypes = {
                 'thumbnailNoImage',
               ]).isRequired,
               isTracked: PropTypes.bool,
-              viewportIdentificator: PropTypes.string,
+              viewportIdentificator: PropTypes.arrayOf(PropTypes.string),
               /**
                * Data the thumbnail should expose to a receiving drop target. Use a matching
                * `dragData.type` to identify which targets can receive this draggable item.

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -113,7 +113,7 @@ ThumbnailList.propTypes = {
         'thumbnailTracked',
         'thumbnailNoImage',
       ]).isRequired,
-      viewportIdentificator: PropTypes.string,
+      viewportIdentificator: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
       isTracked: PropTypes.bool,
       /**
        * Data the thumbnail should expose to a receiving drop target. Use a matching

platform/ui/src/contextProviders/HangingProtocolProvider.jsx

@@ -0,0 +1,153 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+} from 'react';
+import PropTypes from 'prop-types';
+
+const DEFAULT_STATE = {
+  hangingProtocol: null,
+  hpAlreadyApplied: {},
+};
+
+export const HangingProtocolContext = createContext(DEFAULT_STATE);
+
+export function HangingProtocolProvider({ children, service }) {
+  const hangingProtocolReducer = (state, action) => {
+    switch (action.type) {
+      case 'SET_HANGING_PROTOCOL': {
+        return {
+          ...state,
+          ...{ hangingProtocol: action.payload.hangingProtocol },
+        };
+      }
+      case 'SET_HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT': {
+        const index = action.payload.index;
+        const newHPAlreadyApplied = Object.assign({}, state.hpAlreadyApplied);
+
+        newHPAlreadyApplied[index] = true;
+
+        return {
+          ...state,
+          ...{ hpAlreadyApplied: newHPAlreadyApplied },
+        };
+      }
+      case 'RESET': {
+        return {
+          hangingProtocol: null,
+          hpAlreadyApplied: {},
+        };
+      }
+
+      case 'SET': {
+        return {
+          ...state,
+          ...action.payload,
+        };
+      }
+
+      default:
+        return action.payload;
+    }
+  };
+
+  const [hangingProtocolState, dispatch] = useReducer(
+    hangingProtocolReducer,
+    DEFAULT_STATE
+  );
+
+  console.log('hangingProtocolState', hangingProtocolState);
+
+  const getState = useCallback(() => hangingProtocolState, [
+    hangingProtocolState,
+  ]);
+
+  const setHangingProtocol = useCallback(
+    hangingProtocol =>
+      dispatch({
+        type: 'SET_HANGING_PROTOCOL',
+        payload: {
+          hangingProtocol,
+        },
+      }),
+    [dispatch]
+  );
+
+  const setHangingProtocolAppliedForViewport = useCallback(
+    index =>
+      dispatch({
+        type: 'SET_HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT',
+        payload: {
+          index,
+        },
+      }),
+    [dispatch]
+  );
+
+  const reset = useCallback(
+    () =>
+      dispatch({
+        type: 'RESET',
+        payload: {},
+      }),
+    [dispatch]
+  );
+
+  const set = useCallback(
+    payload =>
+      dispatch({
+        type: 'SET',
+        payload,
+      }),
+    [dispatch]
+  );
+
+  /**
+   * Sets the implementation of the HangingProtocolService that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({
+        getState,
+        setHangingProtocol,
+        setHangingProtocolAppliedForViewport,
+        reset,
+        set,
+      });
+    }
+  }, [
+    getState,
+    service,
+    setHangingProtocol,
+    setHangingProtocolAppliedForViewport,
+    reset,
+    set,
+  ]);
+
+  const api = {
+    // getState,
+    setHangingProtocol,
+    setHangingProtocolAppliedForViewport,
+    reset,
+    set,
+  };
+
+  return (
+    <HangingProtocolContext.Provider value={[hangingProtocolState, api]}>
+      {children}
+    </HangingProtocolContext.Provider>
+  );
+}
+
+HangingProtocolProvider.propTypes = {
+  children: PropTypes.any,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }).isRequired,
+};
+
+export const useHangingProtocol = () => useContext(HangingProtocolContext);

platform/ui/src/contextProviders/index.js

@@ -35,3 +35,9 @@ export {
   ViewportGridProvider,
   useViewportGrid,
 } from './ViewportGridProvider';
+
+export {
+  HangingProtocolContext,
+  HangingProtocolProvider,
+  useHangingProtocol,
+} from './HangingProtocolProvider';