Scaffold Network with more custom stuff.

app/tools/dim-red/page.tsx

@@ -105,9 +105,12 @@ export default function DimRed() {
             <div className="tools-container" ref={containerRef}>
                 {whatDimRed === "pca" && (
                     <>
+                        <h1>Principal Component Analysis</h1>
                     </>
                 )}
                 {whatDimRed === "tsne" && (
+                    <>
+                    <h1>t-distributed Stochastic Neighbor Embedding</h1>
                     <details open={pca.length < 0}>
                         <summary>tSNE settings</summary>
                         <form>
@@ -123,6 +126,7 @@ export default function DimRed() {
                             <button className="button" onClick={() => runDimRed()}>Run tSNE</button>
                         </form>
                     </details>
+                    </>
                 )}
                 {pca.length > 0 &&
                     <Scatterplot

app/tools/ml/page.tsx

@@ -7,7 +7,7 @@ import { useSearchParams } from "next/navigation";
 import Loader from "../../../components/ui-comps/Loader";
 import RDKitContext from "../../../context/RDKitContext";
 import GroupedBarChart from "../../../components/tools/toolViz/BarChart";
-import { mean } from "mathjs";
+import { mean, round } from "mathjs";
 import fpSorter from "../../../components/utils/fp_sorter";
 import Scatterplot from "../../../components/tools/toolViz/ScatterPlot";
 import RF from "../../../components/ml-forms/RF";
@@ -98,6 +98,12 @@ export default function ML() {
     if (loaded) {
         return (
             <div className="tools-container">
+                {whatMLModel == "#rf" &&
+                    <h1>Random Forest</h1>
+                }
+                {whatMLModel == "#xgboost" &&
+                    <h1>XGBoost</h1>
+                }
                 <details open={results.length == 0}>
                     <summary>Model Settings</summary>
                     <p style={{ margin: "10px 0" }}>If you are new to the world of ML, I'd suggest leaving these to the default and just press on
@@ -114,9 +120,9 @@ export default function ML() {
                     }
                 </details>
                 {results.length != 0 && <>
-                    <GroupedBarChart mae={results[0]} r2={results[1]} />
-                    <span>Mean MAE: {mean(results[0])}</span> &nbsp;
-                    <span>Mean R-Squared: {mean(results[1])}</span>
+                    <GroupedBarChart mae={results[0]} r2={results[1]}>
+                        <span>Mean MAE: {round(mean(results[0]), 2)} || Mean R-Squared: {round(mean(results[1]), 2)}</span>
+                    </GroupedBarChart>
                     <select className="input" onChange={(e) => setFoldNumSel(parseInt(e.target.value))}>
                         {foldState.map((_, i) => (
                             <option key={i} value={i}>Fold {i + 1}</option>

app/tools/mma/page.tsx

@@ -1,9 +1,36 @@
 "use client"
 import MMA from "../../../components/tools/toolComp/MMA";
+import FAQComp from "../../../components/ui-comps/FAQComp";
 
 export default function Matched(){
     return(
         <div className="tools-container">
+            <h1>Matched Molecular Series - Analysis</h1>
+            <FAQComp >
+                <h4>What is Matched Molecular Series?</h4>
+                <p>Matched Molecular Series simply put is a method through which molecules are cut in one place, and then it
+                    is checked which molecules sort of shair common cores. This is can help find molecules that are very similar
+                    to each other, and only differing by a common atom for example. This helps to understand and find out activity cliffs
+                    in the data. Activity cliffs are basically molecules where small changes lead to big changes in activity.
+                    More about Activity cliffs can be found here: <a href = "https://pubs.acs.org/doi/10.1021/acsomega.9b02221">Link</a>
+                </p>
+                <h4>How is it done?</h4>
+                <p>MMA has appeared in literature and some of the more prominent ones are listed here:
+                    <ul>
+                        <li>Wawer, Mathias, and Jürgen Bajorath. 
+                            "Local structural changes, global data views: graphical substructure− activity relationship trailing." 
+                            Journal of Medicinal Chemistry 54 (2011): 2944-2951.&nbsp;
+                            <a href = "https://doi.org/10.1021/jm200026b">Link</a>
+                        </li>
+                        <li>
+                            O’Boyle, Noel M., Jonas Boström, Roger A. Sayle, and Adrian Gill. 
+                            "Using matched molecular series as a predictive tool to optimize biological activity." 
+                            Journal of Medicinal Chemistry, 57 (2014): 2704-2713.&nbsp;
+                            <a href = "https://doi.org/10.1021/jm500022q">Link</a>
+                        </li>
+                    </ul>
+                </p>
+            </FAQComp>
             <MMA />
         </div>
     )

app/tools/scaff_net/page.tsx

@@ -1,35 +1,16 @@
 "use client";
 
-import { useContext, useEffect, useState } from "react";
-import RDKitContext from "../../../context/RDKitContext";
-import LigandContext from "../../../context/LigandContext";
-
-import { scaffold_net_chunking_method } from "../../../components/utils/rdkit_loader";
+import { useState } from "react";
 import Loader from "../../../components/ui-comps/Loader";
 import ScaffoldNetworkWholeGraph from "../../../components/tools/toolComp/ScaffoldNetworkWholeGraph";
-import loadGraphFromScaffNet from "../../../components/utils/loadGraphFromScaffNet";
-import TabWrapper, {
-  Tabs,
-} from "../../../components/ui-comps/TabbedComponents";
+import TabWrapper, { Tabs } from "../../../components/ui-comps/TabbedComponents";
 import ScaffNetDets from "../../../components/tools/toolComp/ScaffNetDets";
 import ScaffoldSettings from "../../../components/tools/toolComp/ScaffoldSettings";
 
 export default function DisplayGraph() {
-  const { rdkit } = useContext(RDKitContext);
-  const { ligand } = useContext(LigandContext);
-  const [loaded, setLoaded] = useState(false);
+  const [loaded, setLoaded] = useState(true);
   const [graph, setGraph] = useState<any>();
-
-  useEffect(() => {
-    setLoaded(false);
-    setTimeout(() => {
-      // let smiles_list = ligand.map((x) => x.canonical_smiles);
-      // const network = scaffold_net_chunking_method(smiles_list, 50, rdkit);
-      // const graph = loadGraphFromScaffNet(network, smiles_list, rdkit);
-      // setGraph(graph);
-      setLoaded(true);
-    }, 80);
-  }, []);
+  const [defaultTab, setDefaultTab] = useState(0);
 
   if (!loaded) {
     return (
@@ -42,9 +23,13 @@ export default function DisplayGraph() {
   return (
     <div className="tools-container">
       <h1>Scaffold Network</h1>
-      <TabWrapper>
+      <TabWrapper defaultTab={defaultTab}>
         <Tabs title="Network Settings">
-          <ScaffoldSettings />
+          <ScaffoldSettings
+            setGraph={setGraph}
+            setLoaded={setLoaded}
+            activeTabChange = {setDefaultTab}
+          />
         </Tabs>
         <Tabs title="Network Details">
           <ScaffNetDets graph={graph} />

components/tools/toolComp/ScaffoldSettings.tsx

@@ -1,6 +1,9 @@
 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"
 
 type ScaffoldNetParams = {
     includeGenericScaffolds: boolean
@@ -16,20 +19,41 @@ type ScaffoldNetParams = {
     bondBreakersRxns: string
 }
 
-export default function ScaffoldSettings(){
+export default function ScaffoldSettings({setGraph, setLoaded, activeTabChange}){
     const { rdkit } = useContext(RDKitContext);
-    const { register, handleSubmit, watch, formState: { errors }, } = useForm<ScaffoldNetParams>();
+    const { ligand } = useContext(LigandContext);
+    const { register, handleSubmit, formState: { errors }, } = useForm<ScaffoldNetParams>();
 
     const onSubmit = (data: ScaffoldNetParams) => {
-        console.log(data);
+        setLoaded(false);
         try{
-            var scaffold_net_ins = new rdkit.ScaffoldNetwork();
-            scaffold_net_ins.update_scaffold_params(true, true, true, true, true, true, true, true, true, true, []);
+            let params = {
+                includeGenericScaffolds: data.includeGenericScaffolds,
+                includeGenericBondScaffolds: data.includeGenericBondScaffolds,
+                includeScaffoldsWithoutAttachments: data.includeScaffoldsWithoutAttachments,
+                includeScaffoldsWithAttachments: data.includeScaffoldsWithAttachments,
+                keepOnlyFirstFragment: data.keepOnlyFirstFragment,
+                pruneBeforeFragmenting: data.pruneBeforeFragmenting,
+                flattenIsotopes: data.flattenIsotopes,
+                flattenChirality: data.flattenChirality,
+                flattenKeepLargest: data.flattenKeepLargest,
+                collectMolCounts: data.collectMolCounts
+            };
+            if (data.bondBreakersRxns) {
+                params["bondBreakersRxns"] = data.bondBreakersRxns;
+            }     
+            setTimeout(() => {
+                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);
+                setLoaded(true);  
+                activeTabChange(1);            
+            }, 80);
         }catch(e){
             console.log(e);
         }
     }
-
     return (
         <div>
             <form className="ml-forms" onSubmit={handleSubmit(onSubmit)}>
@@ -39,7 +63,7 @@ export default function ScaffoldSettings(){
                 </label>
 
                 <label>
-                    <input type="checkbox" name="includeGenericBondScaffolds" {...register("includeGenericBondScaffolds")} defaultChecked/>
+                    <input type="checkbox" name="includeGenericBondScaffolds" {...register("includeGenericBondScaffolds")}/>
                     includeGenericBondScaffolds
                 </label>
 

components/tools/toolViz/BarChart.tsx

@@ -2,7 +2,14 @@ import React, { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import Screenshotter from '../../utils/d3toPNG';
 
-const GroupedBarChart = ({ mae, r2 }) => {
+
+type GroupedBarChartProps = {
+  mae: number[];
+  r2?: number[];
+  children?: React.ReactNode; // Make children optional
+};
+
+const GroupedBarChart = ({ mae, r2, children }: GroupedBarChartProps) => {
   // Check if both mae and r2 are provided and have the same length
   if (!mae || !r2 || mae.length !== r2.length) {
     return <div>Error: Both mae and r2 arrays are required and must have the same length.</div>;
@@ -119,6 +126,7 @@ const GroupedBarChart = ({ mae, r2 }) => {
 
   return (
     <div className='container' ref={parentRef}>
+      {children}
       <svg id="my_dataviz" ref={svgRef} height={Math.min(dimensions.height, window.innerHeight - 20)} width={dimensions.width}>
         {/* SVG will be rendered here */}
       </svg>

components/utils/rdkit_loader.ts

@@ -19,8 +19,10 @@ export function scaffold_net_chunking_method(
   array: any[],
   chunkSize: number,
   rdkit,
+  params
 ) {
   var scaffold_net_ins = new rdkit.ScaffoldNetwork();
+  scaffold_net_ins.set_scaffold_params(JSON.stringify(params))
   let scaffold_net;
   for (let i = 0; i < array.length; i += chunkSize) {
     let smiles_mol_list;