Key for different node and link styles to enhance UX of your graph

[ndtreviv]

I'm creating a graph (force graph to be exact) showing the relationship between different types of entities that I'm pulling out of a graph database.

Each entity type has a different shape. Nodes within one entity type are sized and coloured differently according to certain properties (read: more "interesting" nodes are bigger and more colourful).

I want to format links differently to distinguish between different types of graph edge (ownedBy, affiliatedWith, resolvesTo etc).

As I'm doing this I'm thinking: I need a key to show the user what the different link styles actually mean.

It would be great if there was a <VisKey ... /> object that used all the same nodeFill etc functions to generate a key-based visualisation of each different node and link type/style.

OR, failing that, some way to render a single representation of a node or link rather than an entire graph...

ATM I'm thinking of creating a key that has a collection of <VisGraph.../> objects with hammed in data to show the different node styles.

[rokotyan]

Nice idea, we'll definitely consider it when we'll be working on #24

[ndtreviv]

@rokotyan I've discovered a bug with doing the key this way. The links don't render correctly on the main graph unless the key is visible. The arrows are missing, and the link labels only show the first and last character when the key is hidden. Even when the key is revealed the link label doesn't render correctly. I've included some screen shots.

Link on main graph when the Key graph is hidden:

Same link when the key graph is showing (we get arrows now, but text is wrong):

What it should look like (and looks like in the key):

[rokotyan]

@ndtreviv Could you please share an example reproducing that behavior over StackBlitz? I'm happy to take a look but from the screenshots it's not obvious what's going on.

[ndtreviv]

@ndtreviv Could you please share an example reproducing that behavior over StackBlitz? I'm happy to take a look but from the screenshots it's not obvious what's going on.

Sure, I tried to recreate the exact issue but had even more issues along the way: https://stackblitz.com/edit/react-qt6n9k?file=src/App.js

If you uncomment the linkLabel property on line 240 you'll see all the links just disappear.
However, if you leave it commented out, notice how the arrows disappear whenever you expand the graph key accordion panel.

[rokotyan]

@ndtreviv Thanks, I'm planning to look into it next week.

[rokotyan]

@ndtreviv Fixed in 1.1.0-beta.2