search

esnet / react-network-diagrams

Contains ESnet network mapping and circuit rendering code, as used in the ESnet portal.
http://software.es.net/react-network-diagrams
Other
196 stars 37 forks source link

pathColorMap prop not working with keys that are not camelCased #42

Open dkim67 opened 5 years ago

dkim67 commented 5 years ago

It seems if the path name values are not camelCased, it doesn't seem to render the corresponding color value.

const pathColorMap = { Ate23 Z1: "#00008b" Kile23 Zsd1: "#00008b" Byte23 : "#00008b" Ate24 21: "#00008b" }

or

const pathColorMap = { "Ate23 Z1": "#00008b" "Kile23 Zsd1": "#00008b" "Byte23" : "#00008b" "Ate24 21": "#00008b" }

The component does not seem to support either of these formats

sartaj10 commented 2 years ago

You need to make sure that the topology that you're passing contains a key "paths" which is an array of different paths available. Each element in the array is dict containing keys such as "ends", "steps" and "name". Here, "name" is important and if you set that correctly, this code should work fine

You can look at it here - https://github.com/esnet/react-network-diagrams/blob/master/packages/website/src/examples/paths/topo.json#L1921