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

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"
   }

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"
   }
 }

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",

extensions/cornerstone/src/commandsModule.ts

@@ -745,9 +745,6 @@ function commandsModule({
     setViewportColormap: {
       commandFn: actions.setViewportColormap,
     },
-    toggleImageSliceSync: {
-      commandFn: actions.toggleImageSliceSync,
-    },
     setSourceViewportForReferenceLinesTool: {
       commandFn: actions.setSourceViewportForReferenceLinesTool,
     },

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);
   }

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 => {

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,7 +134,7 @@ 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>
 
@@ -159,7 +142,7 @@ function LayoutSelector({
                 {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}

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 {};
 };
 

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',

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",