SGNet

Posted on September 2, 2013 by sgun — No Comments ↓

SGNet
SGNet provides visualization for network graphs and more…

One of the challenges while implementing the front-end of the TALOS Computation Server was visualizing network graphs and then reusing this solution for more advanced features. The features you expect from such visualization would be showing the nodes and arcs. When it comes to solving shortest path problems you also need to highlight the optimal path.

Let’s make things more complicated. Suppose that you have an attacker-defender model (a popular optimization problem), now you also need to highlight the blocked roads. SGNet provides all these features with minimal configuration.

The following is a demo of SGNet with simple nodes.

One of my favorite sayings: “Everything is a network!”

Now assume that we would like to build a user interface to facilitate creating a system which includes sequential tasks. That is; the user tells “first run this script”, and then “run the second one”. Is that all? No! The user wants to feed the second script with the output of the first script. Just like the pipe-filter architecture or simply the pipe “|” in UNIX shell.

Well, this design is a network. Each script is a primary node. Now go ahead and click on the script node. You should see input files on the left and output files on the right. Our nodes are not simple nodes anymore. They contain internal elements which can be regarded as the secondary nodes.

And run sequences are the primary arcs. Now switch on the design mode by clicking on toolbox below. Now you can draw a sequence arc from one primary node to another. Run sequence is done. How about data exchange? Now right click on the primary arc in orange color. You should see all secondary nodes displayed. You can connect those elements using their colorful circles. This secondary arc means “this file overrides that file”. When you are done just right click on the main arc, and then switch off the design mode. Let’s call this design a super-system (system of systems) design. And the super-system information is stored in JSON format ready to be used by developer.

So how to use this SGNet Library?
Network Graph with Simple Nodes
First, clone or fork the library from my repository.

git clone https://github.com/selcukgun/SGNet.git

1	git clone https://github.com/selcukgun/SGNet.git

Include the external dependencies as shown in line 1-2. You can use jquery from another source too. However, I strongly recommend using my raphael library which includes a bug fix about arc arrows. And finally include sgnet.js file.

<script src="jquery-1.8.1.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="sgnet.js" type="text/javascript" charset="utf-8"></script>

Now, create a div for the network graph.

<div id="holder"></div>

1	<div id="holder"></div>

And some styling:

#holder{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border: solid 1px #333;
   background-color: #ffffff;
   width: 450px;
   margin-top: 20px;
}

#holder{

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border: solid 1px #333;

background-color: #ffffff;

width: 450px;

margin-top: 20px;

}

Now, define array of node arrays with length 3 (Name of node, x coordinate, y coordinate) as shown below. You do not need to provide coordinates. But this will generate randomly located nodes. How about the ranges of coordinates? Never mind, SGNet will regularize whatever you provide.

Define arcs to connect these nodes. And finally define flow arcs and road block arcs. Flow will be in green color while block is represented in red color.

Create an SGNet object called myGraph with parameters: div id for graph, width and height in pixels.

Draw the nodes, arcs, blocks, and flow using the SGNet object methods.

<script>
var nodesJS = [["T",10,5], ["C",30,5], ["R",40,85], ["S",60,15], ["O",50,65], 
["A",40,185], ["B",80,15], ["G",24,115], ["X",4,185], ["W",30,95], ["H",90,165], ["Y",50,25], ["TC",80,85]];
var arcsJS = [["X","C"],["A","X"],["A","R"],["R","O"],["H","W"],["S","B"],["H","TC"],["H","A"],["R","A"],["G","W"],["G","A"],["TC","A"],["B","A"],["B","S"],["B","TC"],["X","A"],["T","C"],["T","R"],["R","C"],["R","TC"],["T","O"],["Y","O"],["O","R"],["TC","C"],["Y","TC"],["Y","S"]];
var roadBlkJS = [["T","C"],["TC","A"],["T","R"],["Y","O"]];
var flowJS = [["R","A"],["O","R"],["T","O"]];
myGraph = new SGNet('holder', 450,300);
myGraph.drawNodes(nodesJS);
myGraph.drawArcs(nodesJS, arcsJS);
myGraph.drawBlocks(arcsJS, roadBlkJS);
myGraph.drawFlow(arcsJS, flowJS);
<script>

var nodesJS = [["T",10,5], ["C",30,5], ["R",40,85], ["S",60,15], ["O",50,65],

["A",40,185], ["B",80,15], ["G",24,115], ["X",4,185], ["W",30,95], ["H",90,165], ["Y",50,25], ["TC",80,85]];

var arcsJS = [["X","C"],["A","X"],["A","R"],["R","O"],["H","W"],["S","B"],["H","TC"],["H","A"],["R","A"],["G","W"],["G","A"],["TC","A"],["B","A"],["B","S"],["B","TC"],["X","A"],["T","C"],["T","R"],["R","C"],["R","TC"],["T","O"],["Y","O"],["O","R"],["TC","C"],["Y","TC"],["Y","S"]];

var roadBlkJS = [["T","C"],["TC","A"],["T","R"],["Y","O"]];

var flowJS = [["R","A"],["O","R"],["T","O"]];

myGraph = new SGNet('holder', 450,300);

myGraph.drawNodes(nodesJS);

myGraph.drawArcs(nodesJS, arcsJS);

myGraph.drawBlocks(arcsJS, roadBlkJS);

myGraph.drawFlow(arcsJS, flowJS);

That’s it.

Network Graph with Complicated Nodes

I won’t repeat all steps above. I am just providing the difference.

As shown below, we need to provide script information as an object with the keys: “modelName”, “input files” and “output files”.
And this object will be the last item in node array (either with or without coordinates).

var mdlInfo = [{"modelName":"model1","input files":["a.csv", "b.csv", "c.csv", "d.csv"], "output files":["result.txt", "out.csv"]},{"modelName":"model2","input files":["a.csv", "b.csv", "c.csv", "d.csv"], "output files":["result.txt", "out.csv"]}];
var mdlNodes = [];
mdlNodes.push([mdlInfo[0].modelName, mdlInfo[0]]);
mdlNodes.push([mdlInfo[1].modelName, mdlInfo[1]]);
modelGraph = new SGNet("holderModel", 450, 300);
modelGraph.drawNodes(mdlNodes, true);

var mdlInfo = [{"modelName":"model1","input files":["a.csv", "b.csv", "c.csv", "d.csv"], "output files":["result.txt", "out.csv"]},{"modelName":"model2","input files":["a.csv", "b.csv", "c.csv", "d.csv"], "output files":["result.txt", "out.csv"]}];

var mdlNodes = [];

mdlNodes.push([mdlInfo[0].modelName, mdlInfo[0]]);

mdlNodes.push([mdlInfo[1].modelName, mdlInfo[1]]);

modelGraph = new SGNet("holderModel", 450, 300);

modelGraph.drawNodes(mdlNodes, true);

Cheers…