Skip to content

Commit 96cbd68

Browse files
syedzayyansyedzayyan
committed
big changes like parallelised processing
1 parent 14fba11 commit 96cbd68

31 files changed

+5928
-714
lines changed

‎app/layout.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import '@mantine/core/styles.css';
44
import { RDKitProvider } from "../context/RDKitContext";
55
import { PyodideProvider } from "../context/PyodideContext";
66
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
7-
7+
import { TargetProvider } from "../context/TargetContext";
8+
import { LigandProvider } from "../context/LigandContext";
89

910
export default function RootLayout({
1011
children,
@@ -23,7 +24,11 @@ export default function RootLayout({
2324
<MantineProvider defaultColorScheme="dark">
2425
<RDKitProvider>
2526
<PyodideProvider>
26-
{children}
27+
<TargetProvider>
28+
<LigandProvider>
29+
{children}
30+
</LigandProvider>
31+
</TargetProvider>
2732
</PyodideProvider>
2833
</RDKitProvider>
2934
</MantineProvider>

‎app/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ export default function IndexPage() {
4646
About
4747
</Anchor>
4848

49+
<Anchor
50+
component={Link}
51+
href="/about"
52+
size="sm"
53+
underline="hover"
54+
c="dimmed"
55+
>
56+
GitHub
57+
</Anchor>
58+
4959
<ActionIcon
5060
onClick={() =>
5161
setColorScheme(colorScheme === "light" ? "dark" : "light")

‎app/tools/activity/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function Activity() {
1010
const { ligand } = useContext(LigandContext);
1111
const { target } = useContext(TargetContext);
1212
var data = ligand.map((obj) => obj[target.activity_columns[0]]);
13+
1314

1415
return (
1516
<div className="tools-container">

‎app/tools/dim-red/pca/page.tsx‎

Lines changed: 20 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,44 @@ import { useContext, useEffect, useRef, useState } from "react";
44
import LigandContext from "../../../../context/LigandContext";
55
import PyodideContext from "../../../../context/PyodideContext";
66
import Scatterplot from "../../../../components/tools/toolViz/ScatterPlot";
7-
import Loader from "../../../../components/ui-comps/Loader";
87
import TargetContext from "../../../../context/TargetContext";
9-
import { Button, Group } from "@mantine/core";
8+
import { Button } from "@mantine/core";
109

1110
export default function PCA() {
12-
const { ligand, setLigand } = useContext(LigandContext);
11+
const { ligand } = useContext(LigandContext);
1312
const { target } = useContext(TargetContext);
1413
const { pyodide } = useContext(PyodideContext);
15-
const [pca, setPCA] = useState<any[]>([]);
1614
const containerRef = useRef(null);
17-
const [loaded, setLoaded] = useState(false);
18-
19-
// useEffect(() => {
20-
// setLoaded(false);
21-
// if (ligand.some(obj => obj.pca)) {
22-
// setPCA(ligand.map(obj => obj.pca));
23-
// setLoaded(true);
24-
// } else {
25-
// runDimRed();
26-
// }
27-
// }, []);
28-
29-
globalThis.fp = ligand.map((obj) => obj.fingerprint);
3015

3116
async function runDimRed() {
32-
setLoaded(false);
33-
await pyodide.runPython(`
34-
from sklearn.decomposition import PCA
35-
import numpy as np
36-
import js
17+
const msg = {
18+
id: "job-123",
19+
opts: 1,
20+
func: "dim_red",
21+
fp: ligand.map((obj) => obj.fingerprint),
22+
params: {
23+
n_components: 2,
24+
pca_pre_components: 30,
25+
random_state: 42
26+
}
27+
};
3728

38-
pca = PCA(n_components=2)
39-
result = pca.fit_transform(js.fp)
40-
explain_variance = np.sum(pca.explained_variance_ratio_)
41-
js.pca = result
42-
js.explain_variance = explain_variance
43-
`);
44-
const pca_result = globalThis.pca.toJs();
45-
console.log(globalThis.explain_variance);
46-
const pca_data_in = pca_result.map(([x, y]) => ({ x, y }));
47-
let new_ligand = ligand.map((obj, index) => ({
48-
...obj,
49-
pca: pca_data_in[index],
50-
}));
51-
setLigand(new_ligand);
52-
setPCA(pca_data_in);
53-
setLoaded(true);
29+
pyodide.postMessage(msg);
5430
}
5531

5632
return (
5733
<div className="tools-container" ref={containerRef}>
5834
<h1>Principal Component Analysis</h1>
5935
<Button onClick={() => runDimRed()}>Run PCA</Button>
60-
<p>Caution: this may freeze the browser tab for a while. Geek speak: Pyodide runs on the main thread
61-
and PCA computation is blocking.
62-
</p>
63-
{pca.length > 0 && (
36+
{ligand[0].pca && (
6437
<>
65-
<p>Explained Variance by first 2 Principal Components: {globalThis.explain_variance.toFixed(2)}</p>
38+
{/* <p>Explained Variance by first 2 Principal Components: {globalThis.explain_variance.toFixed(2)}</p> */}
6639
<br></br>
6740
<Scatterplot
68-
data={pca}
41+
data={ligand.map((obj) => {
42+
const [x, y] = obj.pca;
43+
return { x, y };
44+
})}
6945
colorProperty={ligand.map((obj) => obj[target.activity_columns[0]])}
7046
hoverProp={ligand.map((obj) => obj.canonical_smiles)}
7147
xAxisTitle={"Principal Component 1"}

‎app/tools/dim-red/tsne/page.tsx‎

Lines changed: 22 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -26,54 +26,28 @@ export default function TSNE() {
2626

2727
const { register, handleSubmit, watch, formState: { errors }, } = useForm<tsneType>()
2828

29-
// useEffect(() => {
30-
// setLoaded(false);
31-
// if (ligand.some(obj => obj.tsne)) {
32-
// setPCA(ligand.map(obj => obj.tsne));
33-
// setLoaded(true);
34-
// } else {
35-
// setTimeout(() => {
36-
// runDimRed({
37-
// perplexity: 30,
38-
// n_iter: 1000,
39-
// pca_correct: true,
40-
// n_jobs: 4,
41-
// });
42-
// }, 100)
43-
// }
44-
// }, []);
45-
4629
globalThis.fp = ligand.map((obj) => obj.fingerprint);
4730

4831
async function runDimRed(formStuff: tsneType) {
4932
setLoaded(false);
50-
globalThis.opts = formStuff.pca_correct ? 2 : 3;
5133

52-
await pyodide.runPython(`
53-
from sklearn.decomposition import PCA
54-
from sklearn.manifold import TSNE
55-
import js
34+
const msg = {
35+
id: "job-123",
36+
opts: formStuff.pca_correct ? 2 : 3,
37+
fp: globalThis.fp,
38+
func: "dim_red",
39+
params: {
40+
n_components: 2,
41+
pca_pre_components: 30,
42+
perplexity: formStuff.perplexity,
43+
n_iter: formStuff.n_iter,
44+
n_jobs: formStuff.n_jobs,
45+
random_state: 42
46+
}
47+
};
5648

57-
if js.opts == 2:
58-
pca = PCA(n_components=30)
59-
pca_drugs = pca.fit_transform(js.fp)
60-
model = TSNE(n_components=2, random_state=42, perplexity=${formStuff.perplexity}, n_iter=${formStuff.n_iter}, n_jobs = ${formStuff.n_jobs})
61-
result = model.fit_transform(pca_drugs)
62-
elif js.opts == 3:
63-
model = TSNE(n_components=2, random_state=42, perplexity=${formStuff.perplexity}, n_iter=${formStuff.n_iter}, n_jobs = ${formStuff.n_jobs})
64-
result = model.fit_transform(js.fp)
49+
pyodide.postMessage(msg);
6550

66-
js.pca = result
67-
js.explain_variance = explain_variance
68-
`);
69-
const pca_result = globalThis.pca.toJs();
70-
const pca_data_in = pca_result.map(([x, y]) => ({ x, y }));
71-
let new_ligand = ligand.map((obj, index) => ({
72-
...obj,
73-
tsne: pca_data_in[index],
74-
}));
75-
setLigand(new_ligand);
76-
setPCA(pca_data_in);
7751
setLoaded(true);
7852
}
7953

@@ -85,7 +59,7 @@ export default function TSNE() {
8559
n_iter: 1000,
8660
pca_correct: true,
8761
n_jobs: 4,
88-
})}>Run PCA</Button>
62+
})}>Run tSNE</Button>
8963
<p>Caution: this may freeze the browser tab for a while. Geek speak: Pyodide runs on the main thread
9064
and tSNE computation is blocking.
9165
</p>
@@ -108,12 +82,15 @@ export default function TSNE() {
10882
<input type="submit" className="button" value={"Run tSNE"} />
10983
</form>
11084
</details>
111-
{pca.length > 0 && (
85+
{ligand[0].tsne && (
11286
<>
113-
<p>Explained Variance by first 2 Principal Components: {globalThis.explain_variance.toFixed(2)}</p>
87+
{/* <p>Explained Variance by first 2 Principal Components: {globalThis.explain_variance.toFixed(2)}</p> */}
11488
<br></br>
11589
<Scatterplot
116-
data={pca}
90+
data={ligand.map((obj) => {
91+
const [x, y] = obj.tsne;
92+
return { x, y };
93+
})}
11794
colorProperty={ligand.map((obj) => obj[target.activity_columns[0]])}
11895
hoverProp={ligand.map((obj) => obj.canonical_smiles)}
11996
xAxisTitle={"t-SNE Dimension 1"}

0 commit comments

Comments
 (0)