Advanced Line and Node Highlighting

Demonstrates line click highlighting with connected nodes and canvas click handling for clear selection management.

Advanced Line and Node Highlighting

Functional Overview

This demo demonstrates advanced highlighting techniques where clicking on a line highlights both the line and its connected nodes. It also includes canvas click handling to clear selections.

Implementation of Key Features

1. Line Click Handler

Implement onLineClick to highlight the clicked line and its endpoints:

const onLineClick = (clickedLine: RGLine) => {
    clearHighlightStatus();

    // Highlight the clicked line
    graphInstance.getLines().forEach(line => {
        if (clickedLine.id === line.id) {
            graphInstance.updateLine(line, {
                className: 'my-line-highlight',
                lineWidth: 3
            });
        }
    });

    // Highlight connected nodes
    graphInstance.getNodes().forEach(node => {
        if (clickedLine.from === node.id || clickedLine.to === node.id) {
            graphInstance.updateNode(node, { className: 'my-node-highlight' });
        }
    });
};

2. Canvas Click Handler

Clear all highlights when clicking on the canvas:

const onCanvasClick = () => {
    graphInstance.clearChecked();
    clearHighlightStatus();
};

3. Clear Highlight Function

Reset all visual modifications:

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

4. Toggle Highlight State

The demo maintains a toggle-like state where:

• First click on a line highlights it and its nodes
• Clicking elsewhere clears the highlight
• Canvas click also clears the selection

5. Visual Feedback with CSS

Use CSS classes for highlight effects:

.my-line-highlight {
    stroke: #4CAF50 !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.5));
}
.my-node-highlight {
    background-color: #FFD700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

Creative Use Cases

• Edge Selection: Select relationships in graph analysis tools
• Path Visualization: Highlight specific paths in network diagrams
• Connection Inspection: Examine details of specific connections
• Interactive Reports: Create interactive graph-based reports
• Quality Assurance: Verify connections in system architecture diagrams
• Educational Tools: Teach graph concepts through interactive highlighting