React Ogma component

Controls

57 | toggleNodeGrouping(!nodeGrouping)} 61 | /> 62 |

64 |

Node size

65 | { 71 | setNodeSize(value); 72 | setNodeSizeLocal(value); 73 | }} 74 | /> 75 |

77 |

Edge width

78 | { 84 | setEdgeWidth(value); 85 | setEdgeWidthLocal(value); 86 | }} 87 | /> 88 |

90 | setOutlines(!outlines)} 93 | label="Node outlines" 94 | /> 95 |

97 | setGeoEnabled(!geoEnabled)} 100 | label="Geo mode" 101 | /> 102 |

104 |

addNode()}> 105 | Add node 106 |

107 |

109 | 114 |

`; 70 | const newCoords = { x: -9999, y: -9999 }; 71 | setCoords(newCoords); 72 | const tooltip = ogma.layers.addOverlay({ 73 | position: newCoords, 74 | element: wrapperHtml, 75 | scaled: false, 76 | size 77 | }); 78 | setLayer(tooltip); 79 | return () => { 80 | tooltip.destroy(); 81 | }; 82 | }, []); 83 | 84 | // content or position has changed 85 | useEffect(() => { 86 | const newContent = getContent(ogma, coords!, content, children); 87 | if (layer) { 88 | if (newContent !== html) { 89 | layer.element.firstElementChild!.innerHTML = newContent; 90 | setHtml(newContent); 91 | setDimensions({ 92 | width: layer.element.offsetWidth, 93 | height: layer.element.offsetHeight 94 | }); 95 | } 96 | const newCoords = getPosition(position, ogma); 97 | if (coords !== newCoords) { 98 | setCoords(newCoords); 99 | } 100 | if (visible) layer.show(); 101 | else layer.hide(); 102 | } 103 | raf.current = requestAnimationFrame(() => { 104 | if (layer && layer.element && coords && dimensions) { 105 | layer.element.className = getContainerClass( 106 | tooltipClass, 107 | getAdjustedPlacement(coords, placement, dimensions, ogma) 108 | ); 109 | layer.setPosition(coords); // throttledSetPosition(coords); 110 | } 111 | }); 112 | 113 | return () => cancelAnimationFrame(raf.current as number); 114 | }, [children, content, position, visible]); 115 | 116 | return null; 117 | }; 118 | 119 | /** 120 | * Tooltip layer is a custom component to render some dynamic data on top of 121 | * your visualisation. The position and contents can be changed quickly and it 122 | * will adapt the placement to the viewport size. See in in action in our 123 | * [example](linkurious.github.io/ogma-react/) 124 | */ 125 | export const Tooltip = forwardRef(TooltipComponent); 126 | -------------------------------------------------------------------------------- /src/overlay/types.ts: -------------------------------------------------------------------------------- 1 | import { ReactElement } from "react"; 2 | import OgmaLib, { Point } from "@linkurious/ogma"; 3 | 4 | export type Placement = "top" | "bottom" | "left" | "right" | "center"; 5 | 6 | export type PositionGetter = (ogma: OgmaLib) => Point | null; 7 | 8 | export type Content = 9 | | string 10 | | ReactElement 11 | | ((ogma: OgmaLib, position: Point | null) => ReactElement); 12 | -------------------------------------------------------------------------------- /src/overlay/utils.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode, ReactElement } from "react"; 2 | import { renderToString } from "react-dom/server"; 3 | import OgmaLib, { Point, Size } from "@linkurious/ogma"; 4 | import { Content, PositionGetter, Placement } from "./types"; 5 | 6 | export function getContent( 7 | ogma: OgmaLib, 8 | position: Point, 9 | content?: Content, 10 | children?: ReactNode 11 | ): string { 12 | if (typeof content === "string") return content; 13 | else if (typeof content === "function") 14 | return renderToString(content(ogma, position)); 15 | return renderToString(children as any); 16 | } 17 | 18 | export function getPosition(position: Point | PositionGetter, ogma: OgmaLib) { 19 | if (typeof position === "function") return position(ogma); 20 | return position; 21 | } 22 | 23 | export const getContainerClass = (popupClass: string, placement: Placement) => 24 | `${popupClass} ${popupClass}--${placement}`; 25 | 26 | export function getCloseButton( 27 | closeButton: string | ReactNode | null = "×", 28 | closeButtonClass: string 29 | ) { 30 | if (closeButton) { 31 | const closeButtonElement = 32 | typeof closeButton === "string" 33 | ? closeButton 34 | : renderToString(closeButton as ReactElement); 35 | return `

${closeButtonElement}

