-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (97 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>SVG in HTML</title>
<style>
#svg-container {
width: 100vw;
height: 80vh;
}
</style>
</head>
<body>
<form id="bandage">
<section id="query">
<p style="display:inline;">Query Input: </p>
<label for="chr"></label>
<input type="text" id="chr" placeholder="chr1">
<p style="display:inline;">:</p>
<label for="start-loc"></label>
<input type="text" id="start-loc" placeholder="10000">
<p style="display:inline;">-</p>
<label for="end-loc"></label>
<input type="text" id="end-loc" placeholder="20000">
</section>
<br>
<section id="settings">
<fieldset>
<legend>exact-overlap:</legend>
<label for="exact-overlap-true">Yes</label>
<input type="radio" id="exact-overlap-true" name="exact-overlap" value="1" checked>
<label for="exact-overlap-false">No</label>
<input type="radio" id="exact-overlap-false" name="exact-overlap" value="0">
</fieldset>
<fieldset>
<legend>debug small graphs:</legend>
<label for="debug-small-graphs-true">Yes</label>
<input type="radio" id="debug-small-graphs-true" name="debug-small-graphs" value="1">
<label for="debug-small-graphs-false">No</label>
<input type="radio" id="debug-small-graphs-false" name="debug-small-graphs" value="0" checked>
</fieldset>
<label for="minnodelength">Minimum Node Length:</label>
<input type="number" id="minnodelength" value="5" min="1" max="100">
<label for="nodeseglen">Node Segment Length:</label>
<input type="number" id="nodeseglen" value="20" min="1" max="1000">
<label for="edgelen">Edge Length:</label>
<input type="number" id="edgelen" value="5" min="1" max="100">
<label for="nodelenpermb">Node Length per Megabase:</label>
<input type="number" id="nodelenpermb" value="1000" min="1000" max="1000000">
</section>
<section id="image">
<input type="submit" id="generate-bandage" value="Generate Graph">
<div id="svg-container"></div>
</section>
</form>
<script>
document.getElementById("bandage").addEventListener("submit", async(event) => {
event.preventDefault();
let chrInput = document.getElementById("chr").value;
let startlocInput = document.getElementById("start-loc").value;
let endlocInput = document.getElementById("end-loc").value;
let debugSmallGraphRadios = document.getElementsByName("debug-small-graphs");
let debugSmallGraph;
let exactOverlapRadios = document.getElementsByName("debug-small-graphs");
let exactOverlap;
let minNodeLength = document.getElementById("minnodelength").value;
let nodeSegLen = document.getElementById("nodeseglen").value;
let edgeLen = document.getElementById("edgelen").value;
let nodeLenPerMB = document.getElementById("nodelenpermb").value;
if (debugSmallGraphRadios[0].checked) {
debugSmallGraph = debugSmallGraphRadios[0].value;
} else {
debugSmallGraph = debugSmallGraphRadios[1].value;
};
if (exactOverlapRadios[0].checked) {
exactOverlap = exactOverlapRadios[0].value;
} else {
exactOverlap = exactOverlapRadios[1].value;
};
const settings = [exactOverlap, debugSmallGraph, minNodeLength, nodeSegLen, edgeLen, nodeLenPerMB];
console.log(settings)
let response = await fetch(`
http://0.0.0.0:8080/subgraph/svg/?chrom=${chrInput}&start=${startlocInput}&end=${endlocInput}&graphtype=minigraph`
);
let svg = await response.text();
localStorage.setItem("bandage-svg", svg);
document.getElementById("svg-container").innerHTML = svg;
})
window.onload = function() {
if (localStorage.getItem('bandage-svg')) {
let svg = localStorage.getItem('bandage-svg');
document.getElementById("svg-container").innerHTML = svg;
}
}
</script>
</body>
</html>