feat(ViewportActionMenu): window level per viewport / new patient info / colorbars/ 3D presets and 3D volume rendering (#3963)

Co-authored-by: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>

platform/ui/src/components/Header/Header.tsx

@@ -8,6 +8,8 @@ import Svg from '../Svg';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Dropdown from '../Dropdown';
+import HeaderPatientInfo from '../HeaderPatientInfo';
+import { PatientInfoVisibility } from '../../types/PatientInfoVisibility';
 
 function Header({
   children,
@@ -16,6 +18,8 @@ function Header({
   onClickReturnButton,
   isSticky,
   WhiteLabeling,
+  showPatientInfo = PatientInfoVisibility.VISIBLE_COLLAPSED,
+  servicesManager,
   ...props
 }): ReactNode {
   const { t } = useTranslation('Header');
@@ -34,7 +38,7 @@ function Header({
       {...props}
     >
       <div className="relative h-[48px] items-center ">
-        <div className="absolute left-0 top-1/2 -translate-y-1/2 ">
+        <div className="absolute left-0 top-1/2 flex -translate-y-1/2 items-center">
           <div
             className={classNames(
               'mr-3 inline-flex items-center',
@@ -49,7 +53,7 @@ function Header({
                 className="text-primary-active w-8"
               />
             )}
-            <div className="ml-4">
+            <div className="ml-1">
               {WhiteLabeling?.createLogoComponentFn?.(React, props) || <Svg name="logo-ohif" />}
             </div>
           </div>
@@ -58,32 +62,30 @@ function Header({
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <div className="flex items-center justify-center space-x-2">{children}</div>
         </div>
-        <div className="absolute right-0 top-1/2 -translate-y-1/2 ">
-          <Dropdown
-            id="options"
-            showDropdownIcon={false}
-            list={menuOptions}
-            alignment="right"
-          >
-            <IconButton
-              id={'options-settings-icon'}
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
+        <div className="absolute right-0 top-1/2 flex -translate-y-1/2 select-none items-center">
+          {(showPatientInfo === PatientInfoVisibility.VISIBLE ||
+            showPatientInfo === PatientInfoVisibility.VISIBLE_COLLAPSED) && (
+            <HeaderPatientInfo servicesManager={servicesManager} />
+          )}
+          <div className="border-primary-dark mx-1.5 h-[25px] border-r"></div>
+          <div className="flex-shrink-0">
+            <Dropdown
+              id="options"
+              showDropdownIcon={false}
+              list={menuOptions}
+              alignment="right"
             >
-              <Icon name="settings" />
-            </IconButton>
-            <IconButton
-              id={'options-chevron-down-icon'}
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
-            >
-              <Icon name="chevron-down" />
-            </IconButton>
-          </Dropdown>
+              <IconButton
+                id={'options-settings-icon'}
+                variant="text"
+                color="inherit"
+                size="initial"
+                className="text-primary-active hover:bg-primary-dark h-full w-full"
+              >
+                <Icon name="icon-settings" />
+              </IconButton>
+            </Dropdown>
+          </div>
         </div>
       </div>
     </NavBar>
@@ -103,6 +105,8 @@ Header.propTypes = {
   isSticky: PropTypes.bool,
   onClickReturnButton: PropTypes.func,
   WhiteLabeling: PropTypes.object,
+  showPatientInfo: PropTypes.string,
+  servicesManager: PropTypes.object,
 };
 
 Header.defaultProps = {