OHIF-122: Remove hover state in disabled buttons and fix Next/Previous disabled state when layout viewport changes

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

@@ -101,17 +101,24 @@ OHIF.viewer.canMoveDisplaySets = isNext => {
     // Check if the display sets are sequenced
     const isSequenced = OHIF.viewer.isDisplaySetsSequenced(sequenceMap);
 
+    // Get Active Viewport Index if isMultiple is false
+    const activeViewportIndex = !isMultiple ? Session.get('activeViewport') : null;
+
     // Check if is next and looping is blocked
     if (isNext && !allowLooping) {
         // Check if the end was reached
         let endReached = true;
+
         sequenceMap.forEach((studyViewports, study) => {
-            const firstIndex = studyViewports[0].displaySetIndex;
+            // Get active viewport index if isMultiple is false ortherwise get last
-            const steps = studyViewports.length;
+            const viewportIndex = studyViewports[activeViewportIndex !== null ? activeViewportIndex : studyViewports.length - 1].displaySetIndex;
+            const layoutViewports = studyViewports.length;
             const amount = study.displaySets.length;
-            const move = (amount % steps) || steps;
+            const move = !isMultiple ? 1 : ((amount % layoutViewports) || layoutViewports);
             const lastStepIndex = amount - move;
-            if (firstIndex + steps !== lastStepIndex + steps) {
+            
+            // 9999 for index means empty viewport, see getDisplaySetSequenceMap function
+            if (viewportIndex !== 9999 && viewportIndex !== lastStepIndex) {
                 endReached = false;
             }
         });
@@ -126,13 +133,19 @@ OHIF.viewer.canMoveDisplaySets = isNext => {
     if (!isNext && !allowLooping) {
         // Check if the begin was reached
         let beginReached = true;
-        sequenceMap.forEach((studyViewports, study) => {
+
-            const firstIndex = studyViewports[0].displaySetIndex;
+        if(activeViewportIndex >= 0) {
-            const steps = studyViewports.length;
+            sequenceMap.forEach((studyViewports, study) => {
-            if (firstIndex - steps !== -steps) {
+                // Get active viewport index if isMultiple is false ortherwise get first
-                beginReached = false;
+                const viewportIndex = studyViewports[activeViewportIndex !== null ? activeViewportIndex : 0].displaySetIndex;
-            }
+                const layoutViewports = studyViewports.length;
-        });
+
+                // 9999 for index means empty viewport, see getDisplaySetSequenceMap function
+                if (viewportIndex !== 9999 && viewportIndex - layoutViewports !== -layoutViewports) {
+                    beginReached = false;
+                }
+            });
+        }
 
         // Return false if begin is not reached yet
         if ((!isMultiple || isSequenced) && beginReached) {

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

@@ -21,6 +21,7 @@ Template.displaySetNavigation.events({
 
 Template.displaySetNavigation.helpers({
     disableButton(isNext) {
+        OHIF.uiSettings.displaySetNavigationMultipleViewports = false;
         Session.get('LayoutManagerUpdated');
         return !OHIF.viewer.canMoveDisplaySets(isNext);
     }

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

@@ -9,20 +9,20 @@ Template.layoutChooser.onRendered(() => {
      * @param currentCell
      */
     instance.highlightCells = currentCell => {
-        const cells = $('.layoutChooser table td');
+        const cells = this.$('.layoutChooser table td');
         cells.removeClass('hover');
 
-        currentCell = $(currentCell);
+        currentCell = this.$(currentCell);
         const table = currentCell.parents('.layoutChooser table').get(0);
         const rowIndex = currentCell.closest('tr').index();
         const columnIndex = currentCell.index();
 
         // Loop through the table row by row
         // and cell by cell to apply the highlighting
-        for (var i = 0; i < table.rows.length; i++) {
+        for (let i = table.rows.length - 1; i >= 0; i--) {
             const row = table.rows[i];
             if (i <= rowIndex) {
-                for (var j = 0; j < row.cells.length; j++) {
+                for (let j = row.cells.length - 1; j >= 0; j--) {
                     if (j <= columnIndex) {
                         const cell = row.cells[j];
                         cell.classList.add('hover');
@@ -67,7 +67,7 @@ Template.layoutChooser.events({
     },
 
     'click .layoutChooser table td'(event, instance) {
-        const $currentCell = $(event.currentTarget);
+        const $currentCell = instance.$(event.currentTarget);
         const rowIndex = $currentCell.closest('tr').index();
         const columnIndex = $currentCell.index();
 
@@ -81,7 +81,7 @@ Template.layoutChooser.events({
         window.layoutManager.layoutProps = layoutProps;
         window.layoutManager.updateViewports();
 
-        const $dropdown = $('.layoutChooser');
+        const $dropdown = instance.$('.layoutChooser');
         toggleDialog($dropdown);
     }
 });

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl

@@ -13,6 +13,11 @@
     opacity: 0.5
     cursor: not-allowed
     
+    &:hover 
+      i,
+      .buttonLabel
+        theme('color', '$textSecondaryColor')
+
   .buttonLabel
     theme('color', '$textSecondaryColor')
     font-size: 12px
@@ -23,6 +28,7 @@
     text-align: center
     
     i
+      theme('color', '$textSecondaryColor')
       font-size: 18px
       line-height: 30px
 

Packages/viewerbase/lib/setActiveViewport.js

@@ -9,6 +9,9 @@ setActiveViewport = function(element) {
     // with the viewport index that it was fired from.
     Session.set('activeViewport', viewportIndex);
 
+    // Update the Session variable to the UI re-renders
+    Session.set('LayoutManagerUpdated', Random.id());
+
     // Add the 'active' class to the parent container to highlight the active viewport
     $('#imageViewerViewports .viewportContainer').removeClass('active');
     $(element).parents('.viewportContainer').addClass('active');