@neo4j-ndl/react/lib/types/graph-visualization/graph-visualization.d.ts

React implementation of Neo4j Design System

/**
 *
 *  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 InteractiveNvlWrapperProps } from '@neo4j-nvl/react';
import React from 'react';
import { type PolymorphicRef } from '../_common/types';
import { type Gesture, type GraphSelection, type InteractionMode, type NeoNode, type NeoRel, type Sidepanel } from './graph-visualization-context';
export declare const DEFAULT_NVL_OPTIONS: {
    disableTelemetry: boolean;
    disableWebGL: boolean;
    maxZoom: number;
    minZoom: number;
    relationshipThreshold: number;
    useWebGL: boolean;
};
export type GraphVisualizationProps<T extends React.ElementType> = {
    nvlRef?: React.RefObject<NVL>;
    sidepanel?: Sidepanel | null;
    topRightIsland?: React.ReactNode;
    bottomLeftIsland?: React.ReactNode;
    bottomRightIsland?: React.ReactNode;
    topLeftIsland?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    gesture?: Gesture;
    setGesture?: (gesture: Gesture) => void;
    selected?: GraphSelection;
    setSelected?: (newSelection: GraphSelection) => void;
    interactionMode?: InteractionMode;
    setInteractionMode?: (interactionMode: InteractionMode) => void;
    nodes: NeoNode[];
    rels: NeoRel[];
    highlightedNodeIds?: string[];
    highlightedRelationshipIds?: string[];
    as?: T;
    ref?: PolymorphicRef<T>;
    htmlAttributes?: React.HTMLAttributes<T>;
} & InteractiveNvlWrapperProps;
/**
 * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.
 *
 * @remarks
 * This component provides a complete graph visualization solution with built-in interaction modes,
 * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)
 * with additional UI controls and state management.
 *
 * The component supports various interaction modes including single selection, box selection, and lasso selection.
 * It also provides customizable UI islands for placing controls at different corners of the visualization.
 *
 * @example
 * Basic usage:
 * ```tsx
 * <GraphVisualization
 *   nodes={nodes}
 *   rels={relationships}
 *   selected={selection}
 *   setSelected={setSelection}
 * />
 * ```
 *
 * @example
 * With custom controls:
 * ```tsx
 * <GraphVisualization
 *   nodes={nodes}
 *   rels={relationships}
 *   topRightIsland={<CustomControls />}
 *   sidepanel={{
 *     contents: <CustomSidepanel />,
 *     isSidePanelOpen: true,
 *     setIsSidePanelOpen: setSidepanelOpen
 *     sidePanelWidth: 400,
 *     onSidePanelResize: setSidepanelWidth,
 *   }}
 * />
 * ```
 *
 * @example
 * With search highlighting:
 * ```tsx
 * <GraphVisualization
 *   nodes={nodes}
 *   rels={relationships}
 *   // undefined = no highlighting (default behavior)
 *   // empty array = no search matches (dims all nodes)
 *   // array with IDs = highlight only those items
 *   highlightedNodeIds={searchResults.nodeIds}
 *   highlightedRelationshipIds={searchResults.relationshipIds}
 * />
 * ```
 *
 * @param props - {@link GraphVisualizationProps}
 * @returns A React component that renders an interactive graph visualization
 *
 * @alpha
 */
export declare function GraphVisualization<T extends React.ElementType = 'div'>({ nvlRef: rawNvlRef, nvlCallbacks, nvlOptions, sidepanel: rawSidepanel, nodes: rawNodes, rels: rawRels, highlightedNodeIds, highlightedRelationshipIds, topLeftIsland, topRightIsland, bottomLeftIsland, bottomRightIsland, gesture, setGesture, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks, className, style, htmlAttributes, ref, as, ...restProps }: GraphVisualizationProps<T>): import("react/jsx-runtime").JSX.Element;
export declare namespace GraphVisualization {
    var ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var ZoomOutButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var ZoomToFitButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var ToggleSidePanelButton: ({ className, htmlAttributes, style, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var DownloadButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var BoxSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var LassoSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
    var SingleSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
        className?: string;
        style?: React.CSSProperties;
        htmlAttributes?: import("../_common/types").HtmlAttributes<"button">;
        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
    }) => import("react/jsx-runtime").JSX.Element;
}