fix: remaining bugs for MPR and toolbar icon colors (#3026)

* feat: warn for overlapping segments

* fix: typo

* refactor mpr toggle and stack sync

* fix: wip for more general mpr

* fix: tool groups for mpr

* fix: changing of viewport id

* fix: viewport Id for the seg viewports

* fix

* update cornerstone version

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

@@ -33,27 +33,47 @@ const variantClasses = {
   },
   outlined: {
     default:
-      'border bg-trasparent border-primary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border border-primary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary:
-      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
-      'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     black:
-      'border bg-black border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+      'border border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
   },
   contained: {
-    default:
-      'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-    primary:
-      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
-      'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-    black:
-      'bg-black text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+  },
+};
+
+const backgroundClasses = {
+  text: {
+    default: '',
+    primary: '',
+    secondary: '',
+    white: '',
+    black: '',
+  },
+  outlined: {
+    default: 'bg-transparent',
+    primary: 'bg-transparent',
+    secondary: 'bg-transparent',
+    white: 'bg-transparent',
+    black: 'bg-black',
+  },
+  contained: {
+    default: 'bg-primary-light',
+    primary: 'bg-primary-main',
+    secondary: 'bg-secondary-light',
+    white: 'bg-white',
+    black: 'bg-black',
   },
 };
 
@@ -90,6 +110,7 @@ const IconButton = ({
   className,
   name,
   id,
+  bgColor,
   ...rest
 }) => {
   const buttonElement = useRef(null);
@@ -98,6 +119,9 @@ const IconButton = ({
     buttonElement.current.blur();
     onClick(e);
   };
+
+  const bgColorToUse = bgColor ? bgColor : backgroundClasses[variant][color];
+
   return (
     <button
       className={classnames(
@@ -107,6 +131,7 @@ const IconButton = ({
         sizeClasses[size],
         fullWidthClasses[fullWidth],
         disabledClasses[disabled],
+        bgColorToUse,
         className
       )}
       style={{

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

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { IconButton, Icon, Tooltip } from '../';
 
 const ToolbarButton = ({
-  type,
+  type = 'tool',
   id,
   icon,
   label,
@@ -20,14 +20,19 @@ const ToolbarButton = ({
   const { primaryToolId } = bState;
   const isActive = _isActive || (type === 'tool' && id === primaryToolId);
   const classes = {
-    type: {
-      primary: isActive
-        ? 'text-black'
-        : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
-      secondary: isActive
-        ? 'text-black'
-        : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
-    },
+    tool: isActive
+      ? 'text-black'
+      : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+    toggle: isActive
+      ? 'text-[#348CFD]'
+      : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+    action: isActive
+      ? 'text-black'
+      : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+  };
+
+  const bgClasses = {
+    toggle: isActive && 'bg-transparent',
   };
 
   const activeClass = isActive ? 'active' : '';
@@ -42,8 +47,9 @@ const ToolbarButton = ({
       >
         <IconButton
           variant={isActive ? 'contained' : 'text'}
+          bgColor={bgClasses[type]}
           size="toolbar"
-          className={classnames('mx-1', activeClass, classes.type[type])}
+          className={classnames('mx-1', activeClass, classes[type])}
           onClick={() => {
             onInteraction({
               itemId: id,

platform/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -64,6 +64,10 @@ export function ViewportGridProvider({ children, service }) {
 
         const viewports = state.viewports.slice();
 
+        if (!viewportOptions.viewportId) {
+          viewportOptions.viewportId = `viewport-${viewportIndex}`;
+        }
+
         // merge the displaySetOptions and viewportOptions and displaySetInstanceUIDs
         // into the viewport object at the given index
         viewports[viewportIndex] = {