Fix for inaccurate bidrectional edges on edge hover

[jpellizzari]

Fix for #2341

Fixes a bug where bi-drectional arrows don't show up when mousing over the edge. Mousing over the node has always worked, but edge mouseover did not because only one edge is hover-able.

@fbarl Could you review please?

[jpellizzari]

@fbarl Simplified with the approach you laid out.

[fbarl]

Hmm okay so my original thought would be not to add a bunch of extra edges that are not bidirectional to the highlightedEdgeIds list. It would be confusing to someone looking at the state tree and seeing a bunch of edges that don't exist.

I absolutely agree the only proper way to do it would be not to include non-existent IDs there, but that's also something that could be done without bidirectionality information (if we intersect with the list of all edge IDs). That's what I plan to do in the next refactoring round by moving both highlightedEdgeIds and highlightedNodeIds into selectors. That will make this whole thing simpler :)

[fbarl]

I just discovered an issue that hopefully didn't leave a big mark so far, but is relevant for this story. Having EDGE_ID_SEPARATOR set to a simple dash isn't the best policy as host IDs can contain dashes, so an example edge we get looks something like:

ip-172-20-2-209;<host>-ip-172-20-1-176;<host>

Then a big mess happens when split(EDGE_ID_SEPARATOR).reverse().join(EDGE_ID_SEPARATOR) is executed on such a string. :) That resulted in this PR fix having no effect when I tested it on the Hosts topology.

A simple solution would be to set EDGE_ID_SEPARATOR to something that we can be fairly sure is never gonna be a part of a node ID. Perhaps -----? :D

[jpellizzari]

Nice catch! Updated the edge ID separator to several dashes

[fbarl]

LGTM! Don't forget to (at least partially) squash the commits.