Grouping in depth

This tutorial aims to help you understand how groups work and how to use them. See the transformations tutoral for a basic introduction.

Good practices with groups

Grouping can become tricky if you don't follow some good practice we have seen working with our users.

Grouping strategy

In general it is a good practice to use the data of the nodes or their ids, but don't rely on their attributes.

Groups styling

In our examples, we demonstrate the nodeGenerator function, which returns a RawNode. In this RawNode we recommend not to pass attributes as they overwrite the attributes from styleRules and classes. You can see the attributes you set in the nodeGenerator function as adding an !important in a CSS rule.

The onCreated hook

The onCreated hook will called only when a new group is created. New groups are created when nodes with a new location are created. When disabling/enabling the grouping, or when refreshing the transformation, existing groups are only updated and the onCreated hook is not called.

Layout open groups

Make sure your layout is called

When you open a group node, you likelly want to layout its content. It can be done in multiple ways but we recommend to use the ogma.events.transformationRefresh event. Indeed, this event is called everytime the grouping is refreshed, while the onCreated hook is called only on the creation of a node.

Move only the necessary nodes

When you layout an open node, it is likelly that its radius change, thus the layout of the global graph might have to be re-run. But giving freedom of movement to all the nodes of the graph might be confusing to the user. We recommand to use the pinning feature.