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

uc-cdis · Apr 30, 2024 · 862ead3 · 862ead3
1 parent 1e4c824
commit 862ead3
Show file tree

Hide file tree

Showing 19 changed files with 100 additions and 120 deletions.
diff --git a/extensions/cornerstone-dicom-seg/package.json b/extensions/cornerstone-dicom-seg/package.json
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.66.7",
-    "@cornerstonejs/core": "^1.66.7",
+    "@cornerstonejs/adapters": "^1.67.0",
+    "@cornerstonejs/core": "^1.67.0",
     "@kitware/vtk.js": "29.7.0",
     "react-color": "^2.19.3"
   }

diff --git a/extensions/cornerstone-dicom-sr/package.json b/extensions/cornerstone-dicom-sr/package.json
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.66.7",
-    "@cornerstonejs/core": "^1.66.7",
-    "@cornerstonejs/tools": "^1.66.7",
+    "@cornerstonejs/adapters": "^1.67.0",
+    "@cornerstonejs/core": "^1.67.0",
+    "@cornerstonejs/tools": "^1.67.0",
     "classnames": "^2.3.2"
   }
 }
diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json
@@ -38,7 +38,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.66.7",
+    "@cornerstonejs/dicom-image-loader": "^1.67.0",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.8.0-beta.65",
     "@ohif/ui": "3.8.0-beta.65",
@@ -55,10 +55,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.66.7",
-    "@cornerstonejs/core": "^1.66.7",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.66.7",
-    "@cornerstonejs/tools": "^1.66.7",
+    "@cornerstonejs/adapters": "^1.67.0",
+    "@cornerstonejs/core": "^1.67.0",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.67.0",
+    "@cornerstonejs/tools": "^1.67.0",
     "@kitware/vtk.js": "29.7.0",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

