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

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

extensions/default/src/getSopClassHandlerModule.js

@@ -5,7 +5,13 @@ import getDisplaySetMessages from './getDisplaySetMessages';
 import getDisplaySetsFromUnsupportedSeries from './getDisplaySetsFromUnsupportedSeries';
 import { chartHandler } from './SOPClassHandlers/chartSOPClassHandler';
 
-const { isImage, sopClassDictionary, isDisplaySetReconstructable } = utils;
+const {
+  isImage,
+  sortStudyInstances,
+  instancesSortCriteria,
+  sopClassDictionary,
+  isDisplaySetReconstructable,
+} = utils;
 const { ImageSet } = classes;
 
 const DEFAULT_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
@@ -62,9 +68,12 @@ function getDisplaySetInfo(instances) {
 }
 
 const makeDisplaySet = instances => {
+  // Need to sort the instances in order to get a consistent instance/thumbnail
+  sortStudyInstances(instances);
   const instance = instances[0];
   const imageSet = new ImageSet(instances);
-
+  const { extensionManager } = appContext;
+  const dataSource = extensionManager.getActiveDataSource()[0];
   const {
     isDynamicVolume,
     value: isReconstructable,
@@ -79,6 +88,16 @@ const makeDisplaySet = instances => {
   // set appropriate attributes to image set...
   const messages = getDisplaySetMessages(instances, isReconstructable, isDynamicVolume);
 
+  const imageIds = dataSource.getImageIdsForDisplaySet(imageSet);
+  let imageId = imageIds[Math.floor(imageIds.length / 2)];
+  let thumbnailInstance = instances[Math.floor(instances.length / 2)];
+  if (isDynamicVolume) {
+    const timePoints = dynamicVolumeInfo.timePoints;
+    const middleIndex = Math.floor(timePoints.length / 2);
+    const middleTimePointImageIds = timePoints[middleIndex];
+    imageId = middleTimePointImageIds[Math.floor(middleTimePointImageIds.length / 2)];
+  }
+
   imageSet.setAttributes({
     volumeLoaderSchema,
     displaySetInstanceUID: imageSet.uid, // create a local alias for the imageSet UID
@@ -100,6 +119,7 @@ const makeDisplaySet = instances => {
     averageSpacingBetweenFrames: averageSpacingBetweenFrames || null,
     isDynamicVolume,
     dynamicVolumeInfo,
+    getThumbnailSrc: dataSource.retrieve.getGetThumbnailSrc?.(thumbnailInstance, imageId),
     supportsWindowLevel: true,
     label:
       instance.SeriesDescription ||
@@ -107,14 +127,7 @@ const makeDisplaySet = instances => {
     FrameOfReferenceUID: instance.FrameOfReferenceUID,
   });
 
-  // Sort the images in this series if needed
-  const shallSort = true; //!OHIF.utils.ObjectPath.get(Meteor, 'settings.public.ui.sortSeriesByIncomingOrder');
-  if (shallSort) {
-    imageSet.sortBy((a, b) => {
-      // Sort by InstanceNumber (0020,0013)
-      return (parseInt(a.InstanceNumber) || 0) - (parseInt(b.InstanceNumber) || 0);
-    });
-  }
+  imageSet.sortBy(instancesSortCriteria.default);
 
   // Include the first image instance number (after sorted)
   /*imageSet.setAttribute(
@@ -178,10 +191,8 @@ function getDisplaySetsFromSeries(instances) {
     }
 
     let displaySet;
-
     if (isMultiFrame(instance)) {
       displaySet = makeDisplaySet([instance]);
-
       displaySet.setAttributes({
         sopClassUids,
         numImageFrames: instance.NumberOfFrames,