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