Re #2571: thumbnail footer remove instance number and add link icon if any derived display set is present (#2582)

* Re #2571, thumbnail footer layout modifications: remove instance number and add link icon if any derived display set is present.

platform/ui/src/components/studyBrowser/StudyBrowser.js

@@ -25,11 +25,12 @@ function StudyBrowser(props) {
                 altImageText,
                 displaySetInstanceUID,
                 imageId,
-                InstanceNumber,
+                derivedDisplaySetsNumber,
                 numImageFrames,
                 SeriesDescription,
                 SeriesNumber,
                 hasWarnings,
+                hasDerivedDisplaySets,
               } = thumb;
 
               return (
@@ -48,12 +49,13 @@ function StudyBrowser(props) {
                     // Thumb
                     altImageText={altImageText}
                     imageId={imageId}
-                    InstanceNumber={InstanceNumber}
+                    derivedDisplaySetsNumber={derivedDisplaySetsNumber}
                     displaySetInstanceUID={displaySetInstanceUID} // used by drop
                     numImageFrames={numImageFrames}
                     SeriesDescription={SeriesDescription}
                     SeriesNumber={SeriesNumber}
                     hasWarnings={hasWarnings}
+                    hasDerivedDisplaySets={hasDerivedDisplaySets}
                     // Events
                     onClick={onThumbnailClick.bind(
                       undefined,
@@ -83,7 +85,7 @@ StudyBrowser.propTypes = {
           altImageText: PropTypes.string,
           displaySetInstanceUID: PropTypes.string.isRequired,
           imageId: PropTypes.string,
-          InstanceNumber: PropTypes.number,
+          derivedDisplaySetsNumber: PropTypes.number,
           numImageFrames: PropTypes.number,
           SeriesDescription: PropTypes.string,
           SeriesNumber: PropTypes.number,

platform/ui/src/components/studyBrowser/Thumbnail.js

@@ -15,11 +15,12 @@ const StudyLoadingListener = classes.StudyLoadingListener;
 function ThumbnailFooter({
   SeriesDescription,
   SeriesNumber,
-  InstanceNumber,
   numImageFrames,
   hasWarnings,
+  hasDerivedDisplaySets,
 }) {
   const [inconsistencyWarnings, inconsistencyWarningsSet] = useState([]);
+  const [derivedDisplaySetsActive, derivedDisplaySetsActiveSet] = useState([]);
 
   useEffect(() => {
     let unmounted = false;
@@ -28,10 +29,15 @@ function ThumbnailFooter({
         inconsistencyWarningsSet(response);
       }
     });
+    hasDerivedDisplaySets.then(response => {
+      if (!unmounted) {
+        derivedDisplaySetsActiveSet(response);
+      }
+    });
     return () => {
       unmounted = true;
     };
-  }, [hasWarnings]);
+  }, [hasWarnings, hasDerivedDisplaySets]);
 
   const infoOnly = !SeriesDescription;
 
@@ -88,20 +94,47 @@ function ThumbnailFooter({
       </React.Fragment>
     );
   };
+
+  const getDerivedInfo = derivedDisplaySetsActive => {
+    return (
+      <React.Fragment>
+        {derivedDisplaySetsActive ? (
+          <div className="derived">
+            <Icon name="link" />
+          </div>
+        ) : (
+          <React.Fragment></React.Fragment>
+        )}
+      </React.Fragment>
+    );
+  };
+
   const getSeriesInformation = (
     SeriesNumber,
-    InstanceNumber,
     numImageFrames,
-    inconsistencyWarnings
+    inconsistencyWarnings,
+    derivedDisplaySetsActive
   ) => {
-    if (!SeriesNumber && !InstanceNumber && !numImageFrames) {
+    if (!SeriesNumber && !numImageFrames) {
       return;
     }
     const seriesInformation = (
       <div className="series-information">
-        {getInfo(SeriesNumber, 'S:')}
+        <React.Fragment>
-        {getInfo(InstanceNumber, 'I:')}
+          {SeriesNumber !== undefined ? (
-        {getInfo(numImageFrames, '', 'image-frames')}
+            getInfo(SeriesNumber, 'S:')
+          ) : (
+            <React.Fragment></React.Fragment>
+          )}
+        </React.Fragment>
+        <React.Fragment>
+          {numImageFrames !== undefined ? (
+            getInfo(numImageFrames, '', 'image-frames')
+          ) : (
+            <React.Fragment></React.Fragment>
+          )}
+        </React.Fragment>
+        {getDerivedInfo(derivedDisplaySetsActive)}
         {getWarningInfo(SeriesNumber, inconsistencyWarnings)}
       </div>
     );
@@ -114,9 +147,9 @@ function ThumbnailFooter({
       <div className="series-description">{SeriesDescription}</div>
       {getSeriesInformation(
         SeriesNumber,
-        InstanceNumber,
         numImageFrames,
-        inconsistencyWarnings
+        inconsistencyWarnings,
+        derivedDisplaySetsActive
       )}
     </div>
   );
@@ -130,11 +163,11 @@ function Thumbnail(props) {
     displaySetInstanceUID,
     imageId,
     imageSrc,
-    InstanceNumber,
     numImageFrames,
     SeriesDescription,
     SeriesNumber,
     hasWarnings,
+    hasDerivedDisplaySets,
     StudyInstanceUID,
     onClick,
     onDoubleClick,
@@ -232,8 +265,8 @@ Thumbnail.propTypes = {
   altImageText: PropTypes.string,
   SeriesDescription: PropTypes.string,
   SeriesNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  InstanceNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   hasWarnings: PropTypes.instanceOf(Promise),
+  hasDerivedDisplaySets: PropTypes.instanceOf(Promise),
   numImageFrames: PropTypes.number,
   onDoubleClick: PropTypes.func,
   onClick: PropTypes.func,

platform/viewer/src/connectedComponents/Viewer.js

@@ -23,6 +23,8 @@ import './Viewer.css';
 import StudyPrefetcher from '../components/StudyPrefetcher.js';
 import StudyLoadingMonitor from '../components/StudyLoadingMonitor';
 
+const { studyMetadataManager } = OHIF.utils;
+
 class Viewer extends Component {
   static propTypes = {
     studies: PropTypes.arrayOf(
@@ -429,6 +431,31 @@ class Viewer extends Component {
 
 export default withDialog(Viewer);
 
+/**
+ * Async function to check if the displaySet has any derived one
+ *
+ * @param {*object} displaySet
+ * @param {*object} study
+ * @returns {bool}
+ */
+const _checkForDerivedDisplaySets = async function(displaySet, study) {
+  let derivedDisplaySetsNumber = 0;
+  if (
+    displaySet.Modality &&
+    !['SEG', 'SR', 'RTSTRUCT', 'RTDOSE'].includes(displaySet.Modality)
+  ) {
+    const studyMetadata = studyMetadataManager.get(study.StudyInstanceUID);
+
+    const derivedDisplaySets = studyMetadata.getDerivedDatasets({
+      referencedSeriesInstanceUID: displaySet.SeriesInstanceUID,
+    });
+
+    derivedDisplaySetsNumber = derivedDisplaySets.length;
+  }
+
+  return derivedDisplaySetsNumber > 0;
+};
+
 /**
  * Async function to check if there are any inconsistences in the series.
  *
@@ -684,7 +711,6 @@ const _mapStudiesToThumbnails = function(studies, activeDisplaySetInstanceUID) {
       const {
         displaySetInstanceUID,
         SeriesDescription,
-        InstanceNumber,
         numImageFrames,
         SeriesNumber,
       } = displaySet;
@@ -709,6 +735,11 @@ const _mapStudiesToThumbnails = function(studies, activeDisplaySetInstanceUID) {
         studies
       );
 
+      const hasDerivedDisplaySets = _checkForDerivedDisplaySets(
+        displaySet,
+        study
+      );
+
       return {
         active: _isDisplaySetActive(
           displaySet,
@@ -719,10 +750,10 @@ const _mapStudiesToThumbnails = function(studies, activeDisplaySetInstanceUID) {
         altImageText,
         displaySetInstanceUID,
         SeriesDescription,
-        InstanceNumber,
         numImageFrames,
         SeriesNumber,
         hasWarnings,
+        hasDerivedDisplaySets,
       };
     });