feat(thumbnails): Enhance DICOM Thumbnail Rendering with different strategies (#5004)

Co-authored-by: Martin Bellehumeur, M. Eng. <23396581+mbellehumeur@users.noreply.github.com>

platform/app/cypress/integration/OHIFVideoDisplay.spec.js

@@ -5,11 +5,11 @@ describe('OHIF Video Display', function () {
   });
 
   it('checks if series thumbnails are being displayed', function () {
-    cy.get('[data-cy="study-browser-thumbnail-no-image"]').its('length').should('be.gt', 1);
+    cy.get('[data-cy="study-browser-thumbnail-no-image"]').its('length').should('be.eq', 1);
   });
 
   it('performs double-click to load thumbnail in active viewport', () => {
-    cy.get('[data-cy="study-browser-thumbnail-no-image"]:nth-child(2)').dblclick();
+    cy.get('[data-cy="study-browser-thumbnail-no-image"]:nth-child(1)').dblclick();
 
     //const expectedText = 'Ser: 3';
     //cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);

platform/app/package.json

@@ -53,7 +53,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^3.12.1",
+    "@cornerstonejs/dicom-image-loader": "^3.12.2",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.11.0-beta.27",
     "@ohif/extension-cornerstone": "3.11.0-beta.27",

platform/app/public/config/e2e.js

@@ -138,7 +138,7 @@ window.config = {
         supportsReject: true,
         supportsStow: true,
         imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
+        thumbnailRendering: 'thumbnail',
         enableStudyLazyLoad: true,
         supportsFuzzyMatching: false,
         supportsWildcard: true,

platform/app/public/config/kheops.js

@@ -136,7 +136,7 @@ window.config = {
         supportsReject: true,
         supportsStow: true,
         imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
+        thumbnailRendering: 'thumbnail',
         enableStudyLazyLoad: true,
         supportsFuzzyMatching: false,
         supportsWildcard: true,

platform/core/package.json

@@ -37,8 +37,8 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/core": "^3.12.1",
-    "@cornerstonejs/dicom-image-loader": "^3.12.1",
+    "@cornerstonejs/core": "^3.12.2",
+    "@cornerstonejs/dicom-image-loader": "^3.12.2",
     "@ohif/ui": "3.11.0-beta.27",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/core/src/types/DisplaySet.ts

@@ -18,10 +18,21 @@ export type DisplaySet = {
   isOverlayDisplaySet?: boolean;
 
   // Details about how to display:
-  /** A URL that can be used to display the thumbnail.  Typically a data url */
+  /**
+   *  A URL that can be used to display the thumbnail.  Typically a data url
+   * This can be set to null to avoid trying to display a thumbnail, eg for
+   * display sets without a thumbnail.
+   */
   thumbnailSrc?: string;
   /** A fetch method to get the thumbnail */
   getThumbnailSrc?(imageId?: string): Promise<string>;
+
+  /**
+   * A fetch URL to display the content.  This is used for content such as
+   * pdf display.
+   */
+  renderedUrl?: string;
+
   SeriesDate?: string;
   SeriesTime?: string;
   instance?: InstanceMetadata;

platform/core/src/utils/index.ts

@@ -35,6 +35,7 @@ import {
   sortStudyInstances,
   sortingCriteria,
   seriesSortCriteria,
+  instancesSortCriteria,
 } from './sortStudy';
 import { splitComma, getSplitParam } from './splitComma';
 import { createStudyBrowserTabs } from './createStudyBrowserTabs';
@@ -56,6 +57,7 @@ const utils = {
   sortStudyInstances,
   sortingCriteria,
   seriesSortCriteria,
+  instancesSortCriteria,
   writeScript,
   formatDate,
   formatTime,

platform/core/src/utils/sortStudy.ts

@@ -42,7 +42,19 @@ const seriesSortCriteria = {
 };
 
 const instancesSortCriteria = {
-  default: (a, b) => parseInt(a.InstanceNumber) - parseInt(b.InstanceNumber),
+  default: (a, b) => {
+    // Sort by InstanceNumber (0020,0013)
+    const aInstance = parseInt(a.InstanceNumber) || 0;
+    const bInstance = parseInt(b.InstanceNumber) || 0;
+    if (aInstance !== bInstance) {
+      return (parseInt(a.InstanceNumber) || 0) - (parseInt(b.InstanceNumber) || 0);
+    }
+    // Fallback rule to enable consistent sorting
+    if (a.SOPInstanceUID === b.SOPInstanceUID) {
+      return 0;
+    }
+    return a.SOPInstanceUID < b.SOPInstanceUID ? -1 : 1;
+  },
 };
 
 const sortingCriteria = {
@@ -116,4 +128,11 @@ export default function sortStudy(
   return study;
 }
 
-export { sortStudy, sortStudySeries, sortStudyInstances, sortingCriteria, seriesSortCriteria };
+export {
+  sortStudy,
+  sortStudySeries,
+  sortStudyInstances,
+  sortingCriteria,
+  seriesSortCriteria,
+  instancesSortCriteria,
+};

platform/docs/docs/development/playwright-testing.md

@@ -8,14 +8,15 @@ summary: Guide to writing and running end-to-end tests for OHIF Viewer using Pla
 
 
 :::note
-You might need to run the `yarn playwright install ` for the first time if you have not
+You might need to run the `bun playwright install ` for the first time if you have not
 :::
 
 # Running the tests
 
 ```bash
+#
 # run the tests
-yarn test:e2e:ui
+bun test:e2e:ui
 ```
 
 

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -67,12 +67,12 @@ const Thumbnail = ({
         )}
       >
         <div className="h-[114px] w-[128px]">
-          <div className="relative">
+          <div className="relative bg-black">
             {imageSrc ? (
               <img
                 src={imageSrc}
                 alt={imageAltText}
-                className="h-[114px] w-[128px] rounded"
+                className="h-[114px] w-[128px] rounded object-contain"
                 crossOrigin="anonymous"
               />
             ) : (