Node and Line Tooltips with Context Menus

Demonstrates hover tooltips and right-click context menus for nodes and lines, positioned using viewport coordinates and rendered via RGSlotOnView for fullscreen compatibility.

Node and Line Tooltips with Context Menus

Functional Overview

This example demonstrates implementing hover tooltips and right-click context menus for both nodes and lines. The tooltips and menus are positioned using viewport-relative coordinates and rendered via RGSlotOnView, ensuring they remain visible even in fullscreen mode.

Implementation of Key Features

Mouse Movement Tracking for Tooltips

const onMouseMove = ($event: React.MouseEvent) => {
    const el = $event.target as HTMLElement;
    const node = graphInstance.isNode(el);
    const viewRect = graphInstance.getViewBoundingClientRect();
    const position = {
        x: $event.clientX - viewRect.left + 10,
        y: $event.clientY - viewRect.top + 10
    };

    if (node) {
        setCurrentNode(node);
        setNodeTipsPosition(position);
        setIsShowNodeTips(true);
        setIsShowLineTips(false);
    } else {
        setIsShowNodeTips(false);
        const line = graphInstance.isLine(el);
        if (line) {
            const link = graphInstance.getLinkByLine(line);
            if (link) {
                setCurrentLink(link);
                setCurrentLine(line);
                setLineTipsPosition(position);
                setIsShowLineTips(true);
            }
        } else {
            setIsShowLineTips(false);
        }
    }
};

Context Menu Handler

const onContextmenu = ($event: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined) => {
    hideAllPanel();
    const viewRect = graphInstance.getViewBoundingClientRect();
    const position = {
        x: event.clientX - viewRect.left + 10,
        y: event.clientY - viewRect.top + 10
    };

    if (objectType === 'node' && object) {
        const node = object as RGNode;
        graphInstance.setCheckedNode(node.id);
        setCurrentNode(node);
        setNodeMenuPanelPosition(position);
        setIsShowNodeMenuPanel(true);
    } else if (objectType === 'line' && object) {
        const line = object as RGLine;
        const link = graphInstance.getLinkByLine(line);
        if (link) {
            setCurrentLink(link);
            setCurrentLine(line);
            setLineMenuPosition(position);
            setIsShowLineMenuPanel(true);
        }
    }
};

Rendering in View Slot

<RGSlotOnView>
    {isShowNodeTips && (
        <div className="c-tips" style={{ left: nodeTipsPosition.x, top: nodeTipsPosition.y }}>
            <div>NodeId: {currentNode?.text}</div>
            <div>Icon: {currentNode?.data?.myicon}</div>
        </div>
    )}
    {isShowLineTips && (
        <div className="c-tips" style={{ left: lineTipsPosition.x, top: lineTipsPosition.y }}>
            <div>Text: {currentLine?.text}</div>
            <div>From: {currentLink?.fromNode.text}</div>
            <div>To: {currentLink?.toNode.text}</div>
        </div>
    )}
</RGSlotOnView>

Creative Use Cases

Knowledge Graphs: Display entity details on hover and show relationship editing options via context menus. Users can quickly inspect and modify graph structure.

Network Management: Show device status and connection details in tooltips. Context menus provide quick access to configuration and troubleshooting options.

Process Automation: Hover over process nodes to see current status and metrics. Right-click to access actions like start, stop, or reconfigure processes.

Social Networks: Display user profile information on hover. Context menus offer actions like message, follow, or view connections.

Supply Chain Management: Show inventory levels and supplier info on hover. Context menus enable quick reordering or supplier switching.

Project Management: Hover over tasks to see details and progress. Right-click to change status, assign resources, or set dependencies.

Code Dependency Visualization: Display function/class details on hover. Context menus provide navigation to definitions or refactoring options.