@linkurious/ogma-react/index.d.ts

A light adaptation of Ogma for React application

import { CanvasLayer as OgmaCanvasLayer, Edge, EdgeAttributesValue, EdgeFilter as EdgeFilterTransformation, EdgeFilterOptions, EdgeGrouping as EdgeGroupingTransformation, EdgeGroupingOptions, EdgeSelector, EventTypes, GeoModeOptions, HoverEdgeOptions, HoverNodeOptions, Layer as OgmaLayer, NeighborGeneration as NeighborGenerationTransformation, NeighborGenerationOptions, NeighborMerging as NeighborMergingTransformation, NeighborMergingOptions, Node as Node$1, NodeAttributesValue, NodeCollapsing as NodeCollapsingTransformation, NodeCollapsingOptions, NodeFilter as NodeFilterTransformation, NodeFilterOptions, NodeGrouping as NodeGroupingTransformation, NodeGroupingOptions, NodeSelector, Ogma as OgmaLib, Options as OgmaOptions, Overlay as OverlayLayer, Point, RawGraph, Size, StyleClass as OgmaStyleClass, StyleClassDefinition, StyleRule, Theme, Transformation } from '@linkurious/ogma';
import { ReactElement, ReactNode, Ref, RefAttributes } from 'react';

export type EventNames<ND, ED> = keyof EventTypes<ND, ED>;
export type EventHandlers<ND, ED> = {
	[K in EventNames<ND, ED>]?: (event: EventTypes<ND, ED>[K]) => void;
};
export type EventHandlerProps<T> = {
	[K in keyof T as `on${Capitalize<string & K>}`]?: (event: T[K]) => void;
};
export declare function forEachEventHandler<ND, ED>(handlers: EventHandlers<ND, ED>, callback: <K extends EventNames<ND, ED>>(eventName: K, handler: (event: EventTypes<ND, ED>[K]) => void) => void): void;
export declare function getEventNameFromProp<ND, ED>(propName: string): keyof EventTypes<ND, ED> | null;
export interface OgmaProps<ND, ED> extends EventHandlerProps<EventTypes<ND, ED>> {
	options?: Partial<OgmaOptions>;
	onReady?: (ogma: OgmaLib<ND, ED>) => void;
	graph?: RawGraph<ND, ED>;
	children?: ReactNode;
	theme?: Theme<ND, ED>;
	className?: string;
}
export type OgmaComponentType = <ND, ED>(props: OgmaProps<ND, ED> & {
	ref?: Ref<OgmaLib<ND, ED>>;
}) => ReactElement | null;
export declare const Ogma: OgmaComponentType;
/**
 * This is the hook that allows you to access the Ogma instance.
 * It should only be used in the context of the `Ogma` component.
 */
export declare const useOgma: <ND, ED>() => OgmaLib<ND, ED>;
export declare function useEvent<ND, ED, K extends EventNames<ND, ED>>(eventName: K, handler: (event: EventTypes<ND, ED>[K]) => void, dependencies?: any[]): (event: EventTypes<ND, ED>[K]) => void;
export interface NodeRuleProps<ND, ED> {
	selector?: NodeSelector<ND, ED>;
	attributes: NodeAttributesValue<ND, ED>;
}
export interface HoveredNodeProps<ND, ED> {
	attributes: HoverNodeOptions<ND, ED>;
	fullOverwrite?: boolean;
}
export interface SelectedNodeProps<ND, ED> {
	attributes: NodeAttributesValue<ND, ED>;
	fullOverwrite?: boolean;
}
export type NodeStyleComponentType = <ND, ED>(props: NodeRuleProps<ND, ED> & {
	ref?: Ref<StyleRule<ND, ED>>;
}) => ReactElement | null;
/**
 * This component wraps around Ogma [`NodeStyle` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addNodeRule). It allows you to add a node style rule to the
 * Ogma instance to calculate the visual appearance attributes of the nodes.
 */
