feat(advanced-roi-tools): new tools and icon updates and overlay bug fixes (#4014)

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

@@ -29,7 +29,7 @@ import infoAction from './../../assets/icons/info-action.svg';
 import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
 import launchInfo from './../../assets/icons/launch-info.svg';
-import link from './../../assets/icons/link.svg';
+import link from './../../assets/icons/tool-stack-image-sync.svg';
 import listBullets from './../../assets/icons/list-bullets.svg';
 import lock from './../../assets/icons/lock.svg';
 import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
@@ -90,32 +90,32 @@ import prevArrow from './../../assets/icons/prev-arrow.svg';
 import viewportStatusTracked from './../../assets/icons/viewport-status-tracked.svg';
 
 /** Tools */
-import toggleDicomOverlay from './../../assets/icons/toggle-dicom-overlay.svg';
+import toggleDicomOverlay from './../../assets/icons/tool-toggle-dicom-overlay.svg';
 import toolZoom from './../../assets/icons/tool-zoom.svg';
 import toolCapture from './../../assets/icons/tool-capture.svg';
-import toolLayout from './../../assets/icons/tool-layout.svg';
+import toolLayout from './../../assets/icons/tool-layout-default.svg';
 import toolMore from './../../assets/icons/tool-more-menu.svg';
 import toolMove from './../../assets/icons/tool-move.svg';
 import toolWindow from './../../assets/icons/tool-window-level.svg';
 import toolAnnotate from './../../assets/icons/tool-annotate.svg';
 import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
-import toolElipse from './../../assets/icons/tool-ellipse.svg';
+import toolElipse from './../../assets/icons/tool-measure-elipse.svg';
 import toolCircle from './../../assets/icons/tool-circle.svg';
 import toolLength from './../../assets/icons/tool-length.svg';
 import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
-import toolMagnify from './../../assets/icons/tool-magnify.svg';
+import toolMagnify from './../../assets/icons/tool-quick-magnify.svg';
 import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
 import toolInvert from './../../assets/icons/tool-invert.svg';
 import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
 import toolCine from './../../assets/icons/tool-cine.svg';
 import toolCrosshair from './../../assets/icons/tool-crosshair.svg';
-import toolProbe from './../../assets/icons/tool-probe.svg';
+import toolProbe from './../../assets/icons/focus-frame-target.svg';
 import toolAngle from './../../assets/icons/tool-angle.svg';
 import toolReset from './../../assets/icons/tool-reset.svg';
 import toolRectangle from './../../assets/icons/tool-rectangle.svg';
 import toolFusionColor from './../../assets/icons/tool-fusion-color.svg';
 import toolCreateThreshold from './../../assets/icons/tool-create-threshold.svg';
-import toolCalibration from './../../assets/icons/tool-calibration.svg';
+import toolCalibration from './../../assets/icons/tool-calibrate.svg';
 import toolFreehand from './../../assets/icons/tool-freehand.svg';
 import toolFreehandPolygon from './../../assets/icons/tool-freehand-polygon.svg';
 import toolPolygon from './../../assets/icons/tool-polygon.svg';
@@ -131,7 +131,7 @@ import rowUnlock from './../../assets/icons/row-unlock.svg';
 import iconMPR from './../../assets/icons/icon-mpr-alt.svg';
 import checkboxDefault from './../../assets/icons/checkbox-default.svg';
 import checkboxActive from './../../assets/icons/checkbox-active.svg';
-import referenceLines from './../../assets/icons/reference-lines.svg';
+import referenceLines from './../../assets/icons/tool-reference-lines.svg';
 import chevronDownNew from './../../assets/icons/icon-disclosure-close.svg';
 import chevronLeftNew from './../../assets/icons/icon-disclosure-open.svg';
 import settingsBars from './../../assets/icons/icon-display-settings.svg';
@@ -145,7 +145,12 @@ import iconToolScissor from './../../assets/icons/icon-tool-scissor.svg';
 import iconToolShape from './../../assets/icons/icon-tool-shape.svg';
 import iconToolThreshold from './../../assets/icons/icon-tool-threshold.svg';
 import viewportWindowLevel from './../../assets/icons/viewport-window-level.svg';
-
+import dicomTagBrowser from './../../assets/icons/tool-dicom-tag-browser.svg';
+import iconToolFreehandRoi from './../../assets/icons/tool-freehand-roi.svg';
+import iconToolLivewire from './../../assets/icons/tool-magnetic-roi.svg';
+import iconToolSplineRoi from './../../assets/icons/tool-spline-roi.svg';
+import iconToolUltrasoundBidirectional from './../../assets/icons/tool-ultrasound-bidirectional.svg';
+import iconToolLoupe from './../../assets/icons/tool-magnify.svg';
 /** Old OHIF */
 import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
@@ -355,6 +360,13 @@ const ICONS = {
   'prev-arrow': prevArrow,
   'viewport-status-tracked': viewportStatusTracked,
   'viewport-window-level': viewportWindowLevel,
+  'dicom-tag-browser': dicomTagBrowser,
+  /** New Tools */
+  'icon-tool-freehand-roi': iconToolFreehandRoi,
+  'icon-tool-livewire': iconToolLivewire,
+  'icon-tool-spline-roi': iconToolSplineRoi,
+  'icon-tool-ultrasound-bidirectional': iconToolUltrasoundBidirectional,
+  'icon-tool-loupe': iconToolLoupe,
   /** Old OHIF */
   'old-trash': oldTrash,
   'old-play': oldPlay,

platform/ui/src/components/IconButton/IconButton.tsx

@@ -63,7 +63,7 @@ const iconSizeClasses = {
   small: 'w-4 h-4',
   medium: 'w-5 h-5',
   large: 'w-6 h-6',
-  toolbar: 'w-[24px] h-[24px]',
+  toolbar: 'w-[28px] h-[28px]',
 };
 
 const fullWidthClasses = {
@@ -92,7 +92,7 @@ const IconButton = ({
     onClick(e);
   };
 
-  const padding = size === 'toolbar' ? '8px' : size === 'toolbox' ? '4px' : null;
+  const padding = size === 'toolbar' ? '6px' : size === 'toolbox' ? '6px' : null;
 
   return (
     <button

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -10,8 +10,7 @@ import ListMenu from '../ListMenu';
 
 const baseClasses = {
   Button: 'flex items-center rounded-md border-transparent group/button',
-  Primary:
-    'h-full border-l-2 border-t-2 border-b-2 rounded-tl-md rounded-bl-md group/primary !pl-2 !py-2',
+  Primary: 'h-full rounded-tl-md rounded-bl-md group/primary',
   Secondary:
     'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4 border-2 border-transparent group/secondary',
   SecondaryIcon: 'w-4 h-full stroke-1',
@@ -32,7 +31,7 @@ const classes = {
       isActive
         ? isExpanded
           ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
-          : 'border-primary-light bg-primary-light border-2 rounded-md !p-2'
+          : 'border-primary-light bg-primary-light border-2 rounded-md'
         : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
     ),
   Secondary: ({ isExpanded, primary }) =>
@@ -74,7 +73,7 @@ const DefaultListItemRenderer = props => {
         <span className="mr-4">
           <Icon
             name={icon}
-            className="h-5 w-5"
+            className="h-[28px] w-[28px]"
           />
         </span>
       )}

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

@@ -32,7 +32,7 @@ const ToolbarButton = ({
       ? toolTipClassName
       : sizeToUse === 'toolbar'
         ? 'w-[40px] h-[40px]'
-        : 'w-[32px] h-[32px]';
+        : 'w-[40px] h-[40px]';
 
   return (
     <div key={id}>