(fix) Fix multiple edges with the same source and target node being hidden. Fix attribute warnings.

Author: leMaik

src/Graph.js

@@ -5,7 +5,7 @@ function isOutputPort ({ id }) {
   return /.+_out$/.test(id)
 }
 
-function Port ({ port }) {
+function Port ({ graph, port }) {
   return (
     <rect
       x={port.x}
@@ -18,7 +18,7 @@ function Port ({ port }) {
   )
 }
 
-function getPath (e, padding, startsAtParent = null) {
+function getPath (e, padding, startsAtParent = false) {
   let path
   if (startsAtParent) {
     path = 'M ' + e.sourcePoint.x + ' ' + e.sourcePoint.y + ' '
@@ -33,7 +33,7 @@ function getPath (e, padding, startsAtParent = null) {
   return path
 }
 
-function Edge ({ parentNode, edge, padding = { top: 0, left: 0 }, ...other }) {
+function Edge ({ graph, parentNode, edge, padding = { top: 0, left: 0 }, ...other }) {
   let endPoint = edge.targetPoint
   let previousPoint = edge.bendPoints != null && edge.bendPoints.length > 0 ? edge.bendPoints[edge.bendPoints.length - 1] : edge.sourcePoint
   const angle = Math.atan2(endPoint.y - previousPoint.y, endPoint.x - previousPoint.x) * 180 / Math.PI
@@ -92,7 +92,7 @@ function Node ({ graph, node, ...other }) {
         </text>
         {Array.isArray(node.edges) && node.edges.map((edge) => (
           <Edge
-            key={`e-${edge.source}-${edge.target}`}
+            key={`e-${edge.source}@${edge.sourcePort}-${edge.target}@${edge.targetPort}`}
             graph={graph}
             parentNode={node}
             edge={edge}

stories/fixture-001.json

@@ -0,0 +1 @@
+{"id":"root","children":[{"id":"#cj64v13mt0002baluv27c5a65","labels":[{"text":"#cj64v13mt0002baluv27c5a65"}],"children":[{"id":"#cj64v13n20004baludxnz4a34","labels":[{"text":"cc"}],"children":[{"id":"#cj64v13n00003baluprcvy7ut","labels":[{"text":"a"}],"children":[],"ports":[{"id":"#cj64v13n00003baluprcvy7ut_in_in","meta":{"type":"number","name":{"port":"in","kind":"input","type":"number","node":"#cj64v13n00003baluprcvy7ut"}}},{"id":"#cj64v13n00003baluprcvy7ut_out_out","meta":{"type":"number","name":{"port":"out","kind":"output","type":"number","node":"#cj64v13n00003baluprcvy7ut"}}}],"edges":[],"meta":{}}],"ports":[{"id":"#cj64v13n20004baludxnz4a34_in_in","meta":{"type":"string","name":{"port":"in","kind":"input","type":"string","node":"#cj64v13n20004baludxnz4a34"}}},{"id":"#cj64v13n20004baludxnz4a34_outA_out","meta":{"type":"string","name":{"port":"outA","kind":"output","type":"string","node":"#cj64v13n20004baludxnz4a34"}}},{"id":"#cj64v13n20004baludxnz4a34_outB_out","meta":{"type":"string","name":{"port":"outB","kind":"output","type":"string","node":"#cj64v13n20004baludxnz4a34"}}},{"id":"#cj64v13n20004baludxnz4a34_outC_out","meta":{"type":"string","name":{"port":"outC","kind":"output","type":"string","node":"#cj64v13n20004baludxnz4a34"}}}],"edges":[{"id":"#cj64v13n20004baludxnz4a34#cj64v13n00003baluprcvy7ut","source":"#cj64v13n20004baludxnz4a34","sourcePort":"#cj64v13n20004baludxnz4a34_in_in","target":"#cj64v13n00003baluprcvy7ut","targetPort":"#cj64v13n00003baluprcvy7ut_in_in","meta":{"sourceType":"string","targetType":"number","sourcePort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"in"},"targetPort":{"type":"generic","node":"#cj64v13n00003baluprcvy7ut","port":"in"},"layer":"dataflow"}},{"id":"#cj64v13n00003baluprcvy7ut#cj64v13n20004baludxnz4a34","source":"#cj64v13n00003baluprcvy7ut","sourcePort":"#cj64v13n00003baluprcvy7ut_out_out","target":"#cj64v13n20004baludxnz4a34","targetPort":"#cj64v13n20004baludxnz4a34_outC_out","meta":{"sourceType":"number","targetType":"string","sourcePort":{"type":"generic","node":"#cj64v13n00003baluprcvy7ut","port":"out"},"targetPort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"outC"},"layer":"dataflow"}}],"meta":{}}],"ports":[],"edges":[{"id":"#cj64v13n20004baludxnz4a34#cj64v13n20004baludxnz4a34","source":"#cj64v13n20004baludxnz4a34","sourcePort":"#cj64v13n20004baludxnz4a34_in_in","target":"#cj64v13n20004baludxnz4a34","targetPort":"#cj64v13n20004baludxnz4a34_outA_out","meta":{"sourceType":"string","targetType":"string","sourcePort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"in"},"targetPort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"outA"},"layer":"dataflow"}},{"id":"#cj64v13n20004baludxnz4a34#cj64v13n20004baludxnz4a34","source":"#cj64v13n20004baludxnz4a34","sourcePort":"#cj64v13n20004baludxnz4a34_in_in","target":"#cj64v13n20004baludxnz4a34","targetPort":"#cj64v13n20004baludxnz4a34_outB_out","meta":{"sourceType":"string","targetType":"string","sourcePort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"in"},"targetPort":{"type":"generic","node":"#cj64v13n20004baludxnz4a34","port":"outB"},"layer":"dataflow"}}],"meta":{"version":"0.4.0-pre.41"}}],"edges":[]}

stories/index.js

@@ -3,6 +3,7 @@ import { storiesOf } from '@kadira/storybook'
 import { GraphLayouter } from '../src'
 import fac from './fac.json'
 import facHighlighted from './facHighlighted.json'
+import fixture001 from './fixture-001.json'
 
 storiesOf('kgraph', module)
   .add('factorial', () => (
@@ -15,3 +16,8 @@ storiesOf('kgraph', module)
       kgraph={facHighlighted}
     />
   ))
+  .add('fixture 001', () => (
+    <GraphLayouter
+      kgraph={fixture001}
+    />
+  ))