feat(command): Added command and hotkey binding for navigate to next and previous display set. (#3409)

* fix(command): Added command and hotkey binding for navigate to next and previous display set.

* Centralized the sorting (function) of display sets since at least three
areas sort display sets: hanging protocols, study/thumbnail browser and
updateViewportDisplaySet command.

* Renamed some methods for clarity.

* Scrolling active thumbnail into view for an updateViewportDisplaySet

* Added a null check.

* Added check to minimize thumbnail scrolling.

platform/core/src/defaults/hotkeyBindings.js

@@ -76,18 +76,24 @@ const bindings = [
     keys: ['left'],
     isEditable: true,
   },
-  // {
-  //   commandName: 'nextViewportDisplaySet',
-  //   label: 'Next Series',
-  //   keys: ['pageup'],
-  //   isEditable: true,
-  // },
-  // {
-  //   commandName: 'previousViewportDisplaySet',
-  //   label: 'Previous Series',
-  //   keys: ['pagedown'],
-  //   isEditable: true,
-  // },
+  {
+    commandName: 'updateViewportDisplaySet',
+    commandOptions: {
+      direction: -1,
+    },
+    label: 'Previous Series',
+    keys: ['pageup'],
+    isEditable: true,
+  },
+  {
+    commandName: 'updateViewportDisplaySet',
+    commandOptions: {
+      direction: 1,
+    },
+    label: 'Next Series',
+    keys: ['pagedown'],
+    isEditable: true,
+  },
   {
     commandName: 'nextStage',
     context: 'DEFAULT',

platform/core/src/services/HangingProtocolService/HangingProtocolService.ts

@@ -1033,6 +1033,23 @@ export default class HangingProtocolService extends PubSubService {
     return this._matchViewport(useViewport, options);
   }
 
+  /**
+   * Gets a sort function that is consistent with the display set sorting performed
+   * to match display sets to viewports.
+   * @returns a display set sort function
+   */
+  public getDisplaySetSortFunction(): (
+    displaySetA: IDisplaySet,
+    displaySetB: IDisplaySet
+  ) => number {
+    return (displaySetA, displaySetB) => {
+      const seriesA = this._getSeriesSortInfoForDisplaySetSort(displaySetA);
+      const seriesB = this._getSeriesSortInfoForDisplaySetSort(displaySetB);
+
+      return sortBy(this._getSeriesFieldForDisplaySetSort())(seriesA, seriesB);
+    };
+  }
+
   /**
    * Updates the viewports with the selected protocol stage.
    */
@@ -1461,7 +1478,7 @@ export default class HangingProtocolService extends PubSubService {
           sortingInfo: {
             score: totalMatchScore,
             study: study.StudyInstanceUID,
-            series: parseInt(displaySet.SeriesNumber),
+            ...this._getSeriesSortInfoForDisplaySetSort(displaySet),
           },
         };
 
@@ -1484,9 +1501,7 @@ export default class HangingProtocolService extends PubSubService {
         name: 'study',
         reverse: true,
       },
-      {
-        name: 'series',
-      }
+      this._getSeriesFieldForDisplaySetSort()
     );
     matchingScores.sort((a, b) =>
       sortingFunction(a.sortingInfo, b.sortingInfo)
@@ -1506,6 +1521,19 @@ export default class HangingProtocolService extends PubSubService {
     };
   }
 
+  private _getSeriesSortInfoForDisplaySetSort(displaySet) {
+    return {
+      [this._getSeriesFieldForDisplaySetSort().name]:
+        displaySet.SeriesNumber != null
+          ? parseInt(displaySet.SeriesNumber)
+          : parseInt(displaySet.seriesNumber),
+    };
+  }
+
+  private _getSeriesFieldForDisplaySetSort() {
+    return { name: 'series' };
+  }
+
   /**
    * Check if the next stage is available
    * @return {Boolean} True if next stage is available or false otherwise

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -12,7 +12,10 @@ const ThumbnailList = ({
   activeDisplaySetInstanceUIDs = [],
 }) => {
   return (
-    <div className="py-3 bg-black overflow-y-hidden ohif-scrollbar study-min-height">
+    <div
+      id="ohif-thumbnail-list"
+      className="py-3 bg-black overflow-y-hidden ohif-scrollbar study-min-height"
+    >
       {thumbnails.map(
         ({
           displaySetInstanceUID,