export declare const NodeStyle: NodeStyleComponentType & {
	Hovered: <ND = unknown, ED = unknown>({ attributes, fullOverwrite }: HoveredNodeProps<ND, ED>) => null;
	Selected: <ND = unknown, ED = unknown>({ attributes, fullOverwrite }: SelectedNodeProps<ND, ED>) => null;
};
export interface EdgeRuleProps<ND, ED> {
	selector?: EdgeSelector<ED, ND>;
	attributes: EdgeAttributesValue<ED, ND>;
}
export interface HoveredEdgeProps<ND, ED> {
	attributes: HoverEdgeOptions<ED, ND>;
	fullOverwrite?: boolean;
}
export interface SelectedEdgeProps<ND, ED> {
	attributes: EdgeAttributesValue<ED, ND>;
	fullOverwrite?: boolean;
}
export type EdgeStyleComponentType = <ND, ED>(props: EdgeRuleProps<ND, ED> & {
	ref?: Ref<StyleRule<ND, ED>>;
}) => ReactElement | null;
/**
 * This component wraps around Ogma [`EdgeStyle` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addEdgeRule). It allows you to add a node style rule to the
 * Ogma instance to calculate the visual appearance attributes of the edges.
 */
export declare const EdgeStyle: EdgeStyleComponentType & {
	Hovered: <ND = unknown, ED = unknown>({ attributes, fullOverwrite }: HoveredEdgeProps<ND, ED>) => null;
	Selected: <ND = unknown, ED = unknown>({ attributes, fullOverwrite }: SelectedEdgeProps<ND, ED>) => null;
};
export interface StyleProps<ND, ED> extends StyleClassDefinition<ND, ED> {
	name: string;
}
export type StyleClassComponentType = <ND, ED>(props: StyleProps<ND, ED> & {
	ref?: Ref<OgmaStyleClass<ND, ED>>;
}) => ReactElement | null;
/**
 * This component wraps around Ogma [`StyleClass`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addClassStyle) API. It allows you to add a class style to the
 * Ogma instance to calculate the visual appearance attributes of the nodes and edges.
 */
export declare const StyleClass: StyleClassComponentType;
export interface TransformationContext {
}
export interface TransformationProps<ND, ED, C extends TransformationContext = TransformationContext> {
	disabled?: boolean;
	onEnabled?: (transformation: Transformation<ND, ED, C>) => void;
	onDisabled?: (transformation: Transformation<ND, ED, C>) => void;
	onDestroyed?: (transformation: Transformation<ND, ED, C>) => void;
	onUpdated?: (transformation: Transformation<ND, ED, C>) => void;
	onSetIndex?: (transformation: Transformation<ND, ED, C>, index: number) => void;
}
export type OgmaInstance<ND, ED> = ReturnType<typeof useOgma<ND, ED>>;
export type AddDrillDownFn<ND, ED> = OgmaInstance<ND, ED>["transformations"]["addDrillDown"];
export type Drilldown<ND, ED> = ReturnType<AddDrillDownFn<ND, ED>>;
export type DrilldownOptions<ND, ED> = NonNullable<Parameters<OmitThisParameter<AddDrillDownFn<ND, ED>>>[0]>;
export interface NodeDrilldownPropsBase<ND, ED> extends DrilldownOptions<ND, ED>, TransformationProps<ND, ED, DrilldownOptions<ND, ED>> {
}
/**
 * Public props: we intentionally hide `enabled` and expose `disabled` (from TransformationProps).
 */
export type NodeDrilldownProps<ND, ED> = Omit<NodeDrilldownPropsBase<ND, ED>, "enabled">;
export type NodeDrilldownComponentType = <ND = unknown, ED = unknown>(props: NodeDrilldownProps<ND, ED> & RefAttributes<Drilldown<ND, ED> | null>) => ReactElement | null;
export declare const NodeDrilldown: NodeDrilldownComponentType;
export interface NodeGroupingPropsC<ND, ED> extends NodeGroupingOptions<ND, ED>, TransformationProps<ND, ED, NodeGroupingOptions<ND, ED>> {
}
export type NodeGroupingProps<ND, ED> = Omit<NodeGroupingPropsC<ND, ED>, "enabled">;
export type NodeGroupingType = <ND, ED>(props: NodeGroupingProps<ND, ED> & {
	ref?: Ref<NodeGroupingTransformation<ND, ED>>;
}) => ReactElement | null;
export declare const NodeGrouping: NodeGroupingType;
export interface EdgeGroupingPropsC<ED, ND> extends EdgeGroupingOptions<ED, ND>, TransformationProps<ED, ND, EdgeGroupingOptions<ED, ND>> {
}
export type EdgeGroupingProps<ND, ED> = Omit<EdgeGroupingPropsC<ND, ED>, "enabled">;
export type EdgeGroupingType = <ND, ED>(props: EdgeGroupingProps<ND, ED> & {
	ref?: Ref<EdgeGroupingTransformation<ND, ED>>;
}) => ReactElement | null;
/**
 * Edge grouping transformation component. It wraps around Ogma [`EdgeGrouping` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeGrouping).
 */
