chore(test): Integration test wait until rendered/queried instead of timed (#3540)

extensions/cornerstone-dicom-sr/package.json

@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.4.4",
+    "@cornerstonejs/adapters": "^1.5.0",
-    "@cornerstonejs/core": "^1.4.4",
+    "@cornerstonejs/core": "^1.5.0",
-    "@cornerstonejs/tools": "^1.4.4",
+    "@cornerstonejs/tools": "^1.5.0",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone/package.json

@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.4.4",
+    "@cornerstonejs/adapters": "^1.5.0",
-    "@cornerstonejs/core": "^1.4.4",
+    "@cornerstonejs/core": "^1.5.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.4.4",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.5.0",
-    "@cornerstonejs/tools": "^1.4.4",
+    "@cornerstonejs/tools": "^1.5.0",
     "@kitware/vtk.js": "27.3.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/measurement-tracking/package.json

@@ -30,8 +30,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.4.4",
+    "@cornerstonejs/core": "^1.5.0",
-    "@cornerstonejs/tools": "^1.4.4",
+    "@cornerstonejs/tools": "^1.5.0",
     "@ohif/core": "3.7.0-beta.33",
     "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.33",
     "@ohif/ui": "3.7.0-beta.33",

platform/app/cypress/support/commands.js

@@ -46,7 +46,7 @@ Cypress.Commands.add('openStudy', PatientName => {
   cy.openStudyList();
   cy.get('#filter-patientNameOrId').type(PatientName);
   // cy.get('@getStudies').then(() => {
-  cy.wait(1000);
+  cy.waitQueryList();
 
   cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
     .contains(PatientName)
@@ -65,7 +65,8 @@ Cypress.Commands.add(
       ) {
         cy.openStudyInViewer(StudyInstanceUID, otherParams);
         cy.waitDicomImage();
-        cy.wait(2000);
+        // Very short wait to ensure pending updates are handled
+        cy.wait(25);
       }
     });
   }
