react-flow Simple Tree Traverse

react-flow-simple-traverse.js

const data = {
  nodes: [
    {
      width: 150,
      height: 36,
      id: "id_1",
      data: { label: "Node 1" },
      position: { x: 100, y: 100 },
      positionAbsolute: { x: 100, y: 100 },
    },
    {
      width: 150,
      height: 36,
      id: "id_2",
      data: { label: "Node 2" },
      position: { x: 100, y: 200 },
      positionAbsolute: { x: 100, y: 200 },
    },
    {
      width: 150,
      height: 36,
      id: "id_3",
      data: { label: "Node 3" },
      position: { x: 62.10667336653029, y: 314.0079735765023 },
      selected: false,
      positionAbsolute: { x: 62.10667336653029, y: 314.0079735765023 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_4",
      data: { label: "Node 4" },
      position: { x: -42.820047976240744, y: 415.3351563257392 },
      selected: false,
      positionAbsolute: { x: -42.820047976240744, y: 415.3351563257392 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_5",
      data: { label: "Node 5" },
      position: { x: 129.71011279694372, y: 412.966945826345 },
      selected: false,
      positionAbsolute: { x: 129.71011279694372, y: 412.966945826345 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_6",
      data: { label: "Node 6" },
      position: { x: 71.27066343442436, y: 411.53695324696116 },
      selected: false,
      positionAbsolute: { x: 71.27066343442436, y: 494.53695324696116 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_7",
      data: { label: "Node 7" },
      position: { x: 330.66069809495764, y: 312.25757535042317 },
      selected: false,
      positionAbsolute: { x: 330.66069809495764, y: 312.25757535042317 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_8",
      data: { label: "Node 8" },
      position: { x: 285.52446490170655, y: 375.74627161460035 },
      selected: false,
      positionAbsolute: { x: 285.52446490170655, y: 375.74627161460035 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_9",
      data: { label: "Node 9" },
      position: { x: 247.94234003023485, y: 458.720539712898 },
      selected: false,
      positionAbsolute: { x: 247.94234003023485, y: 458.720539712898 },
      dragging: false,
    },
    {
      width: 150,
      height: 36,
      id: "id_10",
      data: { label: "Node 10" },
      position: { x: 313.5577375539681, y: 400.5340202122127 },
      selected: true,
      positionAbsolute: { x: 313.5577375539681, y: 533.5340202122127 },
      dragging: false,
    },
  ],
  edges: [
    { id: "e1-2", source: "id_1", target: "id_2" },
    { source: "id_2", sourceHandle: null, target: "id_3", targetHandle: null, id: "reactflow__edge-id_2-id_3" },
    { source: "id_3", sourceHandle: null, target: "id_4", targetHandle: null, id: "reactflow__edge-id_3-id_4" },
    { source: "id_3", sourceHandle: null, target: "id_5", targetHandle: null, id: "reactflow__edge-id_3-id_5" },
    { source: "id_5", sourceHandle: null, target: "id_6", targetHandle: null, id: "reactflow__edge-id_5-id_6" },
    { source: "id_2", sourceHandle: null, target: "id_7", targetHandle: null, id: "reactflow__edge-id_2-id_7" },
    { source: "id_7", sourceHandle: null, target: "id_8", targetHandle: null, id: "reactflow__edge-id_7-id_8" },
    { source: "id_8", sourceHandle: null, target: "id_9", targetHandle: null, id: "reactflow__edge-id_8-id_9" },
    { source: "id_9", sourceHandle: null, target: "id_10", targetHandle: null, id: "reactflow__edge-id_9-id_10" },
  ],
  viewport: { x: 0, y: 0, zoom: 1 },
};

const nodeMap = data.nodes.reduce((a, i) => {
  a[i.id] = i;
  return a;
}, {});

const edgeMap = data.edges.reduce((a, i) => {
  if (!a[i.source]) {
    a[i.source] = [];
  }
  a[i.source].push(i);
  return a;
}, {});

data.nodes.forEach((node) => {
  node.children = (edgeMap[node.id] || [])
    .reduce((a, e) => {
      if (nodeMap[e.target].position.y > node.position.y) {
        a.push(nodeMap[e.target]);
      }
      return a;
    }, [])
    .sort((a, b) => a.position.x - b.position.x);
});

const dfs = (node) => {
  console.log(node.id);
  node.children?.forEach(bfs);
};
// console.log(JSON.stringify(data.nodes[0], null, 2));

dfs(data.nodes[0]);