ross/dv3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance tool options with icons for a more compact UI and improve annotation display styles for better readability

Browse Source
This commit is contained in:
Ross
2026-03-16 14:29:39 +00:00
parent 52f4be1a96
commit 0c4db1904c
2 changed files with 74 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+38 -32
View File
@@ -113,24 +113,30 @@ const WINDOW_LEVEL_PRESETS = [
{ name: "Abdomen", center: 60, width: 400 },
]
// Tool options for dropdowns
// Tool options for dropdowns (icons for compact UI)
const TOOL_OPTIONS = [
{ label: "Window/Level", value: WindowLevelTool.toolName },
{ label: "Pan", value: PanTool.toolName },
{ label: "Zoom", value: ZoomTool.toolName },
{ label: "Stack Scroll", value: StackScrollTool.toolName },
{ label: "Rotate", value: PlanarRotateTool.toolName },
{ label: "Length", value: LengthTool.toolName },
{ label: "Probe", value: ProbeTool.toolName },
{ label: "Arrow (No Label)", value: NoLabelArrowAnnotateTool.toolName },
{ label: "Arrow Annotate", value: ArrowAnnotateTool.toolName },
{ label: "Rectangle ROI", value: RectangleROITool.toolName },
{ label: "Ellipse ROI", value: EllipticalROITool.toolName },
{ label: "Freehand ROI", value: PlanarFreehandROITool.toolName },
{ label: "Freehand Contour Segmentation", value: PlanarFreehandContourSegmentationTool.toolName },
{ label: "Sculptor", value: SculptorTool.toolName },
{ label: "Reference Cursors", value: ReferenceCursors.toolName },
]
{ label: "Window/Level", value: WindowLevelTool.toolName, icon: "🌓" },
{ label: "Pan", value: PanTool.toolName, icon: "✋" },
{ label: "Zoom", value: ZoomTool.toolName, icon: "🔍" },
{ label: "Stack Scroll", value: StackScrollTool.toolName, icon: "📚" },
{ label: "Rotate", value: PlanarRotateTool.toolName, icon: "↺" },
{ label: "Length", value: LengthTool.toolName, icon: "📏" },
{ label: "Probe", value: ProbeTool.toolName, icon: "🔎" },
{ label: "Arrow (No Label)", value: NoLabelArrowAnnotateTool.toolName, icon: "➡️" },
{ label: "Arrow Annotate", value: ArrowAnnotateTool.toolName, icon: "✈️" },
{ label: "Rectangle ROI", value: RectangleROITool.toolName, icon: "▭" },
{ label: "Ellipse ROI", value: EllipticalROITool.toolName, icon: "◯" },
{ label: "Freehand ROI", value: PlanarFreehandROITool.toolName, icon: "✏️" },
{ label: "Freehand Contour Segmentation", value: PlanarFreehandContourSegmentationTool.toolName, icon: "🖊️" },
{ label: "Sculptor", value: SculptorTool.toolName, icon: "🔧" },
{ label: "Reference Cursors", value: ReferenceCursors.toolName, icon: "⦿" },
];
function getToolIcon(toolName?: string) {
if (!toolName) return '🔖';
const found = TOOL_OPTIONS.find(o => o.value === toolName || o.label === toolName);
return found?.icon || '🔖';
}
// Mouse button labels
const MOUSE_BUTTONS = [
@@ -3164,26 +3170,26 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}}
onClick={() => handleSelectAnnotation(i, ann.annotationUID)}
>
<span style={{ marginRight: 4 }}>
<span style={{ marginRight: 4 }} title={ann.metadata.toolName || 'Annotation'}>
{selectedAnnUID === ann.annotationUID ? "★ " : ""}
{ann.metadata.toolName || "Annotation"}
<span style={{ fontSize: 14, lineHeight: 1 }}>{getToolIcon(ann.metadata.toolName)}</span>
</span>
<button
style={{
background: "#b71c1c",
color: "#fff",
border: "none",
borderRadius: "50%",
background: "transparent",
color: "#f44336",
border: "1px solid #f44336",
borderRadius: 4,
width: 20,
height: 20,
fontSize: "13px",
fontWeight: "bold",
fontSize: 12,
lineHeight: 1,
cursor: "pointer",
marginLeft: 2,
marginLeft: 6,
display: "flex",
alignItems: "center",
justifyContent: "center",
opacity: 0.85,
opacity: 0.95,
}}
title="Delete this annotation"
aria-label="Delete annotation"
@@ -3192,7 +3198,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
handleDeleteAnnotation(i, ann.annotationUID, currentAnnotations);
}}
>
🗑️
<span aria-hidden="true">✖</span>
</button>
</div>
))}
@@ -4450,7 +4456,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}}
>
{TOOL_OPTIONS.map(opt => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
<option key={opt.value} value={opt.value} title={opt.label}>{opt.icon || opt.label}</option>
))}
</select>
</div>
@@ -4492,7 +4498,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
>
<option value="">(None)</option>
{TOOL_OPTIONS.map(opt => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
<option key={opt.value} value={opt.value} title={opt.label}>{opt.icon || opt.label}</option>
))}
</select>
</div>
@@ -4519,7 +4525,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
>
<option value="">(None)</option>
{TOOL_OPTIONS.map(opt => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
<option key={opt.value} value={opt.value} title={opt.label}>{opt.icon || opt.label}</option>
))}
</select>
</div>
@@ -4561,7 +4567,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
>
<option value="">(None)</option>
{TOOL_OPTIONS.map(opt => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
<option key={opt.value} value={opt.value} title={opt.label}>{opt.icon || opt.label}</option>
))}
</select>
</div>
dicom-viewer/src/index.css
+36
View File
@@ -49,4 +49,40 @@ html, body, #root {
/* In your global CSS */
.cornerstone-viewport, .cornerstone-canvas {
cursor: inherit !important;
}
/* Make annotation displays smaller and more compact inside viewports */
.cornerstone-viewport {
/* Target SVG text used by tools */
}
.cornerstone-viewport svg text,
.cornerstone-viewport .annotation-label,
.cornerstone-viewport .annotation-text,
.cornerstone-viewport .cornerstone-annotation,
.cornerstone-viewport .ct-annotation,
.cornerstone-viewport .annotation {
font-size: 11px !important;
line-height: 1 !important;
}
/* Smaller text boxes / labels */
.cornerstone-viewport .cornerstone-annotation-label,
.cornerstone-viewport .annotation-text {
padding: 2px 4px !important;
border-radius: 3px !important;
}
/* Reduce handle and marker sizes for compactness */
.cornerstone-viewport .handle,
.cornerstone-viewport .annotation-handle,
.cornerstone-viewport .ct-handle,
.cornerstone-viewport .cornerstone-handle {
width: 8px !important;
height: 8px !important;
}
/* If tools render HTML overlays, make them compact */
.cornerstone-viewport .ct-annotation-overlay {
font-size: 11px !important;
padding: 2px !important;
}