change layout and add new js

Signed-off-by: franck cuny <franck@lumberjaph.net>

3 files changed, 293 insertions, 17 deletions

diff --git a/public/javascripts/github-connector.js b/public/javascripts/github-connector.js
new file mode 100644
index 0000000..db8ddac
--- /dev/null
+++ b/public/javascripts/github-connector.js
@@ -0,0 +1,152 @@
+var githubNodesObj = {};
+var githubEdgesObj = {};
+var graphAttributes = {};
+
+// Interface:
+function init(){
+	getGraphAttributes()
+}
+
+function newQuery(query){
+  sigmaDOM = thisMovie("SiGMa");
+  
+  getGithubGraph(query);
+}
+
+function thisMovie(movieName) {
+  if (navigator.appName.indexOf("Microsoft") != -1) {
+    return window[movieName];
+  } else {
+    return document[movieName];
+  }
+}
+
+function setComboBoxes(){
+	var colorAtts = [];
+	var sizeAtts = [];
+	
+	for(var att in graphAttributes){
+		graphAttributes[att]["id"] = att;
+		
+		if(graphAttributes[att]["type"]=="Num"){
+			sizeAtts.push(graphAttributes[att]);
+			colorAtts.push(graphAttributes[att]);
+		}else{
+			colorAtts.push(graphAttributes[att]);
+		}
+	}
+	
+	var nodes_color = document.forms["node_properties"]["nodes_color"];
+	var nodes_size = document.forms["node_properties"]["nodes_size"];
+	
+	while(nodes_color.options.length) nodes_color.options.remove(0);
+	while(nodes_size.options.length) nodes_size.options.remove(0);
+	
+	var i;
+	var optn;
+	
+	var l=colorAtts.length;
+	for(i=0;i<l;i++){
+		optn = document.createElement("OPTION");
+		optn.text = colorAtts[i]["label"] ? colorAtts[i]["label"] : colorAtts[i]["id"];
+		optn.value = colorAtts[i]["id"];
+		
+		nodes_color.options.add(optn);
+	}
+	
+	l=sizeAtts.length;
+	for(i=0;i<l;i++){
+		optn = document.createElement("OPTION");
+		optn.text = sizeAtts[i]["label"] ? sizeAtts[i]["label"] : sizeAtts[i]["id"];
+		optn.value = sizeAtts[i]["id"];
+		
+		nodes_size.options.add(optn)
+	}
+}
+
+// SiGMa interaction:
+function toggleDisplayLabels(){
+	if(sigmaDOM){
+		if(sigmaDOM.getDisplayLabels()){
+			sigmaDOM.setDisplayLabels(false);
+		}else{
+			sigmaDOM.setDisplayLabels(true);
+		}	
+	}
+}
+
+function toggleDisplayEdges(){
+	if(sigmaDOM){
+		if(sigmaDOM.getDisplayEdges()){
+			sigmaDOM.setDisplayEdges(false);
+		}else{
+			sigmaDOM.setDisplayEdges(true);
+		}	
+	}
+}
+
+function toggleFishEye(){
+	if(sigmaDOM){
+		if(sigmaDOM.hasFishEye()){
+			sigmaDOM.deactivateFishEye();
+		}else{
+			sigmaDOM.activateFishEye();
+		}	
+	}
+}
+
+function resetGraph(graph){
+  recenterGraph();
+
+  killForceAtlas();
+  deleteGraph();
+  updateGraph(graph);
+  initForceAtlas();
+  
+  setColor(document.forms["node_properties"]["nodes_color"].value,graphAttributes);
+  setSize(document.forms["node_properties"]["nodes_size"].value);
+}
+
+function onClickNodes(nodesArray){
+  if(nodesArray.length){
+    sigmaDOM = thisMovie("SiGMa");
+    query = nodesArray[0];
+    
+    getGithubGraph(query);
+    document.getElementById("query").value = query;
+  }
+}
+
+function onOverNodes(nodesArray){
+	for(var i=0;i<nodesArray.length;i++){
+		console.debug("node: "+nodesArray[i]);
+	}
+}
+
+// Github network:
+function getGithubGraph(user){
+  url = "http://localhost:3000/graph/local/"+user;
+  
+  $.ajax({
+    url: url,
+    dataType: 'json',
+    success:
+      function(json){
+        resetGraph(json);
+      }
+  });
+}
+
+function getGraphAttributes(){
+  url = "http://localhost:3000/graph/attributes";
+  
+  $.ajax({
+    url: url,
+    dataType: 'json',
+    success:
+      function(json){
+        graphAttributes = (json && json["attributes"]) ? json["attributes"] : {};
+        setComboBoxes();
+      }
+  });
+}
\ No newline at end of file
diff --git a/public/javascripts/sigma-connector.js b/public/javascripts/sigma-connector.js
new file mode 100644
index 0000000..c511de9
--- /dev/null
+++ b/public/javascripts/sigma-connector.js
@@ -0,0 +1,125 @@
+// --- SiGMa (API version) JavaSCript connector ---
+// Contains the functions to send data to a SiGMa.swf instance.
+
+// You have to initialize this parameter before using the
+// different functions:
+var sigmaDOM;
+var outputFunction;
+
+// This function starts the layout algorithm:
+function initForceAtlas(){
+  try{
+    sigmaDOM.initForceAtlas();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function stops the layout algorithm:
+function killForceAtlas(){
+  try{
+    sigmaDOM.killForceAtlas();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function delete the whole graph in SiGMa:
+function deleteGraph(){
+  try{
+    sigmaDOM.deleteGraph();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function pushes each non-existing node and edge in the graph,
+// and removes the ones that were in SiGMa:
+function updateGraph(graph){
+  try{
+    sigmaDOM.updateGraph(graph);
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function pushes each non-existing node and edge in the graph,
+// and updates the ones that are already in SiGMa:
+function pushGraph(graph){
+  try{
+    sigmaDOM.pushGraph(graph);
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function activates the fish-eye zoom:
+function activateFishEye(){
+  try{
+    sigmaDOM.activateFishEye();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function desactivates the fish-eye zoom:
+function deactivateFishEye(){
+  try{
+    sigmaDOM.deactivateFishEye();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function sets the color of the nodes relatively to one
+// attribute:
+function setColor(field,attributes){
+  try{
+    sigmaDOM.setColor(field,attributes);
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function sets the color of the nodes relatively to one
+// attribute:
+function setSize(field){
+  try{
+    sigmaDOM.setSize(field);
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// This function recenters the graph in SiGMa (basically, it
+// cancels each zooming action and every drag'n'drop):
+function recenterGraph(){
+  try{
+    sigmaDOM.resetGraphPosition();
+  }catch(e){
+    if(outputFunction){
+      outputFunction(e.description);
+    }
+  } 
+}
+
+// /!\ This script is just a draft, most of the methods might change
+//     soon, and a lot of missing features are already in development...
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index c5d4445..d19c388 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -1,22 +1,21 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
-<title>StarGit</title>
-<link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
 
-<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
-<script type="text/javascript">/* <![CDATA[ */
-    !window.jQuery && document.write('<script type="text/javascript" src="<% request.uri_base %>/javascripts/jquery.js"><\/script>')
-/* ]]> */</script>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
+    <title>StarGit</title>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
+    <script type="text/javascript" src="<% request.uri_base %>/javascripts/sigma-connector.js"></script>
+    <script type="text/javascript" src="<% request.uri_base %>/javascripts/github-connector.js"></script>
+    <link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
+  </head>
 
-</head>
-<body>
-<% content %>
-<div id="footer">
-Powered by <a href="http://perldancer.org/">Dancer</a> <% dancer_version %>
-</div>
-</body>
+  <body onload="init();">
+    <div id="header">
+      <a id="about" href="#">About</a>
+      <a id="files" href="#">Files</a>
+    </div>
+    <% content %>
+  </body>
 </html>