Your network fits its original panel, but the panel becomes narrower during review. Later, closing the visualization leaves you unsure whether the graph records still exist. Give the Sigma renderer an explicit container size, check its reported dimensions after a resize, and keep its lifetime separate from the source graph.
Removing a rendered view should not silently erase the graph you intend to rebuild. This original fictional exhibit plan uses three rooms and two walking connections. It exercises presentation and cleanup, not routing, visitor counts or a real museum's layout.
Open the complete example · Download the full HTML source
Start with an inspectable source inventory
Keep the three room IDs and their coordinates visible beside the drawing. In this exercise, Entry is at (0, 0), Prints at (2, 1), and Reading at (4, 0). Connect Entry to Prints and Prints to Reading. The coordinates are authored drawing positions, not measured distances.
The Sigma quickstart pairs the renderer with Graphology and supplies node positions. Its current version-four example pins Sigma 4.0.4 and Graphology 0.26.0. Keep the versions that you actually test with the deliverable; do not combine a version-three recipe with a version-four reference without checking the differences.
const graph = new graphology.Graph();
graph.addNode('entry', {label: 'Entry', x: 0, y: 0, size: 12});
graph.addNode('prints', {label: 'Prints', x: 2, y: 1, size: 12});
graph.addNode('reading', {label: 'Reading', x: 4, y: 0, size: 12});
graph.addEdge('entry', 'prints');
graph.addEdge('prints', 'reading');
The node-size reference explains that version four reads sizes in position space by default. This example explicitly uses itemSizesReference: "screen" for its size values and includes nodes and labels when fitting this small graph.
This is the source inventory for the example. Retain all three nodes when you change the panel width. A narrow view is not a request to remove a room or a connection.
Measure the container that actually holds the graph
Give the graph container a real height and a width that fits its parent. Wait until the attached container has measurable dimensions before creating the renderer; the example waits for a layout frame rather than accepting a zero-sized view. The Sigma API reference documents construction, resizing and reported pixel dimensions. After changing the panel, compare the renderer's width and height with that container's measured dimensions:
const renderer = new Sigma(graph, container, {
settings: {itemSizesReference: "screen", autoRescaleContent: "labels"}
});
renderer.resize();
renderer.refresh();
const dimensions = renderer.getDimensions();
In the worked example, choose Compact to constrain the panel to at most 280 pixels, then choose Full width to restore its available width. Refresh the renderer after resizing so the changed canvas is redrawn, then read the dimensions after each action. A phone may already limit the full-width panel; compare with the actual container rather than expecting a desktop width on every screen.
A matching node count does not prove the drawing resized. Check both dimensions and the visible drawing. Likewise, a smaller canvas should not change the maintained inventory of three nodes and two connections.
Release the view and rebuild it deliberately
Keep one renderer reference. The reference documents kill() as the cleanup operation for the renderer's resources, listeners and generated document elements. After invoking it, clear your application's reference as well:
renderer.kill();
// In an application with a mutable renderer variable:
// renderer = null;
Release view in this example should leave no canvas in the drawing container. The room list should still contain Entry, Prints and Reading. Rebuild view should create one renderer from that same graph. Disable another rebuild while a renderer already exists, so the control cannot quietly stack multiple views in one panel.
Use the vis-network selection guide when your problem is stale detail text after a programmatic selection. This exercise concerns the renderer's dimensions and lifetime. It does not add a route calculation or infer relationships from how close two circles appear.
For a separate check of node and edge meaning, the network graph inspector keeps an explicit node inventory, including an isolated node, apart from the drawing. Use that distinction when reviewing this renderer lifecycle: resizing or releasing the view should not become an unrecorded change to the source graph.
Deliver the page with its readable graph records
Retain the complete HTML and the selected library code with the example. Keep the room inventory readable even if the drawing cannot initialize, and report a rendering failure instead of presenting an empty panel as a completed graph.
For a reading copy in NOS, place the original room and connection lists beside the visualization. Ask the reviewer to try the narrow panel, release the view, and rebuild it. Finish by confirming that the same three rooms and two connections remain after those display changes.