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.
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
!importantflag in a CSS spreadsheet.
Ogma.styles.setThemeAPI to define your default styles.
Do not call
setAttributeson elements before they are added. Wait for
setGraphpromises to resolve before.
Prefer setting styles to
EdgeListdirectly rather than iterating on a
Listto set attributes to each element.
// slow ogma.getNodes().forEach(node => node.setAttribute(...)) //fast ogma.getNodes().setAttribute(...)
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
- 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
Reactand 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:
- Consider using clustering API if you group nodes but rarelly ungroup them.