feat(sort): custom series sort in study panel (#4214)

extensions/default/src/commandsModule.ts

@@ -505,13 +505,8 @@ const commandsModule = ({
     }: UpdateViewportDisplaySetParams) => {
       const nonImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
 
-      // Sort the display sets as per the hanging protocol service viewport/display set scoring system.
-      // The thumbnail list uses the same sorting.
-      const dsSortFn = hangingProtocolService.getDisplaySetSortFunction();
       const currentDisplaySets = [...displaySetService.activeDisplaySets];
 
-      currentDisplaySets.sort(dsSortFn);
-
       const { activeViewportId, viewports, isHangingProtocolLayout } =
         viewportGridService.getState();
 

extensions/default/src/getCustomizationModule.tsx

@@ -4,6 +4,9 @@ import DataSourceSelector from './Panels/DataSourceSelector';
 import { ProgressDropdownWithService } from './Components/ProgressDropdownWithService';
 import DataSourceConfigurationComponent from './Components/DataSourceConfigurationComponent';
 import { GoogleCloudDataSourceConfigurationAPI } from './DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI';
+import { utils } from '@ohif/core';
+
+const formatDate = utils.formatDate;
 
 /**
  *
@@ -162,6 +165,26 @@ export default function getCustomizationModule({ servicesManager, extensionManag
           id: 'progressDropdownWithServiceComponent',
           component: ProgressDropdownWithService,
         },
+        {
+          id: 'studyBrowser.sortFunctions',
+          merge: 'Append',
+          values: [
+            {
+              label: 'Series Number',
+              sortFunction: (a, b) => {
+                return a?.SeriesNumber - b?.SeriesNumber;
+              },
+            },
+            {
+              label: 'Series Date',
+              sortFunction: (a, b) => {
+                const dateA = new Date(formatDate(a?.SeriesDate));
+                const dateB = new Date(formatDate(b?.SeriesDate));
+                return dateB.getTime() - dateA.getTime();
+              },
+            },
+          ],
+        },
       ],
     },
   ];

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -272,11 +272,7 @@ function PanelStudyBrowserTracking({
     };
   }, [thumbnailImageSrcMap, trackedSeries, viewports, dataSource, displaySetService]);
 
-  const tabs = createStudyBrowserTabs(
-    StudyInstanceUIDs,
-    studyDisplayList,
-    displaySets,
-  );
+  const tabs = createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
 
   // TODO: Should not fire this on "close"
   function _handleStudyClick(StudyInstanceUID) {