forked from pvtodorov/indra_pathway_map
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
582 lines (558 loc) · 43.4 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
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
<!doctype html>
<html>
<head>
<title>INDRA Interactive Map</title>
<!-- CSS -->
<link href="static/style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- bower:css -->
<link rel="stylesheet" href="static/bower_components/qtip2/jquery.qtip.min.css" />
<link rel="stylesheet" href="static/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="static/bower_components/bootstrap-select/dist/css/bootstrap-select.css" />
<link rel="stylesheet" href="static/bower_components/cytoscape-panzoom/cytoscape.js-panzoom.css" />
<link rel="stylesheet" href="static/bower_components/components-font-awesome/css/fontawesome-all.css" />
<link rel="stylesheet" href="static/bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css" />
<link rel="stylesheet" href="static/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" />
<!-- endbower -->
<!-- bower:js -->
<script src="static/bower_components/jquery/dist/jquery.js"></script>
<script src="static/bower_components/cytoscape/dist/cytoscape.js"></script>
<script src="static/bower_components/lodash/lodash.js"></script>
<script src="static/bower_components/graphlib/dist/graphlib.core.js"></script>
<script src="static/bower_components/dagre/dist/dagre.core.js"></script>
<script src="static/bower_components/cytoscape-dagre/cytoscape-dagre.js"></script>
<script src="static/bower_components/webcola/WebCola/cola.min.js"></script>
<script src="static/bower_components/cytoscape-cola/cytoscape-cola.js"></script>
<script src="static/bower_components/ev-emitter/ev-emitter.js"></script>
<script src="static/bower_components/imagesloaded/imagesloaded.js"></script>
<script src="static/bower_components/qtip2/jquery.qtip.min.js"></script>
<script src="static/bower_components/cytoscape-qtip/cytoscape-qtip.js"></script>
<script src="static/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="static/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
<script src="static/bower_components/cytoscape-panzoom/cytoscape-panzoom.js"></script>
<script src="static/bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.js"></script>
<script src="static/bower_components/renderjson/index.js"></script>
<script src="static/bower_components/FileSaver.min/index.js"></script>
<script src="static/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
<script src="static/bower_components/notifyjs/dist/notify.js"></script>
<!-- endbower -->
<!-- d3 -->
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<!-- d3 -->
<!-- js -->
<script src="static/js/drawCytoscape.js"></script>
<script src="static/js/contextualizeNodesCCLE.js"></script>
<script src="static/js/get_cy_gene_names.js"></script>
<script src="static/js/phosphoContextSN.js"></script>
<script src="static/js/qtipNodes.js"></script>
<script src="static/js/highlightPath.js"></script>
<script src="static/js/requests_APIs.js"></script>
<script src="static/js/array_multifilter.js"></script>
<script src="static/js/modalEdges.js"></script>
<script src="static/js/base_script.js"></script>
<!-- js -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- container-fluid : start -->
<div class="container-fluid">
<div class="row" style="max-height:40px; margin-bottom: 15px;">
<div class=row>
<div class="col-xs-4 col-sm-4 col-md-6 col-lg-5 padding-0">
<img src="indra_logo_v2.png" alt="INDRA logo" style="height:38px;"></img> <span class="hidden-sm hidden-xs" style="font:30px bold;text-align: center; vertical-align: middle;font-family: Roboto, sans-serif; ">INDRA-IPM</span>
</div>
<!-- colorbar start -->
<div class="col-xs-6 col-sm-7 col-md-3 col-lg-4 float-right">
<div class='row small'>
<div class='col-xs-4'>
<div class="row text-right">wildtype</div>
<div class="row text-right">mutant</div>
</div>
<div class='col-xs-8'>
<div class="row">
<svg height='13px' width='100px'>
<defs>
<symbol id="s-rect">
<rect width="10" height="10" x="2" y="2"/>
</symbol>
</defs>
<text x="90" y="0" fill="black">wt</text>
<use xlink:href="#s-rect" x="0" y="0" fill='#f7fcf5' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="10" y="0" fill='#e5f5e0' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="20" y="0" fill='#c7e9c0' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="30" y="0" fill='#a1d99b' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="40" y="0" fill='#74c476' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="50" y="0" fill='#41ab5d' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="60" y="0" fill='#238b45' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="70" y="0" fill='#006d2c' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="80" y="0" fill='#00441b' stroke="black" stroke-width="1"/>
</svg>
</div>
<div class='row'>
<svg height='13px' width='100px'>
<defs>
<symbol id="s-rect">
<rect width="10" height="10" x="2" y="2"/>
</symbol>
</defs>
<text x="90" y="0" fill="black">wt</text>
<!-- ['#fff5eb','#fee6ce','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#a63603','#7f2704'] -->
<use xlink:href="#s-rect" x="0" y="0" fill='#fff5eb' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="10" y="0" fill='#fee6ce' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="20" y="0" fill='#fdd0a2' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="30" y="0" fill='#fdae6b' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="40" y="0" fill='#fd8d3c' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="50" y="0" fill='#f16913' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="60" y="0" fill='#d94801' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="70" y="0" fill='#a63603' stroke="black" stroke-width="1"/>
<use xlink:href="#s-rect" x="80" y="0" fill='#7f2704' stroke="black" stroke-width="1"/>
</svg>
</div>
</div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'>expression</div>
</div>
</div>
<!-- colorbar end -->
<div class='col-sm-1 col-xs-1 col-md-2 col-lg-2 pull-right'>
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg pull-right" data-toggle="modal" data-target="#menu">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
<b class="hidden-xs">MODEL OPTIONS</b>
</button>
</div>
</div></div></div>
</div>
<!-- Modal -->
<div class="modal" id="menu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
</div>
<div class="modal-body">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#byom">Build</a></li>
<li ><a data-toggle="tab" href="#context">Context</a></li>
<!-- <li ><a data-toggle="tab" href="#phospho">Phospho</a></li> -->
<li ><a data-toggle="tab" href="#ras227">Prebuilt models</a></li>
<li ><a data-toggle="tab" href="#about">About</a></li>
</ul>
<div class="tab-content">
<div id="ras227" class="tab-pane fade in">
<div>
<br>
<div>
<select id='model_picker' class="selectpicker">
<option value="McCormick">NCI RAS Pathway 1.0</option>
</select>
</div>
</div>
<br>
<button id='loadButtonStatic' type="submit" class="btn btn-primary">Load</button>
</div>
<div id="byom" class="tab-pane fade in active">
<br>
<div>
<form>
<div class="form-group">
<label for="textArea">Describe your mechanism.</label>
<textarea class="form-control" id="textArea" rows="10" autocomplete="off">
Growth-factor proteins activate EGFR, ERBB2, FGFR, PDGFR, MET, ROS1, and ALK.
EGFR, ERBB2, PDGFR, MET, ROS1, ALK and FGFR activate GRB2 and SHC.
GRB2 and SHC activate RASGRF and SOS.
GRB2 binds SHC.
SOS and RASGRF activate HRAS, NRAS and KRAS.
RASGRP activates HRAS, KRAS and NRAS.
SPRY deactivates HRAS, KRAS and NRAS.
RASA/ARHGAP35 deactivates HRAS, NRAS and KRAS.
RASAL deactivates HRAS, NRAS and KRAS.
NF1/SPRED deactivates HRAS, NRAS and KRAS.
RASA/ARHGAP35 deactivates RHOA, RHOB and RHOC.
RASAL deactivates RHOA, RHOB and RHOC.
NF1/SPRED deactivates RHOA, RHOB and RHOC.
HRAS, NRAS and KRAS activate RALGDS.
RALGDS activates RALA and RALB.
HRAS, NRAS and KRAS activate ARAF, BRAF and RAF1.
ARAF, BRAF and RAF1 activate MAP2K1 and MAP2K2.
MAP2K1 and MAP2K2 activate MAPK1 and MAPK3.
MAPK1 and MAPK3 activate ETS, JUN and FOS.
KSR binds ARAF, BRAF and RAF1.
KSR binds MAP2K1 and MAP2K2.
KSR binds MAPK1 and MAPK3.
ETS, FOS and JUN activate MDM2, CCND1 and DUSP.
MDM2 deactivates TP53.
CCND1 activates CDK4 and CDK6, which deactivate RB1.
DUSP deactivates MAPK1 and MAPK3.
SOS and RASGRF activate RHOA, RHOB and RHOC.
RHOA, RHOB and RHOC activate ROCK1 and ROCK2.
HRAS, NRAS and KRAS activate PIK3C and PIK3R.
PIK3C and PIK3R activate PIP3.
PTEN deactivates PIP3.
PIP3 activates PDPK1, AKT and TIAM.
PDPK1 activates AKT.
AKT deactivates TSC1/TSC2.
TSC1/TSC2 deactivates RHEB.
RHEB activates mTORC2.
STK11 activates PRKAA, PRKAB and PRKAG.
PRKAA, PRKAB and PRKAG deactivate mTORC2.
mTORC2 deactivates EIF4EBP1.
mTORC2 activates RPS6KB1 and RPS6KB2.
TIAM activates RAC, which activates PAK.</textarea>
</div>
</form>
<div class= 'btn-div'>
<div><b>NLP system to read with</b></div>
<button id='parseReach' type="submit" class="btn btn-default parserSelect active">REACH</button>
<button id='parseTrips' type="submit" class="btn btn-default parserSelect">TRIPS</button>
</div>
<hr>
<div class= 'btn-div'>
<button id='loadButtonDynamic' type="submit" class="btn btn-primary">Build</button>
</div>
</div>
</div>
<div id="context" class="tab-pane fade in">
<div >
<div class="form-group">
<br>
<div>
<label for="cellSelectDynamic">Choose a cell line.</label>
</div>
<div>
<select id='cellSelectDynamic' class="selectpicker"></select>
</div>
<br>
<button id='loadContextButton' type="submit" class="btn btn-primary">Load</button>
</div>
</div>
</div>
<!-- <div id="phospho" class="tab-pane fade in">
<div >
<div class="form-group">
<br>
<span>
<select id='drug_select' title="drug" label="Drug" class="selectpicker ctx-select" data-width=20%></select>
<select id='conc_select' title="concentration" label ="Concentration" class="selectpicker ctx-select" data-width=20%></select>
<select id='time_select' title="timepoint" class="selectpicker ctx-select" data-width=20%></select>
<select id='cell_line_select' title="cell line" class="selectpicker ctx-select" data-width=20%></select>
<button id='load_context' type="submit" class="btn btn-primary">Load</button>
<button id='reset_filter' type="submit" class="btn btn-danger">Reset</button>
</span>
<hr>
<table id="path_table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Path</th>
<th>Start</th>
<th>End</th>
<th>Length</th>
<th>Score</th>
<th>id</th>
</tr>
</thead>
</table>
</div>
</div>
</div> -->
<div id="about" class="tab-pane fade in">
<br>
<div class="panel-group">
<!-- panel 0 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse0">Quick Start</a>
</h4>
</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">Welcome to the INDRA Interactive Pathway Map (IPM) built and maintained by the </span><a href="https://indralab.github.io/"><span style="font-weight: 400;">INDRA team</span></a><span style="font-weight: 400;"> at the</span> <a href="http://hits.harvard.edu/"><span style="font-weight: 400;">Harvard Program in Therapeutic Science (HiTS)</span></a><span style="font-weight: 400;">.</span></p>
<p><strong>Reading and using the pathway map:</strong></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Nodes represent biological entities mentioned in text.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Nodes representing families are subdivided into pie charts.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Wild-type genes are colored </span><strong style="color:green">green</strong><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Mutated genes are colored </span><strong style="color:orange">orange</strong><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">The intensity of each color corresponds to the expression level of a gene in CCLE.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Clicking any node provides additional context by linking out to external resources.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Clicking any edge will allow a user to query INDRA DB for evidence.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">The force-directed active layout can be disabled by toggling the “Forces” button.</span></li>
</ul>
<p><strong>Build your own model from text</strong></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Open the Build tab.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Enter a list of sentences describing biological mechanisms.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Click load and exit the menu.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Your model should be ready momentarily.</span></li>
</ul>
<p><strong>Model context</strong></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Network models can be contextualized using the Context tab.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Users can load gene expression and mutation data from each of the 900+ cell lines available in the CCLE.</span></li>
</ul>
<p><strong>Contact</strong></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">If you encounter any technical problems or would like to get in touch with the team please emails us at </span><a href="mailto:[email protected]"><span style="font-weight: 400;">[email protected]</span></a><span style="font-weight: 400;">.</span></li>
</ul>
</div>
</div>
</div>
<!-- panel 0 end -->
<!-- panel 1 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Introduction</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">This website implements an interactive pathway map (IPM) built using INDRA, an automated model assembly system for molecular biology. The goal of INDRA-IPM is to allow users to build, contextualize, and share biological pathway models by describing them in natural language.</span></p>
<p><span style="font-weight: 400;">The visualization aims to display pathways in a visual style similar to that used by biologists in textbooks and presentations. In addition we offer a layer of contextualization and an interactive user interface:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Nodes represent biological entities mentioned in text.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Nodes representing families are subdivided into pie charts.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Wild-type genes are colored </span><strong style="color:green">green</strong><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Mutated genes are colored </span><strong style="color:orange">orange</strong><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">The intensity of each color corresponds to the expression level of a gene in CCLE.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Clicking any node provides additional context by linking out to CiteAb, HGNC, and UniProt.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Clicking any edge will allow a user to filter the sources and targets of that edge and make a request for evidence found in literature and curated database that is stored in INDRA DB.</span></li>
</ul>
<p><span style="font-weight: 400;">We start off displaying a pre-built model which demonstrates all of these features. The </span><a href="https://www.cancer.gov/research/key-initiatives/ras/ras-central/blog/2014/what-do-we-mean-ras-pathway"><span style="font-weight: 400;">RAS Pathway Map model</span></a><span style="font-weight: 400;"> was drawn by Dr. Frank McCormick in collaboration with the NCI RAS Initiative community.</span></p>
</div>
</div>
</div>
<!-- panel 1 end -->
<!-- panel 2 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Building models from text</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">Users have the ability to define their own biological models in text under the “Build” tab. Here, we start off with the text necessary to build The NCI RAS Pathway Map as an example. A full list of the mechanistic relationships that can be represented by INDRA (and therefore INDRA-IPM) can be found in the software </span><a href="https://indra.readthedocs.io/en/latest/modules/statements.html"><span style="font-weight: 400;">documentation</span></a><span style="font-weight: 400;">, and examples of models described in natural language (processed via the TRIPS system and assembled by INDRA) can be found in </span><a href="http://msb.embopress.org/content/13/11/954.long"><span style="font-weight: 400;">Gyori, Bachman, et. al. (2017)</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">Users should note that the natural language processing systems are fairly robust but not without limitations. Proper grammar and punctuation should be used. The reading systems do not consider newlines to be sentence separators and may return erroneous output for sentences which are not terminated with a period.</span></p>
<p><span style="font-weight: 400;">The recognition and grounding of named entities (proteins, etc.) to database identifiers is done automatically. Nevertheless, using standardized names such as HGNC symbols (as opposed to informal synonyms) is preferred to avoid ambiguity. To normalize node names in the pathway map, the IPM performs name standardization, in which entities mentioned by their synonyms are normalized to standard names such as HGNC symbols (for instance, MEK1, Map2k1 and Mek1 are all normalized to the standard symbol MAP2K1). Note that by clicking on a node, a tooltip opens that allows linking out to databases (HGNC, UniProt, CiteAb), and checking the original text that the standardized node was created from.</span></p>
<p><span style="font-weight: 400;">INDRA-IPM also recognizes protein families and complexes and grounds them in the </span><a href="https://github.com/sorgerlab/famplex/"><span style="font-weight: 400;">FamPlex ontology</span></a><span style="font-weight: 400;">. In some cases, there is ambiguity in the name of a specific gene and a family it is part of. An example of this is the grounding of “JUN” from text to the JUN family, which also includes the JUN gene. In this case the user can use a synonym such as “c-JUN” that refers to the singular entity in order to reference only the gene and not the family.</span></p>
<p><span style="font-weight: 400;">We have exposed two reading systems to users. The </span><a href="https://github.com/clulab/reach"><span style="font-weight: 400;">REACH</span></a><span style="font-weight: 400;"> reader developed by the CLU Lab at the University of Arizona is an information extraction system for the biomedical domain, which aims to read scientific literature and extract cancer signaling pathways. We recommend users try REACH first due to its speed. The </span><a href="http://trips.ihmc.us/parser/cgi/drum"><span style="font-weight: 400;">TRIPS/DRUM</span></a><span style="font-weight: 400;"> system developed by IHMC may offer greater mechanistic detail in some use cases (for instance, it supports recognizing complex molecular conditions such as “BRAF-V600E not bound to Vemurafenib”), but it requires significantly longer to run.</span></p>
</div>
</div>
</div>
<!-- panel 2 end -->
<!-- panel 3 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Contextualizing models</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">Users are able to project data from the Cancer Cell Line Encyclopedia (CCLE) onto their pathway maps. This is done automatically when the IPM is loaded initially (using the LOXIMVI skin cancer cell line) and can be changed to any other CCLE cell line in the Model Options dialogue panel. Wild type genes are colored green, while mutated genes are colored orange. Color intensity indicates the relative level of expression. Context is unavailable for gray nodes because they were not measured in CCLE.</span></p>
</div>
</div>
</div>
<!-- panel 3 end -->
<!-- panel 4 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4">Sharing models</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">Users can share models using the </span><a href="http://ndexbio.org"><span style="font-weight: 400;">NDEx</span></a><span style="font-weight: 400;"> network sharing website . To upload the current model, click the “NDEX” button at the bottom of the interface, then click “Upload”. A link to NDEx will appear one the upload is complete.</span></p>
<p><span style="font-weight: 400;">One can load a model by entering the unique key at the end of this link (e.g., </span><span style="font-weight: 400;">9b901d8f-2e2d-11e9-9f06-0ac135e8bacf) into the Load field. Alternatively, one can share the link in the address bar (e.g., pathwaymap.indra.bio/?uuid=9b901d8f-2e2d-11e9-9f06-0ac135e8bacf) which will send a user to the IPM website and immediately load the shared model. Shared models preserve their text description, INDRA statements, graph layout, cell line context, and any evidence retrieved from INDRA DB.</span></p>
</div>
</div>
</div>
<!-- panel 4 end -->
<!-- panel 5 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5">Exporting models</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">Users can export models in a variety of formats.</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">INDRA JSON will export the model statements as a in the JSON format. These can be imported into INDRA or processed separately. The INDRA JSON format is specified in the software </span><a href="https://github.com/sorgerlab/indra/blob/master/indra/resources/statements_schema.json"><span style="font-weight: 400;">documentation</span></a><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">PySB, SBML, BNGL, Kappa will export executable models in these formats. These modeling formalisms allow parameterizing and simulating models, and evaluating them against time-course data. Additionally, the Kappa IM option downloads an image of the rule-based model's influence structure. More information about these formats and tools supporting them is available at the following places:</span></li>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">PySB</span></li>
<ul>
<li style="font-weight: 400;"><a href="http://pysb.org/"><span style="font-weight: 400;">http://pysb.org/</span></a></li>
</ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">SBML</span></li>
<ul>
<li style="font-weight: 400;"><a href="http://sbml.org/"><span style="font-weight: 400;">http://sbml.org/</span></a></li>
</ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">BNGL: </span></li>
<ul>
<li style="font-weight: 400;"><a href="http://visualizlab.org/rulebender/index.html"><span style="font-weight: 400;">http://visualizlab.org/rulebender/index.html</span></a></li>
<li style="font-weight: 400;"><a href="https://www.csb.pitt.edu/Faculty/Faeder/?page_id=409"><span style="font-weight: 400;">https://www.csb.pitt.edu/Faculty/Faeder/?page_id=409</span></a></li>
</ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Kappa</span></li>
<ul>
<li style="font-weight: 400;"><a href="https://kappalanguage.org/"><span style="font-weight: 400;">https://kappalanguage.org/</span></a></li>
</ul>
</ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">SBGN will export a model in the Systems Biology Graphical Notation format. Documentation and tools supporting SBGN are </span><a href="http://sbgn.github.io/sbgn/."><span style="font-weight: 400;">available</span></a><span style="font-weight: 400;">. Note that layout information is not included in exported SBGN models, however tools such as </span><a href="http://web.newteditor.org/"><span style="font-weight: 400;">Newt</span></a><span style="font-weight: 400;"> have built-in layout algorithms.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">CX will export a model in the .cx format which can be opened in </span><a href="https://cytoscape.org/"><span style="font-weight: 400;">Cytoscape</span></a><span style="font-weight: 400;"> and also uploaded to NDEx. Cytoscape enables network visualization and provides access to a large ecosystem of analysis plugins; </span><a href="http://ndexbio.org/"><span style="font-weight: 400;">NDEx</span></a><span style="font-weight: 400;"> is a network sharing and versioning website with a programmatic API for accessing networks.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">PNG will export a high-resolution .png image of the current graph. This feature is useful for taking snapshots of a pathway map for inclusion into documents or presentations.</span></li>
</ul>
<p><span style="font-weight: 400;">In order to simplify the user interface, only PNG export is available on mobile devices with limited screen width.</span></p>
</div>
</div>
</div>
<!-- panel 5 end -->
<!-- panel 6 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse6">Funding</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p><span style="font-weight: 400;">This work was funded by ARO Grants W911NF‐14‐1‐0397 and W911NF‐15‐1‐0544 under the DARPA Big Mechanism and Communicating with Computers programs, and by NIGMS Grant P50GM107618.</span></p>
</div>
</div>
</div>
<!-- panel 6 end -->
<!-- panel 7 start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse7">Privacy</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Our API backend receives user-generated requests such as those for reading, contextualization, and NDEx sharing.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Our server logs the IP addresses which make requests to the API.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">The data from some user requests is forwarded to external APIs such as TRIPS (reading), cBioPortal (contextualization), NDEx in order to implement these functions.</span></li>
</ul>
</div>
</div>
</div>
<!-- panel 7 end -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- graph : start -->
<!-- <h5>Graph</h5> -->
<div id="cy-container" class="cy-container">
<div id="cy_1" class="cy" data-url="static/cyjs/model_A101D_SKIN.json"></div>
</div>
<!-- graph : end -->
</div>
</div>
<div class="row" align="center">
<div class="col-md-12">
<b class="hidden-sm hidden-xs">Download</b>
<button id='downloadINDRA' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Download the model statements generated by INDRA in JSON format.">INDRA JSON</button>
<button id='downloadPySB' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA into an executable PySB model.">PySB</button>
<button id='downloadSBML' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA as a SBML model.">SBML</button>
<button id='downloadSBGN' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA as a SBGN model.">SBGN</button>
<button id='downloadBNGL' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA as a BNGL model.">BNGL</button>
<button id='downloadKappa' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA as a Kappa model.">Kappa</button>
<button id='downloadKappaIM' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download a Kappa influence map of the Kappa model generated by INDRA.">Kappa IM</button>
<button id='downloadCX' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Assemble and download the model statements generated by INDRA as a Cytoscape CX model.">CX</button>
<button id='downloadPNG' type="submit" class="btn btn-default hidden-xs" data-placement="bottom" data-toggle="tooltip" title="Download a high-resolution PNG image of the current model.">PNG</button>
<span class='hidden-xs'>|</span>
<span rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="Upload, download, and share the current model via NDEx.">
<button id='NDEX' type="submit" class="btn btn-default" data-toggle="modal" data-target="#ndexModal">NDEx</button>
</span>
<span rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="Toggle force-directed layout.">
<input id="layoutToggle" type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-on="Forces" data-off="Off" autocomplete="off">
</span>
</div>
</div>
<!-- modal start -->
<div class="modal fade" id="ndexModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">NDEX</h4>
</div>
<div class="modal-body">
<div>
<h4>NDEX Download</h4>
<div class="form-group">
<label for="ndexUUID"></label>
<input type="email" class="form-control" id="ndexUUID" placeholder="e.g. - ea778a86-91b9-11e8-a4bf-0ac135e8bacf" autocomplete="off">
</div>
<div class= 'btn-div'>
<button id='loadNDEX' type="submit" class="btn btn-primary">Load</button>
</div>
</div>
<hr>
<div>
<h4>NDEX Upload</h4>
<div class="ndex-upload-container"></div>
<button id='NDEX_upload_btn' type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal end -->
<!-- modal start -->
<div class="modal" id="edgeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content modal-fullscreen">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Edge statements</h4>
</div>
<div class="modal-body">
<h4>Sources</h4>
<div class="edgeModal-sources btn-div"></div>
<h4>Targets</h4>
<div class="edgeModal-targets btn-div"></div>
<br>
<div class="edgeModal-stmtsbox"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- modal end -->
</div>
<!-- container-fluid : end -->
</body>
</html>