Graph() — react Function Reference

Architecture documentation for the Graph() function in Fibers.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ Graph() — react Function Reference

Dependency Diagram

graph TD
  162f2efa_3223_5911_b25c_8420e3bc0409["Graph()"]
  a811b6d7_3802_33c4_440e_c2d161277e14["Fibers.js"]
  162f2efa_3223_5911_b25c_8420e3bc0409 -->|defined in| a811b6d7_3802_33c4_440e_c2d161277e14
  style 162f2efa_3223_5911_b25c_8420e3bc0409 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/fiber-debugger/src/Fibers.js lines 17–137

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) => {