Merge pull request #10138 from The-OpenROAD-Project-staging/web-static-chart

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

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));
@@ -294,9 +298,12 @@ export class TimingWidget {
         const paths = this._currentTab === 'setup' ? this._setupPaths : this._holdPaths;
         const path = paths[this._selectedPathIndex];
         const nodes = this._detailTab === 'data' ? path.data_nodes : path.capture_nodes;
+        // Use _originalIndex when paths were filtered (e.g. by histogram
+        // column click in static mode) so the overlay lookup matches.
+        const highlightIdx = path._originalIndex ?? this._selectedPathIndex;
         this._app.websocketManager.request({
             type: 'timing_highlight',
-            path_index: this._selectedPathIndex,
+            path_index: highlightIdx,
             is_setup: this._currentTab === 'setup' ? 1 : 0,
             pin_name: nodes[idx].pin,
         }).then(() => this._redrawAllLayers());

src/web/src/websocket-manager.js

@@ -174,6 +174,20 @@ 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.forEach((p, i) => {
+                    if (p.slack >= msg.slack_min && p.slack < msg.slack_max) {
+                        filtered.push({ ...p, _originalIndex: i });
+                    }
+                });
+                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);
+            }
+        });
+    });
 });