AWV-1: Adding navigation of display sets

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

@@ -0,0 +1,16 @@
+<template name="displaySetNavigation">
+    <div id="{{this.id}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{#if isPrevious}}js-prev{{else}}js-next{{/if}}"
+         title="{{this.title}}">
+        <div class="svgContainer">
+            {{#if isPrevious}}
+                <i class="fa fa-toggle-up fa-fw"></i>
+            {{else}}
+                <i class="fa fa-toggle-down fa-fw"></i>
+            {{/if}}
+        </div>
+        <div class="buttonLabel">
+            {{#if isPrevious}}Previous{{else}}Next{{/if}}
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+
+Template.displaySetNavigation.events({
+    'click .js-next'(event, instance) {
+        OHIF.viewer.moveDisplaySet(true);
+    },
+
+    'click .js-prev'(event, instance) {
+        OHIF.viewer.moveDisplaySet(false);
+    }
+});

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

@@ -116,6 +116,20 @@ function loadDisplaySetIntoViewport(data, templateData) {
     var endLoadingHandler = cornerstoneTools.loadHandlerManager.getEndLoadHandler();
     var errorLoadingHandler = cornerstoneTools.loadHandlerManager.getErrorLoadingHandler();
 
+    // Get the current viewport settings
+    var viewport = cornerstone.getViewport(element);
+
+    // Store the current series data inside the Layout Manager
+    layoutManager.viewportData[viewportIndex] = {
+        imageId: imageId,
+        studyInstanceUid: data.studyInstanceUid,
+        seriesInstanceUid: data.seriesInstanceUid,
+        displaySetInstanceUid: data.displaySetInstanceUid,
+        currentImageIdIndex: data.currentImageIdIndex,
+        viewport: viewport,
+        viewportIndex: viewportIndex
+    };
+
     // Start loading the image.
     cornerstone.loadAndCacheImage(imageId).then(function(image) {
         var enabledElement;
@@ -188,9 +202,6 @@ function loadDisplaySetIntoViewport(data, templateData) {
         // Add stack state managers for the stack tool, CINE tool, and reference lines
         cornerstoneTools.addStackStateManager(element, ['stack', 'playClip', 'referenceLines']);
 
-        // Get the current viewport settings
-        var viewport = cornerstone.getViewport(element);
-
         // Enable orientation markers, if applicable
         updateOrientationMarkers(element);
 
@@ -322,17 +333,6 @@ function loadDisplaySetIntoViewport(data, templateData) {
         $(element).off(allCornerstoneEvents, sendActivationTrigger);
         $(element).on(allCornerstoneEvents, sendActivationTrigger);
 
-        // Store the current series data inside the Layout Manager
-        layoutManager.viewportData[viewportIndex] = {
-            imageId: imageId,
-            studyInstanceUid: data.studyInstanceUid,
-            seriesInstanceUid: data.seriesInstanceUid,
-            displaySetInstanceUid: data.displaySetInstanceUid,
-            currentImageIdIndex: data.currentImageIdIndex,
-            viewport: viewport,
-            viewportIndex: viewportIndex
-        };
-
         ViewerData[contentId].loadedSeriesData = layoutManager.viewportData;
 
         // Check if image plane (orientation / loction) data is present for the current image

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

@@ -1,20 +1,16 @@
 <template name="playClipButton">
     <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{ #if isPlaying }}active{{/if}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if isPlaying}}active{{/if}}"
          title="{{this.title}}">
-    <div class="svgContainer">
-        {{ #if isPlaying }}
-            <i class="fa fa-stop fa-fw"></i>
-        {{ else }}
-            <i class="fa fa-play fa-fw"></i>
-        {{ /if }}
-    </div>
-        <div class="buttonLabel">
-            {{ #if isPlaying }}
-                Stop
-            {{ else }}
-                Play
+        <div class="svgContainer">
+            {{#if isPlaying}}
+                <i class="fa fa-stop fa-fw"></i>
+            {{else}}
+                <i class="fa fa-play fa-fw"></i>
             {{/if}}
         </div>
+        <div class="buttonLabel">
+            {{#if isPlaying}}Stop{{else}}Play{{/if}}
+        </div>
     </div>
-</template>
+</template>