Improve torrent graph UI about webtorrent.io HOT 18 OPEN

I could help with something but we should first split it in a separete module: #63

from webtorrent.io.

@roccomuso If you want to send improvements here first, I can publish it a separate module in a few days.

from webtorrent.io.

@feross I'm working on this features.
Here https://github.com/roccomuso/webtorrent-www/commit/2bbe5b02b3d2016ef2f7833cb440aece502b3476 the change of node color depending on seed/leech state. Is graph.seed('id', true/false); acceptable as API?

I've noticed also that the choke and unchoke methods need to be completed. Choking acts on the link and not on the node itself right? We could change the line color or something like that?

from webtorrent.io.

I think that API works!

I think making the line more transparent when we're choked would be good.

from webtorrent.io.

ok thanks for the tip, I'm on it right now... ;)

By the way I'm introducing a new dependency: https://github.com/avoidwork/filesize.js
It's a few lines browserified but provides a pratical way to show and work with transfer rate and byte size conversion.

from webtorrent.io.

@roccomuso We use prettier-bytes throughout the webtorrent projects. Please use that to avoid sending extra code to people's browsers 👍

from webtorrent.io.

@feross Alright, now using prettier-bytes.
Check out the new feature: show transfer rate between nodes (by changing thickness of line) - https://github.com/roccomuso/webtorrent-www/commit/0e67935bf0186ff7cc00ea4ef5cf488cbe7e7b00
The API is: graph.rate('Peer1', 'Peer2', 256 * 1000);, where the last param is a number expressed in bytes.

On the top of the lib in the COLORS variable I've defined some properties required to "map" the transfer rate to the line thickness.

from webtorrent.io.

Screenshot?

from webtorrent.io.

@feross As you can see the link gets thicker and thinner, changing every second his transfer rate to:

1. 150 KB/s.
2. 500 KB/s.
3. 2.5 MB/s.
4. 5 MB/s.
5. 2.5 MB/s.
6. 1 MB/s.

from webtorrent.io.

That's nice. Can you send a PR?

from webtorrent.io.

@feross yes sure. Couldn't be first splitted it in a separate module? So that I can write also the API documentation in a README.md.

from webtorrent.io.

Sure, I'll do that now and add you as GitHub collaborator and npm owner.

from webtorrent.io.

@feross thanks, let me know ;)

from webtorrent.io.

Okay, it's published as p2p-graph: https://github.com/feross/p2p-graph I added you to the repo/package.

from webtorrent.io.

Here's a PR to make webtorrent-www use p2p-graph: #105

from webtorrent.io.

ok, I think you can merge the PR. I'm gonna push directly on the p2p-graph repo.

from webtorrent.io.

@roccomuso Nice. Please still send PRs to the p2p-graph repo so there's a chance for other contributors and I to give feedback before merging.

from webtorrent.io.

@feross ok cool! I've sent the PR.

from webtorrent.io.