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/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -20,13 +20,7 @@ const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
   description: '', // 'CHEST/ABD/PELVIS W CONTRAST',
 };
 
-function PanelMeasurementTableTracking({
-  servicesManager,
-  extensionManager,
-  renderHeader,
-  getCloseIcon,
-  tab,
-}: withAppTypes) {
+function PanelMeasurementTableTracking({ servicesManager, extensionManager }: withAppTypes) {
   const [viewportGrid] = useViewportGrid();
   const { t } = useTranslation('MeasurementTable');
   const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(Date.now().toString());
@@ -193,24 +187,6 @@ function PanelMeasurementTableTracking({
 
   return (
     <>
-      {renderHeader && (
-        <>
-          <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
-            <div className="flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]">
-              <div className="text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]">
-                <span>{tab.label}</span>
-              </div>
-            </div>
-
-            {getCloseIcon()}
-          </div>
-          <Separator
-            orientation="horizontal"
-            className="bg-black"
-            thickness="2px"
-          />
-        </>
-      )}
       <div
         className="invisible-scrollbar overflow-y-auto overflow-x-hidden"
         ref={measurementsPanelRef}

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

@@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { utils } from '@ohif/core';
 import { useImageViewer, useViewportGrid, Dialog, ButtonEnums } from '@ohif/ui';
-import { StudyBrowser as NewStudyBrowser } from '@ohif/ui-next';
-import { StudyBrowser as OldStudyBrowser } from '@ohif/ui';
-import { useAppConfig } from '@state';
+import { StudyBrowser } from '@ohif/ui-next';
 
 import { useTrackedMeasurements } from '../../getContextModule';
 import { Separator } from '@ohif/ui-next';
@@ -25,9 +23,7 @@ function PanelStudyBrowserTracking({
   getStudiesForPatientByMRN,
   requestDisplaySetCreationForStudy,
   dataSource,
-  renderHeader,
-  getCloseIcon,
-  tab,
+  commandsManager,
 }: withAppTypes) {
   const {
     displaySetService,
@@ -41,7 +37,6 @@ function PanelStudyBrowserTracking({
   const navigate = useNavigate();
 
   const { t } = useTranslation('Common');
-  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.
@@ -50,7 +45,7 @@ function PanelStudyBrowserTracking({
   const [{ activeViewportId, viewports, isHangingProtocolLayout }, viewportGridService] =
     useViewportGrid();
   const [trackedMeasurements, sendTrackedMeasurementsEvent] = useTrackedMeasurements();
-  const [activeTabName, setActiveTabName] = useState('primary');
+  const [activeTabName, setActiveTabName] = useState('all');
   const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
     ...StudyInstanceUIDs,
   ]);
@@ -466,27 +461,26 @@ function PanelStudyBrowserTracking({
     });
   };
 
-  const StudyBrowser = appConfig.useExperimentalUI ? NewStudyBrowser : OldStudyBrowser;
+  const onThumbnailContextMenu = (commandName, options) => {
+    commandsManager.runCommand(commandName, options);
+  };
 
   return (
     <>
-      {renderHeader && (
-        <>
-          <PanelStudyBrowserTrackingHeader
-            tab={tab}
-            getCloseIcon={getCloseIcon}
-            viewPresets={viewPresets}
-            updateViewPresetValue={updateViewPresetValue}
-            actionIcons={actionIcons}
-            updateActionIconValue={updateActionIconValue}
-          />
-          <Separator
-            orientation="horizontal"
-            className="bg-black"
-            thickness="2px"
-          />
-        </>
-      )}
+      <>
+        <PanelStudyBrowserTrackingHeader
+          viewPresets={viewPresets}
+          updateViewPresetValue={updateViewPresetValue}
+          actionIcons={actionIcons}
+          updateActionIconValue={updateActionIconValue}
+        />
+        <Separator
+          orientation="horizontal"
+          className="bg-black"
+          thickness="2px"
+        />
+      </>
+
       <StudyBrowser
         tabs={tabs}
         servicesManager={servicesManager}
@@ -504,6 +498,7 @@ function PanelStudyBrowserTracking({
         activeDisplaySetInstanceUIDs={activeViewportDisplaySetInstanceUIDs}
         showSettings={actionIcons.find(icon => icon.id === 'settings').value}
         viewPresets={viewPresets}
+        onThumbnailContextMenu={onThumbnailContextMenu}
       />
     </>
   );

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

@@ -4,15 +4,11 @@ import { Icons } from '@ohif/ui-next';
 import { actionIcon, viewPreset } from './types';
 
 function PanelStudyBrowserTrackingHeader({
-  tab,
-  getCloseIcon,
   viewPresets,
   updateViewPresetValue,
   actionIcons,
   updateActionIconValue,
 }: {
-  tab: any;
-  getCloseIcon: () => JSX.Element;
   viewPresets: viewPreset[];
   updateViewPresetValue: (viewPreset: viewPreset) => void;
   actionIcons: actionIcon[];
@@ -22,7 +18,7 @@ function PanelStudyBrowserTrackingHeader({
     <>
       <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"
@@ -44,14 +40,8 @@ function PanelStudyBrowserTrackingHeader({
                 ))}
               </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 +53,6 @@ function PanelStudyBrowserTrackingHeader({
             </div>
           </div>
         </div>
-        {getCloseIcon()}
       </div>
     </>
   );

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

@@ -25,9 +25,6 @@ function WrappedPanelStudyBrowserTracking({
   commandsManager,
   extensionManager,
   servicesManager,
-  renderHeader,
-  getCloseIcon,
-  tab,
 }: withAppTypes) {
   const dataSource = extensionManager.getActiveDataSource()[0];
 
@@ -45,13 +42,11 @@ function WrappedPanelStudyBrowserTracking({
   return (
     <PanelStudyBrowserTracking
       servicesManager={servicesManager}
+      commandsManager={commandsManager}
       dataSource={dataSource}
       getImageSrc={_getImageSrcFromImageId}
       getStudiesForPatientByMRN={_getStudiesForPatientByMRN}
       requestDisplaySetCreationForStudy={_requestDisplaySetCreationForStudy}
-      renderHeader={renderHeader}
-      getCloseIcon={getCloseIcon}
-      tab={tab}
     />
   );
 }