Unable to use GraphCanvas as a child node and respect layout

[Vincent-Bdn]

Describe the bug

I can have a component for the graph:

import React from 'react';
import { GraphCanvas } from 'reagraph';
import { Graph } from '../../types';
import type { FC } from 'react';

interface GraphComponentProps {
    graph: Graph;
}

export const GraphComponent: FC<GraphComponentProps> = (props) => {
    const { graph } = props;
    return (
        <div style={{ position: "fixed", width: '100%', height: '100%'}}> { /* tested with and without */ }
            <GraphCanvas
                nodes={graph.nodes}
                edges={graph.edges}
                sizingType='pagerank' />
        </div>
    );
}

but without the div it takes the whole page no matter the outer React nodes. And with style position fixed, then it is set "randomly" and does not respect positionning either.

Steps to Reproduce the Bug or Issue

1. take the component above;
2. simply try to set it as the inner component of other React nodes, and see that it does not respect positionning

Expected behavior

As a user I might expect a React node that respects the layout, and page positionning.

Screenshots or Videos

No response

Platform

• "reagraph": "^4.15.2",
• OS: Windows
• Browser: Chrome
• NodeJS version: 20.10.0

Your Example Website or App

No response

Additional context

No response

[Austin]

Your parent element needs to have position: relative so it can full size. Let me know if that works.

[Vincent-Bdn]

Thanks, closing the issue, it works like a charm with:

import React from 'react';
import { GraphCanvas } from 'reagraph';
import { Graph } from '../../types';
import type { FC } from 'react';

interface GraphComponentProps {
    graph: Graph;
}

export const GraphComponent: FC<GraphComponentProps> = (props) => {
    const { graph } = props;
    return (
        <div style={{ position: "relative", height: '500px'}}>
            <GraphCanvas
                nodes={graph.nodes}
                edges={graph.edges}
                sizingType='pagerank' />
        </div>
    );
}