Allow to sort thumbnails by AcquisitionDateTime or any other stack property (sorted by InstanceNumber ascending by default)

- Retrieve AcquisitionDateTime via DICOMWeb (WIP for DIMSE)
- Add a global template helper to sort arrays by an array element property or deep array element propery, and sort type

Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.html

@@ -2,7 +2,7 @@
     <div class="studyBrowser">
         <div class="scrollableStudyThumbnails">
             {{#each study in studies}}
-                {{#each thumbnail in (studyThumbnails study)}}
+                {{#each thumbnail in (sort (studyThumbnails study) thumbnailSortBy thumbnailSortType)}}
                     {{>thumbnailEntry thumbnail=thumbnail}}
                 {{/each}}
             {{/each}}

Packages/viewerbase/lib/createStacks.js

@@ -49,6 +49,9 @@ createStacks = function(study) {
                 // Include the instance number
                 displaySet.instanceNumber = instance.instanceNumber;
 
+                // Include the acquisition datetime
+                displaySet.acquisitionDatetime = instance.acquisitionDatetime;
+
                 displaySets.push(displaySet);
             } else if (isSingleImageModality(instance.modality)) {
                 displaySet = makeDisplaySet(series, [ instance ]);
@@ -59,6 +62,9 @@ createStacks = function(study) {
                 // Include the instance number
                 displaySet.instanceNumber = instance.instanceNumber;
 
+                // Include the acquisition datetime
+                displaySet.acquisitionDatetime = instance.acquisitionDatetime;
+
                 displaySets.push(displaySet);
             } else {
                 stackableInstances.push(instance);

Packages/viewerbase/lib/helpers/sorting.js

@@ -0,0 +1,59 @@
+import { _ } from 'meteor/underscore';
+import { Template } from 'meteor/templating';
+
+/**
+ * Global Blaze UI helper to sort array elements
+ *  by an array element's property (property) or deep object property (property.childProperty)
+ * Sorts ascending as default
+ */
+Template.registerHelper('sort', (array, sortBy, sortType) => {
+    if (!sortBy) {
+        return array;
+    }
+
+    console.log(array);
+
+    //  To keep the order for the same values of the field which is used to sort:
+    //      1. Group the array by the field
+    //      2. Sort the grouped array
+    //      3. Ungroup the sorted array
+
+    const groupedArray = _.groupBy(array, (element) => {
+        if (sortBy) {
+            var groupingElement = getKeyValue(element, sortBy);
+            if (groupingElement) {
+                return groupingElement;
+            }
+        }
+        return element;
+    });
+
+    const sortedArray = _.sortBy(groupedArray, (element) => {
+        if (sortBy) {
+            var sortingElement = getKeyValue(element[0], sortBy);
+            if (sortingElement) {
+                return sortingElement;
+            }
+        }
+        return element;
+    });
+
+    if (sortType === 'desc') {
+        return _.flatten(sortedArray.reverse(), true);
+    }
+
+    return _.flatten(sortedArray, true);
+});
+
+function getKeyValue(object, keyPath) {
+    keyPath = keyPath.split('.');
+    for (var i = 0; i < keyPath.length; i++) {
+        if (object && _.has(object, keyPath[i])) {
+            object = object[keyPath[i]];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return object;
+}

Packages/viewerbase/package.js

@@ -206,6 +206,7 @@ Package.onUse(function(api) {
         'lib/helpers/objectEach.js',
         'lib/helpers/ifTypeIs.js',
         'lib/helpers/prettyPrintStringify.js',
+        'lib/helpers/sorting.js',
         'lib/helpers/studyThumbnails.js',
         'lib/helpers/formatPN.js'
     ], 'client');