fix 5323 unexpected series list filter change from all to recent (#5337)

* fix to unexpected change from All to recent browser study lists because of the search order for the presence of the study in the tab groups and subsequent reset of the active tab state.
Minor comment in the study browser header.

Signed-off-by: Luis M. Santos <luis.santos2@nih.gov>

* chore Added type annotations and cleaned up stylistically.

Signed-off-by: Luis M. Santos <luis.santos2@nih.gov>

* Tighten up a bit of the code to make it easier to follow

* Fix warnings

---------

Signed-off-by: Luis M. Santos <luis.santos2@nih.gov>
Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

Confirm that Alireza's requested change was included.

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -7,6 +7,7 @@ import { PanelStudyBrowserHeader } from './PanelStudyBrowserHeader';
 import { defaultActionIcons } from './constants';
 import MoreDropdownMenu from '../../Components/MoreDropdownMenu';
 import { CallbackCustomization } from 'platform/core/src/types';
+import { type TabsProps } from '@ohif/core/src/utils/createStudyBrowserTabs';
 
 const { sortStudyInstances, formatDate, createStudyBrowserTabs } = utils;
 
@@ -27,7 +28,7 @@ function PanelStudyBrowser({
   const { servicesManager, commandsManager, extensionManager } = useSystem();
   const { displaySetService, customizationService } = servicesManager.services;
   const navigate = useNavigate();
-  const studyMode = customizationService.getCustomization('studyBrowser.studyMode') || 'all';
+  const studyMode = (customizationService.getCustomization('studyBrowser.studyMode') as string) || 'all';
 
   const internalImageViewer = useImageViewer();
   const StudyInstanceUIDs = internalImageViewer.StudyInstanceUIDs;
@@ -382,8 +383,8 @@ function PanelStudyBrowser({
     }
 
     const displaySetInstanceUID = jumpToDisplaySet;
-    // Set the activeTabName and expand the study
+    // It is possible to navigate to a study not currently in view
-    const thumbnailLocation = _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs);
+    const thumbnailLocation = _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs, activeTabName);
     if (!thumbnailLocation) {
       return;
     }
@@ -532,23 +533,21 @@ function getImageIdForThumbnail(displaySet, imageIds) {
   return imageId;
 }
 
-function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
+function _findTabAndStudyOfDisplaySet(
-  for (let t = 0; t < tabs.length; t++) {
+  displaySetInstanceUID: string,
-    const { studies } = tabs[t];
+  tabs: TabsProps,
+  currentTabName: string
+) {
+  const current = tabs.find(tab => tab.name===currentTabName) || tabs[0];
+  const biasedTabs = [current, ...tabs];
 
-    for (let s = 0; s < studies.length; s++) {
+  for (let t = 0; t < biasedTabs.length; t++) {
-      const { displaySets } = studies[s];
+    const study = biasedTabs[t].studies.find(study => study.displaySets.find(ds => ds.displaySetInstanceUID ===displaySetInstanceUID));
-
+    if (study) {
-      for (let d = 0; d < displaySets.length; d++) {
-        const displaySet = displaySets[d];
-
-        if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
       return {
-            tabName: tabs[t].name,
+        tabName: biasedTabs[t].name,
-            StudyInstanceUID: studies[s].studyInstanceUid,
+        StudyInstanceUID: study.studyInstanceUid,
       };
     }
   }
-    }
-  }
 }

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowserHeader.tsx

@@ -14,6 +14,7 @@ function PanelStudyBrowserHeader({
   actionIcons: actionIcon[];
   updateActionIconValue: (actionIcon: actionIcon) => void;
 }) {
+  // Button order: Settings button then List view mode (thumbnails vs. list)
   return (
     <>
       <div className="bg-muted flex h-[40px] select-none rounded-t p-2">

platform/core/src/services/CustomizationService/types.ts

@@ -45,7 +45,8 @@ export type Customization =
   | CommandCustomization
   | CodeCustomization
   | ComponentCustomization
-  | CallbackCustomization;
+  | CallbackCustomization
+  | string | number | boolean;
 
 export default Customization;
 

platform/core/src/utils/createStudyBrowserTabs.ts

@@ -1,5 +1,20 @@
 import { useSystem } from '../contextProviders/SystemProvider';
 
+/**
+ * Tab properties that drive which tab group is used for thumbnail display.
+ */
+export type TabProp = {
+  name: string,
+  label: string,
+  studies: any[],
+}
+
+/**
+ * Collection of tab properties with studies presorted depending on tab mod.
+ * This is used in deciding what thumbnails to show.
+ */
+export type TabsProps = TabProp[];
+
 /**
  *
  * @param {string[]} primaryStudyInstanceUIDs
@@ -11,7 +26,7 @@ import { useSystem } from '../contextProviders/SystemProvider';
  * @param {number} studyDisplayList.numInstances
  * @param {object[]} displaySets
  * @param {number} recentTimeframe - The number of milliseconds to consider a study recent
- * @returns tabs - The prop object expected by the StudyBrowser component
+ * @returns {TabsProps} tabs - The prop object expected by the StudyBrowser component
  */
 
 export function createStudyBrowserTabs(
@@ -19,7 +34,7 @@ export function createStudyBrowserTabs(
   studyDisplayList,
   displaySets,
   recentTimeframeMS = 31536000000
-) {
+): TabsProps {
   const { servicesManager } = useSystem();
   const { displaySetService } = servicesManager.services;