openwisp / netjsongraph.js Goto Github PK

I would like to animate the display of the links, to indicate traffic speed / throughput, etc.

What I would like is something simple like a stripe of colour moving "along" the link - similar to one of those "spinners" one sees on a webpage while waiting for a page reload.

And for the nodes, perhaps a simple grow-and-shrink pulsation for "active" nodes.

I am hoping I can do this with simple CSS definitions for the link or node display.

Can anyone help with a suggestion on how to accomplish this?

I presume there will need to be some minor changes to the code to associate the animation and its speed with some attribute of the node or link, and possibly adding one or more attributes to the node or link objects.

I am happy to refine the code and contribute back.

Cheers!
Nik

Unit tests are currently missing.

It would be good to have javascript based tests of the main features and an automated travis build.

The main features are:

• ensure NetJSON Graph is converted correctly
• ensure the right number of nodes is created
• ensure the right number of links is created
• ensure metadata overlay is displayed correctly
• ensure information overlay is displayed when clicking on nodes
• ensure information overlay is displayed when clicking on links

Can i update the netjson data and update the topology picture in same time.
Now time, i use a stupid way that remove the svg element and call the script again.

New features:

• support graph canvas and svg render.
• support map render.
• refactor codes for optimization.
• add unit test.
• update example pages.

add a package.json and publish to npm.

can we have an auto-redraw when data datasource changes (e.g. a link comes up or goes away)?

• build a (mostly) backward compatible version with three.js
• draw a demo graph using canvas or WebGL
• update docs with new examples
• add tests

I am looking for the way to periodically update overlay. Sometimes some params changes, but topology is same. So I want to see data changes after onClickNode

It's possible to replace circles with image icons ?
i tried the code following
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
but does not work 23/5000

can someone help me please

see https://github.com/ffnord/meshviewer/blob/38d0421342b0b6cb63aeae33fc72135330c85f88/lib/forcegraph.js#L355

and live: https://map.luebeck.freifunk.net/#!v:g

ofcourse we need a data structure for this, see other ticket

https://en.wikipedia.org/wiki/K-means_clustering
https://github.com/harthur/clusterfck

the visualizer should automatically group similar
properties, e.g. speed/costs/number of links etc. and use appropriate colors
for them.
(so we avoid to reimplement the colors for every protocol)

this issues is just dropping an idea, dont take this too serious.

At the moment netjsongraph.js can only visualize a single NetworkGraph object.

It would be very useful to add support for visualizing multiple NetworkGraph objects wrapped in a NetworkCollection.

A possible solution could be displaying a menu with the labels of each NetworkGraph. When clicking on a label the graph would show up. When the page loads the main body could either hint to choose a graph to display or display all of them... we can experiment a bit and find good defaults.

The current one doesn't work without configuring .eslintrc when running npm start.

The current version of netjsongraph lacks the 3-D Visualizations. The intent of this issue is to solve this single shortfall that keeps this library limited from more intense visualizations. We may use three.js with d3.js in order to achieve this effect.

I am not saying current version is bad or less powerful, but all I mean to say is we should use the power of WebGL to attract more people to this library.

We need a parameter that accepts a function to be executed when the graph has finished loading data.

Could you please advice what part of the code may I modify to render links using local addresses? That it useful when working with BGP topologies which is using loopback interfaces.

i like to have e.g. RRD images when hovering over a node or click on it. the images and the links are known. there must "just" be some magic. e.g.:

"node": [
  "id": "foo",
  ...
  "properties": {
    "image": "path/to/image"
  }
]

i would help to show node labels in the graph. maybe with a switch (see other issue)

Hi

I have been using the tool to draw network-graph. Lately a need to collapse or expand a node by clicking on it has come up as a convenient feature as the graph gets bigger. However I was not able to figure out how to just do that. Does anyone has any idea ? A quick internet search tells me that its possible by directly using d3.js. I was wondering if anyone has done that using "netjsongraph.js" however. Thanks in advance for any pointers.

$ node --version
v6.10.2

$ npm -v
5.0.4

$ npm install netjsongraph.js --save

[email protected] postinstall /Users/andrew.gadzik/Documents/git-repos/sns-network-graph/node_modules/netjsongraph.js
npm run build

[email protected] build /Users/andrew.gadzik/Documents/git-repos/sns-network-graph/node_modules/netjsongraph.js
webpack --config webpack.config.prod.js

