anvaka / anvaka/VivaGraphJS

Simple websocket attempt, links not being rendered

Open
#241 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.9k
Forks
418
PR merge metrics
No merged PRs in 30d

Description

I've been trying to use vivagraph to represent a tree (ideally later with dynamic updates to nodes on the tree)

The nodes get placed as I'd like, but the links don't render.

Does placing nodes change the behavior of links?

Please advise?

HTML/JS:
``` html


VivaTree


function onLoad() {
var graph = Viva.Graph.graph();
var layout = Viva.Graph.Layout.constant(graph)

var renderer = Viva.Graph.View.renderer(graph, {
layout : layout
});
renderer.run();

var ws = new WebSocket('ws://localhost:8080/');

ws.onmessage = function(event) {
console.log('Received Data: ' + event.data);
var message = JSON.parse(event.data);

if ('command' in message) {
//FIXME: Supoprt batch 'commands'
graph.beginUpdate()
switch(message['command']) {
case 'addNode':
console.log('running addnode')
graph.addNode(message['id'], message['data'])
layout.placeNode(function(node) {
return {x: message['x'],
y: message['y']};
});

break;
case 'addLink':
console.log('running addLink' + message['from'])
graph.addLink(message['from'], message['to'])
break;
default:
console.log('Unsupported command.')
}
graph.endUpdate()
}
};

}

body, html, svg { width: 100%; height: 100%; overflow: hidden; }

```

Simple Python wrapped with [websocketd](http://websocketd.com/)
```python
#!/usr/bin/env python3
from sys import stdout
import json
import math

x_spacer = 30
y_spacer = 40

# Row in tree. (top is 0)
def get_row(id):
if id == 0:
return 0
else:
return math.floor(math.log2(id+1))

def get_y_pos(id):
return y_spacer * get_row(id)

def get_x_pos(id):
if id == 0:
return 0
row = get_row(id)
shift = 2 ** row + 2 ** (row-1) - 1.5
adjust = id - shift
return x_spacer * adjust

# Count from 1 to 10 with a sleep
for count in range(0, 2 ** 4 -1 ):
output = {
'command' : 'addNode',
'id': count,
'x' : get_x_pos(count),
'y': get_y_pos(count),
}
print(json.dumps(output, sort_keys=True))
stdout.flush()

uplink = int(math.floor((count-1)/2))
if uplink >= 0:
output = {
'command' : 'addLink',
'from': count,
'to': uplink,
}
print(json.dumps(output, sort_keys=True))
stdout.flush()
```

Data being sent over socket
```
{"command": "addNode", "id": 0, "x": 0, "y": 0}
{"command": "addNode", "id": 1, "x": -15.0, "y": 40}
{"command": "addLink", "from": 1, "to": 0}
{"command": "addNode", "id": 2, "x": 15.0, "y": 40}
{"command": "addLink", "from": 2, "to": 0}
{"command": "addNode", "id": 3, "x": -45.0, "y": 80}
{"command": "addLink", "from": 3, "to": 1}
{"command": "addNode", "id": 4, "x": -15.0, "y": 80}
{"command": "addLink", "from": 4, "to": 1}
{"command": "addNode", "id": 5, "x": 15.0, "y": 80}
{"command": "addLink", "from": 5, "to": 2}
{"command": "addNode", "id": 6, "x": 45.0, "y": 80}
{"command": "addLink", "from": 6, "to": 2}
{"command": "addNode", "id": 7, "x": -105.0, "y": 120}
{"command": "addLink", "from": 7, "to": 3}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the HTML/JS example using vivagraph.js, especially the renderer setup and the graph.addNode/graph.addLink calls inside the WebSocket message handler. Run it with the provided Python websocketd script and inspect whether the streamed links appear after their nodes; done means the tree links render for the supplied data.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.