web: filter timing paths by slack range on histogram click in static mode

When a slack histogram column is clicked, the timing view should show only
paths whose slack falls in that bin's range. In live WebSocket mode the
server performs this filtering, but in static page mode the cache handler
returned all paths regardless of slack_min/slack_max.

Filter cached paths client-side in WebSocketManager._cacheRequest using the
half-open [slack_min, slack_max) range matching the histogram's bin
assignment. Tag each filtered path with _originalIndex so subsequent
timing_highlight overlay lookups resolve to the correct pre-rendered image.
Use _originalIndex in TimingWidget._selectPathRow when present.

Fixes #10020

Signed-off-by: Matt Liberty <mliberty@precisioninno.com>

Author: maliberty

src/web/src/timing-widget.js

@@ -212,9 +212,13 @@ export class TimingWidget {
         rows[idx].scrollIntoView({ block: 'nearest' });
         this._pathTableContainer.focus();
         this._renderDetailTable();
+        // Use _originalIndex when paths were filtered (e.g. by histogram
+        // column click in static mode) so the overlay lookup matches.
+        const paths = this._currentTab === 'setup' ? this._setupPaths : this._holdPaths;
+        const highlightIdx = paths[idx]?._originalIndex ?? idx;
         this._app.websocketManager.request({
             type: 'timing_highlight',
-            path_index: idx,
+            path_index: highlightIdx,
             is_setup: this._currentTab === 'setup' ? 1 : 0,
         }).then(() => this._redrawAllLayers())
           .catch(err => console.error('timing_highlight error:', err));

src/web/src/websocket-manager.js

@@ -174,6 +174,18 @@ export class WebSocketManager {
         }
         const json = this._cache.json && this._cache.json[key];
         if (json !== undefined) {
+            // Filter timing paths by slack range when histogram column clicked.
+            // Tag each path with its original index so overlay lookup still
+            // works after the array is narrowed down.
+            if (type === 'timing_report'
+                && msg.slack_min != null && msg.slack_max != null
+                && json.paths) {
+                const filtered = json.paths
+                    .map((p, i) => ({ ...p, _originalIndex: i }))
+                    .filter(
+                        p => p.slack >= msg.slack_min && p.slack < msg.slack_max);
+                return Promise.resolve({ ...json, paths: filtered });
+            }
             return Promise.resolve(json);
         }
 

src/web/test/BUILD

@@ -92,6 +92,13 @@ js_test(
     no_copy_to_bin = JS_FILES,
 )
 
+js_test(
+    name = "timing_widget_test",
+    data = DOM_TEST_DATA,
+    entry_point = "js/test-timing-widget.js",
+    no_copy_to_bin = JS_FILES,
+)
+
 js_test(
     name = "inspector_test",
     data = DOM_TEST_DATA,

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

@@ -0,0 +1,111 @@
+// SPDX-License-Identifier: BSD-3-Clause
+// Copyright (c) 2026, The OpenROAD Authors
+
+import './setup-dom.js';
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { TimingWidget } from '../../src/timing-widget.js';
+
+// jsdom does not implement scrollIntoView; stub it so _selectPathRow runs.
+if (!window.HTMLElement.prototype.scrollIntoView) {
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+}
+
+// Build an app stub that records every websocketManager.request call and
+// lets each test control the response per message type.
+function createMockApp(responses = {}) {
+    const requests = [];
+    return {
+        requests,
+        websocketManager: {
+            request(msg) {
+                requests.push(msg);
+                const handler = responses[msg.type];
+                const value = handler ? handler(msg) : {};
+                return Promise.resolve(value);
+            },
+        },
+    };
+}
+
+function makePath(slack, endPin, extra = {}) {
+    return {
+        start_clk: 'clk', end_clk: 'clk',
+        slack, arrival: 0, required: 0, skew: 0,
+        path_delay: 0, logic_depth: 0, fanout: 1,
+        start_pin: 'start', end_pin: endPin,
+        data_nodes: [], capture_nodes: [],
+        ...extra,
+    };
+}
+
+describe('TimingWidget._selectPathRow', () => {
+    it('sends timing_highlight with the row index when paths are unfiltered', () => {
+        const app = createMockApp();
+        const widget = new TimingWidget(app, () => {});
+        widget.showPaths('setup', [
+            makePath(-0.1, 'a'),
+            makePath(0.0, 'b'),
+            makePath(0.1, 'c'),
+        ]);
+
+        // Clear requests from showPaths' _clearTimingHighlight.
+        app.requests.length = 0;
+
+        widget._selectPathRow(1);
+
+        const highlight = app.requests.find(r => r.type === 'timing_highlight');
+        assert.ok(highlight, 'timing_highlight was requested');
+        assert.equal(highlight.path_index, 1);
+        assert.equal(highlight.is_setup, 1);
+    });
+
+    it('sends timing_highlight with _originalIndex when paths were filtered', () => {
+        const app = createMockApp();
+        const widget = new TimingWidget(app, () => {});
+        // Filtered result — table row 0 maps to original overlay index 2.
+        widget.showPaths('setup', [
+            { ...makePath(0.0, 'b'), _originalIndex: 2 },
+            { ...makePath(0.05, 'c'), _originalIndex: 4 },
+        ]);
+
+        app.requests.length = 0;
+
+        widget._selectPathRow(0);
+        let highlight = app.requests.find(r => r.type === 'timing_highlight');
+        assert.equal(highlight.path_index, 2);
+
+        app.requests.length = 0;
+        widget._selectPathRow(1);
+        highlight = app.requests.find(r => r.type === 'timing_highlight');
+        assert.equal(highlight.path_index, 4);
+    });
+
+    it('uses hold side flag when current tab is hold', () => {
+        const app = createMockApp();
+        const widget = new TimingWidget(app, () => {});
+        widget.showPaths('hold', [
+            { ...makePath(0.1, 'h0'), _originalIndex: 3 },
+        ]);
+
+        app.requests.length = 0;
+        widget._selectPathRow(0);
+
+        const highlight = app.requests.find(r => r.type === 'timing_highlight');
+        assert.equal(highlight.path_index, 3);
+        assert.equal(highlight.is_setup, 0);
+    });
+
+    it('ignores out-of-range indices without sending a request', () => {
+        const app = createMockApp();
+        const widget = new TimingWidget(app, () => {});
+        widget.showPaths('setup', [makePath(0.0, 'a')]);
+
+        app.requests.length = 0;
+        widget._selectPathRow(-1);
+        widget._selectPathRow(5);
+
+        assert.equal(
+            app.requests.filter(r => r.type === 'timing_highlight').length, 0);
+    });
+});

src/web/test/js/test-websocket-manager.js

@@ -228,4 +228,110 @@ describe('WebSocketManager.fromCache', () => {
         await mgr.request({ type: 'timing_highlight', path_index: -1 });
         assert.equal(called, null);
     });
+
+    describe('timing_report slack filtering', () => {
+        function makeCacheWithPaths() {
+            return makeCache({
+                json: {
+                    tech: { layers: [], sites: [], has_liberty: false, dbu_per_micron: 1000 },
+                    bounds: { bounds: [[0, 0], [100, 100]], shapes_ready: true },
+                    heatmaps: { active: '', heatmaps: [] },
+                    'timing_report:setup': {
+                        paths: [
+                            { slack: -0.3, end_pin: 'a' },
+                            { slack: -0.1, end_pin: 'b' },
+                            { slack: 0.0,  end_pin: 'c' },
+                            { slack: 0.1,  end_pin: 'd' },
+                            { slack: 0.25, end_pin: 'e' },
+                        ],
+                    },
+                    'timing_report:hold': {
+                        paths: [
+                            { slack: 0.05, end_pin: 'h0' },
+                            { slack: 0.15, end_pin: 'h1' },
+                        ],
+                    },
+                    'slack_histogram:setup': { bins: [], total_endpoints: 0 },
+                    chart_filters: { path_groups: [], clocks: [] },
+                },
+            });
+        }
+
+        it('returns all paths when slack range is not provided', async () => {
+            const mgr = WebSocketManager.fromCache(makeCacheWithPaths());
+            const result = await mgr.request({ type: 'timing_report', is_setup: 1 });
+            assert.equal(result.paths.length, 5);
+            // No _originalIndex annotation when not filtering.
+            assert.equal(result.paths[0]._originalIndex, undefined);
+        });
+
+        it('filters paths to the [slack_min, slack_max) range', async () => {
+            const mgr = WebSocketManager.fromCache(makeCacheWithPaths());
+            const result = await mgr.request({
+                type: 'timing_report',
+                is_setup: 1,
+                slack_min: -0.1,
+                slack_max: 0.1,
+            });
+            // -0.1 and 0.0 are in range; 0.1 is exclusive upper bound.
+            assert.deepEqual(
+                result.paths.map(p => p.end_pin),
+                ['b', 'c']);
+        });
+
+        it('tags filtered paths with original index for overlay lookup', async () => {
+            const mgr = WebSocketManager.fromCache(makeCacheWithPaths());
+            const result = await mgr.request({
+                type: 'timing_report',
+                is_setup: 1,
+                slack_min: -0.1,
+                slack_max: 0.1,
+            });
+            assert.equal(result.paths[0].end_pin, 'b');
+            assert.equal(result.paths[0]._originalIndex, 1);
+            assert.equal(result.paths[1].end_pin, 'c');
+            assert.equal(result.paths[1]._originalIndex, 2);
+        });
+
+        it('returns empty paths when no slack falls in range', async () => {
+            const mgr = WebSocketManager.fromCache(makeCacheWithPaths());
+            const result = await mgr.request({
+                type: 'timing_report',
+                is_setup: 1,
+                slack_min: 10.0,
+                slack_max: 20.0,
+            });
+            assert.equal(result.paths.length, 0);
+        });
+
+        it('filters the hold side independently of setup', async () => {
+            const mgr = WebSocketManager.fromCache(makeCacheWithPaths());
+            const result = await mgr.request({
+                type: 'timing_report',
+                is_setup: 0,
+                slack_min: 0.1,
+                slack_max: 0.2,
+            });
+            assert.equal(result.paths.length, 1);
+            assert.equal(result.paths[0].end_pin, 'h1');
+            assert.equal(result.paths[0]._originalIndex, 1);
+        });
+
+        it('does not mutate the cached paths array', async () => {
+            const cache = makeCacheWithPaths();
+            const mgr = WebSocketManager.fromCache(cache);
+            await mgr.request({
+                type: 'timing_report',
+                is_setup: 1,
+                slack_min: -0.1,
+                slack_max: 0.1,
+            });
+            const cached = cache.json['timing_report:setup'].paths;
+            assert.equal(cached.length, 5);
+            // Original cached objects must not be tagged.
+            for (const p of cached) {
+                assert.equal(p._originalIndex, undefined);
+            }
+        });
+    });
 });