AWV-1: Adding navigation of display sets

OHIFViewer/client/components/toolbarSection/toolbarSection.js

@@ -92,6 +92,22 @@ Template.toolbarSection.helpers({
             iconClasses: 'fa fa-undo'
         });
 
+        buttonData.push({
+            id: 'previousDisplaySet',
+            title: 'Previous',
+            classes: 'imageViewerCommand',
+            buttonTemplateName: 'displaySetNavigation',
+            isPrevious: true
+        });
+
+        buttonData.push({
+            id: 'nextDisplaySet',
+            title: 'Next',
+            classes: 'imageViewerCommand',
+            buttonTemplateName: 'displaySetNavigation',
+            isPrevious: false
+        });
+
         buttonData.push({
             id: 'toggleCinePlay',
             title: 'Toggle CINE Play',

Packages/ohif-core/client/lib/index.js

@@ -2,3 +2,4 @@ import './blaze.js';
 import './string.js';
 import './ui.js';
 import './user.js';
+import './viewer.js';

Packages/ohif-core/client/lib/viewer.js

@@ -0,0 +1,45 @@
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.viewer = {};
+
+// Move display sets forward or backward in the selected viewport
+OHIF.viewer.moveDisplaySet = isNext => {
+    // Get the selected viewport index
+    const viewportIndex = Session.get('activeViewport');
+
+    // Get the selected viewport data
+    const viewportData = window.layoutManager.viewportData[viewportIndex];
+
+    // Get the current study
+    const currentStudy = _.findWhere(window.layoutManager.studies, {
+        studyInstanceUid: viewportData.studyInstanceUid
+    }) || window.layoutManager.studies[0];
+
+    // Get the display sets
+    const displaySets = currentStudy.displaySets;
+
+    // Get the current display set
+    const currentDisplaySet = _.findWhere(displaySets, {
+        displaySetInstanceUid: viewportData.displaySetInstanceUid
+    });
+
+    // Get the new index and ensure that it will exists in display sets
+    let newIndex = _.indexOf(displaySets, currentDisplaySet);
+    if (isNext) {
+        newIndex++;
+        if (newIndex >= displaySets.length) {
+            newIndex = 0;
+        }
+    } else {
+        newIndex--;
+        if (newIndex < 0) {
+            newIndex = displaySets.length - 1;
+        }
+    }
+
+    // Get the display set data for the new index
+    const newDisplaySetData = displaySets[newIndex];
+
+    // Rerender the viewport using the new display set data
+    window.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, newDisplaySetData);
+};

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">
+        <div class="svgContainer">
-        {{ #if isPlaying }}
+            {{#if isPlaying}}
-            <i class="fa fa-stop fa-fw"></i>
+                <i class="fa fa-stop fa-fw"></i>
-        {{ else }}
+            {{else}}
-            <i class="fa fa-play fa-fw"></i>
+                <i class="fa fa-play fa-fw"></i>
-        {{ /if }}
-    </div>
-        <div class="buttonLabel">
-            {{ #if isPlaying }}
-                Stop
-            {{ else }}
-                Play
             {{/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'],
+        scrollDown: 'DOWN',
-        scrollUp: ['UP', 'PAGEUP'],
+        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');