540 lines
22 KiB
TypeScript
540 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { DataRow } from '../../../../ui-next/src/components/DataRow';
|
|
import { Button } from '../../../../ui-next/src/components/Button';
|
|
import {
|
|
Select,
|
|
SelectValue,
|
|
SelectTrigger,
|
|
SelectContent,
|
|
SelectItem,
|
|
} from '../../../../ui-next/src/components/Select';
|
|
import { Icons } from '../../../../ui-next/src/components/Icons';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuPortal,
|
|
} from '../../../../ui-next/src/components/DropdownMenu';
|
|
import {
|
|
Accordion,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
AccordionContent,
|
|
} from '../../../../ui-next/src/components/Accordion';
|
|
import { Slider } from '../../../../ui-next/src/components/Slider';
|
|
import { Switch } from '../../../../ui-next/src/components/Switch';
|
|
import { Label } from '../../../../ui-next/src/components/Label';
|
|
import { Input } from '../../../../ui-next/src/components/Input';
|
|
import { Tabs, TabsList, TabsTrigger } from '../../../../ui-next/src/components/Tabs';
|
|
import { actionOptionsMap, dataList } from '../../../../ui-next/assets/data';
|
|
import { TooltipProvider } from '../../../../ui-next/src/components/Tooltip';
|
|
import {
|
|
HoverCard,
|
|
HoverCardTrigger,
|
|
HoverCardContent,
|
|
} from '../../../../ui-next/src/components/HoverCard';
|
|
|
|
interface DataItem {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
optionalField?: string;
|
|
colorHex?: string;
|
|
details?: { primary: string[]; secondary: string[] };
|
|
series?: string;
|
|
statistics?: {
|
|
centroidX: string;
|
|
centroidY: string;
|
|
centroidZ: string;
|
|
frameDuration: string;
|
|
kurtosis: string;
|
|
max: string;
|
|
maxSlice: string;
|
|
mean: string;
|
|
median: string;
|
|
min: string;
|
|
regions: string;
|
|
skewness: string;
|
|
sphereDiameter: string;
|
|
standardDeviation: string;
|
|
suvPeak: string;
|
|
total: string;
|
|
glycolysis: string;
|
|
volume: string;
|
|
voxelCount: string;
|
|
};
|
|
}
|
|
|
|
interface ListGroup {
|
|
type: string;
|
|
items: DataItem[];
|
|
}
|
|
|
|
export default function SegmentationPanel() {
|
|
const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
|
|
const [selectedTab, setSelectedTab] = useState<string>('Fill & Outline');
|
|
const handleAction = (id: string, action: string) => {
|
|
console.log(`Action "${action}" triggered for item with id: ${id}`);
|
|
// Implement actual action logic here
|
|
};
|
|
|
|
// Handle row selection
|
|
const handleRowSelect = (id: string) => {
|
|
setSelectedRowId(prevSelectedId => (prevSelectedId === id ? null : id));
|
|
};
|
|
|
|
const organSegmentationGroup = dataList.find(
|
|
(listGroup: any) => listGroup.type === 'Organ Segmentation'
|
|
) as unknown as ListGroup;
|
|
|
|
if (!organSegmentationGroup) {
|
|
return <div className="text-red-500">Organ Segmentation data not found.</div>;
|
|
}
|
|
|
|
// 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 (
|
|
<div className="w-full">
|
|
<div className="mb-4 flex items-center space-x-2">
|
|
<div
|
|
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
|
|
style={{ backgroundColor: item.colorHex }}
|
|
></div>
|
|
<h3 className="text-muted-foreground break-words text-lg font-semibold">{item.title}</h3>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between">
|
|
<div className="">Centroid X</div>
|
|
<div>
|
|
<span className="text-white">{stats.centroidX.value}</span>{' '}
|
|
<span className="">{stats.centroidX.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Centroid Y</div>
|
|
<div>
|
|
<span className="text-white">{stats.centroidY.value}</span>{' '}
|
|
<span className="">{stats.centroidY.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Centroid Z</div>
|
|
<div>
|
|
<span className="text-white">{stats.centroidZ.value}</span>{' '}
|
|
<span className="">{stats.centroidZ.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Frame Duration</div>
|
|
<div>
|
|
<span className="text-white">{stats.frameDuration.value}</span>{' '}
|
|
<span className="">{stats.frameDuration.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Kurtosis</div>
|
|
<div>
|
|
<span className="text-white">{stats.kurtosis.value}</span>{' '}
|
|
<span className="">{stats.kurtosis.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Max</div>
|
|
<div>
|
|
<span className="text-white">{stats.max.value}</span>{' '}
|
|
<span className="">{stats.max.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Max Slice</div>
|
|
<div>
|
|
<span className="text-white">{stats.maxSlice.value}</span>{' '}
|
|
<span className="">{stats.maxSlice.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Mean</div>
|
|
<div>
|
|
<span className="text-white">{stats.mean.value}</span>{' '}
|
|
<span className="">{stats.mean.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Median</div>
|
|
<div>
|
|
<span className="text-white">{stats.median.value}</span>{' '}
|
|
<span className="">{stats.median.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Min</div>
|
|
<div>
|
|
<span className="text-white">{stats.min.value}</span>{' '}
|
|
<span className="">{stats.min.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Regions</div>
|
|
<div>
|
|
<span className="text-white">{stats.regions.value}</span>{' '}
|
|
<span className="">{stats.regions.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Skewness</div>
|
|
<div>
|
|
<span className="text-white">{stats.skewness.value}</span>{' '}
|
|
<span className="">{stats.skewness.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Sphere Diameter</div>
|
|
<div>
|
|
<span className="text-white">{stats.sphereDiameter.value}</span>{' '}
|
|
<span className="">{stats.sphereDiameter.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Standard Deviation</div>
|
|
<div>
|
|
<span className="text-white">{stats.standardDeviation.value}</span>{' '}
|
|
<span className="">{stats.standardDeviation.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">SUV Peak</div>
|
|
<div>
|
|
<span className="text-white">{stats.suvPeak.value}</span>{' '}
|
|
<span className="">{stats.suvPeak.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Total</div>
|
|
<div>
|
|
<span className="text-white">{stats.total.value}</span>{' '}
|
|
<span className="">{stats.total.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Glycolysis</div>
|
|
<div>
|
|
<span className="text-white">{stats.glycolysis.value}</span>{' '}
|
|
<span className="">{stats.glycolysis.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Volume</div>
|
|
<div>
|
|
<span className="text-white">{stats.volume.value}</span>{' '}
|
|
<span className="">{stats.volume.unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="">Voxel Count</div>
|
|
<div>
|
|
<span className="text-white">{stats.voxelCount.value}</span>{' '}
|
|
<span className="">{stats.voxelCount.unit}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="px-auto flex min-h-screen w-full justify-center bg-black py-12">
|
|
<div className="w-64 space-y-0">
|
|
<TooltipProvider>
|
|
<Accordion
|
|
type="multiple"
|
|
defaultValue={['segmentation-tools', 'segmentation-list']}
|
|
>
|
|
{/* Segmentation Tools */}
|
|
<AccordionItem value="segmentation-tools">
|
|
<AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
|
|
<span>Segmentation Tools</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="bg-muted mb-0.5 h-32 rounded-b pb-3"></div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
{/* Segmentation List */}
|
|
<AccordionItem value="segmentation-list">
|
|
<AccordionTrigger className="bg-popover hover:bg-accent text-muted-foreground my-0.5 flex h-7 w-full items-center justify-between rounded py-2 pr-1 pl-2 font-normal">
|
|
<span>Segmentation List</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="mb-0">
|
|
{/* Header Controls */}
|
|
<div className="bg-muted flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
>
|
|
<Icons.More className="h-6 w-6" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuItem>
|
|
<Icons.Add className="text-foreground" />
|
|
<span className="pl-2">Create New Segmentation</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuLabel>Manage Current Segmentation</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<Icons.Series className="text-foreground" />
|
|
<span className="pl-2">Remove from Viewport</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Icons.Rename className="text-foreground" />
|
|
<span className="pl-2">Rename</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<Icons.Export className="text-foreground" />
|
|
<span className="pl-2">Export & Download</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Export DICOM SEG</DropdownMenuItem>
|
|
<DropdownMenuItem>Download DICOM SEG</DropdownMenuItem>
|
|
<DropdownMenuItem>Download DICOM RTSTRUCT</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<Icons.Delete className="text-red-600" />
|
|
<span className="pl-2 text-red-600">Delete</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Select>
|
|
<SelectTrigger className="w-full overflow-hidden">
|
|
<SelectValue placeholder="Segmentation 1" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="seg1">Segmentation 1</SelectItem>
|
|
<SelectItem value="seg2">Segmentation 2</SelectItem>
|
|
<SelectItem value="seg3">Segmentation Long Name 123</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
>
|
|
<Icons.Info className="h-6 w-6" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Appearance Settings */}
|
|
<AccordionItem value="segmentation-display">
|
|
<AccordionTrigger className="bg-muted hover:bg-accent mt-0.5 flex h-7 w-full items-center justify-between rounded-b pr-1 pl-2 font-normal text-white">
|
|
<div className="flex space-x-2">
|
|
<Icons.Controls className="text-primary" />
|
|
<span className="text-primary pr-1">Appearance Settings</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="bg-muted mb-0.5 space-y-2 rounded-b px-1.5 pt-0.5 pb-3">
|
|
<div className="mx-1 mb-2.5 mt-1 flex items-center justify-between space-x-4">
|
|
{/* Display Label with Selected Tab */}
|
|
<div className="text-muted-foreground text-xs">Show: {selectedTab}</div>
|
|
{/* Tabs Controls */}
|
|
<Tabs
|
|
value={selectedTab}
|
|
onValueChange={setSelectedTab}
|
|
>
|
|
<TabsList>
|
|
<TabsTrigger value="Fill & Outline">
|
|
<Icons.DisplayFillAndOutline className="text-primary" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="Outline Only">
|
|
<Icons.DisplayOutlineOnly className="text-primary" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="Fill Only">
|
|
<Icons.DisplayFillOnly className="text-primary" />
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
{/* Opacity Slider */}
|
|
<div className="my-2 flex items-center">
|
|
<Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap text-xs">
|
|
Opacity
|
|
</Label>
|
|
<Slider
|
|
className="mx-1 flex-1"
|
|
defaultValue={[85]}
|
|
max={100}
|
|
step={1}
|
|
/>
|
|
<Input
|
|
className="mx-1 w-10 flex-none"
|
|
placeholder="85"
|
|
/>
|
|
</div>
|
|
{/* Border Slider */}
|
|
<div className="my-2 flex items-center">
|
|
<Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap text-xs">
|
|
Border
|
|
</Label>
|
|
<Slider
|
|
className="mx-1 flex-1"
|
|
defaultValue={[10]}
|
|
max={100}
|
|
step={1}
|
|
/>
|
|
<Input
|
|
className="mx-1 w-10 flex-none"
|
|
placeholder="2"
|
|
/>
|
|
</div>
|
|
{/* Sync Changes Switch */}
|
|
<div className="my-2 flex items-center pl-1 pb-1">
|
|
<Switch defaultChecked />
|
|
<Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap text-xs">
|
|
Sync changes in all viewports
|
|
</Label>
|
|
</div>
|
|
<div className="border-input w-full border"></div>
|
|
{/* Display Inactive Segmentations Switch */}
|
|
<div className="my-2 flex items-center pl-1">
|
|
<Switch defaultChecked />
|
|
<Label className="text-muted-foreground mx-2 w-14 flex-none whitespace-nowrap text-xs">
|
|
Display inactive segmentations
|
|
</Label>
|
|
</div>
|
|
{/* Additional Opacity Slider */}
|
|
<div className="my-2 flex items-center">
|
|
<Label className="text-muted-foreground mx-1 w-14 flex-none whitespace-nowrap text-xs">
|
|
Opacity
|
|
</Label>
|
|
<Slider
|
|
className="mx-1 flex-1"
|
|
defaultValue={[65]}
|
|
max={100}
|
|
step={1}
|
|
/>
|
|
<Input
|
|
className="mx-1 w-10 flex-none"
|
|
placeholder="65"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
{/* Action Buttons */}
|
|
<div className="my-px flex h-9 w-full items-center justify-between rounded pl-0.5 pr-7">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="pr pl-0.5"
|
|
>
|
|
<Icons.Add />
|
|
Add Segment
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
>
|
|
<Icons.Hide className="h-6 w-6" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Rows */}
|
|
<div className="space-y-px">
|
|
{organSegmentationGroup.items.map((item, index) => {
|
|
const compositeId = `${organSegmentationGroup.type}-${item.id}-panel`; // Ensure unique composite ID
|
|
return (
|
|
<HoverCard
|
|
key={`hover-${compositeId}`}
|
|
openDelay={300}
|
|
closeDelay={200}
|
|
// open={true}
|
|
>
|
|
<HoverCardTrigger asChild>
|
|
<div>
|
|
<DataRow
|
|
key={`panel-${compositeId}`} // Prefix to ensure uniqueness
|
|
number={index + 1}
|
|
title={item.title}
|
|
description={item.description}
|
|
colorHex={item.colorHex}
|
|
details={item.details || { primary: [], secondary: [] }}
|
|
actionOptions={
|
|
actionOptionsMap[organSegmentationGroup.type] || ['Action']
|
|
}
|
|
onAction={(action: string) => 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}
|
|
/>
|
|
</div>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent
|
|
side="left"
|
|
align="start"
|
|
className="w-72 border"
|
|
>
|
|
{renderStatisticsPanel(item)}
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
})}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</TooltipProvider>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|