HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
GraphView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA frame around a graph of notes drawn by another library, and the list that makes it readable.ExperimentalSince 0.116.0MediaUsageimport'@fusion.dev/helix/graph'import'@fusion.dev/helix-headless/graph'Preview
API ReferenceRoothelix-graphA frame around a graph of notes drawn by another library, and the list that makes it readable.
PropTypeDefaultDescriptionactivateHintLabelstringThe hint shown when a surface waiting to be pressed is scrolled or
swiped over, with gestures="activate". Absent is the family's own.activestringThe value of the current item.controlsstringWhich controls to show, as a list such as pan zoom fullscreen, or
none. A family can add words of its own.controlsLabelstringThe name of the group of controls, read by screen readers.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.countLabelstring"{count} notes"What the list says of a note's count, with {count}.defaultActivestring""The value of the item declared current in markup.depthnumberHow many links from the selected note to show, for its local graph. Unset
shows every note. The list holds what the drawing shows.fullscreenLabelstring"Fill the screen"The fullscreen button's label.gestures"activate"|"always"|"cooperative"Which gestures the surface takes from the page.idleDelaynumber0How long, in milliseconds, before the header and footer hide when the user is inactive. 0 keeps them visible.labelstring""The graph's name, read by screen readers, such as "Research notes".
Required.linkedBothLabelstring"Linked both ways with {note}"How a note linked both to and from the selected one is described, with {note}.linkedFromLabelstring"Linked from {note}"How a note the selected one links to is described, with {note}, the selected note's name.linksreadonlyGraphLink[][]The links between notes, each from source to target. A property, never an attribute.linksToLabelstring"Links to {note}"How a note that links to the selected one is described, with {note}.nodesreadonlyGraphNode[][]The notes. A property, never an attribute.notesLabelstring"Notes"The list's name, read by screen readers.panDownLabelstring"Pan down"The pan down button's label.panLeftLabelstring"Pan left"The pan left button's label.panRightLabelstring"Pan right"The pan right button's label.panStepnumber0.25How far one press pans the view, as a fraction of its size.panUpLabelstring"Pan up"The pan up button's label.searchLabelstring"Find a note"The search field's name.selectedLabelstring"Selected"How the selected note is described in the list.twoFingerHintLabelstringThe hint shown when one finger swipes over a surface with
gestures="cooperative". Absent is the family's own.usingLabelstringThe line shown while a surface with gestures="activate" has the
gestures. Absent is the family's own.wheelHintLabelstringThe hint shown when the wheel scrolls past a surface with
gestures="cooperative", with {key}, which is ⌘ on a Mac and Ctrl
elsewhere. Absent is the family's own.zoomInLabelstring"Zoom in"The zoom in button's label.zoomOutLabelstring"Zoom out"The zoom out button's label.
ReadTypeDescriptionreadybooleanWhether the graph has been drawn whole. For code that runs after helix-graph-ready.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The renderer's box, which the drawing is made in.filter-iconThe icon in the search field. Defaults to a magnifying glass.footerContent below the graph.headerContent above the graph.
EventTypeDescriptionhelix-activateHelixActivateEventA note was selected, in the list or in the drawing. The detail's value is its id.helix-before-activateHelixBeforeActivateEventA note is about to be selected. Cancelable: cancel it to keep the selection in your own state.helix-graph-layoutHelixGraphLayoutEventA layout settled, with where it put each note, sent by laidOut(). Keep the positions and pass them back as each note's x and y.helix-graph-panHelixGraphPanEventA pan button or arrow key was pressed. connectGraph moves the drawing.helix-graph-part-changeHelixGraphPartChangeEventThe notes, the links, the selection, the depth or the gestures changed. Used by connectGraph; pages do not need to listen for it.helix-graph-readyHelixGraphReadyEventThe graph has been drawn whole, laid out and settled. Sent each time drawn() says it is drawn after it was not.helix-graph-signalHelixGraphSignalEventSomething passed between two notes, sent by signal(). Used by connectGraph; pages do not need to listen for it.helix-graph-zoomHelixGraphZoomEventA zoom button or key was pressed. connectGraph zooms the drawing.
MethodTypeDescriptiondrawn(whole: unknown) => voidSays the graph has been drawn whole, or with false, that it no longer
is. Called by connectGraph once its layout has settled; a page drawing
its own graph calls it when that graph is finished. The first call after
the graph was not drawn sends helix-graph-ready and turns on
:state(ready).laidOut(positions: Record<string, { x: number; y: number }>) => voidSays where a layout put each note, by its id: sends
helix-graph-layout for the page to keep. Called by connectGraph once
its layout has settled; a page laying out its own graph calls it the same
way.pan(to: ViewportWay) => voidPans the view one step in a direction.requestActive(next: string) => booleanRequests a new current item, and returns whether the change was applied.signal(from: string, to: string, options: { tone?: GraphSignalDetail["tone"] }) => voidShows something passing from one note to another, such as a message, a
request or a payment, drawn traveling along the drawing and arriving with
a pulse. tone says what it means and colors it. Call it as often as
things happen; each call is one signal.toggleFullscreen() => voidTurns fullscreen on or off.zoom(by: number) => voidZooms the view one step: 1 zooms in and -1 zooms out.
PartDescriptionafterThe room the notes after those drawn would take, so the list scrolls its whole length.beforeThe room the notes before those drawn would take.bodyThe drawing beside the list, or above it where the frame is narrow.controlsThe group the pan and zoom buttons sit in.countHow many notes the list holds, which a search narrows, at the end of the search bar.filter-iconThe icon beside the search field.filter-markThe default icon beside the search field, shown when none is slotted.footerThe strip below the graph.fullscreenThe button that makes the graph fill the screen.gesture-hintWords over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.gesture-statusThe line shown while a graph with gestures="activate" has the gestures.headerThe strip above the graph.listThe list of notes, which draws only the rows in view.liveWhat screen readers hear when a search changes how many notes there are.noteOne note in the list.note-cursorThe note the keyboard is on in the list.note-linkedA note linked to or from the selected one.note-nameA note's name in the list.note-relationHow a note stands to the selected one, such as "Linked from Alpha".note-selectedThe selected note, first in the list.pan-downThe button that moves the graph down.pan-endThe button that moves the graph toward the end of a line of text: right in English.pan-startThe button that moves the graph toward the start of a line of text: left in English.pan-upThe button that moves the graph up.panelThe search field and the list, beside the drawing or below it.regionThe frame: the drawing, its controls and the list.searchThe bar holding the icon, the search field and the count.search-fieldThe field that finds a note by its name.stageThe drawing and its controls.viewportThe box the renderer draws in.zoom-inThe zoom in button.zoom-outThe zoom out button.
CSS PropertyDescription--graph-background-colorThe color behind the drawing while it loads.--graph-block-sizeThe frame's height, as a length.--graph-border-colorThe frame's border color.--graph-panel-sizeThe list's width beside the drawing.--viewport-control-background-colorThe background of the zoom and fullscreen buttons. Map and Canvas use the same property.
Custom stateDescriptionfullscreenThe graph fills the screen.idleThe user has been still long enough for the header and footer to fade.readyThe graph has been drawn whole, after helix-graph-ready.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sharingThe page keeps the plain wheel and one finger, with gestures="cooperative" or while a graph with gestures="activate" waits to be pressed.usingA graph with gestures="activate" has been pressed and has the gestures.
Roothelix-headless-graphA frame around a graph of notes drawn by another library, and the list that makes it readable.
PropTypeDefaultDescriptionactivateHintLabelstringThe hint shown when a surface waiting to be pressed is scrolled or
swiped over, with gestures="activate". Absent is the family's own.activestringThe value of the current item.controlsstringWhich controls to show, as a list such as pan zoom fullscreen, or
none. A family can add words of its own.controlsLabelstringThe name of the group of controls, read by screen readers.controlsPlacement"top-start"|"top-end"|"bottom-start"|"bottom-end"Which corner the controls sit in.countLabelstring"{count} notes"What the list says of a note's count, with {count}.defaultActivestring""The value of the item declared current in markup.depthnumberHow many links from the selected note to show, for its local graph. Unset
shows every note. The list holds what the drawing shows.fullscreenLabelstring"Fill the screen"The fullscreen button's label.gestures"activate"|"always"|"cooperative"Which gestures the surface takes from the page.idleDelaynumber0How long, in milliseconds, before the header and footer hide when the user is inactive. 0 keeps them visible.labelstring""The graph's name, read by screen readers, such as "Research notes".
Required.linkedBothLabelstring"Linked both ways with {note}"How a note linked both to and from the selected one is described, with {note}.linkedFromLabelstring"Linked from {note}"How a note the selected one links to is described, with {note}, the selected note's name.linksreadonlyGraphLink[][]The links between notes, each from source to target. A property, never an attribute.linksToLabelstring"Links to {note}"How a note that links to the selected one is described, with {note}.nodesreadonlyGraphNode[][]The notes. A property, never an attribute.notesLabelstring"Notes"The list's name, read by screen readers.panDownLabelstring"Pan down"The pan down button's label.panLeftLabelstring"Pan left"The pan left button's label.panRightLabelstring"Pan right"The pan right button's label.panStepnumber0.25How far one press pans the view, as a fraction of its size.panUpLabelstring"Pan up"The pan up button's label.searchLabelstring"Find a note"The search field's name.selectedLabelstring"Selected"How the selected note is described in the list.twoFingerHintLabelstringThe hint shown when one finger swipes over a surface with
gestures="cooperative". Absent is the family's own.usingLabelstringThe line shown while a surface with gestures="activate" has the
gestures. Absent is the family's own.wheelHintLabelstringThe hint shown when the wheel scrolls past a surface with
gestures="cooperative", with {key}, which is ⌘ on a Mac and Ctrl
elsewhere. Absent is the family's own.zoomInLabelstring"Zoom in"The zoom in button's label.zoomOutLabelstring"Zoom out"The zoom out button's label.
ReadTypeDescriptionreadybooleanWhether the graph has been drawn whole. For code that runs after helix-graph-ready.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The renderer's box, which the drawing is made in.filter-iconThe icon in the search field. Defaults to a magnifying glass.footerContent below the graph.headerContent above the graph.
EventTypeDescriptionhelix-activateHelixActivateEventA note was selected, in the list or in the drawing. The detail's value is its id.helix-before-activateHelixBeforeActivateEventA note is about to be selected. Cancelable: cancel it to keep the selection in your own state.helix-graph-layoutHelixGraphLayoutEventA layout settled, with where it put each note, sent by laidOut(). Keep the positions and pass them back as each note's x and y.helix-graph-panHelixGraphPanEventA pan button or arrow key was pressed. connectGraph moves the drawing.helix-graph-part-changeHelixGraphPartChangeEventThe notes, the links, the selection, the depth or the gestures changed. Used by connectGraph; pages do not need to listen for it.helix-graph-readyHelixGraphReadyEventThe graph has been drawn whole, laid out and settled. Sent each time drawn() says it is drawn after it was not.helix-graph-signalHelixGraphSignalEventSomething passed between two notes, sent by signal(). Used by connectGraph; pages do not need to listen for it.helix-graph-zoomHelixGraphZoomEventA zoom button or key was pressed. connectGraph zooms the drawing.
MethodTypeDescriptiondrawn(whole: unknown) => voidSays the graph has been drawn whole, or with false, that it no longer
is. Called by connectGraph once its layout has settled; a page drawing
its own graph calls it when that graph is finished. The first call after
the graph was not drawn sends helix-graph-ready and turns on
:state(ready).laidOut(positions: Record<string, { x: number; y: number }>) => voidSays where a layout put each note, by its id: sends
helix-graph-layout for the page to keep. Called by connectGraph once
its layout has settled; a page laying out its own graph calls it the same
way.pan(to: ViewportWay) => voidPans the view one step in a direction.requestActive(next: string) => booleanRequests a new current item, and returns whether the change was applied.signal(from: string, to: string, options: { tone?: GraphSignalDetail["tone"] }) => voidShows something passing from one note to another, such as a message, a
request or a payment, drawn traveling along the drawing and arriving with
a pulse. tone says what it means and colors it. Call it as often as
things happen; each call is one signal.toggleFullscreen() => voidTurns fullscreen on or off.zoom(by: number) => voidZooms the view one step: 1 zooms in and -1 zooms out.
PartDescriptionafterThe room the notes after those drawn would take, so the list scrolls its whole length.beforeThe room the notes before those drawn would take.bodyThe drawing beside the list, or above it where the frame is narrow.controlsThe group the pan and zoom buttons sit in.countHow many notes the list holds, which a search narrows, at the end of the search bar.filter-iconThe icon beside the search field.filter-markThe default icon beside the search field, shown when none is slotted.footerThe strip below the graph.fullscreenThe button that makes the graph fill the screen.gesture-hintWords over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.gesture-statusThe line shown while a graph with gestures="activate" has the gestures.headerThe strip above the graph.listThe list of notes, which draws only the rows in view.liveWhat screen readers hear when a search changes how many notes there are.noteOne note in the list.note-cursorThe note the keyboard is on in the list.note-linkedA note linked to or from the selected one.note-nameA note's name in the list.note-relationHow a note stands to the selected one, such as "Linked from Alpha".note-selectedThe selected note, first in the list.pan-downThe button that moves the graph down.pan-endThe button that moves the graph toward the end of a line of text: right in English.pan-startThe button that moves the graph toward the start of a line of text: left in English.pan-upThe button that moves the graph up.panelThe search field and the list, beside the drawing or below it.regionThe frame: the drawing, its controls and the list.searchThe bar holding the icon, the search field and the count.search-fieldThe field that finds a note by its name.stageThe drawing and its controls.viewportThe box the renderer draws in.zoom-inThe zoom in button.zoom-outThe zoom out button.
Custom stateDescriptionfullscreenThe graph fills the screen.idleThe user has been still long enough for the header and footer to fade.readyThe graph has been drawn whole, after helix-graph-ready.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sharingThe page keeps the plain wheel and one finger, with gestures="cooperative" or while a graph with gestures="activate" waits to be pressed.usingA graph with gestures="activate" has been pressed and has the gestures.
ExamplesNameDescriptionLiveA graph of company notes drawn by Sigma.js, with notes arriving and messages passing between them as they happen.PreviewA graph of linked notes, with the selected note's links and backlinks listed first.PreviewA graph of linked notes, with the selected note's links and backlinks listed first.