Add different node shapes to network visualization #20
Assignees
Comments
vincerubinetti
added
frontend
|
Looks interesting , would love to take this up too, if no one else is assigned |
|
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. |
|
Hi @vincerubinetti, I'd like to be assigned this issue. |
|
Thanks! |
Closed
Merged
vincerubinetti
added a commit
that referenced
this issue
Nov 12, 2024
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
typein 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
BRpobject somehow.The text was updated successfully, but these errors were encountered: