Examples
Basic
Cytoscape graph wrapped by <code class="ws-code">phaTopology</code>.
Click and drag any node to reposition it; node positions persist while the page is open.
Documentation
Topology wrapper props
Every demo uses the same wrapper —
{#include components/charts/topology id="..." /} with the
Cytoscape config supplied via Alpine
x-data="phaTopology({ elements: [...], layout: { ... } })" on the
outer <div>.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id on the wrapper. |
height
|
String |
Inline canvas height (e.g. 400px). Default 400px via
CSS.
|
ariaLabel
|
String |
Sets aria-label on the wrapper for screen readers.
Defaults to Topology graph.
|
slot content
|
Qute block | Optional toolbar / sidebar / overlay rendered above or beside the canvas. |
phaTopology() config
| Name | Type | Description |
|---|---|---|
elements
|
Array |
Cytoscape elements — nodes ({ data: { id, label, ... } }) and edges ({ data: { source, target, label } }).
|
layout
|
Object |
Cytoscape layout config. Default
{ name: 'cose', animate: false }.
|
style
|
Array | Cytoscape style rules. Defaults to a PF v6-aligned palette — blue nodes, grey edges, triangle arrowheads. |
userZoomingEnabled
|
boolean |
Default true.
|
onTap
|
Function |
Callback receiving
{ target: 'node'|'edge'|'core', id, event }. A
topology-tap event is also dispatched on the wrapper.
|
Usage
Server builds the graph, Cytoscape paints. Render the elements list (nodes +
edges) on the server and embed it as Alpine x-data. The browser
does no graph computation beyond the layout.
HTMX-driven updates. To swap data live, return a new wrapper from an
hx-get and replace the existing one with
hx-swap="outerHTML". The Alpine
destroy() hook disposes the Cytoscape instance cleanly so there's
no leak.
Listening for taps. Subscribe with
@topology-tap on the wrapper or pass an
onTap in the config.