fix: Measurement Tracking: Various UI and functionality improvements (#4481)

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx

@@ -30,12 +30,7 @@ function TrackedMeasurementsContextProvider(
 
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const { activeViewportId, viewports } = viewportGrid;
-  const {
-    measurementService,
-    displaySetService,
-    customizationService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
+  const { measurementService, displaySetService, customizationService } = servicesManager.services;
 
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.actions = Object.assign({}, machineOptions.actions, {

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

@@ -118,7 +118,7 @@ function PanelMeasurementTableTracking({
                     downloadCSVReport(trackedMeasurements);
                   }}
                 >
-                  <Icons.Download />
+                  <Icons.Download className="h-5 w-5" />
                   <span className="pl-1">CSV</span>
                 </Button>
                 <Button
@@ -133,7 +133,18 @@ function PanelMeasurementTableTracking({
                   }}
                 >
                   <Icons.Add />
-                  Create DICOM SR
+                  Create SR
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="pl-0.5"
+                  onClick={() => {
+                    measurementService.clearMeasurements();
+                  }}
+                >
+                  <Icons.Delete />
+                  Delete All
                 </Button>
               </div>
             </div>

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

@@ -8,7 +8,7 @@ import { StudyBrowser } from '@ohif/ui-next';
 
 import { useTrackedMeasurements } from '../../getContextModule';
 import { Separator } from '@ohif/ui-next';
-import { PanelStudyBrowserTrackingHeader } from './PanelStudyBrowserTrackingHeader';
+import { PanelStudyBrowserHeader } from '@ohif/extension-default';
 import { defaultActionIcons, defaultViewPresets } from './constants';
 
 const { formatDate, createStudyBrowserTabs } = utils;
@@ -482,7 +482,7 @@ function PanelStudyBrowserTracking({
   return (
     <>
       <>
-        <PanelStudyBrowserTrackingHeader
+        <PanelStudyBrowserHeader
           viewPresets={viewPresets}
           updateViewPresetValue={updateViewPresetValue}
           actionIcons={actionIcons}

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@ohif/ui-next';
-import { Icons } from '@ohif/ui-next';
-import { actionIcon, viewPreset } from './types';
-
-function PanelStudyBrowserTrackingHeader({
-  viewPresets,
-  updateViewPresetValue,
-  actionIcons,
-  updateActionIconValue,
-}: {
-  viewPresets: viewPreset[];
-  updateViewPresetValue: (viewPreset: viewPreset) => void;
-  actionIcons: actionIcon[];
-  updateActionIconValue: (actionIcon: actionIcon) => void;
-}) {
-  return (
-    <>
-      <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 gap-[10px]">
-            <div className="flex h-full items-center justify-center">
-              <ToggleGroup
-                type="single"
-                value={viewPresets.filter(preset => preset.selected)[0].id}
-                onValueChange={value => {
-                  const selectedViewPreset = viewPresets.find(preset => preset.id === value);
-                  updateViewPresetValue(selectedViewPreset);
-                }}
-              >
-                {viewPresets.map((viewPreset: viewPreset, index) => (
-                  <ToggleGroupItem
-                    key={index}
-                    aria-label={viewPreset.id}
-                    value={viewPreset.id}
-                    className="text-actions-primary"
-                  >
-                    {React.createElement(Icons[viewPreset.iconName] || Icons.MissingIcon)}
-                  </ToggleGroupItem>
-                ))}
-              </ToggleGroup>
-            </div>
-            <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,
-                    onClick: () => updateActionIconValue(icon),
-                    className: `cursor-pointer`,
-                  })
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export { PanelStudyBrowserTrackingHeader };