feat(layout): new layout selector with 3D volume rendering (#3923)

platform/ui/src/components/Icon/getIcon.js

@@ -145,6 +145,20 @@ import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
 
+/** LAYOUT */
+
+import layoutAdvanced3DFourUp from './../../assets/icons/layout-advanced-3d-four-up.svg';
+import layoutAdvanced3DMain from './../../assets/icons/layout-advanced-3d-main.svg';
+import layoutAdvanced3DOnly from './../../assets/icons/layout-advanced-3d-only.svg';
+import layoutAdvanced3DPrimary from './../../assets/icons/layout-advanced-3d-primary.svg';
+import layoutAdvancedAxialPrimary from './../../assets/icons/layout-advanced-axial-primary.svg';
+import layoutAdvancedMPR from './../../assets/icons/layout-advanced-mpr.svg';
+import layoutCommon1x1 from './../../assets/icons/layout-common-1x1.svg';
+import layoutCommon1x2 from './../../assets/icons/layout-common-1x2.svg';
+import layoutCommon2x2 from './../../assets/icons/layout-common-2x2.svg';
+import layoutCommon2x3 from './../../assets/icons/layout-common-2x3.svg';
+import iconToolRotate from './../../assets/icons/tool-3d-rotate.svg';
+
 /** New investigational use */
 
 import investigationalUse from './../../assets/icons/illustration-investigational-use.svg';
@@ -256,6 +270,7 @@ const ICONS = {
   'tool-freehand-line': toolFreehand,
   'tool-freehand-polygon': toolFreehandPolygon,
   'tool-polygon': toolPolygon,
+  'tool-3d-rotate': iconToolRotate,
   'edit-patient': editPatient,
   'icon-mpr': iconMPR,
   'icon-next-inactive': iconNextInactive,
@@ -295,6 +310,18 @@ const ICONS = {
   'old-play': oldPlay,
   'old-stop': oldStop,
 
+  /** LAYOUT */
+  'layout-advanced-3d-four-up': layoutAdvanced3DFourUp,
+  'layout-advanced-3d-main': layoutAdvanced3DMain,
+  'layout-advanced-3d-only': layoutAdvanced3DOnly,
+  'layout-advanced-3d-primary': layoutAdvanced3DPrimary,
+  'layout-advanced-axial-primary': layoutAdvancedAxialPrimary,
+  'layout-advanced-mpr': layoutAdvancedMPR,
+  'layout-common-1x1': layoutCommon1x1,
+  'layout-common-1x2': layoutCommon1x2,
+  'layout-common-2x2': layoutCommon2x2,
+  'layout-common-2x3': layoutCommon2x3,
+
   /** New investigational use */
   'illustration-investigational-use': investigationalUse,
 };

platform/ui/src/components/LayoutPreset/LayoutPreset.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon/Icon';
+
+function LayoutPreset({ onSelection, title, icon, commandOptions, classNames }) {
+  return (
+    <div
+      className={classNames}
+      onClick={() => {
+        onSelection(commandOptions);
+      }}
+    >
+      <Icon
+        name={icon}
+        className="group-hover:text-primary-light"
+      />
+      {title && <div className="font-inter text-sm text-white">{title}</div>}
+    </div>
+  );
+}
+
+LayoutPreset.defaultProps = {
+  onSelection: () => {},
+};
+
+LayoutPreset.propTypes = {
+  onSelection: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  commandOptions: PropTypes.object.isRequired,
+  classNames: PropTypes.string,
+};
+
+export default LayoutPreset;

platform/ui/src/components/LayoutPreset/index.js

@@ -0,0 +1,2 @@
+import LayoutPreset from './LayoutPreset';
+export default LayoutPreset;

platform/ui/src/components/LayoutSelector/LayoutSelector.tsx

@@ -21,7 +21,6 @@ function LayoutSelector({ onSelection, rows, columns }) {
         gridTemplateRows: gridSize.repeat(rows),
         backgroundColor: '#090c29', // primary-dark
       }}
-      className="p-2"
     >
       {Array.apply(null, Array(rows * columns))
         .map(function (_, i) {
@@ -30,12 +29,8 @@ function LayoutSelector({ onSelection, rows, columns }) {
         .map(index => (
           <div
             key={index}
-            style={{
-              border: '1px solid white',
-              backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
-            }}
+            className={`border-primary-dark border ${isHovered(index) ? 'bg-primary-active' : 'bg-[#04225b]'} cursor-pointer`}
             data-cy={`Layout-${index % columns}-${Math.floor(index / columns)}`}
-            className="cursor-pointer"
             onClick={() => {
               const x = index % columns;
               const y = Math.floor(index / columns);
@@ -55,7 +50,7 @@ function LayoutSelector({ onSelection, rows, columns }) {
 
 LayoutSelector.defaultProps = {
   onSelection: () => {},
-  columns: 3,
+  columns: 4,
   rows: 3,
 };
 

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -16,6 +16,7 @@ const ToolbarButton = ({
   className,
   size,
   toolTipClassName,
+  disableToolTip = false,
   ...rest
   //
 }) => {
@@ -37,6 +38,7 @@ const ToolbarButton = ({
         content={shouldShowDropdown ? dropdownContent : label}
         tight={shouldShowDropdown}
         className={toolTipClassNameToUse}
+        isDisabled={disableToolTip}
       >
         <IconButton
           size={sizeToUse}
@@ -75,6 +77,7 @@ ToolbarButton.propTypes = {
   dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   size: PropTypes.string,
   toolTipClassName: PropTypes.string,
+  disableToolTip: PropTypes.bool,
 };
 
 export default ToolbarButton;

platform/ui/src/components/index.js

@@ -84,6 +84,7 @@ import { ToolSettings } from './AdvancedToolbox';
 import { Toolbox } from './Toolbox';
 import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
+import LayoutPreset from './LayoutPreset';
 
 export {
   AboutModal,
@@ -168,6 +169,7 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  LayoutPreset,
   LegacySplitButton,
   ToolSettings,
   Toolbox,