Merge pull request #10477 from The-OpenROAD-Project-staging/web-display-selectability

web: add selectability column to display controls

Author: maliberty

src/web/src/display-controls.js

@@ -52,7 +52,8 @@ const fallbackLayerPalette = [
 ];
 
 // Populate display controls with layer checkboxes and visibility tree.
-export function populateDisplayControls(app, visibility, WebSocketTileLayer,
+export function populateDisplayControls(app, visibility, selectability,
+                                         WebSocketTileLayer,
                                          techData, redrawAllLayers,
                                          HeatMapTileLayer) {
     if (!app.displayControlsEl) return;
@@ -93,12 +94,20 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
     // has more than one entry).
     let chipletModel = null;
 
-    // Restore saved hidden-layers set from previous session.
+    // Restore saved hidden-layers and non-selectable-layers sets.
     let savedHiddenLayers = new Set();
+    let savedNonSelectableLayers = new Set();
     try {
         const raw = getCookie('or_hidden_layers');
         if (raw) savedHiddenLayers = new Set(JSON.parse(decodeURIComponent(raw)));
     } catch (_) { /* ignore */ }
+    try {
+        const raw = getCookie('or_nonselectable_layers');
+        if (raw) {
+            savedNonSelectableLayers
+                = new Set(JSON.parse(decodeURIComponent(raw)));
+        }
+    } catch (_) { /* ignore */ }
 
     // Global counter so each layer (across the whole hierarchy) gets a unique
     // z-index and palette slot regardless of which chiplet it belongs to.
@@ -187,6 +196,26 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
         };
     }
 
+    // Parallel selectability model with the same node ids as layerSpec so
+    // syncLayerSelDom() and buildLayerDOM() can pair each visibility node
+    // with its selectability peer.
+    function mirrorForSelectability(node) {
+        if (!node.children || node.children.length === 0) {
+            const name = node.data && node.data.name;
+            const selectable = name ? !savedNonSelectableLayers.has(name) : true;
+            if (selectable && name) {
+                app.selectableLayers.add(name);
+            }
+            return { id: node.id, data: { name }, checked: selectable };
+        }
+        return {
+            id: node.id,
+            data: { name: node.data && node.data.name },
+            children: node.children.map(mirrorForSelectability),
+        };
+    }
+    const layerSelSpec = mirrorForSelectability(layerSpec);
+
     const layerModel = new CheckboxTreeModel(() => {
         // Single pass over the tree: rebuild visibleLayerNames in place
         // (the WebSocketTileLayer closure captured this Set by reference
@@ -250,7 +279,8 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
                 }
             }
         });
-
+        // Visibility off ⇒ selectability disabled — refresh selectability DOM.
+        syncLayerSelDom();
         // Refresh pins layer so it filters by the updated visible_layers.
         if (app.pinsLayer && app.map.hasLayer(app.pinsLayer)) {
             app.pinsLayer.refreshTiles();
@@ -295,6 +325,40 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
     app.layerModel = layerModel; // expose it so other rendering mechanism can use it
     layerModel.addFromSpec(layerSpec);
 
+    // Parallel selectability model — picks gate on this set on the server.
+    const layerSelModel = new CheckboxTreeModel(() => {
+        // Rebuild from scratch so multi-chiplet/multi-tech subtrees that
+        // share a layer name don't fall into last-writer-wins (an unchecked
+        // M1 leaf in one subtree would otherwise delete the name even when
+        // another M1 leaf is still checked).  Mutate in place — the
+        // WebSocketTileLayer closure captured this Set by reference.
+        app.selectableLayers.clear();
+        layerSelModel.forEach(node => {
+            if (node.checked && node.data && node.data.name) {
+                app.selectableLayers.add(node.data.name);
+            }
+        });
+        syncLayerSelDom();
+        const nonSel
+            = techData.layers.filter(n => !app.selectableLayers.has(n));
+        setCookie('or_nonselectable_layers',
+                  encodeURIComponent(JSON.stringify(nonSel)));
+    });
+    layerSelModel.addFromSpec(layerSelSpec);
+
+    // Sync layer selectability DOM: visibility off disables the sel checkbox.
+    function syncLayerSelDom() {
+        layerSelModel.forEach(node => {
+            if (!node.selCb) return;
+            node.selCb.checked = node.checked;
+            node.selCb.indeterminate = node.indeterminate;
+            const visNode = layerModel.get(node.id);
+            const visOff
+                = visNode && !visNode.checked && !visNode.indeterminate;
+            node.selCb.disabled = visOff;
+        });
+    }
+
     // --- Layer context menu (right-click) ---
     const contextMenu = document.createElement('div');
     contextMenu.className = 'context-menu';
@@ -330,19 +394,34 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
     });
 
     function buildLayerDOM(node, isRoot = false) {
+        const selNode = layerSelModel.get(node.id);
         if (!node.children || node.children.length === 0) {
             // Leaf node (layer)
             const label = document.createElement('label');
 
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
+            checkbox.title = 'Visible';
             checkbox.checked = node.checked;
             node.cb = checkbox;
             checkbox.addEventListener('change', () => {
                 layerModel.check(node.id, checkbox.checked);
             });
             label.appendChild(checkbox);
 
+            if (selNode) {
+                const selCheckbox = document.createElement('input');
+                selCheckbox.type = 'checkbox';
+                selCheckbox.className = 'vis-sel-cb';
+                selCheckbox.title = 'Selectable';
+                selCheckbox.checked = selNode.checked;
+                selNode.selCb = selCheckbox;
+                selCheckbox.addEventListener('change', () => {
+                    layerSelModel.check(node.id, selCheckbox.checked);
+                });
+                label.appendChild(selCheckbox);
+            }
+
             const index = node.data.colorIndex;
             const name = node.data.name;
 
@@ -390,6 +469,7 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
 
             const cb = document.createElement('input');
             cb.type = 'checkbox';
+            cb.title = 'Visible';
             cb.checked = node.checked;
             cb.indeterminate = node.indeterminate;
             node.cb = cb;
@@ -398,6 +478,20 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
             });
             header.appendChild(cb);
 
