Web GUI to achieve feature parity with the native GUI.

[jorge-ferreira-pii]

Description

Currently, the OpenROAD Web GUI lacks several interactive components and key features that are readily available in the native GUI.

To address this, we have to implement these missing capabilities into the Web GUI, bringing it much closer to the native application's robust feature set. Because these implementations require extensive changes across both the C++ backend (handlers, endpoints) and the JavaScript frontend (widgets, Leaflet map interactions), the work has been logically divided into manageable Pull Requests to make the review process easier and safer.

Suggested Solution

No response

Additional Context

No response

[gadfort]

I had Claude earlier today create a plan for this, it's not perfect, but first pass this looks about right:

OpenROAD GUI vs. Web Tool — Feature Parity Review & Roadmap

Comparison of the mature Qt GUI (src/gui) against the Web viewer (src/web), plus a
single unified roadmap to reach parity.

Decision (2026-06-08): target is FULL GUI PARITY. Every gap below is in-scope,
including net-editing utilities and inspector editing.

Status legend: ✅ Full (parity or better) · 🟡 Partial (works, reduced) · ❌ Missing · ➕ Web-only

Verified against: displayControls.cpp, layoutViewer.cpp, mainWindow.cpp (GUI);
request_handler.{h,cpp}, tile_generator.{h,cpp}, web.cpp, display-controls.js,
menu-bar.js, main.js (Web).

---

1. Status at a glance

Area	✅	🟡	❌
Layout rendering & navigation	●
Display controls — layers		●
Display controls — instances/cells	●
Display controls — nets & routing	●
Display controls — overlays/grids/misc			●
Selection / highlight		●	●
Inspection	●	●
Right-click context menu			●
Search & navigation (Find / Goto)			●
Timing	●
Clock tree	●
Hierarchy / modules	●
DRC	●
Heatmaps	●
Charts		●
Rulers & labels		●	●
Scripting / Tcl	●
Image / report export		●
Menus / toolbars / window options		●	●
Editing utilities			●
Help		●
3D / schematic / static report	➕

---

2. Feature parity matrix (by area)

2.1 Layout rendering & navigation

Feature	GUI	Web	Status
Render / zoom / pan / fit	layoutViewer	tile server + Leaflet	✅ (scales better for huge designs)
Zoom in/out, fit	View menu	menu-bar.js	✅
Rubber-band zoom	—	right-drag (main.js)	➕

2.2 Display controls — layers

Feature	GUI	Web	Status
Per-layer visibility (tree)	displayControls	display-controls.js	✅
Per-layer color	color picker	color.h	✅
Selectability column	yes	yes	✅
Per-layer fill pattern (solid/hatch/crosshatch)	yes	—	❌
Implant / Other layer categories	yes	routing+cut union only	🟡

2.3 Display controls — instances & cells

Feature	GUI	Web	Status
Stdcell / macro / pad / physical subtypes	displayControls	TileVisibility	✅
Liberty classifications (buf/clk/seq/level-shift…)	yes	classifyInstance()	✅
Instance names / pins / pin-names	yes	inst_names/inst_pins/inst_pin_names	✅
Instance blockages (master OBS) toggle	yes	rendered, no toggle	🟡

2.4 Display controls — nets & routing

Feature	GUI	Web	Status
Net-type filters (signal/power/clock/…)	yes	net_*	✅
Routing segments / vias	yes	routing_segments/vias	✅
Special-net segments / vias	yes	srouting_*	✅
Blockages / obstructions	yes	placement_blockages/routing_obstructions	✅
Tracks (pref/non-pref)	yes	tracks_pref/non_pref	✅
Rows / per-site visibility	yes	rows + sites	✅
Pins / pin names	yes	pins/pin_markers/pin_names	✅
Fills (dbFill metal fill)	yes	—	❌

2.5 Display controls — overlays, grids & misc

Feature	GUI	Web	Status
Access points	yes	—	❌
Regions (dbRegion)	yes	—	❌
Manufacturing grid	yes	—	❌
GCell grid	yes	—	❌
Detailed view (polygon-decomposition LOD)	yes	—	❌
Flywires / flywires-only (unrouted flight lines)	yes	overlay only, no toggle	❌
Focused-nets guides toggle	yes	guides via inspector, no toggle	🟡
Highlight selected (show-only-selected)	yes	—	🟡
Module view	yes	_modules layer	✅
Scale bar	yes	client-side	🟡
Background color	yes	theme-driven	🟡
Save/restore display state via Tcl	save/restore_display_controls	cookies only	❌

