-
Notifications
You must be signed in to change notification settings - Fork 199
/
featureglyphs.html
166 lines (150 loc) · 7.04 KB
/
featureglyphs.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>JBrowse feature glyphs</title></head>
<link rel="stylesheet" type="text/css" href="../genome.css"></link>
<style type="text/css">
body { font-size: 14px; width: 90%; padding: 0 0 1em 1em; }
table {
border: 1px solid #777;
border-collapse: collapse;
margin-bottom: 1em;
}
td { border: 1px solid #777; padding: 5px; }
th { border: 1px solid #777; }
div.ex {
position: relative;
width: 5em;
margin-left: 1em;
margin-right: 1em;
}
div.ex, div.ex * {
display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
_overflow:hidden;/*fix IE6 to expanded content*/
zoom:1;/*trigger hasLayout*/
*display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/
}
</style>
<body>
<h2>JBrowse feature glyphs</h2>
<p>Here are some of the feature glyphs built into JBrowse. These are what you specify for the --cssclass option to gff-to-json.pl, or for the "class" value or "subfeatureClasses" map in the config file. You can also easily add your own; look in the <a href="../genome.css">genome.css</a> file for examples.</p>
<h3>Feature classes</h3>
<p>Features with no subfeatures will be drawn as rectangles like
those below, depending on their <code>cssClass</code>
configuration.
</p>
<table>
<tr><th><code>cssClass</code></th><th style="width: 8em">displayed</th></tr>
<tr><td>feature </td><td><div class="ex plus-feature"></div></td></tr>
<tr><td>feature2 </td><td><div class="ex plus-feature2"></div></td></tr>
<tr><td>feature3 </td><td><div class="ex plus-feature3"></div></td></tr>
<tr><td>feature4 </td><td><div class="ex plus-feature4"></div></td></tr>
<tr><td>feature5 </td><td><div class="ex plus-feature5"></div></td></tr>
<tr><td>match_part</td><td><div class="ex plus-match_part"></div></td></tr>
<tr><td>exon </td><td><div class="ex plus-exon"></div></td></tr>
<tr><td>est </td><td><div class="ex plus-est"></div></td></tr>
<tr><td>cds </td><td><div class="ex minus-cds minus-cds_phase2"></div></td></tr>
<tr><td>loops </td><td><div class="ex minus-loops minus-loops"></div></td></tr>
<tr><td>helix </td><td><div class="ex plus-helix"></div></td></tr>
<tr><td>dblhelix </td><td><div class="ex plus-dblhelix"></div></td></tr>
<tr><td>ibeam </td><td><div class="ex plus-ibeam"></div></td></tr>
<tr><td>transcript-exon </td><td><div class="ex plus-transcript-exon"></div></td></tr>
<tr><td>transcript-UTR </td><td><div class="ex plus-transcript-UTR"></div></td></tr>
<tr><td>transcript-CDS </td><td><div class="ex plus-transcript-CDS"></div></td></tr>
<tr><td>triangle hgred </td><td><div class="ex plus-triangle hgred" style="width: 0px;"></div></div></td></tr>
<tr><td>triangle hgblue </td><td><div class="ex plus-triangle hgblue" style="width: 0px;"></div></td></tr>
<tr><td>hourglass hgred </td><td><div class="ex plus-hourglass hgred" style="width: 0px;"></div></td></tr>
<tr><td>hourglass hgblue </td><td><div class="ex plus-hourglass hgblue" style="width: 0px;"></div></td></tr>
<tr><td>generic_parent</td><td><div class="ex plus-generic_parent"></div></td></tr>
<tr><td>generic_part_a</td><td><div class="ex plus-generic_part_a"></div></td></tr>
</table>
<h3>Two-level Features</h3>
<p>To show features with subfeatures, JBrowse draws the glyphs for
the subfeatures on top of the glyph for the parent feature. The
parent feature's glyph is set with <code>className</code> and the
glyphs for the subfeatures are set
with <code>subfeatureClasses</code>.
</p>
<table>
<tr>
<th>data</th>
<th>config</th>
<th style="width: 8em">displayed</th>
</tr>
<tr>
<td>parent feature with two subfeatures of type 'exon'</td>
<td><pre>
"style": {
"className": "transcript",
"arrowheadClass": "transcript-arrowhead",
"subfeatureClasses": {
"exon": "transcript-exon"
}
}
</pre></td>
<td>
<div class="ex minus-transcript">
<div class="minus-transcript-arrowhead" style="position: absolute; left: 0px; top: 0px; z-index: 100; "></div>
<div class="transcript-exon minus-transcript-exon" style="left: 0%; top: 0px; width: 53.71900826446281%; "></div>
<div class="transcript-exon minus-transcript-exon" style="left: 76.03305785123968%; top: 0px; width: 23.96694214876033%; "></div>
</div>
</td></tr>
<tr>
<td>parent feature with two subfeatures of type 'CDS'</td>
<td><pre>
"style": {
"className": "transcript",
"arrowheadClass": "transcript-arrowhead",
"subfeatureClasses": {
"CDS": "transcript-CDS"
}
}
</pre></td>
<td>
<div class="ex minus-transcript">
<div class="minus-transcript-arrowhead" style="position: absolute; left: 0px; top: 0px; z-index: 100; "></div>
<div class="transcript-CDS minus-transcript-CDS" style="left: 0%; top: 0px; width: 53.71900826446281%; "></div>
<div class="transcript-CDS minus-transcript-CDS" style="left: 76.03305785123968%; top: 0px; width: 23.96694214876033%; "></div>
</div>
</td></tr>
<tr>
<td>parent feature with two subfeatures of type 'match_part'</td>
<td><pre>
"style": {
"className": "generic_parent",
"arrowheadClass": "arrowhead",
"subfeatureClasses": {
"match_part": "match_part"
}
}
</pre></td>
<td>
<div class="ex minus-generic_parent">
<div class="minus-arrowhead" style="position: absolute; left: 0px; top: 0px; z-index: 100; "></div>
<div class="transcript-match_part minus-match_part" style="left: 0%; top: 0px; width: 53.71900826446281%; "></div>
<div class="transcript-match_part minus-match_part" style="left: 76.03305785123968%; top: 0px; width: 23.96694214876033%; "></div>
</div>
</td></tr>
<tr>
<td>parent feature with two subfeatures of type 'match_part'</td>
<td><pre>
"style": {
"className": "generic_parent",
"arrowheadClass": "arrowhead",
"subfeatureClasses": {
"match_part": "generic_part_a"
}
}
</pre></td>
<td>
<div class="ex minus-generic_parent">
<div class="minus-arrowhead" style="position: absolute; left: 0px; top: 0px; z-index: 100; "></div>
<div class="transcript-generic_part_a minus-generic_part_a" style="left: 0%; top: 0px; width: 53.71900826446281%; "></div>
<div class="transcript-generic_part_a minus-generic_part_a" style="left: 76.03305785123968%; top: 0px; width: 23.96694214876033%; "></div>
</div>
</td></tr>
</table>
<br>
</body>
</html>