fix(segmentation): Display "No description S:{series number} {modality}" for segmentations with no label. (#5874)

* Bump CS3D dependency to get the fallbackLabel field additions.
This commit is contained in:
Joe Boccanfuso authored and GitHub committed 2026-03-12 18:39:14 -04:00
1 parent 15f14e34e4
commit 7b5d0ce40e
23 files changed
+349 -228

No files matched your search

@@ -5,6 +5,7 @@ import {
SegmentationExpandedProvider,
useSegmentationExpanded,
} from './contexts';
import { SegmentationLabel } from './SegmentationLabel';
import { useTranslation } from 'react-i18next';
import {
Button,
@@ -56,7 +57,7 @@ const SegmentationCollapsedDropdownMenu = ({ children }: { children: React.React
// Selector component - for the segmentation selection dropdown
const SegmentationCollapsedSelector = () => {
const { t } = useTranslation('SegmentationPanel.HeaderCollapsed');
const { t } = useTranslation('SegmentationPanel');
const { data, onSegmentationClick, segmentationRepresentationTypes } =
useSegmentationTableContext('SegmentationCollapsedSelector');
const { segmentation } = useSegmentationExpanded('SegmentationCollapsedSelector');
@@ -74,16 +75,28 @@ const SegmentationCollapsedSelector = () => {
)
.map(seg => ({
id: seg.segmentation.segmentationId,
label: seg.segmentation.label,
segmentation: seg.segmentation,
}));
const dataCyTypeSuffix = segmentationRepresentationTypes
? `-${segmentationRepresentationTypes[0]}`
: '';
return (
<Select
onValueChange={value => onSegmentationClick(value)}
value={segmentation?.segmentationId}
>
<SelectTrigger className="w-full overflow-hidden">
<SelectValue placeholder={t('Select a segmentation')} />
<SelectTrigger
className="w-full overflow-hidden"
data-cy={`segmentation-select${dataCyTypeSuffix}`}
>
<SelectValue
placeholder={t('Select a segmentation')}
data-cy={`segmentation-select-value${dataCyTypeSuffix}`}
>
<SegmentationLabel segmentation={segmentation} />
</SelectValue>
</SelectTrigger>
<SelectContent>
{segmentations.map(seg => (
@@ -91,7 +104,7 @@ const SegmentationCollapsedSelector = () => {
key={seg.id}
value={seg.id}
>
{seg.label}
<SegmentationLabel segmentation={seg.segmentation} />
</SelectItem>
))}
</SelectContent>
@@ -11,6 +11,7 @@ import { DropdownMenu, DropdownMenuTrigger } from '../DropdownMenu';
import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip';
import { ScrollArea } from '../../components';
import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight';
import { SegmentationLabel } from './SegmentationLabel';
// The Header container component
const SegmentationExpandedHeader = ({ children }: { children: React.ReactNode }) => {
@@ -53,7 +54,11 @@ const SegmentationExpandedDropdownMenu = ({ children }: { children: React.ReactN
const SegmentationExpandedLabel = () => {
const { segmentation } = useSegmentationExpanded('SegmentationExpandedLabel');
return <div className="pl-1.5">{segmentation.label}</div>;
return (
<div className="pl-1.5">
<SegmentationLabel segmentation={segmentation} />
</div>
);
};
// Info component - for the info tooltip
@@ -0,0 +1,27 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Segmentation } from './contexts/SegmentationTableContext';
/**
* Displays the segmentation label. When the label is blank, shows a translated
* "No description" with the series/modality suffix styled in a lighter, muted font.
*/
export const SegmentationLabel = ({ segmentation }: { segmentation: Segmentation }) => {
const { t } = useTranslation('SegmentationPanel');
if (!segmentation) {
return null;
}
if (segmentation.label) {
return <>{segmentation.label}</>;
}
const suffix = segmentation.fallbackLabel;
return (
<>
<span>{t('No description')}</span>
{suffix && <span className="text-muted-foreground text-xxs">&nbsp;&nbsp;{suffix}</span>}
</>
);
};
@@ -17,6 +17,7 @@ export interface Segmentation {
segmentationId: string;
label: string;
cachedStats: SegmentStats;
fallbackLabel?: string;
segments: Record<number, Segment>;
}