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>

Packages/viewerbase/lib/enableHotkeys.js

@@ -12,8 +12,10 @@ Meteor.startup(function() {
         stackScroll: 'S',
         pan: 'P',
         magnify: 'M',
-        scrollDown: ['DOWN', 'PAGEDOWN'],
-        scrollUp: ['UP', 'PAGEUP'],
+        scrollDown: 'DOWN',
+        scrollUp: 'UP',
+        nextDisplaySet: 'PAGEDOWN',
+        previousDisplaySet: 'PAGEUP',
         nextPanel: 'RIGHT',
         previousPanel: 'LEFT',
         invert: 'I',
@@ -142,6 +144,12 @@ Meteor.startup(function() {
                 switchToImageRelative(-1);
             }
         },
+        previousDisplaySet() {
+            OHIF.viewer.moveDisplaySet(false);
+        },
+        nextDisplaySet() {
+            OHIF.viewer.moveDisplaySet(true);
+        },
         nextPanel: function() {
             nextActivePanel();
         },

Packages/viewerbase/package.js

@@ -15,7 +15,7 @@ Package.onUse(function(api) {
     api.use('practicalmeteor:loglevel');
     api.use('momentjs:moment');
     api.use('validatejs');
-    
+
     // Our custom packages
     api.use('design');
     api.use('ohif:core');
@@ -119,6 +119,9 @@ Package.onUse(function(api) {
     api.addFiles('client/components/viewer/playClipButton/playClipButton.html', 'client');
     api.addFiles('client/components/viewer/playClipButton/playClipButton.js', 'client');
 
+    api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.html', 'client');
+    api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.js', 'client');
+
     // Library functions
     api.addFiles('lib/layoutManager.js', 'client');
     api.addFiles('lib/createStacks.js', 'client');
@@ -139,7 +142,7 @@ Package.onUse(function(api) {
     api.addFiles('lib/resizeViewportElements.js', 'client');
     api.addFiles('lib/setFocusToActiveViewport.js', 'client');
     api.addFiles('lib/updateAllViewports.js', 'client');
-    
+
     api.addFiles('lib/instanceClassSpecificViewport.js', 'client');
     api.addFiles('lib/setMammogramViewportAlignment.js', 'client');
     api.addFiles('lib/isImage.js', 'client');