in seatunnel-ui/src/views/task/synchronization-instance/detail/dag/use-dag-add-shape.ts [39:157]
export function useDagAddShape(
graph: any,
nodes: any,
edges: Array<any>,
t: any
) {
for (const i in nodes) {
const group = graph.addNode({
x: 40,
y: 40,
width: 360,
height: 160,
zIndex: 1,
attrs: {
body:
String(nodes[i].status.toLowerCase()) === 'failed' &&
'finished' &&
'canceled'
? stateColor.running
: stateColor[
nodes[i].status.toLowerCase() as
| 'failed'
| 'finished'
| 'canceled'
]
}
})
group.addTools({
name: 'button',
args: {
markup: [
{
tagName: 'text',
textContent: `pipeline#${nodes[i].pipelineId}`,
attrs: {
fill: '#333333',
'font-size': 14,
'text-anchor': 'center',
stroke: 'black'
}
},
{
tagName: 'text',
textContent: `${t('project.synchronization_instance.state')}: ${
nodes[i].status
}`,
attrs: {
fill: '#868686',
'font-size': 12,
'text-anchor': 'start',
x: '7em'
}
},
{
tagName: 'text',
textContent: `${t('project.synchronization_instance.read')} ${
nodes[i].readRowCount
}${t('project.synchronization_instance.line')}/${t(
'project.synchronization_instance.write'
)} ${nodes[i].writeRowCount}${t(
'project.synchronization_instance.line'
)}`,
attrs: {
fill: '#868686',
'font-size': 12,
'text-anchor': 'start',
x: '20em'
}
}
],
x: 0,
y: 0,
offset: { x: 0, y: -18 }
}
})
nodes[i].child.forEach((n: any) => {
group.addChild(
graph.addNode({
id: n.id,
// x: 50,
// y: 50,
// width: 120,
// height: 40,
shape: DagNodeName,
// label: n.label,
zIndex: 10,
// attrs: {
// body: {
// stroke: 'none',
// fill: '#858585'
// },
// label: {
// fill: '#fff',
// fontSize: 12
// }
// },
data: {
name: n.label
}
})
)
})
}
edges.forEach((e: any) => {
graph.addEdge({
shape: DagEdgeName,
source: {
cell: e.source
},
target: {
cell: e.target
},
id: e.id
})
})
}