Migration guides

Ogma@6.0 migration guide

Ogma@6.0 introduces some changes to the transformation API that may require adjustments in your codebase. This guide outlines the key modifications and how to adapt your code accordingly.

Animations

Animations control changed quite a bit:

• Individual transformations do not have a duration and easing param anymore
• Transformations have a new param: animates, if set to false, it acts as the duration:0 from previous versions.
• The global animations duration and easing are controlled through the ogma.transformations.setAnimation function.

Why thoose changes?

• In Ogma 4, the animations of the transformations applied sequentially, leading to confusing transitions.
• In Ogma 5, we introduced the merged animations for the transformations: Ogma computes the final state of the visualisation and animates once for all transformations.
• In Ogma we reflect this change of behaviour in the API.

So code like this:

ogma.transformations.addNodeFilter({
    ...
    duration: 250,
    easing: 'quadraticInOut'
});

Becomes:

ogma.transformations.setAnimation({
    duration: 250,
    easing: 'quadraticInOut'
});
ogma.transformations.addNodeFilter({
    ...
});

Easy Grouping

This new feature aims to make it easier for developers to use the Grouping feature: instead of declaring NodeGrouping transformations and think in terms of group Sets, groups hierarchy, you can build your grouping by hand using two functions:

• nodeList.group() which group together a list of nodes
• node.addSubGraph() which replaces the node with a group containing the subGraph passed in param

See it in action

Ogma@5.3 migration guide

Ogma@5.3 introduces some changes to the transformation API that may require adjustments in your codebase. This guide outlines the key modifications and how to adapt your code accordingly.

Node grouping

Ogma@5.3 introduces a new way to increase the performance of the layout by merging running it once for all the nodes inside of the groups. This is done by returning the layout options in the onGroupUpdated callback.

So if you had a code like this:

ogma.group({
  groupIdFunction: (node) => ...,
  showContents: true,
  onGroupUpdated: (group) => {
    return ogma.layouts.force({ nodes: group });
  }
});

You should now return the layout options instead of the layout itself:

ogma.group({
  groupIdFunction: (node) => ...,
  showContents: true,
  onGroupUpdated: (group) => {
    return { layout: 'force', params: {...} };
  }
});

Same goes for the onGroupsUpdated callback on ogma.transformations:

ogma.transformations.onGroupsUpdated((groups) => {
  return { layout: 'force', params: {...} };
});

Alternatively, you can return a promise that resolves to the final nodes positions:

ogma.group({
  groupIdFunction: (node) => ...,
  showContents: true,
  onGroupUpdated: (group) => {
    return yourPlacementFunction(group);
  }
});

For more details you should refer to the API documentation of the grouping transformation options.

GPU layout

One of the main benefits of the new grouping API is that it allows you to use the GPU layout for the groups. This is done by returning the gpu layout in the onGroupUpdated callback:

ogma.group({
  groupIdFunction: (node) => ...,
  showContents: true,
  onGroupUpdated: (group) => {
    return { layout: 'force', params: { gpu: true, ...} };
  }
});

So in addition to the huge performance boost that is delivered by the new grouping API, you can also benefit from the GPU layout for the groups to make it even faster and bring better quality to the compound nodes.