Custom Connections

The SupplyChain component includes a rendering feature that enables users to customize connection visualizations. It grants control over parameters such as stroke, bend smoothing, thickness, and arrow styles.

The rendering process employs an SVG path element, allowing for the utilization of CSS to customize the stroke or incorporate transitions by defining a className. Note that to optimize performance, and depending on the implementation, it might be necessary to memoize the rendering function.

The supply chain component supports grouping and folding of elements in the graph.

For a “simple” connection, the parameter passed to the connection style provider is an array with only one entry containing the supply chain connection as well as the source and target supply chain items.

A folding connection is visualized when group nodes are collapsed. The folding connection then contains all the connections that exist between two collapsed groups. In this case, the array parameter to the connection style provider contains the information of all edges contained in the folding edge.