Ticket #736 (closed: fixed)

Opened 8 years ago

Last modified 4 years ago

Render network topology graphs in browser (client-side)

Reported by: mitar Owned by:
Priority: major Milestone: 3.0b
Component: nodewatcher/modules Version:
Keywords: projectideas, biggerproject, gsoc Cc:
Related nodes: Realization state:
Blocking: 262, 710 Effort: high
Blocked by: Security sensitive: no

Description (last modified by mitar) (diff)

Currently we have only static rendering of a given moment on the server using GraphViz. It would be better if this would be done client-side in the browser so that user will be also able to interact with the graph, move nodes around to better present them, zoom in/out and so on. Because current image is fixed and sometimes it does not display the topology best and also in dense big networks it soon gets too complex to comprehend.

There are some libraries for that:

For drawing of data we are starting to use datastream library, so the best would be that topology graphs would be rendered inside it as well. Currently, we are using Highcharts for drawing data.

Some useful answers on Stack Overflow.

It is also possible to extend it with visualization through time and 3D: #710.

Student should have experience or be willing to learn Python and Django, but mostly good experience with JavaScript, drawing with JavaScript. Good understanding of math is probably a must as well.


nw-3-topology.png (152.0 KB) - added by kostko 4 years ago.

Change History

comment:1 Changed 8 years ago by mitar

  • Summary changed from Risanje topologiej v brskalniku to Risanje topologije v brskalniku

comment:2 Changed 8 years ago by mitar

  • Milestone changed from 3.0b to Next milestone

comment:3 Changed 8 years ago by mitar

  • Blocking set to 710

comment:4 Changed 8 years ago by mitar

  • Effort changed from normal to low
  • Description modified (diff)

comment:5 Changed 8 years ago by mitar

  • Keywords projectideas, biggerproject, gsoc added
  • Summary changed from Risanje topologije v brskalniku to Render network topology graphs in browser (client-side)

comment:6 Changed 8 years ago by stefanb

Also consider showing just nodes of a particular project and their immediate peers (even from other projects) to include server nodes or nodes from other projects if they are peering.

comment:8 Changed 7 years ago by mitar

comment:9 Changed 7 years ago by mitar

We could also create collaborative layout of topology – we could store/save user corrections to the layout and use that to improve further layouts.

This is possible because topology will be drawn in browser, so users will be able also to manipulate the layout. And those changes could be then used to improve further layouts.

I would propose to store in database relative distances between nodes in topology layout, so that data is useful also when some new node appears or some disappears. And from that server-side can calculate initial coordinates of nodes in layout. And then client side optimizes this and draws it.

comment:10 Changed 7 years ago by gw0

Ideas for how the interface and visualization could look like can be seen in a standalone application Gephi.

comment:11 Changed 7 years ago by mitar

Related: #262, #474, #499.

comment:12 Changed 7 years ago by mitar

  • Effort changed from low to high

comment:15 Changed 5 years ago by mitar

One idea is to reuse datastream and allow moving through time and see topology at different times.

We could see how these packages display networks through time:

comment:16 Changed 5 years ago by mitar

  • Status changed from new to assigned
  • Owner kostko deleted
  • Component changed from nodewatcher/core to nodewatcher/modules
  • Description modified (diff)

comment:17 Changed 4 years ago by kostko

  • Milestone changed from Next milestone to 3.0b

Since [abf1aac9f1b3783625fbf0229e993f09454ec897/nodewatcher], network topology is periodically stored into datastream on v3.0b. This can now be used to visualize it on the client side (the stream can be selected by querying for tag {'module': 'topology'}; the stream is global). I have used visualization tag type with value graph to describe the stream appearance.

comment:18 Changed 4 years ago by kostko

In 1b181c6e2f586f72b559a1bc36b8d56ca3ef4844/nodewatcher:

Implemented proof of concept topology display. See #736.

comment:19 Changed 4 years ago by kostko

In d7ff044ea22cf9e4c6a0fd5cfb6e7cb058043c1d/nodewatcher:

Implemented extensible network topology rendering. See #736.

Changed 4 years ago by kostko

comment:20 Changed 4 years ago by kostko

I have implemented client-side topology rendering using d3.js and its force layout.

Topology rendering is extensible in two ways:

  • Modules can extend the storage mechanism by registering additional node and link attributes that should be included with each topology snapshot (stored in datastream).
  • Modules can extend topology rendering by registering specific partials which contain Javascript-based extensions. For example, the above image uses two extensions:
    • The routing.olsr module registers an extension that stores per-link metrics and uses this to color links with different colors depending on ETX.
    • The administration.types module registers an extension that stores per-node type and uses this to color nodes depending on node type.

comment:21 Changed 4 years ago by kostko

  • Status changed from assigned to closed
  • Resolution set to fixed

comment:22 Changed 4 years ago by kostko

  • Blocking changed from 710 to 262, 710

(In #262) Topology is now (v3.0b) rendered client-side using d3.js and supports storage and rendering extensions. The current rendering is very simple (see this comment).

comment:23 Changed 4 years ago by mitar

Do we want to use this [graph visualization library](https://cytoscape.github.io/cytoscape.js/index.html#introduction/factsheet)?

Note: See TracTickets for help on using tickets.