[IDC-1994] Sort series list by SeriesNumber, and sort by same SeriesNumber by date/time.

extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js

@@ -22,6 +22,12 @@ const OHIFDicomHtmlSopClassHandler = {
   getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
     const instance = series.getFirstInstance();
 
+    const {
+      SeriesDate,
+      SeriesTime,
+      SeriesNumber,
+    } = instance._instance.metadata;
+
     return {
       plugin: 'html',
       Modality: 'SR',
@@ -31,6 +37,9 @@ const OHIFDicomHtmlSopClassHandler = {
       SOPInstanceUID: instance.getSOPInstanceUID(),
       SeriesInstanceUID: series.getSeriesInstanceUID(),
       StudyInstanceUID: study.getStudyInstanceUID(),
+      SeriesDate,
+      SeriesTime,
+      SeriesNumber,
       authorizationHeaders,
     };
   },

extensions/dicom-microscopy/src/DicomMicroscopySopClassHandler.js

@@ -12,6 +12,12 @@ const DicomMicroscopySopClassHandler = {
   getDisplaySetFromSeries(series, study, dicomWebClient) {
     const instance = series.getFirstInstance();
 
+    const {
+      ContentDate,
+      ContentTime,
+      SeriesNumber,
+    } = instance._instance.metadata;
+
     // Note: We are passing the dicomweb client into each viewport!
 
     return {
@@ -22,6 +28,9 @@ const DicomMicroscopySopClassHandler = {
       SOPInstanceUID: instance.getSOPInstanceUID(),
       SeriesInstanceUID: series.getSeriesInstanceUID(),
       StudyInstanceUID: study.getStudyInstanceUID(),
+      SeriesDate: ContentDate, // Map ContentDate/Time to SeriesTime for series list sorting.
+      SeriesTime: ContentTime,
+      SeriesNumber,
     };
   },
 };

extensions/dicom-pdf/src/OHIFDicomPDFSopClassHandler.js

@@ -12,6 +12,12 @@ const OHIFDicomPDFSopClassHandler = {
   getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
     const instance = series.getFirstInstance();
 
+    const {
+      ContentDate,
+      ContentTime,
+      SeriesNumber,
+    } = instance._instance.metadata;
+
     return {
       plugin: 'pdf',
       Modality: 'DOC',
@@ -21,6 +27,9 @@ const OHIFDicomPDFSopClassHandler = {
       SOPInstanceUID: instance.getSOPInstanceUID(),
       SeriesInstanceUID: series.getSeriesInstanceUID(),
       StudyInstanceUID: study.getStudyInstanceUID(),
+      SeriesDate: ContentDate, // Map ContentDate/Time to SeriesTime for series list sorting.
+      SeriesTime: ContentTime,
+      SeriesNumber,
       authorizationHeaders: authorizationHeaders,
     };
   },

extensions/dicom-rt/src/OHIFDicomRTStructSopClassHandler.js

@@ -27,6 +27,7 @@ const OHIFDicomRTStructSopClassHandler = {
     const {
       SeriesDate,
       SeriesTime,
+      SeriesNumber,
       SeriesDescription,
       FrameOfReferenceUID,
       SOPInstanceUID,
@@ -53,6 +54,7 @@ const OHIFDicomRTStructSopClassHandler = {
       isLoaded: false,
       SeriesDate,
       SeriesTime,
+      SeriesNumber,
       SeriesDescription,
     };
 

extensions/dicom-segmentation/src/getOHIFDicomSegSopClassHandler.js

@@ -28,6 +28,7 @@ export default function getSopClassHandlerModule({ servicesManager }) {
       const {
         SeriesDate,
         SeriesTime,
+        SeriesNumber,
         SeriesDescription,
         FrameOfReferenceUID,
         SOPInstanceUID,
@@ -52,6 +53,7 @@ export default function getSopClassHandlerModule({ servicesManager }) {
         isLoaded: false,
         SeriesDate,
         SeriesTime,
+        SeriesNumber,
         SeriesDescription,
       };
 

platform/viewer/src/connectedComponents/Viewer.js

@@ -19,6 +19,7 @@ import UserManagerContext from '../context/UserManagerContext';
 import AppContext from '../context/AppContext';
 
 import './Viewer.css';
+import { finished } from 'stream';
 
 class Viewer extends Component {
   static propTypes = {
@@ -189,6 +190,7 @@ class Viewer extends Component {
           currentTimepointId,
         ]);
       }
+
       this.setState({
         thumbnails: _mapStudiesToThumbnails(studies),
       });
@@ -197,6 +199,7 @@ class Viewer extends Component {
 
   componentDidUpdate(prevProps) {
     const { studies, isStudyLoaded } = this.props;
+
     if (studies !== prevProps.studies) {
       this.setState({
         thumbnails: _mapStudiesToThumbnails(studies),
@@ -365,18 +368,36 @@ const _mapStudiesToThumbnails = function(studies) {
   return studies.map(study => {
     const { StudyInstanceUID } = study;
 
+    let finishedProcessing = true;
+
     const thumbnails = study.displaySets.map(displaySet => {
       const {
         displaySetInstanceUID,
         SeriesDescription,
         SeriesNumber,
         InstanceNumber,
         numImageFrames,
+        SeriesDate,
+        SeriesTime,
       } = displaySet;
 
       let imageId;
       let altImageText;
 
+      let seriesDateTime = '';
+
+      if (SeriesDate) {
+        if (SeriesTime) {
+          seriesDateTime = `${SeriesDate}${SeriesTime}`;
+        } else {
+          seriesDateTime = `${SeriesDate}$`;
+        }
+      }
+
+      if (!displaySet.hasOwnProperty('SeriesDate')) {
+        finishedProcessing = false;
+      }
+
       if (displaySet.Modality && displaySet.Modality === 'SEG') {
         // TODO: We want to replace this with a thumbnail showing
         // the segmentation map on the image, but this is easier
@@ -398,12 +419,63 @@ const _mapStudiesToThumbnails = function(studies) {
         SeriesNumber,
         InstanceNumber,
         numImageFrames,
+        seriesDateTime,
       };
     });
 
+    // Only sort if we have processed all displaySets, or this can be exceedingly slow whilst each is being created.
+
+    if (finishedProcessing) {
+      // Sort by SeriesNumber && SeriesDate/SeriesTime for the same SeriesNumber.
+      thumbnails.sort((a, b) => a.SeriesNumber - b.SeriesNumber);
+
+      _sortSameSeriesNumberByDateTime(thumbnails);
+    }
+
     return {
       StudyInstanceUID,
       thumbnails,
     };
   });
 };
+
+function _sortSameSeriesNumberByDateTime(thumbnails) {
+  if (!thumbnails.length) {
+    return;
+  }
+
+  let currentSeriesNumber = thumbnails[0].SeriesNumber;
+  let initialIndex = 0;
+
+  // Start from 1 as we intiialise with the details of index zero.
+  for (let i = 1; i < thumbnails.length; i++) {
+    const { SeriesNumber } = thumbnails[i];
+
+    if (currentSeriesNumber !== SeriesNumber) {
+      // When the series number changes:
+
+      if (i - 1 > initialIndex) {
+        // Sort initialIndex to i -1;
+        sortSubArrayBtDateTime(thumbnails, initialIndex, i - 1);
+      }
+
+      initialIndex = i;
+      currentSeriesNumber = SeriesNumber;
+    }
+  }
+
+  // Deal with the end of the list if the last N items have the same SeriesNumber
+  if (thumbnails.length - 1 > initialIndex) {
+    sortSubArrayBtDateTime(thumbnails, initialIndex, thumbnails.length - 1);
+  }
+}
+
+function sortSubArrayBtDateTime(thumbnails, initialIndex, lastIndex) {
+  const subArray = thumbnails.splice(
+    initialIndex,
+    lastIndex - initialIndex + 1
+  );
+
+  subArray.sort((a, b) => b.seriesDateTime - a.seriesDateTime);
+  thumbnails.splice(initialIndex, 0, ...subArray);
+}