fix(new layout): address black screen bugs (#4008)

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

@@ -9,7 +9,7 @@ import Tooltip from '../Tooltip';
 import ListMenu from '../ListMenu';
 
 const baseClasses = {
-  Button: 'flex items-center rounded-md border-transparent cursor-pointer group/button',
+  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',
   Secondary:

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import IconButton from '../IconButton';
 import Icon from '../Icon';
@@ -14,6 +15,7 @@ const ToolbarButton = ({
   dropdownContent,
   //
   className,
+  disabled,
   size,
   toolTipClassName,
   disableToolTip = false,
@@ -36,13 +38,14 @@ const ToolbarButton = ({
       <Tooltip
         isSticky={shouldShowDropdown}
         content={shouldShowDropdown ? dropdownContent : label}
+        secondaryContent={disabled ? 'Not available on the current viewport' : null}
         tight={shouldShowDropdown}
         className={toolTipClassNameToUse}
         isDisabled={disableToolTip}
       >
         <IconButton
           size={sizeToUse}
-          className={className}
+          className={classNames(className, disabled ? '!cursor-default' : '')}
           onClick={() => {
             onInteraction({
               itemId: id,
@@ -78,6 +81,7 @@ ToolbarButton.propTypes = {
   size: PropTypes.string,
   toolTipClassName: PropTypes.string,
   disableToolTip: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export default ToolbarButton;

platform/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -88,7 +88,11 @@ const determineActiveViewportId = (state: DefaultState, newViewports: Map) => {
   // and find the best match
   const currentOrientation = currentActiveViewport.viewportOptions.orientation;
 
-  const sortedViewports = Array.from(newViewports.values()).sort((a, b) => {
+  const filteredNewViewports = Array.from(newViewports.values()).filter(
+    viewport => viewport.displaySetInstanceUIDs?.length > 0
+  );
+
+  const sortedViewports = Array.from(filteredNewViewports.values()).sort((a, b) => {
     // Compare orientations
     const aOrientationMatch = a.viewportOptions.orientation === currentOrientation;
     const bOrientationMatch = b.viewportOptions.orientation === currentOrientation;
@@ -227,6 +231,7 @@ export function ViewportGridProvider({ children, service }) {
             // If the viewport doesn't have a viewportId, we create one
             if (!viewport.viewportOptions?.viewportId) {
               const randomUID = utils.uuidv4().substring(0, 8);
+              viewport.viewportOptions = viewport.viewportOptions || {};
               viewport.viewportOptions.viewportId = `viewport-${randomUID}`;
             }
 

platform/ui/src/tailwind.css

@@ -30,5 +30,5 @@ body {
   pointer-events: none;
   cursor: not-allowed;
   user-select: none;
-  opacity: 0.4;
+  opacity: 0.5;
 }