+            if (selNode) {
+                const selCb = document.createElement('input');
+                selCb.type = 'checkbox';
+                selCb.className = 'vis-sel-cb';
+                selCb.title = 'Selectable';
+                selCb.checked = selNode.checked;
+                selCb.indeterminate = selNode.indeterminate;
+                selNode.selCb = selCb;
+                selCb.addEventListener('change', () => {
+                    layerSelModel.check(node.id, selCb.checked);
+                });
+                header.appendChild(selCb);
+            }
+
             const name = isRoot ? 'Layers' : (node.data.name || 'Group');
             header.appendChild(document.createTextNode(name));
             group.appendChild(header);
@@ -429,6 +523,10 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
 
     app.displayControlsEl.appendChild(layerGroup);
 
+    // Initial selectability DOM sync (esp. disabled state for layers whose
+    // visibility was restored as false).
+    syncLayerSelDom();
+
     // --- Chiplets group (multi-die / 3D-IC visibility) ---
     //
     // Web-only feature: the Qt GUI has no equivalent panel today —
@@ -731,8 +829,10 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
     }
 
     // --- Visibility tree (ordered to match Qt GUI display controls) ---
-    const visTree = new VisTree(visibility, redrawAllLayers);
-    visTree.add({ label: 'Nets', children: [
+    // Subtrees that opt into a second "selectable" checkbox column mirror
+    // the Qt GUI's selectability column (see displayControls.cpp).
+    const visTree = new VisTree(visibility, selectability, redrawAllLayers);
+    visTree.add({ label: 'Nets', addSelectable: true, children: [
         { key: 'net_signal', label: 'Signal' },
         { key: 'net_power', label: 'Power' },
         { key: 'net_ground', label: 'Ground' },
@@ -742,7 +842,7 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
         { key: 'net_scan', label: 'Scan' },
         { key: 'net_analog', label: 'Analog' },
     ]});
-    visTree.add({ label: 'Instances', children: [
+    visTree.add({ label: 'Instances', addSelectable: true, children: [
         { label: 'Std Cells', visKey: 'stdcells', disabled: !app.hasLiberty, children: [
             { label: 'Bufs/Invs', children: [
                 { key: 'std_bufinv_timing', label: 'Timing opt.' },
@@ -777,13 +877,13 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
             { key: 'phys_other', label: 'Other' },
         ]},
     ]});
-    visTree.add({ label: 'Blockages', children: [
+    visTree.add({ label: 'Blockages', addSelectable: true, children: [
         { key: 'placement_blockages', label: 'Placement' },
         { key: 'routing_obstructions', label: 'Routing' },
     ]});
     if (techData.sites && techData.sites.length > 0) {
-        visTree.add({ label: 'Rows', visKey: 'rows', children:
-            techData.sites.map(name => ({
+        visTree.add({ label: 'Rows', visKey: 'rows', addSelectable: true,
+            children: techData.sites.map(name => ({
                 key: 'site_' + name, label: name,
             })),
         });
@@ -801,13 +901,13 @@ export function populateDisplayControls(app, visibility, WebSocketTileLayer,
             { key: 'srouting_segments', label: 'Segments' },
             { key: 'srouting_vias', label: 'Vias' },
         ]},
-        { key: 'pins', label: 'Pins' },
+        { key: 'pins', label: 'Pins', selectable: true },
         { key: 'pin_names', label: 'Pin Names', disabledBy: 'pins' },
     ]});
     visTree.add({ label: 'Misc', children: [
         { label: 'Instances', children: [
             { key: 'inst_names', label: 'Names' },
-            { key: 'inst_pins', label: 'Pins' },
+            { key: 'inst_pins', label: 'Pins', selectable: true },
             { key: 'inst_pin_names', label: 'Pin Names', disabledBy: 'inst_pins' },
             { key: 'blockages', label: 'Blockages' },
         ]},

src/web/src/main.js

@@ -103,6 +103,7 @@ const app = {
     // "render every chiplet" (single-chip designs).
     visibleChiplets: null,
     useTrueZ: getCookie('or_use_true_z') === '1',
+    selectableLayers: new Set(),
     heatMapData: null,
     activeHeatMap: '',
     heatMapLayer: null,
@@ -194,11 +195,67 @@ try {
     // Ignore malformed cookie.
 }
 
+// Selectability mirrors the Qt GUI's display-controls "selectable" column.
+// Defaults to true (everything selectable), matching the Qt GUI.  Only
+// categories that the Qt GUI exposes a selectable checkbox for are listed
+// here; the server treats unspecified keys as selectable.
+const selectability = {
+    stdcells: true,
+    macros: true,
+    pad_input: true,
+    pad_output: true,
+    pad_inout: true,
+    pad_power: true,
+    pad_spacer: true,
+    pad_areaio: true,
+    pad_other: true,
+    phys_fill: true,
+    phys_endcap: true,
+    phys_welltap: true,
+    phys_tie: true,
+    phys_antenna: true,
+    phys_cover: true,
+    phys_bump: true,
+    phys_other: true,
+    std_bufinv: true,
+    std_bufinv_timing: true,
+    std_clock_bufinv: true,
+    std_clock_gate: true,
+    std_level_shift: true,
+    std_sequential: true,
+    std_combinational: true,
+    net_signal: true,
+    net_power: true,
+    net_ground: true,
+    net_clock: true,
+    net_reset: true,
+    net_tieoff: true,
+    net_scan: true,
+    net_analog: true,
+    pins: true,
+    inst_pins: true,
+    placement_blockages: true,
+    routing_obstructions: true,
+};
+
+try {
+    const saved = getCookie('or_selectability');
+    if (saved) {
+        const parsed = JSON.parse(decodeURIComponent(saved));
+        for (const [k, v] of Object.entries(parsed)) {
+            selectability[k] = !!v;
+        }
+    }
+} catch (_) {
+    // Ignore malformed cookie.
+}
+
 // `app` is forwarded so the tile layer can read app.visibleChiplets
 // lazily on every request — the field is populated by display-controls
 // once the server's tech metadata arrives.
-const WebSocketTileLayer
-    = createWebSocketTileLayer(visibility, app.visibleLayerNames, app);
+const WebSocketTileLayer = createWebSocketTileLayer(
+    visibility, app.visibleLayerNames, selectability, app.selectableLayers,
+    app);
 const BLANK_TILE
     = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
 
@@ -301,8 +358,11 @@ function updateHeatMaps(data) {
 app.updateHeatMaps = updateHeatMaps;
 
 function redrawAllLayers() {
-    // Persist visibility state to cookie so it survives page reloads.
+    // Persist visibility and selectability state to cookies so they survive
+    // page reloads.
     setCookie('or_visibility', encodeURIComponent(JSON.stringify(visibility)));
+    setCookie('or_selectability',
+              encodeURIComponent(JSON.stringify(selectability)));
 
     // Show/hide modules layer based on module_view visibility
     if (app.modulesLayer) {
@@ -987,12 +1047,18 @@ app.websocketManager.readyPromise.then(async () => {
             for (const [k, v] of Object.entries(visibility)) {
                 vf[k] = !!v;
             }
+            // Selectability is sent with `s_` prefix to mirror the flat
+            // visibility key scheme; the server parses both columns.
+            for (const [k, v] of Object.entries(selectability)) {
+                vf['s_' + k] = !!v;
+            }
             const selectRequest = {
                 type: 'select',
                 dbu_x,
                 dbu_y,
                 zoom: Math.round(app.map.getZoom()),
                 visible_layers: [...app.visibleLayerNames],
+                selectable_layers: [...app.selectableLayers],
                 ...vf,
             };
             if (app.visibleChiplets instanceof Set) {
@@ -1092,7 +1158,8 @@ app.websocketManager.readyPromise.then(async () => {
             });
         }
 
-        populateDisplayControls(app, visibility, WebSocketTileLayer,
+        populateDisplayControls(app, visibility, selectability,
+                                WebSocketTileLayer,
                                 techData, redrawAllLayers, HeatMapTileLayer);
         updateHeatMaps(heatMapData);
 

src/web/src/style.css

@@ -677,6 +677,29 @@ html, body {
     pointer-events: none;
 }
 
+/* Selectability checkbox (second column, next to the visibility checkbox).
+ * Small left margin gives a clear visual separation between the two columns;
+ * disabled state (visibility off) dims the checkbox. */
+.display-controls .vis-sel-cb {
+    margin-left: 2px;
+    margin-right: 2px;
+}
+.display-controls .vis-sel-cb.vis-sel-spacer {
+    /* Layout-only placeholder when a row has no selectability checkbox. */
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    visibility: hidden;
+}
+.display-controls .vis-sel-cb:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+.display-controls label.vis-sel-disabled {
+    /* Visually dim labels whose selectability is disabled by visibility. */
+    color: var(--fg-muted);
+}
+
 /* Layer context menu */
 .context-menu {
     position: fixed;