draw molecule update

syedzayyan · May 27, 2024 · 7623293 · 7623293
1 parent 6870fd0
commit 7623293
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/app/tools/ml/layout.tsx b/app/tools/ml/layout.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import GroupedBarChart from "../../../components/tools/toolViz/BarChart";
 import Scatterplot from "../../../components/tools/toolViz/ScatterPlot";
 import { round } from "mathjs";
@@ -29,6 +29,13 @@ export default function MLLayout({ children }) {
     const [oneOffSMILESResult, setOneOffSmilesResult] = useState<number>();
     const { pyodide } = useContext(PyodideContext);
 
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.value = oneOffSMILES;
+        }
+      }, [oneOffSMILES]);
+
     const { ligand } = useContext(LigandContext);
 
     globalThis.neg_log_activity_column = ligand.map((obj) => obj[target.activity_columns[0]]);
@@ -62,7 +69,7 @@ export default function MLLayout({ children }) {
                     &nbsp;
                     <div style={{ borderColor: "10px solid black", margin: "20px 0", gap: "10px" }}>
                         <h2>Predict the activity of a single molecule</h2>
-                        <input style={{ width: "40%" }} className="input" onChange={(e) => setOneOffSmiles(e.target.value)} placeholder="Input Your SMILES string here"></input>
+                        <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" />

diff --git a/app/tools/screen/page.tsx b/app/tools/screen/page.tsx
@@ -32,7 +32,7 @@ export default function Screen() {
                                 Download Predictions in CSV Format
                             </button>
                             &nbsp;
-                            <Table data={screenData} rowsPerPage={5} />
+                            <Table data={screenData} rowsPerPage={5} act_column={["predictions"]}/>
                         </>
                     }
                 </>

diff --git a/app/tools/toc/page.tsx b/app/tools/toc/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useContext, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import Table from "../../../components/ui-comps/PaginatedTables";
 import LigandContext from "../../../context/LigandContext";
 import { usePapaParse } from 'react-papaparse';
@@ -15,11 +15,17 @@ export default function TOC() {
     const { target } = useContext(TargetContext);
     const { jsonToCSV } = usePapaParse();
     const { rdkit } = useContext(RDKitContext);
-
+    const inputRef = useRef(null);
 
     const [searchSmi, setSearchSmi] = useState('');
     const [searchRes, setSearchRes] = useState(ligand);
 
+    useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.value = searchSmi;
+        }
+      }, [searchSmi]);
+
     const results = jsonToCSV(ligand, { delimiter: ';' });
 
     function downloadCSV(csv: any) {
@@ -56,7 +62,7 @@ export default function TOC() {
             <div >
                 <button className="button" onClick={() => downloadCSV(results)}>Download Ligand Data as CSV</button>
                 <br />
-                <input className = "input" type="text" placeholder="Search By Substructure/SMILES" onChange={(e) => setSearchSmi(e.target.value)}/>
+                <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" />