// Mount the navigator against the same graph instance used by the canvas.
// OGJS synchronizes keyboard focus, semantic node and edge descriptions, selection, and
// camera movement, so the accessible view cannot drift from visual graph state.
import { Ogjs } from '../../src/index';
const og = new Ogjs({
container: '#viz', theme: 'light', accessibility: { label: 'Investigation' },
});
og.setGraph({ nodes: [
{ id: 'case', x: 0, y: 0, size: 15, color: '#0f172a', label: 'Case' },
{ id: 'account', x: -170, y: 105, size: 10, color: '#2563eb', label: 'Account' },
{ id: 'device', x: 170, y: 105, size: 10, color: '#7c3aed', label: 'Device' },
{ id: 'merchant', x: 170, y: -105, size: 10, color: '#ea580c', label: 'Merchant' },
{ id: 'location', x: -170, y: -105, size: 10, color: '#059669', label: 'Location' },
], edges: [
{ source: 'case', target: 'account', data: { label: 'owns' } },
{ source: 'case', target: 'device', data: { type: 'uses' } },
{ source: 'account', target: 'merchant', data: { predicate: 'paid' } },
{ source: 'device', target: 'location', data: { label: 'observed at' } },
{ source: 'merchant', target: 'location', data: { label: 'operates at' } },
] });
// Mounting derives a semantic representation from the live graph. Labels, relationships, focus,
// and selection cannot drift because there is no duplicate application-maintained HTML graph.
og.navigator.mount(document.querySelector('#semantic'));
og.camera.fit();
document.querySelector('#add-evidence').onclick = () => {
if (og.graph.getNodeIndex('evidence') !== undefined) return;
og.addNodes([{ id: 'evidence', x: 0, y: -185, size: 9, color: '#db2777', label: 'Evidence' }]);
og.addEdges([{ source: 'case', target: 'evidence', data: { label: 'supported by' } }]);
// Mutations automatically update the semantic view; callers do not patch a second accessibility
// tree after adding evidence and its relationship.
og.camera.fit();
};
const peers = [];
function createPeer(enabled = true) {
// Each peer receives independent semantic ownership, keyboard focus, and teardown. Disabling
// accessibility for one peer does not change the primary graph or any other instance.
const host = document.createElement('div');
host.className = 'peer-host';
document.body.append(host);
const peer = new Ogjs({
container: host,
theme: 'light',
accessibility: enabled ? { label: 'Peer' } : false,
});
peer.setGraph({
nodes: [{ id: 'peer-a', label: 'Peer A' }, { id: 'peer-b', label: 'Peer B' }],
edges: [{ source: 'peer-a', target: 'peer-b' }],
});
peers.push(peer);
}