Layouts And Filters
The default layout is enough for many graphs, so layout configuration should not appear in every snippet. Use the layout behavior when an application needs to start, stop, switch, or parameterize layout execution explicitly.
Filtering is a view-level operation unless you ask for a filter to also affect layout. That means the original graph can remain available while the rendered view narrows to nodes and edges that match the current rules.
Controlling Layout Execution
This example builds a larger graph, creates a Helios view with default options,
then starts and stops the force layout through helios.behavior.layout.
Filtering By Attributes
This example creates numeric node and edge attributes with chainable writers, then creates render filters from those attributes. The graph object is not rebuilt; the filters behavior updates the rendered view.
The same filter behavior is the right place for categorical filters, string filters, query-backed filters, and filters that should rebuild the active layout topology.
{"importMap": {"helios-web": "../vendor/helios/helios-web.es.js", "helios-network": "../vendor/helios/helios-network.js"}, "examples": [{"id": "examples--helios-web--layouts-filters.md--example-1", "title": "Control The Layout Behavior", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "460px", "headerName": null, "headerCode": "", "bodyName": "helios_web_layouts", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(28);\n\nnetwork.addEdges(Array.from(nodes).flatMap((node, index) => [\n [node, nodes[(index + 1) % nodes.length]],\n index % 2 === 0 ? [node, nodes[(index + 7) % nodes.length]] : null,\n]).filter(Boolean));\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nhelios.behavior.layout.update({ layoutType: 'gpu-force', running: true });\nsetTimeout(() => helios.behavior.layout.stop(), 1600);", "headerRefs": [], "bodyRefs": []}, {"id": "examples--helios-web--layouts-filters.md--example-2", "title": "Filter By Attribute Values", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "470px", "headerName": null, "headerCode": "", "bodyName": "helios_web_filters", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(24);\n\nnetwork.addEdges(Array.from(nodes).flatMap((node, index) => [\n [node, nodes[(index + 1) % nodes.length]],\n [node, nodes[(index + 6) % nodes.length]],\n]));\n\nnetwork\n .nodeAttribute('score', (_current, _id, ordinal) => (ordinal % 9) / 8)\n .edgeAttribute('strength', (_current, _id, ordinal) => (ordinal % 7) / 6);\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nhelios.behavior.filters.replaceRules({\n scope: 'render',\n nodeRules: [{ id: 'visible-score', scope: 'node', type: 'numeric', attribute: 'score', min: 0.35 }],\n edgeRules: [{ id: 'strong-edges', scope: 'edge', type: 'numeric', attribute: 'strength', min: 0.25 }],\n});\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}]}