Merge pull request #10247 from The-OpenROAD-Project-staging/web-charts-hit-test

web: add column hit-test for charts widget

Author: maliberty

src/web/src/charts-widget.js

@@ -21,6 +21,24 @@ const kPositiveBorder = '#006400';  // darkgreen
 // Line chart series colors (Tableau 10)
 const kLineColors = ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2',
                       '#59a14f', '#edc948', '#b07aa1', '#ff9da7'];
+const kNegativeHighlight = 'rgba(240,128,128,0.12)';
+const kPositiveHighlight = 'rgba(144,238,144,0.12)';
+const kNegativeHover = '#ff9999';
+const kPositiveHover = '#b0ffb0';
+
+// Pure hit-test — returns the bar whose column contains (mx, my), or null.
+// Uses the full column height (chartArea top to bottom) so that buckets with
+// few paths are easy to click.
+export function hitTestColumn(bars, chartArea, mx, my) {
+    if (!bars || !chartArea) return null;
+    if (my < chartArea.top || my > chartArea.bottom) return null;
+    for (const bar of bars) {
+        if (mx >= bar.x && mx <= bar.x + bar.width) {
+            return bar;
+        }
+    }
+    return null;
+}
 
 // Pure layout computation — extracted for testability.
 export function computeHistogramLayout(histogramData, canvasWidth, canvasHeight) {
@@ -436,16 +454,24 @@ export class ChartsWidget {
     }
 
     _drawBars(ctx) {
+        const ca = this._chartArea;
         for (const bar of this._bars) {
-            if (bar.height <= 0) continue;
-
             const isHovered = (this._hoveredBar === bar);
 
+            // Draw a subtle column highlight on hover so the full clickable
+            // area is visible, even for buckets with very short bars.
+            if (isHovered && ca) {
+                ctx.fillStyle = bar.negative
+                    ? kNegativeHighlight : kPositiveHighlight;
+                ctx.fillRect(bar.x, ca.top, bar.width, ca.bottom - ca.top);
+            }
+
+            if (bar.height <= 0) continue;
+
             // Fill
             ctx.fillStyle = bar.negative ? kNegativeFill : kPositiveFill;
             if (isHovered) {
-                // Lighten on hover
-                ctx.fillStyle = bar.negative ? '#ff9999' : '#b0ffb0';
+                ctx.fillStyle = bar.negative ? kNegativeHover : kPositiveHover;
             }
             ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
 
@@ -466,17 +492,10 @@ export class ChartsWidget {
     }
 
     _hitTestBar(e) {
-        if (this._activeDebugChart >= 0 || !this._bars) return null;
         const rect = this._canvas.getBoundingClientRect();
         const mx = e.clientX - rect.left;
         const my = e.clientY - rect.top;
-        for (const bar of this._bars) {
-            if (mx >= bar.x && mx <= bar.x + bar.width &&
-                my >= bar.y && my <= bar.y + bar.height) {
-                return bar;
-            }
-        }
-        return null;
+        return hitTestColumn(this._bars, this._chartArea, mx, my);
     }
 
     _handleHover(e) {

src/web/test/js/test-charts-widget.js

@@ -6,7 +6,7 @@ import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 import {
     ChartsWidget,
-    computeHistogramLayout,
+    computeHistogramLayout, hitTestColumn,
     kLeftMargin, kRightMargin, kTopMargin, kBottomMargin,
 } from '../../src/charts-widget.js';
 
@@ -199,6 +199,60 @@ describe('computeHistogramLayout', () => {
     });
 });
 
+describe('hitTestColumn', () => {
+    // Build a two-bar layout: one tall bar, one very short bar.
+    const layout = computeHistogramLayout({
+        bins: [
+            { lower: -0.1, upper: 0.0, count: 100, negative: true },
+            { lower: 0.0, upper: 0.1, count: 2, negative: false },
+        ],
+        time_unit: 'ns',
+    }, 500, 400);
+    const { bars, chartArea } = layout;
+    // Sanity: the second bar is much shorter than the first.
+    assert.ok(bars[1].height < bars[0].height / 5);
+
+    it('hits a bar by clicking within its rendered area', () => {
+        const cx = bars[0].x + bars[0].width / 2;
+        const cy = bars[0].y + bars[0].height / 2;
+        assert.equal(hitTestColumn(bars, chartArea, cx, cy), bars[0]);
+    });
+
+    it('hits a short bar by clicking above it in the same column', () => {
+        // Click in the middle of the column, well above the tiny bar.
+        const cx = bars[1].x + bars[1].width / 2;
+        const cy = chartArea.top + 5;  // near the top of the chart
+        assert.equal(hitTestColumn(bars, chartArea, cx, cy), bars[1]);
+    });
+
+    it('returns null when clicking outside the chart area vertically', () => {
+        const cx = bars[0].x + bars[0].width / 2;
+        assert.equal(hitTestColumn(bars, chartArea, cx, chartArea.top - 1), null);
+        assert.equal(hitTestColumn(bars, chartArea, cx, chartArea.bottom + 1), null);
+    });
+
+    it('returns null when clicking between bars (gap region)', () => {
+        // The gap is between bar 0's right edge and bar 1's left edge.
+        const cx = bars[0].x + bars[0].width + 1;  // in the gap
+        const cy = (chartArea.top + chartArea.bottom) / 2;
+        // Only null if the point is truly outside both bars' x ranges.
+        const hit = hitTestColumn(bars, chartArea, cx, cy);
+        if (cx < bars[1].x) {
+            assert.equal(hit, null);
+        }
+    });
+
+    it('returns null for null bars or chartArea', () => {
+        assert.equal(hitTestColumn(null, chartArea, 100, 200), null);
+        assert.equal(hitTestColumn(bars, null, 100, 200), null);
+    });
+
+    it('returns null when clicking left of all bars', () => {
+        const cy = (chartArea.top + chartArea.bottom) / 2;
+        assert.equal(hitTestColumn(bars, chartArea, bars[0].x - 5, cy), null);
+    });
+});
+
 describe('ChartsWidget debug charts', () => {
     it('ignores histogram hover and click handlers while a debug chart is active', async () => {
         const { app, widget } = createWidget();