AI Model Relationship Visualization

Visualizes AI model component relationships using fake lines to connect specific DOM elements within nodes.

AI Model Relationship Visualization

Functional Overview

This demo visualizes relationships between AI model components, showing how outputs from one model connect to inputs of another. It uses fixed positioning with fake lines to connect specific DOM elements within nodes.

Implementation of Key Features

1. Fixed Position Layout

Use saved positions for nodes:

const nodesPosition = [
    { id: 'm-a', x: -930.17, y: -357.63 },
    { id: 'm-b', x: -456.67, y: -468.67 },
    // ... more positions
];

myJsonData.nodes.forEach((model, index) => {
    const position = nodesPosition.find(n => n.id === model.id);
    if (position) {
        model.x = position.x;
        model.y = position.y;
    }
});

2. Fake Lines for Element Connections

Connect specific DOM elements within nodes:

myJsonData.fakeLines = modelRelations.map((relation, index) => {
    return {
        id: `line-${index}`,
        from: `O_${relation.output_model}-${relation.output_param_name}`,
        to: `I_${relation.input_model}-${relation.input_param_name}`,
        fromJunctionPoint: RGJunctionPoint.right,
        toJunctionPoint: RGJunctionPoint.left,
        lineShape: RGLineShape.StandardCurve,
        lineWidth: 3,
        color: dataTypeColorMap[outputParam.type],
        isFakeLine: true
    };
});

3. Custom Node Component

Render AI model nodes with input/output ports:

const MyAIModel = ({ node }: RGNodeSlotProps) => {
    return (
        <div className="ai-model-node">
            <div className="model-header">{node.text}</div>
            <div className="model-inputs">
                {node.data.input.map(param => (
                    <div id={`I_${node.id}-${param.name}`} className="port">
                        {param.name}
                    </div>
                ))}
            </div>
            <div className="model-outputs">
                {node.data.output.map(param => (
                    <div id={`O_${node.id}-${param.name}`} className="port">
                        {param.name}
                    </div>
                ))}
            </div>
        </div>
    );
};

4. Animated Line Highlighting

Highlight connections when clicking nodes:

const onNodeClick = (node: RGNode) => {
    const elLines = graphInstance.getFakeLines();
    elLines.forEach((line: any) => {
        const keywords = `_${node.id}-`;
        const refed = line.from.includes(keywords) || line.to.includes(keywords);
        line.animation = refed ? 2 : undefined;
    });
};

5. Data Type Color Coding

Use colors to indicate data types:

const dataTypeColorMap = {
    'tensor': '#ff6b6b',
    'float': '#4ecdc4',
    'int': '#45b7d1',
    'string': '#96ceb4'
};

Creative Use Cases

• Machine Learning Pipelines: Visualize ML model pipelines
• Data Flow Diagrams: Show data flow between components
• System Architecture: Document system component relationships
• API Integration Maps: Display API endpoint connections
• Circuit Design: Visualize circuit component connections
• Process Modeling: Model complex process interactions