-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathphylo.html
118 lines (109 loc) · 5.35 KB
/
phylo.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
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head>
<base href="">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- SmartMenus core CSS (required) -->
<link href="smartmenus/css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="smartmenus/css/sm-clean/sm-clean.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<title></title>
</head>
<body onmousedown="return false" onselectstart="return false">
<div>
<div id="phylo_intro_slides" class="modal">
<!-- Modal content -->
<div class="modal-content container">
<div class="row align-items-center" id="modal-content-title">
<div class="col-11 title-text-box" style="top: 5%; font-weight: bold;"></div>
<div class="col-1 skip-button-box" style="top: -1%;"></div>
</div>
<div class="row" id="modal-content-body"></div>
<div class="row" id="modal-content-buttons">
<div class="col-6"></div>
<div class="col-3 previous-button-box" style="text-align:right;"></div>
<div class="col-3 next-button-box" style=></div>
</div>
</div>
</div>
<nav class="main-nav navbar-fixed-top" role="navigation">
<h2 class="nav-brand"><a href=# class="web-name">Synteny Explorer</a></h2>
<p class="nav-brand"><a href=# class="web-name">Phylo View</a></p>
<ul id="main-menu" class="sm sm-clean">
<!--<li><a href="#">Display</a>
<ul>!-->
<!--<li><a href="#">Layout</a>
<ul>
<li><a href="#" id="radial">Radial</a></li>
<li><a href="#" id="linear">Linear</a></li>
</ul>
</li>!-->
<!--<li><a href="#">Zoom</a>
<ul>
<li>
<input id="zoomValue" type="number" value="100" min="1" max="200" onkeypress="return event.charCode >= 48 && event.charCode <= 57" />%
</li>
</ul>
</li>!-->
<li><a href="#">Labels</a>
<ul>
<li><a id="show_timeLine" href="#">Timeline </a> </li>
<li><a id="show_name" href="#">Species Names </a></li>
</ul>
</li>
<!--</ul>
</li>!-->
<li><a href="#" id="show_intro"> Help</a></li>
</ul>
</nav>
<div class="map" id="tree"></div>
<div id="leftBar">
<div id="overview">
<p id="overview-text">overview</p>
</div>
<div class="contextTree" id="contextTree">
</div>
</div>
<div id="rightBar">
<div class="topSelectBox" id="speOne">
<div class="innerBox">
<p id="selectSpe1">Click on two different animals from the phylogenetic tree to select,
and then go to the chromosome view to see the genome evolution and
divergence of the two species, based on common ancestors!</p></p>
</div>
</div>
<div class="SelectBox2" id="miniTree">
<button type="button" class="button" id="genome">Go to genome view</button>
</div>
<div class="bottomSelectBox" id="speTwo">
<div class="innerBox">
<p id="selectSpe2"> Click Icons to Select Species.</p>
</div>
</div>
</div>
<div id="vis">
<script src="js/jquery.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/d3/d3.min.js"></script>
<script src="js/newick.js"></script>
<script src="js/miniLife.js"></script>
<script src="js/phylo/phylo.js"></script>
<script src="js/phylo/createLinearTree.js"></script>
<script src="js/phylo/createRadialTree.js"></script>
<script src="js/createMiniTree.js"></script>
<script src="js/phylo/createLinearContextTree.js"></script>
<script src="js/phylo/createRadialContextTree.js"></script>
<script src="js/phylo/panAndZoom.js"></script>
<script src="js/phylo/createIntroSlides.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="smartmenus/libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="smartmenus/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript" src="js/smartMenuInitial.js"></script>
</div>
</body>
</html>