Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
better interface for adding/editing nodes and edges
  • Loading branch information
Ivan Pozdnyakov authored and Ivan Pozdnyakov committed Sep 27, 2015
1 parent 67f4b40 commit 6f1dbea
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 98 deletions.
111 changes: 45 additions & 66 deletions code.js
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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 =[];
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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");
});


Expand Down Expand Up @@ -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
76 changes: 44 additions & 32 deletions index.php
View file
@@ -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>
Expand Down Expand Up @@ -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>

0 comments on commit 6f1dbea

Please sign in to comment.