// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Graph gracefully renders a graph with a selected node id that does not exist 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.292526819072776,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph handles an empty graph 1`] = `""`;

exports[`Graph renders a complex graph with six nodes and seven edges 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 75,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="flipcoin1"
    >
      <div
        className="label"
      >
        flipcoin1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 45,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="tails1"
    >
      <div
        className="label"
      >
        tails1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="2"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 105,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="heads1"
    >
      <div
        className="label"
      >
        heads1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="3"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 45,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 125,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="flipcoin2"
    >
      <div
        className="label"
      >
        flipcoin2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="4"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 185,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="heads2"
    >
      <div
        className="label"
      >
        heads2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="5"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 85,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 185,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="tails2"
    >
      <div
        className="label"
      >
        tails2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 53.599705252806814,
          "top": 65,
          "transform": "rotate(-162.53607310815718deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 93.80058949438637,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 25.707473180927224,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 21,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": 20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="1"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 54.44597636009023,
          "top": 65,
          "transform": "rotate(-169.35712925529643deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 152.10804727981954,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 85.70747318092722,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 81,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": 80,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="2"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 24.12512781199456,
          "top": 125,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 25.707473180927224,
          "top": 136.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 21,
          "top": 138.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": 20,
          "top": 127,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="3"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 23.342363464399483,
          "top": 125,
          "transform": "rotate(-160.48412699041728deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 84.31527307120105,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 89.75,
          "top": 154,
          "transform": "rotate(-90deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 30.5,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 89.75,
          "top": 184,
          "transform": "rotate(-90deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 30.5,
        }
      }
    />
    <div
      className="line"
      key="3"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.292526819072776,
          "top": 196.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="4"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 198.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 187,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="4"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 24.52670720293925,
          "top": 125,
          "transform": "rotate(-170.01257842498643deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 161.9465855941215,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 169.75,
          "top": 154,
          "transform": "rotate(-90deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 30.5,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 169.75,
          "top": 184,
          "transform": "rotate(-90deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 30.5,
        }
      }
    />
    <div
      className="line"
      key="3"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 65.70747318092722,
          "top": 196.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="4"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 61,
          "top": 198.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": 60,
          "top": 187,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="5"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 24.12512781199456,
          "top": 185,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.281833249334824,
          "top": 196.75,
          "transform": "rotate(1.6211459136534117deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 159.56366649866965,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 198.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 187,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
  <div
    key="6"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 24.661645340032806,
          "top": 185,
          "transform": "rotate(-171.10957674263614deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 181.6767093199344,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 65.71358867470941,
          "top": 196.75,
          "transform": "rotate(1.8542517148477853deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 139.57282265058117,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": 61,
          "top": 198.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": 60,
          "top": 187,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with a placeholder node and edge 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="placeholderNode graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#9aa0a6",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#9aa0a6",
          "height": 2,
          "left": 92.25,
          "top": 91.5,
          "transform": "rotate(-90deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 25.5,
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with a selected node 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode nodeSelected"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#1a73e8",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#1a73e8",
          "height": 2,
          "left": -14.292526819072776,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#1a73e8",
          "height": 2,
          "left": -19,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#1a73e8",
          "left": -20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with colored edges 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.292526819072776,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with colored nodes 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": "red",
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": "green",
        "left": 65,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
</div>
`;

exports[`Graph renders a graph with one node 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
</div>
`;

exports[`Graph renders a graph with two connectd nodes 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.292526819072776,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with two connectd nodes in reverse order 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 65,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    key="0"
  >
    <div
      className="line"
      key="0"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -15.87487218800544,
          "top": 65,
          "transform": "rotate(-166.75948008481282deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 122.74974437601087,
        }
      }
    />
    <div
      className="line"
      key="1"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -14.292526819072776,
          "top": 76.75,
          "transform": "rotate(2.165615252902859deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": 119.58505363814554,
        }
      }
    />
    <div
      className="line"
      key="2"
      style={
        Object {
          "backgroundColor": "#5f6368",
          "height": 2,
          "left": -19,
          "top": 78.5,
          "transform": "rotate(270deg)",
          "transition": "left 0.5s, top 0.5s",
          "width": -4.5,
        }
      }
    />
    <div
      className="arrowHead"
      style={
        Object {
          "borderTopColor": "#5f6368",
          "left": -20,
          "top": 67,
          "transform": "rotate(360deg)",
        }
      }
    />
  </div>
</div>
`;

exports[`Graph renders a graph with two disparate nodes 1`] = `
<div
  className="root"
>
  <div
    className="node graphNode"
    key="0"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 5,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node1"
    >
      <div
        className="label"
      >
        node1
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="node graphNode"
    key="1"
    onClick={[Function]}
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
    style={
      Object {
        "backgroundColor": undefined,
        "left": 65,
        "maxHeight": 10,
        "minHeight": 10,
        "top": 5,
        "transition": "left 0.5s, top 0.5s",
        "width": 10,
      }
    }
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      title="node2"
    >
      <div
        className="label"
      >
        node2
      </div>
    </WithStyles(Tooltip)>
    <div
      className="icon"
      style={
        Object {
          "background": undefined,
        }
      }
    >
      <WithStyles(Tooltip)
        title="Test icon tooltip"
      >
        <pure(CheckCircleIcon) />
      </WithStyles(Tooltip)>
    </div>
  </div>
</div>
`;

exports[`Graph shows an error message when the graph is invalid 1`] = `"<div class=\\"root\\"></div>"`;
