Interface update (WARNING: Flash to JS communication is currently broken, and JS to Flash does not work on Firefox, to be fixed soon)

6 files changed, 310 insertions, 372 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 320292a..3fad3cb 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,139 +1,204 @@
-html,body {
-	margin:				0;
-	padding:			0;
-	height:				100%;
-	background:			#FFF;
+*{
+	margin: 0;
+	padding: 0;
+	font-family: Helvetica,Arial;
+	font-size: 8pt;
+}
+
+#head{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 20px;
+	background-color: #f0f0f0;
 	
-	font-family:		Helvetica;
-	font-size:			10pt;
-	color:				#666;
+	font-weight: bold;
+
+	border-bottom-color: #B5B5B5;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
 }
 
-p { 
-	line-height:		1.5; 
-	margin:				0 0 1em;
+#head_title{
+	float: left;
+	padding-left: 10px;
+	padding-top: 4px;
 }
 
-table, tr {
-	width:				100%;
-	border-spacing:		0px;
+#head a{
+	float: right;
+	padding-right: 10px;
+	padding-top: 4px;
 }
 
-td {
-	display:			table-cell;
-	border-spacing:		0px;
+#main{
+	position: absolute;
+	top: 21px;
+	bottom: 114px;
+	left: 0;
+	right: 0;
+	background-color: #fff;
 }
 
-a.button{
-	height:				30px;
-	line-height:		29px;
-	margin-bottom:		14px;
-	text-decoration:	none;
+#foot{
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 113px;
 	
-	font-family:		Helvetica;
-	font-size:			small;
-	color:				#666;
+	background-color: #f0f0f0;
+
+	border-top-color: #b5b5b5;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
-a:hover.button{
-	color:				#0066CC;
+#query{
+	float: left;
+	width: 36%;
+	height: 112px;
+	
+	background-color: #ccc;
+	background-image: -webkit-gradient(
+		linear,
+		left bottom,
+		left top,
+		color-stop(0, rgb(181,181,181)),
+		color-stop(0.99, rgb(224,224,224))
+	);
+	background-image: -moz-linear-gradient(
+		center bottom,
+		rgb(181,181,181) 0,
+		rgb(224,224,224) 111pt,
+		rgb(256,256,256) 112pt,
+	);
+
+	border-top-color: #F0F0F0;
+	border-top-width: 1px;
+	border-top-style: solid;
+
+	border-right-color: #B5B5B5;
+	border-right-width: 1px;
+	border-right-style: solid;
+}
+	
+#query_query{
+	float: left;
+	height: 112px;
+	width: 70%;
 }
 
-.edges{
-	background:			url("../images/displayedges.png") no-repeat 24px 4px;
-	text-indent:		52px;
-	display:			block;
+#query_top{
+	width: 100%;
+	height: 65%;
 }
 
-.labels{
-	background:			url("../images/displaylabels.png") no-repeat 24px 0px;
-	text-indent:		52px;
-	display:			block;
+#query_top label{
+	padding-left: 10px;
+	font-family: Collegiate;
+	font-size: 26pt;
 }
 
-.fisheye{
-	background:			url("../images/fisheye.png") no-repeat 24px 4px;
-	text-indent:		52px;
-	display:			block;
+#query_top input{
+	padding-right: 10px;
+	font-size: 20pt;
+	width: 60%;
 }
 
-.title {
-	text-align:			center;
-	font-size:			12pt;
-	color:				#000;
+#query_bottom{
+	width: 100%;
+	height: 35%;
 }
 
-.verticalTitle {
-	float:				left;
-	position:			absolute;
-	text-align:			center;
-	font-size:			12pt;
-	color:				#000;
-	
-	-o-transform:		rotate(-90deg); 
-	-webkit-transform:	rotate(-90deg); 
-	-moz-transform:		rotate(-90deg);
+#query_bottom span{
+	float: left;
+	width: 50%;
 }
 
-.tab {
-	width:				200px;
+#query_bottom span label{
+	padding-left: 10px;
 }
 
-.github {
-	padding-left:		100px;
-	font-family:		Collegiate;
-	font-size:			26pt;
-	color:				black;
-	vertical-align:		middle;
+#query_bottom select{
+	width: auto;
 }
 
-.greyBG {
-	background-image:	url("../images/bottom_bg.png");
+#query_properties{
+	
+}
+		
+#query_buttons{
+	float: left;
+	width: 30%;
+	height: 100%;
 }
+		
+#query_buttons:hover{
+	color: #F0F;
+}
+
+#query_buttons input{
+	display: block;
+	color: #666;
+	border: 0;
+	background-color: transparent;}
 
-.query {
-	width:				240px;
-	font-size:			18pt;
-	font-family:		Helvetica;
-	float:				left;
-	padding-top:		10px;
+input.edges{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/edges.png") no-repeat 0 50%;
 }
 
-#container {
-	padding:			0;
-	margin:				0 auto;
-	width:				100%;
-	height:				100%;
-	
-	background:			#FFF;
+input.labels{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/labels.png") no-repeat 0 50%;
 }
 
-#header {
-	position:			absolute;
-	right:				0px;
-	top:				0px;
+input.fisheye{
+	height: 36px;
+	padding-left: 28px;
+	background: url("../images/fisheye.png") no-repeat 0 50%;
 }
 
-#about {
-	float:				right;
-	padding:			2px;
+#user{
+	float: left;
+	height: 112px;
+	width: 32%;
+
+	border-top-color: #FFF;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
-#files {
-	float:				right;
-	padding:			2px;
+#legend{
+	float: left;
+	height: 112px;
+	
+	min-width: 30%;
+	max-width: 31%;
+
+	border-top-color: #FFF;
+	border-top-width: 1px;
+	border-top-style: solid;
+
+	border-left-color: #B5B5B5;
+	border-left-width: 1px;
+	border-left-style: solid;
 }
 
