From 6f1dbea53b217a3a183635641ae56d850d897087 Mon Sep 17 00:00:00 2001
From: Ivan Pozdnyakov <Vanya.Pozdnyakov@charter.net>
Date: Sun, 27 Sep 2015 14:48:15 -0400
Subject: [PATCH] better interface for adding/editing nodes and edges

---
 code.js   | 111 ++++++++++++++++++++++--------------------------------
 index.php |  76 +++++++++++++++++++++----------------
 2 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/code.js b/code.js
index 02ff9b0..d5db352 100644
--- a/code.js
+++ b/code.js
@@ -3,7 +3,9 @@ var selectedForQueryNodes = [];
 var selectedForEditNodes = [];
 var bundleCounter = 0;
 var edgeCounter = 0;
+var nodeCounter = 0;
 var loadCounts = 0;
+var target = 0;
 var header ="";
 var counts = {};
 var str_info;
@@ -33,65 +35,16 @@ $(function () { // on dom ready
 	function remove(event) {
 		selectedForEditNodes.remove();
 	}
-
-	function add(event) {
+	
+	function addNode(event) {
+		var name = "n"+nodeCounter;
 		var node = [];
-		var edges = [];
-		
-		//parse table info
-		var name = document.getElementById("name").value;
-		var x = document.getElementById("data").rows.length;
-		for(var i=1; i<x; i++){
-			var edgeTypeId = "edge_type_n"+x;
-			var nameNeigbhorId = "name_n"+x;
-			
-			var edgeType = document.getElementById(edgeTypeId).value;
-			var nameNeighbor= document.getElementById(nameNeigbhorId).value;
-			if(edgeType == "incoming"){
-				edges.push({ 
-					group: "edges",
-					data : {
-        	   			id : "e"+edgeCounter,
-             			SUID : "e"+edgeCounter,
-            			LineThickness:1.0,
-            			EndArrow:"Arrow",
-            			Coords:[{"x":0,"y":0},{"x":0,"y":0}],
-            			GraphId:"e"+edgeCounter,
-            			ZOrder:"12288",
-            			source:name,
-            			target:nameNeighbor, 
-            			StartArrow : "Line",
-        				selected : false
-      				},
-      				selected : false
-    			})
-    		} else {
-    			edges.push({ 
-					group: "edges",
-					data : {
-        	   			id : "e"+edgeCounter,
-             			SUID : "e"+edgeCounter,
-            			LineThickness:1.0,
-            			EndArrow:"Line",
-            			Coords:[{"x":0,"y":0},{"x":0,"y":0}],
-            			GraphId:"e"+edgeCounter,
-            			ZOrder:"12288",
-            			source:name,
-            			target:nameNeighbor, 
-            			StartArrow : "Arrow",
-        				selected : false
-      				},
-      				selected : false
-    			})
-    		}
-    		edgeCounter++;
-    	}
 		
 		node.push({ group: "nodes",
       			data: {
          			GraphId: name,
          			LabelSize: 10,
-         			SUID: "b6fd7",
+         			SUID: name,
          			Type: "Protein",
          			Valign: "Middle",
          			Width: 80.75,
@@ -110,10 +63,41 @@ $(function () { // on dom ready
       				'color': 'black'
       			} 
    		})
-   				
-   		window.cy.add(node.concat(edges));
+   		
+   		nodeCounter++;		
+   		window.cy.add(node);
 	}
 	
+	function addEdge(event){
+		
+		var sourceE = prompt("Enter source.");
+		var targetE = prompt("Enter target.");
+		var typeE = prompt("Enter type.");
+		
+		var edge = [];
+		
+    	edge.push({ 
+			group: "edges",
+			data : {
+        	   	id : "e"+edgeCounter,
+            	SUID : "e"+edgeCounter,
+            	LineThickness:1.0,
+            	EndArrow:typeE,
+            	Coords:[{"x":0,"y":0},{"x":0,"y":0}],
+            	GraphId:"e"+edgeCounter,
+            	ZOrder:"12288",
+            	source:sourceE,
+            	target:targetE, 
+            	StartArrow : typeE,
+        		selected : false
+      		},
+      		selected : false
+    	})
+    	
+    	edgeCounter++;
+    	window.cy.add(edge);
+    }
+	
 	function bundle(event){		
 		var nodes = [];
 		var edges =[];
@@ -392,15 +376,11 @@ $(function () { // on dom ready
 					var node = this;
 
 					var node_name = node.data("shared_name");
-					selectedNodes.push(node_name);
+					selectedForQueryNodes.push(node_name);
 					var node_id = node.data("id");
-					var count = selectedNodes.filter(function (value) {
+					var count = selectedForQueryNodes.filter(function (value) {
 						return value === node_name;
 					}).length;
-
-					selectedForQueryNodes.push(node_name);
-					
-					console.log(count);
 					
 					// RNA
 					if (count == 1) {						
@@ -488,10 +468,8 @@ $(function () { // on dom ready
 				});
 
 				cy.on('cxttapstart ', 'node', function(event){
-              				var name = prompt("Enter new name.", event.cyTarget.data('name'));
-					if (name != null) {
-    					event.cyTarget.data('name', name)
-					}
+					target = event.cyTarget;
+					dialogNode.dialog("open");
 				});
 				
 				
@@ -536,7 +514,8 @@ $(function () { // on dom ready
 	
 	document.getElementById('file').addEventListener('change', onChange);
 	document.getElementById('delete').addEventListener('click', remove);
-	document.getElementById('add').addEventListener('click', add);
+	document.getElementById('addNode').addEventListener('click', addNode);
+	document.getElementById('addEdge').addEventListener('click', addEdge);
 	document.getElementById('bundle').addEventListener('click',bundle);
 	document.getElementById('produceJSON').addEventListener('click',produceJSON);
 }); // on dom ready
diff --git a/index.php b/index.php
index 8ae6432..2ce9eed 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,7 @@
 <html>
 <head>
 	<link href="style.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 	<meta charset=utf-8/>
 	<title content="Json pathway file reader">Json pathway file reader</title>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
@@ -57,43 +58,54 @@
 </script>
 <body>
 	<input id="file" type="file"/>
-	<input id="add" value="Add" type="button"/></input>
+	<input id="addNode" value="Add Node" type="button"/></input>
+	<input id="addEdge" value="Add Edge" type="button"/></input>
 	<input id="delete" value="Delete Selected Node(s)" type="button"/></input>
 	<input id="bundle" value="Bundle" type="button"/></input>
 	<input id="produceJSON" value="Export JSON" type="button"/></input>
-	<input id="add_neighbor" value="add another neighbor" type="button"/>
-	<table class="dd" id="data">
-		<tr>
-			<td>Element name:</td>
-			<td><input name="name" id="name" type="text" /></td>
-			<td>Type:</td>
-			<td><select name="element_type" id="type">
-  				<option value="1">Rectangle</option>
-  			</select></td>
-		</tr>
-	</table>
-	</br>
-        <form id="form-data" method="post" action="get.php" target="_blank">
-		<input type="hidden" name="variable" id="variable"><br>
-		<!--<input type="hidden" name="rna" id="rna"><br>
-		<input type="hidden" name="cnv" id="cnv"><br>
-		<input type="hidden" name="mut" id="mut"><br>
-		<input type="hidden" name="ts_gene" id="ts_gene"><br>
-		<input type="hidden" name="onco_gene" id="onco_gene"><br>-->
-		<input type="submit" value="Submit">
-	</form>
-	</br>
-	</br>
+	
+	<div id="dialog-form-node" title="Edit node">
+ 		<form>
+    		<fieldset>
+      			<label for="name">name:</label>
+      			<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
+      			
+      			<label for="height">height:</label>
+      			<input type="text" name="height" id="height" value="" class="text ui-widget-content ui-corner-all">
+      			
+      			<label for="width">width:</label>
+      			<input type="text" name="width" id="width" value="" class="text ui-widget-content ui-corner-all">
+ 
+ 			    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+    		</fieldset>
+  		</form>
+	</div>
 	<div id="cy"></div>
-	<!--<div id="result"></div>-->
 </body>
 <script>
-	var currentItem = 1;
-	$('#add_neighbor').click(function(){
-		currentItem++;
-		$('#items').val(currentItem);
-		var strToAdd = '<tr><td>Neighbor</td><td><input name="name_n'+currentItem+'" id="name_n'+currentItem+'" type="text"></td><td>Type</td><td><select name="edge_type_n'+currentItem+'" id="edge_type_n'+currentItem+'"><option value="1">Outgoing</option><option value="2">Incoming</option></select></td></tr>';
-  		$('#data').append(strToAdd);
- 	});
+	function edit() {
+		name = document.getElementById("name").value;
+		width = document.getElementById("width").value;
+		height = document.getElementById("height").value;
+		target.data('name', name);
+		target.data('Width', width);
+		target.data('Height', height);
+		dialogNode.dialog( "close" );
+	}
+
+ 	dialogNode = $( "#dialog-form-node" ).dialog({
+    	autoOpen: false,
+    	height: 300,
+    	width: 350,
+    	buttons: {
+    		"submit": edit,
+    	    Cancel: function() {
+    	    	dialogNode.dialog( "close" );
+    	   	}
+    	},
+    	close: function() {
+    	}
+    });
+    
 </script>
 </html>