Custom Expand/Collapse Buttons

Custom expand/collapse buttons for root node with separate controls for left-side and right-side children.

Custom Expand/Collapse Buttons

Functional Overview

This demo shows how to create custom expand/collapse buttons for the root node, with separate controls for left-side and right-side children. It demonstrates advanced node slot customization with interactive elements.

Implementation of Key Features

1. Custom Node Slot with Buttons

Add expand/collapse buttons in node slot:

<RGSlotOnNode>
    {({ node }) => {
        return node.lot.level === 0 ? (
            <div className="relative">
                <div className="node-content">{node.text}</div>

                {/* Left expand button */}
                <div
                    className="absolute -left-4"
                    onClick={toggleRootNodeLeft}
                >
                    {node.data.leftExpanded ? <MinusIcon /> : <PlusIcon />}
                </div>

                {/* Right expand button */}
                <div
                    className="absolute -right-4"
                    onClick={toggleRootNodeRight}
                >
                    {node.data.rightExpanded ? <MinusIcon /> : <PlusIcon />}
                </div>
            </div>
        ) : (
            <div>{node.text}</div>
        );
    }}
</RGSlotOnNode>

2. Toggle Left Children

Control visibility of left-side nodes:

const toggleRootNodeLeft = async () => {
    const rootNode = graphInstance.getRootNode();
    if (rootNode) {
        graphInstance.updateNodeData(rootNode, {
            leftExpanded: !rootNode.data.leftExpanded
        });

        const relatedNodes = graphInstance.getNodeRelatedNodes(rootNode);
        const leftNodes = relatedNodes.filter(n => n.lot.level < 0);

        leftNodes.forEach(node => {
            graphInstance.updateNode(node, {
                hidden: !rootNode.data.leftExpanded
            });
        });
    }
};

3. Toggle Right Children

Control visibility of right-side nodes:

const toggleRootNodeRight = async () => {
    const rootNode = graphInstance.getRootNode();
    if (rootNode) {
        graphInstance.updateNodeData(rootNode, {
            rightExpanded: !rootNode.data.rightExpanded
        });

        const relatedNodes = graphInstance.getNodeRelatedNodes(rootNode);
        const rightNodes = relatedNodes.filter(n => n.lot.level > 0);

        rightNodes.forEach(node => {
            graphInstance.updateNode(node, {
                hidden: !rootNode.data.rightExpanded
            });
        });
    }
};

4. Initialize with Expanded State

Set initial expand state:

const initializeGraph = async () => {
    graphInstance.addNodes(treeJsonData.nodes);
    graphInstance.addLines(treeJsonData.lines);
    await graphInstance.doLayout();

    const rootNode = graphInstance.getRootNode();
    graphInstance.updateNodeData(rootNode, {
        leftExpanded: true,
        rightExpanded: true
    });
};

5. Level-Based Filtering

Use node.lot.level to distinguish sides:

const leftNodes = relatedNodes.filter(n => n.lot.level < 0);
const rightNodes = relatedNodes.filter(n => n.lot.level > 0);

Creative Use Cases

• Bidirectional Trees: Manage left and right subtrees independently
• Mind Maps: Control different thought branches separately
• Organization Charts: Expand/collapse different departments
• Decision Trees: Show/hide decision branches
• Network Topology: Control different network segments
• Interactive Tutorials: Guide users through complex graphs