function Graph()

in fixtures/fiber-debugger/src/Fibers.js [17:137]
114 lines of code
14 McCabe index (conditional complexity)

function Graph(props) {
  const {rankdir, trackActive} = props.settings;
  var g = new dagre.graphlib.Graph();
  g.setGraph({
    width: 1000,
    height: 1000,
    nodesep: 50,
    edgesep: 150,
    ranksep: 100,
    marginx: 100,
    marginy: 100,
    rankdir,
  });

  var edgeLabels = {};
  React.Children.forEach(props.children, function(child) {
    if (!child) {
      return;
    }
    if (child.type.isVertex) {
      g.setNode(child.key, {
        label: child,
        width: child.props.width,
        height: child.props.height,
      });
    } else if (child.type.isEdge) {
      const relationshipKey = child.props.source + ':' + child.props.target;
      if (!edgeLabels[relationshipKey]) {
        edgeLabels[relationshipKey] = [];
      }
      edgeLabels[relationshipKey].push(child);
    }
  });

  Object.keys(edgeLabels).forEach(key => {
    const children = edgeLabels[key];
    const child = children[0];
    g.setEdge(child.props.source, child.props.target, {
      label: child,
      allChildren: children.map(c => c.props.children),
      weight: child.props.weight,
    });
  });

  dagre.layout(g);

  var activeNode = g
    .nodes()
    .map(v => g.node(v))
    .find(node => node.label.props.isActive);
  const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2];
  var focusDx = trackActive && activeNode ? winX - activeNode.x : 0;
  var focusDy = trackActive && activeNode ? winY - activeNode.y : 0;

  var nodes = g.nodes().map(v => {
    var node = g.node(v);
    return (
      <Motion
        style={{
          x: props.isDragging ? node.x + focusDx : spring(node.x + focusDx),
          y: props.isDragging ? node.y + focusDy : spring(node.y + focusDy),
        }}
        key={node.label.key}>
        {interpolatingStyle =>
          React.cloneElement(node.label, {
            x: interpolatingStyle.x + props.dx,
            y: interpolatingStyle.y + props.dy,
            vanillaX: node.x,
            vanillaY: node.y,
          })
        }
      </Motion>
    );
  });

  var edges = g.edges().map(e => {
    var edge = g.edge(e);
    let idx = 0;
    return (
      <Motion
        style={edge.points.reduce((bag, point) => {
          bag[idx + ':x'] = props.isDragging
            ? point.x + focusDx
            : spring(point.x + focusDx);
          bag[idx + ':y'] = props.isDragging
            ? point.y + focusDy
            : spring(point.y + focusDy);
          idx++;
          return bag;
        }, {})}
        key={edge.label.key}>
        {interpolatedStyle => {
          let points = [];
          Object.keys(interpolatedStyle).forEach(key => {
            const [idx, prop] = key.split(':');
            if (!points[idx]) {
              points[idx] = {x: props.dx, y: props.dy};
            }
            points[idx][prop] += interpolatedStyle[key];
          });
          return React.cloneElement(edge.label, {
            points,
            id: edge.label.key,
            children: edge.allChildren.join(', '),
          });
        }}
      </Motion>
    );
  });

  return (
    <div
      style={{
        position: 'relative',
        height: '100%',
      }}>
      {edges}
      {nodes}
    </div>
  );
}