`; 36 | } 37 | return ""; 38 | } 39 | 40 | export function getAdjustedPlacement( 41 | coords: Point, 42 | placement: Placement, 43 | dimensions: Size, 44 | ogma: OgmaLib 45 | ): Placement { 46 | const { width: screenWidth, height: screenHeight } = ogma.view.getSize(); 47 | const { x, y } = ogma.view.graphToScreenCoordinates(coords); 48 | let res = placement; 49 | const { width, height } = dimensions; 50 | 51 | if (placement === "left" && x - width < 0) res = "right"; 52 | else if (placement === "right" && x + width > screenWidth) res = "left"; 53 | else if (placement === "bottom" && y + height > screenHeight) res = "top"; 54 | else if (placement === "top" && y - height < 0) res = "bottom"; 55 | 56 | if (res === "right" || res === "left") { 57 | if (y + height / 2 > screenHeight) res = "top"; 58 | else if (y - height / 2 < 0) res = "bottom"; 59 | } else { 60 | if (x + width / 2 > screenWidth) res = "left"; 61 | else if (x - width / 2 < 0) res = "right"; 62 | } 63 | 64 | return res; 65 | } 66 | -------------------------------------------------------------------------------- /src/styles/classStyle.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | StyleClassDefinition, 3 | StyleClass as OgmaStyleClass 4 | } from "@linkurious/ogma"; 5 | import { useOgma } from "../context"; 6 | import { 7 | forwardRef, 8 | Ref, 9 | useEffect, 10 | useImperativeHandle, 11 | useState, 12 | memo 13 | } from "react"; 14 | 15 | interface StyleProps extends StyleClassDefinition { 16 | name: string; 17 | } 18 | 19 | const styleClassComponent = ( 20 | { 21 | name, 22 | edgeAttributes, 23 | edgeDependencies, 24 | edgeOutput, 25 | nodeAttributes, 26 | nodeDependencies, 27 | nodeOutput 28 | }: StyleProps, 29 | ref?: Ref> 30 | ) => { 31 | const ogma = useOgma(); 32 | const [styleClass, setStyleClass] = useState | null>( 33 | null 34 | ); 35 | 36 | useImperativeHandle(ref, () => styleClass as OgmaStyleClass, [ 37 | styleClass 38 | ]); 39 | 40 | useEffect(() => { 41 | const style = { 42 | edgeAttributes, 43 | edgeDependencies, 44 | edgeOutput, 45 | nodeAttributes, 46 | nodeDependencies, 47 | nodeOutput 48 | }; 49 | 50 | async function setup() { 51 | const newStyleClass = ogma.styles.createClass({ name, ...style }); 52 | await ogma.view.afterNextFrame(); 53 | setStyleClass(newStyleClass); 54 | } 55 | setup(); 56 | 57 | return () => { 58 | async function cleanup() { 59 | // Only destroy if we have a reference and it still exists 60 | const currentClass = ogma.styles.getClass(name); 61 | if (currentClass) await currentClass.destroy(); 62 | setStyleClass(null); 63 | } 64 | cleanup(); 65 | }; 66 | }, []); 67 | 68 | useEffect(() => { 69 | if (!styleClass) return; 70 | styleClass.update({ 71 | edgeAttributes, 72 | edgeDependencies, 73 | edgeOutput, 74 | nodeAttributes, 75 | nodeDependencies, 76 | nodeOutput 77 | }); 78 | }, [ 79 | edgeAttributes, 80 | edgeDependencies, 81 | edgeOutput, 82 | nodeAttributes, 83 | nodeDependencies, 84 | nodeOutput 85 | ]); 86 | 87 | return null; 88 | }; 89 | 90 | const arePropsEqual = ( 91 | prev: StyleProps, 92 | next: StyleProps 93 | ) => { 94 | return ( 95 | prev.name === next.name && 96 | prev.edgeAttributes === next.edgeAttributes && 97 | prev.edgeDependencies === next.edgeDependencies && 98 | prev.edgeOutput === next.edgeOutput && 99 | prev.nodeAttributes === next.nodeAttributes && 100 | prev.nodeDependencies === next.nodeDependencies && 101 | prev.nodeOutput === next.nodeOutput 102 | ); 103 | }; 104 | 105 | /** 106 | * 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 107 | * Ogma instance to calculate the visual appearance attributes of the nodes and edges. 108 | */ 109 | export const StyleClass = memo(forwardRef(styleClassComponent), arePropsEqual); 110 | -------------------------------------------------------------------------------- /src/styles/edgeStyle.tsx: -------------------------------------------------------------------------------- 1 | import OgmaLib, { 2 | EdgeSelector, 3 | EdgeAttributesValue, 4 | StyleRule 5 | } from "@linkurious/ogma"; 6 | import { 7 | useEffect, 8 | useState, 9 | Ref, 10 | forwardRef, 11 | useImperativeHandle 12 | } from "react"; 13 | import { useOgma } from "../context"; 14 | 15 | interface EdgeRuleProps { 16 | selector?: EdgeSelector; 17 | attributes: EdgeAttributesValue; 18 | } 19 | 20 | const EdgeStyleRuleComponent = ( 21 | { selector, attributes }: EdgeRuleProps, 22 | ref?: Ref> 23 | ) => { 24 | const ogma = useOgma() as OgmaLib; 25 | const [rule, setRule] = useState>(); 26 | 27 | useImperativeHandle(ref, () => rule as StyleRule, [rule]); 28 | 29 | useEffect(() => { 30 | //if (rule) rule.destroy(); 31 | const edgeRule = selector 32 | ? ogma.styles.addEdgeRule(selector, attributes) 33 | : ogma.styles.addEdgeRule(attributes); 34 | setRule(edgeRule); 35 | return () => { 36 | edgeRule.destroy(); 37 | setRule(undefined); 38 | }; 39 | }, [selector, attributes]); 40 | return null; 41 | }; 42 | 43 | /** 44 | * 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 45 | * Ogma instance to calculate the visual appearance attributes of the edges. 46 | */ 47 | export const EdgeStyleRule = forwardRef(EdgeStyleRuleComponent); 48 | -------------------------------------------------------------------------------- /src/styles/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./nodeStyle"; 2 | export * from "./edgeStyle"; 3 | export * from "./classStyle"; -------------------------------------------------------------------------------- /src/styles/nodeStyle.tsx: -------------------------------------------------------------------------------- 1 | import OgmaLib, { 2 | NodeSelector, 3 | NodeAttributesValue, 4 | StyleRule 5 | } from "@linkurious/ogma"; 6 | import { 7 | useEffect, 8 | Ref, 9 | forwardRef, 10 | useState, 11 | useImperativeHandle 12 | } from "react"; 13 | import { useOgma } from "../context"; 14 | 15 | interface NodeRuleProps { 16 | selector?: NodeSelector; 17 | attributes: NodeAttributesValue; 18 | } 19 | 20 | const NodeStyleRuleComponent = ( 21 | { selector, attributes }: NodeRuleProps, 22 | ref?: Ref> 23 | ) => { 24 | const ogma = useOgma() as OgmaLib; 25 | const [rule, setRule] = useState>(); 26 | 27 | useImperativeHandle(ref, () => rule as StyleRule, [rule]); 28 | 29 | useEffect(() => { 30 | const nodeRule = selector 31 | ? ogma.styles.addNodeRule(selector, attributes) 32 | : ogma.styles.addNodeRule(attributes); 33 | setRule(nodeRule); 34 | return () => { 35 | nodeRule.destroy(); 36 | setRule(undefined); 37 | }; 38 | }, [selector, attributes]); 39 | return null; 40 | }; 41 | 42 | /** 43 | * 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 44 | * Ogma instance to calculate the visual appearance attributes of the nodes. 45 | */ 46 | export const NodeStyleRule = forwardRef(NodeStyleRuleComponent); 47 | -------------------------------------------------------------------------------- /src/transformations/edgeFilter.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | EdgeFilterOptions, 10 | EdgeFilter as EdgeFilterTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface EdgeFilterProps 17 | extends EdgeFilterOptions, 18 | TransformationProps> {} 19 | 20 | function EdgeFilterComponent( 21 | props: EdgeFilterProps, 22 | ref?: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addEdgeFilter({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | useTransformationCallbacks(props, newTransformation, ogma); 36 | setTransformation(newTransformation); 37 | return () => { 38 | newTransformation.destroy(); 39 | setTransformation(undefined); 40 | }; 41 | }, []); 42 | 43 | useEffect(() => { 44 | if (transformation) { 45 | toggle(transformation, !!props.disabled, props.duration); 46 | } 47 | }, [props.disabled]); 48 | 49 | useEffect(() => { 50 | transformation?.setOptions(props); 51 | }, [props.criteria]); 52 | 53 | return null; 54 | } 55 | 56 | /** 57 | * Edge Filter transformation component. It wraps around Ogma [`EdgeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeFilter). 58 | */ 59 | export const EdgeFilter = forwardRef(EdgeFilterComponent); 60 | -------------------------------------------------------------------------------- /src/transformations/edgeGrouping.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | EdgeGroupingOptions, 10 | EdgeGrouping as EdgeGroupingTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface EdgeGroupingProps 17 | extends EdgeGroupingOptions, 18 | TransformationProps> {} 19 | 20 | function EdgeGroupingComponent( 21 | props: EdgeGroupingProps, 22 | ref?: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addEdgeGrouping({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | // @ts-expect-error transformation is generic 36 | useTransformationCallbacks(props, newTransformation, ogma); 37 | setTransformation(newTransformation); 38 | return () => { 39 | newTransformation.destroy(); 40 | setTransformation(undefined); 41 | }; 42 | }, []); 43 | 44 | useEffect(() => { 45 | if (transformation) { 46 | toggle(transformation, !!props.disabled, props.duration); 47 | } 48 | }, [props.disabled]); 49 | 50 | useEffect(() => { 51 | transformation?.setOptions(props); 52 | }, [ 53 | props.selector, 54 | props.generator, 55 | props.groupIdFunction, 56 | props.separateEdgesByDirection 57 | ]); 58 | 59 | return null; 60 | } 61 | 62 | /** 63 | * Edge grouping transformation component. It wraps around Ogma [`EdgeGrouping` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeGrouping). 64 | */ 65 | export const EdgeGrouping = forwardRef(EdgeGroupingComponent); 66 | -------------------------------------------------------------------------------- /src/transformations/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./nodeGrouping"; 2 | export * from "./edgeGrouping"; 3 | export * from "./nodeCollapsing"; 4 | export * from "./neighborMerging"; 5 | export * from "./neighborGeneration"; 6 | export * from "./edgeFilter"; 7 | export * from "./nodeFilter"; 8 | -------------------------------------------------------------------------------- /src/transformations/neighborGeneration.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | NeighborGenerationOptions, 10 | NeighborGeneration as NeighborGenerationTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface NeighborGenerationProps 17 | extends NeighborGenerationOptions, 18 | TransformationProps> {} 19 | 20 | function NeighborGenerationComponent( 21 | props: NeighborGenerationProps, 22 | ref: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addNeighborGeneration({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | // @ts-expect-error transformation is generic 36 | useTransformationCallbacks(props, newTransformation, ogma); 37 | setTransformation(newTransformation); 38 | return () => { 39 | newTransformation.destroy(); 40 | setTransformation(undefined); 41 | }; 42 | }, []); 43 | 44 | useEffect(() => { 45 | if (transformation) { 46 | toggle(transformation, !!props.disabled, props.duration); 47 | } 48 | }, [props.disabled]); 49 | 50 | useEffect(() => { 51 | transformation?.setOptions(props); 52 | }, [ 53 | props.edgeGenerator, 54 | props.nodeGenerator, 55 | props.neighborIdFunction, 56 | props.selector 57 | ]); 58 | 59 | return null; 60 | } 61 | 62 | export const NeighborGeneration = forwardRef(NeighborGenerationComponent); 63 | -------------------------------------------------------------------------------- /src/transformations/neighborMerging.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | NeighborMergingOptions, 10 | NeighborMerging as NeighborMergingTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface NeighborMergingProps 17 | extends NeighborMergingOptions, 18 | TransformationProps> {} 19 | 20 | function NeighborMergingComponent( 21 | props: NeighborMergingProps, 22 | ref: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addNeighborMerging({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | // @ts-expect-error transformation is generic 36 | useTransformationCallbacks(props, newTransformation, ogma); 37 | setTransformation(newTransformation); 38 | return () => { 39 | newTransformation.destroy(); 40 | setTransformation(undefined); 41 | }; 42 | }, []); 43 | 44 | useEffect(() => { 45 | if (transformation) { 46 | toggle(transformation, !!props.disabled, props.duration); 47 | } 48 | }, [props.disabled]); 49 | 50 | useEffect(() => { 51 | transformation?.setOptions(props); 52 | }, [props.dataFunction, props.selector]); 53 | 54 | return null; 55 | } 56 | 57 | export const NeighborMerging = forwardRef(NeighborMergingComponent); 58 | -------------------------------------------------------------------------------- /src/transformations/nodeCollapsing.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | NodeCollapsingOptions, 10 | NodeCollapsing as NodeCollapsingTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface NodeCollapsingProps 17 | extends NodeCollapsingOptions, 18 | TransformationProps> {} 19 | 20 | export function NodeCollapsingComponent( 21 | props: NodeCollapsingProps, 22 | ref: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addNodeCollapsing({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | useTransformationCallbacks(props, newTransformation, ogma); 36 | setTransformation(newTransformation); 37 | 38 | return () => { 39 | newTransformation.destroy(); 40 | setTransformation(undefined); 41 | }; 42 | }, []); 43 | 44 | useEffect(() => { 45 | if (transformation) { 46 | toggle(transformation, !!props.disabled, props.duration); 47 | } 48 | }, [props.disabled]); 49 | 50 | useEffect(() => { 51 | transformation?.setOptions(props); 52 | }, [props.edgeGenerator, props.selector]); 53 | 54 | return null; 55 | } 56 | 57 | export const NodeCollapsing = forwardRef(NodeCollapsingComponent); 58 | -------------------------------------------------------------------------------- /src/transformations/nodeFilter.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | NodeFilterOptions, 10 | NodeFilter as NodeFilterTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { TransformationProps } from "./types"; 14 | import { toggle, useTransformationCallbacks } from "./utils"; 15 | 16 | export interface NodeFilterProps 17 | extends NodeFilterOptions, 18 | TransformationProps> {} 19 | 20 | function NodeFilterComponent( 21 | props: NodeFilterProps, 22 | ref?: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | 30 | useEffect(() => { 31 | const newTransformation = ogma.transformations.addNodeFilter({ 32 | ...props, 33 | enabled: !props.disabled 34 | }); 35 | // @ts-expect-error transformation is generic 36 | useTransformationCallbacks(props, newTransformation, ogma); 37 | setTransformation(newTransformation); 38 | return () => { 39 | newTransformation.destroy(); 40 | setTransformation(undefined); 41 | }; 42 | }, []); 43 | 44 | useEffect(() => { 45 | if (transformation) { 46 | toggle(transformation, !!props.disabled, props.duration); 47 | } 48 | }, [props.disabled]); 49 | 50 | useEffect(() => { 51 | transformation?.setOptions(props); 52 | }, [props.criteria]); 53 | 54 | return null; 55 | } 56 | 57 | /** 58 | * Edge Filter transformation component. It wraps around Ogma [`NodeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNodeFilter). 59 | */ 60 | export const NodeFilter = forwardRef(NodeFilterComponent); 61 | -------------------------------------------------------------------------------- /src/transformations/nodeGrouping.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useEffect, 3 | useState, 4 | Ref, 5 | useImperativeHandle, 6 | forwardRef 7 | } from "react"; 8 | import { 9 | NodeGroupingOptions, 10 | NodeGrouping as NodeGroupingTransformation 11 | } from "@linkurious/ogma"; 12 | import { useOgma } from "../context"; 13 | import { toggle, useTransformationCallbacks } from "./utils"; 14 | import { TransformationProps } from "./types"; 15 | 16 | export interface NodeGroupingProps 17 | extends NodeGroupingOptions, 18 | TransformationProps> {} 19 | 20 | function NodeGroupingComponent( 21 | props: NodeGroupingProps, 22 | ref?: Ref> 23 | ) { 24 | const ogma = useOgma(); 25 | const [transformation, setTransformation] = 26 | useState>(); 27 | 28 | useImperativeHandle(ref, () => transformation!, [transformation]); 29 | useEffect(() => { 30 | const newTransformation = ogma.transformations.addNodeGrouping({ 31 | ...props, 32 | enabled: !props.disabled 33 | }); 34 | useTransformationCallbacks(props, newTransformation, ogma); 35 | setTransformation(newTransformation); 36 | return () => { 37 | newTransformation.destroy(); 38 | setTransformation(undefined); 39 | }; 40 | }, []); 41 | 42 | useEffect(() => { 43 | if (transformation) { 44 | toggle(transformation, !!props.disabled, props.duration); 45 | } 46 | }, [props.disabled]); 47 | 48 | useEffect(() => { 49 | transformation?.setOptions(props); 50 | }, [ 51 | props.groupIdFunction, 52 | props.groupSelfLoopEdges, 53 | props.edgeGenerator, 54 | props.nodeGenerator, 55 | props.groupEdges, 56 | props.padding, 57 | props.selector, 58 | props.showContents, 59 | props.separateEdgesByDirection 60 | ]); 61 | 62 | return null; 63 | } 64 | 65 | export const NodeGrouping = forwardRef(NodeGroupingComponent); 66 | -------------------------------------------------------------------------------- /src/transformations/types.ts: -------------------------------------------------------------------------------- 1 | import { Transformation } from "@linkurious/ogma"; 2 | 3 | export interface TransformationContext {} 4 | /** TODO: expose that in Ogma */ 5 | export interface TransformationOptions { 6 | duration?: number; 7 | enabled?: boolean; 8 | } 9 | 10 | export interface TransformationProps< 11 | ND, 12 | ED, 13 | C extends TransformationContext = TransformationContext 14 | > { 15 | disabled?: boolean; 16 | onEnabled?: (transformation: Transformation) => void; 17 | onDisabled?: (transformation: Transformation) => void; 18 | onDestroyed?: (transformation: Transformation) => void; 19 | onUpdated?: (transformation: Transformation) => void; 20 | onSetIndex?: ( 21 | transformation: Transformation, 22 | index: number 23 | ) => void; 24 | } 25 | -------------------------------------------------------------------------------- /src/transformations/utils.ts: -------------------------------------------------------------------------------- 1 | import Ogma, { Transformation } from "@linkurious/ogma"; 2 | import { TransformationProps } from "./types"; 3 | 4 | export function toggle( 5 | transformation: Transformation, 6 | disabled: boolean, 7 | duration?: number 8 | ) { 9 | if (disabled === transformation.isEnabled()) { 10 | if (disabled) transformation.disable(duration as number); 11 | else transformation.enable(duration as number); 12 | } 13 | } 14 | 15 | export function useTransformationCallbacks( 16 | props: TransformationProps, 17 | transformation: Transformation, 18 | ogma: Ogma 19 | ) { 20 | const enabledListener = ({ target }: { target: Transformation }) => { 21 | if (target !== transformation) return; 22 | props.onEnabled && props.onEnabled(transformation); 23 | }; 24 | const disabledListener = ({ target }: { target: Transformation }) => { 25 | if (target !== transformation) return; 26 | props.onDisabled && props.onDisabled(transformation); 27 | }; 28 | const updatedListener = ({ target }: { target: Transformation }) => { 29 | if (target !== transformation) return; 30 | props.onUpdated && props.onUpdated(transformation); 31 | }; 32 | const setIndexListener = ({ 33 | target, 34 | index 35 | }: { 36 | target: Transformation; 37 | index: number; 38 | }) => { 39 | if (target !== transformation) return; 40 | props.onSetIndex && props.onSetIndex(transformation, index); 41 | }; 42 | const destroyedListener = ({ 43 | target 44 | }: { 45 | target: Transformation; 46 | }) => { 47 | if (target !== transformation) return; 48 | props.onDestroyed && props.onDestroyed(transformation); 49 | ogma.events 50 | .off(enabledListener) 51 | .off(disabledListener) 52 | .off(updatedListener) 53 | .off(setIndexListener) 54 | .off(destroyedListener); 55 | }; 56 | ogma.events 57 | .on("transformationEnabled", enabledListener) 58 | .on("transformationDisabled", disabledListener) 59 | .on("transformationDestroyed", destroyedListener) 60 | .on("transformationSetIndex", setIndexListener) 61 | .on("transformationRefresh", updatedListener); 62 | const cleanup = () => { 63 | ogma.events 64 | .off(enabledListener) 65 | .off(disabledListener) 66 | .off(updatedListener) 67 | .off(setIndexListener) 68 | .off(destroyedListener); 69 | }; 70 | return cleanup; 71 | } 72 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import { 2 | EdgeAttributes, 3 | EventTypes, 4 | HoverEdgeOptions, 5 | HoverNodeOptions, 6 | NodeAttributes 7 | } from "@linkurious/ogma"; 8 | 9 | // temporary while the type import gets added 10 | export interface Theme { 11 | nodeAttributes?: NodeAttributes; 12 | edgeAttributes?: EdgeAttributes; 13 | selectedNodeAttributes?: NodeAttributes; 14 | selectedEdgeAttributes?: EdgeAttributes; 15 | hoveredNodeAttributes?: HoverNodeOptions; 16 | hoveredEdgeAttributes?: HoverEdgeOptions; 17 | } 18 | 19 | export type EventNames = keyof EventTypes; 20 | 21 | export type EventHandlers = { 22 | [K in EventNames]?: (event: EventTypes[K]) => void; 23 | }; 24 | 25 | // Generate component props from EventTypes 26 | export type EventHandlerProps = { 27 | [K in keyof T as `on${Capitalize}`]?: (event: T[K]) => void; 28 | }; 29 | 30 | // Type-safe function to iterate through event handlers 31 | export function forEachEventHandler( 32 | handlers: EventHandlers, 33 | callback: >( 34 | eventName: K, 35 | handler: (event: EventTypes[K]) => void 36 | ) => void 37 | ) { 38 | // Type-safe iteration 39 | (Object.keys(handlers) as EventNames[]).forEach((eventName) => { 40 | const handler = handlers[eventName]; 41 | // @ts-expect-error type union 42 | if (handler) callback(eventName, handler); 43 | }); 44 | } 45 | 46 | // Helper to convert onEventName to eventname 47 | export function getEventNameFromProp( 48 | propName: string 49 | ): keyof EventTypes | null { 50 | if (propName.startsWith("on") && propName.length > 2) { 51 | // remove 'on' and convert first letter to lowercase 52 | const eventName = propName[2].toLowerCase() + propName.substring(3); 53 | return eventName as EventNames; 54 | } 55 | return null; 56 | } 57 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | export function noop() {} 2 | -------------------------------------------------------------------------------- /src/uuid.ts: -------------------------------------------------------------------------------- 1 | export function uuidv4() { 2 | // Public Domain/MIT 3 | var d = new Date().getTime(); //Timestamp 4 | var d2 = 5 | (typeof performance !== "undefined" && 6 | performance.now && 7 | performance.now() * 1000) || 8 | 0; //Time in microseconds since page-load or 0 if unsupported 9 | return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { 10 | var r = Math.random() * 16; //random number between 0 and 16 11 | if (d > 0) { 12 | //Use timestamp until depleted 13 | r = (d + r) % 16 | 0; 14 | d = Math.floor(d / 16); 15 | } else { 16 | //Use microseconds since page-load if supported 17 | r = (d2 + r) % 16 | 0; 18 | d2 = Math.floor(d2 / 16); 19 | } 20 | return (c === "x" ? r : (r & 0x3) | 0x8).toString(16); 21 | }); 22 | } 23 | -------------------------------------------------------------------------------- /test/classes.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, act } from "@testing-library/react"; 2 | import { describe, it, beforeEach, vi, expect } from "vitest"; 3 | import { StyleClass } from "../src/styles/classStyle"; 4 | import { Ogma } from "../src"; 5 | import graph from "./fixtures/simple_graph.json"; 6 | 7 | // Mock Ogma and its API 8 | const mockDestroy = vi.fn(); 9 | const mockUpdate = vi.fn(); 10 | const mockCreateClass = vi.fn(() => ({ 11 | update: mockUpdate, 12 | destroy: mockDestroy 13 | })); 14 | const mockGetClass = vi.fn(() => ({ 15 | destroy: mockDestroy 16 | })); 17 | const mockOgma = { 18 | styles: { 19 | createClass: mockCreateClass, 20 | getClass: mockGetClass 21 | }, 22 | view: { 23 | afterNextFrame: () => Promise.resolve() 24 | } 25 | }; 26 | 27 | vi.mock("../src/context", async (importOriginal) => { 28 | const actual = (await importOriginal()) as {}; 29 | return { 30 | ...actual, 31 | useOgma: () => mockOgma 32 | }; 33 | }); 34 | 35 | describe("StyleClass", () => { 36 | beforeEach(() => { 37 | vi.clearAllMocks(); 38 | }); 39 | 40 | it("mounts and creates a style class", async () => { 41 | await act(async () => { 42 | render( 43 | 44 | 51 | 52 | ); 53 | }); 54 | expect(mockCreateClass).toHaveBeenCalledWith( 55 | expect.objectContaining({ name: "test" }) 56 | ); 57 | }); 58 | 59 | it("updates the style class when props change", async () => { 60 | const { rerender } = render( 61 | 62 | 69 | 70 | ); 71 | await act(async () => { 72 | rerender( 73 | 74 | 82 | 83 | ); 84 | }); 85 | expect(mockUpdate).toHaveBeenCalledWith( 86 | expect.objectContaining({ edgeAttributes: { a: 2 } }) 87 | ); 88 | }); 89 | 90 | it("cleans up on unmount", async () => { 91 | const { unmount } = render( 92 | 93 | 100 | 101 | ); 102 | await act(async () => { 103 | unmount(); 104 | }); 105 | expect(mockDestroy).toHaveBeenCalled(); 106 | }); 107 | }); 108 | -------------------------------------------------------------------------------- /test/fixtures/simple_graph.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": 0, "attributes": { "color": "blue", "x": 0, "y": 0 } }, 4 | { "id": 1, "attributes": { "color": "cyan", "x": 25, "y": 0 } }, 5 | { "id": 2, "attributes": { "color": "green", "x": 25, "y": 0 } } 6 | ], 7 | "edges": [ 8 | { "id": 0, "source": 0, "target": 1 }, 9 | { "id": 1, "source": 0, "target": 2 } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/simple_graph_curved.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { 4 | "id": 0, 5 | "attributes": { 6 | "color": "blue", 7 | "x": 0, 8 | "y": 0 9 | } 10 | }, 11 | { 12 | "id": 1, 13 | "attributes": { 14 | "color": "cyan", 15 | "x": 25, 16 | "y": 0 17 | } 18 | }, 19 | { 20 | "id": 2, 21 | "attributes": { 22 | "color": "green", 23 | "x": 25, 24 | "y": 0 25 | } 26 | } 27 | ], 28 | "edges": [ 29 | { 30 | "id": 0, 31 | "source": 0, 32 | "target": 1 33 | }, 34 | { 35 | "id": 1, 36 | "source": 0, 37 | "target": 2 38 | }, 39 | { 40 | "id": 2, 41 | "source": 0, 42 | "target": 1 43 | }, 44 | { 45 | "id": 3, 46 | "source": 0, 47 | "target": 2 48 | } 49 | ] 50 | } -------------------------------------------------------------------------------- /test/ogma.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, waitFor } from "./utils"; 3 | 4 | import OgmaLib, { RawGraph } from "@linkurious/ogma"; 5 | import { Ogma, useOgma } from "../src"; 6 | import { Theme } from "../src/types"; 7 | import { afternoonNap, morningBreeze } from '@linkurious/ogma-styles'; 8 | import { vi, describe, it, expect, beforeEach } from "vitest"; 9 | 10 | const graph: RawGraph = { 11 | nodes: [ 12 | { id: 0, attributes: { color: "red", x: 0, y: 0 } }, 13 | { id: 1, attributes: { color: "green", x: 25, y: 0 } }, 14 | { id: 2, attributes: { color: "green", x: 25, y: 0 } } 15 | ], 16 | edges: [ 17 | { source: 0, target: 1 }, 18 | { source: 0, target: 2 } 19 | ] 20 | }; 21 | 22 | describe("Ogma", () => { 23 | let div: HTMLDivElement; 24 | beforeEach(() => (div = document.createElement("div"))); 25 | 26 | it("Ogma container renders without crashing", () => { 27 | render(, div); 28 | }); 29 | 30 | it("Supports ref interface", () => { 31 | const ref = React.createRef(); 32 | render(, div); 33 | expect(ref.current).toBeDefined(); 34 | expect(ref.current).toBeInstanceOf(OgmaLib); 35 | }); 36 | 37 | it("Ogma container renders with onReady callback", () => { 38 | return new Promise((resolve) => { 39 | render( resolve(ogma)} />, div); 40 | }).then((ogma) => { 41 | expect(ogma).toBeInstanceOf(OgmaLib); 42 | }); 43 | }); 44 | 45 | it("Ogma container renders and takes options", () => { 46 | const backgroundColor = "red"; 47 | const minimumWidth = 500; 48 | return new Promise((resolve) => { 49 | const onReady = (ogma: OgmaLib) => { 50 | const options = ogma.getOptions(); 51 | expect(options.backgroundColor).toBe(backgroundColor); 52 | expect(options.minimumWidth).toBe(minimumWidth); 53 | return resolve(null); 54 | }; 55 | render( 56 | , 61 | div 62 | ); 63 | }); 64 | }); 65 | 66 | it("Ogma container passes the ogma instance to children", () => { 67 | return new Promise((resolve) => { 68 | const Component = () => { 69 | const ogma = useOgma(); 70 | expect(ogma).toBeInstanceOf(OgmaLib); 71 | resolve(null); 72 | return <>; 73 | }; 74 | render( 75 | 76 | 77 | , 78 | div 79 | ); 80 | }); 81 | }); 82 | 83 | it("should handle onNodesAdded prop changes correctly", async () => { 84 | const mockData = { 85 | nodes: [ 86 | { id: 0, attributes: { color: "red", x: 0, y: 0 } }, 87 | { id: 1, attributes: { color: "green", x: 25, y: 0 } }, 88 | ] 89 | } as RawGraph; 90 | 91 | const mockOnNodesAdded = vi.fn(() => console.log("onNodesAdded")); 92 | let ready = false; 93 | 94 | const ref = React.createRef(); 95 | const onReady = () => { 96 | ready = true; 97 | }; 98 | 99 | const { rerender } = render( 100 | , 101 | div 102 | ); 103 | 104 | // Wait for Ogma to initialize 105 | await waitFor(() => ready); 106 | 107 | // add a node 108 | ref.current?.addNode({ id: 2, attributes: { color: "blue", x: 0, y: 25 } }); 109 | 110 | // Check if the handler was called 111 | expect(mockOnNodesAdded).toHaveBeenCalledTimes(1); 112 | 113 | // Rerender without the handler 114 | rerender(); 115 | 116 | ref.current?.addNode({ id: 3, attributes: { color: "yellow", x: 25, y: 25 } }); 117 | 118 | // add another node - handler should not be called 119 | expect(mockOnNodesAdded).toHaveBeenCalledTimes(1); 120 | 121 | rerender(); 122 | 123 | ref.current?.addNode({ id: 4, attributes: { color: "purple", x: 50, y: 50 } }); 124 | 125 | // Check if the handler was called again 126 | expect(mockOnNodesAdded).toHaveBeenCalledTimes(2); 127 | }); 128 | 129 | it("should set the theme of the graph correctly with the prop changes", async () => { 130 | const mockData = { 131 | nodes: [ 132 | { id: 0, attributes: { x: 0, y: 0 } }, 133 | ] 134 | } as RawGraph; 135 | 136 | const theme: Theme = afternoonNap as Theme; 137 | let ready = false; 138 | const ref = React.createRef(); 139 | const onReady = () => { 140 | ready = true; 141 | }; 142 | 143 | const { rerender } = render( 144 | , 145 | div 146 | ); 147 | 148 | await waitFor(() => ready); 149 | 150 | // node color should be the theme's node color 151 | const nodeColor = ref.current?.getNodes().get(0).getAttribute("color"); 152 | expect(nodeColor).toMatch("#BD8A61"); 153 | 154 | const theme2: Theme = morningBreeze as Theme; 155 | rerender() 156 | 157 | // node color should be the new theme's node color after rerendering 158 | const nodeColor2 = ref.current?.getNodes().get(0).getAttribute("color"); 159 | expect(nodeColor2).toMatch("#43a2ca"); 160 | 161 | }) 162 | }); 163 | -------------------------------------------------------------------------------- /test/popup.test.tsx: -------------------------------------------------------------------------------- 1 | import { createRef } from "react"; 2 | import { render } from "./utils"; 3 | 4 | import { Ogma, Popup } from "../src"; 5 | import { Overlay, Point } from "@linkurious/ogma"; 6 | import graph from "./fixtures/simple_graph.json"; 7 | 8 | describe("Popup", () => { 9 | let div: HTMLDivElement; 10 | beforeEach(() => (div = document.createElement("div"))); 11 | 12 | it("should support ref", () => { 13 | const ref = createRef(); 14 | render( 15 | 16 | { 19 | const bbox = ogma.view.getGraphBoundingBox(); 20 | return { x: bbox.cx, y: bbox.cy }; 21 | }} 22 | placement="right" 23 | > 24 | content 25 | 26 | , 27 | div 28 | ); 29 | 30 | expect(ref.current).toBeDefined(); 31 | expect(ref.current!.hide).toBeDefined(); 32 | }); 33 | it("should add popup", () => { 34 | const text = "Custom popup text"; 35 | const ref = createRef(); 36 | 37 | render( 38 | 39 | 40 |

{text}

41 | 42 | , 43 | div 44 | ); 45 | expect( 46 | ref.current?.element.querySelector(".ogma-popup--body") 47 | ).toBeInstanceOf(HTMLElement); 48 | expect( 49 | ref.current?.element.querySelector(".ogma-popup--close") 50 | ).toBeDefined(); 51 | expect( 52 | ref.current?.element.querySelector(".custom-child-div") 53 | ).toBeInstanceOf(HTMLElement); 54 | expect( 55 | ref.current?.element.querySelector(".custom-child-div")!.textContent 56 | ).toBe(text); 57 | }); 58 | 59 | it("should support positioning", () => { 60 | let pos: Point; 61 | const ref = createRef(); 62 | render( 63 | 64 | { 67 | const bbox = ogma.view.getGraphBoundingBox(); 68 | pos = { x: bbox.cx, y: bbox.cy }; 69 | return pos; 70 | }} 71 | > 72 | Popup 73 | 74 | , 75 | div 76 | ); 77 | expect((ref.current?.element as HTMLDivElement).style.transform).toContain( 78 | `translate(150px, 150px) rotate(0rad) translate(0px, 0px)` 79 | ); 80 | }); 81 | 82 | it("should support custom className", () => { 83 | const ref = createRef(); 84 | render( 85 | 86 | { 90 | const bbox = ogma.view.getGraphBoundingBox(); 91 | return { x: bbox.cx, y: bbox.cy }; 92 | }} 93 | > 94 | Popup 95 | 96 | , 97 | div 98 | ); 99 | expect(ref.current?.element.classList.contains("custom-class")).toBe(true); 100 | }); 101 | 102 | it("should support custom close button", () => { 103 | const ref = createRef(); 104 | render( 105 | 106 | { 109 | const bbox = ogma.view.getGraphBoundingBox(); 110 | return { x: bbox.cx, y: bbox.cy }; 111 | }} 112 | closeButton={X} 113 | > 114 | content 115 | 116 | , 117 | div 118 | ); 119 | expect( 120 | ref.current?.element.querySelector(".custom-close-button") 121 | ).toBeInstanceOf(HTMLSpanElement); 122 | }); 123 | 124 | it("should support custom bottom placement", () => { 125 | const ref = createRef(); 126 | render( 127 | 128 | { 131 | const bbox = ogma.view.getGraphBoundingBox(); 132 | return { x: bbox.cx, y: bbox.cy }; 133 | }} 134 | placement="bottom" 135 | > 136 | content 137 | 138 | , 139 | div 140 | ); 141 | expect( 142 | (ref.current?.element as HTMLDivElement).classList.contains( 143 | "ogma-popup--bottom" 144 | ) 145 | ).toBe(true); 146 | }); 147 | 148 | it("should support custom left placement", () => { 149 | const ref = createRef(); 150 | render( 151 | 152 | { 155 | const bbox = ogma.view.getGraphBoundingBox(); 156 | return { x: bbox.cx, y: bbox.cy }; 157 | }} 158 | placement="left" 159 | > 160 | content 161 | 162 | , 163 | div 164 | ); 165 | expect( 166 | (ref.current?.element as HTMLDivElement).classList.contains( 167 | "ogma-popup--left" 168 | ) 169 | ).toBe(true); 170 | }); 171 | 172 | it("should support custom right placement", () => { 173 | const ref = createRef(); 174 | render( 175 | 176 | { 179 | const bbox = ogma.view.getGraphBoundingBox(); 180 | return { x: bbox.cx, y: bbox.cy }; 181 | }} 182 | placement="right" 183 | > 184 | content 185 | 186 | , 187 | div 188 | ); 189 | expect( 190 | (ref.current?.element as HTMLDivElement).classList.contains( 191 | "ogma-popup--right" 192 | ) 193 | ).toBe(true); 194 | }); 195 | }); 196 | -------------------------------------------------------------------------------- /test/setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | 3 | // @ts-ignore 4 | global["IS_REACT_ACT_ENVIRONMENT"] = true; 5 | -------------------------------------------------------------------------------- /test/styles.test.tsx: -------------------------------------------------------------------------------- 1 | import React, { act, createRef } from "react"; 2 | import { Root, createRoot } from "react-dom/client"; 3 | import { userEvent, waitFor } from "./utils"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | import { Ogma, NodeStyleRule, EdgeStyleRule } from "../src"; 6 | import graph from "./fixtures/simple_graph.json"; 7 | 8 | describe("styles", async () => { 9 | let div: Root; 10 | let element: HTMLDivElement; 11 | 12 | beforeEach(() => { 13 | element = document.createElement("div"); 14 | div = createRoot(element); 15 | }); 16 | 17 | it("Node style component renders without crashing", () => { 18 | act(() => 19 | div.render( 20 | 21 | 22 | 23 | ) 24 | ); 25 | }); 26 | 27 | it("Passes node attributes", async () => { 28 | const ref = createRef(); 29 | act(() => 30 | div.render( 31 | 32 | 33 | 34 | ) 35 | ); 36 | await waitFor(() => expect(ref.current).toBeTruthy()); 37 | const ogma = ref.current!; 38 | await ogma.view.afterNextFrame(); 39 | expect(ogma.getNodes().getAttribute("color")).toStrictEqual([ 40 | "red", 41 | "red", 42 | "red", 43 | ]); 44 | }); 45 | 46 | it("Uses selector for NodeStyle", async () => { 47 | const ref = createRef(); 48 | act(() => 49 | div.render( 50 | 51 | Number(node.getId()) < 2} 54 | /> 55 | 56 | ) 57 | ); 58 | await waitFor(() => expect(ref.current).toBeTruthy()); 59 | const ogma = ref.current!; 60 | await ogma.view.afterNextFrame(); 61 | expect(ogma.getNodes().getAttribute("color")).toStrictEqual([ 62 | "red", 63 | "red", 64 | "green", 65 | ]); 66 | }); 67 | 68 | it("NodeStyle cleans up after being removed", async () => { 69 | const ref = createRef(); 70 | const Test = () => { 71 | const [style, setStyle] = React.useState(true); 72 | return ( 73 | 74 | 75 | {style && } 76 | 77 | ); 78 | }; 79 | act(() => div.render()); 80 | await waitFor(() => expect(ref.current).toBeTruthy()); 81 | const button = element.querySelector("button") as HTMLButtonElement; 82 | await act(() => userEvent.click(button)); 83 | expect(ref.current!.styles.getNodeRules().length).toBe(0); 84 | }); 85 | 86 | it("Edge style component renders without crashing", () => { 87 | act(() => 88 | div.render( 89 | 90 | 91 | 92 | ) 93 | ); 94 | }); 95 | 96 | it("Passes edge attributes", async () => { 97 | const ref = createRef(); 98 | act(() => 99 | div.render( 100 | 101 | 102 | 103 | ) 104 | ); 105 | await waitFor(() => expect(ref.current).toBeTruthy()); 106 | await ref.current!.view.afterNextFrame(); 107 | 108 | expect(ref.current!.getEdges().getAttribute("color")).toStrictEqual([ 109 | "red", 110 | "red", 111 | ]); 112 | }); 113 | 114 | it("Uses selector for EdgeStyle", async () => { 115 | const ref = createRef(); 116 | act(() => 117 | div.render( 118 | 119 | Number(edge.getId()) > 0} 122 | /> 123 | 124 | ) 125 | ); 126 | await waitFor(() => expect(ref.current).toBeTruthy()); 127 | await ref.current!.view.afterNextFrame(); 128 | expect(ref.current!.getEdges().getAttribute("color")).toStrictEqual([ 129 | "grey", 130 | "green", 131 | ]); 132 | }); 133 | 134 | it("EdgeStyle cleans up after being removed", async () => { 135 | const ref = createRef(); 136 | const Test = () => { 137 | const [style, setStyle] = React.useState(true); 138 | return ( 139 | 140 | 141 | {style && } 142 | 143 | ); 144 | }; 145 | act(() => div.render()); 146 | await waitFor(() => expect(ref.current).toBeTruthy()); 147 | const button = element.querySelector("button") as HTMLButtonElement; 148 | await act(() => userEvent.click(button)); 149 | expect(ref.current!.styles.getEdgeRules().length).toBe(0); 150 | }); 151 | }); 152 | -------------------------------------------------------------------------------- /test/transformations/edgeFilter.test.tsx: -------------------------------------------------------------------------------- 1 | import { EdgeFilterTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Edge filter", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getEdges().getId()).toEqual([0, 1]); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getEdges().getId()).toEqual([0]); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getEdges().getId()).toEqual([0]); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getEdges().getId()).toEqual([0, 1]); 25 | }); 26 | 27 | it("Updates criteria", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getEdges().getId()).toEqual([0]); 31 | await act(() => userEvent.click(screen.getByText("setCriteria"))); 32 | await ref.current?.transformations.afterNextUpdate(); 33 | expect(ref.current?.getEdges().getId()).toEqual([1]); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/transformations/edgeGrouping.test.tsx: -------------------------------------------------------------------------------- 1 | import { EdgeGroupingTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Edge grouping", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getEdges().getId()).toEqual([0, 1, 2, 3]); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getEdges().getId()).toEqual([0, 2, `group-1[0-2]`]); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getEdges().getId()).toEqual([0, 2, `group-1[0-2]`]); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getEdges().getId()).toEqual([0, 1, 2, 3]); 25 | }); 26 | 27 | it("Updates grouping", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getEdges().getId()).toEqual([0, 2, `group-1[0-2]`]); 31 | await act(() => userEvent.click(screen.getByText("setGrouping"))); 32 | await ref.current?.transformations.afterNextUpdate(); 33 | expect(ref.current?.getEdges().getId()).toEqual([ 34 | `group-1[0-2]`, 35 | `group-0[0-1]` 36 | ]); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /test/transformations/neighborGeneration.test.tsx: -------------------------------------------------------------------------------- 1 | import { NeighborGenerationTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | 6 | describe("Neighbor generation", () => { 7 | let div: HTMLDivElement; 8 | beforeEach(() => (div = document.createElement("div"))); 9 | 10 | it("Can be disabled by default and then enabled", async () => { 11 | render(, div); 12 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 13 | expect(ref.current?.getEdges().size).toEqual(0); 14 | await act(() => userEvent.click(screen.getByText("toggle"))); 15 | await ref.current?.transformations.afterNextUpdate(); 16 | expect(ref.current?.getEdges().size).toEqual(2); 17 | }); 18 | 19 | it("Can be disabled", async () => { 20 | render(, div); 21 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 22 | expect(ref.current?.getEdges().size).toEqual(2); 23 | await act(() => userEvent.click(screen.getByText("toggle"))); 24 | await ref.current?.transformations.afterNextUpdate(); 25 | expect(ref.current?.getEdges().size).toEqual(0); 26 | }); 27 | 28 | it("Updates criteria", async () => { 29 | render(, div); 30 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 31 | expect(ref.current?.getEdges().size).toEqual(2); 32 | await act(() => userEvent.click(screen.getByText("setGenerator"))); 33 | await ref.current?.transformations.afterNextUpdate(); 34 | // TODO: bug in ogma, the data is not merged. 35 | //expect(ref.current?.getEdges().size).toEqual(3); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/transformations/neighborMerging.test.tsx: -------------------------------------------------------------------------------- 1 | import { NeighborMergingTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Neighbor merging", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getEdges().size).toEqual(2); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getEdges().size).toEqual(1); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getEdges().size).toEqual(1); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getEdges().size).toEqual(2); 25 | }); 26 | 27 | it("Updates criteria", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getEdges().size).toEqual(1); 31 | await act(() => userEvent.click(screen.getByText("setGenerator"))); 32 | await ref.current?.transformations.afterNextUpdate(); 33 | expect(ref.current?.getEdges().size).toEqual(0); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/transformations/nodeCollapsing.test.tsx: -------------------------------------------------------------------------------- 1 | import { NodeCollapsingTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Node Collapsing", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getEdges().size).toEqual(2); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getEdges().size).toEqual(1); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getEdges().size).toEqual(1); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getEdges().size).toEqual(2); 25 | }); 26 | 27 | it("Updates criteria", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getEdges().get(0).getData()).toEqual({ 31 | key1: "value1" 32 | }); 33 | await act(() => userEvent.click(screen.getByText("setCollapse"))); 34 | await ref.current?.transformations.afterNextUpdate(); 35 | // bug in ogma, the data is not merged 36 | //TODO: restore this test when the bug is fixed. 37 | // expect(ref.current?.getEdges().get(0).getData()).toEqual({ 38 | // key2: "value2", 39 | // }); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /test/transformations/nodeFilter.test.tsx: -------------------------------------------------------------------------------- 1 | import { NodeFilterTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Node filter", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getNodes().getId()).toEqual([0, 1, 2]); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getNodes().getId()).toEqual([0]); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getNodes().getId()).toEqual([0]); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getNodes().getId()).toEqual([0, 1, 2]); 25 | }); 26 | 27 | it("Updates criteria", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getNodes().getId()).toEqual([0]); 31 | await act(() => userEvent.click(screen.getByText("setCriteria"))); 32 | await ref.current?.transformations.afterNextUpdate(); 33 | expect(ref.current?.getNodes().getId()).toEqual([1]); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/transformations/nodeGrouping.test.tsx: -------------------------------------------------------------------------------- 1 | import { NodeGroupingTest, ref } from "./test-components"; 2 | import { render, userEvent, screen } from "../utils"; 3 | import { act } from "react"; 4 | import OgmaLib from "@linkurious/ogma"; 5 | describe("Node grouping", () => { 6 | let div: HTMLDivElement; 7 | beforeEach(() => (div = document.createElement("div"))); 8 | 9 | it("Can be disabled by default and then enabled", async () => { 10 | render(, div); 11 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 12 | expect(ref.current?.getNodes().getId()).toEqual([0, 1, 2]); 13 | await act(() => userEvent.click(screen.getByText("toggle"))); 14 | await ref.current?.transformations.afterNextUpdate(); 15 | expect(ref.current?.getNodes().getId()).toEqual([0, 2, `group-1`]); 16 | }); 17 | 18 | it("Can be disabled", async () => { 19 | render(, div); 20 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 21 | expect(ref.current?.getNodes().getId()).toEqual([0, 2, `group-1`]); 22 | await act(() => userEvent.click(screen.getByText("toggle"))); 23 | await ref.current?.transformations.afterNextUpdate(); 24 | expect(ref.current?.getNodes().getId()).toEqual([0, 1, 2]); 25 | }); 26 | 27 | it("Updates grouping", async () => { 28 | render(, div); 29 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 30 | expect(ref.current?.getNodes().getId()).toEqual([0, 2, `group-1`]); 31 | await act(() => userEvent.click(screen.getByText("setGrouping"))); 32 | await ref.current?.transformations.afterNextUpdate(); 33 | expect(ref.current?.getNodes().getId()).toEqual([`group-1`, `group-0`]); 34 | }); 35 | 36 | it("Triggers callbacks", async () => { 37 | const states = { onEnabled: false, onDestroyed: false, onUpdated: false }; 38 | render( 39 | (states.onEnabled = true)} 41 | onDestroyed={() => (states.onDestroyed = true)} 42 | onUpdated={() => (states.onUpdated = true)} 43 | />, 44 | div 45 | ); 46 | await (ref.current as OgmaLib).transformations.afterNextUpdate(); 47 | expect(states).toEqual({ 48 | onEnabled: true, 49 | onDestroyed: false, 50 | onUpdated: false 51 | }); 52 | await act(() => userEvent.click(screen.getByText("setGrouping"))); 53 | await ref.current?.transformations.afterNextUpdate(); 54 | expect(states).toEqual({ 55 | onEnabled: true, 56 | onDestroyed: false, 57 | onUpdated: true 58 | }); 59 | }); 60 | }); 61 | -------------------------------------------------------------------------------- /test/transformations/test-components.tsx: -------------------------------------------------------------------------------- 1 | import graph from "../fixtures/simple_graph.json"; 2 | import graphCurved from "../fixtures/simple_graph_curved.json"; 3 | 4 | import OgmaLib from "@linkurious/ogma"; 5 | 6 | import { 7 | Ogma, 8 | EdgeFilter, 9 | EdgeFilterProps, 10 | NodeFilter, 11 | NodeFilterProps, 12 | EdgeGrouping, 13 | EdgeGroupingProps, 14 | NodeGrouping, 15 | NodeGroupingProps, 16 | NeighborGeneration, 17 | NeighborGenerationProps, 18 | NeighborMerging, 19 | NeighborMergingProps, 20 | NodeCollapsing, 21 | NodeCollapsingProps 22 | } from "../../src"; 23 | import { createRef, forwardRef, useState } from "react"; 24 | 25 | export const ref = createRef(); 26 | 27 | function EdgeFilterTestC( 28 | filter: Partial> = {} 29 | ) { 30 | const [props, setProps] = useState>({ 31 | criteria: (edge) => edge.getId() === 0, 32 | disabled: false, 33 | ...filter 34 | }); 35 | function updateFilter() { 36 | setProps({ 37 | criteria: (edge) => edge.getId() === 1 38 | }); 39 | } 40 | function toggle() { 41 | setProps({ 42 | ...props, 43 | disabled: !props.disabled 44 | }); 45 | } 46 | return ( 47 |

