Hugging Face's logo

Spaces:
katielink
/
pdb-protvista
Running

App Files Community
katielink commited on
Commit
ffa70f2
•
1 Parent(s): 56fa79a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +276 -16
index.html CHANGED
@@ -1,19 +1,279 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+
4
+ <head>
5
+
6
+ <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all"/>
7
+ <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
8
+ <script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/protvista-pdb-3.3.0.js"></script>
9
+
10
+ </head>
11
+
12
+ <body>
13
+ <h4>ProtVista PDB custom data demo</h4>
14
+
15
+ <div>
16
+ <protvista-pdb custom-data="true" id="pv1"></protvista-pdb>
17
+ </div>
18
+
19
+ <script>
20
+ document.addEventListener('DOMContentLoaded', () => {
21
+
22
+ //Get web-component element
23
+ const pvInstance = document.getElementById('pv1');
24
+ if(!pvInstance) return;
25
+ (async () => {
26
+
27
+ // PDBe sequence conservation api data
28
+ let scFetch = await fetch('https://www.ebi.ac.uk/pdbe/graph-api/uniprot/sequence_conservation/P29373');
29
+ let scResponseData = await scFetch.json();
30
+ const seqConservationData = scResponseData;
31
+ // seqConservationData is a json array with following fields. Please refer the fetch api url for the data struture
32
+ // [
33
+ // {
34
+ // "start": 1,
35
+ // "end": 1,
36
+ // "conservation_score": 1,
37
+ // "tooltipContent": "Conservation score: 1",
38
+ // "amino": [
39
+ // {
40
+ // "end": 1,
41
+ // "letter": "P",
42
+ // "proba": 0.428,
43
+ // "start": 1,
44
+ // "color": "#c0c000",
45
+ // "tooltipContent": "Amino acid: PRO<br/>Probability: 42.80%"
46
+ // },...
47
+ // ]
48
+ // }...
49
+ // ]
50
+
51
+ // PDBe variation api data
52
+ let vrFetch = await fetch('https://www.ebi.ac.uk/pdbe/graph-api/uniprot/protvista/variation/P29373');
53
+ let vrResponseData = await vrFetch.json();
54
+ const variationData = vrResponseData;
55
+ // variationData is a json with following fields. Please refer the fetch api url for the data struture
56
+ // {
57
+ // "sequence": "PNFSGNWKIIRSENFEELLKVLGVNVMLRKIAVAAASKPAVEIKQEGDTFYIKTSTTVRTTEINFKVGEEFEEQTVDGRPCKSLVKWESENKMVCEQKLLKGEGPKTSWTRELTNDGELILTMTADDVVCTRVYVRE",
58
+ // "variants": [
59
+ // {
60
+ // "accession": "NC_000001.11:g.156705439T>C",
61
+ // "association": [],
62
+ // "clinicalSignificances": null,
63
+ // "color": "#002594",
64
+ // "end": "2",
65
+ // "polyphenScore": 0.003,
66
+ // "siftScore": 0.055,
67
+ // "sourceType": "large_scale_study",
68
+ // "start": "2",
69
+ // "tooltipContent": "XYZ Variant",
70
+ // "variant": "S",
71
+ // "xrefNames": [
72
+ // "gnomAD"
73
+ // ],
74
+ // "keywords": [ // Keywords are used to filter the variats
75
+ // "predicted",
76
+ // "large_scale_studies"
77
+ // ]
78
+ // },...
79
+ // ]
80
+ // }
81
+
82
+
83
+ //Custom data model
84
+ const customData = {
85
+ displayNavigation: true, // Set to false to hide navigation scale
86
+ displaySequence: true, // Set to false to hide sequence track
87
+ sequence: 'MPNFSGNWKIIRSENFEELLKVLGVNVMLRKIAVAAASKPAVEIKQEGDTFYIKTSTTVRTTEINFKVGEEFEEQTVDGRPCKSLVKWESENKMVCEQKLLKGEGPKTSWTRELTNDGELILTMTADDVVCTRVYVRE', //Protein sequence
88
+ length: 138, // Length of the sequence
89
+ offset: 1, // Offset navigation scale start. Example offset:10 will display the navigation start from 10 instead of default 1.
90
+ tracks: [ // Array of track objects (PDBe implementation extends core ProtVista track component. Refer - https://github.com/ebi-webcomponents/nightingale/tree/master/packages/protvista-track#data-array for all the supported track properties )
91
+ {
92
+ label: "Domains", // Track label
93
+ labelType: "text", // Supported values 'text' and 'html'
94
+ data: [
95
+ {
96
+ accession: "d1", // Some unique id
97
+ type: "UniProt range", // Displayed in tooltip title
98
+ label: "Domain 1", // Expected values 'text' and 'html'
99
+ labelTooltip: "Residues mapped to domain 1", // Label tooltip content. Support text and HTML mark-up
100
+ locations: [ // Array of sub-tracks
101
+ {
102
+ fragments : [ // Array of sub-track fragments
103
+ {
104
+ start: 1, // Track start value
105
+ end: 56, // Track end value
106
+ tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56", // track tooltip content. Support text and HTML mark-up
107
+ color: "rgb(135,158,247)" // track (fragment) colour, supported rgb and hex code value
108
+ },
109
+ {
110
+ start: 70,
111
+ end: 130,
112
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130",
113
+ color: "rgb(160,174,232)"
114
+ }
115
+ ]
116
+ }
117
+ ]
118
+ },
119
+ {
120
+ accession: "d2",
121
+ type: "UniProt range",
122
+ label: "<div><i class='icon icon-generic' data-icon=';' style='color: #000;'></i> <a href='resource.xyz'>Domain 2</a></div>", //HTML strcutured label with font-icons. You can add any HTML markup.
123
+ labelTooltip: "<strong>Domain Compound</strong><br><img src='https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/REA_200.svg'>", // labelTooltip HTML mark-up example displaying compound image in the tooltip.
124
+ locations: [
125
+ {
126
+ fragments : [
127
+ {
128
+ start: 1,
129
+ end: 20,
130
+ tooltipContent: "<strong>Type: domain 2</strong><br>Range: XY1 - XYZ20<br><a href='resource.xyz' style='color:blue'>view details</a>", // tooltipContent HTML mark-up example
131
+ color: "rgb(107,119,39)"
132
+ },
133
+ {
134
+ start: 22,
135
+ end: 137,
136
+ tooltipContent: "Type: domain 2<br>Range: XYZ22 - XYZ137",
137
+ color: "rgb(90,102,23)"
138
+ }
139
+ ]
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+
145
+ },
146
+ {
147
+ label: "Annotations",
148
+ labelType: "text",
149
+ labelColor: "rgb(128,128,128)", // Set labelColor to change label background colour
150
+ data: [
151
+ {
152
+ accession: "a1",
153
+ type: "UniProt range",
154
+ label: "Annotations 1",
155
+ labelType: "text",
156
+ labelTooltip: "Residues mapped to annotations 1",
157
+ labelColor: "rgb(211,211,211)",
158
+ color: "rgb(255,99,163)",
159
+ locations: [
160
+ {
161
+ fragments : [
162
+ {
163
+ start: 1,
164
+ end: 56,
165
+ tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56"
166
+ },
167
+ {
168
+ start: 70,
169
+ end: 130,
170
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
171
+ }
172
+ ]
173
+ }
174
+ ]
175
+ }
176
+ ]
177
+
178
+ },
179
+ {
180
+ label: "Annotation shapes",
181
+ data: [
182
+ {
183
+ accession: "s1",
184
+ type: "UniProt range",
185
+ label: "Circle",
186
+ color: "rgb(249,166,2)",
187
+ shape: 'circle', // supported shapes rectangle|bridge|diamond|chevron|catFace|triangle|wave|hexagon|pentagon|circle|arrow|doubleBar,
188
+ locations: [
189
+ {
190
+ fragments : [
191
+ {
192
+ start: 5,
193
+ end: 5,
194
+ tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56",
195
+ },
196
+ {
197
+ start: 9,
198
+ end: 9,
199
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
200
+ }
201
+ ]
202
+ }
203
+ ]
204
+ },
205
+ {
206
+ accession: "s2",
207
+ type: "UniProt range",
208
+ label: "Diamond",
209
+ shape: 'diamond',
210
+ color: "rgb(255,99,163)", // Default colour value for all fragments in this track
211
+ locations: [
212
+ {
213
+ fragments : [
214
+ {
215
+ start: 5,
216
+ end: 5,
217
+ tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56"
218
+ },
219
+ {
220
+ start: 9,
221
+ end: 9,
222
+ color: "rgb(0,128,129)", // Set colour here for individual shape fragment. This will override the track default colour.
223
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
224
+ },
225
+ {
226
+ start: 20,
227
+ end: 20,
228
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
229
+ },
230
+ {
231
+ start: 22,
232
+ end: 22,
233
+ tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
234
+ }
235
+ ]
236
+ }
237
+ ]
238
+ }
239
+ ]
240
+
241
+ }
242
+ ],
243
+ sequenceConservation: seqConservationData, // Set this property to display your own sequence conservation data. Refer comments at the top for data structure.
244
+ variants: variationData, // Set this property to display your own variation data. Refer comments at the top for data structure.
245
+ legends: {
246
+ alignment: 'right', // expected values 'left', 'right' or 'center'
247
+ data: { // Legend Row, key is used as the row label
248
+ "Domains": [ // legends for Domains row
249
+ {
250
+ color: ["rgb(135,158,247)", "rgb(160,174,232)"], // legend color, supported rgb and hex code value
251
+ text: "Domains 1" // legend text
252
+ },
253
+ {
254
+ color: ["rgb(107,119,39)", "rgb(90,102,23)"],
255
+ text: "Domains 2"
256
+ }
257
+ ],
258
+ "Annotations": [ // legends for Annotation row row
259
+ {
260
+ color: ["rgb(255,99,163)"],
261
+ text: "Custom Annotations"
262
+ }
263
+ ]
264
+ }
265
+ }
266
+ };
267
+
268
+ // Assign custom data object to instance viewerdata property
269
+ pvInstance.viewerdata = customData;
270
+
271
+ })();
272
+
273
+ });
274
+ </script>
275
+
276
+
277
+ </body>
278
+
279
  </html>