Clicking a node updates the explanation, but choosing the same node from a dropdown leaves the old explanation in place. Call your detail-rendering function after a programmatic selection. The vis-network documentation says selectNodes() does not fire selection events, so a click listener alone does not cover both controls.
Use a fictional reading plan with nodes Draft, Review, and Publish. Directed edges connect Draft to Review and Review to Publish. A selection should identify the chosen stage and its explicitly connected neighbors; the diagram's physical spacing is not a schedule or a duration.
Open the complete example · Download the full HTML source
Create the network and retain the instance
The official network documentation describes the constructor, data records, options, selection methods, and events. Supply node IDs separately from their displayed labels:
const nodes = [
{id: 'draft', label: 'Draft'},
{id: 'review', label: 'Review'},
{id: 'publish', label: 'Publish'}
];
const edges = [
{from: 'draft', to: 'review', arrows: 'to'},
{from: 'review', to: 'publish', arrows: 'to'}
];
const network = new vis.Network(container, {nodes, edges}, options);
The application must supply container and options, including an actual container height. Keep the source relationships readable below the canvas. A reader should not have to distinguish arrowheads on a small phone to know which stage follows Review.
Give both controls the same reading update
Use one function that accepts the selected ID and writes the stage details. A node-click handler can call it with the selected node. The dropdown handler should call it explicitly after changing the network selection:
network.selectNodes([selectedId]);
showStageDetails(selectedId);
Do not synthesize a mouse click merely to reuse the other handler. Keep the shared work in the detail function. Handle an empty selection by clearing its old explanation.
The API's getConnectedNodes(id, 'to') returns the outgoing neighbors under its documented direction convention, while 'from' selects incoming neighbors. For Review, the supplied outgoing neighbor is Publish and incoming neighbor is Draft. Check those ID arrays independently of the node positions.
Separate layout changes from source changes
Dragging a node changes where it is drawn. Do not label that movement as a changed dependency unless your application actually changes the edge data. Likewise, selecting Publish is a reading action, not confirmation that publication occurred.
The existing network graph inspector calculates degrees and breadth-first paths from an editable undirected graph. This recipe addresses a specific vis-network selection boundary: a programmatic selection does not invoke the same event path as a user's click.
For review in NOS, retain the stage list and directional relationships beside the diagram. Ask the reviewer which connection should change, using its endpoint names. That request is more precise than asking someone to move a circle closer to another circle.