fix(modes): don't attempt to retrieve a stage index if HPs (#4552)

Co-authored-by: Ibrahim <93064150+IbrahimCSAE@users.noreply.github.com>
Co-authored-by: Ștefan Silviu-Alexandru <silviu.stefan@atta.systems>

.github/workflows/playwright.yml

@@ -8,6 +8,8 @@ jobs:
   playwright-tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
     strategy:
       fail-fast: false
       matrix:

addOns/externals/devDependencies/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@kitware/vtk.js": "32.1.0",
+    "@kitware/vtk.js": "32.1.1",
     "clsx": "^2.1.1",
     "core-js": "^3.2.1",
     "moment": "^2.9.4"

extensions/cornerstone-dicom-pmap/package.json

@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.20.13",
     "@cornerstonejs/adapters": "^2.2.20",
     "@cornerstonejs/core": "^2.2.20",
-    "@kitware/vtk.js": "32.1.0",
+    "@kitware/vtk.js": "32.1.1",
     "react-color": "^2.19.3"
   }
 }

extensions/cornerstone-dicom-seg/package.json

@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.20.13",
     "@cornerstonejs/adapters": "^2.2.20",
     "@cornerstonejs/core": "^2.2.20",
-    "@kitware/vtk.js": "32.1.0",
+    "@kitware/vtk.js": "32.1.1",
     "react-color": "^2.19.3"
   }
 }

extensions/cornerstone/package.json

@@ -59,7 +59,7 @@
     "@cornerstonejs/core": "^2.2.20",
     "@cornerstonejs/tools": "^2.2.20",
     "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "32.1.0",
+    "@kitware/vtk.js": "32.1.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -130,6 +130,21 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
    * individual resize observers
    */
   public resize(isGridResize = false) {
+    // https://stackoverflow.com/a/26279685
+    // This resize() call, among other things, rerenders the viewports. But when the entire viewer is
+    // display: none'd, it makes the size of all hidden elements 0, including the viewport canvas and its containers.
+    // Even if the viewer is later displayed again, trying to render when the size is 0 permanently "breaks" the
+    // viewport, making it fully black even after the size is normal again. So just ignore resize events when hidden:
+    const areViewportsHidden = Array.from(this.viewportsById.values()).every(viewportInfo => {
+      const element = viewportInfo.getElement();
+
+      return element.clientWidth === 0 && element.clientHeight === 0;
+    });
+    if (areViewportsHidden) {
+      console.warn('Ignoring resize when viewports have size 0');
+      return;
+    }
+
     // if there is a grid resize happening, it means the viewport grid
     // has been manipulated (e.g., panels closed, added, etc.) and we need
     // to resize all viewports, so we will add a timeout here to make sure

platform/app/cypress/support/commands.js

@@ -107,7 +107,7 @@ Cypress.Commands.add('isPageLoaded', (url = '/basic-test') => {
 
 Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
-  cy.visit('/', { timeout: 15000 });
+  cy.visit('/', { timeout: 30000 });
 
   // For some reason cypress 12.x does not like to stub the network request
   // so we just wait here for querying to be done.

platform/app/src/components/ViewportGrid.tsx

@@ -292,7 +292,7 @@ function ViewerViewportGrid(props: withAppTypes) {
         >
           <div
             data-cy="viewport-pane"
-            className={classNames('flex h-full w-full flex-col', {
+            className={classNames('flex h-full w-full min-w-[5px] flex-col', {
               'pointer-events-none':
                 !isActive && (appConfig?.activateViewportBeforeInteraction ?? true),
             })}

platform/app/src/routes/Mode/Mode.tsx

@@ -218,11 +218,11 @@ export default function ModeRoute({
         : hangingProtocol;
 
       // Determine the index of the stageId if the hangingProtocolIdToUse is defined
-      const stageIndex = hangingProtocolIdToUse
+      const stageIndex = Array.isArray(hangingProtocolIdToUse)
-        ? hangingProtocolService.getStageIndex(hangingProtocolIdToUse, {
+        ? -1
+        : hangingProtocolService.getStageIndex(hangingProtocolIdToUse, {
             stageId: runTimeStageId || undefined,
-          })
+          });
-        : -1;
       // Ensure that the stage index is never negative
       // If stageIndex is negative (e.g., if stage wasn't found), use 0 as the default
       const stageIndexToUse = Math.max(0, stageIndex);

platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx

@@ -78,25 +78,25 @@ Stack: ${error.stack}
       >
         <DialogContent className="border-input h-[50vh] w-[90vw] border-2 sm:max-w-[900px]">
           <DialogHeader>
-            <DialogTitle className="text-xl">{title}</DialogTitle>
+            <DialogTitle className="text-muted-foreground flex justify-between text-xl">
+              <div className="flex items-center">{title}</div>
+              <button
+                onClick={() => {
+                  copyErrorDetails();
+                  setShowDetails(false);
+                }}
+                className="text-aqua-pale hover:text-aqua-pale/80 flex items-center gap-2 rounded bg-gray-800 px-4 py-2 font-light"
+              >
+                <Icons.Code className="h-4 w-4" />
+                {t('Copy Details')}
+              </button>
+            </DialogTitle>
+
             <DialogDescription className="text-lg">{subtitle}</DialogDescription>
           </DialogHeader>
 
-          <ScrollArea className="h-[calc(90vh-120px)]">
+          <ScrollArea className="h-[100%]">
             <div className="space-y-4 pr-4 font-mono text-base">
-              <div className="flex justify-end">
-                <button
-                  onClick={() => {
-                    copyErrorDetails();
-                    setShowDetails(false);
-                  }}
-                  className="text-aqua-pale hover:text-aqua-pale/80 flex items-center gap-2 rounded bg-gray-800 px-4 py-2"
-                >
-                  <Icons.Code className="h-4 w-4" />
-                  {t('Copy Details')}
-                </button>
-              </div>
-
               <div className="space-y-4">
                 <p className="text-aqua-pale break-words text-lg">
                   {t('Context')}: {context}

version.txt

@@ -1 +1 @@
-3.9.1
+3.9.2

yarn.lock

@@ -4006,28 +4006,6 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@kitware/vtk.js@32.1.0":
-  version "32.1.0"
-  resolved "https://registry.yarnpkg.com/@kitware/vtk.js/-/vtk.js-32.1.0.tgz#db46655633b9ce8ef93a6df736fd6ee55395350f"
-  integrity sha512-lVLOwZtQPHCJnZ2WDXSPF8yIaGBYw97YUNFAKnQszk6G2OrHvoir3jHdUgE/Vmw0VpoXwngWumY7JY52BwXzew==
-  dependencies:
-    "@babel/runtime" "7.22.11"
-    "@types/webxr" "^0.5.5"
-    commander "9.2.0"
-    d3-scale "4.0.2"
-    fast-deep-equal "^3.1.3"
-    fflate "0.7.3"
-    gl-matrix "3.4.3"
-    globalthis "1.0.3"
-    seedrandom "3.0.5"
-    shader-loader "1.3.1"
-    shelljs "0.8.5"
-    spark-md5 "3.0.2"
-    stream-browserify "3.0.0"
-    webworker-promise "0.5.0"
-    worker-loader "3.0.8"
-    xmlbuilder2 "3.0.2"
-
 "@kitware/vtk.js@32.1.1":
   version "32.1.1"
   resolved "https://registry.yarnpkg.com/@kitware/vtk.js/-/vtk.js-32.1.1.tgz#20179cb5f65f33dea4626a948afe24eb16364f8a"