Toggling visibility of links

[mixmix]

extends #6

I also love this tool, thanks so much @anvaka.

I'm making a graph has dense links, and I want to reveal link links for a given node only when I hover over that node. Like this :

(this is a community living on a decentralised database scuttlebutt)

In this setup, I've got dark links and light links, but would rather hide links.

The new API for hiding links is great :

var renderer = renderGraph(graph, {
  link: function createLinkUI(link) {
    if (link.data === 'hidden') return; // don't need to render!
    // otherwise return default link:
    return {
      fromColor: 0xFFFFFF,
      toColor: 0xFFFFFF
    };
  }
});

When we set up a renderer.on('nodehover', (node) => {...} ), it's then hard/ impossible to make make the links visible. (I'm not actually sure if they got created, I couldn't quite follow the code).
I've noticed that the node in that context has links which each have an id, but these can't be fetched using renderer.getLink

renderer.forEachLink also does nothing, suggesting there are no edges / links registered in the renderer.

Would appreciate any suggestions / ideas about how best to approach this.

[mixmix]

Looking at : https://github.com/anvaka/ngraph.pixel/blob/master/lib/edgeView.js#L66
seems possible to replace the basic implementation of three LineBasicMaterial with the parents class Material : https://threejs.org/docs/index.html#Reference/Materials/Material

checking viability of this approach.

[brienna]

Hi @mixmix did you manage to make this work?

[mixmix]

Sorry, it's been so long @brienna i and recall. I seem to remember it became too hard for what I needed it for so I may have just hacked something (like drawing all lines, but drawing them the same color as the background unless hover).

I think this was the repo my friend and I worked on
https://github.com/ssbc/ssb-graphviz

Looks like we were running a fork of ngraph.pixel but only for some styling, so send like we didn't solve the underlying problem

[brienna]

Thanks @mixmix! I totally get that it's been so long, thanks for popping back in! Your solution looks pretty neat, and I'm glad you found a hack that worked. Unfortunately it won't be ideal for bigger graphs like mine, which has 30,000+ nodes and 500,000+ edges. Panning and zooming is smooth if I hide the edges, but I still hope to show a node's edges on hover. I'll look at this a bit more to see if there's anything I can do, or if @anvaka might pop in to give some insight on how this might be possible with this codebase 🙏🏻

[mixmix]

Might be interesting to see if he'd take on implementing this for a donation? I will DM in a group he might be in in case he's interested (I don't know him well, no guarentees)

[mixmix]

(I'd be prepared to chip in some money too)

[anvaka]

Thank you for the ping @mixmix !

I played with this and to my surprise was able to achieve hover-only links with small amount of code. Here is a demo

If link's position changes while the links are visible (and you want to update it), you'd have to call

var edgeView = renderer.edgeView();

// sequence of this mostly identical names is important
// Also note that 5 years younger me was not able to write
// readable code - I can't explain otherwise such a poor
// choice of function names :D
edgeView.refresh();
edgeView.update();

PS: I am not using this repository anymore, and all my latest graph drawings are done with graph-start repository - please check it out if you haven't yet.