Commit 4c04551a3e25f880780438f3d6ba6a54f100d610
cleanup, use yo-yo, use standard style
Michael Williams committed on 12/8/2016, 10:17:32 AMParent: 9972d073007ebc1c4cf8c6074bc2c3e3e5e032b5
Files changed
graph.js | changed |
index.js | changed |
output.js | changed |
package.json | changed |
renderer.js | changed |
profile.js | deleted |
test/index.js | deleted |
graph.js | ||
---|---|---|
@@ -1,6 +1,4 @@ | ||
1 | -const pull = require('pull-stream') | |
2 | -const Sbot = require('ssb-client') | |
3 | 1 … | const waterfall = require('run-waterfall') |
4 | 2 … | |
5 | 3 … | const { keys } = Object |
6 | 4 … | |
@@ -9,9 +7,9 @@ | ||
9 | 7 … | function Graph (sbot, cb) { |
10 | 8 … | waterfall([ |
11 | 9 … | (cb) => sbot.friends.all(cb), |
12 | 10 … | (friends, cb) => { |
13 | - const filteredFriends = friends // activeFriends(friends) | |
11 … | + const filteredFriends = friends // activeFriends(friends) | |
14 | 12 … | |
15 | 13 … | cb(null, { |
16 | 14 … | nodes: buildNodes(filteredFriends), |
17 | 15 … | links: buildLinks(filteredFriends) |
@@ -19,9 +17,9 @@ | ||
19 | 17 … | } |
20 | 18 … | ], cb) |
21 | 19 … | } |
22 | 20 … | |
23 | -function buildNodes(friends) { | |
21 … | +function buildNodes (friends) { | |
24 | 22 … | return keys(friends).map(id => { |
25 | 23 … | return { |
26 | 24 … | id, |
27 | 25 … | data: { |
@@ -30,13 +28,12 @@ | ||
30 | 28 … | } |
31 | 29 … | }) |
32 | 30 … | } |
33 | 31 … | |
34 | -function buildLinks(friends) { | |
32 … | +function buildLinks (friends) { | |
35 | 33 … | return keys(friends).reduce((sofar, friend) => { |
36 | 34 … | const friendOfFriends = keys(friends[friend]) |
37 | 35 … | .filter(id => friends[friend][id] === true) |
38 | - // .filter(id => keys(friends).indexOf(id) > -1) | |
39 | 36 … | |
40 | 37 … | const edges = friendOfFriends.map(friendOfFriend => { |
41 | 38 … | return { |
42 | 39 … | fromId: friend, |
@@ -51,11 +48,11 @@ | ||
51 | 48 … | ...sofar, |
52 | 49 … | ...edges |
53 | 50 … | ] |
54 | 51 … | }, []) |
55 | - | |
56 | 52 … | } |
57 | 53 … | |
54 … | +/* | |
58 | 55 … | function activeFriends (friends) { |
59 | 56 … | return keys(friends) |
60 | 57 … | .reduce( |
61 | 58 … | (sofar, current) => { |
@@ -66,5 +63,5 @@ | ||
66 | 63 … | }, |
67 | 64 … | {} |
68 | 65 … | ) |
69 | 66 … | } |
70 | - | |
67 … | +*/ |
index.js | ||
---|---|---|
@@ -1,17 +1,15 @@ | ||
1 | -const fs = require('fs') | |
2 | -const Path = require('path') | |
3 | 1 … | const fromJson = require('ngraph.fromjson') |
4 | 2 … | const Renderer = require('./renderer') |
5 | 3 … | const Graph = require('./graph') |
6 | 4 … | |
7 | 5 … | const config = { |
8 | 6 … | physics: { |
9 | - springLength : 80, | |
10 | - springCoeff : 0.0001, | |
7 … | + springLength: 80, | |
8 … | + springCoeff: 0.0001, | |
11 | 9 … | gravity: -1.4, |
12 | - theta : 0.4, | |
13 | - dragCoeff : 0.04 | |
10 … | + theta: 0.4, | |
11 … | + dragCoeff: 0.04 | |
14 | 12 … | }, |
15 | 13 … | link: (link) => { |
16 | 14 … | // if (link.data.hidden) return |
17 | 15 … | // makes linkUI element not exist ? => display.getLink doesn't work |
output.js | ||
---|---|---|
@@ -1,6 +1,8 @@ | ||
1 | 1 … | const insertCss = require('insert-css') |
2 | 2 … | const Sbot = require('ssb-client') |
3 … | +const waterfall = require('run-waterfall') | |
4 … | + | |
3 | 5 … | const Viz = require('./') |
4 | 6 … | |
5 | 7 … | insertCss(` |
6 | 8 … | html, body { |
@@ -11,22 +13,19 @@ | ||
11 | 13 … | padding: 0; |
12 | 14 … | margin: 0; |
13 | 15 … | } |
14 | 16 … | |
15 | - #avatar { | |
17 … | + .avatar { | |
16 | 18 … | position: fixed; |
17 | 19 … | left: 10px; |
18 | 20 … | bottom: 10px; |
19 | 21 … | color: #fff; |
20 | 22 … | } |
21 | 23 … | |
22 | - #avatar img { | |
24 … | + .avatar .image { | |
23 | 25 … | max-height: 160px; |
24 | 26 … | } |
25 | 27 … | `) |
26 | - | |
27 | -Sbot((err, sbot) => { | |
28 | - Viz(sbot, (err, viz) => { | |
29 | - if (err) throw err | |
30 | - sbot.close() | |
31 | - }) | |
28 … | + | |
29 … | +waterfall([Sbot, Viz], (err) => { | |
30 … | + if (err) throw err | |
32 | 31 … | }) |
package.json | ||
---|---|---|
@@ -3,9 +3,9 @@ | ||
3 | 3 … | "version": "0.0.0", |
4 | 4 … | "description": "visualize the ssb network graph", |
5 | 5 … | "main": "index.js", |
6 | 6 … | "scripts": { |
7 | - "test": "tape test.js", | |
7 … | + "test": "standard", | |
8 | 8 … | "start": "electro output.js" |
9 | 9 … | }, |
10 | 10 … | "repository": { |
11 | 11 … | "type": "git", |
@@ -18,22 +18,23 @@ | ||
18 | 18 … | "url": "https://git.scuttlebot.io/%25hNm67sfnZFtWkD%2F%2B1qxH3UfzhXykfpKtOL1C%2FXbLANA%3D.sha256/issues" |
19 | 19 … | }, |
20 | 20 … | "homepage": "https://git.scuttlebot.io/%25hNm67sfnZFtWkD%2F%2B1qxH3UfzhXykfpKtOL1C%2FXbLANA%3D.sha256#readme", |
21 | 21 … | "devDependencies": { |
22 … | + "standard": "^8.6.0", | |
22 | 23 … | "tape": "^4.5.1" |
23 | 24 … | }, |
24 | 25 … | "dependencies": { |
25 | 26 … | "electro": "^2.0.2", |
26 | 27 … | "electron": "^1.4.4", |
27 | 28 … | "hyperscript": "^2.0.2", |
28 | 29 … | "insert-css": "^1.0.0", |
29 | 30 … | "inu": "^3.1.3", |
30 | - "morphdom": "^2.2.1", | |
31 | 31 … | "ngraph.fromjson": "^0.1.8", |
32 | 32 … | "ngraph.pixel": "^2.2.0", |
33 | 33 … | "pull-stream": "^3.4.5", |
34 | 34 … | "run-waterfall": "^1.1.3", |
35 | 35 … | "ssb-avatar": "^0.2.0", |
36 | 36 … | "ssb-client": "^4.3.0", |
37 | - "stream-to-pull-stream": "^1.7.2" | |
37 … | + "stream-to-pull-stream": "^1.7.2", | |
38 … | + "yo-yo": "^1.3.1" | |
38 | 39 … | } |
39 | 40 … | } |
renderer.js | ||
---|---|---|
@@ -1,14 +1,12 @@ | ||
1 | 1 … | const Renderer = require('ngraph.pixel') |
2 | -const h = require('hyperscript') | |
3 | 2 … | const avatar = require('ssb-avatar') |
4 | -const Sbot = require('ssb-client') | |
5 | -const morph = require('morphdom') | |
3 … | +const html = require('yo-yo') | |
6 | 4 … | |
7 | 5 … | module.exports = createRenderer |
8 | 6 … | |
9 | 7 … | function createRenderer (graph, config, sbot) { |
10 | - var avatarEl = h('div#avatar') | |
8 … | + var avatarEl = html`<div class="avatar" />` | |
11 | 9 … | document.body.appendChild(avatarEl) |
12 | 10 … | |
13 | 11 … | var display = Renderer(graph, config) |
14 | 12 … | |
@@ -18,21 +16,22 @@ | ||
18 | 16 … | |
19 | 17 … | function handleNodeHover (node) { |
20 | 18 … | if (node === undefined) return |
21 | 19 … | |
22 | - // TODO figure out why we have to start a fresh client. | |
23 | - Sbot((err, sbot) => { | |
24 | - avatar(sbot, node.id, node.id, (err, { name, image }) => { | |
25 | - const imgSrc = image ? `http://localhost:7777/${image}` : '' | |
20 … | + avatar(sbot, node.id, node.id, (err, { name, image }) => { | |
21 … | + // handle this error! | |
22 … | + if (err) throw err | |
26 | 23 … | |
27 | - var newAvatarEl = h('div#avatar', [ | |
28 | - h('img', { src: imgSrc }), | |
29 | - h('div', name) | |
30 | - ]) | |
24 … | + const imgSrc = image ? `http://localhost:7777/${image}` : '' | |
31 | 25 … | |
32 | - morph(avatarEl, newAvatarEl) | |
33 | - sbot.close() | |
34 | - }) | |
26 … | + const newAvatarEl = html` | |
27 … | + <div class="avatar"> | |
28 … | + <img class="image" src=${imgSrc} /> | |
29 … | + <div class="name">${name}</div> | |
30 … | + </div> | |
31 … | + ` | |
32 … | + | |
33 … | + html.update(avatarEl, newAvatarEl) | |
35 | 34 … | }) |
36 | 35 … | |
37 | 36 … | display.forEachLink(linkUI => { |
38 | 37 … | const { from, to } = linkUI |
@@ -44,35 +43,30 @@ | ||
44 | 43 … | const isFromFriend = friends.indexOf(from.id) > -1 |
45 | 44 … | const isToFriend = friends.indexOf(to.id) > -1 |
46 | 45 … | const involvesFoaF = isFromFriend || isToTarget |
47 | 46 … | |
48 | - let fromColor = 0x000066 | |
49 | - let toColor = 0x000066 | |
47 … | + var fromColor = 0x000066 | |
48 … | + var toColor = 0x000066 | |
50 | 49 … | |
51 | 50 … | const close = 0xffffff |
52 | 51 … | const mid = 0xa94caf |
53 | 52 … | const far = 0x000066 |
54 | 53 … | |
55 | 54 … | if (isFromTarget) { |
56 | 55 … | fromColor = close |
57 | 56 … | toColor = mid |
58 | - } | |
59 | - else if (isToTarget) { | |
57 … | + } else if (isToTarget) { | |
60 | 58 … | fromColor = mid |
61 | 59 … | toColor = close |
62 | - } | |
63 | - else if (involvesFoaF && isFromFriend) { | |
60 … | + } else if (involvesFoaF && isFromFriend) { | |
64 | 61 … | fromColor = mid |
65 | 62 … | toColor = far |
66 | - } | |
67 | - else if (involvesFoaF && isToFriend) { | |
63 … | + } else if (involvesFoaF && isToFriend) { | |
68 | 64 … | fromColor = far |
69 | 65 … | toColor = mid |
70 | 66 … | } |
71 | 67 … | |
72 | - | |
73 | 68 … | linkUI.fromColor = fromColor |
74 | 69 … | linkUI.toColor = toColor |
75 | 70 … | }) |
76 | - | |
77 | 71 … | } |
78 | 72 … | } |
profile.js | ||
---|---|---|
@@ -1,16 +1,0 @@ | ||
1 | -module.exports = profile | |
2 | - | |
3 | -module.exports = function (sbot, id, cb) { | |
4 | - pull( | |
5 | - sbot.(id, (err, profile) => { | |
6 | - if (err) return cb(err) | |
7 | - console.log('profile', profile) | |
8 | - }), | |
9 | - pull.reduce(latest, {}) | |
10 | - ) | |
11 | -} | |
12 | - | |
13 | -function latest (sofar, next) { | |
14 | - console.log('sofar', sofar, next) | |
15 | - return sofar | |
16 | -} |
Built with git-ssb-web