export declare const EdgeGrouping: EdgeGroupingType;
export interface NodeCollapsingPropsC<ND, ED> extends NodeCollapsingOptions<ND, ED>, TransformationProps<ND, ED, NodeCollapsingOptions<ND, ED>> {
}
export type NodeCollapsingProps<ND, ED> = Omit<NodeCollapsingPropsC<ND, ED>, "enabled">;
export declare function NodeCollapsingComponent<ND = unknown, ED = unknown>(props: NodeCollapsingProps<ND, ED>, ref: Ref<NodeCollapsingTransformation<ND, ED>>): null;
export type NodeCollapsingType = <ND, ED>(props: NodeCollapsingProps<ND, ED> & {
	ref?: Ref<NodeCollapsingTransformation<ND, ED>>;
}) => ReactElement | null;
export declare const NodeCollapsing: NodeCollapsingType;
export interface NeighborMergingPropsC<ND, ED> extends NeighborMergingOptions<ND, ED>, TransformationProps<ND, ED, NeighborMergingOptions<ND, ED>> {
}
export type NeighborMergingProps<ND, ED> = Omit<NeighborMergingPropsC<ND, ED>, "enabled">;
export type NeighborMergingType = <ND, ED>(props: NeighborMergingProps<ND, ED> & {
	ref?: Ref<NeighborMergingTransformation<ND, ED>>;
}) => ReactElement | null;
export declare const NeighborMerging: NeighborMergingType;
export interface NeighborGenerationPropsC<ND, ED> extends NeighborGenerationOptions<ND, ED>, TransformationProps<ND, ED, NeighborGenerationOptions<ND, ED>> {
}
export type NeighborGenerationProps<ND, ED> = Omit<NeighborGenerationPropsC<ND, ED>, "enabled">;
export type NeighborGenerationType = <ND, ED>(props: NeighborGenerationProps<ND, ED> & {
	ref?: Ref<NeighborGenerationTransformation<ND, ED>>;
}) => ReactElement | null;
export declare const NeighborGeneration: NeighborGenerationType;
export interface EdgeFilterPropsC<ND, ED> extends EdgeFilterOptions<ND, ED>, TransformationProps<ND, ED, EdgeFilterOptions<ND, ED>> {
}
export type EdgeFilterProps<ND, ED> = Omit<EdgeFilterPropsC<ND, ED>, "enabled">;
export type EdgeFilterType = <ND, ED>(props: EdgeFilterProps<ND, ED> & {
	ref?: Ref<EdgeFilterTransformation<ND, ED>>;
}) => ReactElement | null;
/**
 * Edge Filter transformation component. It wraps around Ogma [`EdgeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeFilter).
 */
export declare const EdgeFilter: EdgeFilterType;
export interface NodeFilterPropsC<ED, ND> extends NodeFilterOptions<ED, ND>, TransformationProps<ND, ED, NodeFilterOptions<ED, ND>> {
}
export type NodeFilterProps<ND, ED> = Omit<NodeFilterPropsC<ND, ED>, "enabled">;
export type NodeFilterType = <ND, ED>(props: NodeFilterProps<ND, ED> & {
	ref?: Ref<NodeFilterTransformation<ND, ED>>;
}) => ReactElement | null;
/**
 * Edge Filter transformation component. It wraps around Ogma [`NodeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNodeFilter).
 */
