-
Notifications
You must be signed in to change notification settings - Fork 0
/
protein_search.html
222 lines (203 loc) · 14.7 KB
/
protein_search.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Protein Search - GExplore</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" href="assets/favicon.png" type="image/png">
</head>
<body>
<div class="search-wrapper">
<div id="header">
<a href="home.html">
<img src="assets/GExplore_logo.png" alt="GExplore Logo" class="logo">
</a>
<div id="topnav">
<ul>
<li class="active"><a href="home.html"><span class="text">Home</span></a></li>
<li><a><span class="text">Search</span> <span class="angle"></span></a>
<ul class="dropdown">
<li><a href="gene_search.html">Genes</a></li>
<li><a href="mutation_search.html">Mutations</a></li>
<li><a href="protein_search.html">Proteins</a></li>
<li><a href="expression_stage_search.html">Stage Expressions</a></li>
<li><a href="expression_tissue_search.html">Tissue Expressions</a></li>
<li><a href="expression_embryo_search.html">Embryo Expressions</a></li>
</ul>
</li>
<li><a><span class="text">Tools</span> <span class="angle"></span></a>
<ul class="dropdown">
<li><a href="compare.html">Compare</a></li>
<li><a href="convert.html">Convert</a></li>
</ul>
</li>
<li><a href="help.html"><span class="text">Help</span></a></li>
<li><a href="about.html"><span class="text">About</span></a></li>
</ul>
</div>
</div>
<div id="search-vertical-content">
<!-- Hero Section -->
<div id="search-intro">
<div class="search-hero-section">
<h2>Search for Proteins</h2>
<p>text</p>
<p>text</p>
<a href="help.html#protein-database" target="_blank">Learn More</a>
</div>
</div>
<!-- Wrapper for padding -->
<div class="search-param-wrapper">
<div id="search-param">
<div id="species-selection">
<label for="species">Species</label>
<select name="species" id="species">
<option value="all_species">All species</option>
<optgroup label="Caenorhabditis species">
<option value="C_becei">Caenorhabditis becei</option>
<option value="C_brenneri">Caenorhabditis brenneri</option>
<option value="C_briggsae">Caenorhabditis briggsae</option>
<option value="C_elegans" selected>Caenorhabditis elegans</option>
<option value="C_japonica">Caenorhabditis japonica</option>
<option value="C_parvicauda">Caenorhabditis parvicauda</option>
<option value="C_quiockensis">Caenorhabditis quiockensis</option>
<option value="C_remanei">Caenorhabditis remanei</option>
<option value="C_sulstoni">Caenorhabditis sulstoni</option>
<option value="C_tropicalis">Caenorhabditis tropicalis</option>
<option value="C_uteleia">Caenorhabditis uteleia</option>
<option value="C_waitukubuli">Caenorhabditis waitukubuli</option>
<option value="C_zanzibari">Caenorhabditis zanzibari</option>
</optgroup>
<optgroup label="Other nematodes">
<option value="B_malayi">Brugia malayi</option>
<option value="O_volvulus">Onchocerca volvulus</option>
<option value="O_tipulae">Oscheius tipulae</option>
<option value="P_pacificus">Pristionchus pacificus</option>
<option value="S_ratti">Strongyloides ratti</option>
<option value="T_muris">Trichuris muris</option>
</optgroup>
<optgroup label="Non-nematodes">
<option value="S_cerevisiae">Saccharomyces cerevisiae</option>
<option value="D_melanogaster">Drosophila melanogaster</option>
<option value="D_rerio">Danio rerio</option>
<option value="M_musculus">Mus musculus</option>
<option value="H_sapiens">Homo sapiens</option>
</optgroup>
</select>
<script type="text/javascript">
document.getElementById("species").addEventListener("change", function() {
var species = this.value;
// Show content2 initially ('Show only genes with orthologs in')
document.getElementById("content2").style.display = "block";
// Hide content2 if a non-nematode species is selected
if (species === "S_cerevisiae" || species === "D_melanogaster" || species === "D_rerio" ||
species === "M_musculus" || species === "H_sapiens") {
document.getElementById("content2").style.display = "none";
}
else {
document.getElementById("content2").style.display = "block";
}
});
</script>
</div>
<div class="search-param-column-1">
<!-- Sequence Name Group -->
<div class="form-group">
<h4>
Sequence Name
<img src="assets/help-icon.png" alt="Help" class="search-page-help-icon">
</h4>
<div class="search-page-help-content">
<p>Enter gene identifiers like WormBase gene IDs, locus names, or gene/protein sequence names. You can use commas, spaces, or wildcards to search multiple genes at once. <a href="help.html#gene-search-field" target="_blank">Learn more</a></p>
</div>
<textarea id="sequence-names" name="sequence-names" placeholder="Enter a sequence name. Separate each additional name with a comma."></textarea>
<div class="splice-variant-row">
<label for="longest-splice-variant">
<input type="checkbox" id="longest-splice-variant" name="longest-splice-variant" checked>
<h5>Only longest splice variant</h5>
</label>
</div>
</div>
<!-- Protein Domain group -->
<div class="form-group">
<h4>
Protein Domain
<img src="assets/help-icon.png" alt="Help" class="search-page-help-icon">
</h4>
<div class="search-page-help-content">
<p>Enter domain abbreviations or SMART/Pfam IDs to search for specific protein domains. Use wildcards, numbers, or combinations of both to define complex domain patterns. <a href="help.html#protein-domain-search-fields" target="_blank">Learn more</a></p>
</div>
<h5>Domain</h5>
<textarea id="protein-domain" name="protein-domain" placeholder="Enter a protein domain. Separate each additional domain with a comma."></textarea>
<h5>Domain Pattern</h5>
<textarea id="domain-pattern" name="domain-pattern"></textarea>
</div>
</div>
<div class="search-param-column-2">
<!-- Orthologs group -->
<div class="form-group" id="content2">
<h4>
Show only genes with orthologs in
<img src="assets/help-icon.png" alt="Help" class="search-page-help-icon">
</h4>
<div class="search-page-help-content">
<p>Use this section to filter genes that have orthologs in specific Caenorhabditis species. Select one or more species to limit your search results to genes shared with the chosen species.</p>
</div>
<!-- Caenorhabditis species -->
<div class="orthologs-category" id="Caeno_plus">
<h5>Caenorhabditis species</h5>
<div class="orthologs-container">
<label><input name="C_becei_ortholog" type="checkbox" id="C_becei_ortholog"> <i>Caenorhabditis becei</i></label>
<label><input name="C_brenneri_ortholog" type="checkbox" id="C_brenneri_ortholog"> <i>Caenorhabditis brenneri</i></label>
<label><input name="C_briggsae_ortholog" type="checkbox" id="C_briggsae_ortholog"> <i>Caenorhabditis briggsae</i></label>
<label><input name="C_elegans_ortholog" type="checkbox" id="C_elegans_ortholog"> <i>Caenorhabditis elegans</i></label>
<label><input name="C_japonica_ortholog" type="checkbox" id="C_japonica_ortholog"> <i>Caenorhabditis japonica</i></label>
<label><input name="C_parvicauda_ortholog" type="checkbox" id="C_parvicauda_ortholog"> <i>Caenorhabditis parvicauda</i></label>
<label><input name="C_quiockensis_ortholog" type="checkbox" id="C_quiockensis_ortholog"> <i>Caenorhabditis quiockensis</i></label>
<label><input name="C_remanei_ortholog" type="checkbox" id="C_remanei_ortholog"> <i>Caenorhabditis remanei</i></label>
<label><input name="C_sulstoni_ortholog" type="checkbox" id="C_sulstoni_ortholog"> <i>Caenorhabditis sulstoni</i></label>
<label><input name="C_tropicalis_ortholog" type="checkbox" id="C_tropicalis_ortholog"> <i>Caenorhabditis tropicalis</i></label>
<label><input name="C_uteleia_ortholog" type="checkbox" id="C_uteleia_ortholog"> <i>Caenorhabditis uteleia</i></label>
<label><input name="C_waitukubuli_ortholog" type="checkbox" id="C_waitukubuli_ortholog"> <i>Caenorhabditis waitukubuli</i></label>
<label><input name="C_zanzibari_ortholog" type="checkbox" id="C_zanzibari_ortholog"> <i>Caenorhabditis zanzibari</i></label>
</div>
</div>
<!-- Other nematodes -->
<div class="orthologs-category">
<h5>Other nematodes</h5>
<div class="orthologs-container">
<label><input name="B_malayi_ortholog" type="checkbox" id="B_malayi_ortholog"> <i>Brugia malayi</i></label>
<label><input name="O_volvulus_ortholog" type="checkbox" id="O_volvulus_ortholog"> <i>Onchocerca volvulus</i></label>
<label><input name="O_tipulae_ortholog" type="checkbox" id="O_tipulae_ortholog"> <i>Oscheius tipulae</i></label>
<label><input name="P_pacificus_ortholog" type="checkbox" id="P_pacificus_ortholog"> <i>Pristionchus pacificus</i></label>
<label><input name="S_ratti_ortholog" type="checkbox" id="S_ratti_ortholog"> <i>Strongyloides ratti</i></label>
<label><input name="T_muris_ortholog" type="checkbox" id="T_muris_ortholog"> <i>Trichuris muris</i></label>
</div>
</div>
<!-- Non-nematodes -->
<div class="orthologs-category">
<h5>Non-nematodes</h5>
<div class="orthologs-container">
<label><input name="S_cerevisiae_ortholog" type="checkbox" id="S_cerevisiae_ortholog"> <i>Saccharomyces cerevisiae</i></label>
<label><input name="D_melanogaster_ortholog" type="checkbox" id="D_melanogaster_ortholog"> <i>Drosophila melanogaster</i></label>
<label><input name="D_rerio_ortholog" type="checkbox" id="D_rerio_ortholog"> <i>Danio rerio</i></label>
<label><input name="M_musculus_ortholog" type="checkbox" id="M_musculus_ortholog"> <i>Mus musculus</i></label>
<label><input name="H_sapiens_ortholog" type="checkbox" id="H_sapiens_ortholog"> <i>Homo sapiens</i></label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button type="reset">Clear</button>
<button type="submit" id="search-button" disabled>Search</button>
</div>
</div>
</div>
<!-- Main JavaScript file -->
<script src="script.js"></script>
<!-- Autosuggest JavaScript files -->
<script src="javascript/autosuggest_list_domains.js"></script>
</body>
</html>