Upgrade graph.php to use sigma.js and output gexf
Upgrade graph.php to use sigma.js and output gexf


Former-commit-id: f7184884c78601da7d51fa0016334c0f329d43cd

file:a/graph.php -> file:b/graph.php
--- a/graph.php
+++ b/graph.php
@@ -6,36 +6,46 @@
     $format = $_REQUEST['format'];
 }
 
-function add_node($id, $label) {
+function add_node($id, $label, $parent="") {
     global $format;
     if ($format == "html") {
-        echo "nodes[\"$id\"] = graph.newNode({label: \"$label\"});" . PHP_EOL;
+       // echo "nodes[\"$id\"] = graph.newNode({label: \"$label\"});" . PHP_EOL;
     }
      if ($format == "dot" && $label != "") {
          echo "$id [label=\"$label\"];". PHP_EOL;
      }
+      if ($format == "gexf") {
+          echo "<node id='$id' label=\"".htmlentities($label,ENT_XML1)."\" ".($parent != ""? "pid='$parent'><viz:size value='1'/>":"><viz:size value='2'/>")
+              ."<viz:color b='".rand(0,255)."' g='".rand(0,255)."' r='".rand(0,255)."'/>"
+                  ."</node>". PHP_EOL;
+      }
 }
 
 function add_edge($from, $to, $color) {
     global $format;
     if ($format == "html") {
-        echo "graph.newEdge(nodes[\"$from\"], nodes['$to'], {color: '$color'});" . PHP_EOL;
+     //   echo "graph.newEdge(nodes[\"$from\"], nodes['$to'], {color: '$color'});" . PHP_EOL;
     }
     if ($format == "dot") {
         echo "$from -> $to ".($color != ""? "[color=$color]":"").";". PHP_EOL;
     }
+     if ($format == "gexf") {
+          echo "<edge id='$from$to' source='$from' target='$to' />". PHP_EOL;
+      }
+}
+if ($format == "gexf") {
+    //header('Content-Type: text/xml');
+     header('Content-Type: application/gexf+xml');
+echo '<?xml version="1.0" encoding="UTF-8"?>
+<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.2draft/viz" version="1.2">
+    <meta lastmodifieddate="2009-03-20">
+        <creator>Gexf.net</creator>
+        <description>A hello world! file</description>
+    </meta>
+    <graph mode="static" defaultedgetype="directed">
+        <nodes>'. PHP_EOL;
 }
 
-if ($format == "html") {
-    ?>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-    <script src="lib/springy/springy.js"></script>
-    <script src="lib/springy/springyui.js"></script>
-    <script>
-        var graph = new Graph();
-        var nodes = [];
-    <?php
-}
 if ($format == "dot") {
     echo 'digraph g {'. PHP_EOL;
 }
@@ -50,7 +60,10 @@
 } catch (SetteeRestClientException $e) {
     setteErrorHandler($e);
 }
-
+if ($format == "gexf") {
+echo '</nodes>
+        <edges>'. PHP_EOL;
+}
 try {
     $rows = $db->get_view("app", "byDeptStateName", null, true)->rows;
 //print_r($rows);
@@ -72,21 +85,59 @@
 }
 if ($format == "html") {
     ?>
-        window.onload = function() {
-            $(document).ready(function() {
-                var springy = $('#springydemo').springy({
-                    graph: graph
-                });
-            });
-        };
-    </script>
+ <div id="sigma-example" width="960" style="min-height:800px;background-color: #333;"></div>
+  <script src="javascripts/sigma.min.js"></script>
+  <script src="javascripts/sigma/plugins/sigma.parseGexf.js"></script>
+  <script src="javascripts/sigma/plugins/sigma.forceatlas2.js"></script>
+  <script type="text/javascript">function init() {
+  // Instanciate sigma.js and customize rendering :
+  var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
+    defaultLabelColor: '#fff',
+    defaultLabelSize: 14,
+    defaultLabelBGColor: '#fff',
+    defaultLabelHoverColor: '#000',
+    labelThreshold: 6,
+    defaultEdgeType: 'curve'
+  }).graphProperties({
+    minNodeSize: 0.5,
+    maxNodeSize: 5,
+    minEdgeSize: 5,
+    maxEdgeSize: 5
+  }).mouseProperties({
+    maxRatio: 32
+  });
 
-    <canvas id="springydemo" width="1260" height="680" />
+  // Parse a GEXF encoded file to fill the graph
+  // (requires "sigma.parseGexf.js" to be included)
+  sigInst.parseGexf('graph.php?format=gexf');
+ sigInst.bind('downnodes',function(event){
+    var nodes = event.content;
+ });
+  // Draw the graph :
+  sigInst.draw();
+  // Start the ForceAtlas2 algorithm
+  // (requires "sigma.forceatlas2.js" to be included)
+  sigInst.startForceAtlas2();
+  
+}
+
+if (document.addEventListener) {
+  document.addEventListener("DOMContentLoaded", init, false);
+} else {
+  window.onload = init;
+}
+</script>
+
     <?php
 }
 if ($format == "dot") {
     echo "}";
 }
+if ($format == "gexf") {
+echo ' </edges>
+    </graph>
+</gexf>'. PHP_EOL;
+}
 //include_footer();
 ?>
 

directory:a/lib/springy (deleted)
--- a/lib/springy
+++ /dev/null