OG
JS
Docs
Demos
Examples
Helm workbench
Search, legend, and progress controls share the graph lifecycle.
// Mount Helm with search, legend, settings, and progress intent; graph data stays unchanged. // OGJS binds those controls to the graph lifecycle and disposes them with the instance, // so applications do not synchronize duplicate selection or render state. import { Ogjs } from '../../src/index'; const records = [ { id:'account-alpha', label:'Account Alpha', x:-120, y:20, color:'#2563eb', data:{ alias:'Aster' } }, { id:'device-cafe', label:'Café Device', x:0, y:95, color:'#7c3aed', data:{ alias:'Terminal' } }, { id:'alert-risk', label:'Risk Alert', x:120, y:10, color:'#dc2626', data:{ alias:'Priority' } }, { id:'merchant-north', label:'North Merchant', x:35, y:-95, color:'#059669', data:{ alias:'Shop' } }, ]; const edges = [ { source:'account-alpha', target:'device-cafe' }, { source:'device-cafe', target:'alert-risk' }, { source:'alert-risk', target:'merchant-north' }, ]; const primary = new Ogjs({ container:'#graph-primary', theme:'light' }); primary.setGraph({ nodes:records, edges }); primary.camera.fit(); // Helm binds search, legend, settings, and progress to this graph's public lifecycle. Search // can include application aliases without mirroring selection or render state in the host UI. const helm = primary.mountHelm({ placeholder:'Find an entity', searchText:({ data }) => data?.alias ?? '', }); helm.setLegend([ { id:'account', label:'Account', color:'#2563eb', mark:'node' }, { id:'link', label:'Observed link', color:'#94a3b8', mark:'edge' }, ]); helm.setProgress(.35, 'Indexing records'); const secondary = new Ogjs({ container:'#graph-secondary', theme:'light' }); secondary.setGraph({ nodes:records.map((node) => ({ ...node, id:`other-${node.id}` })), edges:[] }); secondary.camera.fit(); // A second mount demonstrates instance isolation: the same control system can target another // graph and host element without sharing events, selection, DOM ownership, or teardown. const otherHelm = secondary.mountHelm({ host:document.querySelector('#custom-host'), placeholder:'Find another entity', }); otherHelm.setLegend([{ id:'other', label:'Other graph', color:'#7c3aed', mark:'node' }]);