@@ -78,6 +79,9 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('waitQueryList', () => {
+  cy.get('[data-querying="false"]');
+});
 /**
  * Command to search for a Modality and open the study.
  *
@@ -89,7 +93,7 @@ Cypress.Commands.add('openStudyModality', Modality => {
 
   cy.get('#filter-accessionOrModalityOrDescription')
     .type(Modality)
-    .wait(2000);
+    .waitQueryList();
 
   cy.get('[data-cy="study-list-results"]')
     .contains(Modality)
@@ -113,7 +117,7 @@ Cypress.Commands.add('openStudyList', () => {
   // For some reason cypress 12.x does not like to stub the network request
   // so we just wait herer for 1 second
   // cy.wait('@getStudies');
-  cy.wait(1000);
+  cy.waitQueryList();
 });
 
 Cypress.Commands.add('waitStudyList', () => {
@@ -198,54 +202,27 @@ Cypress.Commands.add('expectMinimumThumbnails', (seriesToWait = 1) => {
 });
 
 //Command to wait DICOM image to load into the viewport
-Cypress.Commands.add('waitDicomImage', (timeout = 50000) => {
+Cypress.Commands.add('waitDicomImage', () => {
-  const loaded = cy.isPageLoaded();
+  cy.window()
-
+    .its('cornerstone')
-  if (loaded) {
+    .should($cornerstone => {
-    cy.window()
+      const enabled = $cornerstone.getEnabledElements();
-      .its('cornerstone')
+      if (enabled?.length) {
-      .then({ timeout }, $cornerstone => {
+        enabled.forEach((item, i) => {
-        return new Cypress.Promise(resolve => {
+          if (
-          const onEvent = renderedEvt => {
+            item.viewport.viewportStatus !==
-            const element = renderedEvt.detail.element;
+            $cornerstone.Enums.ViewportStatus.RENDERED
-
+          ) {
-            element.removeEventListener(
+            throw new Error(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
+              `Viewport ${i} in state ${item.viewport.viewportStatus}`
-              onEvent
-            );
-            $cornerstone.eventTarget.removeEventListener(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
-              onEvent
-            );
-            resolve();
-          };
-          const onEnabled = enabledEvt => {
-            const element = enabledEvt.detail.element;
-
-            element.addEventListener(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
-              onEvent
-            );
-
-            $cornerstone.eventTarget.removeEventListener(
-              $cornerstone.Enums.Events.ELEMENT_ENABLED,
-              onEnabled
-            );
-          };
-          const enabledElements = $cornerstone.getEnabledElements();
-          if (enabledElements && enabledElements.length) {
-            // Sometimes the page finishes rendering before this gets run,
-            // if so, just resolve immediately.
-            resolve();
-          } else {
-            $cornerstone.eventTarget.addEventListener(
-              $cornerstone.Enums.Events.ELEMENT_ENABLED,
-              onEnabled
             );
           }
         });
-      });
+      } else {
-  }
+        throw new Error('No enabled elements');
+      }
+    });
+  cy.log('DICOM image loaded');
 });
 
 //Command to reset and clear all the changes made to the viewport
@@ -401,7 +378,8 @@ Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
     .eq(columns - 1)
     .click();
 
-  cy.wait(1000);
+  cy.wait(10);
+  cy.waitDicomImage();
 });
 
 function convertCanvas(documentClone) {

platform/app/src/routes/WorkList/WorkList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Link, useNavigate } from 'react-router-dom';
@@ -112,6 +112,9 @@ function WorkList({
   const [expandedRows, setExpandedRows] = useState([]);
   const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
   const numOfStudies = studiesTotal;
+  const querying = useMemo(() => {
+    return isLoadingData || expandedRows.length > 0;
+  }, [isLoadingData, expandedRows]);
 
   const setFilterValues = val => {
     if (filterValues.pageNumber === val.pageNumber) {
@@ -218,6 +221,7 @@ function WorkList({
 
       fetchSeries(studyInstanceUid);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expandedRows, studies]);
 
@@ -501,6 +505,7 @@ function WorkList({
             <StudyListTable
               tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
               numOfStudies={numOfStudies}
+              querying={querying}
               filtersMeta={filtersMeta}
             />
             <div className="grow">

platform/ui/src/components/StudyListTable/StudyListTable.tsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 
 import StudyListTableRow from './StudyListTableRow';
 
-const StudyListTable = ({ tableDataSource }) => {
+const StudyListTable = ({ tableDataSource, querying }) => {
   return (
     <div className="bg-black">
       <div className="container m-auto relative">
         <table className="w-full text-white">
-          <tbody data-cy="study-list-results">
+          <tbody data-cy="study-list-results" data-querying={querying}>
             {tableDataSource.map((tableData, i) => {
               return <StudyListTableRow tableData={tableData} key={i} />;
             })}
@@ -24,6 +24,7 @@ StudyListTable.propTypes = {
     PropTypes.shape({
       row: PropTypes.array.isRequired,
       expandedContent: PropTypes.node.isRequired,
+      querying: PropTypes.bool,
       onClickRow: PropTypes.func.isRequired,
       isExpanded: PropTypes.bool.isRequired,
     })

yarn.lock

@@ -1589,10 +1589,10 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cornerstonejs/adapters@^1.4.4":
+"@cornerstonejs/adapters@^1.5.0":
-  version "1.4.4"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-1.4.4.tgz#49e31d5f25412688ac451a666bc7a5e5937b59ec"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-1.5.0.tgz#3ff8e0e6c36b8a080f4550180b6d713b17af6288"
-  integrity sha512-MY7o6QX319DtjUCmJ2cHvzreFcaeKm2jwYH8uf5pCHbpjeW8W2HTifqSLec4CYTefWlxQgRAT46On9sDmGojJA==
+  integrity sha512-GLn2yKNOz4PODjgVt2i2in6ageYebazuECzm61u/oqHF+i1oIc6GUk1mD6SLA8D71DG3EAxW+T4/YNgN+Fcv5g==
   dependencies:
     "@babel/runtime-corejs2" "^7.17.8"
     dcmjs "^0.29.5"
@@ -1650,6 +1650,16 @@
     gl-matrix "^3.4.3"
     lodash.clonedeep "4.5.0"
 
+"@cornerstonejs/core@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-1.5.0.tgz#20eaae16456f42a9f3eb2989a048afe43b4a64a4"
+  integrity sha512-AytOb2eepFaF95WuufXe+u3q4Xtu/BNPYppiFJlupGk7a1vRO0ESb+p+EJnZB3UCeJOr26ToVbpXPGvihpPv5Q==
+  dependencies:
+    "@kitware/vtk.js" "27.3.1"
+    detect-gpu "^5.0.22"
+    gl-matrix "^3.4.3"
+    lodash.clonedeep "4.5.0"
+
 "@cornerstonejs/dicom-image-loader@^1.4.4":
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/@cornerstonejs/dicom-image-loader/-/dicom-image-loader-1.4.4.tgz#49eae4dcb32427d7b992f10d277423692632e507"
@@ -1664,19 +1674,19 @@
     pako "^2.0.4"
     uuid "^9.0.0"
 
-"@cornerstonejs/streaming-image-volume-loader@^1.4.4":
+"@cornerstonejs/streaming-image-volume-loader@^1.5.0":
-  version "1.4.4"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-1.4.4.tgz#f92575eecd6ac5988a40c7f9e2d7a223e9948e6c"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-1.5.0.tgz#5a235210ac37d88c8bbcc3a9ec9ce66f925cada7"
-  integrity sha512-/er5VwRsOlMssFx+zPBqLWD/RM3MCqzTVXg+DHw3fi/TFTUqK1TmrrEoLQmL6wKPV2zpKbnhqaWFj0GyLu0kVA==
+  integrity sha512-3O20GZdjl3Mk8F8OK+m9jB2A6p0qdI01uTb1zcFeubZLtMRQQDRK9WPv1yDJTpTSGUGXtP/unNBHvwP1YEfyLw==
   dependencies:
-    "@cornerstonejs/core" "^1.4.4"
+    "@cornerstonejs/core" "^1.5.0"
 
-"@cornerstonejs/tools@^1.4.4":
+"@cornerstonejs/tools@^1.5.0":
-  version "1.4.4"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-1.4.4.tgz#3568dfe089977a2be23b631a81106542799713d0"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-1.5.0.tgz#edde925fe5feeafbed782be7f6479e064d53e7ac"
-  integrity sha512-edS63QnkoYxjSGfjetOGfotNACVk57R9or+GYz6r7NsBxnjy00Xxrj5twf4SM0PsAJcaDi/1gDwtahoiUlLELg==
+  integrity sha512-q9pjDXN1OBkXL0NOtzrphz74BN8N5WWi06y5XahxnuDQ3F/6xDYLnrCLD8msPIO54jb7UeNDXF5cyvA+FXGDBw==
   dependencies:
-    "@cornerstonejs/core" "^1.4.4"
+    "@cornerstonejs/core" "^1.5.0"
     lodash.clonedeep "4.5.0"
     lodash.get "^4.4.2"