feat: single-page reshape with drilldown nav + shared world-map#18
Merged
Conversation
…m v2 Replaces the v0.2.10 multi-page Map/Councils/Council-detail/Transactions architecture with a single-page hero layout per the locked sketch: §1 Counter strip (6 tiles) §2 Topology + Activity feed (side-by-side, click council to expand §3) §3 Council details panel (collapsed until topology click) §4 Sparklines (60m) + Asset breakdown (24h) side-by-side §5 World map WebSocket-driven (no HTTP polling). Wire subprotocol bumped to moonlight.network.v2 in step with the backend. World-map SVG + jurisdiction-by-geo logic carried forward from v0.2.10. Drops obsolete modules: router, nav, stellar lib, version-check, plus the four removed multi-page views. CSP simplified — public anonymous dashboard, no auth boundary, 'unsafe-inline' on style-src is acceptable.
Wraps the 5-section dashboard in @moonlight/ui's renderNav + pageLayout
(same pattern as provider-console / council-console) so the brand label
'Network Dashboard · v${version}' + nav strip live above the content.
build.ts again concatenates tokens.css + base-styles.css + nav.css from
the pinned @moonlight/ui@v0.3.1 tag.
app-styles.css rewritten to consume the upstream dark tokens (--bg /
--surface / --border / --text / --text-muted / --primary / --active /
--pending / --inactive) instead of the ad-hoc light palette. Event-kind
accents move from background fills to left-border + glyph-coloured
accents so cards read against the dark surface. World-map land paths
get a CSS override (`fill: var(--border) !important`) to match the
theme.
…ver popover
Replaces the local lib/world-map.ts with the shared component and reworks
views/world-map.ts into a thin section wrapper that drives the new
generic onHover + setSlot surface:
- hovered country → `hovered` slot (highlighted)
- countries sharing a council with the hovered one → `reachable` slot
- everything else → `dimmed` slot
- a cursor-tracked popover lists each council in the hovered country
(name + provider count) or 'No councils' when the country has none
The map component stays agnostic — it only fires onHover and exposes
setSlot. All council-shaped reasoning lives in this view. CSS for the
three slots + the popover ships in app-styles.css.
Build pipeline pulls world-map/world-map.css from the shared
@moonlight/ui@v0.3.2 tag alongside tokens / base-styles / nav.
Drops the now-redundant lib/world-map.ts + lib/geo_test.ts.
Cards now stay long enough to read in the new trio layout instead of flicking past in a few seconds, and the visible cap grew to keep recent history available across the longer TTL.
…down in a 3x3 grid The topology view added little beyond what the world map + per-country council list already convey, so it's removed entirely. New layout below the counter strip is a single 3x3 grid: +-----+-----+--------------+ | map | map | countries | <- CountryDetails (click a country) +-----+-----+--------------+ | map | map | councils | <- CouncilDetails +-----+-----+--------------+ | events events| providers | <- ActivityFeed + ProviderDetails +--------------+-----------+ Drilldown chain wired in app.ts: click country on map -> CountryDetails lists the councils there -> click a council in that list -> CouncilDetails populates -> click a PP in CouncilDetails -> ProviderDetails populates Each grid cell scrolls vertically when content overflows its row height; section headers stay put. The Country / Council / Provider panels get `overflow-y: auto` on their inner content lists; the activity feed list already had it. WorldMap exposes `setOnCountryClick` + `setSelectedCountry` so the clicked-country highlight is persistent (independent of the hover state that drives the popover + reachable highlight). CouncilDetails exposes `setOnPpClick`. CountryDetails exposes `setOnCouncilClick`. App.ts wires them together in one place.
LiveFrame mirror gains the new `counters` field. ws-client passes it through to the onEvent handler. app.ts calls `counters.render(live)` instead of the old `bumpFromLiveEvent()` hack that only ticked eventsLast24h. All 6 counter tiles (COUNCILS / ACTIVE PPs / EVENTS-24h / ASSETS / THROUGHPUT / LATENCY) now update in real time without waiting for a fresh snapshot.
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
Full SPA reshape against the v2 network-dashboard-platform backend (
moonlight.network.v2subprotocol) and the new@moonlight/ui/world-mapshared component. Closes the old PR #17 (which diverged from the locked sketch).What ships
@moonlight/uibrand nav. Dark theme via the upstream tokens, no inline color hardcoding except the per-event-kind accents.LiveFrame.countersfield — no more snapshot-only updates.@moonlight/ui/world-map@v0.3.2component. Hover-driven popover (countries sharing a council with the hovered one are highlighted; non-council countries dim everything).Commits
feat: 5-section single-page reshape against network-dashboard-platform v2feat(ui): restore @moonlight/ui nav + dark-theme tokenschore: refresh deno.lock for @moonlight/ui nav + layout importsfeat(world-map): migrate §5 to @moonlight/ui/world-map@v0.3.2 with hover popoverfeat(activity-feed): card TTL 8s → 5 min, max-visible 5 → 10refactor(layout): drop topology, add Country + Provider details drilldown in a 3x3 gridfeat: repaint counter strip on every live eventchore: release v0.2.12Test plan
deno fmt --checkcleandeno lintcleandeno task checkcleandeno task test— 13 passeddeno task buildclean (dev + production):3040renders all sections, counter strip updates live, drilldown chain works end-to-end (country click → council list → PP card), world map highlights reachable jurisdictions on hover, sparklines + asset breakdown populated, activity feed paints all 7 event kindsDependencies
network-dashboard-platform(companion PR) to be deployed first — frontend assumesLiveFrame.countersis present.@moonlight/ui@v0.3.2(already released).Awaiting PM review + merge.