AI 模型关系可视化

使用假线可视化 AI 模型组件关系，连接节点内的特定 DOM 元素。

AI 模型关系可视化

功能概述

此示例可视化 AI 模型组件之间的关系，显示一个模型的输出如何连接到另一个模型的输入。它使用固定定位和假线来连接节点内的特定 DOM 元素。

核心特性实现

1. 固定位置布局

为节点使用保存的位置：

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

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. 元素连接的假线

连接节点内的特定 DOM 元素：

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. 自定义节点组件

渲染带有输入/输出端口的 AI 模型节点：

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. 动画线条高亮

单击节点时高亮连接：

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. 数据类型颜色编码

使用颜色指示数据类型：

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

创意使用场景

• 机器学习管道：可视化 ML 模型管道
• 数据流图：显示组件之间的数据流
• 系统架构：记录系统组件关系
• API 集成映射：显示 API 端点连接
• 电路设计：可视化电路组件连接
• 流程建模：建模复杂的流程交互