[website] Add example for layout

[sim51]

No description provided.

[BaherZ]

Is this expected to be ready soon?
would love to see examples of using WorkerLayoutControlProps, layout-forceatlas2, layout-force

[sim51]

It depends of the meaning of "soon" :)
But it's on the todo list.

It will help me a lot if you can tell me what you want to see in this layout documentation (or in the doc in general).
It's not easy for me to know what should I put in documentation. Something trivial for me can be complex for users, because I know very well sigma and this lib.

In the meantime, you can check this component : https://github.com/sim51/react-sigma/blob/main/project/packages/examples/src/common/LayoutsControl.tsx

It's a component that handles all the layout types available with the lib

[BaherZ]

thanks for the component link, as for the layout docs, I was thinking of example on using examples on each topic alongside explanation of what it actually does, for example, WorkerLayoutControl, what is it used for, how to use it(example part)

layout-circle,layout-circlepack, what's the difference (and of course with examples)

also, I'm currently stuck on implementing the drag n drop feature of nodes, I saw an example using standard sigma, but in this example, they depend on const pos = renderer.viewportToGraph(e); to get new position of node for example, not sure how to implement this here

so basically just more examples/implementation of each hook/component and possible functionality (i.e: drag and drop) that the library has to offer.

and thanks for your work :)

[BaherZ]

also, I can't seem to find examples for changing graphSettings like minNodeSize, maxNodeSize, minArrowSize, labelThreshold, nodeOpacity, minEdgeSize, maxEdgeSize, it seems changing it via const setSettings = useSetSettings(); does not do the trick, after going in the library's code it seems that setSettings changes these values: https://github.com/jacomyal/sigma.js/blob/main/src/settings.ts

and these don't include the above types, it would be very helpful to specify in the docs which values setSettings change and what to do when you want to change other settings like what I want to do

is setSettings is supposed to also change these values? if yes, should I create a stackoverflow question about this?

[sim51]

On your point for minNodeSize, maxNodeSize ... , those settings don't exists on Sigma v2.
The documentation of react-sigma should not replace the one of Sigma (same for graphology), but I can put links to them.

About the drag'n'drop, it's added : https://sim51.github.io/react-sigma/docs/example/drag_n_drop

[BaherZ]

thanks for adding the drag and drop!

I've looked at graphology docs and it's pretty good, I couldn't find the case I was looking for in it tho, if it's actually not there, then it's quite unfortunate :(

for example I initially create 2 nodes, one with size 5, other with size 10, now I want to increase the 2 nodes, but, I also want to keep their relation intact, for example I want to increase them 2x so the first node size becomes 10 and the other becomes 20 (not necessarily 2x, but if there isn't min/max nodeSize anymore, then I'll probably change the code/UI to use this 2x,3x pattern and call updateEachNodeAttributes with the new relative size like size:attr.size*2 or sth)

but other than node size, are all the settings mentioned not there anymore? I have tested nodeOpacity (more specifically, non-selected nodes opacity) and it seems to work even tho I couldn't find it in this settings link: https://github.com/jacomyal/sigma.js/blob/main/src/settings.ts

and if so, is there now no way to let the user modify their labelThreshold, minArrowSie,min/max edgeSize, etc anymore?

[sim51]

The configuration keys you talk about were for the v1 of Sigma.
So yes some has disappeared, renamed or there is a new way to do it.

For the node size, you can change the node size of a node directly on the graph instance.
And if you want to have min/max node size, you have to implement it.

For label threshold, I think it's this parameter now labelRenderedSizeThreshold.

For others, don't know

[sim51]

For layout : https://sim51.github.io/react-sigma/docs/example/layouts