@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
123 lines (122 loc) • 3.85 kB
TypeScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import type NVL from '@neo4j-nvl/base';
import { type Node, type Relationship } from '@neo4j-nvl/base';
export type GraphSelection = {
nodeIds: string[];
relationshipIds: string[];
};
export type Sidepanel = {
children: React.ReactNode;
isSidePanelOpen: boolean;
setIsSidePanelOpen?: (isSidePanelOpen: boolean) => void;
sidePanelWidth?: number;
onSidePanelResize: (width: number) => void;
minWidth?: number;
};
export type NvlGraph = {
nodes: Node[];
rels: Relationship[];
dataLookupTable: DataLookupTable;
};
export type GraphItemMetaData = {
totalCount: number;
mostCommonColor: string;
};
export type DataLookupTable = {
nodes: Record<string, NodeData>;
relationships: Record<string, RelData>;
labels: string[];
types: string[];
labelMetaData: Record<string, GraphItemMetaData>;
typeMetaData: Record<string, GraphItemMetaData>;
};
export type PortableProperty = {
stringified: string;
type: string;
};
export type NodeData = {
labelsSorted: string[];
properties: Record<string, PortableProperty>;
color: string;
id: string;
};
export type RelData = {
type: string;
properties: Record<string, PortableProperty>;
color: string;
id: string;
};
export type NeoNode = Node & {
properties: Record<string, PortableProperty>;
labels: string[];
};
export type NeoRel = Relationship & {
properties: Record<string, PortableProperty>;
type: string;
};
/**
* Data that is shared across the graph visualization component.
*
* @see {@link useGraphVisualizationContext}
* @alpha
*/
export type GraphVisualizationContextData = {
nvlInstance: React.MutableRefObject<NVL | null>;
sidepanel: Sidepanel | null;
gesture: Gesture;
setGesture?: (gesture: Gesture) => void;
interactionMode: InteractionMode;
nvlGraph: NvlGraph;
selected: GraphSelection;
};
export declare const GraphVisualizationContext: import("react").Context<GraphVisualizationContextData | undefined>;
/**
* Hook to access the graph visualization context.
*
* This hook is used to implement custom UI components like buttons, panels, and controls
* that need access to data and functionality from the graph visualization component.
* @see {@link GraphVisualizationContextData}
*
* @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data
* @throws Error if used outside of a GraphVisualizationContext provider
*
* @example
* ```tsx
* const NodeLoggerButton = () => {
* const { selected } = useGraphVisualizationContext();
*
* const handleClick = () => {
* console.log('Selected nodes:', selected.nodeIds);
* };
*
* return (
* <button onClick={handleClick}>
* Log Selected Nodes ({selected.nodeIds.length})
* </button>
* );
* };
* ```
* @alpha
*/
export declare const useGraphVisualizationContext: () => GraphVisualizationContextData;
export type Gesture = 'single' | 'box' | 'lasso';
export type InteractionMode = 'select' | 'draw' | 'edit-text' | 'pan' | 'drag' | 'none';