Line Highlighting on Node Hover

Demonstrates how to highlight lines connected to a node when hovering over it for focused exploration in complex graphs.

Line Highlighting on Node Hover

Functional Overview

This demo demonstrates how to highlight lines connected to a node when hovering over it. It’s a common interaction pattern for focusing attention on related connections in complex graphs.

Implementation of Key Features

1. Node Hover Event Handler

Implement onMouseEnter and onMouseLeave handlers in the node slot:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div
            onMouseEnter={() => nodeMouseOver(node)}
            onMouseLeave={() => nodeMouseOut(node)}
        >
            {node.text}
        </div>
    )}
</RGSlotOnNode>

2. Highlight Connected Lines

When hovering a node, update all connected lines:

const nodeMouseOver = (currentNode: RGNode) => {
    clearHighlightStatus();
    graphInstance.updateNode(currentNode, { className: 'my-node-highlight' });

    graphInstance.getLines().forEach(line => {
        if (line.from === currentNode.id || line.to === currentNode.id) {
            graphInstance.updateLine(line, {
                className: 'my-line-highlight',
                lineWidth: 3
            });
        }
    });
};

3. Clear Highlight Status

Reset all nodes and lines to their default state:

const clearHighlightStatus = () => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, { className: '' });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            className: '',
            lineWidth: graphOptions.defaultLineWidth
        });
    });
};

4. CSS Styling

Define highlight styles in CSS:

.my-node-highlight {
    background-color: #ffd700 !important;
}
.my-line-highlight {
    stroke: #ff6b6b !important;
    stroke-width: 3px !important;
}

Creative Use Cases

• Network Analysis: Focus on specific nodes and their connections
• Social Networks: Highlight a person’s relationships
• Dependency Graphs: Show all dependencies of a specific component
• Knowledge Graphs: Explore connections around a concept
• Organizational Charts: Highlight reporting lines
• Infrastructure Maps: Focus on connections to a specific location