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>

extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx

@@ -1,13 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import OHIF, { utils } from '@ohif/core';
-import { ViewportActionBar, useViewportGrid, LoadingIndicatorTotalPercent } from '@ohif/ui';
+import { useViewportGrid, LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
 
 import promptHydrateRT from '../utils/promptHydrateRT';
 import _getStatusComponent from './_getStatusComponent';
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
 
-const { formatDate } = utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
 
 function OHIFCornerstoneRTViewport(props) {
@@ -15,7 +13,6 @@ function OHIFCornerstoneRTViewport(props) {
     children,
     displaySets,
     viewportOptions,
-    viewportLabel,
     servicesManager,
     extensionManager,
     commandsManager,
@@ -27,6 +24,7 @@ function OHIFCornerstoneRTViewport(props) {
     segmentationService,
     uiNotificationService,
     customizationService,
+    viewportActionCornersService,
   } = servicesManager.services;
 
   const viewportId = viewportOptions.viewportId;
@@ -126,7 +124,6 @@ function OHIFCornerstoneRTViewport(props) {
 
   const onSegmentChange = useCallback(
     direction => {
-      direction = direction === 'left' ? -1 : 1;
       const segmentationId = rtDisplaySet.displaySetInstanceUID;
       const segmentation = segmentationService.getSegmentation(segmentationId);
 
@@ -282,20 +279,7 @@ function OHIFCornerstoneRTViewport(props) {
     });
   }
 
-  const {
-    PatientID,
-    PatientName,
-    PatientSex,
-    PatientAge,
-    SliceThickness,
-    ManufacturerModelName,
-    StudyDate,
-    SeriesDescription,
-    SpacingBetweenSlices,
-    SeriesNumber,
-  } = referencedDisplaySetRef.current.metadata;
-
-  const onStatusClick = async () => {
+  const onStatusClick = useCallback(async () => {
     // Before hydrating a RT and make it added to all viewports in the grid
     // that share the same frameOfReferenceUID, we need to store the viewport grid
     // presentation state, so that we can restore it after hydrating the RT. This is
@@ -309,41 +293,47 @@ function OHIFCornerstoneRTViewport(props) {
     });
 
     setIsHydrated(isHydrated);
-  };
+  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
+
+  useEffect(() => {
+    viewportActionCornersService.setComponents([
+      {
+        viewportId,
+        id: 'viewportStatusComponent',
+        component: _getStatusComponent({
+          isHydrated,
+          onStatusClick,
+        }),
+        indexPriority: -100,
+        location: viewportActionCornersService.LOCATIONS.topLeft,
+      },
+      {
+        viewportId,
+        id: 'viewportActionArrowsComponent',
+        component: (
+          <ViewportActionArrows
+            key="actionArrows"
+            onArrowsClick={onSegmentChange}
+            className={
+              viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
+            }
+          ></ViewportActionArrows>
+        ),
+        indexPriority: 0,
+        location: viewportActionCornersService.LOCATIONS.topRight,
+      },
+    ]);
+  }, [
+    activeViewportId,
+    isHydrated,
+    onSegmentChange,
+    onStatusClick,
+    viewportActionCornersService,
+    viewportId,
+  ]);
 
   return (
     <>
-      <ViewportActionBar
-        onDoubleClick={evt => {
-          evt.stopPropagation();
-          evt.preventDefault();
-        }}
-        onArrowsClick={onSegmentChange}
-        getStatusComponent={() => {
-          return _getStatusComponent({
-            isHydrated,
-            onStatusClick,
-          });
-        }}
-        studyData={{
-          label: viewportLabel,
-          useAltStyling: true,
-          studyDate: formatDate(StudyDate),
-          currentSeries: SeriesNumber,
-          seriesDescription: `RT Viewport ${SeriesDescription}`,
-          patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
-            patientSex: PatientSex || '',
-            patientAge: PatientAge || '',
-            MRN: PatientID || '',
-            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
-            spacing:
-              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
-            scanner: ManufacturerModelName || '',
-          },
-        }}
-      />
-
       <div className="relative flex h-full w-full flex-row overflow-hidden">
         {rtIsLoading && (
           <LoadingIndicatorTotalPercent

extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx

@@ -6,9 +6,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   let ToolTipMessage = null;
   let StatusIcon = null;
 
-  const { t } = useTranslation('Common');
-  const loadStr = t('LOAD');
-
   switch (isHydrated) {
     case true:
       StatusIcon = () => <Icon name="status-alert" />;
@@ -26,23 +23,28 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
       ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
   }
 
-  const StatusArea = () => (
-    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
-      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
-        <StatusIcon />
-        <span className="ml-1">RTSTRUCT</span>
-      </div>
-      {!isHydrated && (
-        <div
-          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
-          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
-          onMouseUp={onStatusClick}
-        >
-          {loadStr}
+  const StatusArea = () => {
+    const { t } = useTranslation('Common');
+    const loadStr = t('LOAD');
+
+    return (
+      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <StatusIcon />
+          <span className="ml-1">RTSTRUCT</span>
         </div>
-      )}
-    </div>
-  );
+        {!isHydrated && (
+          <div
+            className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+            // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+            onMouseUp={onStatusClick}
+          >
+            {loadStr}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   return (
     <>