From bc0c25085d3e144882a7eb4ccf682bfe97f50d3e Mon Sep 17 00:00:00 2001
From: matei jordache <mateijordache@live.com>
Date: Fri, 27 Mar 2026 20:09:26 -0700
Subject: [PATCH] add A/B marker names

---
 frontend/src/LinePlotOverlay.jsx | 53 +++++++++++++++++++++++---------
 frontend/src/styles.css          |  6 ++++
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/frontend/src/LinePlotOverlay.jsx b/frontend/src/LinePlotOverlay.jsx
index 4c239b7..8b60770 100644
--- a/frontend/src/LinePlotOverlay.jsx
+++ b/frontend/src/LinePlotOverlay.jsx
@@ -173,6 +173,7 @@ export default function LinePlotOverlay({
   const cursorStroke = clamp(plotWidth / 220, 1.4, 2.2);
   const measureStroke = clamp(plotWidth / 180, 1.6, 2.8);
   const markerRadius = clamp(plotWidth / 42, 5.5, 9);
+  const markerLabelSize = clamp(plotWidth / 34, 8, 11);
 
   const updateCursor = useCallback((point, event) => {
     if (!interactive || !onWidgetChange || !nodeId) return;
@@ -250,20 +251,44 @@ export default function LinePlotOverlay({
             <line x1={cursorA.x} y1={plotTop} x2={cursorA.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
             <line x1={cursorB.x} y1={plotTop} x2={cursorB.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
 
-            <circle
-              cx={cursorA.x}
-              cy={cursorA.y}
-              r={markerRadius}
-              className={`lineplot-marker ${aLocked ? 'lineplot-marker-locked' : ''}`}
-              onPointerDown={onPointerDown('p1')}
-            />
-            <circle
-              cx={cursorB.x}
-              cy={cursorB.y}
-              r={markerRadius}
-              className={`lineplot-marker ${bLocked ? 'lineplot-marker-locked' : ''}`}
-              onPointerDown={onPointerDown('p2')}
-            />
+            <g onPointerDown={onPointerDown('p1')}>
+              <circle
+                cx={cursorA.x}
+                cy={cursorA.y}
+                r={markerRadius}
+                className={`lineplot-marker ${aLocked ? 'lineplot-marker-locked' : ''}`}
+              />
+              <text
+                x={cursorA.x}
+                y={cursorA.y}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize={markerLabelSize}
+                className="lineplot-marker-label"
+                pointerEvents="none"
+              >
+                A
+              </text>
+            </g>
+            <g onPointerDown={onPointerDown('p2')}>
+              <circle
+                cx={cursorB.x}
+                cy={cursorB.y}
+                r={markerRadius}
+                className={`lineplot-marker ${bLocked ? 'lineplot-marker-locked' : ''}`}
+              />
+              <text
+                x={cursorB.x}
+                y={cursorB.y}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize={markerLabelSize}
+                className="lineplot-marker-label"
+                pointerEvents="none"
+              >
+                B
+              </text>
+            </g>
           </>
         )}
       </svg>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d9aeeba..4736d1d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -967,6 +967,12 @@ html, body, #root {
   cursor: default;
 }
 
+.lineplot-marker-label {
+  fill: var(--bg-deep);
+  font-weight: 700;
+  user-select: none;
+}
+
 .crop-overlay {
   position: relative;
   user-select: none;