anvaka / anvaka/VivaGraphJS

Messaging between nodes' position to optimise layout

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

Description

Hello Andrei,

Much of the computations goes in the rendering part, and so I was looking at ways to improve efficiency.

Consider the situation of adding new neighbours, by tapping on a node: I noticed new nodes will be initially placed on the center of the graph container.
So, if a node is far away, the rendering will have to display all of the movements of pulling new elements close to the its parent node.

What about passing position parameters to new nodes, so that they are initialised on the same coordinates of the parent ?

I looked at:

```
/**
* Called by Viva.Graph.View.renderer to let concrete graphic output
* provider prepare to render given node of the graph.
*
* @param nodeUI visual representation of the node created by node() execution.
**/
addNode : function (node, pos) {
var nodeUI = nodeBuilder(node);
if (!nodeUI) {
return;
}
nodeUI.position = pos;
nodeUI.node = node;
allNodes[node.id] = nodeUI;

svgContainer.appendChild(nodeUI);

return nodeUI;
},

```
and actually seems positions are passed, although note clear to me how to pass position when adding new nodes like:

`graph.addNode(2)`
or `graph.addLink(1,2)`, graph.addLink(1,3), ..

- Could you clarify how to pass custom position at the time of creating a node, *before* rendering it ?
The effect I aim to is to initialise new nodes in a location already in a good position for force-layout adjustment, and thus avoiding pulling elements around the screen.

Thinking further, I thought this improvement may optimise force-directed layout for expanded on demand interaction,
because I expect that there new nodes' position will be already optimised by construction.

So I was researching about the idea of nodes passing messaging their own position for local adjustment, and coincidentally found out you also were exploring this part :

https://github.com/anvaka/nb/blob/master/src/nbLayout.js

- Is neighbourhood beautification compliant as ngraph.layout alternative ? I saw it has dependencies as bounding box computation, I wonder if can be already used in Vivagraph or ngraph suite - please let me know if there are examples.
Using svg renderer.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the SVG renderer's addNode implementation and the graph.addNode/graph.addLink entry points mentioned in the issue. Then compare the proposed approach with nbLayout.js and check whether it can work with the existing ngraph.layout flow. Done would require a decided scope for initial node positions or neighbourhood beautification, plus a documented example or implementation path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.