sh: webpack: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] build: webpack --config webpack.config.prod.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/andrew.gadzik/.npm/_logs/2017-06-29T13_37_53_282Z-debug.log
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/andrew.gadzik/.npm/_logs/2017-06-29T13_37_54_059Z-debug.log

i know the default route through the network. what is a good method for describing that via netjson and later mark these links with another color?

When clicking on a node or a link right now the library hardcodes "njg-link njg-ethernet", deleting any custom added class. This doesn't make possible customizing colors for links and nodes with custom attributes.

what is the best method for adding the speed of a link.
maybe it's a good idea to change the distance of nodes according
to the linkspeed or the linkcosts.

the selected nodes should have some marker on it.

https://github.com/GoogleChrome/puppeteer

Test the library with 1K and 10K nodes.

Guifi.net has 33K working nodes according to their website.

Maybe we should keep in consideration from the beginning that data may be streamed instead of loaded all in one go. Otherwise it will never scale. What do you think @geekplux?

is this recent?
https://nodeshot.org/netjsongraph/examples/network-collection.html

can we have the selector in small in the left side and default show the first network?

see
http://intercity-vpn.de/networks/giancarlo/meshrdf/netjson.html
http://intercity-vpn.de/networks/giancarlo/meshrdf/map.json

the box on the right side always shows
ssh pub_key / speed download = undefined

ofcourse in a mesh network every link can be used (e.g. internal traffic), but
in practise we have the links which are responsible for transporting data via e.g.
default route. at the moment there is no relationship between the
NetworkRoutes object and the NetworkGraph.

This is a little bit a workaround for having a possibility to better visualizing this.

"links": [
...
"properties": {
"important": true,
...
}
]

Static layout may be better for a large graph.

• https://bl.ocks.org/mbostock/1667139
• https://bl.ocks.org/mbostock/01ab2e85e8727d6529d20391c0fd9a16

Right now, you have your code written to require a URL, assuming that it's pulling a json file. Not everything is in a file, nor is it advantageous to have to write data out of a database into a file on every page load, so a front-end system can pick it up. It's feasible that the data has already been passed to the front end and ready for use by this. If I can pass a json object in instead of a URL then I'm happy. If I have to go through file IO, that kills performance, page load times, and UX experience.

is it possible to read in an updated json-file without redrawing everything (avoiding the funny animation at the beginning)? e.g. delete or add 1 link.

It would be very nice if we could disable the animation when the graph is loaded.

It gets annoying after a while and with a lot of data it slows the visualization too much.

When using a topology in which routers have multiple interfaces, link objects may refer to addresses contained in the "local_addresses" list of another node. When this happens, an exception "source x not found" or "destination x not found" is raised.

For example in the netjson below (generated from an actual emulated OLSR network), the link {"source": "172.31.1.100", "target": "172.31.0.1", "cost": 1, "cost_text": "1.000" }' refers to "172.31.0.1" which is listed in the "local_addresses" list of "172.31.0.5".

{
  "type": "NetworkGraph",
  "protocol": "olsrv1",
  "version": "0.9.6.2",
  "metric": "",
  "revision": "olsr.org - 0.9.6.2-git_0000000-hash_f543df4f4fc9a2eb80ee8b63e7b08125",
  "router_id": "172.31.1.100",
  "nodes": [
    {
      "id": "172.31.0.5",
      "local_addresses": [
        "172.31.0.2",
        "172.31.0.3",
        "172.31.0.4",
        "172.31.0.1"
      ]
    },
    {
      "id": "172.31.1.100"
    },
    {
      "id": "172.31.2.100"
    },
    {
      "id": "172.31.3.100"
    },
    {
      "id": "172.31.4.100"
    },
    {
      "id": "172.31.5.100"
    }
  ],
  "links": [
    {
      "source": "172.31.1.100",
      "target": "172.31.0.1",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.1",
      "target": "172.31.1.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.5",
      "target": "172.31.1.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.5",
      "target": "172.31.2.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.5",
      "target": "172.31.3.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.5",
      "target": "172.31.4.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.0.5",
      "target": "172.31.5.100",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.2.100",
      "target": "172.31.0.5",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.3.100",
      "target": "172.31.0.5",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.4.100",
      "target": "172.31.0.5",
      "cost": 1,
      "cost_text": "1.000"
    },
    {
      "source": "172.31.5.100",
      "target": "172.31.0.5",
      "cost": 1,
      "cost_text": "1.000"
    }
  ]
}

