Alternate, more intuitive representation of duplicate bubble boundary nodes

[fedarko]

Idea from Mihai: change the shapes -- so rather than showing two pentagons, one node is a triangle and the other one is a square (so it's still two nodes, but it looks like one node split up).

There are two cases to consider here:

1. This node is oriented fwd: set the "first" duplicate to a square/rectangle □ and the second one to a triangle facing right ▷
2. The node is oriented rev: set the "first" duplicate to a triangle facing left ◁ and the second one to a square/rectangle □

Another, related thing: I think we should adjust these nodes' sizes so that each of the duplicates has the area / dimensions of a node with exactly half of its length. This makes sense intuitively, although it might be annoying to rework the python code to make this happen.

Anyway, from here, everything is the same (and now we don't need to worry about that garish shade of pink) (garish is a good word).

If we eventually get to the point of using different node shapes (e.g. arrows -- see #211) then we can adjust the different shapes used here accordingly.

Checklist

• Figure out corresponding graphviz shapes to use
• Set these shapes for each node before running layout from python
• Pass this info to the JS, so that the correct shapes are used (might need to set up a custom shape-polygon-points string for Cytoscape.js to ensure that the shapes exactly match between Graphviz and Cytoscape.js; otherwise there may be weird issues that come up -- see Adjust xdot2cy.js polygon defns. to match the exact dimensions of GraphViz houses/invhouses fedarko/MetagenomeScope#31 for details of how to figure out what to put for this).
• Delete that godawful magenta