diff --git a/extensions/cornerstone/src/commandsModule.ts b/extensions/cornerstone/src/commandsModule.ts
@@ -745,9 +745,6 @@ function commandsModule({
     setViewportColormap: {
       commandFn: actions.setViewportColormap,
     },
-    toggleImageSliceSync: {
-      commandFn: actions.toggleImageSliceSync,
-    },
     setSourceViewportForReferenceLinesTool: {
       commandFn: actions.setSourceViewportForReferenceLinesTool,
     },

diff --git a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
@@ -696,20 +696,24 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
 
     this.viewportsDisplaySets.set(viewport.id, displaySetInstanceUIDs);
 
-    if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
-      // delegate the volume loading to the hanging protocol service if it has a custom image load strategy
-      return hangingProtocolService.runImageLoadStrategy({
-        viewportId: viewport.id,
-        volumeInputArray,
+    const volumesNotLoaded = volumeToLoad.filter(volume => !volume.loadStatus.loaded);
+
+    if (volumesNotLoaded.length) {
+      if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
+        // delegate the volume loading to the hanging protocol service if it has a custom image load strategy
+        return hangingProtocolService.runImageLoadStrategy({
+          viewportId: viewport.id,
+          volumeInputArray,
+        });
+      }
+
+      volumesNotLoaded.forEach(volume => {
+        if (!volume.loadStatus.loading) {
+          volume.load();
+        }
       });
     }
 
-    volumeToLoad.forEach(volume => {
-      if (!volume.loadStatus.loaded && !volume.loadStatus.loading) {
-        volume.load();
-      }
-    });
-
     // This returns the async continuation only
     return this.setVolumesForViewport(viewport, volumeInputArray, presentations);
   }

diff --git a/extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx b/extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import html2canvas from 'html2canvas';
 import {
   Enums,
   getEnabledElement,
   getOrCreateCanvas,
   StackViewport,
-  VolumeViewport,
+  BaseVolumeViewport,
 } from '@cornerstonejs/core';
 import { ToolGroupManager } from '@cornerstonejs/tools';
 import PropTypes from 'prop-types';
@@ -154,7 +154,7 @@ const CornerstoneViewportDownloadForm = ({
               console.warn('Unable to set properties', e);
             }
           });
-        } else if (downloadViewport instanceof VolumeViewport) {
+        } else if (downloadViewport instanceof BaseVolumeViewport) {
           const actors = viewport.getActors();
           // downloadViewport.setActors(actors);
           actors.forEach(actor => {

diff --git a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@@ -52,45 +52,28 @@ const generateAdvancedPresets = hangingProtocolService => {
     .filter(preset => preset !== null);
 };
 
-function ToolbarLayoutSelectorWithServices({ servicesManager, ...props }) {
-  const { toolbarService } = servicesManager.services;
-
+function ToolbarLayoutSelectorWithServices({ commandsManager, servicesManager, ...props }) {
   const [isDisabled, setIsDisabled] = useState(false);
 
   const handleMouseEnter = () => {
     setIsDisabled(false);
   };
 
-  const onSelection = useCallback(
-    props => {
-      toolbarService.recordInteraction({
-        interactionType: 'action',
-        commands: [
-          {
-            commandName: 'setViewportGridLayout',
-            commandOptions: { ...props },
-          },
-        ],
-      });
-      setIsDisabled(true);
-    },
-    [toolbarService]
-  );
-  const onSelectionPreset = useCallback(
-    props => {
-      toolbarService.recordInteraction({
-        interactionType: 'action',
-        commands: [
-          {
-            commandName: 'setHangingProtocol',
-            commandOptions: { ...props },
-          },
-        ],
-      });
-      setIsDisabled(true);
-    },
-    [toolbarService]
-  );
+  const onSelection = useCallback(props => {
+    commandsManager.run({
+      commandName: 'setViewportGridLayout',
+      commandOptions: { ...props },
+    });
+    setIsDisabled(true);
+  }, []);
+
+  const onSelectionPreset = useCallback(props => {
+    commandsManager.run({
+      commandName: 'setHangingProtocol',
+      commandOptions: { ...props },
+    });
+    setIsDisabled(true);
+  }, []);
 
   return (
     <div onMouseEnter={handleMouseEnter}>
@@ -151,15 +134,15 @@ function LayoutSelector({
       disableToolTip={tooltipDisabled}
       dropdownContent={
         DropdownContent !== null && (
-          <div className="flex">
+          <div className="flex ">
             <div className="bg-secondary-dark flex flex-col gap-2.5 p-2">
               <div className="text-aqua-pale text-xs">Common</div>
 
               <div className="flex gap-4">
                 {commonPresets.map((preset, index) => (
                   <LayoutPreset
                     key={index}
-                    classNames="hover:bg-primary-dark group p-1"
+                    classNames="hover:bg-primary-dark group p-1 cursor-pointer"
                     icon={preset.icon}
                     commandOptions={preset.commandOptions}
                     onSelection={onSelection}
@@ -175,7 +158,7 @@ function LayoutSelector({
                 {advancedPresets.map((preset, index) => (
                   <LayoutPreset
                     key={index + commonPresets.length}
-                    classNames="hover:bg-primary-dark group flex gap-2 p-1"
+                    classNames="hover:bg-primary-dark group flex gap-2 p-1 cursor-pointer"
                     icon={preset.icon}
                     title={preset.title}
                     commandOptions={preset.commandOptions}

diff --git a/extensions/default/src/findViewportsByPosition.ts b/extensions/default/src/findViewportsByPosition.ts
@@ -44,6 +44,13 @@ export const findOrCreateViewport = (
       },
     };
   }
+
+  // and lastly if there is no default viewport, then we see if we can grab the
+  // viewportsByPosition at the position index and use that
+  // const candidate = Object.values(viewportsByPosition)[position];
+
+  // // if it has something to display, then we can use it
+  // return candidate?.displaySetInstanceUIDs ? candidate : {};
   return {};
 };
 

diff --git a/extensions/default/src/getToolbarModule.tsx b/extensions/default/src/getToolbarModule.tsx
@@ -29,7 +29,8 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     },
     {
       name: 'ohif.layoutSelector',
-      defaultComponent: ToolbarLayoutSelectorWithServices,
+      defaultComponent: props =>
+        ToolbarLayoutSelectorWithServices({ ...props, commandsManager, servicesManager }),
     },
     {
       name: 'ohif.buttonGroup',

diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json
@@ -32,8 +32,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.66.7",
-    "@cornerstonejs/tools": "^1.66.7",
+    "@cornerstonejs/core": "^1.67.0",
+    "@cornerstonejs/tools": "^1.67.0",
     "@ohif/core": "3.8.0-beta.65",
     "@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.65",
     "@ohif/ui": "3.8.0-beta.65",

diff --git a/modes/basic-test-mode/src/toolbarButtons.ts b/modes/basic-test-mode/src/toolbarButtons.ts
@@ -179,15 +179,7 @@ const toolbarButtons: Button[] = [
       type: 'tool',
       icon: 'tool-3d-rotate',
       label: '3D Rotate',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: {
-            toolName: 'TrackBallRotate',
-          },
-          context: 'CORNERSTONE',
-        },
-      ],
+      commands: setToolActiveToolbar,
     },
   },
   {
@@ -196,11 +188,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'tool-capture',
       label: 'Capture',
-      commands: [
-        {
-          commandName: 'showDownloadViewportModal',
-        },
-      ],
+      commands: 'showDownloadViewportModal',
       evaluate: 'evaluate.action',
     },
   },

diff --git a/modes/longitudinal/src/toolbarButtons.ts b/modes/longitudinal/src/toolbarButtons.ts
@@ -169,11 +169,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'tool-capture',
       label: 'Capture',
-      commands: [
-        {
-          commandName: 'showDownloadViewportModal',
-        },
-      ],
+      commands: 'showDownloadViewportModal',
       evaluate: 'evaluate.action',
     },
   },
@@ -184,11 +180,6 @@ const toolbarButtons: Button[] = [
       rows: 3,
       columns: 4,
       evaluate: 'evaluate.action',
-      commands: [
-        {
-          commandName: 'setViewportGridLayout',
-        },
-      ],
     },
   },
   {

diff --git a/platform/app/package.json b/platform/app/package.json
@@ -53,7 +53,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^1.66.7",
+    "@cornerstonejs/dicom-image-loader": "^1.67.0",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.8.0-beta.65",
     "@ohif/extension-cornerstone": "3.8.0-beta.65",

diff --git a/platform/core/package.json b/platform/core/package.json
@@ -37,7 +37,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.66.7",
+    "@cornerstonejs/dicom-image-loader": "^1.67.0",
     "@ohif/ui": "3.8.0-beta.65",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

diff --git a/platform/ui/src/components/SplitButton/SplitButton.tsx b/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:

diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx b/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;
diff --git a/platform/ui/src/contextProviders/ViewportGridProvider.tsx b/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}`;
             }
 

diff --git a/platform/ui/src/tailwind.css b/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;
 }