summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-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
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
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
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 05:36:05 +0000