Fixing viewports initial sorting issue

Packages/hangingprotocols/client/protocolEngine.js

@@ -467,6 +467,32 @@ HP.ProtocolEngine = class ProtocolEngine {
 
                     if ((totalMatchScore > highestImageMatchingScore) || !bestMatch) {
                         highestImageMatchingScore = totalMatchScore;
+
+                        // Set the displaySet ID
+                        study.displaySets.every(displaySet => {
+                            // Skip displaySet if it has no images
+                            if (!displaySet.images.length) {
+                                return true;
+                            }
+
+                            // Skip displaySet if series is different
+                            if (displaySet.seriesInstanceUid !== series.seriesInstanceUid) {
+                                return true;
+                            }
+
+                            // Try to find the current instance
+                            const instanceFound = _.findWhere(displaySet.images, {
+                                sopInstanceUid: instance.sopInstanceUid
+                            });
+
+                            // If the instance was found, set the displaySet ID
+                            if (instanceFound) {
+                                imageDetails.displaySetInstanceUid = displaySet.displaySetInstanceUid;
+                                imageDetails.imageId = getImageId(instance);
+                                return false;
+                            }
+                        });
+
                         bestMatch = imageDetails;
                     }
 
@@ -584,21 +610,14 @@ HP.ProtocolEngine = class ProtocolEngine {
                 currentViewportData.seriesInstanceUid = details.bestMatch.seriesInstanceUid;
                 currentViewportData.sopInstanceUid = details.bestMatch.sopInstanceUid;
                 currentViewportData.currentImageIdIndex = details.bestMatch.currentImageIdIndex;
+                currentViewportData.displaySetInstanceUid = details.bestMatch.displaySetInstanceUid;
+                currentViewportData.imageId = details.bestMatch.imageId;
             }
 
             const study = ViewerStudies.findOne({
                 studyInstanceUid: details.bestMatch.studyInstanceUid
             });
 
-            // Find the best matched display set. TODO: Fix this to actually
-            // find the most appropriate display set
-            study.displaySets.forEach(displaySet => {
-                if (displaySet.seriesInstanceUid === details.bestMatch.seriesInstanceUid) {
-                    currentViewportData.displaySetInstanceUid = displaySet.displaySetInstanceUid;
-                    return false;
-                }
-            })
-
             if (!currentViewportData.displaySetInstanceUid) {
                 throw "No matching display set found?";
             }

Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.html

@@ -1,11 +1,11 @@
 <template name="gridLayout">
     <div id='imageViewerViewports'>
-        {{ #each viewports }}
+        {{#each viewport in viewports}}
-        <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
+            <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
-            <div class="removable">
+                <div class="removable">
-                {{ >imageViewerViewport}}
+                    {{>imageViewerViewport (clone viewport)}}
+                </div>
             </div>
-        </div>
+        {{/each}}
-        {{ /each }}
     </div>
 </template>

Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.js

@@ -1,32 +1,47 @@
 import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
 
 Template.gridLayout.helpers({
-    height: function() {
+    // Get the height percentage for each viewport
-        var rows = this.rows || 1;
+    height() {
+        const instance = Template.instance();
+        const rows = instance.data.rows || 1;
         return 100 / rows;
     },
-    width: function() {
+
-        var columns = this.columns || 1;
+    // Get the width percentage for each viewport
+    width() {
+        const instance = Template.instance();
+        const columns = instance.data.columns || 1;
         return 100 / columns;
     },
-    viewports: function() {
-        var numViewports = this.rows * this.columns;
-        var viewportData = this.viewportData;
-        var numViewportsWithData = this.viewportData.length;
 
+    // Return the viewports list
+    viewports() {
+        const instance = Template.instance();
+        const rows = instance.data.rows;
+        const columns = instance.data.columns;
+        const numViewports = rows * columns;
+        const viewportData = instance.data.viewportData;
+        const numViewportsWithData = viewportData.length;
+
+        // Check if the viewportData length is different from the given
         if (numViewportsWithData < numViewports) {
+            // Add the missing viewports
             var difference = numViewports - numViewportsWithData;
             for (var i = 0; i < difference; i++) {
                 viewportData.push({
                     viewportIndex: numViewportsWithData + i + 1,
-                    rows: this.rows,
+                    rows,
-                    columns: this.columns
+                    columns
                 });
             }
         } else if (numViewportsWithData > numViewports) {
+            // Remove the additional viewports
             return viewportData.slice(0, numViewports);
         }
 
+        // Return the viewports
         return viewportData;
     }
 });

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.html

@@ -8,7 +8,7 @@
     <div class='viewportInstructions'>
         Please drag a stack here to view images.
     </div>
-    {{ >loadingIndicator }}
+    {{>loadingIndicator}}
-    {{ >viewportOverlay }}
+    {{>viewportOverlay}}
-    {{ >viewportOrientationMarkers }}
+    {{>viewportOrientationMarkers}}
 </template>

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -379,7 +379,7 @@ function loadDisplaySetIntoViewport(data, templateData) {
 function setDisplaySet(data, displaySetInstanceUid, templateData) {
     var study = data.study;
     if (!study || !study.displaySets) {
-        throw "Study does not exist or has no display sets";
+        throw 'Study does not exist or has no display sets';
         return;
     }
 
@@ -394,7 +394,7 @@ function setDisplaySet(data, displaySetInstanceUid, templateData) {
 
     // If we didn't find anything, stop here
     if (!data.displaySet) {
-        throw "Display set not found in specified study!";
+        throw 'Display set not found in specified study!';
         return;
     }