forked from monarch-initiative/phenogrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (156 loc) · 7.57 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!--
File: /widget/phenogrid/index.html
Authors: Harry Hochheiser, Chuck Boromeo, Becky Boes (University of Pittsburgh)
Version: Model Viewer v5.9.2014
Purpose: This file provides step-by-step instructions on how to create an instance of the Phenogrid Viewer (phenogrid.js) widget on any webpage.
General Steps include:
1. Add appropriate Javascript libraries and files
2. Add list of phenotypes and the function call for widget creation
3. Add a div for the widget to the html file body
4. Display page in webbrowser
-->
<html>
<head>
<title>Monarch Phenotype Grid Widget</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/jshashtable.js"></script>
<script src="js/stickytooltip.js"></script>
<script src="js/phenogrid_config.js"></script>
<script src="js/phenogrid.js"></script>
<script src="js/render.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="css/instructions.css"/>
<link rel="stylesheet" type="text/css" href="css/phenogrid.css"/>
<link rel="stylesheet" type="text/css" href="css/stickytooltip.css"/>
<script>
var phenotypes = [
{ id:"HP:0000726", observed:"positive"},
{ id:"HP:0000746", observed:"positive"},
{ id:"HP:0001300", observed:"positive"},
{ id:"HP:0002367", observed:"positive"},
{ id:"HP:0000012", observed:"positive"},
{ id:"HP:0000716", observed:"positive"},
{ id:"HP:0000726", observed:"positive"},
{ id:"HP:0000739", observed:"positive"},
{ id:"HP:0001332", observed:"positive"},
{ id:"HP:0001347", observed:"positive"},
{ id:"HP:0002063", observed:"positive"},
{ id:"HP:0002067", observed:"positive"},
{ id:"HP:0002172", observed:"positive"},
{ id:"HP:0002322", observed:"positive"},
{ id:"HP:0007159", observed:"positive"}];
// jQuery gets to bootstrap everything.
jQuery(document).ready(
function(){
$("#phen_vis").phenogrid({serverURL :
"http://tartini.crbs.ucsd.edu", phenotypeData: phenotypes,targetSpeciesName: "Mus musculus" });
});
</script>
</head>
<body id="phenogrid">
<span class="headtitle"><img id="monarch-logo" width="90px" class="downloadline" src="image/logo.png"/>
<span class="header">Monarch Phenotype Grid Widget</span>
<div id="viscontent">
<div id="phen_vis"></div></div>
<div class="text">
<h2 class="title">Steps for Adding the Monarch Phenotype Grid to Your Webpage</h2>
<span>The phenogrid code
can be found
at <A HREF="https://github.com/monarch-initiative/phenogrid">
https://github.com/monarch-initiative/phenogrid.</a>
</span>
</div><br/>
<div class="section">
A quick guide to installing and configuring the widget on your site:
<OL>
<LI>Get the code: Clone
the <A HREF="https://github.com/monarch-initiative/phenogrid">repository</a>
using git, or download the zip file.</LI>
<LI>Add the required Files to your web server: Move the phenogrid
directory and its subdirectories to the desired location within
your web server content directories.
</LI>
<LI>Load the following Javascript files (in this order) into your
page:</LI>
<OL>
<LI> ./js/jshashtable.js</LI>
<LI> ./js/stickytooltip.js</LI>
<LI> ./js/phenogrid_config.js</LI>
<LI> ./js/phenogrid.js</LI>
<Li> ./js/render.js</LI>
</OL>
<LI>Add your own javascript to the page, containing the following content:
<div class="text">
<ul>
<li>Create a list of phenotypes as an array of Javascript objects with the following attributes:
<ul><li><pre>[{ id:"HP:0000006", observed:"positive"}, id:"HP:0000726", observed:"positive"},...];</pre>
</li>
<li>Note that the phenotypes may also be passed in as a JSON list and that the "observed" tag may be omitted. <pre>Example: { "HP:0000006" , "HP0000726",...}</pre>
<li>Note that if there are no phenotype matches in the models, you may see a "No Models found" message.</li>
</ul>
</li>
<li>Add a jQuery .ready function that will add the widget to an empty div tag (see Step 4) as follows (The following example assumes you are adding the widget to a div with an id="phen_vis"):
<ul><li><pre>jQuery(document).ready(function(){$("#phen_vis").phenogrid(
{serverURL: "http://tartini.crbs.ucsd.edu", phenotypeData: phenotypes, target_species: "10090" });
});</pre>
</li>
<li>
<div class="subsectiontitle">Widget Parameters</div>
<div class="text">To add the widget, you must set some parameters. The following are the most common parameters:
<ul>
<li><b><em>phenotypeData</em></b> [required] - It is a Javascript array of objects listing the phenotypes to be rendered in the widget.
</li>
<li><b><em>serverURL</em></b> [required] - This URL should be pointed to the OWLSim URL server associated with your installation containing the Monarch web services. You have three options:<br/>
<ol><li>Use http://tartini.crbs.ucsd.edu to connect to the development/test web services. This server is less stable than the production server.</li>
<li>Use http://monarch.monarchinitiative.org to connect to the stable, production version of the web services (better uptime)</li>
<li>If you are running the complete monarch-app, you can point it to http://localhost:8080, or whichever server/port you are using in your local installation.</li></ol>
</li>
<li><b><em>targetSpecies</em></b> [optional]- this parameter defaults to 10090 (mus musculus). Change this parameter if you want to compare the phenotypes in the phenotypeData parameter against a different species. Available Species:
<ul><li>Name: Homo sapiens Taxon: 9606</li>
<li>Name: Dani rerio Taxon: 7955</li>
<li>Name: Drosophila melanogaster Taxon: 7227</li>
</ul>
</li>
<li><b><em>simServerURL</em></b> [optional] - the URL of the server running the similarity comparison. Usually default to being the same as <em>serverURL</em> - use the default (do not specify a value) unless you have an expliciit reason for doing otherwise.</LI>
</ul>
</li>
</ul>
</li>
<li>Add the phenotype array and the jQuery function between <script> tags in the html <head> of the index file that you created above.</li>
<ul>Example:<br />
<pre><script>
var phenotypes = [
{ id:"HP:0000006", observed:"positive"},
{ id:"HP:0000726", observed:"positive"},
{ id:"HP:0000746", observed:"positive"}];
jQuery(document).ready(function(){
$("#phen_vis").phenogrid({serverURL : "http://tartini.crbs.ucsd.edu",
phenotypeData: phenotypes, targetSpecies: "10090" });
});
</script></pre>
</ul></li>
</ul></li>
</LI>
<LI>Add the widget <div>:
<ul>
<li>Add an empty <div> tag in the body of the html file. The id of this <div> must match the id that you used in the Javascript fragment given above.</li>
<li>Example:<br />
<pre><body>
<div id="phen_vis"></div>
<body></pre>
</li>
</ul>
</LI>
<LI>Load your HTML file into a browser.</LI>
</OL>
</div>
<div class="sectiontitle">
Additional configuration instructions can be found in the README.md
file from the phenogrid repository.</div>
<div class="sectiontitle">Please contact us
at <a href="mailto:[email protected]">[email protected]</a>
if you have any problems or questions.</div>
</body>
</html>