Add different node shapes to network visualization

[vincerubinetti]

The network visualization currently indicates different "types" of nodes/edges by using different colors. For accessibility, we'd like to have a different shape for each unique color. Basically, we want to map each unique color here to a different cytoscape node shape, then use those shapes for the nodes based on their type in the same way that color is done.

We unfortunately can't really do this with the edges. The only non-color styling we could apply to lines to distinguish different types is dash patterns, but I think doing that will actually make the visualization harder to read/understand.

A challenge for this is that the legend will need to show these shapes. Currently it's just showing simple circles. try to find a way to extra the raw point geometry of all the shapes from the Cytoscape library, so we don't have to re-define them all ourselves. The source code where Cytoscape generates these seems to be here:

https://github.com/cytoscape/cytoscape.js/blob/bce954c2bc34b88c46fe4503af9eb8b824fb6ffd/src/extensions/renderer/base/node-shapes.js#L522

Perhaps we can import that BRp object somehow.

[kemsguy7]

Looks interesting , would love to take this up too, if no one else is assigned

[vincerubinetti]

Since you've already claimed #19, let's give other people a chance to participate and claim this one. If no one has claimed it in a few days, you can have it.

[AleruDivine]

Hi @vincerubinetti, I'd like to be assigned this issue.

[AleruDivine]

Thanks!