fix: fallback to original dataset VR for XS

Co-authored-by: Davide Punzo <punzodavide@hotmail.it>

extensions/dicom-tag-browser/src/components/DicomTagBrowser.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { classes } from '@ohif/core';
+import { classes, cornerstone as OHIFCornerstone } from '@ohif/core';
 import dcmjs from 'dcmjs';
 import DicomBrowserSelect from './DicomBrowserSelect';
 import moment from 'moment';
@@ -10,6 +10,8 @@ const { ImageSet } = classes;
 const { DicomMetaDictionary } = dcmjs.data;
 const { nameMap } = DicomMetaDictionary;
 
+const { metadataProvider } = OHIFCornerstone;
+
 const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
   const [
     activeDisplaySetInstanceUID,
@@ -17,6 +19,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
   ] = useState(displaySetInstanceUID);
   const [activeInstance, setActiveInstance] = useState(0);
   const [tags, setTags] = useState([]);
+  const [meta, setMeta] = useState('');
   const [instanceList, setInstanceList] = useState([]);
   const [displaySetList, setDisplaySetList] = useState([]);
   const [isImageStack, setIsImageStack] = useState(false);
@@ -83,6 +86,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
     }
 
     setTags(getSortedTags(metadata));
+    setMeta(metadata);
     setInstanceList(instanceList);
     setDisplaySetList(newDisplaySetList);
     setIsImageStack(isImageStack);
@@ -114,41 +118,43 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
         options={displaySetList}
       />
       {instanceSelectList}
-      <DicomTagTable tags={tags}></DicomTagTable>
+      <DicomTagTable tags={tags} meta={meta}></DicomTagTable>
     </div>
   );
 };
 
-function DicomTagTable({ tags }) {
-  const rows = getFormattedRowsFromTags(tags);
+function DicomTagTable({ tags, meta }) {
+  const rows = getFormattedRowsFromTags(tags, meta);
 
   return (
     <div>
       <table className="dicom-tag-browser-table">
-        <tr>
-          <th className="dicom-tag-browser-table-left">Tag</th>
-          <th className="dicom-tag-browser-table-left">Value Representation</th>
-          <th className="dicom-tag-browser-table-left">Keyword</th>
-          <th className="dicom-tag-browser-table-left">Value</th>
-        </tr>
-        {rows.map(row => {
-          const className = row.className ? row.className : null;
+        <tbody>
+          <tr>
+            <th className="dicom-tag-browser-table-left">Tag</th>
+            <th className="dicom-tag-browser-table-left">Value Representation</th>
+            <th className="dicom-tag-browser-table-left">Keyword</th>
+            <th className="dicom-tag-browser-table-left">Value</th>
+          </tr>
+          {rows.map((row, index) => {
+            const className = row.className ? row.className : null;
 
-          return (
-            <tr className={className}>
-              <td>{row[0]}</td>
-              <td className="dicom-tag-browser-table-center">{row[1]}</td>
-              <td>{row[2]}</td>
-              <td>{row[3]}</td>
-            </tr>
-          );
-        })}
+            return (
+              <tr className={className} key={`DICOMTagRow-${index}`}>
+                <td>{row[0]}</td>
+                <td className="dicom-tag-browser-table-center">{row[1]}</td>
+                <td>{row[2]}</td>
+                <td>{row[3]}</td>
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );
 }
 
-function getFormattedRowsFromTags(tags) {
+function getFormattedRowsFromTags(tags, meta) {
   const rows = [];
 
   tags.forEach(tagInfo => {
@@ -175,6 +181,17 @@ function getFormattedRowsFromTags(tags) {
         rows.push(...formatedRowsFromTags);
       });
     } else {
+      if (tagInfo.vr === 'xs') {
+        try {
+          const dataset = metadataProvider.getStudyDataset(meta.StudyInstanceUID);
+          const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
+          const originalTagInfo = dataset[tag];
+          tagInfo.vr = originalTagInfo.vr;
+        } catch (error) {
+          console.error(`Failed to parse value representation for tag '${tagInfo.keyword}'`);
+        }
+      }
+
       rows.push([
         `${tagInfo.tagIndent}${tagInfo.tag}`,
         tagInfo.vr,

platform/core/src/classes/MetadataProvider.js

@@ -20,6 +20,7 @@ class MetadataProvider {
       writable: false,
       value: new Map(),
     });
+    this.datasets = {};
   }
 
   async addInstance(dicomJSONDatasetOrP10ArrayBuffer, options = {}) {
@@ -52,6 +53,7 @@ class MetadataProvider {
       SOPInstanceUID,
     } = naturalizedDataset;
 
+    this._getAndCacheStudyDataset(StudyInstanceUID, dicomJSONDataset);
     const study = this._getAndCacheStudy(StudyInstanceUID);
     const series = this._getAndCacheSeriesFromStudy(study, SeriesInstanceUID);
     const instance = this._getAndCacheInstanceFromStudy(series, SOPInstanceUID);
@@ -71,6 +73,16 @@ class MetadataProvider {
     this.imageIdToUIDs.set(imageId, uids);
   }
 
+  _getAndCacheStudyDataset(StudyInstanceUID, dataset) {
+    if (!this.datasets[StudyInstanceUID]) {
+      this.datasets[StudyInstanceUID] = dataset;
+    }
+  }
+
+  getStudyDataset(StudyInstanceUID) {
+    return this.datasets[StudyInstanceUID];
+  }
+
   _getAndCacheStudy(StudyInstanceUID) {
     const studies = this.studies;
 
@@ -83,6 +95,7 @@ class MetadataProvider {
 
     return study;
   }
+
   _getAndCacheSeriesFromStudy(study, SeriesInstanceUID) {
     let series = study.series.get(SeriesInstanceUID);
 

platform/ui/src/components/errorBoundary/ErrorBoundary.js

@@ -15,8 +15,8 @@ const ErrorFallback = ({ error, componentStack, resetErrorBoundary }) => {
 
 const OHIFErrorBoundary = ({
   context = 'OHIF',
-  onReset = () => {},
-  onError = () => {},
+  onReset = () => { },
+  onError = () => { },
   fallbackComponent,
   children,
 }) => {
@@ -45,7 +45,7 @@ OHIFErrorBoundary.propTypes = {
   onReset: PropTypes.func,
   onError: PropTypes.func,
   children: PropTypes.node.isRequired,
-  fallbackComponent: PropTypes.element,
+  fallbackComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]),
 };
 
 export default OHIFErrorBoundary;