feat: Update dicom tag browser to display label and overview images + bulkdata references (#336)

* Render bulkdata references

* Lint

* Update dicom tag browser to process overview and label images

Author: igoroctaviano

src/components/DicomTagBrowser/DicomTagBrowser.tsx

@@ -18,6 +18,7 @@ interface DisplaySet {
   SeriesTime?: string
   SeriesNumber: string
   SeriesDescription?: string
+  SeriesInstanceUID?: string
   Modality: string
   images: any[]
 }
@@ -83,35 +84,51 @@ const DicomTagBrowser = ({ clients, studyInstanceUID }: DicomTagBrowserProps): J
 
     if (slides.length > 0) {
       displaySets = slides
-        .map((slide): DisplaySet | null => {
-          const { volumeImages } = slide
-          if (volumeImages?.[0] === undefined) return null
-
-          const {
-            SeriesDate,
-            SeriesTime,
-            SeriesNumber,
-            SeriesInstanceUID,
-            SeriesDescription,
-            Modality
-          } = volumeImages[0]
+        .map((slide): DisplaySet[] => {
+          const slideDisplaySets: DisplaySet[] = []
+
+          // Helper function to process any image type
+          const processImageType = (
+            images: any[] | undefined,
+            imageType: string
+          ): void => {
+            if (images?.[0] !== undefined) {
+              console.info(`Found ${images.length} ${imageType} image(s) for slide ${slide.containerIdentifier}`)
+
+              const {
+                SeriesDate,
+                SeriesTime,
+                SeriesNumber,
+                SeriesInstanceUID,
+                SeriesDescription,
+                Modality
+              } = images[0]
+
+              processedSeries.push(SeriesInstanceUID)
+
+              const ds: DisplaySet = {
+                displaySetInstanceUID: index,
+                SeriesDate,
+                SeriesTime,
+                SeriesInstanceUID,
+                SeriesNumber: String(SeriesNumber),
+                SeriesDescription,
+                Modality,
+                images
+              }
+              slideDisplaySets.push(ds)
+              index++
+            }
+          }
 
-          processedSeries.push(SeriesInstanceUID)
+          // Process all image types
+          processImageType(slide.volumeImages, 'volume')
+          processImageType(slide.overviewImages, 'overview')
+          processImageType(slide.labelImages, 'label')
 
-          const ds: DisplaySet = {
-            displaySetInstanceUID: index,
-            SeriesDate,
-            SeriesTime,
-            SeriesInstanceUID,
-            // @ts-expect-error
-            SeriesNumber,
-            SeriesDescription,
-            Modality,
-            images: volumeImages
-          }
-          index++
-          return ds
+          return slideDisplaySets
         })
+        .flat()
         .filter((set): set is DisplaySet => set !== null && set !== undefined)
     }
 
@@ -122,8 +139,7 @@ const DicomTagBrowser = ({ clients, studyInstanceUID }: DicomTagBrowserProps): J
             displaySetInstanceUID: index,
             SeriesDate: series.SeriesDate,
             SeriesTime: series.SeriesTime,
-            // @ts-expect-error
-            SeriesNumber: series.SeriesNumber,
+            SeriesNumber: String(series.SeriesNumber),
             SeriesDescription: series.SeriesDescription,
             SeriesInstanceUID: series.SeriesInstanceUID,
             Modality: series.Modality,

src/components/DicomTagBrowser/dicomTagUtils.ts

@@ -118,5 +118,26 @@ export function getRows (metadata: Record<string, any>, depth = 0): TagInfo[] {
  */
 export function getSortedTags (metadata: Record<string, any>): TagInfo[] {
   const tagList = getRows(metadata)
+
+  // Add bulkdataReferences as a special tag if it exists
+  if (metadata.bulkdataReferences !== undefined && metadata.bulkdataReferences !== null) {
+    const bulkdataRefs = metadata.bulkdataReferences
+    const bulkdataTag: TagInfo = {
+      tag: 'bulkdataReferences',
+      vr: 'OB',
+      keyword: 'bulkdataReferences',
+      value: `Object with ${Object.keys(bulkdataRefs).length} bulk data reference(s)`,
+      level: 0,
+      children: Object.keys(bulkdataRefs).map(key => ({
+        tag: `bulkdataReferences.${key}`,
+        vr: 'OB',
+        keyword: key,
+        value: JSON.stringify(bulkdataRefs[key]),
+        level: 1
+      }))
+    }
+    tagList.push(bulkdataTag)
+  }
+
   return tagList.sort((a, b) => a.tag.localeCompare(b.tag))
 }