Interactive Interest Group Mapping with Canvas Slots

Uses custom canvas slots and connection targets to visualize relationships between interest groups and members, with dynamic highlighting and background map overlay.

Functional Overview

This example demonstrates how to create a visualization of relationships between interest groups and class members using custom canvas slots. Through RGSlotOnCanvas and RGConnectTarget components, you can place custom UI elements at any position on the canvas and automatically handle connections to these elements. When clicking an interest group, members who joined that group are highlighted; when clicking a member, all interest groups that member joined are highlighted.

Implementation of Key Features

Canvas Slot Rendering

Use RGSlotOnCanvas to add custom elements to the canvas:

<RelationGraph options={graphOptions}>
    <RGSlotOnCanvas>
        <div style={{ zIndex: 2, position: 'absolute', left: -700, top: 100 }}>
            {interestGroups.map(group => (
                <div key={group.groupId} style={{ left: group.location.x + 'px', top: group.location.y + 'px' }}>
                    {/* custom interest group markers */}
                </div>
            ))}
        </div>
    </RGSlotOnCanvas>
</RelationGraph>

This allows placing UI elements at arbitrary coordinates on the canvas.

Connection Target Component

Use RGConnectTarget to make custom elements connectable:

<RGConnectTarget
    targetId={`group-${group.groupId}`}
    junctionPoint={RGJunctionPoint.lr}
    disableDrag={true}
    disableDrop={true}
>
    <div className="c-i-group" onClick={() => onGroupClick(group.groupId)}>
        <div className="c-i-name">{group.groupName}</div>
    </div>
</RGConnectTarget>

RGConnectTarget acts as a virtual node that can establish connections with other nodes or connection targets.

Dynamic Relationship Line Creation

Dynamically create connection lines based on selected group or member:

const updateMyLines = async () => {
    await graphInstance.sleep(100);
    const myFakeLines = [];

    if (activeGroupId) {
        // Show all members of this group
        classMembers.forEach((member, index) => {
            if (member.joinedGroups.includes(activeGroupId)) {
                myFakeLines.push({
                    id: `line-member-${index}`,
                    from: 'member-' + member.name,
                    to: 'group-' + activeGroupId,
                    color: 'rgba(29,169,245,0.76)',
                    lineShape: RGLineShape.StandardCurve
                });
            }
        });
        // Add connection line from group to location
        myFakeLines.push({
            id: `line-group-loc-${activeGroupId}`,
            from: 'group-' + activeGroupId,
            to: 'location-' + activeGroupId,
            color: 'rgba(159,23,227,0.65)',
            lineWidth: 3,
            lineShape: RGLineShape.StandardCurve,
            animation: 2
        });
    }

    graphInstance.clearGraph();
    graphInstance.addNodes([{ id: 'fake-root', text: '', opacity: 0, x: 0, y: 0 }]);
    graphInstance.addFakeLines(myFakeLines);
};

Re-calculate and render relationship lines each time selection changes.

Background Map Overlay

Add a background image to the canvas:

<div style={{ zIndex: 1, position: 'absolute', left: -700, top: 100 }}>
    <img
        src={`https://www.relation-graph.com/images/school-map.png`}
        style={{ width: '100%', pointerEvents: 'none' }}
    />
</div>

The background image provides geographic context, making visualization more intuitive.

State Management

Use React state to manage currently selected group and member:

const [activeGroupId, setActiveGroupId] = React.useState('');
const [activeMemberName, setActiveMemberName] = React.useState('');

const onGroupClick = async (groupId: string) => {
    setActiveGroupId(groupId);
    setActiveMemberName('');
};

const onMemberClick = (memberName: string) => {
    setActiveGroupId('');
    setActiveMemberName(memberName);
};

Ensures only one type of relationship is displayed at a time.

Responsive Updates

Use useEffect to listen for state changes and update connection lines:

useEffect(() => {
    updateMyLines();
}, [activeGroupId, activeMemberName]);

Automatically re-render relationship lines whenever selection changes.

Z-Index Layer Control

Use different z-index values to control element layering:

<div style={{ zIndex: 1 }}> {/* background map */}</div>
<div style={{ zIndex: 2 }}> {/* location markers on map */}</div>
<div style={{ zIndex: 10 }}> {/* interest groups list */}</div>
<div style={{ zIndex: 20 }}> {/* members list */}</div>

Ensures UI elements stack in the correct order.

Creative Use Cases

Campus Facility Navigation

Create campus map applications showing buildings, cafeterias, libraries and other facilities with student relationships. Click facilities to see students using them, click students to see places they frequent.

Exhibition Navigation Systems

Use for exhibition or conference booth navigation, showing exhibitor locations and visitor interest matching. Click booths to see interested visitors, help business matching.

Social Activity Matching

Show participant and interest group matching in social activities. Help participants find like-minded people, promote communication.

Resource Allocation Visualization

Show offices, conference rooms, workstations and other resources with employee relationships. Click resources to see users, click employees to see all resources they use.

Service Network Visualization

Show service centers, service points and customer locations. Help optimize service coverage and resource allocation.

Smart Home Control

Display smart devices and room relationships on floor plans. Click devices to see rooms, click rooms to see all devices.

Logistics Delivery Network

Show distribution stations, packages and delivery person relationships. Optimize delivery routes and resource allocation.

Retail Store Layout Analysis

Display product categories and customer shopping basket relationships on store floor plans. Analyze customer behavior and product associations.

Emergency Evacuation Planning

Show building exits, safe zones and personnel location relationships. Help develop emergency evacuation plans.

Tourism Attraction Recommendations

Display attractions and tourist interest relationships on maps. Provide personalized tourism recommendations.