Organ Segmentation data not found.
;
}
+ // Create a state to track which item's statistics to show
+
+ // Function to render statistics panel
+ const renderStatisticsPanel = (item: DataItem) => {
+ if (!item.statistics) {
+ return null;
+ }
+
+ const stats = item.statistics;
+ return (
+
@@ -284,20 +486,46 @@ export default function SegmentationPanel() {
{organSegmentationGroup.items.map((item, index) => {
const compositeId = `${organSegmentationGroup.type}-${item.id}-panel`; // Ensure unique composite ID
return (
-
handleAction(compositeId, action)}
- isSelected={selectedRowId === compositeId}
- onSelect={() => handleRowSelect(compositeId)}
- />
+
+
+
+ handleAction(compositeId, action)}
+ isSelected={selectedRowId === compositeId}
+ onSelect={() => handleRowSelect(compositeId)}
+ isVisible={true}
+ isLocked={false}
+ onToggleVisibility={() => console.debug('Toggle visibility')}
+ onToggleLocked={() => console.debug('Toggle locked')}
+ onRename={() => console.debug('Rename')}
+ onDelete={() => console.debug('Delete')}
+ onColor={() => console.debug('Color')}
+ disableEditing={false}
+ />
+
+
+
+ {renderStatisticsPanel(item)}
+
+
);
})}
diff --git a/platform/ui-next/assets/data/index.ts b/platform/ui-next/assets/data/index.ts
index 8d63a4e7e..8eac4ec80 100644
--- a/platform/ui-next/assets/data/index.ts
+++ b/platform/ui-next/assets/data/index.ts
@@ -118,84 +118,378 @@ const dataList = [
title: 'Spleen',
description: 'Description for Spleen.',
colorHex: '#6B8E23',
+ statistics: {
+ centroidX: { value: -3.45, unit: 'cm' },
+ centroidY: { value: 4.78, unit: 'cm' },
+ centroidZ: { value: 118.32, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.22, unit: '' },
+ max: { value: 14.92, unit: 'SUV' },
+ maxSlice: { value: 78, unit: '' },
+ mean: { value: 7.14, unit: 'SUV' },
+ median: { value: 6.85, unit: 'SUV' },
+ min: { value: 3.8, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.76, unit: '' },
+ sphereDiameter: { value: 7.12, unit: 'cm' },
+ standardDeviation: { value: 2.31, unit: 'SUV' },
+ suvPeak: { value: 12.95, unit: 'SUV' },
+ total: { value: 18245.63, unit: 'SUV' },
+ glycolysis: { value: 1245.78, unit: 'SUV ml' },
+ volume: { value: 178.34, unit: 'ml' },
+ voxelCount: { value: 2834, unit: '' },
+ },
},
{
id: 16,
title: 'Kidney',
description: 'Description for Kidney.',
colorHex: '#4682B4',
+ statistics: {
+ centroidX: { value: 2.18, unit: 'cm' },
+ centroidY: { value: 6.32, unit: 'cm' },
+ centroidZ: { value: 125.47, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.18, unit: '' },
+ max: { value: 16.23, unit: 'SUV' },
+ maxSlice: { value: 92, unit: '' },
+ mean: { value: 8.05, unit: 'SUV' },
+ median: { value: 7.92, unit: 'SUV' },
+ min: { value: 4.2, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.91, unit: '' },
+ sphereDiameter: { value: 8.45, unit: 'cm' },
+ standardDeviation: { value: 2.67, unit: 'SUV' },
+ suvPeak: { value: 14.32, unit: 'SUV' },
+ total: { value: 22567.89, unit: 'SUV' },
+ glycolysis: { value: 1532.45, unit: 'SUV ml' },
+ volume: { value: 215.67, unit: 'ml' },
+ voxelCount: { value: 3245, unit: '' },
+ },
},
{
id: 17,
title: 'Kidney very long title name lorem ipsum dolor sit amet segmentation',
description: 'Description for Kidney.',
colorHex: '#9ACD32',
+ statistics: {
+ centroidX: { value: -2.34, unit: 'cm' },
+ centroidY: { value: 5.87, unit: 'cm' },
+ centroidZ: { value: 124.65, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.25, unit: '' },
+ max: { value: 15.45, unit: 'SUV' },
+ maxSlice: { value: 88, unit: '' },
+ mean: { value: 7.82, unit: 'SUV' },
+ median: { value: 7.45, unit: 'SUV' },
+ min: { value: 4.1, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.85, unit: '' },
+ sphereDiameter: { value: 7.95, unit: 'cm' },
+ standardDeviation: { value: 2.54, unit: 'SUV' },
+ suvPeak: { value: 13.78, unit: 'SUV' },
+ total: { value: 21345.67, unit: 'SUV' },
+ glycolysis: { value: 1423.56, unit: 'SUV ml' },
+ volume: { value: 198.45, unit: 'ml' },
+ voxelCount: { value: 3012, unit: '' },
+ },
},
{
id: 18,
title: 'Gallbladder',
description: 'Description for Gallbladder.',
colorHex: '#20B2AA',
+ statistics: {
+ centroidX: { value: -1.87, unit: 'cm' },
+ centroidY: { value: 4.23, unit: 'cm' },
+ centroidZ: { value: 119.78, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.14, unit: '' },
+ max: { value: 12.67, unit: 'SUV' },
+ maxSlice: { value: 72, unit: '' },
+ mean: { value: 6.34, unit: 'SUV' },
+ median: { value: 6.12, unit: 'SUV' },
+ min: { value: 3.5, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.72, unit: '' },
+ sphereDiameter: { value: 5.23, unit: 'cm' },
+ standardDeviation: { value: 2.12, unit: 'SUV' },
+ suvPeak: { value: 11.45, unit: 'SUV' },
+ total: { value: 9876.54, unit: 'SUV' },
+ glycolysis: { value: 876.32, unit: 'SUV ml' },
+ volume: { value: 98.45, unit: 'ml' },
+ voxelCount: { value: 1567, unit: '' },
+ },
},
{
id: 19,
title: 'Esophagus',
description: 'Description for Esophagus.',
colorHex: '#DAA520',
+ statistics: {
+ centroidX: { value: 0.45, unit: 'cm' },
+ centroidY: { value: 7.65, unit: 'cm' },
+ centroidZ: { value: 132.45, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.12, unit: '' },
+ max: { value: 11.34, unit: 'SUV' },
+ maxSlice: { value: 65, unit: '' },
+ mean: { value: 5.87, unit: 'SUV' },
+ median: { value: 5.65, unit: 'SUV' },
+ min: { value: 3.2, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.68, unit: '' },
+ sphereDiameter: { value: 4.56, unit: 'cm' },
+ standardDeviation: { value: 1.98, unit: 'SUV' },
+ suvPeak: { value: 10.23, unit: 'SUV' },
+ total: { value: 7654.32, unit: 'SUV' },
+ glycolysis: { value: 765.43, unit: 'SUV ml' },
+ volume: { value: 87.65, unit: 'ml' },
+ voxelCount: { value: 1345, unit: '' },
+ },
},
{
id: 20,
title: 'Liver',
description: 'Description for Liver.',
colorHex: '#CD5C5C',
+ statistics: {
+ centroidX: { value: -1.23, unit: 'cm' },
+ centroidY: { value: 5.43, unit: 'cm' },
+ centroidZ: { value: 121.34, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.19, unit: '' },
+ max: { value: 17.56, unit: 'SUV' },
+ maxSlice: { value: 95, unit: '' },
+ mean: { value: 8.76, unit: 'SUV' },
+ median: { value: 8.45, unit: 'SUV' },
+ min: { value: 4.5, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.95, unit: '' },
+ sphereDiameter: { value: 9.87, unit: 'cm' },
+ standardDeviation: { value: 2.87, unit: 'SUV' },
+ suvPeak: { value: 15.67, unit: 'SUV' },
+ total: { value: 32456.78, unit: 'SUV' },
+ glycolysis: { value: 2345.67, unit: 'SUV ml' },
+ volume: { value: 345.67, unit: 'ml' },
+ voxelCount: { value: 5678, unit: '' },
+ },
},
{
id: 21,
title: 'Stomach',
description: 'Description for Stomach.',
colorHex: '#778899',
+ statistics: {
+ centroidX: { value: -0.87, unit: 'cm' },
+ centroidY: { value: 4.98, unit: 'cm' },
+ centroidZ: { value: 120.56, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.15, unit: '' },
+ max: { value: 13.45, unit: 'SUV' },
+ maxSlice: { value: 82, unit: '' },
+ mean: { value: 6.78, unit: 'SUV' },
+ median: { value: 6.54, unit: 'SUV' },
+ min: { value: 3.7, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.79, unit: '' },
+ sphereDiameter: { value: 6.78, unit: 'cm' },
+ standardDeviation: { value: 2.23, unit: 'SUV' },
+ suvPeak: { value: 12.34, unit: 'SUV' },
+ total: { value: 15678.9, unit: 'SUV' },
+ glycolysis: { value: 1123.45, unit: 'SUV ml' },
+ volume: { value: 156.78, unit: 'ml' },
+ voxelCount: { value: 2456, unit: '' },
+ },
},
{
id: 22,
title: 'Abdominal aorta',
description: 'Description for Abdominal Aorta.',
colorHex: '#B8860B',
+ statistics: {
+ centroidX: { value: 0.12, unit: 'cm' },
+ centroidY: { value: 6.54, unit: 'cm' },
+ centroidZ: { value: 126.78, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.11, unit: '' },
+ max: { value: 10.23, unit: 'SUV' },
+ maxSlice: { value: 68, unit: '' },
+ mean: { value: 5.43, unit: 'SUV' },
+ median: { value: 5.21, unit: 'SUV' },
+ min: { value: 3.1, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.65, unit: '' },
+ sphereDiameter: { value: 3.45, unit: 'cm' },
+ standardDeviation: { value: 1.87, unit: 'SUV' },
+ suvPeak: { value: 9.45, unit: 'SUV' },
+ total: { value: 5432.1, unit: 'SUV' },
+ glycolysis: { value: 654.32, unit: 'SUV ml' },
+ volume: { value: 67.89, unit: 'ml' },
+ voxelCount: { value: 1123, unit: '' },
+ },
},
{
id: 23,
title: 'Inferior vena cava',
description: 'Description for Inferior Vena Cava.',
colorHex: '#556B2F',
+ statistics: {
+ centroidX: { value: 0.34, unit: 'cm' },
+ centroidY: { value: 6.12, unit: 'cm' },
+ centroidZ: { value: 125.43, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.13, unit: '' },
+ max: { value: 9.87, unit: 'SUV' },
+ maxSlice: { value: 64, unit: '' },
+ mean: { value: 5.12, unit: 'SUV' },
+ median: { value: 4.98, unit: 'SUV' },
+ min: { value: 2.9, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.62, unit: '' },
+ sphereDiameter: { value: 3.21, unit: 'cm' },
+ standardDeviation: { value: 1.76, unit: 'SUV' },
+ suvPeak: { value: 8.98, unit: 'SUV' },
+ total: { value: 4567.89, unit: 'SUV' },
+ glycolysis: { value: 598.76, unit: 'SUV ml' },
+ volume: { value: 59.87, unit: 'ml' },
+ voxelCount: { value: 987, unit: '' },
+ },
},
{
id: 24,
title: 'Portal vein',
description: 'Description for Portal Vein.',
colorHex: '#8B4513',
+ statistics: {
+ centroidX: { value: -0.45, unit: 'cm' },
+ centroidY: { value: 5.67, unit: 'cm' },
+ centroidZ: { value: 123.45, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.14, unit: '' },
+ max: { value: 10.56, unit: 'SUV' },
+ maxSlice: { value: 71, unit: '' },
+ mean: { value: 5.67, unit: 'SUV' },
+ median: { value: 5.45, unit: 'SUV' },
+ min: { value: 3.2, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.69, unit: '' },
+ sphereDiameter: { value: 3.78, unit: 'cm' },
+ standardDeviation: { value: 1.92, unit: 'SUV' },
+ suvPeak: { value: 9.67, unit: 'SUV' },
+ total: { value: 6789.01, unit: 'SUV' },
+ glycolysis: { value: 723.45, unit: 'SUV ml' },
+ volume: { value: 76.54, unit: 'ml' },
+ voxelCount: { value: 1234, unit: '' },
+ },
},
{
id: 25,
title: 'Pancreas',
description: 'Description for Pancreas.',
colorHex: '#2F4F4F',
+ statistics: {
+ centroidX: { value: -1.56, unit: 'cm' },
+ centroidY: { value: 5.23, unit: 'cm' },
+ centroidZ: { value: 120.87, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.17, unit: '' },
+ max: { value: 14.23, unit: 'SUV' },
+ maxSlice: { value: 79, unit: '' },
+ mean: { value: 7.23, unit: 'SUV' },
+ median: { value: 6.98, unit: 'SUV' },
+ min: { value: 3.9, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.81, unit: '' },
+ sphereDiameter: { value: 6.34, unit: 'cm' },
+ standardDeviation: { value: 2.34, unit: 'SUV' },
+ suvPeak: { value: 12.67, unit: 'SUV' },
+ total: { value: 14567.89, unit: 'SUV' },
+ glycolysis: { value: 1087.65, unit: 'SUV ml' },
+ volume: { value: 134.56, unit: 'ml' },
+ voxelCount: { value: 2134, unit: '' },
+ },
},
{
id: 26,
title: 'Adrenal gland',
description: 'Description for Adrenal Gland.',
colorHex: '#708090',
+ statistics: {
+ centroidX: { value: -2.12, unit: 'cm' },
+ centroidY: { value: 5.76, unit: 'cm' },
+ centroidZ: { value: 122.34, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.16, unit: '' },
+ max: { value: 12.34, unit: 'SUV' },
+ maxSlice: { value: 74, unit: '' },
+ mean: { value: 6.45, unit: 'SUV' },
+ median: { value: 6.23, unit: 'SUV' },
+ min: { value: 3.6, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.74, unit: '' },
+ sphereDiameter: { value: 5.67, unit: 'cm' },
+ standardDeviation: { value: 2.21, unit: 'SUV' },
+ suvPeak: { value: 11.23, unit: 'SUV' },
+ total: { value: 10987.65, unit: 'SUV' },
+ glycolysis: { value: 945.67, unit: 'SUV ml' },
+ volume: { value: 112.34, unit: 'ml' },
+ voxelCount: { value: 1789, unit: '' },
+ },
},
{
id: 27,
title: 'Adrenal gland',
description: 'Description for Adrenal Gland.',
colorHex: '#6A5ACD',
+ statistics: {
+ centroidX: { value: 2.34, unit: 'cm' },
+ centroidY: { value: 5.89, unit: 'cm' },
+ centroidZ: { value: 123.56, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.15, unit: '' },
+ max: { value: 11.98, unit: 'SUV' },
+ maxSlice: { value: 73, unit: '' },
+ mean: { value: 6.32, unit: 'SUV' },
+ median: { value: 6.12, unit: 'SUV' },
+ min: { value: 3.5, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.73, unit: '' },
+ sphereDiameter: { value: 5.45, unit: 'cm' },
+ standardDeviation: { value: 2.18, unit: 'SUV' },
+ suvPeak: { value: 10.87, unit: 'SUV' },
+ total: { value: 10456.78, unit: 'SUV' },
+ glycolysis: { value: 923.45, unit: 'SUV ml' },
+ volume: { value: 109.87, unit: 'ml' },
+ voxelCount: { value: 1756, unit: '' },
+ },
},
{
id: 28,
title: 'New Seg Test New Seg Test New Seg Test New Seg Test New Seg Test New Seg Test ',
description: 'Description for New Seg Test.',
colorHex: '#4682B4',
+ statistics: {
+ centroidX: { value: -2.76, unit: 'cm' },
+ centroidY: { value: 4.98, unit: 'cm' },
+ centroidZ: { value: 121.23, unit: 'cm' },
+ frameDuration: { value: 'N/A', unit: 'ms' },
+ kurtosis: { value: -0.21, unit: '' },
+ max: { value: 15.12, unit: 'SUV' },
+ maxSlice: { value: 83, unit: '' },
+ mean: { value: 7.45, unit: 'SUV' },
+ median: { value: 7.12, unit: 'SUV' },
+ min: { value: 4.1, unit: 'SUV' },
+ regions: { value: 1, unit: '' },
+ skewness: { value: 0.82, unit: '' },
+ sphereDiameter: { value: 7.23, unit: 'cm' },
+ standardDeviation: { value: 2.45, unit: 'SUV' },
+ suvPeak: { value: 13.45, unit: 'SUV' },
+ total: { value: 19876.54, unit: 'SUV' },
+ glycolysis: { value: 1345.67, unit: 'SUV ml' },
+ volume: { value: 187.65, unit: 'ml' },
+ voxelCount: { value: 2987, unit: '' },
+ },
},
],
},
diff --git a/platform/ui-next/package.json b/platform/ui-next/package.json
index 27460481d..31453b502 100644
--- a/platform/ui-next/package.json
+++ b/platform/ui-next/package.json
@@ -44,6 +44,7 @@
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
+ "@radix-ui/react-hover-card": "^1.1.6",
"class-variance-authority": "^0.7.0",
"clsx": "*",
"cmdk": "^1.0.0",
diff --git a/platform/ui-next/src/components/DataRow/DataRow.tsx b/platform/ui-next/src/components/DataRow/DataRow.tsx
index b50630e50..7d084e8a8 100644
--- a/platform/ui-next/src/components/DataRow/DataRow.tsx
+++ b/platform/ui-next/src/components/DataRow/DataRow.tsx
@@ -8,6 +8,7 @@ import {
} from '../../components/DropdownMenu';
import { Icons } from '../../components/Icons/Icons';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/Tooltip/Tooltip';
+import { cn } from '../../lib/utils';
/**
* DataRow is a complex UI component that displays a selectable, interactive row with hierarchical data.
@@ -77,6 +78,7 @@ interface DataRowProps {
//
colorHex?: string;
onColor: () => void;
+ className?: string;
}
const DataRow: React.FC
= ({
@@ -94,16 +96,19 @@ const DataRow: React.FC = ({
isSelected = false,
isVisible = true,
disableEditing = false,
+ className,
}) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const isTitleLong = title?.length > 25;
const rowRef = useRef(null);
- useEffect(() => {
- if (isSelected && rowRef.current) {
- rowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
- }
- }, [isSelected]);
+ // useEffect(() => {
+ // if (isSelected && rowRef.current) {
+ // setTimeout(() => {
+ // rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // }, 200);
+ // }
+ // }, [isSelected]);
const handleAction = (action: string, e: React.MouseEvent) => {
e.stopPropagation();
@@ -190,7 +195,7 @@ const DataRow: React.FC = ({
return (
,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/platform/ui-next/src/components/HoverCard/index.ts b/platform/ui-next/src/components/HoverCard/index.ts
new file mode 100644
index 000000000..476d28765
--- /dev/null
+++ b/platform/ui-next/src/components/HoverCard/index.ts
@@ -0,0 +1 @@
+export * from './HoverCard';
diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
index e311f4779..01c2a01ad 100644
--- a/platform/ui-next/src/components/Icons/Icons.tsx
+++ b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -24,6 +24,7 @@ import IconMPR from './Sources/IconMPR';
import Info from './Sources/Info';
import InfoLink from './Sources/InfoLink';
import InfoSeries from './Sources/InfoSeries';
+import JumpToSlice from './Sources/JumpToSlice';
import ListView from './Sources/ListView';
import LoadingSpinner from './Sources/LoadingSpinner';
import Lock from './Sources/Lock';
@@ -38,6 +39,7 @@ import Pin from './Sources/Pin';
import PinFill from './Sources/PinFill';
import Plus from './Sources/Plus';
import PowerOff from './Sources/PowerOff';
+import Redo from './Sources/Redo';
import Refresh from './Sources/Refresh';
import Rename from './Sources/Rename';
import Series from './Sources/Series';
@@ -195,6 +197,7 @@ import NotificationWarning from './Sources/NotificationWarning';
import ArrowRight from './Sources/ArrowRight';
import ChevronLeft from './Sources/ChevronLeft';
import StatusAlert from './Sources/StatusAlert';
+import Undo from './Sources/Undo';
//
//
type IconProps = React.HTMLAttributes;
@@ -717,6 +720,9 @@ export const Icons = {
'tool-point': (props: IconProps) => ToolCircle(props),
'tool-freehand-line': (props: IconProps) => ToolFreehand(props),
clipboard: (props: IconProps) => Clipboard(props),
+ Undo,
+ Redo,
+ JumpToSlice,
/** Adds an icon to the set of icons */
addIcon: (name: string, icon) => {
diff --git a/platform/ui-next/src/components/Icons/Sources/JumpToSlice.tsx b/platform/ui-next/src/components/Icons/Sources/JumpToSlice.tsx
new file mode 100644
index 000000000..fcd10707d
--- /dev/null
+++ b/platform/ui-next/src/components/Icons/Sources/JumpToSlice.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const JumpToSlice = (props: IconProps) => (
+
+);
+
+export default JumpToSlice;
diff --git a/platform/ui-next/src/components/Icons/Sources/Redo.tsx b/platform/ui-next/src/components/Icons/Sources/Redo.tsx
new file mode 100644
index 000000000..ca0c2d6b7
--- /dev/null
+++ b/platform/ui-next/src/components/Icons/Sources/Redo.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const Redo = (props: IconProps) => (
+
+);
+
+export default Redo;
diff --git a/platform/ui-next/src/components/Icons/Sources/Undo.tsx b/platform/ui-next/src/components/Icons/Sources/Undo.tsx
new file mode 100644
index 000000000..6fc9e1f1a
--- /dev/null
+++ b/platform/ui-next/src/components/Icons/Sources/Undo.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const Undo = (props: IconProps) => (
+
+);
+
+export default Undo;
diff --git a/platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx b/platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx
index 3da4e253f..c385e3b3a 100644
--- a/platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx
+++ b/platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx
@@ -1,26 +1,8 @@
import React from 'react';
import { Button, Icons } from '@ohif/ui-next';
-import { useSegmentationTableContext } from './SegmentationTableContext';
+import { useSegmentationTableContext, useSegmentationExpanded } from './contexts';
-/**
- * Props interface for the AddSegmentRow component
- */
-interface AddSegmentRowProps {
- /** Optional child elements to render within the row */
- children?: React.ReactNode;
- /** Optional segmentation object to override the active segmentation */
- segmentation?: unknown;
-}
-
-/**
- * A component that renders a row with controls for adding segments and toggling visibility
- * in the segmentation table.
- *
- * @param props - Component properties
- * @param props.children - Optional child elements to render within the row
- * @param props.segmentation - Optional segmentation object to override the active segmentation
- */
-export const AddSegmentRow: React.FC = ({ children = null, segmentation }) => {
+export const AddSegmentRow: React.FC<{ children?: React.ReactNode }> = ({ children = null }) => {
const {
activeRepresentation,
disableEditing,
@@ -29,18 +11,32 @@ export const AddSegmentRow: React.FC = ({ children = null, s
onToggleSegmentationRepresentationVisibility,
data,
showAddSegment,
- } = useSegmentationTableContext('SegmentationTable');
+ } = useSegmentationTableContext('AddSegmentRow');
- const allSegmentsVisible = Object.values(activeRepresentation?.segments || {}).every(
- segment => segment?.visible !== false
- );
+ // Try to get from expanded context first, then fall back to active segmentation
+ let segmentationId = activeSegmentationId;
+ let representation = activeRepresentation;
- const segmentationIdToUse = segmentation ? segmentation.segmentationId : activeSegmentationId;
+ try {
+ const expandedContext = useSegmentationExpanded('AddSegmentRow');
+ if (expandedContext.isActive) {
+ segmentationId = expandedContext.segmentation.segmentationId;
+ representation = expandedContext.representation;
+ }
+ } catch (e) {
+ // Use the default values from table context
+ }
+ // If no segmentations, don't render
if (!data?.length) {
return null;
}
+ // Check if all segments are visible
+ const allSegmentsVisible = Object.values(representation?.segments || {}).every(
+ segment => segment?.visible !== false
+ );
+
const Icon = allSegmentsVisible ? (
) : (
@@ -50,14 +46,14 @@ export const AddSegmentRow: React.FC = ({ children = null, s
const allowAddSegment = showAddSegment && !disableEditing;
return (
-
+
{allowAddSegment ? (