React

by Gabriel Correa

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function createFlowChart(nodes) {
  const parentMap = {};
  nodes.forEach(node => {
    parentMap[node.target] = node.source;
  });

  const result = [];
  nodes.forEach(node => {
    const parentId = parentMap[node.source];
    if (parentId) {
      const parentNode = nodes.find(p => p.source === parentId);
      const parentNodeIndex = result.findIndex(p => p.name === parentNode.name);
      if (parentNodeIndex >= 0) {
        if (!result[parentNodeIndex].children) {
          result[parentNodeIndex].children = [];
        }
        result[parentNodeIndex].children.push({ name: node.name });
      } else {
        result.push({ name: parentNode.name, children: [{ name: node.name }] });
      }
    } else {
      result.push({ name: node.name, children: [] });
    }
  });

  return result;
}	

console.log(createFlowChart([
    {
      "id": "entrance-1",
      "type": "input",
      "data": {
        "label": "Entrance"
      },
      "position": {
        "x": 250,
        "y": 0
      },
      "style": {
        "padding": "10px 20px",
        "borderRadius": 5,
        "background": "#343435",
        "color": "#f9f9f9",
        "border": "1px solid #CEF564"
      },
      "width": 150,
      "height": 36
    },
    {
      "id": "exit-1",
      "data": {
        "label": "Exit"
      },
      "position": {
        "x": 180,
        "y": 300
      },
      "type": "output",
      "style": {
        "padding": "10px 20px",
        "borderRadius": 5,
        "background": "#343435",
        "color": "#f9f9f9",
        "border": "1px solid #FC4731",
        "fontFamily": "system-ui",
        "fontSize": 14
      },
      "width": 150,
      "height": 39,
      "selected": false,
      "positionAbsolute": {
        "x": 180,
        "y": 300
      },
      "dragging": false
    },
    {
      "id": "Find in collection-reactflow__edge-entrance-1-exit-1",
      "data": {
        "label": "Find in collection",
        "toolbarPosition": "right"
      },
     ...