Hover a node: a red ring appears outside it with a clear screen-space gap. Hover a link: the link turns red and thickens, and both endpoints get the ring.
hover a node or a link
// Hover rules describe the active node or edge treatment while topology remains unchanged.
// OGJS resolves connected endpoints and applies screen-space rings during hit testing,
// so unrelated entities retain their colors and applications do not redraw the graph.
import { Ogjs } from '../../src/index';
const og = new Ogjs({ container: '#viz', theme: 'light' });
// A compact social graph for checking connected hover states.
// slate fills, gray links, labels in pills.
const nodes = [], edges = [];
const NAMES = { 0: 'Instructor', 33: 'Administrator' };
const N = 34;
const pairs = [[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,10],[0,11],[0,12],[0,13],
[0,17],[0,19],[0,21],[0,31],[1,2],[1,3],[1,7],[1,13],[1,17],[1,19],[1,21],[1,30],[2,3],
[2,7],[2,8],[2,9],[2,13],[2,27],[2,28],[2,32],[3,7],[3,12],[3,13],[4,6],[4,10],[5,6],
[5,10],[5,16],[6,16],[8,30],[8,32],[8,33],[9,33],[13,33],[14,32],[14,33],[15,32],[15,33],
[18,32],[18,33],[19,33],[20,32],[20,33],[22,32],[22,33],[23,25],[23,27],[23,29],[23,32],
[23,33],[24,25],[24,27],[24,31],[25,31],[26,29],[26,33],[27,33],[28,31],[28,33],[29,32],
[29,33],[30,32],[30,33],[31,32],[31,33],[32,33]];
const deg = new Array(N).fill(0);
for (const [a, b] of pairs) { deg[a]++; deg[b]++; }
for (let i = 0; i < N; i++) {
nodes.push({ id: i, size: 5 + Math.sqrt(deg[i]) * 1.6,
color: i === 0 ? '#f5b73d' : i === 33 ? '#ef4444' : '#64748b',
label: NAMES[i] ?? String(i) });
}
for (const [a, b] of pairs) edges.push({ source: a, target: b });
og.setGraph({ nodes, edges });
og.layouts.force({ sync: true, iterations: 320, springLength: 70, repulsion: 2600, gravity: 0.05 });
og.camera.fit();
const info = document.querySelector('#info');
og.on('nodehover', ({ nodeId }) => {
info.textContent = 'node ' + nodeId + ' · degree ' + deg[Number(nodeId)];
});
og.on('nodeout', () => { info.textContent = 'hover a node or a link'; });
og.on('edgehover', ({ sourceId, targetId }) => {
info.textContent = 'link ' + sourceId + ' — ' + targetId
+ ' · both endpoints ringed';
});
og.on('edgeout', () => { info.textContent = 'hover a node or a link'; });