Hi.

I have been debugging an issues as follows:

a) Use geoip to change the label of a node to the country name (versus ip_address:port).
b) Use the ip_address: port for the node id.
c. Use the ip_address:port for edge target and source.

This works fine EXCEPT.

d. When the EDGE is drawn by netjsongraph.js the edge attributes listed on the top right hand side when we click an EDGE shows the label of the node and not the edge source.

I have confirmed this by looking at the JSON file and the source, targets and ids are all just fine in the JSON file; but when the label of a node is, for example, the country name from geoip, the netjsongraph.js code draws OK, and labels OK, but the attributes show on the top right are not correct. The label of the node is substituted for the source attribute of the edge.

Please let me know if I can help further.

@leonardomaccari has been working on some interesting visualizations using netjsongraph.js:
https://github.com/netCommonsEU/netjsongraph.js/tree/robustness_graph

We are thinking of including this example in the README of this repository:
https://opendata.netcommons.eu/examples/condensed-ninux.html

A few aspects that need to be improved in that graph:

1. the word "block" in black on dark blue is not very readable, we could try making it white; but I also noticed it is not centered on the circle, which is also weird and should be fixed if possible
2. at first sight, the importance of the orange nodes is not evident, while the big circles look very important; maybe we could try making the big circles a bit smaller, lower down the alpha of the background of 1 or 2 decimal point, we should also increase the size or emphasis on the orange circles
3. can a block of one nodes can be considered a block? If possible would be better to just have the name of the node instead

use 'curved links' instead of direct links:
http://bl.ocks.org/mbostock/4600693

gl.lineWidth() has no effect in common modern browsers. The corresponding Chromium bug and Firefox bug are closed as Won't Fix and the WebGL specification now defines that gl.lineWidth() does not change the line width anymore. If you need lines of any width other than 1px, consider drawing a narrow strip of triangles.

so, we have to simulating the line width by creating triangles.

Hi!

I want, on click of a node, change the CSS properties of links that source == node.id. I see onClickNode but the arguments passed to that callback didn't seem possible to reference links originating from it. ([node object, node.index, 0])

Can you think of a way to accomplish this? I think it should be fairly simple to do, I just lack the exceptional JS comfort to know off-hand. :)

@geekplux while installing I'm getting:

npm WARN [email protected] license should be a valid SPDX license expression

this should be easy to fix.

if i have 2 lines

{ "source": "10.63.1.1", "target": "10.63.116.33", "cost": 1.000 },
{ "source": "10.63.116.33", "target": "10.63.1.1", "cost": 1.000 },

(which is the same link), it counts both. maybe the parser should
drop the 2nd entry totally and maybe also the visualizer benefits from this)

we calculate it anyway, so we can show it in the upper left box.

Put plenty of calculation into Web Worker. for example, put static layout calculation(#44) into it

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

I would like to customize the drop and drap for example when I move the object it remains the place to move

can someone help me please

know I'm a beginner in programming

because there is no "perfect fit for everybody" we should make sure,
that all the settings can be configured via the URL, e.g.

.../netjson.html#show_labels=true&linestyle=spline

AND also have a menu (e.g. via show_menu=true) where one can
play with the values.

e.g.:
"nodes": [
...
"properties": {
"clients": {
"wifi_2ghz": 8,
"wifi_5ghz": 12,
"wifi_total": 20,
"ethernet": 5,
"bluetooth": 1,
"total": 26
}
}
]

Add an optional geographic map module using leaflet or openlayers.

Let's add more details to this issue as we gain insights on this feature.

Using SVG when less 1k nodes and 5k links.
Using WebGL when more than 1k nodes and 5k links.

#41

I think we can split rendering to two part and first part just update old version svg implement.

I just noticed @bittorf is generating a NetworkGraph that contains the local_addresses property but it is not displayed, and that's a shame :-)

typically we have nodes which are interconnected together (e.g. 5 routers on rooftop are wired).
we should add a keyword for this, for a better visualisation (e.g. keep them near together or draw a box around the nodes...)

"nodes": [
...
"functional_unit": [ 1,2,3,4 ] */ id's of the other nodes */
]