summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/css/style.css255
-rw-r--r--public/images/edges.png (renamed from public/images/displayedges.png)bin422 -> 422 bytes
-rw-r--r--public/images/labels.png (renamed from public/images/displaylabels.png)bin267 -> 267 bytes
-rw-r--r--public/javascripts/github-connector.js152
-rw-r--r--public/javascripts/sigma-connector.js125
-rw-r--r--public/javascripts/stargit.js150
-rw-r--r--views/index.tt112
-rw-r--r--views/layouts/main.tt38
8 files changed, 391 insertions, 441 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
Binary files differ
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
Binary files differ
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
diff --git a/views/index.tt b/views/index.tt
index 58f31d0..93ca976 100644
--- a/views/index.tt
+++ b/views/index.tt
@@ -1,62 +1,50 @@
-<!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" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>StartGit | Explore the Github users network</title>
- <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
- <script type="text/javascript" src="js/sigma-connector.js"></script>
- <script type="text/javascript" src="js/github-connector.js"></script>
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- </head>
- <table id="container">
- <tr id="content">
- <td colspan="5" width="100%" height="100%">
- <object id="SiGMa">
- <param name="movie" value="flash/SiGMa_API.swf" />
- <param name="quality" value="high" />
- <param name="allowScriptAccess" value="sameDomain" />
- <embed src="flash/SiGMa_API.swf" quality="high" width="100%" height="100%" name="SiGMa" quality="high" allowScriptAccess="always">
- </embed>
- </object>
- </td>
- </tr>
- <tr id="footer" valign="top">
- <td class="greyBG">
- <div class="title">
- Graphic parameters
- </div>
- <form name="node_properties">
- <br/>
- nodes color:
- <br/>
- <select name="nodes_color" style="width:100%;" onchange="setColor(this.value,graphAttributes);">
- </select>
- <br/>
- nodes size:
- <br/>
- <select name="nodes_size" style="width:100%;" onchange="setSize(this.value);">
- </select>
- </form>
- </td>
- <td class="greyBG">
- <br/>
- <a href="#" class="button" onclick="toggleDisplayEdges();">
- <span class="edges">display edges</span>
- </a>
- <a href="#" class="button" onclick="toggleDisplayLabels();">
- <span class="labels">display labels</span>
- </a>
- <a href="#" class="button" onclick="toggleFishEye();">
- <span class="fisheye">use fisheye zoom</span>
- </a>
- </td>
- <td class="github" colspan="3">
- <div style="float:left;">github/</div>
- <input type="text" id="query" class="query" name="query" onkeypress="if((event.keyCode||event.which)==13) newQuery(this.value);"/>
- </td>
- </tr>
- </table>
- </body>
-</html>
+<div id="main">
+ <object id="SiGMa">
+ <param name="movie" value="flash/SiGMa_API.swf" />
+ <param name="quality" value="high" />
+ <param name="allowScriptAccess" value="sameDomain" />
+ <embed src="flash/SiGMa_API.swf" quality="high" width="100%" height="100%" name="SiGMa" quality="high" allowScriptAccess="always">
+ </embed>
+ </object>
+</div>
+<div id="foot">
+ <form id="query">
+ <div id="query_query">
+ <div id="query_top">
+ <label for="query_input">github/</label>
+ <input type="text" id="query_input" />
+ </div>
+ <div id="query_bottom">
+ <span>
+ <label for="query_size">nodes size:</label>
+ <select id="query_size">
+ </select>
+ </span>
+ <span>
+ <label for="query_color">nodes color:</label>
+ <select id="query_color">
+ </select>
+ </span>
+ </div>
+ </div>
+ <div id="query_buttons">
+ <input type="button" class="edges" value="display edges"/>
+ <input type="button" class="labels" value="hide labels"/>
+ <input type="button" class="fisheye" value="use fisheye"/>
+ </div>
+ </form>
+ <div id="user">
+ <div id="user_avatar">
+ </div>
+ <div id="user_info">
+ </div>
+ </div>
+ <div id="legend">
+ <div id="legend_title">
+ Nodes color:
+ </div>
+ <div id="legend_elements">
+ </div>
+ </div>
+ </div>
+</div> \ No newline at end of file
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index d19c388..f547e68 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -6,16 +6,40 @@
<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>
+ <script type="text/javascript" src="<% request.uri_base %>/javascripts/stargit.js"></script>
<link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
+ <script>
+ $(document).ready(function(){
+ $("#query_input").keypress(function(e){
+ if(e.which == 13) {
+ stargit.loadUser(this.value);
+ e.stopPropagation();
+ return false;
+ }
+ return true;
+ });
+ $("#query_size").change(stargit.setSize);
+ $("#query_color").change(stargit.setColor);
+ $("#query_buttons .edges").click(function(){
+ this.value = stargit.toggleEdges()?"hide edges":"display edges";
+ });
+ $("#query_buttons .labels").click(function(){
+ this.value = stargit.toggleLabels()?"hide labels":"display labels";
+ });
+ $("#query_buttons .fisheye").click(function(){
+ this.value = stargit.toggleFishEye()?"hide fisheye":"use fisheye";
+ });
+ });
+ </script>
</head>
- <body onload="init();">
- <div id="header">
- <a id="about" href="#">About</a>
- <a id="files" href="#">Files</a>
- </div>
+ <body>
+ <div id="head">
+ <div id="head_title">Stargit - Browse the Github collaborations network</div>
+ <a id="head_about" href="#">About</a>
+ <a id="head_dowload" href="#">Download</a>
+ <a id="head_api" href="#">API</a>
+ </div>" href="#">Files</a>
<% content %>
</body>
</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 07:11:46 +0000