molecule drawer added

README.md

@@ -17,6 +17,10 @@ Just in your browser. All the code runs in the browser. Using WASM and JS. The t
 ### How is QITB?
 You tell? Found an issue and want to fix it? Please feel free to make a PR. Will look forward to people turning and tossing my code to make it better.
 
+### How to make QITB better?
+
+
+
 ### Who is behind QITB and What Do They Do?
 - Me (Syed Zayyan Masud): Horrible, uncommented, untestable code.
 - Theo Redfern-Nichols: Making the UI Useable and Combing through my bad Design Choices and coming up with VERY useful Suggestions.

app/misc_tools/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import JSME from "../../components/tools/toolViz/JSMEComp";
+
+export default function JSMEPOPO() {
+    function handleChange(smiles){
+        console.log(smiles)
+    }
+    return (
+        <div className="container">
+            <div className="content-wrapper" style={{ marginTop: "60px" }}>
+                <JSME height="500px" width="500px" onChange={handleChange} id = 'test'/>
+            </div>
+        </div>
+    )
+}

app/tools/activity/page.tsx

@@ -9,11 +9,11 @@ import TargetContext from "../../../context/TargetContext";
 export default function Activity() {
     const { ligand } = useContext(LigandContext);
     const { target } = useContext(TargetContext);
-    var data = ligand.map((obj) => obj["neg_log_activity_column"]);
+    var data = ligand.map((obj) => obj[target.activity_columns[0]]);
 
     return (
         <div className="tools-container">
-            <Histogram data={data} xLabel={target.activity_type} yLabel="Count" toolTipData={ligand}>
+            <Histogram data={data} xLabel={target.activity_columns[0]} yLabel="Count" toolTipData={ligand}>
                 <span>Mean : {round(mean(data), 2) } || Median : {round(median(data), 2)} || Mode : {round(mode(data), 2)}</span>
             </Histogram>
         </div>

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

@@ -5,9 +5,11 @@ import LigandContext from "../../../../context/LigandContext";
 import PyodideContext from "../../../../context/PyodideContext";
 import Scatterplot from "../../../../components/tools/toolViz/ScatterPlot";
 import Loader from "../../../../components/ui-comps/Loader";
+import TargetContext from "../../../../context/TargetContext";
 
 export default function PCA() {
     const { ligand, setLigand } = useContext(LigandContext);
+    const { target } = useContext(TargetContext);
     const { pyodide } = useContext(PyodideContext);
     const [pca, setPCA] = useState<any[]>([]);
     const containerRef = useRef(null);
@@ -52,7 +54,7 @@ export default function PCA() {
             {pca.length > 0 && (
                 <Scatterplot
                     data={pca}
-                    colorProperty={ligand.map((obj) => obj.neg_log_activity_column)}
+                    colorProperty={ligand.map((obj) => obj[target.activity_columns[0]])}
                     hoverProp={ligand.map((obj) => obj.canonical_smiles)}
                     xAxisTitle={"Principal Component 1"}
                     yAxisTitle={"Principal Component 2"}

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

@@ -5,9 +5,11 @@ import LigandContext from "../../../../context/LigandContext";
 import PyodideContext from "../../../../context/PyodideContext";
 import Scatterplot from "../../../../components/tools/toolViz/ScatterPlot";
 import Loader from "../../../../components/ui-comps/Loader";
+import TargetContext from "../../../../context/TargetContext";
 
 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);
@@ -83,7 +85,7 @@ export default function TSNE() {
       {pca.length > 0 && (
         <Scatterplot
           data={pca}
-          colorProperty={ligand.map((obj) => obj.neg_log_activity_column)}
+          colorProperty={ligand.map((obj) => obj[target.activity_columns[0]])}
           hoverProp={ligand.map((obj) => obj.canonical_smiles)}
           xAxisTitle={"t-SNE Dimension 1"}
           yAxisTitle={"t-SNE Dimension 2"}

app/tools/ml/layout.tsx

@@ -12,6 +12,8 @@ import RDKitContext from "../../../context/RDKitContext";
 import PyodideContext from "../../../context/PyodideContext";
 import TargetContext from "../../../context/TargetContext";
 import { MLResultsContext } from "../../../context/MLResultsContext";
+import JSME from "../../../components/tools/toolViz/JSMEComp";
+import Dropdown from "../../../components/tools/toolViz/DropDown";
 
 type dataChart = {
     x: number,
@@ -29,7 +31,7 @@ export default function MLLayout({ children }) {
 
     const { ligand } = useContext(LigandContext);
 
-    globalThis.neg_log_activity_column = ligand.map((obj) => obj.neg_log_activity_column);
+    globalThis.neg_log_activity_column = ligand.map((obj) => obj[target.activity_columns[0]]);
     globalThis.fp = ligand.map((obj) => obj.fingerprint);
 
     useEffect(() => {
@@ -49,14 +51,23 @@ export default function MLLayout({ children }) {
         await pyodide.runPython(await (await fetch("/pyodide_ml_screen.py")).text());
         setOneOffSmilesResult((globalThis.one_off_y).toJs())
     }
-    
+
     return (
         <div className="tools-container">
             <MLResultsContext.Provider value={setScreenData}>
                 {children}
             </MLResultsContext.Provider>
             {screenData.length > 0 && (
                 <>
+                    <input style={{ width: "40%" }} className="input" onChange={(e) => setOneOffSmiles(e.target.value)} placeholder="Input Your SMILES string here"></input>
+                    &nbsp;
+                    <Dropdown buttonText="Draw the molecule">
+                        <JSME width="300px" height="300px" onChange={(smiles) => setOneOffSmiles(smiles)} id="jsme_comp_1" />
+                    </Dropdown>
+                    &nbsp;
+                    <button className="button" onClick={oneOffPred}>Predict Activity of SMILES</button>
+                    <br />
+                    <span>Predicted {target.activity_columns[0]}: {oneOffSMILESResult}</span>
                     <GroupedBarChart mae={screenData[0]} r2={screenData[1]}>
                         <span>Mean MAE: {round(mean(screenData[0]), 2)} || Mean R-Squared: {round(mean(screenData[1]), 2)}</span>
                     </GroupedBarChart>
@@ -66,11 +77,6 @@ export default function MLLayout({ children }) {
                         ))}
                     </select>
                     <Scatterplot data={screenData[2][foldNumSel]} xAxisTitle="Experimental Activity" yAxisTitle="Predicted Activity" />
-
-                    <input className="input" onChange={(e) => setOneOffSmiles(e.target.value)} placeholder="Input Your SMILES string here"></input>
-                    <button className="button" onClick={oneOffPred}>Predict Activity of SMILES</button>
-                    <span>Predicted {target.activity_type}: {oneOffSMILESResult}</span>
-
                 </>
             )}
         </div>

app/tools/tanimoto/page.tsx

@@ -7,6 +7,8 @@ import RDKitContext from "../../../context/RDKitContext";
 import TanimotoSimilarity from "../../../components/utils/tanimoto";
 import fpSorter from "../../../components/utils/fp_sorter";
 import ErrorContext from "../../../context/ErrorContext";
+import JSME from "../../../components/tools/toolViz/JSMEComp";
+import Dropdown from "../../../components/tools/toolViz/DropDown";
 
 export default function Tanimoto() {
   const { ligand } = useContext(LigandContext);
@@ -55,13 +57,19 @@ export default function Tanimoto() {
           the full picture, but adds a piece to the puzzle.
         </p>
       </details>
-      <label>SMILES string</label>
+      <label>SMILES string:  </label>
       <input
         defaultValue={anchorMol}
         type="text"
         className="input"
         onChange={(e) => setAnchorMol(e.target.value)}
+        style = {{width: "40%"}}
       />
+      &nbsp;
+      <Dropdown buttonText = "Draw the molecule">
+        <JSME width="300px" height="300px" onChange={(smiles) => setAnchorMol(smiles)} id = "jsme_comp" />
+      </Dropdown>
+      &nbsp;
       <button className="button" onClick={tanimotoDist}>
         Generate Graph
       </button>

app/tools/toc/page.tsx

@@ -9,7 +9,7 @@ export default function TOC(){
     const { ligand } = useContext(LigandContext);
     const { jsonToCSV } = usePapaParse();
 
-    const results = jsonToCSV(ligand, { delimiter: ',' });
+    const results = jsonToCSV(ligand, { delimiter: ';' });
 
     function downloadCSV(csv: any){
         const blob = new Blob([csv], { type: 'text/csv' });

components/dataloader/CompoundGetter.tsx

@@ -41,16 +41,14 @@ export default function CompoundGetter() {
       `/chembl/api/data/activity?format=json&target_chembl_id=${target.target_id}&type=${unit}&target_organism=Homo%20sapiens&assay_type=${binding}&relation==`,
     ).then((data) => {
       data.map((x) => {
-        x["activity_column"] = x["standard_value"];
+        x["Ki"] = x["standard_value"];
         x["id"] = x["molecule_chembl_id"];
         delete x["standard_value"];
         return x;
       });
       setLigand(data);
-      let temp_target = target;
-      temp_target.activity_type = unit;
     });
-    localStorage.setItem("dataSource", "chembl");
+    setTarget({ ...target, activity_columns: [unit], data_source: "chembl"});
   }
 
   return (