anvaka / anvaka/ngraph.pixel

Toggling visibility of links

Open
#10 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
345
Forks
50
PR merge metrics
No merged PRs in 30d

Description

extends https://github.com/anvaka/ngraph.pixel/issues/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 :

![selection_138](https://cloud.githubusercontent.com/assets/2665886/20952808/df0f0f1a-bc93-11e6-91e2-5f9423792045.png)
_(this is a community living on a decentralised database [scuttlebutt](https://www.scuttlebutt.nz/applications.html))_

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

The new API for hiding links is great :

```js
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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the behavior described in issue 6, then trace the renderer.on('nodehover'), renderer.getLink, and renderer.forEachLink entry points mentioned here. Determine how links created through the link callback are registered and how hover state should control their visibility; done means a node shows only its incident links while hovered and restores the prior visibility afterward.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js
Domain
computer-graphics
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.