2.6 Selection, highlight & inspection

Feature	GUI	Web	Status
Click-to-select + cycle overlapping	yes	kSelect/kSelectNext/kSelectPrev	✅
Property inspector + drill-down	inspector	kInspect/kInspectBack	✅
Hover highlight	yes	kHover	✅
Focus nets / route-guide overlay	yes	kSetFocusNets/kSetRouteGuides	✅
Inspector editing (edit props, object actions)	yes	read-only	🟡
8 color-coded highlight groups (0–7)	highlightGroupDialog	single selection only	❌
Selection browser (table of all sel/highlighted)	selectHighlightWindow	—	❌
Selection animation / auto-connectivity highlight	yes	static	🟡

2.7 Right-click context menu (layout canvas)

Feature	GUI	Web	Status
Select → Connected Insts / Output / Input / All Nets / All buffer trees	layoutViewer	—	❌
Highlight → same + 8-color submenu	yes	—	❌
View → Zoom In/Out/Fit	yes	(in menu bar)	🟡
Save → Visible / Entire layout	yes	—	❌
Clear → Selections/Highlights/Rulers/Labels/Focus/Guides/Tracks/All	yes	partial (Clear Rulers in Tools)	🟡

Web canvas right-click is bound to rubber-band zoom; there is no canvas context menu.
The only right-click menu in web is the layer-tree color menu.

2.8 Search & navigation

Feature	GUI	Web	Status
Find (name / glob / attribute search)	findDialog	menu item is disabled:true stub	❌
Go to position (jump to x,y)	gotoDialog	menu item is disabled:true stub	❌

2.9 Timing

Feature	GUI	Web	Status
Setup/hold path report + metrics	timingWidget	kTimingReport	✅
Path highlight + per-stage detail	yes	kTimingHighlight	✅
Slack histogram + group/clock filters	chartsWidget	kSlackHistogram/kChartFilters	✅
Timing cone on layout (fanin/fanout)	display_timing_cone	schematic cone only (no layout overlay)	❌

2.10 Clock tree / hierarchy / DRC / heatmaps

Feature	GUI	Web	Status
Clock tree + node highlight	clockWidget	kClockTree/kClockTreeHighlight	✅
Module hierarchy browser + coloring	browserWidget	kModuleHierarchy/kSetModuleColors	✅
DRC viewer (load/filter/highlight/visited)	drcWidget	kDrc*	✅
Heatmaps (Pin/Placement/RUDY/Power/IR)	heatMap*	same gui::getRegisteredHeatMapSources()	✅

2.11 Charts

Feature	GUI	Web	Status
Slack histogram	yes	charts-widget.js	✅
Multiple chart types (endpoint paths, generic)	yes	kDebugCharts debug-only, not in UI	🟡

2.12 Rulers & labels

Feature	GUI	Web	Status
Ruler + snap-to-edge	yes	ruler.js + kSnap	✅
Ruler style (euclidian/manhattan)	Options menu	—	❌
Ruler visibility group toggle	display controls	—	🟡
Custom labels / text annotations	label.{h,cpp}, add_label	—	❌

2.13 Scripting / Tcl

Feature	GUI	Web	Status
Tcl console + completion + log streaming	scriptWidget	kTclEval/kTclComplete	✅
Tcl-driven menu/toolbar buttons	create_menu_item/create_toolbar_button	—	❌

2.14 Image / report export

Feature	GUI	Web	Status
Headless PNG export	save_image	web.cpp::saveImage	✅
Animated GIF	yes	—	❌
Per-widget images (clock-tree / histogram)	yes	—	❌
Static self-contained HTML report	—	saveReport	➕

2.15 Menus, toolbars & window options

Feature	GUI	Web	Status
File → Open DB / Save DB	yes	yes	✅
File → Hide GUI / Check on exit	yes	—	❌ (n/a in browser)
File → Exit	yes	Tcl exit shuts server	🟡
Windows → dock toggles	yes	GoldenLayout focus	✅
Heat maps menu	yes	no dedicated menu	🟡
View toolbar (fit/zoom/ruler buttons)	yes	—	❌
Options menu — ENTIRE MENU ABSENT in web:			❌
• Show DBU (microns↔DBU)	yes	—	❌
• Make euclidian rulers	yes	—	❌
• Mouse-wheel-zoom default	yes	—	❌
• Arrow-key scroll step	yes	—	❌
• Application font	yes	—	❌
• Show polygon decomposition	yes	—	❌
• Global connect	yes	—	❌

2.16 Editing utilities

