317: Updates (#338)

* Disable seg interpolation by default

* Use thumbnail if no overview images for thumbnails

* Address deep source issue

* Lint

* Bump dmv version

Author: igoroctaviano

package.json

@@ -56,7 +56,7 @@
     "craco-less": "^2.0.0",
     "dcmjs": "^0.35.0",
     "detect-browser": "^5.2.1",
-    "dicom-microscopy-viewer": "^0.48.9",
+    "dicom-microscopy-viewer": "^0.48.10",
     "dicomweb-client": "^0.10.3",
     "gh-pages": "^5.0.0",
     "oidc-client": "^1.11.5",

src/App.dark.less

@@ -32,3 +32,4 @@ img {
   object-fit: contain;
   max-height: 100%;
 }
+

src/App.light.less

@@ -32,3 +32,4 @@ img {
   object-fit: contain;
   max-height: 100%;
 }
+

src/components/SlideItem.tsx

@@ -44,21 +44,31 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
 
   componentDidMount (): void {
     this.setState({ isLoading: true })
-    if (this.props.slide.overviewImages.length > 0) {
-      const metadata = this.props.slide.overviewImages[0]
+
+    /* Use OVERVIEW if available, otherwise fall back to THUMBNAIL */
+    const previewImages = this.props.slide.overviewImages.length > 0
+      ? this.props.slide.overviewImages
+      : this.props.slide.thumbnailImages
+
+    if (previewImages.length > 0) {
+      const metadata = previewImages[0]
       if (this.overviewViewportRef.current !== null && this.overviewViewportRef.current !== undefined) {
         this.overviewViewportRef.current.innerHTML = ''
+        const imageType = this.props.slide.overviewImages.length > 0 ? 'OVERVIEW' : 'THUMBNAIL'
         console.info(
-          'instantiate viewer for OVERVIEW image of slide ' +
+          `instantiate viewer for ${imageType} image of slide ` +
           `"${metadata.ContainerIdentifier}"`
         )
+        // For thumbnails, use a much smaller resizeFactor to ensure the entire image fits
+        const resizeFactor = imageType === 'THUMBNAIL' ? 0.3 : 1
+
         this.overviewViewer = new dmv.viewer.OverviewImageViewer({
           client: this.props.clients[
             StorageClasses.VL_WHOLE_SLIDE_MICROSCOPY_IMAGE
           ],
           disableInteractions: true,
           metadata,
-          resizeFactor: 1,
+          resizeFactor,
           errorInterceptor: (error: CustomError) => {
             NotificationMiddleware.onError(
               NotificationMiddlewareContext.DMV,
@@ -69,6 +79,16 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
         this.overviewViewer.render({
           container: this.overviewViewportRef.current
         })
+
+        // For thumbnail images, ensure proper fitting after render
+        if (imageType === 'THUMBNAIL') {
+          setTimeout(() => {
+            if (this.overviewViewer !== undefined) {
+              // Force resize to ensure proper fitting
+              this.overviewViewer.resize()
+            }
+          }, 100)
+        }
       }
     }
 
@@ -108,9 +128,12 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
           selectable
         >
           <div style={{ position: 'relative', height: '100px' }}>
-            {this.props.slide.overviewImages.length > 0
+            {(this.props.slide.overviewImages.length > 0 || this.props.slide.thumbnailImages.length > 0)
               ? (
-                <div ref={this.overviewViewportRef} style={{ height: '100%' }} />
+                <div
+                  ref={this.overviewViewportRef}
+                  style={{ height: '100%' }}
+                />
                 )
               : (
                 <div style={{

src/components/SlideViewer.tsx

@@ -250,7 +250,7 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
       selectedPresentationStateUID: this.props.selectedPresentationStateUID,
       loadingFrames: new Set(),
       isICCProfilesEnabled: true,
-      isSegmentationInterpolationEnabled: true,
+      isSegmentationInterpolationEnabled: false,
       customizedSegmentColors: {}
     }
   }

src/data/slides.tsx

@@ -36,6 +36,7 @@ interface SlideImageCollection {
   volumeImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
   labelImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
   overviewImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
+  thumbnailImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
 }
 
 interface SlideOptions {
@@ -59,6 +60,7 @@ class Slide {
   readonly volumeImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
   readonly labelImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
   readonly overviewImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
+  readonly thumbnailImages: dmv.metadata.VLWholeSlideMicroscopyImage[]
 
   /**
    * @param options
@@ -95,6 +97,7 @@ class Slide {
     const volumeImages: dmv.metadata.VLWholeSlideMicroscopyImage[] = []
     const labelImages: dmv.metadata.VLWholeSlideMicroscopyImage[] = []
     const overviewImages: dmv.metadata.VLWholeSlideMicroscopyImage[] = []
+    const thumbnailImages: dmv.metadata.VLWholeSlideMicroscopyImage[] = []
     options.images.forEach((image) => {
       containerIdentifiers.add(image.ContainerIdentifier)
       seriesInstanceUIDs.add(image.SeriesInstanceUID)
@@ -105,6 +108,9 @@ class Slide {
         acquisitionUIDs.add(image.AcquisitionUID)
       }
       if (hasImageFlavor(image, ImageFlavors.VOLUME) || hasImageFlavor(image, ImageFlavors.THUMBNAIL)) {
+        if (hasImageFlavor(image, ImageFlavors.THUMBNAIL)) {
+          thumbnailImages.push(image)
+        }
         frameOfReferenceUIDs.VOLUME.add(image.FrameOfReferenceUID)
         if (image.PyramidUID !== null && image.PyramidUID !== undefined) {
           for (const identifier of Object.keys(opticalPathIdentifiers)) {
@@ -170,6 +176,7 @@ class Slide {
     this.volumeImages = volumeImages
     this.labelImages = labelImages
     this.overviewImages = overviewImages
+    this.thumbnailImages = thumbnailImages
 
     this.seriesInstanceUIDs = [...seriesInstanceUIDs]
     this.opticalPathIdentifiers = [...opticalPathIdentifiers]
@@ -284,6 +291,9 @@ const createSlides = (
           hasImageFlavor(image, ImageFlavors.VOLUME) ||
           hasImageFlavor(image, ImageFlavors.THUMBNAIL)
       )
+      const thumbnailImages = series.filter(
+        (image) => hasImageFlavor(image, ImageFlavors.THUMBNAIL)
+      )
       if (volumeImages.length > 0) {
         const refImage = volumeImages[0]
         const filteredVolumeImages = volumeImages.filter((image) => {
@@ -323,14 +333,16 @@ const createSlides = (
             containerIdentifier: refImage.ContainerIdentifier,
             volumeImages: filteredVolumeImages,
             labelImages: filteredLabelImages,
-            overviewImages: filteredOverviewImages
+            overviewImages: filteredOverviewImages,
+            thumbnailImages
           }
           slideMetadata.push(slideMetadataItem)
         } else {
           const slideMetadataItem = slideMetadata[slideMetadataIndex]
           slideMetadataItem.volumeImages.push(...filteredVolumeImages)
           slideMetadataItem.labelImages.push(...filteredLabelImages)
           slideMetadataItem.overviewImages.push(...filteredOverviewImages)
+          slideMetadataItem.thumbnailImages.push(...thumbnailImages)
         }
       }
     }
@@ -341,7 +353,8 @@ const createSlides = (
       images: [
         ...item.volumeImages,
         ...item.labelImages,
-        ...item.overviewImages
+        ...item.overviewImages,
+        ...item.thumbnailImages
       ]
     })
   })

yarn.lock

@@ -4990,10 +4990,10 @@ detective@^5.2.1:
     defined "^1.0.0"
     minimist "^1.2.6"
 
-dicom-microscopy-viewer@^0.48.9:
-  version "0.48.9"
-  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.48.9.tgz#90d190190fd10d450f0195d0d4800f54a5b423f7"
-  integrity sha512-q3b8cGbwNKcCWQhMcUDd9/gCXpYSkR8IXbm/S1T52qMJXYUogZWkYZ2E9wpik4CGJxTcYF525OQOeJFuROdeVA==
+dicom-microscopy-viewer@^0.48.10:
+  version "0.48.10"
+  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.48.10.tgz#980bacef047d2b14ee15b9c5fc2a88107fc3df71"
+  integrity sha512-2mgtK2WMUUmAFPiJVXYPf76A4dWrumiV0nT4peE1MaV81iVe4cWUf1GLGdCizL7NnzhyLicmV8bXz846djRFJA==
   dependencies:
     "@cornerstonejs/codec-charls" "^1.2.3"
     "@cornerstonejs/codec-libjpeg-turbo-8bit" "^1.2.2"