bobthekingofegypt / dagre-reactjs Goto Github PK

Hello! Thank you for dagre-reactjs - it has made a big difference in our project .

In our use case, nodes should render last so that they display on top of edges and markers. The change is as simple as moving

Would you be open to a PR which adds an optional attribute to the graphOptions prop which controls the rendering order? Something like renderingOrder, an array of strings like ['nodes', 'edges', edgeLabels'] (current behavior), ['edges', 'edgeLabels', 'nodes'] (what I need), or some other iteration?

Is it possible to get the size of the graph instead of having to specify the SVG canvas width? The library works great, but as I do not know the graph beforehand I can not make it fit.

Hi,
I moved my project from create-react-app to vitejs. Now I am facing a strange problem...
on localhost everything is working fine, but as soon as I deploy it I get the following error.

Any ideas/help is appreciated!

Thanks

Hi there, thanks for this library!

I have a component which is trying to change the background color of a node (via the styles.shapes.styles attribute of the nodes prop to the DagreReact component) as a result of a user selecting a certain node and the component's state updating. It seems that updating attributes like this doesn't cause the graph to re-render — perhaps only changing the set of nodes and edges itself, as in the timeline example.

Ideally changing attributes like background color would re-render, without re-layouting, although I realize it might be difficult to know which attributes changing requires a re-layout. Thanks again!

Thanks for providing such a good library.

I think Dagre-D3 has a fatal Issus , It cannot draw an edge to
nodes which contains child-node , like this :

Dagre-D3 cannot draw an edge from [Child Node1-1] to [Parent Node2]

Did your library solved this Issue?
Guys from Dagre-D3 are waiting.....

Hello,
I tested your project and want to use customized node label, but I don't see it working at all

Step 1: In component

`

function DagreFlow(props){

console.log(props)
const traceRoutes = new TraceRoutes(props.data);
console.log(traceRoutes.traceRoutes[0])

const [state, setState] = useState(false);
setTimeout(()=>{
    setState({
        nodes: traceRoutes.traceRoutes[0]['hops']['graph'].nodes,
        edges: traceRoutes.traceRoutes[0]['hops']['graph'].edges,
        customNodeLabels: {
            foreign: {
                renderer: NodeLabelRender,
                html: true
            }
        },
        customEdgeLabels: {
            foreign: {
                renderer: EdgeLabelRender,
                html: true
            }
        }
    })
});


return (
    state &&
    <svg id="schedule" width={1000} height={1000}>
        <DagreReact
            nodes={state.nodes}
            edges={state.edges}
            customNodeLabels = {state.customNodeLabels}
            customEdgeLabels = {state.customEdgeLabels}
            defaultNodeConfig={DEFAULT_NODE_CONFIG}
            graphOptions={{
                marginx: 15,
                marginy: 15,
                rankdir: 'LR',
                ranksep: 55,
                nodesep: 15,
            }}
        />
    </svg>
);

}

export default DagreFlow;
`

and the customNodeLabel:

import React, {useRef} from 'react'; function NodeLabelRender(props){ return( <div>NodeX</div> ) } export default NodeLabelRender;
But when rendering it, it is still the same as without customer node label render, only default label is rendered, not the foreign object at all,

can you check the issue here?

I'd like to make use of dagre's optional multigraph support.

Hello Bob!

Would you spare a moment to offer some advice which may lead me to working on exposing graphlib's compound graph feature in dagre-reactjs?

In our project, we'd like to be able to group a set of nodes together to distinguish them from the rest of the nodes. These nodes should be rendered close to one another, and they should have a visible container surrounding them. IIUC, a compound graph can do this. However there might be a simpler solution, since in our case, the box which contains the set of child nodes won't ever have edges pointing to/from it, i.e., it doesn't need to be a node, just a grouping of nodes. The child nodes will have edges pointing to/from nodes outside the container.

If you think that a compound graph is the correct way to accomplish this goal, I would be happy to work on implementing it in dagre-reactjs.

Thank you!!

Joseph

Hey! thanks so much for this library. I was actually shown this by @Layvier , and I'm looking to refactor beautiful skill tree to use something like this to handle the rendering to the DOM.

I'm getting started withthe alpha and noticed that in the readme no other props aside from the edges and nodes are required to please the DagreReact. I'm not sure if this is intentional but i'm required to pass through graphLayoutStarted. It seems all of the other props have default values except this one. If this isn't intentional, i can whip up a super quick PR.

Hi,

first thanks a lot for this library, it's saving me a lot of time and pretty powerful !

So I'm rendering custom label react components, and in order to make it responsive I'm trying to update the nodes width based on the max number of nodes per rank. The issue is that after updating the nodes width, the layout doesn't update even though I'm properly changing the stage prop.

I'm assuming the issue comes from not resetting the ValueCache when the stage prop changes ?

If so I'm willing to make a PR, let me know what you think !