From 0c4db1904ceff1b5d7665e07c82fa99342f1bbc7 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 16 Mar 2026 14:29:39 +0000
Subject: [PATCH] Enhance tool options with icons for a more compact UI and
 improve annotation display styles for better readability

---
 dicom-viewer/src/App.tsx   | 70 +++++++++++++++++++++-----------------
 dicom-viewer/src/index.css | 36 ++++++++++++++++++++
 2 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index 5410cca..7eb4bae 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -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>
diff --git a/dicom-viewer/src/index.css b/dicom-viewer/src/index.css
index e63811a..51ff0f2 100644
--- a/dicom-viewer/src/index.css
+++ b/dicom-viewer/src/index.css
@@ -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;
 }
\ No newline at end of file