search

dkapur17 / streamlit-flow

Streamlit Component to quickly create Interactive Flow Diagrams using React Flow
https://stflow.streamlit.app
52 stars 6 forks source link

Customize node width #6

Closed gaspardc-met closed 3 weeks ago

gaspardc-met commented 3 weeks ago

Hello @dkapur17 ,

Thank you for the awesome streamlit component, been having a lot of fun with this during the last few days.

I noticed a potential bug or missing example: I cannot set a custom width for a node.

It is listed here in the node docs: image

However I tied setting a value around a hundred, below a hundred, as a float (0.1), but nothing has changed yet. What is the unit of the width ? Am I using it wrong or is it just not working ?

Cheers, Gaspard

dkapur17 commented 3 weeks ago

Hey @gaspardc-met. Thanks for pointing this out. I'll updated it in the documentation ASAP. Basically the width and height properties on the node class are only used for computing node position by the layout engine, but will not affect the node visually. If you wish to change the dimensions of the node visually, then use the style attribute on the node like so: style={'height': '100px', 'width': '100px'}. But make sure to update the height and width properties on the node as well to match these values so the layout engine knows to make the necessary changes.

gaspardc-met commented 3 weeks ago

Thanks @dkapur17 ,

I'll try this out 👍

Edit: tested and works like a charm 🎉

dkapur17 commented 3 weeks ago

Awesome! Closing the issue to keep tracking organized.