Ogma provides a large API with optimized functions, but some missuage of some features can lead to a slow app, or hard to maintian. This tutorial aims to present best pratices when using Ogma.

Styling

To style your vizualisation efficiently and easily, there are few simple rules you should follow:

• See StyleRules as a CSS spreadsheet. Do not re-create classes and styleRules over time, but once for all.

• Avoid setting attributes directly into elements, as it overrides every classes and styleRules. See setting attributes as an !important flag in a CSS spreadsheet.

• Use Ogma.styles.setTheme API to define your default styles.

• Do not call setAttributes on elements before they are added. Wait for addNodes, setGraph promises to resolve before.

• Prefer setting styles to NodeList and EdgeList directly rather than iterating on a List to set attributes to each element.

// slow
ogma.getNodes().forEach(node => node.setAttribute(...))

//fast
ogma.getNodes().setAttribute(...)

Optimizing

Ogma can load and render huge graphs, but this is not a reason to abuse the final user's patience and attention. Here are a few recommandations to keep your app at speed:

• Filter your graph on the back end. For development purposes you can load huge graphs and filter it afterwards but in production you should render only necesary nodes and load new elements dynamically.
• Keep your styles neat. As said above, you should keep the number of styleRules low, and avoid non-linear computations within styleRules.
• Preprocess your data. Nodes and Edges can hold a lots of data on your database, but not all of it is necessary for your app. If you are using frameworks like React and are including the whole graph in the state of the app, data changes can become really heavy.
• When using frameworks, follow the recomandations written in our dedicated tutorials:
  • React
  • React-Redux
  • Angular
  • Vue
• Consider using clustering API if you group nodes but rarelly ungroup them.