think JSME is fixed now

syedzayyan · Jun 5, 2024 · acc1c56 · acc1c56
1 parent 7623293
commit acc1c56
Show file tree

Hide file tree

Showing 13 changed files with 258 additions and 132 deletions.
diff --git a/app/tools/dim-red/tsne/page.tsx b/app/tools/dim-red/tsne/page.tsx
@@ -6,31 +6,48 @@ import PyodideContext from "../../../../context/PyodideContext";
 import Scatterplot from "../../../../components/tools/toolViz/ScatterPlot";
 import Loader from "../../../../components/ui-comps/Loader";
 import TargetContext from "../../../../context/TargetContext";
+import { useForm } from "react-hook-form";
+
+type tsneType = {
+  perplexity: number;
+  n_iter: number;
+  pca_correct: boolean;
+  n_jobs: number;
+}
 
 export default function TSNE() {
   const { ligand, setLigand } = useContext(LigandContext);
   const { target } = useContext(TargetContext)
   const { pyodide } = useContext(PyodideContext);
   const [pca, setPCA] = useState<any[]>([]);
-  const [pcaCorrectTSNE, setPCACorrectTSNE] = useState(true);
   const containerRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
 
+  const { register, handleSubmit, watch, formState: { errors }, } = useForm<tsneType>()
+
   useEffect(() => {
     setLoaded(false);
     if (ligand.some(obj => obj.tsne)) {
       setPCA(ligand.map(obj => obj.tsne));
       setLoaded(true);
     } else {
-      runDimRed();
+      setTimeout(() => {
+        runDimRed({
+          perplexity: 30,
+          n_iter: 1000,
+          pca_correct: true,
+          n_jobs: 4,
+        });
+      }, 100)
     }
   }, []);
 
   globalThis.fp = ligand.map((obj) => obj.fingerprint);
-  globalThis.opts = pcaCorrectTSNE ? 2 : 3;
 
-  async function runDimRed() {
+  async function runDimRed(formStuff: tsneType) {
     setLoaded(false);
+    globalThis.opts = formStuff.pca_correct ? 2 : 3;
+
     await pyodide.runPython(`
       from sklearn.decomposition import PCA
       from sklearn.manifold import TSNE
@@ -39,10 +56,10 @@ export default function TSNE() {
       if js.opts == 2:
           pca = PCA(n_components=30)
           pca_drugs = pca.fit_transform(js.fp)
-          model = TSNE(n_components=2, random_state=0, perplexity=30, n_iter=5000)
+          model = TSNE(n_components=2, random_state=42, perplexity=${formStuff.perplexity}, n_iter=${formStuff.n_iter}, n_jobs = ${formStuff.n_jobs})
           result = model.fit_transform(pca_drugs)
       elif js.opts == 3:
-          model = TSNE(n_components=2, random_state=0, perplexity=30, n_iter=5000)
+          model = TSNE(n_components=2, random_state=42, perplexity=${formStuff.perplexity}, n_iter=${formStuff.n_iter}, n_jobs = ${formStuff.n_jobs})
           result = model.fit_transform(js.fp)
 
       js.pca = result
@@ -63,23 +80,21 @@ export default function TSNE() {
       <h1>t-distributed Stochastic Neighbor Embedding</h1>
       <details open={pca.length < 0}>
         <summary>tSNE settings</summary>
-        <form>
-          <label htmlFor="tsne_perplexity">PCA Correction</label>
-          <input
-            type="checkbox"
-            defaultChecked
-            onChange={(e) => setPCACorrectTSNE(e.target.checked)}
-          ></input>
-          <br />
+        <form onSubmit={handleSubmit(runDimRed)} className="ml-forms" style = {{width : "200px"}}>
+          <div>
+            <label htmlFor="tsne_perplexity">PCA Correction</label>
+            <input type="checkbox" defaultChecked  {...register("pca_correct")}></input>            
+          </div>
           <label htmlFor="tsne_perplexity">Perplexity</label>
-          <input className="input" id="tsne_perplexity"></input>
-          <br />
+          <input className="input" defaultValue = {30} id="tsne_perplexity"  {...register("perplexity")}></input>
+
           <label htmlFor="tsne_n_iter">Number of Iterations</label>
-          <input className="input" id="tsne_n_iter"></input>
-          <br />
-          <button className="button" onClick={() => runDimRed()}>
-            Run tSNE
-          </button>
+          <input className="input" defaultValue = {1000} id="tsne_n_iter"  {...register("n_iter")}></input>
+
+          <label htmlFor="tsne_n_jobs">Number of CPU</label>
+          <input className="input" defaultValue = {-1} id="tsne_n_jobs" {...register("n_jobs")}></input>
+
+          <input type="submit" className="button" value={"Run tSNE"}/>
         </form>
       </details>
       {pca.length > 0 && (

diff --git a/app/tools/ml/layout.tsx b/app/tools/ml/layout.tsx
@@ -72,7 +72,7 @@ export default function MLLayout({ children }) {
                         <input ref={inputRef} style={{ width: "40%" }} className="input" onChange={(e) => setOneOffSmiles(e.target.value)} placeholder="Input Your SMILES string here"></input>
                         <br />
                         <Dropdown buttonText="Draw the molecule">
-                            <JSME width="300px" height="300px" onChange={(smiles) => setOneOffSmiles(smiles)} id="jsme_comp_1" />
+                            <JSME width="300px" height="300px" onChange={(smiles) => setOneOffSmiles(smiles)} />
                         </Dropdown>
                         <br />
                         <button className="button" onClick={oneOffPred}>Predict Activity of SMILES</button>

diff --git a/app/tools/scaff_net/page.tsx b/app/tools/scaff_net/page.tsx
@@ -1,16 +1,36 @@
 "use client";
 
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import Loader from "../../../components/ui-comps/Loader";
 import ScaffoldNetworkWholeGraph from "../../../components/tools/toolComp/ScaffoldNetworkWholeGraph";
 import TabWrapper, { Tabs } from "../../../components/ui-comps/TabbedComponents";
 import ScaffNetDets from "../../../components/tools/toolComp/ScaffNetDets";
 import ScaffoldSettings from "../../../components/tools/toolComp/ScaffoldSettings";
+import TargetContext from "../../../context/TargetContext";
+import { graph_molecule_image_generator } from "../../../components/utils/rdkit_loader";
+import RDKitContext from "../../../context/RDKitContext";
+import { MultiDirectedGraph } from "graphology";
 
 export default function DisplayGraph() {
   const [loaded, setLoaded] = useState(true);
   const [graph, setGraph] = useState<any>();
   const [defaultTab, setDefaultTab] = useState(0);
+  const { target } = useContext(TargetContext);
+  const { rdkit } = useContext(RDKitContext);
+
+  useEffect(() => {
+    if (target.scaffold_network != ""){
+      setLoaded(false);
+      setTimeout(() => {
+        let network_graph = new MultiDirectedGraph();
+        network_graph.import(target.scaffold_network);
+        let image_graph = graph_molecule_image_generator(rdkit, network_graph);
+        setGraph(image_graph);
+      }, 100)
+      setLoaded(true);
+      setDefaultTab(1)
+    }
+  }, [])
 
   if (!loaded) {
     return (

diff --git a/app/tools/tanimoto/page.tsx b/app/tools/tanimoto/page.tsx
@@ -15,10 +15,17 @@ export default function Tanimoto() {
   const { rdkit } = useContext(RDKitContext);
   const { setErrors } = useContext(ErrorContext);
 
+  const inputRef = useRef(null);
   const containerRef = useRef(null);
   const [taniData, setTaniData] = useState([]);
   const [anchorMol, setAnchorMol] = useState("CCO");
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.value = anchorMol;
+    }
+  }, [anchorMol]);
+
   function tanimotoDist() {
     try {
       const mol_fp = fpSorter(
@@ -64,10 +71,11 @@ export default function Tanimoto() {
         className="input"
         onChange={(e) => setAnchorMol(e.target.value)}
         style = {{width: "40%"}}
+        ref={inputRef} 
       />
       &nbsp;
       <Dropdown buttonText = "Draw the molecule">
-        <JSME width="300px" height="300px" onChange={(smiles) => setAnchorMol(smiles)} id = "jsme_comp" />
+        <JSME width="400px" height="300px" onChange={(smiles) => setAnchorMol(smiles)} />
       </Dropdown>
       &nbsp;
       <button className="button" onClick={tanimotoDist}>

diff --git a/app/tools/toc/page.tsx b/app/tools/toc/page.tsx
@@ -65,7 +65,7 @@ export default function TOC() {
                 <input ref={inputRef} className = "input" type="text" placeholder="Search By Substructure/SMILES" onChange={(e) => setSearchSmi(e.target.value)}/>
                 &nbsp;
                 <Dropdown buttonText="Draw the molecule">
-                    <JSME width="300px" height="300px" onChange={(smiles) => setSearchSmi(smiles)} id="jsme_comp_2" />
+                    <JSME width="300px" height="300px" onChange={(smiles) => setSearchSmi(smiles)} />
                 </Dropdown> 
                 &nbsp;
                 <button className="button" onClick={() => searchSubst()}>Substructure Search molecule</button>               

diff --git a/components/tools/toolComp/MoleculeStructure.tsx b/components/tools/toolComp/MoleculeStructure.tsx
@@ -228,4 +228,4 @@ class MoleculeStructure extends Component<
   }
 }
 
-export default MoleculeStructure;
+export default MoleculeStructure;
diff --git a/components/tools/toolComp/ScaffNetDets.tsx b/components/tools/toolComp/ScaffNetDets.tsx
@@ -33,14 +33,14 @@ const GraphComponent: React.FC<any> = ({ graph }) => {
 
     // State declarations
     const [currentPage, setCurrentPage] = useState(1);
-    const [nodesArray, setNodesArray] = useState<{ node: any, smiles: string, size: number }[]>([]);
-    const [displayNodesArray, setDisplayNodesArray] = useState<{ node: any, smiles: string, size: number }[]>([]);
+    const [nodesArray, setNodesArray] = useState<{ node: any, smiles: string, size: number, img: string }[]>([]);
+    const [displayNodesArray, setDisplayNodesArray] = useState<{ node: any, smiles: string, size: number, img: string }[]>([]);
 
     // Effect to update nodesArray and displayNodesArray when graph changes
     useEffect(() => {
-        const tempNodesArray: { node: any, smiles: string, size: number }[] = [];
+        const tempNodesArray: { node: any, smiles: string, size: number, img: string }[] = [];
         graph.forEachNode((node, attributes) => {
-            tempNodesArray.push({ node, smiles: attributes.smiles, size: attributes.molCounts });
+            tempNodesArray.push({ node, smiles: attributes.smiles, size: attributes.molCounts, img: attributes.image});
         });
         tempNodesArray.sort((a, b) => b.size - a.size);
         setNodesArray(tempNodesArray);
@@ -94,10 +94,10 @@ const GraphComponent: React.FC<any> = ({ graph }) => {
             <div className="container-for-cards">
                 {displayNodesArray
                     .slice((currentPage - 1) * nodesPerPage, currentPage * nodesPerPage)
-                    .map(({ node, smiles, size }) => (
+                    .map(({ node, smiles, size, img }) => (
                         <Card key={node}>
                             <p>Node ID: {node}</p>
-                            <MoleculeStructure structure={smiles} id={node} />
+                            <img src = {img} alt = {smiles} />
                             <p>Scaffold Matches: {size}</p>
                             <button className="button" onClick={() => filterNodes(node, "attr", 3)}>Neighbour Nodes</button>
                         </Card>

diff --git a/components/tools/toolComp/ScaffoldSettings.tsx b/components/tools/toolComp/ScaffoldSettings.tsx
@@ -2,8 +2,8 @@ import { useForm } from "react-hook-form"
 import RDKitContext from "../../../context/RDKitContext"
 import { useContext } from "react"
 import LigandContext from "../../../context/LigandContext"
-import { scaffold_net_chunking_method } from "../../utils/rdkit_loader"
-import loadGraphFromScaffNet from "../../utils/loadGraphFromScaffNet"
+import { graph_molecule_image_generator, scaffold_net_chunking_method } from "../../utils/rdkit_loader"
+import TargetContext from "../../../context/TargetContext"
 
 type ScaffoldNetParams = {
     includeGenericScaffolds: boolean
@@ -21,6 +21,7 @@ type ScaffoldNetParams = {
 
 export default function ScaffoldSettings({setGraph, setLoaded, activeTabChange}){
     const { rdkit } = useContext(RDKitContext);
+    const { target, setTarget } = useContext(TargetContext);
     const { ligand } = useContext(LigandContext);
     const { register, handleSubmit, formState: { errors }, } = useForm<ScaffoldNetParams>();
 
@@ -42,11 +43,14 @@ export default function ScaffoldSettings({setGraph, setLoaded, activeTabChange})
             if (data.bondBreakersRxns) {
                 params["bondBreakersRxns"] = data.bondBreakersRxns;
             }     
-            setTimeout(() => {
+            setTimeout(async () => {
                 let smiles_list = ligand.map((x) => x.canonical_smiles);
-                const network = scaffold_net_chunking_method(smiles_list, 50, rdkit, params);
-                const graph = loadGraphFromScaffNet(network, smiles_list, rdkit);  
-                setGraph(graph);
+                let network_graph;
+                network_graph = scaffold_net_chunking_method(smiles_list, 600, rdkit, params);scaffold_net_chunking_method(smiles_list, 50, rdkit, params);
+                let serialised_graph = await network_graph.export();
+                await setTarget({...target, scaffold_network : serialised_graph });
+                let image_graph = graph_molecule_image_generator(rdkit, network_graph);
+                setGraph(image_graph);
                 setLoaded(true);  
                 activeTabChange(1);            
             }, 80);

diff --git a/components/tools/toolViz/Histogram.tsx b/components/tools/toolViz/Histogram.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import * as d3 from "d3";
 import ModalComponent from "../../ui-comps/ModalComponent";
 import Card from "./Card";
 import MoleculeStructure from "../toolComp/MoleculeStructure";
 import Screenshotter from "../../utils/d3toPNG";
+import TargetContext from "../../../context/TargetContext";
+import { round } from "mathjs";
 
 const MARGIN = { top: 30, right: 30, bottom: 50, left: 80 };
 const BUCKET_NUMBER = 70;
@@ -29,6 +31,7 @@ export default function Histogram({
   const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
   const [modalState, setModalState] = useState(false);
   const [modalDets, setModalDets] = useState([]);
+  const { target } = useContext(TargetContext);
 
   const svgRef = useRef(null);
   const parentRef = useRef(null);
@@ -189,7 +192,7 @@ export default function Histogram({
                     structure={x.canonical_smiles}
                     id={i.toString()}
                   />
-                  <span>Activity: {x.neg_log_activity_column} </span>
+                  <span>{target.activity_columns[0]}: {round(x[target.activity_columns[0]], 2)} </span>
 
                   <span>
                     ID:{" "}
-Original file line number
+Diff line change
@@ Expand Up / @@ -228,4 +228,4 @@ class MoleculeStructure extends Component< @@
       }
     }
-    export default MoleculeStructure;
+    export default MoleculeStructure;