feat: Add White Labelling, Hanging Protocols, and tons of Extensions / Mode fixes

* modified

* new files in existing extensions/libraries/modes

* fixed bugs and tests

* Clean up

* fix: viewport display fixed

* Fixed configs for deployment

* Removed unnecessary files and functions

* Fixed default HP module

* Added white labelling

* Fixed hash routing

* Removed unnecessary routers

Co-authored-by: Alireza Sedghi <ar.sedghi@gmail.com>

platform/ui/src/components/Header/Header.jsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
 
-function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
+function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabeling }) {
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -18,6 +18,10 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
     }
   };
 
+  const CustomLogo = (React) => {
+    return WhiteLabeling.createLogoComponentFn(React)
+  }
+
   return (
     <NavBar className='justify-between border-b-4 border-black' isSticky={isSticky}>
       <div className="flex justify-between flex-1">
@@ -29,7 +33,7 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
             onClick={onReturnHandler}
           >
             {isReturnEnabled && <Icon name="chevron-left" className="w-8 text-primary-active" />}
-            <div className="ml-4"><Svg name="logo-ohif" /></div>
+            <div className="ml-4">{WhiteLabeling ? CustomLogo(React) : <Svg name="logo-ohif" />}</div>
           </div>
         </div>
         <div className="flex items-center">{children}</div>
@@ -73,7 +77,8 @@ Header.propTypes = {
   ),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isReturnEnabled: PropTypes.bool,
-  isSticky: PropTypes.bool
+  isSticky: PropTypes.bool,
+  WhiteLabeling: PropTypes.element,
 };
 
 Header.defaultProps = {

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

@@ -143,7 +143,7 @@ const SidePanel = ({
               </span>
             </Button>
           </div>
-          <childComponent.content/>
+          <childComponent.content />
         </React.Fragment>
       ) : (
         <React.Fragment>{getPanelButtons()}</React.Fragment>

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -14,6 +14,7 @@ const classes = {
 const ViewportActionBar = ({
   studyData,
   showNavArrows,
+  showStatus,
   showCine,
   cineProps,
   showPatientInfo: patientInfoVisibility,
@@ -255,7 +256,7 @@ const ViewportActionBar = ({
       <div className="flex flex-1 flex-grow mt-2 min-w-48">
         <div className="flex items-center">
           <span className="mr-2 text-white text-large">{label}</span>
-          {renderIconStatus()}
+          {showStatus && renderIconStatus()}
         </div>
         <div className="flex flex-col justify-start ml-4">
           <div className="flex">
@@ -352,6 +353,7 @@ ViewportActionBar.propTypes = {
 ViewportActionBar.defaultProps = {
   cineProps: {},
   showCine: false,
+  showStatus: true,
   showNavArrows: true,
   showPatientInfo: false,
 };

platform/ui/src/contextProviders/HangingProtocolProvider.jsx

@@ -1,153 +0,0 @@
-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/ImageViewerProvider.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer } from 'react';
+import React, { createContext, useContext, useReducer, useMemo } from 'react';
 
 // export const IMAGE_VIEWER_DEFAULT_VALUE = {
 //   StudyInstanceUIDs: [],
@@ -7,9 +7,18 @@ import React, { createContext, useContext, useReducer } from 'react';
 
 export const ImageViewerContext = createContext();
 
-export function ImageViewerProvider({ reducer, initialState, children }) {
+export function ImageViewerProvider({
+  StudyInstanceUIDs,
+  reducer,
+  initialState,
+  children,
+}) {
+  const value = useMemo(() => {
+    return { StudyInstanceUIDs };
+  }, [StudyInstanceUIDs]);
+
   return (
-    <ImageViewerContext.Provider value={useReducer(reducer, initialState)}>
+    <ImageViewerContext.Provider value={value}>
       {children}
     </ImageViewerContext.Provider>
   );

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -8,8 +8,10 @@ import React, {
 import PropTypes from 'prop-types';
 
 const DEFAULT_STATE = {
-  numRows: 1,
-  numCols: 1,
+  // starting from null, hanging
+  // protocol will defined number of rows and cols
+  numRows: null,
+  numCols: null,
   viewports: [
     /*
      * {
@@ -58,12 +60,14 @@ export function ViewportGridProvider({ children, service }) {
       }
       case 'RESET': {
         return {
-          numCols: 1,
-          numRows: 1,
+          numCols: null,
+          numRows: null,
           activeViewportIndex: 0,
-          viewports: [{
-            displaySetInstanceUID: null,
-          }],
+          viewports: [
+            {
+              displaySetInstanceUID: null,
+            },
+          ],
           cachedLayout: null,
         };
       }

platform/ui/src/contextProviders/index.js

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