Skip to content

UI Enhancements — Topology Zoom & Stack Selector#106

Merged
GyulyVGC merged 3 commits into
NullNet-ai:mainfrom
antoncxx:ui-enhancements
Jun 17, 2026
Merged

UI Enhancements — Topology Zoom & Stack Selector#106
GyulyVGC merged 3 commits into
NullNet-ai:mainfrom
antoncxx:ui-enhancements

Conversation

@antoncxx

@antoncxx antoncxx commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR improves the topology viewer and the stack selection UX across the control plane UI.


Changes

Topology — Zoom & Pan Frame

Introduced a reusable ZoomFrame component (ui/src/components/topology/ZoomFrame.tsx) that wraps any SVG content with interactive zoom and pan:

  • Scroll to zoom — mouse wheel zooms in/out centered on the cursor position (0.2× – 4× range).
  • Drag to pan — click and drag to move the canvas freely.
  • Reset button — a "reset view" button appears in the bottom-right corner whenever the view has been moved from its default position.
  • Fixed frame height — the topology is rendered inside a fixed-height container (overflow: hidden) so it never pushes other content around.
  • No passive-listener warning — the wheel handler is registered via addEventListener with { passive: false } so preventDefault works correctly and the page does not scroll while zooming.
  • No text cursor on draguserSelect: none on the container prevents SVG text nodes from entering text-selection mode during a drag.

ZoomFrame is used in two places:

Location Height
Topology page (TopologyGraph) 520 px
Dashboard mini-preview 280 px

Stack Selector — Dropdown

Previously the stack name in the sidebar footer was a click-to-edit plain text field. It is now a proper dropdown:

  • Clicking the stack name opens a popup list populated from the new /api/stacks endpoint (polled every 10 s).
  • The currently active stack is highlighted.
  • A "type custom…" option at the bottom of the list opens the original free-text input for stacks not yet known to the server.
  • Double-clicking the name also opens the free-text input directly.
  • The dropdown closes on outside click.

Server — GET /api/stacks

New endpoint added to the Rust HTTP server:

GET /api/stacks  →  ["stack-a", "stack-b", ...]

Returns a sorted JSON array of all stack names currently held in the in-memory StackMap. No authentication required (consistent with all other read endpoints).

Topology — Filter Bar Removed

The Registered / Unregistered filter chips were removed from the Topology page. All services are shown by default.

antoncxx added 2 commits June 16, 2026 15:01
- Extract zoom/pan into ZoomFrame component (scroll=zoom, drag=pan,
  reset button); used at height=520 on Topology page and height=280
  on Dashboard mini-preview
- Add GET /api/stacks endpoint returning sorted list of active stacks
- Stack selector in sidebar shows a dropdown of available stacks;
  double-click or "type custom…" option keeps the free-text flow
- Register wheel handler with { passive: false } to allow preventDefault
- Remove Registered/Unregistered filter chips from Topology view
@antoncxx antoncxx changed the title ui: topology zoom/pan frame + stack selector dropdown UI Enhancements — Topology Zoom & Stack Selector Jun 16, 2026
Drop filter state, action types, reducer cases, and props from
TopologyContext, TopologyGraph, and TopologyGraphSvg.
@antoncxx antoncxx marked this pull request as ready for review June 16, 2026 19:30
@GyulyVGC GyulyVGC added the enhancement New feature or request label Jun 17, 2026
@GyulyVGC GyulyVGC merged commit 9b30cc6 into NullNet-ai:main Jun 17, 2026
4 checks passed
@antoncxx antoncxx deleted the ui-enhancements branch June 17, 2026 14:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants