basic interface for adding nodes/with edges

ivp08001 · Sep 10, 2015 · e9c973c · e9c973c
1 parent c8c4dd7
commit e9c973c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 16 deletions.
diff --git a/code.js b/code.js
@@ -38,17 +38,62 @@ $(function () { // on dom ready
 	selected: false
 	shared_name: "TP73alpha"
 */
-	function add(event) {	
-		var node = { group: "nodes", x: 10, y: 35, 
-		data: { Color: "ff0033",GraphId: "b6fd8", 
-				Height: 27, Labelsize: 10, 
-				SUID: "b6fd8", Type: "Protein", 
-				Valign: "Middle", Width: 80.75,
-				XrefDatasource: "Uniprot-TrEMBL",
-				XrefId: 01530, id: "b6fd8", name: "O15350",
-				selected: false, shared_names: "TP73alpha" } };
+	function add(event) {
+		var node = [];
+		var edges = [];
 
-		cy.add(node);
+		//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(true){
+				edges.push({ 
+					group: "edges",
+					data : {
+        	   			id : "1",
+             			SUID : "1",
+            			LineThickness:1.0,
+            			EndArrow:"Arrow",
+            			Coords:[{"x":0,"y":0},{"x":0,"y":0}],
+            			GraphId:"1",
+            			ZOrder:"12288",
+            			source:name,
+            			target:nameNeighbor, 
+            			StartArrow : "Line",
+        				selected : false
+      				},
+      				selected : false
+    			})
+    		}
+    	}
+
+		node.push({ group: "nodes",
+      			data: {
+        			Color: "ff0033",
+         			GraphId: name,
+         			LabelSize: 10,
+         			SUID: "b6fd7",
+         			Type: "Protein",
+         			Valign: "Middle",
+         			Width: 80.75,
+         			Height: 100,
+         			id: name,
+         			name: name,
+         			selected: false,
+         			shared_name: "Ivannode"
+       			},
+       			position: {
+         			x: 500,
+         			y: 500
+      			}
+   		})
+
+   		window.cy.add(node.concat(edges));
 	}
 
 	function visual_pathway(obj) {

diff --git a/index.php b/index.php
@@ -36,7 +36,6 @@
 
 				$(".return-data").html("Uploaded Canvas image link: <a href=" + respond + ">" + respond + "</a>").hide().fadeIn("fast");
 			});
-
 		}
 	});
 
@@ -53,25 +52,35 @@ function dataURLtoBlob(dataURL) {
 		// Return our Blob object
 		return new Blob([new Uint8Array(array)], {type: 'image/png'});
 	}
-
 </script>
 <body>
 	<input id="file" type="file"/>
 	<input id="add" value="Add" type="button"/></input>
 	<input id="delete" value="Delete Selected Node(s)" type="button"/></input>
+	<input id="add_neighbor" value="add another neighbor" type="button"/>
 	<table class="dd" id="data">
 		<tr>
-			<td>Node:</td>
+			<td>Element name:</td>
 			<td><input name="name" id="name" type="text" /></td>
 			<td>Type:</td>
-			<td><select name="type" id="type">
+			<td><select name="element_type" id="type">
   				<option value="1">Rectangle</option>
   			</select></td>
 		</tr>
 	</table>
-	<br/>
+	</br>
+	</br>
+	</br>
 	<div id="cy"></div>
-	<br/>
 	<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);
+ 	});
+</script>
 </html>