Feature	GUI	Web	Status
Global Connect dialog	globalConnectDialog	—	❌
Insert Buffer dialog	insertBufferDialog	—	❌
Inspector property editing	yes	—	❌ (see 2.6)

2.17 Help

Feature	GUI	Web	Status
Command / error documentation	helpWidget	keyboard-shortcuts panel only (no help-widget.js)	🟡

---

3. Web-only features (no GUI equivalent)

Feature	Web source	Note
3D chiplet stacking viewer	3d-viewer-widget.js, kGet3DData	Three.js, DRC blink
Netlist/schematic SVG (fanin/fanout cone + full)	schematic-widget.js, kSchematicCone/Full	netlistsvg, capped 150 inst
Static self-contained HTML report	web.cpp::saveReport	Offline, no server
Flow-controlled WebSocket / auto-reconnect	websocket-manager.js	Remote / multi-client model

➡ Candidates to back-port into the Qt GUI to keep parity bidirectional.

---

4. Unified roadmap

Single backlog combining every gap above, ordered by user value. Effort: S ≤ a few
days · M ~1 week · L multi-week. Items grouped where they share infrastructure.

Tier 1 — Core inspection (highest daily value)

#	Item	Effort	Notes / source
1	Find (name/glob/attribute search) — wire up the existing disabled menu stub	M	new kFind, reuse search.cpp index; UI shell exists
2	Go to position — wire up the existing disabled menu stub	S	coordinate dialog → existing zoom transform
3	8 highlight groups (0–7)	M	extend selection state → 8 groups; render via kOverlayTile; group-picker UI
4	Layout right-click context menu (scaffold + Select/Highlight connectivity, Save, Clear)	M	needs connectivity queries (connected insts, in/out/all nets, buffer trees)
5	Timing cone on layout (fanin/fanout)	M	GUI display_timing_cone; web has schematic cone, add layout overlay

Tier 2 — Display controls & preferences (mostly cheap renderer/client adds)

#	Item	Effort	Notes
6	Grid/overlay toggles: GCell grid, Manufacturing grid, Regions, Access points	M	new renderer passes + TileVisibility flags
7	Fills (dbFill) + Detailed view (LOD) + Flywires/flywires-only	M	renderer additions + toggles
8	Highlight-selected mode + Focused-nets-guides toggle + instance-blockages toggle	S	flags exist conceptually; expose in UI
9	Per-layer fill patterns (solid/hatch/crosshatch)	M	extend color.h → brush; painter support
10	Implant / Other layer categories in layer tree	S	include non-routing tech layers
11	Options menu: Show DBU, ruler style (euclidian/manhattan), mouse-wheel-zoom, scroll step, font, poly-decomposition	M	mostly client-side prefs + persistence
12	Save/restore display-control state via Tcl	S	serialize current vis state

Tier 3 — Annotation, navigation & panels

#	Item	Effort	Notes
13	Custom labels / text annotations	M	draw on _overlay; create/edit/delete + persist
14	Selection browser panel	M	pairs with highlight groups (#3)
15	View toolbar (fit/zoom/ruler quick buttons)	S
16	Heat maps menu	S	surface registered sources in menu bar

Tier 4 — Editing utilities (required by full-parity decision)

#	Item	Effort	Notes
17	Inspector editing (editable props + object actions)	L	largest correctness surface: write-path + redraw
18	Global Connect dialog	M
19	Insert Buffer dialog	M

Tier 5 — Polish & long tail

#	Item	Effort	Notes
20	Additional chart types; promote kDebugCharts line charts into UI	M
21	Image export: animated GIF + per-widget (clock-tree / histogram) images	M
22	Help widget (command/error docs)	M	new help-widget.js + content source
23	Selection animation / auto-connectivity highlight	S
24	Tcl-driven menu/toolbar customization	L	evaluate feasibility under GoldenLayout

Cross-cutting (track as separate epics)

• Multi-client / remote concerns (auth, concurrent sessions) — not a GUI feature, but
  real once Web is the primary interface.
• Back-port Web-only wins (3D viewer, schematic, static report) into the Qt GUI.

---

5. Next step

Confirm this matrix and tier ordering, then spin each Tier-1 item into its own
implementation plan: request type + handler + frontend widget + tests in BOTH CMake
and Bazel. The two Tier-1 stubs (Find #1, Go to position #2) are the cheapest wins
since their menu UI already exists and only needs a backend.

[jorge-ferreira-pii]

@gadfort It turned out great; it will help me a lot. Thank you very much.