feat(new-study-panel): default to list view for non thumbnail series, change default fitler to all, and add more menu to thumbnail items with a dicom tag browser (#4417)

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

@@ -1,10 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useImageViewer, useViewportGrid } from '@ohif/ui';
-import { StudyBrowser as NewStudyBrowser } from '@ohif/ui-next';
-import { StudyBrowser as OldStudyBrowser } from '@ohif/ui';
+import { StudyBrowser } from '@ohif/ui-next';
 import { utils } from '@ohif/core';
-import { useAppConfig } from '@state';
 import { useNavigate } from 'react-router-dom';
 import { Separator } from '@ohif/ui-next';
 import { PanelStudyBrowserHeader } from './PanelStudyBrowserHeader';
@@ -22,14 +20,11 @@ function PanelStudyBrowser({
   getStudiesForPatientByMRN,
   requestDisplaySetCreationForStudy,
   dataSource,
-  renderHeader,
-  getCloseIcon,
-  tab,
+  commandsManager,
 }: withAppTypes) {
   const { hangingProtocolService, displaySetService, uiNotificationService, customizationService } =
     servicesManager.services;
   const navigate = useNavigate();
-  const [appConfig] = useAppConfig();
 
   // Normally you nest the components so the tree isn't so deep, and the data
   // doesn't have to have such an intense shape. This works well enough for now.
@@ -37,7 +32,7 @@ function PanelStudyBrowser({
   const { StudyInstanceUIDs } = useImageViewer();
   const [{ activeViewportId, viewports, isHangingProtocolLayout }, viewportGridService] =
     useViewportGrid();
-  const [activeTabName, setActiveTabName] = useState('primary');
+  const [activeTabName, setActiveTabName] = useState('all');
   const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
     ...StudyInstanceUIDs,
   ]);
@@ -285,27 +280,26 @@ function PanelStudyBrowser({
 
   const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
 
-  const StudyBrowser = appConfig?.useExperimentalUI ? NewStudyBrowser : OldStudyBrowser;
+  const onThumbnailContextMenu = (commandName, options) => {
+    commandsManager.runCommand(commandName, options);
+  };
 
   return (
     <>
-      {renderHeader && (
-        <>
-          <PanelStudyBrowserHeader
-            tab={tab}
-            getCloseIcon={getCloseIcon}
-            viewPresets={viewPresets}
-            updateViewPresetValue={updateViewPresetValue}
-            actionIcons={actionIcons}
-            updateActionIconValue={updateActionIconValue}
-          />
-          <Separator
-            orientation="horizontal"
-            className="bg-black"
-            thickness="2px"
-          />
-        </>
-      )}
+      <>
+        <PanelStudyBrowserHeader
+          viewPresets={viewPresets}
+          updateViewPresetValue={updateViewPresetValue}
+          actionIcons={actionIcons}
+          updateActionIconValue={updateActionIconValue}
+        />
+        <Separator
+          orientation="horizontal"
+          className="bg-black"
+          thickness="2px"
+        />
+      </>
+
       <StudyBrowser
         tabs={tabs}
         servicesManager={servicesManager}
@@ -319,6 +313,7 @@ function PanelStudyBrowser({
         }}
         showSettings={actionIcons.find(icon => icon.id === 'settings').value}
         viewPresets={viewPresets}
+        onThumbnailContextMenu={onThumbnailContextMenu}
       />
     </>
   );

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

@@ -4,15 +4,11 @@ import { Icons } from '@ohif/ui-next';
 import { actionIcon, viewPreset } from './types';
 
 function PanelStudyBrowserHeader({
-  tab,
-  getCloseIcon,
   viewPresets,
   updateViewPresetValue,
   actionIcons,
   updateActionIconValue,
 }: {
-  tab: any;
-  getCloseIcon: () => JSX.Element;
   viewPresets: viewPreset[];
   updateViewPresetValue: (viewPreset: viewPreset) => void;
   actionIcons: actionIcon[];
@@ -22,7 +18,7 @@ function PanelStudyBrowserHeader({
     <>
       <div className="bg-muted flex h-[40px] select-none rounded-t p-2">
         <div className={'flex h-[24px] w-full select-none justify-center self-center text-[14px]'}>
-          <div className="flex w-full items-center justify-between">
+          <div className="flex w-full items-center gap-[10px]">
             <div className="flex h-full items-center justify-center">
               <ToggleGroup
                 type="single"
@@ -45,13 +41,8 @@ function PanelStudyBrowserHeader({
               </ToggleGroup>
             </div>
 
-            <div className="text-muted-foreground flex items-center justify-center">
-              {' '}
-              <span>{tab.label}</span>{' '}
-            </div>
-
-            <div className="mr-[30px] flex items-center justify-center">
-              <div className="flex items-center space-x-1">
+            <div className="flex items-center justify-center">
+              <div className="text-primary-active flex items-center space-x-1">
                 {actionIcons.map((icon: actionIcon, index) =>
                   React.createElement(Icons[icon.iconName] || Icons.MissingIcon, {
                     key: index,
@@ -63,7 +54,6 @@ function PanelStudyBrowserHeader({
             </div>
           </div>
         </div>
-        {getCloseIcon()}
       </div>
     </>
   );