48 | 49 | 50 | 51 | 52 | 53 | 54 |

55 | ); 56 | } 57 | function NodeFilterTestC( 58 | filter: Partial> = {} 59 | ) { 60 | const [props, setProps] = useState>({ 61 | criteria: (node) => node.getId() === 0, 62 | disabled: false, 63 | ...filter 64 | }); 65 | function updateFilter() { 66 | setProps({ 67 | criteria: (node) => node.getId() === 1 68 | }); 69 | } 70 | function toggle() { 71 | setProps({ 72 | ...props, 73 | disabled: !props.disabled 74 | }); 75 | } 76 | return ( 77 |

78 | 79 | 80 | 81 | 82 | 83 | 84 |

85 | ); 86 | } 87 | 88 | function EdgeGroupingTestC( 89 | grouping: Partial> = {} 90 | ) { 91 | const [props, setProps] = useState>({ 92 | selector: (edge) => !!(+edge.getId() % 2), 93 | groupIdFunction: () => `group-1`, 94 | separateEdgesByDirection: false, 95 | generator(_, groupId) { 96 | return { 97 | id: groupId, 98 | data: { key: "value" } 99 | }; 100 | }, 101 | disabled: false, 102 | ...grouping 103 | }); 104 | function updateGrouping() { 105 | setProps({ 106 | ...props, 107 | selector: () => true, 108 | groupIdFunction: (edge) => `group-${+edge.getId() % 2}` 109 | }); 110 | } 111 | function toggle() { 112 | setProps({ 113 | ...props, 114 | disabled: !props.disabled 115 | }); 116 | } 117 | return ( 118 |

119 | 120 | 121 | 122 | 123 | 130 | 131 |

132 | ); 133 | } 134 | 135 | function NodeGroupingTestC( 136 | grouping: Partial> = {} 137 | ) { 138 | const [props, setProps] = useState>({ 139 | selector: (node) => !!(+node.getId() % 2), 140 | groupIdFunction: () => `group-1`, 141 | separateEdgesByDirection: false, 142 | nodeGenerator: (_, groupId) => { 143 | return { 144 | id: groupId, 145 | data: { key: "value" } 146 | }; 147 | }, 148 | disabled: false, 149 | ...grouping 150 | }); 151 | function updateGrouping() { 152 | setProps({ 153 | ...props, 154 | selector: () => true, 155 | groupIdFunction: (node) => `group-${+node.getId() % 2}` 156 | }); 157 | } 158 | function toggle() { 159 | setProps({ 160 | ...props, 161 | disabled: !props.disabled 162 | }); 163 | } 164 | return ( 165 |

166 | 167 | 168 | 169 | 170 | 183 | 184 |

185 | ); 186 | } 187 | 188 | function NeighborGenerationTestC( 189 | generator: Partial> = {} 190 | ) { 191 | const [props, setProps] = useState>( 192 | { 193 | selector: (node) => +node.getId() % 2 === 0, 194 | neighborIdFunction: () => `even`, 195 | disabled: false, 196 | ...generator 197 | } 198 | ); 199 | function updateGenerator() { 200 | setProps({ 201 | ...props, 202 | selector: () => true 203 | }); 204 | } 205 | function toggle() { 206 | setProps({ 207 | ...props, 208 | disabled: !props.disabled 209 | }); 210 | } 211 | return ( 212 |

213 | 214 | 215 | 216 | 217 | 223 | 224 |

225 | ); 226 | } 227 | 228 | function NeighborMergingTestC( 229 | generator: Partial> = {} 230 | ) { 231 | const [props, setProps] = useState>({ 232 | selector: (node) => +node.getId() === 1, 233 | dataFunction: () => ({ value: 1 }), 234 | disabled: false, 235 | ...generator 236 | }); 237 | function updateGenerator() { 238 | setProps({ 239 | ...props, 240 | selector: (node) => +node.getId() === 0 241 | }); 242 | } 243 | function toggle() { 244 | setProps({ 245 | ...props, 246 | disabled: !props.disabled 247 | }); 248 | } 249 | return ( 250 |

251 | 252 | 253 | 254 | 255 | 260 | 261 |

262 | ); 263 | } 264 | 265 | function NodeCollapsingTestC( 266 | generator: Partial> = {} 267 | ) { 268 | const [props, setProps] = useState>({ 269 | selector: (node) => +node.getId() === 0, 270 | edgeGenerator: () => { 271 | return { data: { key1: "value1" } }; 272 | }, 273 | disabled: false, 274 | ...generator 275 | }); 276 | function updateCollapse() { 277 | setProps({ 278 | ...props, 279 | edgeGenerator: () => { 280 | return { data: { key2: "value2" } }; 281 | } 282 | }); 283 | } 284 | function toggle() { 285 | setProps({ 286 | ...props, 287 | disabled: !props.disabled 288 | }); 289 | } 290 | return ( 291 |

292 | 293 | 294 | 295 | 300 | 301 |

302 | ); 303 | } 304 | 305 | export const EdgeFilterTest = forwardRef(EdgeFilterTestC); 306 | export const NodeFilterTest = forwardRef(NodeFilterTestC); 307 | export const EdgeGroupingTest = forwardRef(EdgeGroupingTestC); 308 | export const NodeGroupingTest = forwardRef(NodeGroupingTestC); 309 | export const NeighborGenerationTest = forwardRef(NeighborGenerationTestC); 310 | export const NeighborMergingTest = forwardRef(NeighborMergingTestC); 311 | export const NodeCollapsingTest = forwardRef(NodeCollapsingTestC); 312 | -------------------------------------------------------------------------------- /test/utils.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/export */ 2 | import { cleanup, render } from "@testing-library/react"; 3 | import { afterEach } from "vitest"; 4 | 5 | afterEach(() => { 6 | cleanup(); 7 | }); 8 | 9 | // @ts-ignore 10 | const customRender = (ui: React.ReactElement, options = {}) => 11 | render(ui, { 12 | // wrap provider(s) here if needed 13 | wrapper: ({ children }) => children, 14 | ...options 15 | }); 16 | 17 | export * from "@testing-library/react"; 18 | export { default as userEvent } from "@testing-library/user-event"; 19 | // override render export 20 | export { customRender as render }; 21 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "declarationMap": true 6 | }, 7 | "include": ["src/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "moduleResolution": "node", 5 | "allowJs": true, 6 | "esModuleInterop": true, 7 | "allowSyntheticDefaultImports": true, 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "strict": true, 11 | "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */, 12 | "strictNullChecks": true /* Enable strict null checks. */, 13 | "strictFunctionTypes": true /* Enable strict checking of function types. */, 14 | "noUnusedLocals": true /* Report errors on unused locals. */, 15 | "noUnusedParameters": true /* Report errors on unused parameters. */, 16 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */, 17 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */, 18 | "importHelpers": true, 19 | "skipLibCheck": false, 20 | "jsx": "react-jsx", 21 | "outDir": "./dist/", 22 | "types": ["node", "jest"], 23 | "lib": ["ES6", "DOM"] 24 | }, 25 | "include": [ 26 | "src/**/*.ts", 27 | "src/**/*.tsx", 28 | "next-env.d.ts", 29 | "**/*.ts", 30 | "**/*.tsx" 31 | ], 32 | "exclude": ["node_modules"] 33 | } 34 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | import { defineConfig } from "vite"; 5 | import react from "@vitejs/plugin-react"; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | react({ 11 | jsxRuntime: "classic" 12 | }) 13 | ], 14 | define: { "process.env": { NODE_ENV: "production" } }, 15 | build: { 16 | minify: true, 17 | sourcemap: true, 18 | lib: { 19 | name: "OgmaReact", 20 | entry: "./src/index.ts", 21 | formats: ["es", "cjs", "umd"], 22 | fileName: (format) => { 23 | if (format === "umd") return `index.umd.js`; 24 | if (format === "cjs") return `index.cjs`; 25 | return `index.mjs`; 26 | } 27 | }, 28 | rollupOptions: { 29 | external: ["@linkurious/ogma", "react", "react-dom", "react-dom/server"], 30 | output: { 31 | globals: { 32 | react: "React", 33 | "react-dom": "ReactDOM", 34 | "react-dom/server": "ReactDOMServer", 35 | "@linkurious/ogma": "Ogma" 36 | } 37 | } 38 | } 39 | }, 40 | esbuild: { 41 | jsxInject: "import React from 'react';", 42 | jsx: "automatic" 43 | }, 44 | test: { 45 | globals: true, 46 | environment: "jsdom", 47 | setupFiles: "./test/setup.ts", 48 | coverage: { 49 | reporter: ["json", "cobertura"], 50 | include: ["src/**/*.{ts,tsx}"], 51 | all: true, 52 | reportsDirectory: "reports/coverage" 53 | } 54 | } 55 | }); 56 | --------------------------------------------------------------------------------