Spaces:
Running
Running
Upload folder using huggingface_hub
Browse files- README.md +16 -6
- app.py +16 -6
- space.py +16 -6
- src/README.md +16 -6
- src/backend/gradio_molecule3d/templates/component/index.js +0 -0
- src/backend/gradio_molecule3d/templates/component/style.css +0 -0
- src/demo/app.py +16 -6
- src/demo/space.py +16 -6
- src/frontend/Index.svelte +15 -0
- src/frontend/shared/MolecularViewer.svelte +147 -3
- src/pyproject.toml +1 -1
README.md
CHANGED
@@ -36,12 +36,13 @@ reps = [
|
|
36 |
"model": 0,
|
37 |
"chain": "",
|
38 |
"resname": "",
|
39 |
-
"style": "
|
40 |
-
"color": "
|
41 |
-
"residue_range": "",
|
42 |
"around": 0,
|
43 |
"byres": False,
|
44 |
-
"visible": False
|
|
|
45 |
}
|
46 |
]
|
47 |
|
@@ -52,11 +53,19 @@ def predict(x):
|
|
52 |
print(x.name)
|
53 |
return x
|
54 |
|
|
|
|
|
|
|
|
|
|
|
55 |
with gr.Blocks() as demo:
|
56 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
57 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
58 |
out = Molecule3D(label="Output", reps=reps)
|
59 |
-
|
60 |
btn = gr.Button("Predict")
|
61 |
gr.Markdown("""
|
62 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -68,7 +77,8 @@ with gr.Blocks() as demo:
|
|
68 |
"color": "whiteCarbon",
|
69 |
"residue_range": "",
|
70 |
"around": 0,
|
71 |
-
"
|
|
|
72 |
},
|
73 |
{
|
74 |
"model": 0,
|
|
|
36 |
"model": 0,
|
37 |
"chain": "",
|
38 |
"resname": "",
|
39 |
+
"style": "cartoon",
|
40 |
+
"color": "hydrophobicity",
|
41 |
+
# "residue_range": "",
|
42 |
"around": 0,
|
43 |
"byres": False,
|
44 |
+
# "visible": False,
|
45 |
+
# "opacity": 0.5
|
46 |
}
|
47 |
]
|
48 |
|
|
|
53 |
print(x.name)
|
54 |
return x
|
55 |
|
56 |
+
# def update_color(mol, color):
|
57 |
+
# reps[0]['color'] = color
|
58 |
+
# print(reps)
|
59 |
+
# return Molecule3D(mol, reps=reps)
|
60 |
+
|
61 |
with gr.Blocks() as demo:
|
62 |
gr.Markdown("# Molecule3D")
|
63 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
64 |
+
|
65 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
66 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
67 |
out = Molecule3D(label="Output", reps=reps)
|
68 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
69 |
btn = gr.Button("Predict")
|
70 |
gr.Markdown("""
|
71 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
77 |
"color": "whiteCarbon",
|
78 |
"residue_range": "",
|
79 |
"around": 0,
|
80 |
+
"opacity":1
|
81 |
+
|
82 |
},
|
83 |
{
|
84 |
"model": 0,
|
app.py
CHANGED
@@ -11,12 +11,13 @@ reps = [
|
|
11 |
"model": 0,
|
12 |
"chain": "",
|
13 |
"resname": "",
|
14 |
-
"style": "
|
15 |
-
"color": "
|
16 |
-
"residue_range": "",
|
17 |
"around": 0,
|
18 |
"byres": False,
|
19 |
-
"visible": False
|
|
|
20 |
}
|
21 |
]
|
22 |
|
@@ -27,11 +28,19 @@ def predict(x):
|
|
27 |
print(x.name)
|
28 |
return x
|
29 |
|
|
|
|
|
|
|
|
|
|
|
30 |
with gr.Blocks() as demo:
|
31 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
32 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
33 |
out = Molecule3D(label="Output", reps=reps)
|
34 |
-
|
35 |
btn = gr.Button("Predict")
|
36 |
gr.Markdown("""
|
37 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -43,7 +52,8 @@ with gr.Blocks() as demo:
|
|
43 |
"color": "whiteCarbon",
|
44 |
"residue_range": "",
|
45 |
"around": 0,
|
46 |
-
"
|
|
|
47 |
},
|
48 |
{
|
49 |
"model": 0,
|
|
|
11 |
"model": 0,
|
12 |
"chain": "",
|
13 |
"resname": "",
|
14 |
+
"style": "cartoon",
|
15 |
+
"color": "hydrophobicity",
|
16 |
+
# "residue_range": "",
|
17 |
"around": 0,
|
18 |
"byres": False,
|
19 |
+
# "visible": False,
|
20 |
+
# "opacity": 0.5
|
21 |
}
|
22 |
]
|
23 |
|
|
|
28 |
print(x.name)
|
29 |
return x
|
30 |
|
31 |
+
# def update_color(mol, color):
|
32 |
+
# reps[0]['color'] = color
|
33 |
+
# print(reps)
|
34 |
+
# return Molecule3D(mol, reps=reps)
|
35 |
+
|
36 |
with gr.Blocks() as demo:
|
37 |
gr.Markdown("# Molecule3D")
|
38 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
39 |
+
|
40 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
41 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
42 |
out = Molecule3D(label="Output", reps=reps)
|
43 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
44 |
btn = gr.Button("Predict")
|
45 |
gr.Markdown("""
|
46 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
52 |
"color": "whiteCarbon",
|
53 |
"residue_range": "",
|
54 |
"around": 0,
|
55 |
+
"opacity":1
|
56 |
+
|
57 |
},
|
58 |
{
|
59 |
"model": 0,
|
space.py
CHANGED
@@ -51,12 +51,13 @@ reps = [
|
|
51 |
"model": 0,
|
52 |
"chain": "",
|
53 |
"resname": "",
|
54 |
-
"style": "
|
55 |
-
"color": "
|
56 |
-
"residue_range": "",
|
57 |
"around": 0,
|
58 |
"byres": False,
|
59 |
-
"visible": False
|
|
|
60 |
}
|
61 |
]
|
62 |
|
@@ -67,11 +68,19 @@ def predict(x):
|
|
67 |
print(x.name)
|
68 |
return x
|
69 |
|
|
|
|
|
|
|
|
|
|
|
70 |
with gr.Blocks() as demo:
|
71 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
72 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
73 |
out = Molecule3D(label="Output", reps=reps)
|
74 |
-
|
75 |
btn = gr.Button("Predict")
|
76 |
gr.Markdown(\"\"\"
|
77 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -83,7 +92,8 @@ with gr.Blocks() as demo:
|
|
83 |
"color": "whiteCarbon",
|
84 |
"residue_range": "",
|
85 |
"around": 0,
|
86 |
-
"
|
|
|
87 |
},
|
88 |
{
|
89 |
"model": 0,
|
|
|
51 |
"model": 0,
|
52 |
"chain": "",
|
53 |
"resname": "",
|
54 |
+
"style": "cartoon",
|
55 |
+
"color": "hydrophobicity",
|
56 |
+
# "residue_range": "",
|
57 |
"around": 0,
|
58 |
"byres": False,
|
59 |
+
# "visible": False,
|
60 |
+
# "opacity": 0.5
|
61 |
}
|
62 |
]
|
63 |
|
|
|
68 |
print(x.name)
|
69 |
return x
|
70 |
|
71 |
+
# def update_color(mol, color):
|
72 |
+
# reps[0]['color'] = color
|
73 |
+
# print(reps)
|
74 |
+
# return Molecule3D(mol, reps=reps)
|
75 |
+
|
76 |
with gr.Blocks() as demo:
|
77 |
gr.Markdown("# Molecule3D")
|
78 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
79 |
+
|
80 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
81 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
82 |
out = Molecule3D(label="Output", reps=reps)
|
83 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
84 |
btn = gr.Button("Predict")
|
85 |
gr.Markdown(\"\"\"
|
86 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
92 |
"color": "whiteCarbon",
|
93 |
"residue_range": "",
|
94 |
"around": 0,
|
95 |
+
"opacity":1
|
96 |
+
|
97 |
},
|
98 |
{
|
99 |
"model": 0,
|
src/README.md
CHANGED
@@ -36,12 +36,13 @@ reps = [
|
|
36 |
"model": 0,
|
37 |
"chain": "",
|
38 |
"resname": "",
|
39 |
-
"style": "
|
40 |
-
"color": "
|
41 |
-
"residue_range": "",
|
42 |
"around": 0,
|
43 |
"byres": False,
|
44 |
-
"visible": False
|
|
|
45 |
}
|
46 |
]
|
47 |
|
@@ -52,11 +53,19 @@ def predict(x):
|
|
52 |
print(x.name)
|
53 |
return x
|
54 |
|
|
|
|
|
|
|
|
|
|
|
55 |
with gr.Blocks() as demo:
|
56 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
57 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
58 |
out = Molecule3D(label="Output", reps=reps)
|
59 |
-
|
60 |
btn = gr.Button("Predict")
|
61 |
gr.Markdown("""
|
62 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -68,7 +77,8 @@ with gr.Blocks() as demo:
|
|
68 |
"color": "whiteCarbon",
|
69 |
"residue_range": "",
|
70 |
"around": 0,
|
71 |
-
"
|
|
|
72 |
},
|
73 |
{
|
74 |
"model": 0,
|
|
|
36 |
"model": 0,
|
37 |
"chain": "",
|
38 |
"resname": "",
|
39 |
+
"style": "cartoon",
|
40 |
+
"color": "hydrophobicity",
|
41 |
+
# "residue_range": "",
|
42 |
"around": 0,
|
43 |
"byres": False,
|
44 |
+
# "visible": False,
|
45 |
+
# "opacity": 0.5
|
46 |
}
|
47 |
]
|
48 |
|
|
|
53 |
print(x.name)
|
54 |
return x
|
55 |
|
56 |
+
# def update_color(mol, color):
|
57 |
+
# reps[0]['color'] = color
|
58 |
+
# print(reps)
|
59 |
+
# return Molecule3D(mol, reps=reps)
|
60 |
+
|
61 |
with gr.Blocks() as demo:
|
62 |
gr.Markdown("# Molecule3D")
|
63 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
64 |
+
|
65 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
66 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
67 |
out = Molecule3D(label="Output", reps=reps)
|
68 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
69 |
btn = gr.Button("Predict")
|
70 |
gr.Markdown("""
|
71 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
77 |
"color": "whiteCarbon",
|
78 |
"residue_range": "",
|
79 |
"around": 0,
|
80 |
+
"opacity":1
|
81 |
+
|
82 |
},
|
83 |
{
|
84 |
"model": 0,
|
src/backend/gradio_molecule3d/templates/component/index.js
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/backend/gradio_molecule3d/templates/component/style.css
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/demo/app.py
CHANGED
@@ -11,12 +11,13 @@ reps = [
|
|
11 |
"model": 0,
|
12 |
"chain": "",
|
13 |
"resname": "",
|
14 |
-
"style": "
|
15 |
-
"color": "
|
16 |
-
"residue_range": "",
|
17 |
"around": 0,
|
18 |
"byres": False,
|
19 |
-
"visible": False
|
|
|
20 |
}
|
21 |
]
|
22 |
|
@@ -27,11 +28,19 @@ def predict(x):
|
|
27 |
print(x.name)
|
28 |
return x
|
29 |
|
|
|
|
|
|
|
|
|
|
|
30 |
with gr.Blocks() as demo:
|
31 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
32 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
33 |
out = Molecule3D(label="Output", reps=reps)
|
34 |
-
|
35 |
btn = gr.Button("Predict")
|
36 |
gr.Markdown("""
|
37 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -43,7 +52,8 @@ with gr.Blocks() as demo:
|
|
43 |
"color": "whiteCarbon",
|
44 |
"residue_range": "",
|
45 |
"around": 0,
|
46 |
-
"
|
|
|
47 |
},
|
48 |
{
|
49 |
"model": 0,
|
|
|
11 |
"model": 0,
|
12 |
"chain": "",
|
13 |
"resname": "",
|
14 |
+
"style": "cartoon",
|
15 |
+
"color": "hydrophobicity",
|
16 |
+
# "residue_range": "",
|
17 |
"around": 0,
|
18 |
"byres": False,
|
19 |
+
# "visible": False,
|
20 |
+
# "opacity": 0.5
|
21 |
}
|
22 |
]
|
23 |
|
|
|
28 |
print(x.name)
|
29 |
return x
|
30 |
|
31 |
+
# def update_color(mol, color):
|
32 |
+
# reps[0]['color'] = color
|
33 |
+
# print(reps)
|
34 |
+
# return Molecule3D(mol, reps=reps)
|
35 |
+
|
36 |
with gr.Blocks() as demo:
|
37 |
gr.Markdown("# Molecule3D")
|
38 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
39 |
+
|
40 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
41 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
42 |
out = Molecule3D(label="Output", reps=reps)
|
43 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
44 |
btn = gr.Button("Predict")
|
45 |
gr.Markdown("""
|
46 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
52 |
"color": "whiteCarbon",
|
53 |
"residue_range": "",
|
54 |
"around": 0,
|
55 |
+
"opacity":1
|
56 |
+
|
57 |
},
|
58 |
{
|
59 |
"model": 0,
|
src/demo/space.py
CHANGED
@@ -51,12 +51,13 @@ reps = [
|
|
51 |
"model": 0,
|
52 |
"chain": "",
|
53 |
"resname": "",
|
54 |
-
"style": "
|
55 |
-
"color": "
|
56 |
-
"residue_range": "",
|
57 |
"around": 0,
|
58 |
"byres": False,
|
59 |
-
"visible": False
|
|
|
60 |
}
|
61 |
]
|
62 |
|
@@ -67,11 +68,19 @@ def predict(x):
|
|
67 |
print(x.name)
|
68 |
return x
|
69 |
|
|
|
|
|
|
|
|
|
|
|
70 |
with gr.Blocks() as demo:
|
71 |
gr.Markdown("# Molecule3D")
|
|
|
|
|
72 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
|
|
73 |
out = Molecule3D(label="Output", reps=reps)
|
74 |
-
|
75 |
btn = gr.Button("Predict")
|
76 |
gr.Markdown(\"\"\"
|
77 |
You can configure the default rendering of the molecule by adding a list of representations
|
@@ -83,7 +92,8 @@ with gr.Blocks() as demo:
|
|
83 |
"color": "whiteCarbon",
|
84 |
"residue_range": "",
|
85 |
"around": 0,
|
86 |
-
"
|
|
|
87 |
},
|
88 |
{
|
89 |
"model": 0,
|
|
|
51 |
"model": 0,
|
52 |
"chain": "",
|
53 |
"resname": "",
|
54 |
+
"style": "cartoon",
|
55 |
+
"color": "hydrophobicity",
|
56 |
+
# "residue_range": "",
|
57 |
"around": 0,
|
58 |
"byres": False,
|
59 |
+
# "visible": False,
|
60 |
+
# "opacity": 0.5
|
61 |
}
|
62 |
]
|
63 |
|
|
|
68 |
print(x.name)
|
69 |
return x
|
70 |
|
71 |
+
# def update_color(mol, color):
|
72 |
+
# reps[0]['color'] = color
|
73 |
+
# print(reps)
|
74 |
+
# return Molecule3D(mol, reps=reps)
|
75 |
+
|
76 |
with gr.Blocks() as demo:
|
77 |
gr.Markdown("# Molecule3D")
|
78 |
+
# color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
|
79 |
+
|
80 |
inp = Molecule3D(label="Molecule3D", reps=reps)
|
81 |
+
# cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
|
82 |
out = Molecule3D(label="Output", reps=reps)
|
83 |
+
# cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
|
84 |
btn = gr.Button("Predict")
|
85 |
gr.Markdown(\"\"\"
|
86 |
You can configure the default rendering of the molecule by adding a list of representations
|
|
|
92 |
"color": "whiteCarbon",
|
93 |
"residue_range": "",
|
94 |
"around": 0,
|
95 |
+
"opacity":1
|
96 |
+
|
97 |
},
|
98 |
{
|
99 |
"model": 0,
|
src/frontend/Index.svelte
CHANGED
@@ -62,6 +62,17 @@
|
|
62 |
retrieveContent(value);
|
63 |
}
|
64 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 |
let dragging = false;
|
66 |
let pending_upload = false;
|
67 |
|
@@ -102,6 +113,10 @@
|
|
102 |
"spectrum",
|
103 |
],
|
104 |
},
|
|
|
|
|
|
|
|
|
105 |
residue_range: {
|
106 |
type: String,
|
107 |
default: "",
|
|
|
62 |
retrieveContent(value);
|
63 |
}
|
64 |
|
65 |
+
$: if (JSON.stringify(reps) !== JSON.stringify(reps)) {
|
66 |
+
gradio.dispatch("change");
|
67 |
+
old_value = value;
|
68 |
+
|
69 |
+
// console.log("reps changed");
|
70 |
+
// console.log(reps);
|
71 |
+
|
72 |
+
moldata = null;
|
73 |
+
retrieveContent(value);
|
74 |
+
}
|
75 |
+
|
76 |
let dragging = false;
|
77 |
let pending_upload = false;
|
78 |
|
|
|
113 |
"spectrum",
|
114 |
],
|
115 |
},
|
116 |
+
opacity: {
|
117 |
+
type: Number,
|
118 |
+
default: 1,
|
119 |
+
},
|
120 |
residue_range: {
|
121 |
type: String,
|
122 |
default: "",
|
src/frontend/shared/MolecularViewer.svelte
CHANGED
@@ -2,7 +2,7 @@
|
|
2 |
import * as mol from "3dmol/build/3Dmol.js";
|
3 |
let TDmol = mol;
|
4 |
|
5 |
-
import { onMount, onDestroy } from "svelte";
|
6 |
|
7 |
let viewer;
|
8 |
export let confidenceLabel = null;
|
@@ -70,6 +70,7 @@
|
|
70 |
around: 0,
|
71 |
byres: false,
|
72 |
visible: true,
|
|
|
73 |
});
|
74 |
representations = representations;
|
75 |
}
|
@@ -94,6 +95,69 @@
|
|
94 |
return "Blue";
|
95 |
}
|
96 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
97 |
let view;
|
98 |
|
99 |
function resetZoom(rep) {
|
@@ -125,11 +189,16 @@
|
|
125 |
|
126 |
if (rep.color === "alphafold") {
|
127 |
colorObj = { colorfunc: colorAlpha };
|
|
|
|
|
128 |
} else if (rep.color == "spectrum") {
|
129 |
colorObj = { color: "spectrum" };
|
130 |
} else {
|
131 |
colorObj = { colorscheme: rep.color };
|
132 |
}
|
|
|
|
|
|
|
133 |
let selObj = { model: rep.model };
|
134 |
if (rep.chain !== "") {
|
135 |
selObj.chain = rep.chain;
|
@@ -151,7 +220,6 @@
|
|
151 |
}
|
152 |
|
153 |
if (rep.style === "surface") {
|
154 |
-
colorObj.opacity = 0.8;
|
155 |
view.addSurface(TDmol.SurfaceType.VDW, colorObj, selObj);
|
156 |
} else {
|
157 |
try {
|
@@ -197,7 +265,6 @@
|
|
197 |
}
|
198 |
});
|
199 |
representations = uniqueReps;
|
200 |
-
console.log(moldata);
|
201 |
if (moldata.length > 0) {
|
202 |
moldata.forEach((element) => {
|
203 |
if (element.asFrames) {
|
@@ -217,6 +284,9 @@
|
|
217 |
if (rep.color === "alphafold") {
|
218 |
anyColorAlphaFold = true;
|
219 |
}
|
|
|
|
|
|
|
220 |
});
|
221 |
|
222 |
if (labelHover) {
|
@@ -259,6 +329,11 @@
|
|
259 |
}
|
260 |
});
|
261 |
|
|
|
|
|
|
|
|
|
|
|
262 |
$: applyStyles(representations);
|
263 |
let hasFrames = false;
|
264 |
$: {
|
@@ -279,6 +354,16 @@
|
|
279 |
}
|
280 |
});
|
281 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
282 |
function toggleAnimation() {
|
283 |
console.log(view.isAnimated());
|
284 |
if (isAnimated) {
|
@@ -422,6 +507,36 @@
|
|
422 |
</div>
|
423 |
{/if}
|
424 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
425 |
{#if hasFrames}
|
426 |
<div
|
427 |
class="absolute z-50 bottom-0 right-0 mr-2 flex divide-x border border-gray-200 mb-2 rounded items-center justify-center"
|
@@ -794,6 +909,24 @@
|
|
794 |
<option value="sphere">Sphere</option>
|
795 |
</select>
|
796 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
797 |
<div
|
798 |
class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
|
799 |
>
|
@@ -813,6 +946,7 @@
|
|
813 |
<input type="text" bind:value={rep.around} class="w-8" />
|
814 |
<div>Å</div>
|
815 |
</div>
|
|
|
816 |
<div
|
817 |
class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
|
818 |
>
|
@@ -903,6 +1037,14 @@
|
|
903 |
>
|
904 |
AlphaFold
|
905 |
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
906 |
<button
|
907 |
class={rep.color === "default"
|
908 |
? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
|
@@ -919,6 +1061,8 @@
|
|
919 |
>
|
920 |
Jmol
|
921 |
</button>
|
|
|
|
|
922 |
<button
|
923 |
class={rep.color === "chain"
|
924 |
? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
|
|
|
2 |
import * as mol from "3dmol/build/3Dmol.js";
|
3 |
let TDmol = mol;
|
4 |
|
5 |
+
import { onMount, onDestroy, beforeUpdate } from "svelte";
|
6 |
|
7 |
let viewer;
|
8 |
export let confidenceLabel = null;
|
|
|
70 |
around: 0,
|
71 |
byres: false,
|
72 |
visible: true,
|
73 |
+
opacity: 1,
|
74 |
});
|
75 |
representations = representations;
|
76 |
}
|
|
|
95 |
return "Blue";
|
96 |
}
|
97 |
};
|
98 |
+
|
99 |
+
let colorHydrophobicity = function (atom) {
|
100 |
+
let kyte_doolittle = {
|
101 |
+
ILE: 4.5,
|
102 |
+
VAL: 4.2,
|
103 |
+
LEU: 3.8,
|
104 |
+
PHE: 2.8,
|
105 |
+
CYS: 2.5,
|
106 |
+
MET: 1.9,
|
107 |
+
ALA: 1.8,
|
108 |
+
GLY: -0.4,
|
109 |
+
THR: -0.7,
|
110 |
+
SER: -0.8,
|
111 |
+
TRP: -0.9,
|
112 |
+
TYR: -1.3,
|
113 |
+
PRO: -1.6,
|
114 |
+
HIS: -3.2,
|
115 |
+
GLU: -3.5,
|
116 |
+
GLN: -3.5,
|
117 |
+
ASP: -3.5,
|
118 |
+
ASN: -3.5,
|
119 |
+
LYS: -3.9,
|
120 |
+
ARG: -4.5,
|
121 |
+
};
|
122 |
+
if (atom.resn in kyte_doolittle) {
|
123 |
+
const value = kyte_doolittle[atom.resn];
|
124 |
+
const min = -4.5;
|
125 |
+
const max = 4.5;
|
126 |
+
|
127 |
+
// Normalize the value to a range of 0 to 1
|
128 |
+
const normalized = (value - min) / (max - min);
|
129 |
+
|
130 |
+
// Interpolate colors between DarkCyan, White, and DarkGoldenRod
|
131 |
+
const interpolateColor = (start, end, factor) => {
|
132 |
+
const startRGB = parseInt(start.slice(1), 16);
|
133 |
+
const endRGB = parseInt(end.slice(1), 16);
|
134 |
+
|
135 |
+
const r = Math.round(
|
136 |
+
((endRGB >> 16) - (startRGB >> 16)) * factor + (startRGB >> 16)
|
137 |
+
);
|
138 |
+
const g = Math.round(
|
139 |
+
(((endRGB >> 8) & 0xff) - ((startRGB >> 8) & 0xff)) * factor +
|
140 |
+
((startRGB >> 8) & 0xff)
|
141 |
+
);
|
142 |
+
const b = Math.round(
|
143 |
+
((endRGB & 0xff) - (startRGB & 0xff)) * factor + (startRGB & 0xff)
|
144 |
+
);
|
145 |
+
|
146 |
+
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
147 |
+
};
|
148 |
+
|
149 |
+
if (normalized <= 0.5) {
|
150 |
+
// Interpolate between DarkCyan and White
|
151 |
+
return interpolateColor("#008B8B", "#FFFFFF", normalized * 2);
|
152 |
+
} else {
|
153 |
+
// Interpolate between White and DarkGoldenRod
|
154 |
+
return interpolateColor("#FFFFFF", "#B8860B", (normalized - 0.5) * 2);
|
155 |
+
}
|
156 |
+
} else {
|
157 |
+
return "#FFFFFF"; // White
|
158 |
+
}
|
159 |
+
};
|
160 |
+
|
161 |
let view;
|
162 |
|
163 |
function resetZoom(rep) {
|
|
|
189 |
|
190 |
if (rep.color === "alphafold") {
|
191 |
colorObj = { colorfunc: colorAlpha };
|
192 |
+
} else if (rep.color === "hydrophobicity") {
|
193 |
+
colorObj = { colorfunc: colorHydrophobicity };
|
194 |
} else if (rep.color == "spectrum") {
|
195 |
colorObj = { color: "spectrum" };
|
196 |
} else {
|
197 |
colorObj = { colorscheme: rep.color };
|
198 |
}
|
199 |
+
|
200 |
+
colorObj.opacity = rep.opacity;
|
201 |
+
|
202 |
let selObj = { model: rep.model };
|
203 |
if (rep.chain !== "") {
|
204 |
selObj.chain = rep.chain;
|
|
|
220 |
}
|
221 |
|
222 |
if (rep.style === "surface") {
|
|
|
223 |
view.addSurface(TDmol.SurfaceType.VDW, colorObj, selObj);
|
224 |
} else {
|
225 |
try {
|
|
|
265 |
}
|
266 |
});
|
267 |
representations = uniqueReps;
|
|
|
268 |
if (moldata.length > 0) {
|
269 |
moldata.forEach((element) => {
|
270 |
if (element.asFrames) {
|
|
|
284 |
if (rep.color === "alphafold") {
|
285 |
anyColorAlphaFold = true;
|
286 |
}
|
287 |
+
if (rep.color === "hydrophobicity") {
|
288 |
+
anyColorHydrophobic = true;
|
289 |
+
}
|
290 |
});
|
291 |
|
292 |
if (labelHover) {
|
|
|
329 |
}
|
330 |
});
|
331 |
|
332 |
+
beforeUpdate(() => {
|
333 |
+
console.log("beforeUpdate");
|
334 |
+
console.log(representations);
|
335 |
+
});
|
336 |
+
|
337 |
$: applyStyles(representations);
|
338 |
let hasFrames = false;
|
339 |
$: {
|
|
|
354 |
}
|
355 |
});
|
356 |
}
|
357 |
+
|
358 |
+
let anyColorHydrophobic = false;
|
359 |
+
$: {
|
360 |
+
anyColorHydrophobic = false;
|
361 |
+
representations.forEach((rep) => {
|
362 |
+
if (rep.color === "hydrophobicity") {
|
363 |
+
anyColorHydrophobic = true;
|
364 |
+
}
|
365 |
+
});
|
366 |
+
}
|
367 |
function toggleAnimation() {
|
368 |
console.log(view.isAnimated());
|
369 |
if (isAnimated) {
|
|
|
507 |
</div>
|
508 |
{/if}
|
509 |
|
510 |
+
{#if anyColorHydrophobic}
|
511 |
+
<div class="absolute bottom-0 left-0 z-50 p-2 mb-2 w-full bg-white">
|
512 |
+
<div class="flex text-sm items-center space-x-2 justify-center">
|
513 |
+
<div class="flex space-x-1 py-1 items-center">
|
514 |
+
<a
|
515 |
+
class="cursor-pointer"
|
516 |
+
href="https://pubmed.ncbi.nlm.nih.gov/7108955/"
|
517 |
+
>Kyte & Doolittle hydrophobicity scale:</a
|
518 |
+
>
|
519 |
+
</div>
|
520 |
+
<div class="flex space-x-1 py-1 items-center">
|
521 |
+
<span class="w-4 h-4" style="background-color: #B8860B;"
|
522 |
+
> </span
|
523 |
+
><span class="legendlabel">Hydrophobic</span>
|
524 |
+
</div>
|
525 |
+
<div class="flex space-x-1 py-1 items-center">
|
526 |
+
<span
|
527 |
+
class="w-4 h-4 border border-gray-300"
|
528 |
+
style="background-color: white"> </span
|
529 |
+
><span class="legendlabel">Neutral</span>
|
530 |
+
</div>
|
531 |
+
<div class="flex space-x-1 py-1 items-center">
|
532 |
+
<span class="w-4 h-4" style="background-color: darkcyan;"
|
533 |
+
> </span
|
534 |
+
><span class="legendlabel">Hydrophilic</span>
|
535 |
+
</div>
|
536 |
+
</div>
|
537 |
+
</div>
|
538 |
+
{/if}
|
539 |
+
|
540 |
{#if hasFrames}
|
541 |
<div
|
542 |
class="absolute z-50 bottom-0 right-0 mr-2 flex divide-x border border-gray-200 mb-2 rounded items-center justify-center"
|
|
|
909 |
<option value="sphere">Sphere</option>
|
910 |
</select>
|
911 |
</div>
|
912 |
+
<div
|
913 |
+
class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
|
914 |
+
>
|
915 |
+
<div class="">Opacity</div>
|
916 |
+
<input
|
917 |
+
id="around"
|
918 |
+
type="range"
|
919 |
+
value={rep.opacity}
|
920 |
+
min="0"
|
921 |
+
max="1"
|
922 |
+
step="0.1"
|
923 |
+
on:change={(event) => {
|
924 |
+
rep.opacity = event.target.value;
|
925 |
+
}}
|
926 |
+
class="h-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
927 |
+
/>
|
928 |
+
<input type="text" bind:value={rep.opacity} class="w-8" />
|
929 |
+
</div>
|
930 |
<div
|
931 |
class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
|
932 |
>
|
|
|
946 |
<input type="text" bind:value={rep.around} class="w-8" />
|
947 |
<div>Å</div>
|
948 |
</div>
|
949 |
+
|
950 |
<div
|
951 |
class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
|
952 |
>
|
|
|
1037 |
>
|
1038 |
AlphaFold
|
1039 |
</button>
|
1040 |
+
<button
|
1041 |
+
class={rep.color === "hydrophobicity"
|
1042 |
+
? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
|
1043 |
+
: "rounded-lg p-1 border border-gray-200 cursor-pointer bg-white"}
|
1044 |
+
on:click={() => (rep.color = "hydrophobicity")}
|
1045 |
+
>
|
1046 |
+
Hydrophobicity
|
1047 |
+
</button>
|
1048 |
<button
|
1049 |
class={rep.color === "default"
|
1050 |
? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
|
|
|
1061 |
>
|
1062 |
Jmol
|
1063 |
</button>
|
1064 |
+
</div>
|
1065 |
+
<div class="flex space-x-2 py-2 text-sm">
|
1066 |
<button
|
1067 |
class={rep.color === "chain"
|
1068 |
? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
|
src/pyproject.toml
CHANGED
@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
|
|
8 |
|
9 |
[project]
|
10 |
name = "gradio_molecule3d"
|
11 |
-
version = "0.0.
|
12 |
description = "Python library for easily interacting with trained machine learning models"
|
13 |
readme = "README.md"
|
14 |
license = "Apache-2.0"
|
|
|
8 |
|
9 |
[project]
|
10 |
name = "gradio_molecule3d"
|
11 |
+
version = "0.0.7"
|
12 |
description = "Python library for easily interacting with trained machine learning models"
|
13 |
readme = "README.md"
|
14 |
license = "Apache-2.0"
|