--- a/public/viewer/viewer_white.html	Sun Mar 17 22:19:31 2013 +0900
+++ b/public/viewer/viewer_white.html	Sun Mar 17 22:39:58 2013 +0900
@@ -333,28 +333,12 @@
 }
 
 function GraphData() {
-/*
-    function graph() {
-	var g = {};
-	g.property = {};
-	g.in = {};
-	g.out = {};
-	g.both = {};
-	return g;
-    }
-    function edge() {
-	var e = {};
-	e.property = {};
-	return e;
-    }
-*/
     var graphData = {};
     graphData.nodes = {};
     graphData.edges = {};
     return graphData;
 }
 
-
 function parseJSONGraphData(memory ,jsonObj) {
     var nodes = jsonObj.nodes;
     for (var i=0; i<nodes.length; i++) {
@@ -402,10 +386,37 @@
 }
 
 
+function createNodeFromEdge(graphData, edge) {
+    var fromNode = graphData.nodes[edge.property.from];
+    if (!fromNode.view) updateNode(fromNode);
+    var toNode = graphData.nodes[edge.property.to];
+    if (!toNode.view) updateNode(toNode);
+    var rel = edge.property.rel;
+    var type = edge.property.type;
+    var c;
+    if (type == 'both') {
+	/* TODO */
+	c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector);
+    } else {
+	c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector);
+    }
+    c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"});
+
+}
+
 function updateRelationNodes(graphData, node) {
     var id = node.property.id;
-    var nodes = graphData.graphs;
+    var nodes = graphData.nodes;
     var edges = graphData.edges;
+    var edgeIds = [];
+    for (var i=0; i<node.in.length; i++) edgeIds.push(node.in[i]);
+    for (var i=0; i<node.out.length; i++) edgeIds.push(node.out[i]);
+    for (var i=0; i<node.both.length; i++) edgeIds.push(node.both[i]);
+    for (var i=0; i<edgeIds.length; i++ ) {
+	createNodeFromEdge(graphData, edges[edgeIds[i]]);
+    }
+    jsPlumb.removeAllEndpoints();
+    jsPlumb.draggable($('.graphNode'));
 }
 
 function testStart() {