Graph edges are visible through the nodes in the background

[fbarl]

Two solutions that came to my mind so far:

1. Clipping the edges so that they are only rendered outside of the shapes they connect. The idea sounds simple, but in practice I see three obstacles that added together show the deficiency of this approach:
   a. SVG outward clipping is not that straightforward and it would require us to express rect and circle elements as paths.
   b. It also sounds like a render-heavy thing to do, clipping every edge with (at least) two different paths.
   c. For this to work perferctly, we'd actually also need to clip the edge with all the nodes that intersect its path, or potentially all the nodes, since it's not easy to say which ones are on its path :/
2. Another approach would be to never actually change the node shape opacity, but to either change their colors to better match the background or to add a non-reactive semi-transparent DOM element between the background and foreground nodes. Either way, the rendering order should then be something like background edges -> background nodes -> foreground edges -> foreground nodes so that the foreground edges are not shown behind the background nodes. Since we can't explicitly control the rendering order, but it follows implicitly from the SVG DOM elements order, this would require breaking the current grouping of nodes vs. edges and making both of these render in a mixed order from one component. The challenge is how to mix them in a React-friendly way, so that e.g. their motion doesn't break when they get reordered, but so far this looks doable!