Commit 8e0646b3 authored by Maxym Borodenko's avatar Maxym Borodenko

Download JSON

parent d9e1797d
*.iml
.idea/
......@@ -27,13 +27,13 @@ function create_node() {
if (create_node_parent.children == null) {
create_node_parent.children = [];
}
id = generateUUID();
id = generateUUID();
name = $('#CreateNodeName').val();
new_node = { 'name': name,
new_node = { 'name': name,
'id' : id,
'depth': create_node_parent.depth + 1,
'children': [],
'_children':null
'depth': create_node_parent.depth + 1,
'children': [],
'_children':null
};
console.log('Create Node name: ' + name);
create_node_parent.children.push(new_node);
......@@ -149,12 +149,12 @@ function draw_tree(error, treeData) {
visit(treeData, function(d) {
if (d.children) {
for (var child of d.children) {
if (child == node) {
if (child === node) {
d.children = _.without(d.children, child);
update(root);
break;
}
}
}
}
},
function(d) {
......@@ -256,12 +256,12 @@ function draw_tree(error, treeData) {
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight);
baseSvg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white")
baseSvg.call(zoomListener);
......@@ -487,7 +487,7 @@ function draw_tree(error, treeData) {
}
};
childCount(0, root);
var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line
var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line
tree = tree.size([newHeight, viewerWidth]);
// Compute the new tree layout.
......@@ -643,6 +643,32 @@ function draw_tree(error, treeData) {
});
}
$('#downloadJsonBtn').on('click', () => {
downloadTree(tree_root);
});
// We need to remove parent property from all nodes to avoid an error with converting circular structure to JSON
function normalizeJSON(node) {
if (node['parent']) {
delete node.parent;
}
if (node['children']) {
for (let child of node['children']) {
normalizeJSON(child);
}
}
}
function downloadTree(json) {
normalizeJSON(tree_root);
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(tree_root));
let dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "tree.json");
dlAnchorElem.click();
}
outer_update = update;
// Append a group which holds all nodes and which the zoom Listener can act upon.
......
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="foundation.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="d3-context-menu.css" />
<meta charset="utf-8">
<link rel="stylesheet" href="foundation.css"/>
<link rel="stylesheet" href="app.css"/>
<link rel="stylesheet" href="d3-context-menu.css"/>
</head>
<body>
<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Rename Node</h2>
<form id="RenameNodeForm">
<div class="row">
<div class="large-12 columns">
<button id="downloadJsonBtn" type="button">Download JSON</button>
<a id="downloadAnchorElem" style="display:none"></a>
<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Rename Node</h2>
<form id="RenameNodeForm">
<div class="row">
<div class="large-12 columns">
<label>Node name
<input type="text" class="inputName" id='RenameNodeName' placeholder="node name" />
<input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
</label>
</div>
</div>
<div class="row">
<div class="large-8 columns">
</div>
<div class="row">
<div class="large-8 columns">
&nbsp;
</div>
<div class="large-4 columns">
</div>
<div class="large-4 columns">
<a href="#" class="button info" onclick="close_rename_node_modal()">Cancel</a>
<a href="#" class="button success" onclick="rename_node()">Rename</a>
</div>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Create Node</h2>
<form id="CreateNodeForm">
<div class="row">
<div class="large-12 columns">
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true"
role="dialog">
<h2 id="modalTitle">Create Node</h2>
<form id="CreateNodeForm">
<div class="row">
<div class="large-12 columns">
<label>Node name
<input type="text" class="inputName" id='CreateNodeName' placeholder="node name" />
<input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/>
</label>
</div>
</div>
<div class="row">
<div class="large-8 columns">
</div>
<div class="row">
<div class="large-8 columns">
&nbsp;
</div>
<div class="large-4 columns">
</div>
<div class="large-4 columns">
<a href="#" class="button info" onclick="close_create_node_modal()">Cancel</a>
<a href="#" class="button success" onclick="create_node()">Create</a>
</div>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="tree-container"></div>
<div id="tree-container"></div>
<script src="d3.v3.min.js"></script>
<script src="dndTree.js"></script>
<script src="d3-context-menu.js"></script>
<script src="underscore-min.js"></script>
<script src="jquery.js"></script>
<script src="fastclick.js"></script>
<script src="foundation.min.js"></script>
<script>
// for the first initialization
$('document').ready(function(){
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
var element = $(".inputName:visible").first();
element.focus(function(){
this.selectionStart = this.selectionEnd = this.value.length;
});
element.focus();
});
$('#RenameNodeForm').submit(function(e){
rename_node();
return false;
});
$('#CreateNodeForm').submit(function(e){
create_node();
return false;
});
var treeJSON = d3.json("tree.json", draw_tree);
});
</script>
<script src="d3.v3.min.js"></script>
<script src="dndTree.js"></script>
<script src="d3-context-menu.js"></script>
<script src="underscore-min.js"></script>
<script src="jquery.js"></script>
<script src="fastclick.js"></script>
<script src="foundation.min.js"></script>
<script>
// for the first initialization
$('document').ready(function() {
$(document).foundation();
$(document).on('opened', '[data-reveal]', function() {
var element = $(".inputName:visible").first();
element.focus(function() {
this.selectionStart = this.selectionEnd = this.value.length;
});
element.focus();
});
$('#RenameNodeForm').submit(function(e) {
rename_node();
return false;
});
$('#CreateNodeForm').submit(function(e) {
create_node();
return false;
});
var treeJSON = d3.json("tree.json", draw_tree);
});
</script>
</body>
</html>
{
"name": "total genepool of this crop",
"children": [{"name": "cultivated material" },
{"name": "wild material"}
]
"name": "total genepool of this crop",
"children": [
{
"name": "cultivated material"
},
{
"name": "wild material"
}
]
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment