What kind of library to use for display of graphical objects and right click context menus

Question

Hi all,

Goal: To develop a web based NMS interface which displays a network topology (e.g., switches, routers, links, endhosts). Each node should be 'movable' (draggable to an appropriate place manually or their best location computed algorithmically). I should be able to zoom into the network graph (say if there are many clusters of nodes and I want to concentrate on a particular cluster of nodes). I should be able to right-click any node or link and get a context menu (e.g., 'show routing table', 'show interfaces', 'show bandwidth utilization graph' etc.).

The data for this network topology will be fetched by making calls to an apache based webserver where the backend scripts in python will fetch the appropriate data and send it via JSON to the web client.

Question: I am assuming that some sort of javascript library/framework will be most appropriate for this - jQuery, Dojo, Moo etc. [I've never used any of these before]. Which of these would be most recommended for this sort of thing. Which would be easiest to learn (say in a months time).

Thanks for any tips.

Answer 1

Given the complexity of what you are asking, I would recommend Silverlight or Flash.

If you know C# then Silverlight is the easiest option.

jQuery is awesome but manipulating 2D graphics and performing complex layout algorithms will be much easier in C# / Silverlight.

Answer 2

Hi,

jQuery can help you to make drag and drop operations. With jQuery, it is also very easy to make an application quickly. But you have to make a test with a huge amount of nodes (switches, routers, links, endhosts) to see if a browser application can be able to manage your target in term of complexity.

You have a sample to drag and drop of simple graphical forms here : http://helpdesk.toitl.com/?w=drag_drop

Now, in you application, you have just to link each form with others. And keep the links if you move a node.

Regards, Dominique

Answer 3

the people at thejit have done some really great works in Multiple Data Representations using javascript and HTML canvas. They have interactive interfaces based around having nodes connected in a network which you can zoom in and out and get more info about.

I am sure you can tweak it to get the result you are after.

A static JSON Tree structure is used as input for the animations which is also what you want.