-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
110 lines (107 loc) · 4.4 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Haddock3 ui components - ClusterTable example</title>
<link href="https://esm.sh/@i-vresse/haddock3-ui/dist/index.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script id="datatable2" type="application/json">
{
"clusters": [
{
"rank": 1,
"id": 1,
"size": 5,
"score": { "mean": -5.86, "std": 1.54 },
"irmsd": { "mean": 1.81, "std": 0.53 },
"fnat": { "mean": 0.57, "std": 0.24 },
"lrmsd": { "mean": 5.07, "std": 2.25 },
"dockq": { "mean": 0.58, "std": 0.18 },
"air": { "mean": 847.55, "std": 208.47 },
"desolv": { "mean": 11.67, "std": 3.46 },
"elec": { "mean": -9.69, "std": 3.32 },
"vdw": { "mean": -2.98, "std": 9.17 },
"ilrmsd": { "mean": -2.98, "std": 9.17 },
"bsa": { "mean": -2.98, "std": 9.17 },
"best1": "https://files.rcsb.org/download/2OOB.pdb.gz",
"best2": "https://files.rcsb.org/download/2OOA.pdb.gz",
"best3": "https://files.rcsb.org/download/2OOA.pdb.gz",
"best4": "https://files.rcsb.org/download/2OOA.pdb.gz"
},
{
"rank": 2,
"id": 2,
"size": 10,
"score": { "mean": -6.12, "std": 1.23 },
"irmsd": { "mean": 1.23, "std": 0.57 },
"fnat": { "mean": 0.46, "std": 0.79 },
"lrmsd": { "mean": 4.32, "std": 2.35 },
"dockq": { "mean": 0.99, "std": 0.65 },
"air": { "mean": 765.43, "std": 321.1 },
"desolv": { "mean": 9.88, "std": 5.43 },
"elec": { "mean": -8.77, "std": 4.32 },
"vdw": { "mean": -1.23, "std": 8.77 },
"ilrmsd": { "mean": -1.34, "std": 0 },
"bsa": { "mean": -2.978, "std": 0 },
"best1": "https://files.rcsb.org/download/2OOB.pdb.gz",
"best2": "https://files.rcsb.org/download/2OOA.pdb.gz",
"best3": "https://files.rcsb.org/download/2OOA.pdb.gz",
"best4": ""
}
],
"headers": [
{ "key": "id", "label": "ID" },
{ "key": "rank", "label": "Rank", "sorted": "asc" },
{ "key": "size", "label": "Size" },
{ "key": "score", "label": "HADDOCK score [a.u.]", "type": "stats" },
{ "key": "vdw", "label": "Van der Waals Energy", "type": "stats" },
{ "key": "elec", "label": "Electrostatic Energy", "type": "stats" },
{ "key": "air", "label": "Restraints Energy", "type": "stats" },
{ "key": "desolv", "label": "Desolvation Energy", "type": "stats" },
{ "key": "irmsd", "label": "interface RMSD [A]", "type": "stats" },
{ "key": "lrmsd", "label": "ligand RMSD [A]", "type": "stats" },
{ "key": "ilrmsd", "label": "interface-ligand RMSD [A]", "type": "stats" },
{ "key": "fnat", "label": "Fraction of Common Contacts", "type": "stats" },
{ "key": "dockq", "label": "DOCKQ", "type": "stats" },
{ "key": "bsa", "label": "Buried Surface Area [A^2]", "type": "stats" },
{
"key": "best1",
"label": "Nr 01 best structure",
"type": "structure",
"sortable": false
},
{
"key": "best2",
"label": "Nr 02 best structure",
"type": "structure",
"sortable": false
},
{
"key": "best3",
"label": "Nr 03 best structure",
"type": "structure",
"sortable": false
},
{
"key": "best4",
"label": "Nr 04 best structure",
"type": "structure",
"sortable": false
}
]
}
</script>
<script type="module">
import { renderClusterTable } from "https://esm.sh/@i-vresse/haddock3-ui/dist/report?bundle-deps";
// Instead of esm.sh you could also use the report.bundle.js file from a CDN or your own server
// import { renderClusterTable } from "https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui/dist/report.bundle.js";
// import { renderClusterTable } from "https://your-own-server.com/haddock3-ui/dist/report.bundle.js";
// Note that report.bundle.js only includes the components needed for haddock3 analysis report
// The css file can be imported in a similar way
const props = JSON.parse(document.getElementById("datatable2").text)
renderClusterTable(document.getElementById("root"), props.headers, props.clusters);
</script>
</body>
</html>