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/ViewportOverlay/ViewportOverlay.css

@@ -10,40 +10,13 @@
   text-shadow: 1px 1px #000;
   pointer-events: none;
 }
-.ViewportOverlay .top-left {
-  top: 20px;
-  left: 20px;
+.overlay-top {
+  top: 28px;
 }
-.ViewportOverlay .top-center {
-  top: 20px;
-  padding-top: 20px;
-  width: 100%;
-  text-align: center;
+.overlay-bottom {
+  bottom: 3px;
 }
-.ViewportOverlay .top-right {
-  top: 20px;
-  right: 20px;
-  text-align: right;
-}
-.ViewportOverlay .bottom-left {
-  bottom: 20px;
-  left: 20px;
-}
-.ViewportOverlay .bottom-right {
-  bottom: 20px;
-  right: 20px;
-  text-align: right;
-}
-.ViewportOverlay.controlsVisible .topright,
-.ViewportOverlay.controlsVisible .bottomright {
-  right: calc(20px + 19px);
-}
-.ViewportOverlay svg {
-  color: #9ccef9;
-  fill: #9ccef9;
-  stroke: #9ccef9;
-  background-color: transparent;
-  margin: 2px;
-  width: 18px;
-  height: 18px;
+
+.overlay-text {
+  text-shadow: 0.8px 0.8px 0.5px rgba(0, 0, 0, 0.75);
 }

platform/ui/src/components/ViewportOverlay/ViewportOverlay.tsx

@@ -3,11 +3,16 @@ import classnames from 'classnames';
 
 import './ViewportOverlay.css';
 
+// The overlay-top and overlay-bottom classes are explicitly needed to offset
+// the overlays (i.e. via absolute positioning) such the ViewportActionCorners
+// have space for its child components.
+// ToDo: offset the ViewportOverlay automatically via css to account for the
+// space needed for ViewportActionCorners.
 const classes = {
-  topLeft: 'top-viewport left-viewport',
-  topRight: 'top-viewport right-viewport-scrollbar',
-  bottomRight: 'bottom-viewport right-viewport-scrollbar',
-  bottomLeft: 'bottom-viewport left-viewport',
+  topLeft: 'overlay-top left-viewport',
+  topRight: 'overlay-top right-viewport-scrollbar',
+  bottomRight: 'overlay-bottom right-viewport-scrollbar',
+  bottomLeft: 'overlay-bottom left-viewport',
 };
 
 export type ViewportOverlayProps = {
@@ -27,7 +32,14 @@ const ViewportOverlay = ({
 }: ViewportOverlayProps) => {
   const overlay = 'absolute pointer-events-none viewport-overlay';
   return (
-    <div className={color}>
+    <div
+      className={classnames(
+        color ? color : 'text-aqua-pale',
+        'text-[13px]',
+        'leading-5',
+        'overlay-text'
+      )}
+    >
       <div
         data-cy={'viewport-overlay-top-left'}
         className={classnames(overlay, classes.topLeft)}
@@ -37,12 +49,14 @@ const ViewportOverlay = ({
       <div
         data-cy={'viewport-overlay-top-right'}
         className={classnames(overlay, classes.topRight)}
+        style={{ transform: 'translateX(-8px)' }} // shift right side overlays by 4px for better alignment with ViewportActionCorners' icons
       >
         {topRight}
       </div>
       <div
         data-cy={'viewport-overlay-bottom-right'}
         className={classnames(overlay, classes.bottomRight)}
+        style={{ transform: 'translateX(-8px)' }} // shift right side overlays by 4px for better alignment with ViewportActionCorners' icons
       >
         {bottomRight}
       </div>