Nx Graph library

@nx/graph/legacy

This entry point is mainly for migration purposes. This contains the entire old @nx/graph library.

@nx/graph

Core of Nx Graph that contains base styles, basic types, and logic to render Cytoscape elements.

$3

A custom hook that allows consumers to listen for various events on the RenderGraph: the nodes, the edges, the background click

``tsx
const { graphClient, send } = useProjectGraphClient({
/.../
});

useRenderGraphEvent(graphClient, 'CompositeNodeDblClick', (event) => {
if (event.isExpanded) {
send({ type: 'collapseCompositeNode', compositeNodeId: event.id });
} else {
send({
type: 'expandCompositeNode',
compositeNodeId: event.id,
mode: 'affected-only',
});
}
});
`

#### Events

`ts
export interface CompositeProjectNodeDblClickEvent {
type: 'CompositeNodeDblClick';
id: string;
isExpanded: boolean;
}

export interface ProjectNodeContextMenuEvent {
type: 'ProjectNodeContextMenu';
id: string;
data: ProjectNodeElementData;
virtualElement: VirtualElement;
}

export interface CompositeProjectNodeContextMenuEvent {
type: 'CompositeNodeContextMenu';
id: string;
isExpanded: boolean;
data: CompositeProjectNodeElementData;
virtualElement: VirtualElement;
}

export interface ProjectEdgeContextMenuEvent {
type: 'ProjectEdgeContextMenu';
id: string;
data: ProjectEdgeElementData;
virtualElement: VirtualElement;
}

export interface CompositeProjectEdgeContextMenuEvent {
type: 'CompositeProjectEdgeContextMenu';
id: string;
data: CompositeProjectEdgeElementData;
virtualElement: VirtualElement;
}

export interface EmptyClickEvent {
type: 'EmptyClick';
}

export interface PostRenderEvent {
type: 'PostRender';
cy: Core;
}

export type RenderGraphEvent = CompositeProjectNodeDblClickEvent | ProjectNodeContextMenuEvent | CompositeProjectNodeContextMenuEvent | ProjectEdgeContextMenuEvent | CompositeProjectEdgeContextMenuEvent | EmptyClickEvent | PostRenderEvent;
`

@nx/graph/projects

This entry point deals with handling ProjectGraph information.

`tsx
const { containerRef, graphClient, send } = useProjectGraphClient({ renderPlatform: 'nx-cloud' });
`

- containerRef is used to assign to a div element where the graph will be rendered.
- graphClient can be used with other graph components like useRenderGraphEvent
- send is a function that can send events that the ProjectGraphClient handles

@nx/graph/tasks

This entry point deals with handling TaskGraph information.

`tsx
const { containerRef, graphClient, send } = useTaskGraphClient({ renderPlatform: 'nx-cloud' });
`

- containerRef is used to assign to a div element where the graph will be rendered.
- graphClient can be used with other graph components like useRenderGraphEvent
- send is a function that can send events that the TaskGraphClient handles

@nx/graph/ui

This entry point contains various graph UI components

$3

A static background component.

`tsx