Group first, then double-click a meta-node: members bloom out in a circle-packed arrangement with a 450ms ease-out tween. Double-click a member to collapse its group.
// A cluster key is the only grouping geometry input. OGJS creates aggregate relationships,
// packs members when a group opens, animates the transition, and restores the collapsed
// state without asking the application to position members or repair the camera.
import { Ogjs } from '../../src/index';
const og = new Ogjs({ container: '#viz', theme: 'light' });
const nodes = [], edges = [];
const PAL = ['#4f8cff', '#47d78a', '#f2a33c', '#e5484d', '#9d6bff'];
for (let c = 0; c < 5; c++) for (let k = 0; k < 24; k++) {
const i = c * 24 + k;
nodes.push({ id: i, size: k === 0 ? 10 : 4, color: PAL[c],
label: k === 0 ? 'cluster ' + c : undefined, data: { cluster: c } });
if (k > 0) edges.push({ source: i, target: c * 24 + (k > 4 ? (i % k) : 0) });
}
for (let c = 0; c < 5; c++) edges.push({ source: c * 24, target: ((c + 1) % 5) * 24 });
og.setGraph({ nodes, edges });
og.layouts.force({ sync: true, iterations: 260, springLength: 46, repulsion: 1400 });
og.camera.fit();
og.enableHoverHighlight();
document.querySelector('#group').addEventListener('click', async () => {
// The key function is the complete collapse instruction. OGJS derives meta-nodes, aggregates
// relationships, animates the change, and retains the source topology for restoration.
await og.groupByAnimated(({ data }) => 'cluster ' + data.cluster);
await og.animateFit();
});
og.on('nodedblclick', async ({ nodeId: id }) => {
if (typeof id === 'string' && id.startsWith('__group:')) {
// Expand only the activated group. OGJS places its members locally while preserving every
// unrelated cluster's coordinates and collapsed state.
await og.expandGroup(id.slice(8));
} else {
// A visible member resolves back to its retained group key, allowing the same gesture to
// collapse that group without the application tracking parent objects itself.
const key = og.transformations.groupKeyOf(id);
if (key && !og.transformations.isCollapsed(key)) await og.collapseGroup(key);
}
});