Class Graph
@@ -67,7 +67,7 @@ Parameters
Returns Graph
Methods
Returns voidThrows
When the source or target node does not exist.
add
-
@@ -112,7 +112,7 @@
Parameters
Returns void
get
-
@@ -130,7 +130,7 @@
Parameters
Returns GraphLink | undefined
The relationship, or undefined when it does not exist.
get
get
-
@@ -160,7 +160,7 @@
Parameters
Returns GraphNode[]
Directly connected nodes.
get
-
@@ -178,7 +178,7 @@
Parameters
Returns GraphNode | undefined
The node, or undefined when it does not exist.
get
-
@@ -195,7 +195,7 @@
Parameters
Returns GraphLink[]
get
remove
-
@@ -224,7 +224,7 @@
Parameters
Returns void
remove
-
@@ -241,7 +241,7 @@
Parameters
Returns void
set
-
@@ -259,7 +259,7 @@
Parameters
Returns void
to
Properties
+Methods
Returns OrbitGraph
Methods
Parameters
Returns void
add
-
@@ -109,7 +127,7 @@
- node: GraphNode
Parameters
Returns void
clear
-
@@ -118,7 +136,7 @@
clearReturns void
collapse
-
@@ -131,7 +149,7 @@
- nodeId: string
Parameters
Returns void
destroy
-
@@ -140,7 +158,7 @@
destroy
Returns void
download
-
@@ -155,7 +173,7 @@
- options: GraphJSONExportOptions & { fileName?: string } = {}
Parameters
Returns void
download
-
@@ -170,7 +188,7 @@
- fileName: string = "orbitgraph.png"
Parameters
Returns Promise<void>
expand
-
@@ -184,7 +202,7 @@
- options: GraphExpansionOptions = {}
Parameters
Returns void
export
-
@@ -199,7 +217,7 @@
- options: GraphJSONExportOptions = {}
Parameters
Returns string
export
-
@@ -210,7 +228,7 @@
export
export
-
@@ -219,7 +237,7 @@
exportReturns OrbitGraphViewState
Returns OrbitGraphViewState
focus
-
@@ -232,7 +250,7 @@
- nodeId: string
Parameters
Returns void
focus
-
@@ -247,7 +265,7 @@
- options: GraphPathOptions = {}
Parameters
Returns boolean
get
-
@@ -256,7 +274,7 @@
getReturns GraphExplorationHistoryState
Returns GraphExplorationHistoryState
get
-
@@ -265,7 +283,7 @@
getReturns GraphLoadingState
Returns GraphLoadingState
get
-
@@ -278,7 +296,7 @@
- nodeId: string
Parameters
Returns GraphNodeExplorationState
go
-
@@ -287,7 +305,7 @@
goReturns boolean
go
-
@@ -296,7 +314,7 @@
goReturns boolean
import
-
@@ -309,7 +327,7 @@
- state: OrbitGraphViewState
Parameters
Returns void
load
-
@@ -323,7 +341,7 @@
- options: GraphNeighborhoodLoadOptions = {}
Parameters
Returns Promise<GraphNeighborhoodResult | null>
load
-
@@ -336,7 +354,7 @@
- nodeId: string
Parameters
Returns Promise<GraphNode | undefined>
remove
-
@@ -349,7 +367,7 @@
- linkId: string
Parameters
Returns void
remove
-
@@ -362,7 +380,7 @@
- nodeId: string
Parameters
Returns void
reset
-
@@ -371,7 +389,7 @@
resetReturns void
reset
-
@@ -380,7 +398,7 @@
resetReturns void
search
-
@@ -393,7 +411,7 @@
- query: string
Parameters
Returns void
set
-
@@ -408,7 +426,7 @@
- data: GraphData
Parameters
Returns void
set
-
@@ -421,7 +439,7 @@
OptionaldataSource: GraphDataSource
Parameters
Returns void
set
-
@@ -434,7 +452,7 @@
- view: GraphInitialView
Parameters
Returns void
set
-
@@ -448,7 +466,7 @@
- options: GraphLayoutOptions = {}
Parameters
Returns void
set
-
@@ -461,7 +479,7 @@
- weight: number
Parameters
Returns void
set
-
@@ -474,7 +492,7 @@
- types: string[]
Parameters
Returns void
show
-
@@ -483,7 +501,7 @@
showReturns void
toggle
-
@@ -496,7 +514,7 @@
- type: string
Parameters
Returns void
unpin
-
@@ -509,7 +527,7 @@
- nodeId: string
Parameters
Returns void
Explore connected data in 3D — start small, follow relationships, and reveal only what matters.
Start here
+OrbitGraph is a TypeScript library for interactive 3D relationship graphs. Version 1.2 adds background physics workers, graph analytics, GraphQL data loading, and structured diagnostics alongside progressive exploration, React, accessibility, and exports.
+Install
+npm install @orbitgraph/core @orbitgraph/three three
+
+
+Using React?
+npm install @orbitgraph/core @orbitgraph/three @orbitgraph/react three
++
1. Create a graph
+<div id="graph" style="width: 100vw; height: 100vh"></div>
+import { createOrbitGraph } from "@orbitgraph/three";
import type { GraphData } from "@orbitgraph/core";
const container = document.querySelector<HTMLElement>("#graph");
if (!container) {
throw new Error("Graph container was not found.");
}
const graph = createOrbitGraph(container, {
backgroundColor: "#050816",
});
++
2. Add your data
+const data: GraphData = {
nodes: [
{
id: "design-team",
label: "Design Team",
type: "team",
color: "#22d3ee",
data: { region: "North" },
},
{
id: "workspace",
label: "Workspace",
type: "resource",
color: "#a855f7",
},
{
id: "notifications",
label: "Notifications",
type: "service",
color: "#3b82f6",
},
],
links: [
{
source: "design-team",
target: "workspace",
type: "manages",
weight: 1,
},
{
source: "workspace",
target: "notifications",
type: "uses",
weight: 0.8,
},
],
};
graph.setData(data);
+Each node and relationship can contain JSON-compatible metadata in data.
+
3. Choose where exploration starts
+Use initialView when the complete graph would be too large or too noisy.
| I want to... | -Go to | +Start with | +Configuration |
|---|---|---|---|
| Render my first graph | -Quick start | +Everything | +all |
| Copy API recipes | -API guide | +One known entity | +node |
| Explore a large graph progressively | -Relationship exploration | +One entity and its connections | +neighborhood |
| Use touch, keyboard, camera, and exports | -Interaction guide | -||
| Test graph size and FPS | -Performance guide | +A category of entities | +type |
Features
--
-
- 3D force-directed graph layouts with orbit, pan, zoom, drag, and pin interactions -
- Progressive exploration: start from a node, neighborhood, or type instead of rendering all data -
- Search, type filters, link-weight filtering, selections, labels, paths, and exploration history -
- Responsive touch gestures plus optional large mobile camera controls -
- Keyboard navigation with visible focus and accessible canvas labels -
- Optional animated relationship flow -
- PNG screenshots and complete or visible JSON exports -
- Vanilla JavaScript and React support -
Install
-Vanilla JavaScript
-npm install @orbitgraph/core @orbitgraph/three three
+const graph = createOrbitGraph(container, {
initialView: {
mode: "neighborhood",
nodeId: "design-team",
depth: 1,
direction: "outgoing",
},
});
-React
-npm install @orbitgraph/core @orbitgraph/three @orbitgraph/react three
+
+Nodes hidden by exploration are not mounted in WebGL or the force simulation. This keeps large graphs responsive from the first render.
+
+
+4. Explore relationships
+graph.expandNode("design-team", {
depth: 1,
direction: "outgoing",
relationshipTypes: ["manages", "owns"],
limit: 25,
offset: 0,
});
graph.collapseNode("design-team");
graph.resetExploration();
graph.showAll();
-Quick start
-import { createOrbitGraph } from "@orbitgraph/three";
import type { GraphData } from "@orbitgraph/core";
const data: GraphData = {
nodes: [
{ id: "team", label: "Product Team", type: "group", color: "#22d3ee" },
{ id: "workspace", label: "Workspace", type: "resource", color: "#a855f7" },
],
links: [
{ source: "team", target: "workspace", type: "manages", weight: 1 },
],
};
const container = document.querySelector<HTMLElement>("#graph");
if (!container) {
throw new Error("Graph container was not found.");
}
const graph = createOrbitGraph(container, {
mobileControls: { enabled: "auto" },
accessibility: { ariaLabel: "Product relationships" },
});
graph.setData(data);
+Search and filters refine only the explored subset; they never reveal data that exploration is still hiding.
+graph.search("workspace");
graph.toggleTypeFilter("service");
graph.setMinimumLinkWeight(0.7);
graph.clearFilters();
-Explore large graphs progressively
-const graph = createOrbitGraph(container, {
initialView: {
mode: "neighborhood",
nodeId: "team",
depth: 1,
direction: "outgoing",
},
});
graph.setData(data);
graph.expandNode("team", { depth: 1, direction: "outgoing" });
+
+5. Load data on demand
+GraphDataSource allows an application to fetch nodes and relationship pages only when the user needs them.
+import type { GraphDataSource } from "@orbitgraph/core";
const dataSource: GraphDataSource = {
async getNode(nodeId) {
const response = await fetch(`/api/nodes/${nodeId}`);
if (!response.ok) {
throw new Error("Unable to load the node.");
}
return response.json();
},
async getNeighborhood({ nodeId, limit = 50, offset = 0 }) {
const response = await fetch(
`/api/nodes/${nodeId}/neighborhood?limit=${limit}&offset=${offset}`,
);
if (!response.ok) {
throw new Error("Unable to load the neighborhood.");
}
return response.json();
},
};
const graph = createOrbitGraph(container, { dataSource });
await graph.loadNode("design-team");
await graph.loadNeighborhood("design-team", {
direction: "outgoing",
limit: 50,
});
-Nodes outside the explored subset are not mounted in WebGL or the force simulation.
-Interaction and export
-graph.focusNode("workspace");
graph.resetCamera();
await graph.downloadPNG("product-network.png");
graph.downloadJSON({ scope: "visible", fileName: "visible-network.json" });
+GraphQL
+Use the optional GraphQL adapter when your backend exposes GraphQL. OrbitGraph does not require Apollo, urql, Relay, or another GraphQL client.
+import {
createGraphQLDataSource,
createOrbitGraph,
} from "@orbitgraph/three";
const dataSource = createGraphQLDataSource({
endpoint: "/graphql",
getNode: {
document: `query Person($id: ID!) {
person(id: $id) { id label type }
}`,
variables: (id) => ({ id }),
select: (data) => data.person ?? undefined,
},
getNeighborhood: {
document: `query Neighborhood($nodeId: ID!, $limit: Int, $offset: Int) {
neighborhood(nodeId: $nodeId, limit: $limit, offset: $offset) {
nodes { id label type }
links { id source target type weight }
hasMore
nextOffset
}
}`,
variables: ({ nodeId, limit, offset }) => ({ nodeId, limit, offset }),
select: (data) => data.neighborhood,
},
});
const graph = createOrbitGraph(container, { dataSource });
-Keyboard navigation is enabled by default. Use arrow keys to move focus, Enter to focus a node, + to expand, - to collapse, and Escape to clear the current selection.
-Benchmark and examples
-npm run build
npm run dev:benchmark
+See Data sources for REST, GraphQL, pagination, and custom-client examples.
+
+6. Handle loading and diagnostics
+OrbitGraph exposes loading state for UI and diagnostics for logs or monitoring. It does not render error UI itself.
+const graph = createOrbitGraph(container, {
dataSource,
onLoadingChange: (state) => {
if (state.loading) {
console.log(`Loading ${state.operation}: ${state.nodeId}`);
}
if (state.error) {
console.error(state.error.message);
}
},
onDiagnostic: (diagnostic) => {
console.error(`[${diagnostic.code}] ${diagnostic.message}`);
},
});
-
-
-
-Example
-Purpose
-
-
-
-
-examples/vanillaDirect TypeScript/browser integration
-
-
-examples/reactReact component, callbacks, and refs
-
-
-examples/benchmarkGenerated graphs and FPS comparison
-
-
-
+Remote requests also reject normally, so application code can use try/catch to implement retries or custom recovery.
+
+7. Add optional relationship flow
+const graph = createOrbitGraph(container, {
linkFlow: {
enabled: true,
maxParticles: 140,
particleSize: 0.09,
particleSpeed: 0.12,
},
});
+
+
+Keep it disabled when rendering the largest graphs.
+
+8. Analytics
+Analytics operate on all loaded data by default. Pass { scope: "visible" } to analyze the currently explored and filtered view.
+const degree = graph.analytics.degree();
const rank = graph.analytics.pageRank({ scope: "visible" });
const betweenness = graph.analytics.betweenness();
const communities = await graph.analytics.detectCommunitiesAsync({
scope: "visible",
weighted: true,
});
+
+
+
+9. Keep large graphs responsive
+OrbitGraph can run force physics in a module Web Worker, keeping the browser UI responsive while large graphs settle.
+const graph = createOrbitGraph(container, {
physics: {
worker: true,
tickRate: 60,
},
});
+
+
+The worker is used for force-directed layouts. Deterministic radial, grid, and hierarchical layouts are calculated directly because they do not need continuous simulation.
+
+10. Export and camera
+await graph.downloadPNG("relationship-map.png");
graph.downloadJSON({ scope: "visible", fileName: "visible-graph.json" });
graph.focusNode("workspace");
graph.resetCamera();
graph.unpinNode("workspace");
+
+
+Keyboard navigation and mobile touch controls are available by default and can be configured through accessibility, camera, and mobile options.
+
+React
+import { OrbitGraph } from "@orbitgraph/react";
export function App() {
return (
<OrbitGraph
data={data}
style={{ width: "100%", height: "100vh" }}
options={{ dataSource }}
onLoadingChange={(state) => {
if (state.error) {
console.error(state.error.message);
}
}}
onDiagnostic={(diagnostic) => {
console.error(diagnostic);
}}
/>
);
}
+
+
+
+Benchmark
+OrbitGraph includes an interactive benchmark for generated graphs of 100 to 10,000 nodes.
+
+npm install
npm run build
npm run dev:benchmark
+
+
+
+Documentation
+
Development
npm install
npm run typecheck
npm run test:run
npm run build
-Roadmap
-See ROADMAP.md. The next planned release focuses on Worker-based graph computation and graph analytics.
+See examples/vanilla, examples/react, and examples/benchmark for working examples.
License
MIT
Settings
On This Page
Orbit6.
+7.
+8.
+9.
+10.
+React
+Benchmark
+Documentation
Development
-Roadmap
License
+-
-
- Start here -
- Features
- Install +
- 1.
Create a graph
+ - 2.
Add your data
+ - 3.
Choose where exploration starts
+ - 4.
Explore relationships
+ - 5.
Load data on demand - -
- Quick start -
- Explore large graphs progressively -
- Interaction and export -
- Benchmark and examples +
- Graph
QL
Documents
-Type Aliases
- GraphAccessibilityOptions
- GraphData
- GraphDataSource
- GraphDirection
- GraphExpansionOptions
- GraphExplorationHistoryState
- GraphExplorerExpansionState
- GraphExplorerState
- GraphExportScope
- GraphFilterState
- GraphInitialView
- GraphJSONExportOptions
- GraphLayout
- GraphLayoutOptions
- GraphLink
- GraphLoadingState
- GraphMobileControlsOptions
- GraphNeighborhoodLoadOptions
- GraphNeighborhoodQuery
- GraphNeighborhoodResult
- GraphNode
- GraphNodeExplorationState
- GraphPathFocusState
- GraphPathOptions
- GraphSelection
- JSONPrimitive
- JSONValue
- LinkClickEvent
- LinkFlowOptions
- LinkHoverEvent
- NodeClickEvent
- NodeHoverEvent
- OrbitGraphCameraOptions
- OrbitGraphOptions
- OrbitGraphViewState
- VisibleGraphData
Type Aliases
- BetweennessOptions
- CommunityDetectionOptions
- CommunityDetectionResult
- GraphAccessibilityOptions
- GraphCommunity
- GraphData
- GraphDataSource
- GraphDegreeMetrics
- GraphDiagnostic
- GraphDirection
- GraphExpansionOptions
- GraphExplorationHistoryState
- GraphExplorerExpansionState
- GraphExplorerState
- GraphExportScope
- GraphFilterState
- GraphInitialView
- GraphJSONExportOptions
- GraphLabelMode
- GraphLabelsOptions
- GraphLayout
- GraphLayoutOptions
- GraphLink
- GraphLoadError
- GraphLoadingState
- GraphLoadOperation
- GraphMiniMapOptions
- GraphMiniMapPosition
- GraphMobileControlsOptions
- GraphNeighborhoodLoadOptions
- GraphNeighborhoodQuery
- GraphNeighborhoodResult
- GraphNode
- GraphNodeExplorationState
- GraphPathFocusState
- GraphPathOptions
- GraphSelection
- JSONPrimitive
- JSONValue
- LinkClickEvent
- LinkFlowOptions
- LinkHoverEvent
- NodeClickEvent
- NodeHoverEvent
- OrbitGraphCameraOptions
- OrbitGraphOptions
- OrbitGraphPhysicsOptions
- OrbitGraphViewState
- PageRankOptions
- PageRankResult
- VisibleGraphData
Classes
+
+Type Aliases
- BetweennessAnalyticsOptions
- BetweennessOptions
- CommunityDetectionAnalyticsOptions
- CommunityDetectionOptions
- CommunityDetectionResult
- DegreeMetricsOptions
- GraphAnalyticsScope
- GraphAnalyticsScopeOptions
- GraphDegreeMetrics
- GraphNodePresentationStyle
- GraphNodePresentationStyles
- GraphQLClientOptions
- GraphQLDataSourceOptions
- GraphQLNeighborhoodOperation
- GraphQLNodeOperation
- GraphQLRequest
- GraphQLResponseError
- GraphQLVariables
- PageRankAnalyticsOptions
- PageRankOptions
- PageRankResult
Functions
+Optionalkeyboard
keyboardNavigation?: boolean
@@ -50,12 +50,12 @@ Option
Optionalget
Loads one node, commonly used to load the first exploration root.
Optionaloffset
offset?: number
@@ -74,14 +74,14 @@ OptionalUse it with limit to request the next page of neighbors.
limit to request the next page of neighbors.
Optionalrelationship
relationshipTypes?: string[]
Optional relationship types to include while expanding.
can
canGoForward: boolean
Whether a later exploration state can be restored.
index
index: number
Current zero-based history entry index.
length
length: number
Total number of exploration history entries.
pages
Loaded neighborhood pages and their options.
expansions
Current paginated node expansions.
initial
Configured entry point used by reset exploration.
path
Current focused path, or null when normal exploration is active.
Optionaldata
Additional JSON-compatible relationship information.
Optionalid
id?: string
Unique relationship identifier. Generated when omitted.
source
source: string
Identifier of the node where the relationship starts.
target
target: string
Identifier of the node where the relationship ends.
Optionaltype
type?: string
Category describing the relationship.
Optionalweight
weight?: number
Relative relationship importance, usually between 0 and 1.
links
Newly available relationships. Existing ids are updated when merged.
Optionalnext
nextOffset?: number | null
Offset to use for the next page, when available.
nodes
Newly available nodes. Existing ids are updated when merged.
Optionaltotal
totalNeighbors?: number
Total direct neighbors when the backend can provide it.
Optionaldata
Additional JSON-compatible information associated with the node.
id
id: string
Unique node identifier.
Optionallabel
label?: string
Human-readable node name.
Optionalsize
size?: number
Relative visual size of the node.
Optionaltype
type?: string
Category used for filtering, styling, and grouping.
expanded
expanded: boolean
Whether the node currently has one or more manual expansions.
hidden
hiddenNeighbors: number
Number of direct neighbors still hidden from the explored graph.
node
nodeId: string
Identifier of the node represented by this state.
visible
visibleNeighbors: number
Number of direct neighbors currently visible in the explored graph.
node
nodeIds: string[]
Node identifiers belonging to the visible path.
Optionalkeyboard
keyboardNavigation?: boolean
@@ -55,12 +55,12 @@ Option
Optionalmax
maxDistance?: number
@@ -68,12 +68,12 @@ Optional
Optionalmin
minDistance?: number
@@ -81,12 +81,12 @@ Optional
Optionalmovement
movementSpeed?: number
@@ -94,12 +94,12 @@ Optional
Properties
@@ -55,28 +59,28 @@ OptionalKeyboard navigation and screen-reader configuration.
+Defined in packages/core/src/types.ts:359
Optionalbackground
backgroundColor?: string
Scene background color.
+Defined in packages/core/src/types.ts:291
Optionalcamera
Camera navigation and distance constraints.
+Defined in packages/core/src/types.ts:348
Optionaldata
Optional asynchronous source used to load nodes and neighborhoods on demand.
+Defined in packages/core/src/types.ts:342
Optionalinitial
@@ -89,7 +93,14 @@ Default Value
-- Defined in core/src/types.ts:237
+Defined in packages/core/src/types.ts:309
+
+Optionallabels
+
+Configuration for hover and persistent node labels.
+
Optionallayout
@@ -102,112 +113,133 @@ Default Value
-- Defined in core/src/types.ts:258
+Defined in packages/core/src/types.ts:336
Optionallayout
Configuration used by the initial layout.
+Defined in packages/core/src/types.ts:339
Optionallink
linkColor?: string
Default color used for relationships without an explicit color.
+Defined in packages/core/src/types.ts:297
Optionallink
Configuration for optional animated relationship flow.
+Defined in packages/core/src/types.ts:312
Optionallink
linkOpacity?: number
Base opacity used for relationship lines.
+Defined in packages/core/src/types.ts:303
+
+Optionalmini
+
+Configuration for the optional graph overview mini-map.
+
Optionalmobile
Optional responsive camera-control overlay for touch devices.
+Defined in packages/core/src/types.ts:365
Optionalnode
nodeColor?: string
Default color used for nodes without an explicit color.
+Defined in packages/core/src/types.ts:294
Optionalnode
nodeSize?: number
Default relative size used for nodes without an explicit size.
+Defined in packages/core/src/types.ts:300
+
+Optionalon
+
+Receives non-visual diagnostics from data loading operations.
+
Optionalon
Called when keyboard focus moves to a visible node or is cleared.
+Defined in packages/core/src/types.ts:362
Optionalon
Called after clicking a relationship.
+Defined in packages/core/src/types.ts:324
Optionalon
Called when relationship hover state changes.
+Defined in packages/core/src/types.ts:330
Optionalon
Called when a lazy data-source request starts or finishes.
+Defined in packages/core/src/types.ts:345
Optionalon
Called after clicking a node.
+Defined in packages/core/src/types.ts:321
Optionalon
Called when node hover state changes.
+Defined in packages/core/src/types.ts:327
Optionalon
Called when the selected node or relationship changes.
+Defined in packages/core/src/types.ts:333
Optionalon
Called after exploration and filters change the rendered graph subset.
Keyboard navigation and screen-reader configuration.
+Optionalbackground
backgroundColor?: string
Scene background color.
Optionalcamera
Camera navigation and distance constraints.
Optionaldata
Optional asynchronous source used to load nodes and neighborhoods on demand.
Optionalinitial
@@ -89,7 +93,14 @@ Default Value
-- Defined in core/src/types.ts:237
Optionallabels
+
+Configuration for hover and persistent node labels.
+Optionallayout
@@ -102,112 +113,133 @@ Default Value
-- Defined in core/src/types.ts:258
Optionallayout
Configuration used by the initial layout.
Optionallink
linkColor?: string
Default color used for relationships without an explicit color.
Optionallink
Configuration for optional animated relationship flow.
Optionallink
linkOpacity?: number
Base opacity used for relationship lines.
Optionalmini
+
+Configuration for the optional graph overview mini-map.
+Optionalmobile
Optional responsive camera-control overlay for touch devices.
Optionalnode
nodeColor?: string
Default color used for nodes without an explicit color.
Optionalnode
nodeSize?: number
Default relative size used for nodes without an explicit size.
Optionalon
+
+Receives non-visual diagnostics from data loading operations.
+Optionalon
Called when keyboard focus moves to a visible node or is cleared.
Optionalon
Called after clicking a relationship.
Optionalon
Called when relationship hover state changes.
Optionalon
Called when a lazy data-source request starts or finishes.
Optionalon
Called after clicking a node.
Optionalon
Called when node hover state changes.
Optionalon
Called when the selected node or relationship changes.
Optionalon
Called after exploration and filters change the rendered graph subset.
Optionalphysics
+
+Configuration for the force simulation runtime.
+type OrbitGraphViewState = {
exploration: GraphExplorerState;
filters: GraphFilterState;
layout: GraphLayout;
layoutOptions: GraphLayoutOptions;
version: 1;
}
+exploration: GraphExplorerState;
filters: GraphFilterState;
layout: GraphLayout;
layoutOptions: GraphLayoutOptions;
version: 1;
}
@@ -36,35 +36,35 @@ explorationCurrent exploration entry point, expansions, and focused path.
Current exploration entry point, expansions, and focused path.
filters
Current search, type, and relationship-weight filters.
layout
Visual arrangement of the active graph nodes.
layout
Configuration associated with the active layout.
version
version: 1
Schema version used to safely evolve saved view states.
Returns void
+download
-
@@ -72,7 +76,7 @@
Optionaloptions: GraphJSONExportOptions & { fileName?: string }
Parameters
Returns void
download
-
@@ -87,7 +91,7 @@
OptionalfileName: string
Parameters
Returns Promise<void>
expand
-
@@ -103,7 +107,7 @@
Optionaloptions: GraphExpansionOptions
Parameters
Returns void
export
-
@@ -118,7 +122,7 @@
Optionaloptions: GraphJSONExportOptions
Parameters
Returns string
export
-
@@ -129,7 +133,7 @@
export
focus
-
@@ -144,7 +148,18 @@
- nodeId: string
Parameters
Returns void
get
+-
+
-
+
+++
Provides graph metrics for the complete or visible data scope.
+Returns GraphAnalyticsController
get
-
@@ -155,7 +170,49 @@
getReturns GraphLoadingState
get
+-
+
-
+
+++
Provides temporary visual styles without mutating source graph data.
+Returns GraphPresentationController
load
+-
+
-
+loadNeighborhood(+
nodeId: string,
options?: GraphNeighborhoodLoadOptions,
): Promise<GraphNeighborhoodResult | null>++Loads and merges one remote relationship neighborhood page.
+++Parameters
+-
+
- nodeId: string +
Optionaloptions: GraphNeighborhoodLoadOptions
Returns Promise<GraphNeighborhoodResult | null>
load
+-
+
-
+
+++
Loads one node through the configured remote data source.
+++Parameters
+-
+
- nodeId: string
Returns Promise<GraphNode | undefined>
reset
-
@@ -166,7 +223,7 @@
resetReturns void
reset
-
@@ -177,7 +234,7 @@
resetReturns void
set
-
@@ -192,7 +249,7 @@
- view: GraphInitialView
Parameters
Returns void
show
-
@@ -203,7 +260,7 @@
show
OrbitGraphProps: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
data: GraphData;
onKeyboardFocusChange?: (node: GraphNode | null) => void;
onLinkClick?: OrbitGraphOptions["onLinkClick"];
onLinkHover?: OrbitGraphOptions["onLinkHover"];
onLoadingChange?: (state: GraphLoadingState) => void;
onNodeClick?: OrbitGraphOptions["onNodeClick"];
onNodeHover?: OrbitGraphOptions["onNodeHover"];
onSelectionChange?: (selection: GraphSelection) => void;
onVisibleDataChange?: (data: VisibleGraphData) => void;
options?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover"
| "onVisibleDataChange"
| "onLoadingChange"
| "onKeyboardFocusChange",
>;
style?: CSSProperties;
}
+data: GraphData;
onKeyboardFocusChange?: (node: GraphNode | null) => void;
onLinkClick?: OrbitGraphOptions["onLinkClick"];
onLinkHover?: OrbitGraphOptions["onLinkHover"];
onLoadingChange?: (state: GraphLoadingState) => void;
onNodeClick?: OrbitGraphOptions["onNodeClick"];
onNodeHover?: OrbitGraphOptions["onNodeHover"];
onSelectionChange?: (selection: GraphSelection) => void;
onVisibleDataChange?: (data: VisibleGraphData) => void;
options?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover"
| "onVisibleDataChange"
| "onLoadingChange"
| "onKeyboardFocusChange",
>;
style?: CSSProperties;
}
OrbitGraphProps: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
data: GraphData;
onDiagnostic?: (diagnostic: GraphDiagnostic) => void;
onKeyboardFocusChange?: (node: GraphNode | null) => void;
onLinkClick?: OrbitGraphOptions["onLinkClick"];
onLinkHover?: OrbitGraphOptions["onLinkHover"];
onLoadingChange?: (state: GraphLoadingState) => void;
onNodeClick?: OrbitGraphOptions["onNodeClick"];
onNodeHover?: OrbitGraphOptions["onNodeHover"];
onSelectionChange?: (selection: GraphSelection) => void;
onVisibleDataChange?: (data: VisibleGraphData) => void;
options?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onVisibleDataChange"
| "onLoadingChange"
| "onDiagnostic"
| "onKeyboardFocusChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover",
>;
style?: CSSProperties;
}
data: GraphData;
onDiagnostic?: (diagnostic: GraphDiagnostic) => void;
onKeyboardFocusChange?: (node: GraphNode | null) => void;
onLinkClick?: OrbitGraphOptions["onLinkClick"];
onLinkHover?: OrbitGraphOptions["onLinkHover"];
onLoadingChange?: (state: GraphLoadingState) => void;
onNodeClick?: OrbitGraphOptions["onNodeClick"];
onNodeHover?: OrbitGraphOptions["onNodeHover"];
onSelectionChange?: (selection: GraphSelection) => void;
onVisibleDataChange?: (data: VisibleGraphData) => void;
options?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onVisibleDataChange"
| "onLoadingChange"
| "onDiagnostic"
| "onKeyboardFocusChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover",
>;
style?: CSSProperties;
}
Type Declaration
-
@@ -20,6 +20,8 @@
dataComplete source data. Replacing it resets exploration to initialView.
initialView.OptionalonDiagnostic?: (diagnostic: GraphDiagnostic) => void
OptionalonKeyboardFocusChange?: (node: GraphNode | null) => void
OptionalonLinkClick?: OrbitGraphOptions["onLinkClick"]
OptionalonSelec
OptionalonVisibleDataChange?: (data: VisibleGraphData) => void
-Optionaloptions?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover"
| "onVisibleDataChange"
| "onLoadingChange"
| "onKeyboardFocusChange",
>
+Optionaloptions?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onVisibleDataChange"
| "onLoadingChange"
| "onDiagnostic"
| "onKeyboardFocusChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover",
>
Renderer, camera, exploration, mobile, and link-flow configuration.
Optionalstyle?: CSSProperties
+Defined in packages/react/src/OrbitGraph.tsx:94
OptionalonVisibleDataChange?: (data: VisibleGraphData) => void
Optionaloptions?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover"
| "onVisibleDataChange"
| "onLoadingChange"
| "onKeyboardFocusChange",
>
+Optionaloptions?: Omit<
OrbitGraphOptions,
| "onSelectionChange"
| "onVisibleDataChange"
| "onLoadingChange"
| "onDiagnostic"
| "onKeyboardFocusChange"
| "onNodeClick"
| "onLinkClick"
| "onNodeHover"
| "onLinkHover",
>
Renderer, camera, exploration, mobile, and link-flow configuration.
Example