Few Updates

app/tools/layout.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useContext, useEffect, useState } from "react";
 import CornerMenu, { MenuItem } from "../../components/ui-comps/CornerMenu";
@@ -8,119 +8,156 @@ import { initRDKit } from "../../components/utils/rdkit_loader";
 import Loader from "../../components/ui-comps/Loader";
 import Script from "next/script";
 import LigandContext from "../../context/LigandContext";
-import { useRouter } from 'next/navigation'
+import { useRouter } from "next/navigation";
 import ModalComponent from "../../components/ui-comps/ModalComponent";
 import ErrorContext from "../../context/ErrorContext";
 
 const menuItems: MenuItem[] = [
   {
     label: "Pre-Processing",
-    link: "/tools/preprocess"
+    link: "/tools/preprocess",
   },
   {
-    label: 'Distributions', link: '#', subMenuItems: [{
-      label: 'Activity',
-      link: '/tools/activity'
-    }, {
-      label: 'Tanimoto',
-      link: '/tools/tanimoto'
-    }]
-  }, {
-    label: 'Dimensionality Reduction', link: '#', subMenuItems: [{
-      label: 'PCA',
-      link: '/tools/dim-red#pca'
-    }, {
-      label: 'tSNE',
-      link: '/tools/dim-red#tsne'
-    }]
+    label: "Distributions",
+    link: "#",
+    subMenuItems: [
+      {
+        label: "Activity",
+        link: "/tools/activity",
+      },
+      {
+        label: "Tanimoto",
+        link: "/tools/tanimoto",
+      },
+      {
+        label: "Table Of Compounds",
+        link: "/tools/toc",
+      },
+    ],
   },
   {
-    label: 'Scaffold Analysis', link: '#', subMenuItems: [{
-      label: 'MMA',
-      link: '/tools/mma'
-    }]
+    label: "Dimensionality Reduction",
+    link: "#",
+    subMenuItems: [
+      {
+        label: "PCA",
+        link: "/tools/dim-red#pca",
+      },
+      {
+        label: "tSNE",
+        link: "/tools/dim-red#tsne",
+      },
+    ],
   },
   {
-    label: 'Machine Learning', link: '#', subMenuItems: [{
-      label: 'Random Forest',
-      link: '/tools/ml#rf'
-    }, {
-      label: 'XGBoost',
-      link: '/tools/ml#xgboost'
-    }
-    ]
+    label: "Scaffold Analysis",
+    link: "#",
+    subMenuItems: [
+      {
+        label: "MMA",
+        link: "/tools/mma",
+      },
+      {
+        label: "Scaffold Network",
+        link: "/tools/scaff_net",
+      },
+    ],
   },
   {
-    label: 'Virtual Screening', link: '#', subMenuItems: [
+    label: "Machine Learning",
+    link: "#",
+    subMenuItems: [
       {
-        label: 'Full Data',
-        link: '/tools/screen'
+        label: "Random Forest",
+        link: "/tools/ml#rf",
       },
       {
-        label: 'Coverage Score',
-        link: '/tools/screen/cov_score'
+        label: "XGBoost",
+        link: "/tools/ml#xgboost",
       },
-    ]
+    ],
+  },
+  {
+    label: "Virtual Screening",
+    link: "#",
+    subMenuItems: [
+      {
+        label: "Full Data",
+        link: "/tools/screen",
+      },
+      {
+        label: "Coverage Score",
+        link: "/tools/screen/cov_score",
+      },
+    ],
   },
 ];
 
 export default function DashboardLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   const { setPyodide } = useContext(PyodideContext);
   const { setRDKit } = useContext(RDKitContext);
   const [loading, setLoading] = useState(true);
-  const [loadingText, setLoadingText] = useState('Loading Pyodide...')
+  const [loadingText, setLoadingText] = useState("Loading Pyodide...");
   const { ligand } = useContext(LigandContext);
   const { errors, setErrors } = useContext(ErrorContext);
   const [modalState, setModalState] = useState(false);
   const router = useRouter();
-
 
   useEffect(() => {
     if (errors) {
-      setModalState(true)
+      setModalState(true);
     }
-  }, [errors])
+  }, [errors]);
 
   useEffect(() => {
     if (ligand.length < 1) {
-      router.push('/load_data');
+      router.push("/load_data");
     }
-  }, [])
+  }, []);
 
   async function loadRDKit() {
     const RDK = await initRDKit();
-    return RDK
+    return RDK;
   }
 
   async function pyodideLoaded() {
     try {
       await globalThis.loadPyodide().then((pyodide) => {
-        pyodide.loadPackage(['scikit-learn', 'numpy']).then(() => {
-          setPyodide(pyodide)
-        })
-      })
-      setLoadingText("Loading RDKit")
-      await loadRDKit().then(RDK => { setRDKit(RDK); setLoading(false) });
+        pyodide.loadPackage(["scikit-learn", "numpy"]).then(() => {
+          setPyodide(pyodide);
+        });
+      });
+      setLoadingText("Loading RDKit");
+      await loadRDKit().then((RDK) => {
+        setRDKit(RDK);
+        setLoading(false);
+      });
     } catch (e) {
-      console.log(e);
-      setErrors("Pyodide and RDKit had problems loading")
+      console.error(e);
+      setErrors("Pyodide and RDKit had problems loading");
     }
   }
 
   if (ligand.length > 1) {
     return (
-      <div className='main-container'>
-        <Script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js" onLoad={pyodideLoaded}></Script>
+      <div className="main-container">
+        <Script
+          src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"
+          onLoad={pyodideLoaded}
+        ></Script>
         {loading ? (
           <Loader loadingText={loadingText} />
         ) : (
           <>
             <CornerMenu items={menuItems} />
-            <ModalComponent isOpen={modalState} closeModal={() => setModalState(false)}>
+            <ModalComponent
+              isOpen={modalState}
+              closeModal={() => setModalState(false)}
+            >
               {errors}
             </ModalComponent>
             {children}
@@ -129,8 +166,6 @@ export default function DashboardLayout({
       </div>
     );
   } else {
-    return (
-      <></>
-    )
+    return <></>;
   }
-}
+}

app/tools/scaff_net/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useContext, useEffect, useState } from "react";
+import RDKitContext from "../../../context/RDKitContext";
+import LigandContext from "../../../context/LigandContext";
+
+import "@react-sigma/core/lib/react-sigma.min.css";
+import { scaffold_net_chunking_method } from "../../../components/utils/rdkit_loader";
+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 ScaffNetDets from "../../../components/tools/toolComp/ScaffNetDets";
+
+export default function DisplayGraph() {
+  const { rdkit } = useContext(RDKitContext);
+  const { ligand } = useContext(LigandContext);
+  const [loaded, setLoaded] = useState(false);
+  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);
+      setGraph(graph);
+      setLoaded(true);
+    }, 80);
+  }, []);
+
+  if (!loaded) {
+    return (
+      <div className="tools-container">
+        <Loader loadingText="Networking is hard..." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="tools-container">
+      <TabWrapper>
+        <Tabs title="Scaffold Details">
+          <ScaffNetDets graph={graph} />
+        </Tabs>
+        <Tabs title="Whole Network">
+          <ScaffoldNetworkWholeGraph graph={graph} />
+        </Tabs>
+      </TabWrapper>
+    </div>
+  );
+}