-
Notifications
You must be signed in to change notification settings - Fork 10
/
ribbon.html
157 lines (116 loc) · 6.37 KB
/
ribbon.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
---
layout: default
permalink: /ribbon.html
---
<style>
.banner {
background-color: red;
color: white;
border-radius: 5px;
padding: 10px;
text-align: center;
margin: 20px 0px;
}
.banner__warning {
display: inline-block;
text-align: left;
width: 15%;
}
.banner__disclaimer {
display: inline-block;
text-align: start;
width: 80%;
}
.ribbon__category--cell, .ribbon__subject--cell, .ribbon__subject--cell--no-annotation, .ribbon__subject__label--link, tr, th, td {
/* font-size: 14px !important; */
line-height: 1.0 !important;
}
.ribbon__subject--cell {
box-shadow: 0 1px 1px rgba(0,0,0,.26);
}
.ribbon__category--cell:hover {
font-weight: 800 !important;
}
.wc-ribbon-cell, wc-ribbon-subject, wc-ribbon-strips, wc-ribbon-table {
line-height: 1.0 !important;
font-size: 14px !important;
}
li {
margin-left: 0px;
}
h3 {
font-size: 16px;
}
.cell {
border: 1px solid black; background-color: white; height: 15px; width: 15px; display: inline-block; vertical-align: sub;
}
.table__row__supercell__cell__link {
color: rgb(73, 101, 194);
text-decoration: none;
}
.table__header__cell {
padding: 2px;
font-weight: 800 !important;
}
.clicked {
border: 2px solid red;
box-shadow: 0px 0px 8px red !important;
}
.table__row__supercell {
vertical-align: top !important;
border-bottom: 1px solid #ddd;
}
</style>
<script src="js/ribbon.js"></script>
<script type="module" src="https://unpkg.com/@geneontology/wc-go-ribbon/dist/wc-go-ribbon/wc-go-ribbon.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@geneontology/wc-go-ribbon/dist/wc-go-ribbon/wc-go-ribbon.js"></script>
<script type="module" src="https://unpkg.com/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete/wc-go-autocomplete.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete/wc-go-autocomplete.js"></script>
<div class="container" style="width:95%">
<div class="row" style="margin:0rem 2rem">
<h1>Gene Ontology Ribbon Sandbox</h1>
<p>
The GO Ribbon provides a visual summary of gene functions and a quick way to browse the GO annotations for a gene or gene set.
</p>
<p>
To further investigate the GO annotations grouped under a high level term, click on the colored cells for your gene of interest.
</p>
<p>
Questions about the Ribbon ? [<a href="/docs/ribbon.html">GO Ribbon documentation</a>] [<a href="https://help.geneontology.org/">Helpdesk</a>].
</p>
<hr>
<div style="margin-bottom: 10rem; border: 1px solid black; border-radius: 25px;">
<div style="margin-left: 2rem; display: inline-block; vertical-align: top">
<strong>Search and add gene to the GO ribbon:</strong><br><small>(can use gene symbol or model organism ID such as RGD:3889)</small><br>
<wc-go-autocomplete id="ac"></wc-go-autocomplete>
</div>
<div style="margin: 6rem 3rem; display: inline-block; vertical-align: top;"><strong> OR </strong></div>
<div style="display: inline-block">
<strong>Load GO ribbon with multiple genes:</strong><br><small>(requires model organism IDs such as RGD:3889, MGI:1099800, HGNC:11998)</small><br>
<textarea id="ribbon-sandbox-input" rows="4" name="input" placeholder="Enter gene IDs (eg HGNC:11998, MGI:1099800...)" style="width:320px; resize: none; margin-bottom: 5px; font-size: 14px; display: inline-block"></textarea>
<div class="input-group-btn" style="display: inline-block; position: absolute; padding-left: 1rem;">
<button type="button" class="btn btn-primary u-no-transform u-anim-zoom-in" style="background-color: #3F51B5; border-color: black; margin-bottom: 1rem; display: block" onclick="getExample()" title="Cycle through different Gene Set examples">
Examples
</button>
<button type="button" class="btn btn-primary u-no-transform u-anim-move-right" style="background-color: #3F51B5; border-color: black; display: block" onclick="view()" title="View GO Ribbon for above gene set">
View <i class="fa-solid fa-chevron-right u-line-height-single"></i>
</button>
</div>
</div>
<div style="margin: 6rem 3rem; display: inline-block; vertical-align: top;"> </div>
<div style="display: inline-block; vertical-align: top;">
<strong>Remove all genes from GO ribbon:</strong><br>
<button onclick="document.getElementById('ribbon').subjects=''" style="background-color: #3F51B5; border-color: black; padding: 10px; border-radius: 0px 0px calc(8px + 1.5vw) 0px;" class="btn btn-primary u-no-transform u-anim-move-right">Clear GO ribbon</button>
</div>
</div>
<!-- Ribbon itself -->
<wc-go-ribbon id="ribbon" subjects="RGD:620474,RGD:3889"></wc-go-ribbon>
<h2 style="margin-top:50px">Additional Notes</h2>
<ul>
<li>The Ribbon provides a summary of the annotations associated to your genes, but it does not inform on which are the most relevant functions in a gene set. To find out the statistically relevant functions of a gene set, please use the <a href="/docs/go-enrichment-analysis/">Enrichment Analysis</a> approach</li>
<li>The <a href="/covid-19.html">GO COVID-19 page</a> is an illustration of how the GO Ribbon and Enrichment Analysis can be used together to both show the existing functions of a gene set and highlight the functions that are over or under represented (over representation test)</li>
<li>The Ribbon is a generic web component that can easily be integrated in other websites, independenly of the framework used. It is freely available on <a href="https://github.com/geneontology/wc-ribbon" target="blank">GitHub</a>. As an example, the Ribbon is used to represent both GO, Disease and Expression data on the <a href="https://www.alliancegenome.org/" target="blank">Alliance website</a></li>
</ul>
</div>
<br><br><br>
</div>