Full UI revamp: treemap + panels + notify watcher + Nord palette#5
Merged
singaraiona merged 1 commit intomainfrom May 1, 2026
Merged
Full UI revamp: treemap + panels + notify watcher + Nord palette#5singaraiona merged 1 commit intomainfrom
singaraiona merged 1 commit intomainfrom
Conversation
Replaces the flex-grid file display with a real architectural-telemetry
dashboard. Same data, much denser presentation, and the UI is now the
project's vitrine rather than a placeholder.
Layout:
- Header with project name + toolbar (color / focus / edge / show edges /
coupling ribbons).
- Left panel: Quality (temperature-colored number + bar + sparkline),
six A-F dimensions on a unified `N / 100` scale, Architecture summary,
Evolution summary, Unstable Modules table, Cycles list, and a 220x160
main-sequence scatter (instability vs. abstractness, with the A+I=1
diagonal labelled).
- Centre: SVG squarified treemap. Tile area = lines, fill = selected
color mode (10 modes total: language / mono / lines / churn / age /
risk / instability / author / bus / test_gap). Click → detail panel
with full per-file telemetry; double-click → function-level treemap of
that file (rects sized by cyclomatic complexity, Esc to close).
- Bezier connectors anchored on the closest rect borders, per-edge-type
lane offsets so imports / calls / inherits don't overlap, stroke width
reserved for future per-edge multiplicity. Coupling ribbons toggle
draws curved magenta arcs between change-coupled file pairs.
- Bottom: collapsible tables — Module DSM heatmap, Module Edges,
Hotspots, Rules, Complex Functions, Test Gaps.
Reactivity:
- Filesystem watcher via the `notify` crate (added to deps). The
background scan task only re-runs when a real file changes, debounced
150 ms; events inside target / .git / node_modules / .raysense are
ignored. The `--interval` flag is gone — there's nothing to tune.
- SSE on /events still drives in-place page reloads when the snapshot
hash changes.
Metric consolidation:
- Dropped `quality_signal` from the CLI text output and the left panel.
Score / 100, coverage / 100, structure / 100, plus the six dimensions
also scaled to / 100 with an inline grade letter. JSON / SARIF / trend
recording keep the field for back-compat with existing consumers.
Theme:
- Nord palette throughout (polar-night backgrounds, snow-storm text,
frost cool blues for system languages, aurora warm tones for accents).
Cohesive saturation and lightness so the treemap reads as one theme.
- Dark webkit-scrollbar styling so the panels don't break the dark
surface.
Bug fix:
- `<svg id="zoom" hidden>` was rendering as `display:block` (the HTML
`[hidden]` attribute isn't honoured on SVG by the user-agent
stylesheet). The 92%-opaque dim overlay was therefore sitting on the
treemap permanently, dimming every fill below it. Fixed with an
explicit `.zoom-overlay[hidden]{display:none}` rule.
CLI help text for --watch updated to reflect the notify watcher.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rebuilds the live UI as the project's vitrine. Same data the scanner already produces — denser presentation, cohesive Nord palette, real-time filesystem-driven updates.
Highlights
language / mono / lines / churn / age / risk / instability / author / bus / test_gap), bezier connectors anchored on rect borders with per-edge-type lane offsets.N / 100scale with grade letters, Architecture summary, Evolution summary, Unstable Modules, Cycles list (click to highlight), 220x160 main-sequence scatter (A vs I with the diagonal labelled).notify(added to deps, replaces the polling interval). Debounced 150 ms, ignorestarget/.git/node_modules/.raysense. The--intervalflag is gone.quality_signaldropped from the CLI text output and the left panel. Everything user-visible is nowN / 100. Internal data structures keep the field for back-compat.<svg id="zoom" hidden>wasn't gettingdisplay:nonefrom the HTML[hidden]attribute, so the dim overlay was permanently dimming every tile below it. Fixed with an explicit CSS rule.Numbers
notify = "8".Test plan
cargo fmt --check && cargo test.cargo run -q -- .— text output is uniformN / 100, noquality_signal.cargo run -q -- . --ui→ http://localhost:7000/ — Nord theme, treemap renders bright, click a tile, click a cycle, double-click for drill-in, toggle coupling ribbons.cargo run -q -- . --watch— only re-runs on real file changes (touch a source file to verify).