-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·80 lines (76 loc) · 5.75 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon.ico"/>
<meta id="myViewport" name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>
<link rel="stylesheet" type="text/css" href="https://brettonw.github.io/plot-svg.js/plot-svg.css" />
<script type="text/javascript" src="https://brettonw.github.io/plot-svg.js/plot-svg.js"></script>
<link rel="stylesheet" type="text/css" href="https://brettonw.github.io/tree-svg.js/src/tree-svg.css" />
<script type="text/javascript" src="https://brettonw.github.io/tree-svg.js/src/tree-svg.js"></script>
<script type="text/javascript" src="https://brettonw.github.io/tree-svg.js/src/tree-svg-helper.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="src/diseases.js"></script>
<script type="text/javascript" src="src/filters.js"></script>
<script type="text/javascript" src="src/samplers.js"></script>
<script type="text/javascript" src="src/atom.js"></script>
<script type="text/javascript" src="src/tree.js"></script>
<script type="text/javascript" src="src/simulator.js"></script>
<script type="text/javascript" src="src/events.js"></script>
<title>Transmission</title>
</head>
<body onload="onLoad();">
<h1 style="text-align: center; margin:0;">Transmission</h1>
<div class="top-wrapper" style="margin-top:10px;">
<div class="exterior-wrapper">
<div class="interior-wrapper" style="width:300px;height:600px;">
<table cellpadding="0" cellspacing="0" style="width:260px;margin-top:12px;margin-left:auto;margin-right:auto;">
<tr><td>Population Dimension:</td><td style="float:right;" id="populationDimensionDisplay">10</td></tr>
<tr><td colspan="2"><input type="range" id="populationDimensionRange" min="3" max="32" step="1" style="float:right;width:90%;height:15px;" onchange="synchUi();" oninput="populationDimensionRangeInput(this);" /></td></tr>
<tr><td>Event Rate per Week:</td><td style="float:right;" id="eventRateDisplay">1.00</td></tr>
<tr><td colspan="2"><input type="range" id="eventRateRange" min="1.0" max="10" step="0.5" style="float:right;width:90%;" onchange="synchUi();" oninput="eventRateRangeInput(this);" /></td></tr>
<tr style="height:4px;"></tr>
<tr style="height:2px;background-color:#eeeeee;"><td colspan="2"></td></tr>
<tr style="height:4px;"></tr>
<tr><td>Prophylactic Use Rate:</td><td style="float:right;" id="prophylacticUseRateDisplay">0</td></tr>
<tr><td colspan="2"><input type="range" id="prophylacticUseRateRange" min="0" max="100" step="10" style="float:right;width:90%;" onchange="synchUi();" oninput="prophylacticUseRateRangeInput(this);" /></td></tr>
<tr><td>Prophylactic Efficacy:</td><td style="float:right;" id="prophylacticEfficacyDisplay">0</td></tr>
<tr><td colspan="2"><input type="range" id="prophylacticEfficacyRange" min="0" max="100" step="5" style="float:right;width:90%;" onchange="synchUi();" oninput="prophylacticEfficacyRangeInput(this);" /></td></tr>
<tr><td>Prophylactic Blend Bias:</td><td style="float:right;" id="prophylacticBlendBiasDisplay">50</td></tr>
<tr><td colspan="2"><input type="range" id="prophylacticBlendBiasRange" min="0" max="100" step="10" style="float:right;width:90%;" onchange="synchUi();" oninput="prophylacticBlendBiasRangeInput(this);" /></td></tr>
<tr style="height:4px;"></tr>
<tr style="height:2px;background-color:#eeeeee;"><td colspan="2"></td></tr>
<tr style="height:4px;"></tr>
<tr><td colspan="2">Disease:</td></tr>
<tr><td colspan="2"><select id="diseaseSelect" onchange="synchUi();" style="width:100%;"></select></td></tr>
<tr style="height:10px;"></tr>
<tr><td colspan="2">Pairing Strategy:</td></tr>
<tr><td colspan="2"><select id="samplerSelect" onchange="synchUi();" style="width:100%;"></select></td></tr>
<tr style="height:4px;"></tr>
<tr style="height:2px;background-color:#eeeeee;"><td colspan="2"></td></tr>
<tr style="height:4px;"></tr>
<tr><td>Live SIR Plot Update:</td><td style="float:right;"><input type="checkbox" id="liveUpdateSirPlotCheckbox" onchange="liveUpdateSirPlotCheckboxChanged(this);" /></td></tr>
<tr><td>Live Tree Update:</td><td style="float:right;"><input type="checkbox" id="liveUpdateTreeCheckbox" onchange="liveUpdateTreeCheckboxChanged(this);" /></td></tr>
<tr style="height:4px;"></tr>
<tr style="height:2px;background-color:#eeeeee;"><td colspan="2"></td></tr>
<tr style="height:4px;"></tr>
<tr><td colspan="2"><input id="runButton" type="button" value="Run" style="width:100%;" onclick="runButtonClicked(this);" /></td></tr>
</table>
</div>
</div>
<div class="exterior-wrapper">
<div class="interior-wrapper" style="width:600px;height:600px;">
<div id="display"></div>
</div>
</div>
</div>
<div class="top-wrapper" style="margin-top:4px; margin-bottom:20px;">
<div class="exterior-wrapper">
<div id="sirPlot" class="interior-wrapper" style="width:450px;height:300px;"></div>
</div>
<div class="exterior-wrapper">
<div id="tree" class="interior-wrapper" style="width:450px;height:300px;"></div>
</div>
</div>
</body>
</html>