Persistence And Export
Persistence is about saving the visualization state, not just the graph data.
The exported state can include camera position, selected nodes, behavior state,
mapper configuration, and visual settings that make a session recoverable.
Figure export uses the active renderer, camera, mappers, labels, and legends.
That makes export code short: configure the view through public APIs, render the
view, then ask Helios for an image.
Save And Restore State
This example selects a few nodes, exports visualization state to a string, clears
the selection, and restores the saved state.
Save And Restore View State
This example maps node color, renders the graph, and appends a generated PNG
preview below the live canvas. In a production app, the same export call can be
attached to a download button, report builder, or publication workflow.
{"importMap": {"helios-web": "../vendor/helios/helios-web.es.js", "helios-network": "../vendor/helios/helios-network.js"}, "examples": [{"id": "examples--helios-web--persistence-export.md--example-1", "title": "Save And Restore View State", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "460px", "headerName": null, "headerCode": "", "bodyName": "helios_web_persistence", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(18);\n\nnetwork.addEdges(Array.from(nodes, (node, index) => [node, nodes[(index + 3) % nodes.length]]));\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nhelios.behavior.selection.selectNodes(Array.from(nodes).slice(2, 7), { mode: 'replace' });\n\nconst savedState = helios.exportVisualizationState({ format: 'string' });\nhelios.behavior.selection.clearSelection();\nawait helios.importVisualizationState(savedState);\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}, {"id": "examples--helios-web--persistence-export.md--example-2", "title": "Export A Figure Preview", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "500px", "headerName": null, "headerCode": "", "bodyName": "helios_web_exporter", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(20);\n\nnetwork.addEdges(Array.from(nodes).flatMap((node, index) => [\n [node, nodes[(index + 1) % nodes.length]],\n [node, nodes[(index + 4) % nodes.length]],\n]));\nnetwork.nodeAttribute('score', (_current, _id, ordinal) => ordinal / nodes.length);\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nhelios.behavior.mappers.setChannelConfig('node', 'color', {\n type: 'colormap',\n attributes: 'score',\n colormap: 'interpolateTurbo',\n domain: [0, 1],\n});\nhelios.frameNetwork({ animate: false });\n\nconst blob = await helios.exportFigurePreviewBlob({ format: 'png', width: 960, height: 540 });\nconst preview = document.createElement('img');\npreview.className = 'helios-export-preview';\npreview.src = URL.createObjectURL(blob);\ncontainer.append(preview);", "headerRefs": [], "bodyRefs": []}]}