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

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -7,6 +7,7 @@ import LegacyButtonGroup from '../LegacyButtonGroup';
 import LegacyButton from '../LegacyButton';
 import ThumbnailList from '../ThumbnailList';
 import { StringNumber } from '../../types';
+import StudyBrowserSort from '../StudyBrowserSort';
 
 const getTrackedSeries = displaySets => {
   let trackedSeries = 0;
@@ -73,7 +74,7 @@ const StudyBrowser = ({
   return (
     <React.Fragment>
       <div
-        className="w-100 border-secondary-light bg-primary-dark flex h-16 flex-row items-center justify-center border-b p-4"
+        className="w-100 border-secondary-light bg-primary-dark flex h-20 flex-col items-center justify-center gap-2 border-b p-4"
         data-cy={'studyBrowser-panel'}
       >
         {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
@@ -111,6 +112,9 @@ const StudyBrowser = ({
             );
           })}
         </LegacyButtonGroup>
+        {window.config.experimentalStudyBrowserSort && (
+          <StudyBrowserSort servicesManager={servicesManager} />
+        )}
       </div>
       <div className="ohif-scrollbar invisible-scrollbar flex flex-1 flex-col overflow-auto">
         {getTabContent()}

platform/ui/src/components/StudyBrowserSort/StudyBrowserSort.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import Icon from '../Icon';
+
+export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
+  const { customizationService, displaySetService } = servicesManager.services;
+  const { values: sortFunctions } = customizationService.get('studyBrowser.sortFunctions');
+
+  const [selectedSort, setSelectedSort] = useState(sortFunctions[0]);
+  const [sortDirection, setSortDirection] = useState('ascending');
+
+  const handleSortChange = event => {
+    const selectedSortFunction = sortFunctions.find(sort => sort.label === event.target.value);
+    setSelectedSort(selectedSortFunction);
+  };
+
+  const toggleSortDirection = e => {
+    e.stopPropagation();
+    setSortDirection(prevDirection => (prevDirection === 'ascending' ? 'descending' : 'ascending'));
+  };
+
+  useEffect(() => {
+    displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection);
+  }, [displaySetService, selectedSort, sortDirection]);
+
+  useEffect(() => {
+    const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SETS_CHANGED,
+      () => {
+        displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
+      }
+    );
+    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
+      () => {
+        displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
+      }
+    );
+
+    return () => {
+      SubscriptionDisplaySetsChanged.unsubscribe();
+      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
+    };
+  }, [displaySetService, selectedSort, sortDirection]);
+
+  return (
+    <div className="flex gap-2">
+      <select
+        onChange={handleSortChange}
+        value={selectedSort.label}
+        onClick={e => e.stopPropagation()}
+        className="border-inputfield-main focus:border-inputfield-main w-full appearance-none rounded border bg-black py-2 px-3 text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
+      >
+        {sortFunctions.map(sort => (
+          <option
+            value={sort.label}
+            key={sort.label}
+          >
+            {sort.label}
+          </option>
+        ))}
+      </select>
+      <button
+        onClick={toggleSortDirection}
+        className="border-inputfield-main flex items-center justify-center rounded border bg-black"
+      >
+        <Icon
+          name={sortDirection === 'ascending' ? 'sorting-active-up' : 'sorting-active-down'}
+          className="text-primary-main mx-2 w-2"
+        />
+      </button>
+    </div>
+  );
+}

platform/ui/src/components/StudyBrowserSort/index.js

@@ -0,0 +1,3 @@
+import StudyBrowserSort from './StudyBrowserSort';
+
+export default StudyBrowserSort;

platform/ui/src/components/index.js

@@ -95,6 +95,7 @@ import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
 import LayoutPreset from './LayoutPreset';
 import ActionButtons from './ActionButtons';
+import StudyBrowserSort from './StudyBrowserSort';
 
 export {
   ActionButtons,
@@ -198,4 +199,5 @@ export {
   ToolSettings,
   Toolbox,
   InvestigationalUseDialog,
+  StudyBrowserSort,
 };

platform/ui/src/index.js

@@ -132,6 +132,7 @@ export {
   Toolbox,
   InvestigationalUseDialog,
   LayoutPreset,
+  StudyBrowserSort,
 } from './components';
 
 export { useSessionStorage } from './hooks';