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 }, { name: "Abdomen", center: 60, width: 400 },
] ]
// Tool options for dropdowns // Tool options for dropdowns (icons for compact UI)
const TOOL_OPTIONS = [ const TOOL_OPTIONS = [
{ label: "Window/Level", value: WindowLevelTool.toolName }, { label: "Window/Level", value: WindowLevelTool.toolName, icon: "🌓" },
{ label: "Pan", value: PanTool.toolName }, { label: "Pan", value: PanTool.toolName, icon: "✋" },
{ label: "Zoom", value: ZoomTool.toolName }, { label: "Zoom", value: ZoomTool.toolName, icon: "🔍" },
{ label: "Stack Scroll", value: StackScrollTool.toolName }, { label: "Stack Scroll", value: StackScrollTool.toolName, icon: "📚" },
{ label: "Rotate", value: PlanarRotateTool.toolName }, { label: "Rotate", value: PlanarRotateTool.toolName, icon: "↺" },
{ label: "Length", value: LengthTool.toolName }, { label: "Length", value: LengthTool.toolName, icon: "📏" },
{ label: "Probe", value: ProbeTool.toolName }, { label: "Probe", value: ProbeTool.toolName, icon: "🔎" },
{ label: "Arrow (No Label)", value: NoLabelArrowAnnotateTool.toolName }, { label: "Arrow (No Label)", value: NoLabelArrowAnnotateTool.toolName, icon: "➡️" },
{ label: "Arrow Annotate", value: ArrowAnnotateTool.toolName }, { label: "Arrow Annotate", value: ArrowAnnotateTool.toolName, icon: "✈️" },
{ label: "Rectangle ROI", value: RectangleROITool.toolName }, { label: "Rectangle ROI", value: RectangleROITool.toolName, icon: "▭" },
{ label: "Ellipse ROI", value: EllipticalROITool.toolName }, { label: "Ellipse ROI", value: EllipticalROITool.toolName, icon: "◯" },
{ label: "Freehand ROI", value: PlanarFreehandROITool.toolName }, { label: "Freehand ROI", value: PlanarFreehandROITool.toolName, icon: "✏️" },
{ label: "Freehand Contour Segmentation", value: PlanarFreehandContourSegmentationTool.toolName }, { label: "Freehand Contour Segmentation", value: PlanarFreehandContourSegmentationTool.toolName, icon: "🖊️" },
{ label: "Sculptor", value: SculptorTool.toolName }, { label: "Sculptor", value: SculptorTool.toolName, icon: "🔧" },
{ label: "Reference Cursors", value: ReferenceCursors.toolName }, { 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 // Mouse button labels
const MOUSE_BUTTONS = [ const MOUSE_BUTTONS = [
@@ -3164,26 +3170,26 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}} }}
onClick={() => handleSelectAnnotation(i, ann.annotationUID)} onClick={() => handleSelectAnnotation(i, ann.annotationUID)}
> >
<span style={{ marginRight: 4 }}> <span style={{ marginRight: 4 }} title={ann.metadata.toolName || 'Annotation'}>
{selectedAnnUID === ann.annotationUID ? "★ " : ""} {selectedAnnUID === ann.annotationUID ? "★ " : ""}
{ann.metadata.toolName || "Annotation"} <span style={{ fontSize: 14, lineHeight: 1 }}>{getToolIcon(ann.metadata.toolName)}</span>
</span> </span>
<button <button
style={{ style={{
background: "#b71c1c", background: "transparent",
color: "#fff", color: "#f44336",
border: "none", border: "1px solid #f44336",
borderRadius: "50%", borderRadius: 4,
width: 20, width: 20,
height: 20, height: 20,
fontSize: "13px", fontSize: 12,
fontWeight: "bold", lineHeight: 1,
cursor: "pointer", cursor: "pointer",
marginLeft: 2, marginLeft: 6,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
opacity: 0.85, opacity: 0.95,
}} }}
title="Delete this annotation" title="Delete this annotation"
aria-label="Delete annotation" aria-label="Delete annotation"
@@ -3192,7 +3198,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
handleDeleteAnnotation(i, ann.annotationUID, currentAnnotations); handleDeleteAnnotation(i, ann.annotationUID, currentAnnotations);
}} }}
> >
🗑️ <span aria-hidden="true">✖</span>
</button> </button>
</div> </div>
))} ))}
@@ -4450,7 +4456,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}} }}
> >
{TOOL_OPTIONS.map(opt => ( {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> </select>
</div> </div>
@@ -4492,7 +4498,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
> >
<option value="">(None)</option> <option value="">(None)</option>
{TOOL_OPTIONS.map(opt => ( {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> </select>
</div> </div>
@@ -4519,7 +4525,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
> >
<option value="">(None)</option> <option value="">(None)</option>
{TOOL_OPTIONS.map(opt => ( {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> </select>
</div> </div>
@@ -4561,7 +4567,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
> >
<option value="">(None)</option> <option value="">(None)</option>
{TOOL_OPTIONS.map(opt => ( {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> </select>
</div> </div>
dicom-viewer/src/index.css
+36
View File
@@ -49,4 +49,40 @@ html, body, #root {
/* In your global CSS */ /* In your global CSS */
.cornerstone-viewport, .cornerstone-canvas { .cornerstone-viewport, .cornerstone-canvas {
cursor: inherit !important; 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;
} }