Network shapes

[vincerubinetti]

Supercedes #38 (thanks @AleruDivine for doing the initial investigation)
Closes #20

• move cytoscape style definitions to inside components so they can use reactive values
• make use of shapes as a accessible backup to colors for nodes†
• change cursor on node/edge hover to indicate clickability
• fix resize bug
• use cytoscape's custom polygon feature for node shapes
• add color mix util func
• add util func to generate shapes as array of x/y coords

† in the future, if we really really need it, we could have the shape of a node be tied to a second, separate arbitrary type parameter. this would only take a few lines of modification. but i'd like to avoid that if at all possible, since it's good to have the shapes there for accessibility. also, having two separate types per node being visualized will make the graph harder to visually parse. the user can always click on the node to get the complete details. we can show as many types there as we want.

[netlify]

✅ Deploy Preview for molevolvr ready!

Name	Link
🔨 Latest commit	4b6a688
🔍 Latest deploy log	https://app.netlify.com/sites/molevolvr/deploys/672cfabf872f040008b6b3e9
😎 Deploy Preview	https://deploy-preview-41--molevolvr.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vincerubinetti]

If anyone is curious, Axe just caught an actual accessibility issue: The network legend is a scrollable area but is not keyboard focusable (see this issue for a short discussion of why it's a problem).

So it's nice that it's doing it's job.