-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (94 loc) · 5.92 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
<!-- START SIGMA IMPORTS -->
<head>
<meta charset="utf-8">
<title> Plasmodium Interactome </title>
<link rel="shortcut icon" href="img/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="src/style.css">
</head>
<!-- Here are all the imports needed for Sigma.js -->
<script src="./sigma/src/sigma.core.js"></script>
<script src="./sigma/src/conrad.js"></script>
<script src="./sigma/src/utils/sigma.utils.js"></script>
<script src="./sigma/src/utils/sigma.polyfills.js"></script>
<script src="./sigma/src/sigma.settings.js"></script>
<script src="./sigma/src/classes/sigma.classes.dispatcher.js"></script>
<script src="./sigma/src/classes/sigma.classes.configurable.js"></script>
<script src="./sigma/src/classes/sigma.classes.graph.js"></script>
<script src="./sigma/src/classes/sigma.classes.camera.js"></script>
<script src="./sigma/src/classes/sigma.classes.quad.js"></script>
<script src="./sigma/src/classes/sigma.classes.edgequad.js"></script>
<script src="./sigma/src/captors/sigma.captors.mouse.js"></script>
<script src="./sigma/src/captors/sigma.captors.touch.js"></script>
<script src="./sigma/src/renderers/sigma.renderers.canvas.js"></script>
<script src="./sigma/src/renderers/sigma.renderers.webgl.js"></script>
<script src="./sigma/src/renderers/sigma.renderers.svg.js"></script>
<script src="./sigma/src/renderers/sigma.renderers.def.js"></script>
<script src="./sigma/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="./sigma/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="./sigma/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="./sigma/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="./sigma/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="./sigma/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.utils.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="./sigma/src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="./sigma/src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="./sigma/src/middlewares/sigma.middlewares.copy.js"></script>
<script src="./sigma/src/misc/sigma.misc.animation.js"></script>
<script src="./sigma/src/misc/sigma.misc.bindEvents.js"></script>
<script src="./sigma/src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="./sigma/src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<!-- These imports are additional imports used to read the database -->
<script src="./sigma/plugins/sigma.parsers.json/sigma.parsers.json.js"></script>
<script src="./sigma/plugins/sigma.plugins.filter/sigma.plugins.filter.js"></script>
<!-- [...] -->
<!-- This container will house the network -->
<div id="container">
<!-- Style the UI--this has been moved to a separate stylesheet -->
<!-- UI content -->
<div id="sigma-container-outer"><div id="sigma-container"></div></div>
<div id="control-pane">
<h2 class="underline">Plasmodium Interactome</h2>
<div>
<p>Data from <a href="https://doi.org/10.1016/j.celrep.2019.07.019" target="_blank">10.1016/j.celrep.2019.07.019</a> and <a href="https://doi.org/10.1038/nature04104" target="_blank">10.1038/nature04104</a>.</p>
<p>
Made by <a href="http://pablo-cardenas.com/" target="_blank">Pablo Cárdenas</a> at the <a href="https://web.mit.edu/nileslab/" target="_blank">Niles Lab</a>,
<a href="http://be.mit.edu/" target="_blank">MIT BE</a> using <a href="http://sigmajs.org/" target="_blank">sigma.js</a>.</p>
<p><a href="https://github.com/pablocarderam/Plasmodium_Interactome" target="_blank">GitHub src</a>.</p>
<span class="line"></span>
<p><b>Scroll, drag, and click.</b></p>
<p>Nodes (genes) colored according to putative protein complex cluster (colors repeat themselves, <b>black</b> is no cluster predicted).</p>
<p><font color="#56B4E9"><b>Blue lines</b></font> show interactions with selected gene, <font color="black"><b>black</b></font> are interactions among the gene's neighbors.</p>
<span class="line"></span>
<h3>Dataset:
<select name="dataset" id="dataset">
<option value="hil" selected>Hillier et al. (2019)</option>
<option value="y2h">LaCount et al. (2005)</option>
<option value="full">All data</option>
</select></h3>
<h3 id="gene-name">search or click a gene</h3>
<input type="text" id="gene_id" name="gene_id" value="PF3D7_0917900">
<button id="search_btn">Search ID</button>
<h3><span id="neighbors_btn" class="btn"><u>neighbors</u></span> | <span id="terms_btn" class="btn">associated terms</span></h3>
<div class="scroll-list" id="scroll-list"></div>
</div>
</div>
</div>
<script src="./src/interactome.js"></script>
<!-- [...] -->