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

platform/docs/docs/configuration/configurationFiles.md

@@ -124,6 +124,7 @@ Here are a list of some options available:
 - `acceptHeader` : accept header to request specific dicom transfer syntax ex : [ 'multipart/related; type=image/jls; q=1', 'multipart/related; type=application/octet-stream; q=0.1' ]
 - `investigationalUseDialog`: This should contain an object with `option` value, it can be either `always` which always shows the dialog once per session, `never` which never shows the dialog, or `configure` which shows the dialog once and won't show it again until a set number of days defined by the user, if it's set to configure, you are required to add an additional property `days` which is the number of days to wait before showing the dialog again.
 - `groupEnabledModesFirst`: boolean, if set to true, all valid modes for the study get grouped together first, then the rest of the modes. If false, all modes are shown in the order they are defined in the configuration.
+- `experimentalStudyBrowserSort`: boolean, if set to true, you will get the experimental StudyBrowserSort component in the UI, which displays a list of sort functions that the displaySets can be sorted by, the sort reflects in all part of the app including the thumbnail/study panel. These sort functions are defined in the customizationModule and can be expanded by users.
 - `disableConfirmationPrompts`: boolean, if set to true, it skips confirmation prompts for measurement tracking and hydration.
 - `showPatientInfo`: string, if set to 'visible', the patient info header will be shown and its initial state is expanded. If set to 'visibleCollapsed', the patient info header will be shown but it's initial state is collapsed. If set to 'disabled', the patient info header will never be shown, and if set to 'visibleReadOnly', the patient info header will be shown and always expanded.
 - `requestTransferSyntaxUID` : Request a specific Transfer syntax from dicom web server ex: 1.2.840.10008.1.2.4.80  (applied only if acceptHeader is not set)

platform/docs/docs/faq/technical.md

@@ -272,3 +272,78 @@ to
 which then it will look like
 
 ![alt text](faq-measure-5.png)
+
+
+
+## How do I sort the series in the study panel by a specific value
+
+You need to enable the experimental StudyBrowserSort component by setting the `experimentalStudyBrowserSort` to true in your config file. This will add a dropdown in the study panel to sort the series by a specific value. This component is experimental
+since we are re-deigning the study panel and it might change in the future, but the functionality will remain the same.
+
+```js
+{
+  experimentalStudyBrowserSort: true,
+}
+```
+The component will appear in the study panel and will allow you to sort the series by a specific value. It comes with 3 default sorting functions, Series Number, Series Image Count, and Series Date.
+
+You can sort the series in the study panel by a specific value by adding a custom sorting function in the customizationModule, you can use the existing customizationModule in `extensions/default/src/getCustomizationModule.tsx` or create your own in your extension.
+
+The value to be used for the entry is `studyBrowser.sortFunctions` and should be under the `default` key.
+
+### Example
+
+```js
+export default function getCustomizationModule({ servicesManager, extensionManager }) {
+  return [
+    {
+      name: 'default',
+      value: [
+
+        {
+          id: 'studyBrowser.sortFunctions',
+          values: [
+            {
+              label: 'Series Number',
+              sortFunction: (a, b) => {
+                return a?.SeriesNumber - b?.SeriesNumber;
+              },
+            },
+            // Add more sort functions as needed
+          ],
+        },
+      ],
+    },
+  ];
+}
+```
+
+### Explanation
+This function will be retrieved by the StudyBrowserSort component and will be used to sort all displaySets, it will reflect in all parts of the app since it works at the displaySetService level, which means the thumbnails in the study panel will also be sorted by the desired value.
+You can define multiple functions and pick which sort to use via the dropdown in the StudyBrowserSort component that appears in the study panel.
+
+
+## How can i change the sorting of the thumbnail / study panel / study browser
+We are currently redesigning the study panel and the study browser. During this process, you can enable our undesigned component via the `experimentalStudyBrowserSort` flag. This will look like:
+
+![alt text](study-sorting.png)
+
+You can also add your own sorting functions by utilizing the `customizationService` and adding the `studyBrowser.sortFunctions` key, as shown below:
+
+```
+customizationService.addModeCustomizations([
+  {
+    id: 'studyBrowser.sortFunctions',
+    values: [{
+      label: 'Series Images',
+      sortFunction: (a, b) => {
+        return a?.numImageFrames - b?.numImageFrames;
+      },
+    }],
+  },
+]);
+```
+
+:::note
+Notice the arrays and objects, the values are arrays
+:::