-
Notifications
You must be signed in to change notification settings - Fork 22
/
configuration.html
684 lines (631 loc) · 25.9 KB
/
configuration.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
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Morpheus - Configuration</title>
<link rel="stylesheet" href="css/morpheus-latest.min.css">
<script type="text/javascript" src="js/morpheus-external-latest.min.js"></script>
<script src="js/morpheus-latest.min.js"></script>
<script src="js/morpheus.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
ul {
margin: 0;
list-style-type: none;
padding-left: 20px;
}
.example {
padding-top: 8px;
padding-bottom: 8px;
}
.description {
color: Grey;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<svg width="32px" height="32px">
<g>
<rect x="0" y="0" width="32" height="14" style="fill:#ca0020;stroke:none"/>
<rect x="0" y="18" width="32" height="14" style="fill:#0571b0;stroke:none"/>
</g>
</svg>
<h2 style="padding-left: 4px; display:inline-block;">Configuration
<small>Load Morpheus with a pre-configured
matrix
</small>
</h2>
<p>
There are two options to loading a pre-configured matrix.
<br/> <br/>
1. Pass the request parameters <code>json</code>, a URI encoded JSON configuration object, or <code>url</code>,
a URL to a
JSON configuration file, to
https://software.broadinstitute.org/morpheus/ (can be embedded using an iframe).
<br/> Note that the correct HTTP <a target="_blank"
href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>
headers must be set if any of your resources are hosted on a
different domain.
<br/><br/>
2. Include morpheus-latest.min.css, morpheus-external-latest.min.js, morpheus-latest.min.js in your HTML.
Construct a new <code>morpheus.HeatMap</code> object with the <code>el</code> parameter, the element in which to
render
the heat map.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div style="font-size:1.5em">JSON configuration</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul>
<li><a data-toggle="collapse" href="#dataset"
aria-expanded="false"
aria-controls="dataset">dataset</a>
<div id="dataset" class="collapse">
A File or URL to one of the <a href="documentation.html#import">accepted file formats</a>.
<br/>Can also be an array of files or URLs
in which case the datasets are combined by matching on column ids.
<br/>
Also be can specified in <a data-toggle="collapse" href="#datasetJSON"
aria-expanded="false"
aria-controls="datasetJSON">JSON format</a>
<div id="datasetJSON" class="collapse">
<ul>
<li>rows <code>Number</code>
<div class="description">Number of rows in the dataset</div>
</li>
<li>columns <code>Number</code>
<div class="description">Number of columns in the dataset</div>
</li>
<li>seriesArrays<code>[[number, object]]</code>
<div class="description">Each series contains an array of arrays
in
row-major order.
</div>
</li>
<li>seriesNames <code>[string]</code>
<div class="description">Array of series names</div>
</li>
<li>seriesDataTypes <code>[string]</code>
<div class="description">Array of series data types</div>
</li>
<li>rowMetadataModel <code>Object</code> with the key "vectors"
<div class="description"> Contains dataset row metadata</div>
<ul>
<li>vectors <code>Array</code> <br/>Array of objects with
the keys
"name" and
"array".
</li>
</ul>
</li>
<li>columnMetadataModel <code>Object</code> with the key "vectors"
<div class="description"> Contains dataset column metadata</div>
<ul>
<li>vectors <code>Array</code>
<div class="description">Array of objects with the
keys
"name" and
"array".
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li><a data-toggle="collapse" href="#annotations"
aria-expanded="false"
aria-controls="annotations">rowAnnotations/columnAnnotations</a>
<div id="annotations" class="collapse">
<div class="top-level-description">Optional array of
objects describing additional annotations to join
with dataset.<code> [Object]</code></div>
<ul>
<li>file <code>String</code>
<div class="description">An xlsx file, a tab-delimited text
file, or a gmt file.
</div>
</li>
<li>datasetField <code>String</code>
<div class="description">Field to match in dataset.</div>
</li>
<li>fileField <code>String</code>
<div class="description">Field to match in file.</div>
</li>
<li>include <code>[String]</code>
<div class="description">Optional array of fields to include
from file.
</div>
</li>
</ul>
<div class="example">Annotate rows matching "name" field in
dataset to "id" field in file at https://MY_URL.
<code>[{file:"https://MY_URL", datasetField:"name",
fileField:"id"}]</code>
</div>
</div>
</li>
<li><a data-toggle="collapse" href="#rowSize"
aria-expanded="false"
aria-controls="rowSize">rowSize</a>
<div id="rowSize" class="collapse">
<ul>
<li><code>Number|String</code> (default: 13)
<div class="description">Heat map row size in pixels or 'fit' to fit
heat map to current height.
</div>
</li>
</ul>
</div>
</li>
<li><a data-toggle="collapse" href="#width"
aria-expanded="false"
aria-controls="width">width</a>
<div id="width" class="collapse">
<ul>
<li><code>Number</code>
<div class="description">Total heat map width. If undefined,
width will be with of <code>el</code> element.
</div>
</li>
</ul>
</div>
</li>
<li><a data-toggle="collapse" href="#columnSize"
aria-expanded="false"
aria-controls="columnSize">columnSize</a>
<div id="columnSize" class="collapse">
<ul>
<li><code>Number|String</code> (default: 13)
<div class="description">Heat map column size in pixels or 'fit' to
fit
heat map to current width.
</div>
</li>
</ul>
</div>
</li>
<li><a data-toggle="collapse" href="#drawGrid"
aria-expanded="false"
aria-controls="drawGrid">drawGrid</a>
<div id="drawGrid" class="collapse">
<ul>
<li><code>Boolean</code> (default:true)
<div class="description">Whether to draw heat map grid.
</div>
</li>
</ul>
</div>
</li>
<li><a data-toggle="collapse" href="#groupBy"
aria-expanded="false"
aria-controls="groupBy">rowGroupBy/columnGroupBy</a>
<div id="groupBy" class="collapse">
<div class="top-level-description">Optional array of metadata names to group
the heat map by. <code>[Object]</code></div>
<ul>
<li>field <code>String</code>
<div class="description">The metadata field name.
</div>
</li>
</ul>
<div class="example">
<div class="description">Group by the type and gender metadata
fields
</div>
<code>[{field:"type"}, {field:"gender"}]</code>
</div>
</div>
</li>
<li><a data-toggle="collapse" href="#filter"
aria-expanded="false"
aria-controls="filter">rowFilter/columnFilter</a>
<div id="filter" class="collapse">
<div class="top-level-description">Optional object that describes filter.
<code>Object</code></div>
<ul>
<li>filters <code>[Object]</code>
<ul>
<li>field <code>String</code>
<div class="description">The metadata field name.
</div>
</li>
<li>type <code>String</code>
<div class="description">One of "set", "range", "top",
"index"
</div>
</li>
<li>values <code>[String|Number]</code> for "set" filter
<div class="description"> Array of values to include
</div>
</li>
<li>min <code>Number</code> for "range" filter
<div class="description">Minimum value to include
</div>
</li>
<li>max <code>Number</code> for "range" filter
<div class="description">Maximum value to include
</div>
</li>
<li>direction <code>String</code> for "top" filter
<div class="description">One of "top", "bottom",
"topAndBottom"
</div>
</li>
<li>n <code>Number</code> for "top" filter
<div class="description">Number to include
</div>
</li>
<li>indices <code>[Number]</code> for "index" filter
<div class="description">Array of indices to include
</div>
</li>
</ul>
</li>
<li>isAnd <code>Boolean</code>
<div class="description">Whether filters are combined by AND or OR.
</div>
</li>
</ul>
<div class="example">
<div class="description">Keep rows with annotation "field_1" equal to "A" or "B" and annotation "field_2"
between zero and one.
</div>
<code>{isAnd:true, filters:[{type:"set", name:"field_1", values:["A", "B"]}, {type:"range",
name:"field_2",
min:0, max:1}]}</code>
</div>
</div>
</li>
<li><a data-toggle="collapse" href="#colorScheme"
aria-expanded="false"
aria-controls="colorScheme">colorScheme</a>
<div id="colorScheme" class="collapse">
<div class="top-level-description">Optional object that describes value
to color mapping<code>Object</code></div>
<ul>
<li>scalingMode<code>String</code>
<div class="description">"fixed" or "relative" color scheme</div>
</li>
<li>stepped<code>Boolean</code>
<div class="description">Whether color scheme is continuous (false)
or
discrete (true)
</div>
</li>
<li>values<code>[Number]</code>
<div class="description">Array of values corresponding to colors
</div>
</li>
<li>colors<code>Boolean</code>
<div class="description">Array of colors</div>
</li>
<li>size<code>Object</code>
<div class="description">Optional object that describes the mapping of value to size for an element in
the heat map
</div>
<ul>
<li>seriesName<code>String</code>
<div class="description">Dataset series name to map value to size</div>
</li>
<li>min<code>Number</code>
<div class="description">Minimum value in series used for mapping value to size</div>
</li>
<li>max<code>Number</code>
<div class="description">Maximum value in series used for mapping value to size</div>
</li>
</ul>
</li>
<li>transformValues<code>Number</code>
<div class="description">
For "fixed" scaling mode: 1 to z-score, 2 to robust z-score
</div>
</li>
<li>conditions<code>[Object]</code>
<div class="description">Optional array of objects that describe the mapping of value to shape for
an element in the heat map
</div>
<ul>
<li>seriesName<code>String</code>
<div class="description">Dataset series name to map value to a condition</div>
</li>
<li>color<code>String</code>
<div class="description">Shape color</div>
</li>
<li>shape<code>String</code>
<div class="description">Shape name ("circle", "square", "diamond", "triangle-up",
"triangle-down", "triangle-left", "triangle-right")
</div>
</li>
<li>inheritColor<code>Boolean</code>
<div class="description">Whether shape inherits color from color scheme</div>
</li>
<li>color<code>String</code>
<div class="description">Shape color when inheritColor is false</div>
</li>
<li>v1<code>Number</code>
<div class="description">Condition one value</div>
</li>
<li>v2<code>Number</code>
<div class="description">Condition two value</div>
</li>
<li>v1Op<code>String</code>
<div class="description">Condition one operation ("gte", "gt")</div>
</li>
<li>v2Op<code>Number</code>
<div class="description">Condition two operation ("lte", "lt")</div>
</li>
</ul>
</li>
</ul>
<div class="example">
<div class="description">Use a fixed
color scheme with color stops at -100, -90, 90, and 100
</div>
<code>{ scalingMode : "fixed", stepped : false, values : [ -100, -90,
90,
100], colors : ["#abdda4", "white", "white", "red"]}</code>
</div>
</div>
</li>
<li><a data-toggle="collapse" href="#sortBy"
aria-expanded="false"
aria-controls="sortBy">rowSortBy/columnSortBy</a>
<div id="sortBy" class="collapse">
<div class="top-level-description">Optional array of sort keys. To sort by
an
annotation, set "type" to "annotation" and supply a
metadata name. To sort by values in the heat map set "type" to
"byValues"
and set
"modelIndices" to an array of model row/column indices in the dataset to
sort by. <code>[Object]</code></div>
<ul>
<li>order<code>Number</code>
<div class="description">0 for ascending, 1 for descending.</div>
</li>
<li>field<code>String</code>
<div class="description">Annotation field name when sorting by an
annotation
</div>
</li>
<li>type<code>String</code>
<div class="description">Sort by "annotation" or "byValues"</div>
</li>
<li>modelIndices<code>[Number]</code>
<div class="description">Array of model row/column indices in the
dataset to
sort by when sorting by heat map values
</div>
</li>
</ul>
<div class="example">
<div class="description">Sort
ascending by gene, and then descending by heat map values in 1st
column
</div>
<code>[{field:"gene", order:0, type:"annotation"}, {modelIndices:[0],
order:1, type:"byValues"}]</code></div>
</div>
</li>
<li><a data-toggle="collapse" href="#colorModel"
aria-expanded="false"
aria-controls="colorModel">rowColorModel/columnColorModel</a>
<div id="colorModel" class="collapse">
<div class="top-level-description">Describes how annotation values
are mapped to colors. The keys in the object are the
annotation names. The structure of the object will depend on whether
you're specifying a continuous or discrete color map.
</div>
<div>For discrete mappings:</div>
<div class="example">
<div class="description">Map "a" to "red", "b" to "blue", and "c" to
"white" for the "type" field.
</div>
<code>{"type":{"a":"red", "b":"blue", "c":"white"}}</code></div>
<div>For continuous mappings:</div>
<div class="example">
<div class="description">Map from yellow to green from 0 to 2 for the
"score" field.
</div>
<code>{"score":{values:[0, 2], colors:["yellow", "green"]}</code></div>
</div>
</li>
<li><a data-toggle="collapse" href="#shapeModel"
aria-expanded="false"
aria-controls="shapeModel">rowShapeModel/columnShapeModel</a>
<div id="shapeModel" class="collapse">
<div class="top-level-description">Describes how annotation values
are mapped to shapes. The keys in the object are the
annotation names. The values are one of "circle", "square", "plus", "x",
"asterisk", "diamond", "triangle-up", "triangle-down", "triangle-left",
"triangle-right", or "circle-minus".
</div>
<div class="example">
<div class="description">Map "a" to "diamond", "b" to "asterisk", and "c" to
"x" for the "type" field.
</div>
<code>{"type":{"a":"diamond", "b":"asterisk", "c":"x"}}</code></div>
</div>
</li>
<li><a data-toggle="collapse" href="#fontModel"
aria-expanded="false"
aria-controls="fontModel">rowFontModel/columnFontModel</a>
<div id="fontModel" class="collapse">
<div class="top-level-description">Describes how annotation values
are mapped to font weights. The keys in the object are the
annotation names. The values are one of {"weight":"400"}, {"weight":"700"}, or {"weight":"900"}
</div>
<div class="example">
<div class="description">Map "a" to font weight 700
</div>
<code>{"type":{"a":{"weight":"700"}}</code></div>
</div>
</li>
<li><a data-toggle="collapse" href="#dendrogram"
aria-expanded="false"
aria-controls="dendrogram">rowDendrogram/columnDendrogram</a>
<div id="dendrogram" class="collapse">
<ul>
<li><code>String
</code>
<div class="top-level-description">Optional URL to a dendrogram in
<a
target="_blank"
href="https://en.wikipedia.org/wiki/Newick_format">Newick</a>
format
</div>
</li>
</ul>
</div>
</li>
<li>
<a data-toggle="collapse" href="#dendrogramField"
aria-expanded="false"
aria-controls="dendrogramField">rowDendrogramField/columnDendrogramField</a>
<div id="dendrogramField" class="collapse">
<ul>
<li><code>String</code>
<div class="top-level-description">Optional metadata field in
dataset to
match
leaf node ids in the dendrogram Newick file.
</div>
</li>
</ul>
</div>
</li>
<li><a data-toggle="collapse" href="#metadata"
aria-expanded="false"
aria-controls="metadata">rows/columns</a>
<div id="metadata" class="collapse">
<div class="top-level-description">Optional array of objects describing how
to
display metadata fields <code>[Object]</code></div>
<ul>
<li>field <code>String</code>
<div class="description">Metadata field name</div>
</li>
<li>display <code>[String]</code>
<div class="description">"text" to render annotation as
text, "color" to render annotation as
color, "bar" to render annotation as
bar chart, "text_and_font" to encode text using font weight, "text_and_color" to encode text
using color.
</div>
</li>
<li>highlightMatchingValues <code>Boolean</code> (default:false)
<div
class="description">Whether to highlight matching values
on hover
</div>
</li>
<li>colorByField <code>String</code>
<div
class="description">Optional field name to
color this field by.
</div>
</li>
<li>fontField <code>String</code>
<div
class="description">Optional field name to
use for mapping values to font weights.
</div>
</li>
<li>min <code>Number</code>
<div
class="description">Optional minimum for bar chart.
</div>
</li>
<li>mid <code>Number</code>
<div
class="description">Optional midpoint for bar chart.
</div>
</li>
<li>max <code>Number</code>
<div
class="description">Optional maximum for bar chart.
</div>
</li>
<li>formatter <code>String</code>
<div
class="description">Optional number format pattern, such as ".4f".
</div>
</li>
</ul>
<div class="example">
<div class="description">Display id as text and
stdev using text and color
</div>
<code>[{field:"id", display:["text"]}, {field:"stdev",
display:["text", "color"]}]</code></div>
</div>
</li>
<li>
<a data-toggle="collapse" href="#tools"
aria-expanded="false"
aria-controls="tools">tools</a>
<div id="tools" class="collapse">
<div class="top-level-description">Optional array of tools to run at load
time
<code>[Object]</code></div>
<code>[{name:String, params:Object}]</code>
<div class="example">
<div class="description">Cluster rows and columns</div>
<code>[{
name: "Hierarchical Clustering",
params: {cluster: "Rows and columns"}
}]</code>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 morpheus-footer"></div>
</div>
</div>
<script type="text/javascript">
new morpheus.HelpMenu().$el.appendTo($('.morpheus-footer'));
$(document.body).find('[name=open]').on(
'click',
function (e) {
e.preventDefault();
var json = {
columnAnnotations: [
{
file: 'https://software.broadinstitute.org/morpheus/preloaded-datasets/Achilles_v2.4_SampleInfo_small.txt',
datasetField: 'id',
fileField: 'id'
}],
columns: [
{
field: 'id',
display: ['text']
}, {
field: 'primary_site',
display: ['color'],
highlightMatchingValues: true
}],
dataset: 'https://software.broadinstitute.org/morpheus/preloaded-datasets/Achilles_QC_v2.4.3.rnai.Gs.gct'
};
window.location.href = 'https://software.broadinstitute.org/morpheus/?json='
+ encodeURIComponent(JSON.stringify(json));
});
</script>
</body>
</html>