declare const NodeFilter$1: NodeFilterType;
export type Placement = "top" | "bottom" | "left" | "right" | "center";
export type PositionGetter = (ogma: OgmaLib) => Point | null;
export type TooltipEventFunctions = {
	backgroundClick: (target: Point) => ReactNode;
	backgroundDoubleclick: (target: Point) => ReactNode;
	backgroundRightclick: (target: Point) => ReactNode;
	edgeClick: (target: Edge) => ReactNode;
	edgeDoubleclick: (target: Edge) => ReactNode;
	edgeHover: (target: Edge) => ReactNode;
	edgeRightclick: (target: Edge) => ReactNode;
	nodeClick: (target: Node$1) => ReactNode;
	nodeDoubleclick: (target: Node$1) => ReactNode;
	nodeHover: (target: Node$1) => ReactNode;
	nodeRightclick: (target: Node$1) => ReactNode;
};
export interface PopupProps {
	/** Overlay content */
	content?: string | ReactElement;
	/** Overlay position */
	position: Point | PositionGetter;
	/** Overlay size */
	size?: Size;
	/** Open state, whether or not the overlay should be shown  */
	isOpen?: boolean;
	/** Close button */
	closeButton?: ReactNode | null;
	/** Close callback */
	onClose?: () => void;
	/** Overlay placement relative to the position */
	placement?: Placement;
	/** Close on Escape key */
	closeOnEsc?: boolean;
	/** Overlay container className */
	popupClass?: string;
	/** Overlay content className */
	contentClass?: string;
	/** Overlay body className */
	popupBodyClass?: string;
	/** Close button className */
	closeButtonClass?: string;
	children?: ReactNode;
}
export type PopupType = <_ND, _ED>(props: PopupProps & {
	ref?: Ref<OverlayLayer>;
}) => ReactElement | null;
/**
 * A popup component.
 * Use it to display information statically on top of your visualisation
 * or to display a modal dialog.
 */
export declare const Popup: PopupType;
export interface TooltipProps<K extends keyof TooltipEventFunctions> {
	eventName: K;
	/** Overlay position if static */
	position?: Point;
	/** Overlay size */
	size?: Size;
	/** Overlay placement relative to the position */
	placement?: Placement;
	bodyClass?: string;
	/** The offset of the tooltip */
	translate?: {
		x: number;
		y: number;
	};
	/** The content of the tooltip, can be a function that returns a ReactNode */
	children?: ReactNode | TooltipEventFunctions[K];
}
export type TooltipComponentType = <_ND, _ED, K extends keyof TooltipEventFunctions>(props: TooltipProps<K> & RefAttributes<OverlayLayer>) => ReactElement | null;
/**
 * Tooltip layer is a custom component to render some dynamic data on top of
 * your visualisation. The position adapts to the target of the event (or is static)
 * and is customisable. See in in action in our
[example](linkurious.github.io/ogma-react/)
 */
export declare const Tooltip: TooltipComponentType;
export interface CanvasLayerProps {
	/** Rendering function */
	render: (ctx: CanvasRenderingContext2D) => void;
	/** Whether or not the layer should be moved with the graph */
	isStatic?: boolean;
	/** Avoid redraw */
	noClear?: boolean;
	/** Layer index */
	index?: number;
	/** Layer visibility */
	visible?: boolean;
}
export type CanvasLayerType = <_ND, _ED>(props: CanvasLayerProps & {
	ref?: Ref<OgmaCanvasLayer>;
}) => ReactElement | null;
/**
 * A canvas layer that can be added to the Ogma instance. See the [Ogma documentation](https://doc.linkurio.us/ogma/latest/api.html#Ogma-layers-addCanvasLayer) for more information.
 *
 * Useful to perform drawings in sync with the view. In the drawing function you
 * are given the CanvasRenderingContext2D, that is automatically scaled and
 * translated to be in sync with the graph. So you can simply use graph
 * coordinates to draw shapes and text in it. See our "Layers" examples for
 * the code snippets.
 */
export declare const CanvasLayer: CanvasLayerType;
export interface OverlayProps<ND, ED> {
	/** Overlay position */
	position: Point | ((ogma: OgmaLib<ND, ED>) => Point | null);
	/** Overlay size */
	size?: Size;
	/** Overlay index */
	index?: number;
	/** Overlay children */
	children?: ReactNode;
	/** Overlay container className */
	className?: string;
	/** Whether the overlay should be scaled with the graph */
	scaled?: boolean;
}
export type OverlayType = <ND, ED>(props: OverlayProps<ND, ED> & {
	ref?: Ref<OverlayLayer>;
}) => ReactElement | null;
export declare const Overlay: OverlayType;
export interface LayerProps {
	/** Layer children */
	children?: ReactNode;
	/** Layer container className */
	className?: string;
	/** Layer index */
	index?: number;
}
export type LayerType = <_ND, _ED>(props: LayerProps & {
	ref?: Ref<OgmaLayer>;
}) => ReactElement | null;
export declare const Layer: LayerType;
export interface GeoModeProps extends GeoModeOptions {
	enabled?: boolean;
}
export declare function Geo({ enabled, ...options }: GeoModeProps): null;

export {
	EdgeStyle as EdgeStyleRule,
	NodeFilter$1 as NodeFilter,
	NodeStyle as NodeStyleRule,
};

export {};