-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
390 lines (312 loc) · 23.7 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="icon" sizes="16x16 32x32 64x64" href="img/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
<link rel="icon" type="image/png" sizes="64x64" href="favicon-64.png">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="shortcut icon" sizes="64x64" href="img/favicon-64.png">
<link rel="apple-touch-icon" href="img/icon-64x64.png">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/foundation-icons.css">
<!-- <link rel="stylesheet" href="css/foundation-icons.svg">
<link rel="stylesheet" href="css/foundation-icons.eot">
<link rel="stylesheet" href="css/foundation-icons.ttf">-->
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="js/chosen/chosen.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h3> <img src="img/favicon-32.png" width="32" align="left" style="margin:5px"/> OntoTrek 3D Viewer</h3>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-8 cell">
<div class="callout" style="padding:0">
<div id="3d-graph">
<img src="img/introduction.png" style="margin:15px;border:2px solid silver" />
</div>
<div style="padding:20px;">
<p>OntoTrek is an <a href="http://OBOFoundry.org" target="_blank">OBOFoundry.org</a> ontology terminology viewer that takes advantage of <a href="https://github.com/vasturiano/3d-force-graph/" target="_blank">WebGL 3d graph rendering software</a>. We have a few ontologies to choose from during this beta phase, some easy to load like AGRO and ECOCORE, and some big ones like CLO which can only be rendered by applying filters like "wireframe", no "labels", and limiting node depth. Some ontologies demonstrate nice organization under the Basic Formal Ontology (BFO, whose 34 nodes are big, sunny, and always in the same position), and others show an independent streak which may illustrate the difference between reference and application ontologies. </p>
<p> OntoTrek displays all class-subclass relations starting from the first top-level entity it finds (usually owl:Thing or BFO:0000001 entity). OntoTrek doesn't draw other object relations. </p>
<p><b>To begin, select an ontology, or enter an ontology URL in upper right "Search" tab and it will be displayed above.</b> Alternately, enter a .owl file URL directly (it must be in rdf/xml format, and can't be a URL that redirects, so for github-hosted ontologies use the "raw.githubusercontent.com/..." link, e.g. https://raw.githubusercontent.com/obi-ontology/obi/master/obi.owl).</p>
<p>Note a current subtle bug is that settings applied to a graph yield successively slower redraws. To play with settings, reload the app in the browser, select settings, and then select an ontology.</p>
<p>This software is being developed at the Centre for Infectious Disease Genomics and One Health at Simon Fraser University. The project's GitHub is <a href="https://github.com/GenEpiO/ontotrek" target="_blank">here</a>. Contact <a href="mailto:[email protected]">Damion Dooley</a> for more information.</p>
</div>
</div>
</div>
<div class="large-4 cell">
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">
<a href="#panel_search" aria-selected="true">Search</a>
</li>
<li class="tabs-title">
<a data-tabs-target="panel_settings" href="#panel_settings">Settings</a>
</li>
<li class="tabs-title">
<a data-tabs-target="panel_legend" href="#panel_legend">Legend</a>
</li>
<li class="tabs-title">
<a data-tabs-target="panel_trace" href="#panel_trace">Trace</a>
</li>
<li class="tabs-title">
<a data-tabs-target="panel_help" href="#panel_help">Help</a>
</li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs" style="min-height:550px;overflow-y:scroll">
<!-- **************************** SEARCH ************************ -->
<div class="tabs-panel is-active" id="panel_search">
<div class="callout primary">
<div class="grid-x grid-padding-x" style="margin-bottom:10px;padding:5px;background-color:silver">
A) Select a cached ontology to view
<i class="fi-info blue" data-tooltip tabindex="1" title="The listed ontologies are mainly from OBO Foundry (http://obofoundry.org). Many illustrate the interleaved reuse of OBOFoundry ontology terms."></i>
<select id="ontology" style="margin-bottom:10px">
<option value="">Select an ontology ...</option>
<option value="data/bfo.owl" data-cache="data/trees/bfo.json">BFO: Basic Formal Ontology</option><!-- https://raw.githubusercontent.com/BFO-ontology/BFO/master/releases/2.0/bfo.owl -->
<option value="data/dolche-inferred.owl" data-cache="data/trees/dolce.json">DOLCE-Lite: Descriptive Ontology for Linguistic and Cognitive Engineering</option><!-- http://genepio.org/ontotrek/data/dolche-inferred.owl -->
<option value="data/gfo.owl" data-cache="data/trees/gfo.json">GFO: General Formal Ontology</option><!-- http://www.onto-med.de/ontologies/gfo.owl -->
<option disabled="disabled">__________________________________________</option>
<option value="data/agro.owl" data-cache="data/trees/agro.json">AGRO: Agronomy Ontology</option>
<option value="//raw.githubusercontent.com/AgriculturalSemantics/agro/master/agro.owl">AGRO via URL</option>
<option value="data/aro.owl" data-cache="data/trees/aro.json">ARO: Antibiotic Resistance Ontology (4K nodes)</option>
<option value="//raw.githubusercontent.com/CLO-ontology/CLO/master/src/ontology/clo_merged.owl">CLO: Cell Line Ontology (needs filtering! 40K)</option>
<option value="data/cmo.owl" data-cache="data/trees/cmo.json">CMO: Clinical Measurements Ontology</option>
<option value="https://raw.githubusercontent.com/DiseaseOntology/HumanDiseaseOntology/master/src/ontology/doid.owl" data-cache="data/trees/doid.json">DOID: Human Disease Ontology</option>
<option value="https://raw.githubusercontent.com/evidenceontology/evidenceontology/master/eco.owl" data-cache="data/trees/eco.json">ECO: Evidence & Conclusion Ontology</option>
<option value="//raw.githubusercontent.com/EcologicalSemantics/ecocore/master/ecocore.owl" data-cache="data/trees/ecocore.json">ECOCORE: Ontology of Core Ecological Entities</option>
<option value="//raw.githubusercontent.com/FoodOntology/foodon/master/src/ontology/foodon-merged.owl">FOODON: Food Ontology (needs filtering! 28K)</option>
<option value="data/foodon-products.json" data-cache="data/trees/foodon-products.json">FOODON product branch (11K)</option>
<option value="data/genepio-merged.owl" data-cache="data/trees/genepio.json">GENEPIO: Genomic Epidemiology Ontology</option>
<option value="//raw.githubusercontent.com/EBISPOT/ancestro/master/hancestro.owl" data-cache="data/trees/hancestro.json">HANCESTRO: Human Ancestry Ontology</option>
<option value="//raw.githubusercontent.com/obophenotype/human-phenotype-ontology/master/hp.owl">HP: Human Phenotype Ontology (needs filtering! 40k)</option>
<option value="https://raw.githubusercontent.com/obophenotype/mouse-anatomy-ontology/master/emapa.owl" data-cache="data/trees/emapa.json">EMAPA: Ontologies for mouse anatomy and development</option>
<option value="//raw.githubusercontent.com/infectious-disease-ontology/infectious-disease-ontology/2017-11-03/ido.owl" data-cache="data/trees/ido.json">IDO: Infectious Disease Ontology</option>
<option value="//raw.githubusercontent.com/obi-ontology/obi/v2019-08-06/obi.owl" data-cache="data/trees/obi.json">OBI: Ontology for Biomedical Investigations</option>
<option value="//raw.githubusercontent.com/biobanking/ontology/20190620/obib.owl" data-cache="data/trees/obib.json">OBIB: Ontology for Biobanking</option>
<option value="//raw.githubusercontent.com/pato-ontology/pato/master/pato.owl">PATO: Phenotype and Trait Ontology</option>
<option value="//raw.githubusercontent.com/PopulationAndCommunityOntology/pco/master/pco.owl" data-cache="data/trees/pco.json">PCO: Population and Community Ontology</option>
<option value="//raw.githubusercontent.com/Planteome/plant-ontology/master/po.owl" data-cache="data/trees/po.json">PO: Plant Ontology (anatomical branch)</option>
<option value="data/zfa.owl" data-cache="data/trees/zfa.json">ZFA: Zebrafish anatomy and development ontology</option>
</select>
</div>
<div class="grid-x grid-padding-x" style="margin-bottom:10px;padding:5px;background-color:silver">
B) Or enter a URL to an online ontology
<i class="fi-info blue" data-tooltip tabindex="1" title="Provide your own ontology URL. The ontology should be formatted as an OWL rdf/xml file. Currently all terms which are owl:subClassOf owl:Thing are retrieved. If subclasses are inferred in your ontology, you will need to create an explicit version of it by using a reasoner and saving the output to an OWL file."></i>
<div class="large-10 medium-10">
<input type="text" id="ontology_url" name="ontology_url" placeholder="Ontology URL" value="">
</div>
<div class="large-2 medium-2">
<button id="ontology_url_button" class="button" style="padding:.7rem .4rem;">Load</button>
</div>
<!--
<label for="upload_cache">
If this ontology has a cache file, upload it here first:<br/>
</label>
<input type="file" id="upload_cache" accept=".json" placeholder="Cache file">
<button id="upload_json_button" class="button">Upload</button>
-->
</div>
<div class="large-2 medium-2">
</div>
<div id="status"><span class="placeholder"> </span></div>
<div class="large-2 medium-2">
<button id="rerender_button" class="button" style="visibility: hidden;">Re-render ontology</button>
</div>
<div class="large-2 medium-2">
<button id="download_button" class="button" style="visibility: hidden;">Download cache snapshot</button>
</div>
</div>
<div class="callout primary">
<i class="fi-info blue" data-tooltip tabindex="2" title="You can search ontology terms by synonym too!"></i>
Search for terms</span> to navigate to
<select id="label_search" class="regular text"></select>
</div>
<div class="callout primary">
<i class="fi-info blue" data-tooltip tabindex="2" title="Click on a listed parent or on a child listed in the pulldown menu to focus on it."></i>
Navigate by term context
<div id="parents" class="text"><span class="placeholder">parent(s)</span></div>
<!-- div id="term_id" class="text"><span class="placeholder">id</span></div -->
<div id="label" class="text">
<span class="placeholder">label</span>
</div>
<div id="children">
<select id="select_child">
<option disabled="disabled">children will be displayed here</option>
</select>
</div>
</div>
<div class="callout secondary">
<div id="definition" class="text">
<span class="placeholder">definition</span>
</div>
<div id="synonyms" class="text">
<span class="placeholder">synonyms</span>
</div>
<div id="ui_label" class="text">
<span class="placeholder">UI label</span>
</div>
<div id="ui_definition" class="text">
<span class="placeholder">UI definition</span>
</div>
</div>
</div>
<!-- **************************** SETTINGS ************************ -->
<div class="tabs-panel" id="panel_settings">
<div class="callout primary">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell">
<i class="fi-info blue" data-tooltip tabindex="2" title="Color coding is done according to lookup tables for ontology prefixes and Basic Formal Ontology terms as defined in js/lookup_tables.js; Select ontology to have edges colored by ontology of child node; select Upper Level Ontology (ULO) branch to have edges colored by occurent, continuant, process, etc."></i>
<label>Color edges by</label>
<input type="radio" name="ulo_edge_coloring" value="false" id="edge_coloring_onto" checked="checked"><label for="edge_coloring_onto">Term ontology</label>
<input type="radio" name="ulo_edge_coloring" value="true" id="edge_coloring_bfo"><label for="edge_coloring_bfo">ULO branch</label>
</div>
</div>
</div>
<div class="switch float-left">
<input class="switch-input" id="render_labels" type="checkbox" name="render_labels" checked="checked">
<label class="switch-paddle" for="render_labels">
<span class="show-for-sr">Show labels</span>
</label>
</div>
<label for="render_labels"> Show labels. This slows rendering a bit.</label>
<br clear="both"/>
<!-- AFter adding new OWL format, this function was broken.
<div class="switch float-left">
<input class="switch-input" id="render_other_parents" type="checkbox" name="render_other_parents">
<label class="switch-paddle" for="render_other_parents">
<span class="show-for-sr">Show other term parents</span>
</label>
</div>
<i class="fi-info blue" data-tooltip title="Other parent links are shown in orange. These are not inferred. A term's primary parent is currently somewhat arbitrary."></i>
<label for="render_other_parents">Experimental: Show a term's other parent links</label>
<br clear="both"/>
-->
<div class="switch float-left">
<input class="switch-input" id="render_deprecated" type="checkbox" name="render_deprecated">
<label class="switch-paddle" for="render_deprecated">
<span class="show-for-sr">show deprecated terms</span>
</label>
</div>
<label for="render_deprecated">Show deprecated terms</label>
<br clear="both"/>
<div class="switch float-left">
<input class="switch-input" id="render_quicker" type="checkbox" name="render_quicker">
<label class="switch-paddle" for="render_quicker">
<span class="show-for-sr">render wireframe</span>
</label>
</div>
<label for="render_quicker"> Show a wireframe view (skinny edges) for all but ULO</label>
<br clear="both"/>
<div class="switch float-left">
<input class="switch-input" id="render_slices" type="checkbox" name="render_slices">
<label class="switch-paddle" for="render_slices">
<span class="show-for-sr">render slices</span>
</label>
</div>
<label for="render_slices"> Underlying ontology branches rendered as vertical slice(s)</label>
<br clear="both"/>
<select id="render_dimensions" class="float-left">
<option value = "3" selected="selected">3D</option>
<option value = "2">2D</option>
</select>
<label>3D view is shown by default; a 2D view is possible too</label>
<br clear="both"/>
<!--
<input type="checkbox" id="render_galaxy">
<label for="render_galaxy">galactic</label><br/>
-->
<select id="thickness_control" class="float-left">
<option value=".5">.5</option>
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="5">5</option>
</select>
<label for="thickness_control">Render deeper edges with this thickness</label>
<br clear="both">
<select id="depth_control" class="float-left">
<option value="50">all</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="7">8</option>
<option value="7">9</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<label for="depth_control" class="middle">Render from top down to this node depth</label>
<select id="render_layer_depth" class="float-left" style="width:130px">
<option value="200">200 - tall</option>
<option value="100" selected="selected">100 (default)</option>
<option value="50">50 - shallow</option>
</select>
<label for="render_layer_depth" class="middle">depth of each layer</label>
<br clear="both"/>
</div>
<!-- **************************** LEGEND ************************ -->
<div class="tabs-panel" id="panel_legend">
<div class="grid-x grid-padding-x">
<div id="ontology_legend">Select an ontology to view it; a legend of component ontologies and upper level ontology branches, and the counts of nodes belonging to them, will be displayed here</div>
<div id="ulo_legend"></div>
</div>
</div>
<!-- **************************** TRACE ************************ -->
<div class="tabs-panel" id="panel_trace">
<p>Experimental: To visualize a disjoint axiom-related unsatisfiability error in a given ontology that you have encountered, copy the reasoning explanation as a set of Markdown formatted statements of form [link label](URL) [relation type] [link label](URL) here, and press "Trace" to see them drawn and highlighted in current ontology. To highlight a common problem, a <font color="red">red link</font> indicates a "Disjoint" axiom between two classes, and an <font color="orange">orange link</font> indicates a subClassOf relation between classes. At least one edge of a highlighted loop is incorrect.
<p>Below is a fictional example pertaining to the AGRO ontology (it is also viewable in BFO ontology):</p>
<textarea rows="4" id="trace_content" placeholder="enter robot markup here">
## [ecozone](http://purl.obolibrary.org/obo/ENVO_01000280) EquivalentTo [Nothing](http://www.w3.org/2002/07/owl#Nothing) ##
- [ecozone](http://purl.obolibrary.org/obo/ENVO_01000280) SubClassOf [site](http://purl.obolibrary.org/obo/BFO_0000029)
- [site](http://purl.obolibrary.org/obo/BFO_0000029) SubClassOf [immaterial entity](http://purl.obolibrary.org/obo/BFO_0000141)
- [ecozone](http://purl.obolibrary.org/obo/ENVO_01000280) SubClassOf [environmental zone](http://purl.obolibrary.org/obo/ENVO_01000408)
- [environmental zone](http://purl.obolibrary.org/obo/ENVO_01000408) SubClassOf [environmental feature](http://purl.obolibrary.org/obo/ENVO_00002297)
- [environmental feature](http://purl.obolibrary.org/obo/ENVO_00002297) SubClassOf [material entity](http://purl.obolibrary.org/obo/BFO_0000040)
- [material entity](http://purl.obolibrary.org/obo/BFO_0000040) DisjointWith [immaterial entity](http://purl.obolibrary.org/obo/BFO_0000141)
</textarea>
<button type="button" class="success button" id="trace_button">Trace</button>
<p>To generate a Markup file that explains a reasoning error in an ontology, install the command line <a href="https://robot.obolibrary.org/" target="_blank">robot tool</a> and run the following robot command. If more than one explanation arises, then choose one to visualize.
<div class="callout secondary">
> robot explain --input [YOUR ONTOLOGY FILE] --reasoner HermiT --axiom "'[PUT PROBLEM TERM'S rdfs:label HERE]' EquivalentTo owl:Nothing" --explanation output.md
</div>
</div>
<!-- **************************** HELP ************************ -->
<div class="tabs-panel" id="panel_help">
<p>Note that it can take a while to render an ontology, and until rendering is complete, changing settings or attempting to navigate to terms may not work.</p>
<p><b>Viewport navigation:</b></p>
<p>While your cursor is positioned over the display viewport, both mouse and trackpad take on the following functions:</p>
<p>Click on a node to focus on it; view will rotate and move towards that item. Clicking on a link will take you to its child (lower depth) node.</p>
<p><b>Trackpad:</b><br/>
Zoom: 2 finger motion up and down (no motion sideways).<br/>
Pan: 2 finger + click and hold mouse. Rotate: 3 finger motion.
</p>
<p><b>Mouse:</b><br/>
Zoom: move + click/hold right button or D key.<br/>
Rotate: move + click/hold left button or A key.<br/>
Rotate: move + click/hold middle button or S key.
</p>
</div>
</div>
</div>
</div>
<!-- textarea id="dump" rows="10" cols="50"></textarea>-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<!-- <script src="js/jquery-3.3.1.slim.min.js"></script> -->
<!-- customized version of chosen.js that looks for synonyms too -->
<script src="js/chosen/chosen.jquery.min.js"></script>
<script src="js/bundle.js"></script>
<!-- Fetched from: script src="//unpkg.com/3d-force-graph"></script -->
<script src="js/3d-force-graph.min.js"></script>
<script src="js/lookup_tables.js"></script>
<script src="js/development.js"></script>
<script src="js/owl.js"></script>
<script src="js/common.js"></script>
<script src="js/rdflib.min.js"></script>
<script src="https://unpkg.com/three/examples/js/exporters/GLTFExporter.js"></script>
</body>
</html>