Graph visualization just got a major performance boost. Ogma 5.3 introduces a new approach to cluster layout calculations that delivers up to 10x faster performance for grouped visualizations, while significantly expanding React developer resources and capabilities.
The standout feature of Ogma 5.3 addresses one of the most common bottlenecks in large-scale graph visualization: calculating layouts for multiple clusters simultaneously.
When exploring complex networks—whether transaction flows, supply chains, or social connections—users frequently need to experiment with different grouping strategies. Previously, calculating layouts for hundreds of small clusters could take up to a minute as each cluster's layout was processed sequentially. This created a prohibitive barrier to the iterative exploration that's essential for discovering meaningful patterns in data.
Our new clustering algorithm calculates all sublayouts simultaneously rather than queuing them sequentially. The result? What used to take a minute now takes 2 seconds, even when processing hundreds of groups with complex meta-layouts positioning the clusters themselves.
The new algorithm lets you quickly apply grouping and responds at lightning speed as the contents of groups change
This isn't just about speed—it's about enabling a fundamentally different way of working with your data. Users can now rapidly test different clustering criteria, immediately seeing results without the friction of long wait times.
A major technical advancement in 5.3 is GPU layout support within clusters. Previously, GPU layouts weren't viable for cluster contexts due to WebGL context limitations. Our new architecture eliminates this constraint, enabling GPU-accelerated layouts within groups for even faster, higher-quality visualizations. If you are in a restricted environment or using Node.js, you can still use the CPU mode for the layout which is also times faster than calculating individual layouts.
Key benefits:
- 10x performance improvement for cluster layout calculations
- GPU acceleration now available for sublayouts
- Real-time exploration of different grouping strategies
- Scalable to hundreds of clusters without performance degradation
The performance gains come with a streamlined API that requires minimal code changes. In most cases, upgrading means replacing a single ogma.layouts.force() call in your onGroupUpdated callback with a configuration object specifying the layout name and parameters.
// Before
onGroupUpdated: (group) => {
return ogma.layouts.force();
}
// After
onGroupUpdated: (group) => {
return {
name: 'force',
// optional parameters,
params: {
...
}
}
}React developers get significant improvements in both documentation and tooling with Ogma 5.3.
We've extended our most sophisticated examples to React, giving developers best practices for:
- Transport Network Analysis - Complex routing and flow visualizations
- Interactive Annotations - Rich, contextual graph annotations
- Fraud Detection - Real-world financial network analysis
- Draw Your Graph - Interactive graph creation and editing
- iPhone parts - Transformations in supply chain analysis
The new useEvents hook brings Ogma's powerful event system into idiomatic React patterns with full TypeScript support:
import { Ogma, useEvent } from '@linkurious/ogma-react';
const [clickedNode, setClickedNode] = useState<OgmaNode|null>(null);
const onMouseMove = useEvent('mousemove', ({ target }) => {
if (target && target.isNode) console.log(target.getId());
});
const onClick = useEvent('click', ({ target }) => {
setClickedNode((target && target.isNode) ? target : null);
});
<Ogma
options={options}
onMouseMove={onMouseMove}
onClick={onClick}
/>
Managing node and edge styles is now intuitive with new declarative subcomponents. Control hover and selection states directly in your JSX:
<Ogma options={options}>
<NodeStyle.Hovered attributes={{ color: "blue", radius: 12 }} />
<NodeStyle.Selected attributes={{ color: "red", radius: 15 }} />
<EdgeStyle.Hovered attributes={{ color: "blue", width: 3} />
<EdgeStyle.Selected {{ color: "red", color: 4}} />
</Ogma>
This approach eliminates complex style rule management and makes visual states immediately clear from your component structure.
React developers now have first-class support for Ogma's theming API directly in the wrapper. Switching between light and dark modes, or any custom themes, is now as simple as passing a theme prop:
const [isDark, setIsDark] = useState(false);
<Ogma
options={options}
theme={isDark ? darkTheme : lightTheme}
/>
This makes it effortless to integrate graph visualizations with your application's existing theme switching logic.
Our React wrapper is open source, allowing developers to examine implementation details and contribute improvements. This transparency, combined with our commitment to React-idiomatic patterns, allows us to share the abstractions required to make Ogma React-friendly and invites the feedback and communication around this code.
Beyond the major performance and React enhancements, Ogma 5.3 includes several refinements that improve the overall developer experience:
Visual consistency: All node shapes now use uniform rounded corner values, creating a more polished and consistent appearance across different visualization styles.
Improved error handling: The element.hasClass method now gracefully handles non-existent classes by returning false instead of throwing an error, making defensive programming patterns more straightforward.
Better animation quality: Fixed visual glitches in quadraticIn and quadraticOut easing functions, ensuring smooth transitions in layouts and animations.
Smarter selection management: When nodes and edges are hidden by transformations, they remain selected, making it easier to manage selection states and retrieve visible selected elements.
The performance improvements in Ogma 5.3 benefit any application using visual clustering:
- Financial services: Rapidly explore transaction networks and fraud detection patterns
- Telecommunications: Analyze network topology and traffic flows with dynamic grouping
- Supply chain: Understand complex supplier relationships and logistics networks
- Knowledge graphs: Navigate and cluster RDF data for semantic analysis
These improvements reflect our broader commitment to making complex graph visualization both powerful and accessible. By eliminating performance barriers to exploration and providing React developers with familiar, well-documented patterns, Ogma 5.3 enables teams to focus on insights rather than implementation challenges.
The combination of dramatically faster clustering performance and enhanced React support makes this release particularly valuable for teams building data exploration tools where user experience and technical flexibility are equally important.
Existing users can upgrade to Ogma 5.3 with our migration guide, and new users can experience these performance improvements immediately.
Explore the new features:
- Updated React Documentation - Complete guides and converted demos
- Interactive Performance Demo - See the 10x improvement in action
- Migration Guide - Step-by-step upgrade instructions
A spotlight on graph technology directly in your inbox.
