Interaction And Labels
Selection, hover, and labels are default behaviors. Application code can call
the behavior namespace after await helios.ready, whether the user action came
from the canvas, a side panel, a search result, a keyboard shortcut, or a custom
behavior.
The example below writes a label attribute and configures labels to show only
for selected nodes. This keeps the visual output readable while demonstrating
how behavior options tune default behavior instead of enabling it from scratch.
Select Nodes And Show Labels
The important pattern is that selection state lives in the behavior layer. That state can be serialized, restored, used by labels, reflected in UI controls, or modified by custom application code without bypassing the visual system.
{"importMap": {"helios-web": "../vendor/helios/helios-web.es.js", "helios-network": "../vendor/helios/helios-network.js"}, "examples": [{"id": "examples--helios-web--interaction-labels.md--example-1", "title": "Select Nodes And Show Labels", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "460px", "headerName": null, "headerCode": "", "bodyName": "helios_web_selection_labels", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(12);\n\nnetwork.addEdges(Array.from(nodes, (node, index) => [node, nodes[(index + 1) % nodes.length]]));\nnetwork.nodeAttribute('label', (_current, _id, ordinal) => `node ${ordinal}`);\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n behaviors: {\n labels: { enabled: true, source: 'label', selectionMode: 'selected-only' },\n },\n});\n\nawait helios.ready;\nhelios.behavior.selection.selectNodes(Array.from(nodes).slice(0, 4), { mode: 'replace' });\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}]}