File size: 2,582 Bytes
78dc980 dee7bd1 e3322d7 78dc980 dee7bd1 e3322d7 dee7bd1 e3322d7 dee7bd1 78dc980 dee7bd1 78dc980 dee7bd1 78dc980 dee7bd1 78dc980 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import { DSLComponents } from '@/interfaces/database/flow';
import dagre from 'dagre';
import { Edge, MarkerType, Node, Position } from 'reactflow';
import { v4 as uuidv4 } from 'uuid';
const buildEdges = (
operatorIds: string[],
currentId: string,
allEdges: Edge[],
isUpstream = false,
) => {
operatorIds.forEach((cur) => {
const source = isUpstream ? cur : currentId;
const target = isUpstream ? currentId : cur;
if (!allEdges.some((e) => e.source === source && e.target === target)) {
allEdges.push({
id: uuidv4(),
label: '',
// type: 'step',
source: source,
target: target,
markerEnd: {
type: MarkerType.Arrow,
},
});
}
});
};
export const buildNodesAndEdgesFromDSLComponents = (data: DSLComponents) => {
const nodes: Node[] = [];
let edges: Edge[] = [];
Object.entries(data).forEach(([key, value]) => {
const downstream = [...value.downstream];
const upstream = [...value.upstream];
nodes.push({
id: key,
type: 'textUpdater',
position: { x: 0, y: 0 },
data: {
label: value.obj.component_name,
params: value.obj.params,
downstream: downstream,
upstream: upstream,
},
sourcePosition: Position.Left,
targetPosition: Position.Right,
});
buildEdges(upstream, key, edges, true);
buildEdges(downstream, key, edges, false);
});
return { nodes, edges };
};
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
const nodeWidth = 172;
const nodeHeight = 36;
export const getLayoutedElements = (
nodes: Node[],
edges: Edge[],
direction = 'TB',
) => {
const isHorizontal = direction === 'LR';
dagreGraph.setGraph({ rankdir: direction });
nodes.forEach((node) => {
dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
});
edges.forEach((edge) => {
dagreGraph.setEdge(edge.source, edge.target);
});
dagre.layout(dagreGraph);
nodes.forEach((node) => {
const nodeWithPosition = dagreGraph.node(node.id);
node.targetPosition = isHorizontal ? Position.Left : Position.Top;
node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
// We are shifting the dagre node position (anchor=center center) to the top left
// so it matches the React Flow node anchor point (top left).
node.position = {
x: nodeWithPosition.x - nodeWidth / 2,
y: nodeWithPosition.y - nodeHeight / 2,
};
return node;
});
return { nodes, edges };
};
|