Improve torrent graph UI

[feross]

• change node color depending on seed/leech state
• show transfer rate between nodes (by changing thickness of line?)
• show additional peer info (client name, version, country) when clicking on peer
• show web seed node in the graph (it's omitted right now)
• show upload speed (MB/s) in the interface (when it's not 0 B/s)

[roccomuso]

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

[feross]

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

[roccomuso]

@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?

[feross]

I think that API works!

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

[roccomuso]

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.

[feross]

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

[roccomuso]

@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.

[feross]

Screenshot?

[roccomuso]

@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.

[feross]

That's nice. Can you send a PR?

[roccomuso]

@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.

[feross]

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

[roccomuso]

@feross thanks, let me know ;)

[feross]

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

[feross]

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

[roccomuso]

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

[feross]

@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.

[roccomuso]

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