web: add Show DBU toggle to View menu

Add a "Show DBU" option in the web UI's View menu, mirroring the
Qt GUI's Options > Show DBU toggle. When enabled, coordinates and
dimensions display as raw database units instead of microns.

The setting defaults to off (microns) matching the Qt GUI and
persists between sessions via the or_show_dbu cookie.

Affected display areas:
- Coordinate bar (mouse position)
- Scale bar (zoom distance reference)
- Ruler labels and inspector properties
- Inspector BBox/Point properties for all selected objects
- Hierarchy browser area column

Server side: add ScopedDbuFormat RAII helper that temporarily sets
Descriptor::Property::convert_dbu to a micron-aware formatter
(matching the Qt GUI's convertDBUToString) for the scope of each
inspect request. The client passes use_dbu in requests so the
server formats property values accordingly.

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

Author: maliberty

src/web/src/hierarchy-browser.js

@@ -339,7 +339,7 @@ export class HierarchyBrowser {
                 fmtInt(node.insts),
                 fmtInt(node.macros),
                 fmtInt(node.modules),
-                fmtArea(node.area),
+                this._fmtArea(node.area),
                 fmtInt(node.local_insts),
                 fmtInt(node.local_macros),
                 fmtInt(node.local_modules),
@@ -396,14 +396,19 @@ export class HierarchyBrowser {
         this._render();
         this._sendModuleColors();
     }
+
+    _fmtArea(v) {
+        if (v == null) return '';
+        if (this._app.showDbu) {
+            // Convert μm² back to DBU².
+            const dbu = this._app.getDbuPerMicron();
+            return String(Math.round(v * dbu * dbu));
+        }
+        if (v >= 1e6) return (v / 1e6).toFixed(3) + ' mm²';
+        return v.toFixed(3) + ' μm²';
+    }
 }
 
 function fmtInt(v) {
     return v != null ? String(v) : '';
 }
-
-function fmtArea(v) {
-    if (v == null) return '';
-    if (v >= 1e6) return (v / 1e6).toFixed(3) + ' mm²';
-    return v.toFixed(3) + ' μm²';
-}

src/web/src/inspector.js

@@ -236,7 +236,7 @@ export function createInspectorPanel(app, redrawAllLayers, refreshOverlay) {
             pendingInspectId = null;
         }
         showLoading();
-        const promise = app.websocketManager.request({ type: reqType });
+        const promise = app.websocketManager.request({ type: reqType, use_dbu: app.showDbu });
         pendingInspectId = promise.requestId;
         promise
             .then(data => {
@@ -290,7 +290,7 @@ export function createInspectorPanel(app, redrawAllLayers, refreshOverlay) {
         showLoading();
 
         const promise = app.websocketManager.request(
-            { type: 'inspect', select_id: selectId });
+            { type: 'inspect', select_id: selectId, use_dbu: app.showDbu });
         pendingInspectId = promise.requestId;
 
         promise
@@ -334,7 +334,7 @@ export function createInspectorPanel(app, redrawAllLayers, refreshOverlay) {
 
         showLoading();
 
-        const promise = app.websocketManager.request({ type: 'inspect_back' });
+        const promise = app.websocketManager.request({ type: 'inspect_back', use_dbu: app.showDbu });
         pendingInspectId = promise.requestId;
 
         promise
@@ -627,5 +627,20 @@ export function createInspectorPanel(app, redrawAllLayers, refreshOverlay) {
         updateInspector(null);
     }
 
-    return { createInspector, updateInspector, highlightBBox, pulseHighlight, navigateInspector };
+    // Re-request the currently inspected object from the server
+    // (e.g. after toggling show-DBU so property formatting changes).
+    // Rulers are client-side so we re-select instead of re-requesting.
+    function refreshInspector() {
+        if (!lastInspectData) return;
+        if (lastInspectData.type === 'Ruler') {
+            if (app.rulerManager && app.rulerManager._selectedRulerId !== null) {
+                app.rulerManager._selectRuler(app.rulerManager._selectedRulerId);
+            }
+            return;
+        }
+        if (!app.websocketManager) return;
+        navigateInspector(-1);
+    }
+
+    return { createInspector, updateInspector, highlightBBox, pulseHighlight, navigateInspector, refreshInspector };
 }

src/web/src/main.js

@@ -104,6 +104,7 @@ const app = {
     // "render every chiplet" (single-chip designs).
     visibleChiplets: null,
     useTrueZ: getCookie('or_use_true_z') === '1',
+    showDbu: getCookie('or_show_dbu') === '1',
     selectableLayers: new Set(),
     heatMapData: null,
     activeHeatMap: '',
@@ -114,6 +115,24 @@ const app = {
     getDbuPerMicron() {
         return this.techData?.dbu_per_micron || 1000;
     },
+    // Format a DBU value as a display string, respecting the showDbu setting.
+    // Mirrors Qt GUI's MainWindow::convertDBUToString.
+    formatDbu(value, addUnits = false) {
+        if (this.showDbu) return String(Math.round(value));
+        const dbuPerUm = this.getDbuPerMicron();
+        const precision = Math.ceil(Math.log10(dbuPerUm));
+        const um = (value / dbuPerUm).toFixed(precision);
+        return addUnits ? um + ' \u00b5m' : um;
+    },
+    // Format a distance (always positive) with auto-scaling units.
+    formatDistance(dbuLength) {
+        if (this.showDbu) return String(Math.round(dbuLength));
+        const dbuPerUm = this.getDbuPerMicron();
+        const um = dbuLength / dbuPerUm;
+        if (um >= 1000) return (um / 1000).toFixed(3) + ' mm';
+        if (um >= 1) return um.toFixed(3) + ' um';
+        return (um * 1000).toFixed(1) + ' nm';
+    },
 };
 
 const visibility = {
@@ -469,11 +488,7 @@ function createLayoutViewer(container) {
         const { dbuX, dbuY } = latLngToDbu(
             e.latlng.lat, e.latlng.lng, app.designScale, app.designMaxDXDY,
             app.designOriginX, app.designOriginY);
-        const dbuPerUm = app.getDbuPerMicron();
-        const precision = Math.ceil(Math.log10(dbuPerUm));
-        const xUm = (dbuX / dbuPerUm).toFixed(precision);
-        const yUm = (dbuY / dbuPerUm).toFixed(precision);
-        coordBar.textContent = `X: ${xUm}  Y: ${yUm}`;
+        coordBar.textContent = `X: ${app.formatDbu(dbuX)}  Y: ${app.formatDbu(dbuY)}`;
     });
     app.map.on('mouseout', () => { app.lastMouseLatLng = null; });
 
@@ -488,41 +503,49 @@ function createLayoutViewer(container) {
     scaleBarLabel.className = 'scale-bar-label';
     scaleBar.appendChild(scaleBarLabel);
 
+    // Round to the nearest 1/2/5 × 10^n value (e.g. 1, 2, 5, 10, 20, …).
+    function niceRound(value) {
+        const mag = Math.pow(10, Math.floor(Math.log10(value)));
+        const residual = value / mag;
+        if (residual < 1.5) return 1 * mag;
+        if (residual < 3.5) return 2 * mag;
+        if (residual < 7.5) return 5 * mag;
+        return 10 * mag;
+    }
+
     function updateScaleBar() {
         if (!app.designScale || !visibility.scale_bar) {
             scaleBar.style.display = 'none';
             return;
         }
         scaleBar.style.display = '';
 
-        const dbuPerUm = app.techData?.dbu_per_micron || 1000;
         // Pixels per DBU at current zoom: designScale * 2^zoom.
         const zoom = app.map.getZoom();
         const pxPerDbu = app.designScale * Math.pow(2, zoom);
-        const pxPerUm = pxPerDbu * dbuPerUm;
 
         // Target bar width: ~15% of the map container width.
         const containerWidth = app.map.getContainer().clientWidth || 400;
         const targetPx = containerWidth * 0.15;
-        const targetUm = targetPx / pxPerUm;
-
-        // Pick a nice round number: 1, 2, 5, 10, 20, 50, ...
-        const mag = Math.pow(10, Math.floor(Math.log10(targetUm)));
-        const residual = targetUm / mag;
-        let niceUm;
-        if (residual < 1.5) niceUm = 1 * mag;
-        else if (residual < 3.5) niceUm = 2 * mag;
-        else if (residual < 7.5) niceUm = 5 * mag;
-        else niceUm = 10 * mag;
-
-        const barPx = Math.round(niceUm * pxPerUm);
-
-        // Format with appropriate units.
-        let label;
-        if (niceUm >= 1000) label = (niceUm / 1000) + ' mm';
-        else if (niceUm >= 1) label = niceUm + ' \u00b5m';
-        else if (niceUm >= 0.001) label = (niceUm * 1000) + ' nm';
-        else label = (niceUm * 1e6) + ' pm';
+
+        let barPx, label;
+        if (app.showDbu) {
+            const niceDbu = niceRound(targetPx / pxPerDbu);
+            barPx = Math.round(niceDbu * pxPerDbu);
+            label = String(Math.round(niceDbu));
+        } else {
+            const dbuPerUm = app.techData?.dbu_per_micron || 1000;
+            const pxPerUm = pxPerDbu * dbuPerUm;
+            const niceUm = niceRound(targetPx / pxPerUm);
+
+            barPx = Math.round(niceUm * pxPerUm);
+
+            // Format with appropriate units.
+            if (niceUm >= 1000) label = (niceUm / 1000) + ' mm';
+            else if (niceUm >= 1) label = niceUm + ' \u00b5m';
+            else if (niceUm >= 0.001) label = (niceUm * 1000) + ' nm';
+            else label = (niceUm * 1e6) + ' pm';
+        }
 
         scaleBarLine.style.width = barPx + 'px';
         scaleBarLabel.textContent = label;
@@ -654,6 +677,7 @@ const highlightBBox = inspector.highlightBBox;
 const pulseHighlight = inspector.pulseHighlight;
 app.updateInspector = updateInspector;
 app.navigateInspector = inspector.navigateInspector;
+app.refreshInspector = inspector.refreshInspector;
 
 function createBrowser(container) {
     new HierarchyBrowser(container, app, redrawAllLayers);
@@ -924,6 +948,19 @@ app.toggleTheme = function() {
     if (app.clockTreeWidget) app.clockTreeWidget.render();
 };
 
+app.toggleShowDbu = function() {
+    app.showDbu = !app.showDbu;
+    setCookie('or_show_dbu', app.showDbu ? '1' : '0');
+    // Re-render rulers so their labels update.
+    if (app.rulerManager) app.rulerManager._rerenderAll();
+    // Re-render hierarchy browser if present.
+    if (app.hierarchyBrowser) app.hierarchyBrowser._render();
+    // Update scale bar.
+    if (app.updateScaleBar) app.updateScaleBar();
+    // Re-request inspector properties with new formatting.
+    if (app.refreshInspector) app.refreshInspector();
+};
+
 // ─── Menu Bar ────────────────────────────────────────────────────────────────
 
 createMenuBar(app);
@@ -1099,6 +1136,7 @@ app.websocketManager.readyPromise.then(async () => {
                 zoom: Math.round(app.map.getZoom()),
                 visible_layers: [...app.visibleLayerNames],
                 selectable_layers: [...app.selectableLayers],
+                use_dbu: app.showDbu,
                 ...vf,
             };
             if (e.originalEvent && e.originalEvent.shiftKey) {

src/web/src/menu-bar.js

@@ -16,6 +16,8 @@ export function createMenuBar(app) {
             { label: 'Zoom Out', shortcut: 'Shift+Z', action: () => app.map.zoomOut() },
             { type: 'separator' },
             { label: 'Toggle Theme', shortcut: 'T', action: () => app.toggleTheme() },
+            { label: 'Show DBU', action: () => app.toggleShowDbu(),
+              checked: () => app.showDbu },
             { type: 'separator' },
             { label: 'Find...', shortcut: 'Ctrl+F', disabled: true },
             { label: 'Go to Position...', shortcut: 'Shift+G', disabled: true },
@@ -76,6 +78,16 @@ export function createMenuBar(app) {
             // Track items with dynamic enabled state for refresh on open.
             if (item.enabledWhen) row._enabledWhen = item.enabledWhen;
 
+            // Checkmark indicator for toggle items.
+            let checkEl = null;
+            if (item.checked) {
+                checkEl = document.createElement('span');
+                checkEl.className = 'menu-check';
+                checkEl.textContent = item.checked() ? '\u2713' : '';
+                row.appendChild(checkEl);
+                row._checkedFn = item.checked;
+            }
+
             const text = document.createElement('span');
             text.textContent = item.label;
             row.appendChild(text);
@@ -106,6 +118,10 @@ export function createMenuBar(app) {
                 if (row._enabledWhen) {
                     row.classList.toggle('disabled', !row._enabledWhen());
                 }
+                if (row._checkedFn) {
+                    const check = row.querySelector('.menu-check');
+                    if (check) check.textContent = row._checkedFn() ? '\u2713' : '';
+                }
             }
         }