-#content {
-	height:				auto !important;
-	width:				100%;
+#legend_title{
+	width: 100%;
+	height: 25%;
 }
 
-#footer {
-	position:			relative;
-	height:				0px;
+#legend_elements{
+	width: 100%;
+	height: 75%;
 }
 
-h1, h2 {
-	font-weight:		normal;
-}
\ No newline at end of file
+.button{
+	display: block;
+}
diff --git a/public/images/displayedges.png b/public/images/edges.png
index cbf69c5..cbf69c5 100644
--- a/public/images/displayedges.png
+++ b/public/images/edges.png
diff --git a/public/images/displaylabels.png b/public/images/labels.png
index 6bea06b..6bea06b 100644
--- a/public/images/displaylabels.png
+++ b/public/images/labels.png
diff --git a/public/javascripts/github-connector.js b/public/javascripts/github-connector.js
deleted file mode 100644
index 976f8de..0000000
--- a/public/javascripts/github-connector.js
+++ /dev/null
@@ -1,152 +0,0 @@
-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 = "/graph/local/"+user;
-  
-  $.ajax({
-    url: url,
-    dataType: 'json',
-    success:
-      function(json){
-        resetGraph(json);
-      }
-  });
-}
-
-function getGraphAttributes(){
-  url = "/graph/attributes";
-  
-  $.ajax({
-    url: url,
-    dataType: 'json',
-    success:
-      function(json){
-        graphAttributes = (json && json["attributes"]) ? json["attributes"] : {};
-        setComboBoxes();
-      }
-  });
-}
diff --git a/public/javascripts/sigma-connector.js b/public/javascripts/sigma-connector.js
deleted file mode 100644
index c511de9..0000000
--- a/public/javascripts/sigma-connector.js
+++ /dev/null
@@ -1,125 +0,0 @@
-// --- 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/public/javascripts/stargit.js b/public/javascripts/stargit.js
new file mode 100644
index 0000000..82c414d
--- /dev/null
+++ b/public/javascripts/stargit.js
@@ -0,0 +1,150 @@
+var stargit=(function(){
+	// Functions:
+	var flash;
+	var githubNodesObj = {};
+	var githubEdgesObj = {};
+	var graphAttributes = {};
+	
+	function setFlash(){
+		flash = $('#SiGMa')[0];
+		
+		if(!flash){
+			return false;
+		}else{
+			return true;
+		}
+	}
+	
+	// This function refreshes the graph from the login of
+	// a user:
+	function getGithubGraph(user){
+	  url = "/graph/local/"+user;
+	  
+	  $.ajax({
+	    url: url,
+	    dataType: 'json',
+	    success:
+	      function(json){
+	        resetGraph(json);
+	      }
+	  });
+	}
+	
+	// This function gets the graph attributes to refresh
+	// the different comboboxes:
+	function getGraphAttributes(){
+	  url = "/graph/attributes";
+	  
+	  $.ajax({
+	    url: url,
+	    dataType: 'json',
+	    success:
+	      function(json){
+	        graphAttributes = (json && json["attributes"]) ? json["attributes"] : {};
+	        setComboBoxes();
+	      }
+	  });
+	}
+
+	function resetGraph(graph){
+		if(!setFlash()){
+			return;
+		}
+		
+	  flash.resetGraphPosition();
+	
+	  flash.killForceAtlas();
+	  flash.deleteGraph();
+	  flash.updateGraph(graph);
+	  flash.initForceAtlas();
+	  
+	  if($("#query_color").value) flash.setColor($("#query_color").value,graphAttributes);
+	  if($("#query_size").value) flash.setSize($("#query_size").value);
+	}
+
+	// This function updates the comboboxes:
+	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 = $("#query_color");
+		var nodes_size = $("#query_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)
+		}
+	}
+	
+	// PUBLIC FUNCTIONS:
+	return {
+		loadUser: function(name){
+			getGithubGraph(name);
+		},
+		
+		setSize: function(e){
+			if(!setFlash()) return;
+			flash.setSize(e.value);
+		},
+		
+		setColor: function(e){
+			if(!setFlash()) return;
+			flash.setColor(e.value,graphAttributes);
+		},
+		
+		toggleEdges: function(){
+			if(!setFlash()) return;
+			var areEdgesDisplayed = flash.getDisplayEdges();
+			flash.setDisplayEdges(!areEdgesDisplayed);
+			return !areEdgesDisplayed;
+		},
+		
+		toggleLabels: function(){
+			if(!setFlash()) return;
+			var areLabelsDisplayed = flash.getDisplayLabels();
+			flash.setDisplayLabels(!areLabelsDisplayed);
+			return !areLabelsDisplayed;
+		},
+		
+		toggleFishEye: function(){
+			if(!setFlash()) return;
+			var isFishEye = flash.hasFishEye();
+			if(isFishEye){
+				flash.deactivateFishEye();
+			}else{
+				flash.activateFishEye();
+			}
+			return !isFishEye;
+		}
+	};
+})();
\ No newline at end of file