import DagreGraph from 'dagre-d3-react'

ReactDOM.render(
	<div>
		<DagreGraph
			nodes={nodes}
			links={links}
			config={{
				rankdir: 'LR',
				align: 'UL',
				ranker: 'tight-tree'
			}}
			width='500'
			height='500'
			animate={1000}
			shape='circle'
			fitBoundaries
			zoomable
			onNodeClick={e => console.log(e)}
			onRelationshipClick={e => console.log(e)}
		/>
	</div>,
	container
)

let data = await axios.post('/commit', {statements: [
    {statement: "match (a)-[r1]->(b) return a, r1, b", resultDataContents: ['graph']}
  ]
})

let dagreData = {
  nodes: [],
  links: []
}

data.data.results[0].data.forEach(row => {
  row.graph.nodes.forEach(node => dagreData.nodes.push(row))
  row.graph.relationships.forEach(node => dagreData.links.push(row))
})

return (
  <DagreGraph nodes={dagreData.nodes} links={dagreData.links}>
)

let data = {
  nodes: [
    {
      id: "1",
      label: "<h3>Node 1</h3>",
      labelType: "html"
    },
    {
      id: "2",
      label: "<h3>Node 2</h3>",
      labelType: "html",
      config: {
			  style: 'fill: #afa'
		  }
    }
  ],
  links: [
    {
      source: '1',
      target: '2',
      label: 'TO',
      config: {
			  arrowheadStyle: 'display: none',
			  curve: d3.curveBasis,
			  style: 'fill:none'
      }
    },
  ]
}

<DagreGraph nodes={dagreData.nodes} links={dagreData.links}>