NMS-20376: Improvements and changes to the Topology Preview UI - #8902
Open
marshallmassengill wants to merge 24 commits into
Open
marshallmassengill wants to merge 24 commits into
marshallmassengill wants to merge 24 commits into
Conversation
The export re-rendered the sigma scene alone, and the background image is a DOM layer sigma never sees. The scene is now drawn onto a canvas that first carries the page color and the background at its on-screen rect and opacity, scaled to the device pixel ratio the export uses.
The fit bounds came from nodes and free-standing labels, so a floor plan larger than the nodes on it was cut off, and a view with a background and no nodes yet did not fit at all. The bounds now take in annotation shapes and the background image, and the fit runs when either is present.
Escape was handled only in Edit mode, and there only to leave link or shape drawing or a label edit; a selection, a rubber band mid-drag, a half-drawn link or shape, background adjusting, and a discovered graph's focus had no key to back out of. One Escape now undoes the most transient thing present, in order: a label edit, a rubber band, a shape or link draft, then the draw or adjust mode, then the selection, then the focus.
Sigma paints node and edge labels with its own default, Arial, while every DOM element around them uses the OpenNMS font. The renderer now takes the page's --onms-font-family for both, repaints once webfonts have loaded, and the stats box drops its monospace face for tabular figures in the page font.
PrimeVue pads the body by the scrollbar width whenever it locks page scroll. The stable scrollbar gutter already keeps that space reserved, so the padding narrowed the page and shifted the in-flow content left by the scrollbar width for as long as any modal dialog was open.
A wheel notch zooms by a fixed ratio, which is too coarse to settle on a particular framing. With Shift held, a notch zooms by a quarter of that step, four of them making one plain notch, about the pointer as before. Browsers report Shift+wheel as a horizontal delta that sigma's handler discards, so the canvas takes the event first and reads whichever axis moved.
…nd Export icons The bar spent five text buttons on view management. Save, the one pressed many times a session, stays; New, Save As, Rename and Delete sit behind a menu beside the view chooser. Refresh, Fit and Export PNG become icon buttons with tooltips.
The tooltip directive places to the right unless told otherwise, so a button at the viewport's right edge had its tooltip squeezed against the edge and wrapped into a narrow column. OnmsIconButton takes a tooltipPosition and hands it to the directive as its modifier; the toolbar's icon buttons use "bottom".
The node-size slider sat in the bar; link width was a constant. Both now live in a popover behind one Appearance button in the bar, available in View and Edit and for discovered graphs. A custom view saves them with its style and restores them when opened; a new view starts from the defaults. Hover and selection emphasis add to the link width rather than replacing it.
…r name the targets The field said "Search nodes, IPs, categories" in its placeholder. A magnifying glass now sits in the field's left padding and the placeholder reads "Nodes, IPs, categories".
Nothing said whether the open view differed from what was saved. The page now keeps the view as last loaded or saved and compares it, minus the viewport, after every canvas command and store-side edit. While they differ the bar's top accent turns red in either mode and an "Unsaved changes" badge sits by Save. Switching view or source, starting a new view, leaving the page or closing the tab first asks.
The page had a read-only Inspector on the left in View mode, an editable Properties panel on the right in Edit mode, the palette on the left in Edit mode, and Draw Link, Draw Box and Link Hints as text buttons in the bar. There is now one rail on the left in both modes, and one panel beside it. The rail's top items open the panel on a page, Details or, in Edit mode, Place nodes, and collapse it when that page is already showing; the Edit tools sit below a gap as icon buttons with a Select tool that turns the drawing modes off. Details is the Inspector with the editable sections merged in, so a selected node shows its icon and neighbor controls above its details in Edit mode. Selecting something while the palette shows switches to Details; a collapsed panel keeps a dot on the Details item instead. Entering Edit mode with the panel collapsed opens it on the palette. The panel's width is shared by both pages and persists.
The node, link, label and selection counts could only be switched from a checkbox deep in the Edit-mode Details page, though they show in View mode too. The rail's last item now toggles them in either mode, pressed while they show; the checkbox is gone.
The Details page kept its own adjust button after the rail gained the same tool. The page keeps Remove and points at the rail for moving and resizing.
The discard prompts used the browser's confirm(). They now use the same confirmation dialog the delete flow does, with Discard and Keep editing, and the callers await its answer. Closing the tab still gets the browser's own prompt, which is the only one a browser allows there.
PrimeVue's text, outlined and filled buttons differ by a border and their padding, so a pressed item in the rail was a different size from its neighbours and the column read as unevenly spaced. Every rail button is now a fixed square.
…l is on The Details page listed the background picker, opacity and Remove whenever nothing was selected in Edit mode, on top of the rail's tool for placing it. The rail's tool, now named Background and always present in Edit mode, is the one way in: turning it on brings the Details page forward with those controls, and turning it off takes them away again.
The segmented View/Edit control sat in the bar among the navigation. Edit is the first item on the rail now, a toggle pressed while editing and painted the same amber as the bar's accent, above the panel pages and the tools it reveals. Discovered sources, being read-only, show no such item.
A discovered graph regenerates and cannot be edited, so there was no way to take one as a starting point. A Copy button in the bar, on discovered sources, saves what is on screen, laid out as it stands, under a new name and opens the copy in Edit mode. Its own store action rather than saveCurrentViewAs, which spreads whichever custom view was open last.
A copied discovered graph now carries its node size and link width, and opens with the palette up. Clicking a node while placing nodes no longer flips the panel to Details; a label, link or box still does. Escape's focus clear goes through the page, so the URL loses its focus too. The export attaches its anchor and revokes the blob URL later. The discard guards compute the unsaved state fresh rather than trusting the debounced one, and a source change on the same route is guarded as well. The side panel keeps both pages mounted. The saved baseline follows the open view's identity.
The tool icons file gets the license header every .ts file carries. The onms-ui README describes tooltipPosition instead of saying placement has no prop. The Appearance trigger reports aria-expanded. The mode accents are custom properties on the page, shared by the bar and the rail's Edit item. The Appearance rows are no longer labels wrapping a control that cannot be labelled. A container test checks the view menu's items and which are disabled.
…ebounce The unsaved-changes tests slept 200 ms over a 150 ms debounce, a margin a loaded CI runner could miss. They now wait for the badge to appear or go, with a generous ceiling, so timing no longer decides the outcome.
Adds a Labels selector to the Appearance popover. The placement is persisted in the view style alongside node size and link width, and the canvas draws both the label and the hover halo at the chosen side.
marshallmassengill
requested review from
cgorantla,
joseanesONMS,
mershad-manesh and
synqotik
September 25, 2026 21:01
This branch has not been deployed
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.
A bunch of feedback from @synqotik as well as others and rearranging quite a few things here to make it a simplified menu with icons.
This requires that NMS-20375 get merged first.
Assisted by Anthropic Claude Fable 5.1.
External References