MenuBar Update and Configuration Updates

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .next
 out
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -10,7 +10,7 @@ For some, it will be a quick and dirty tool to analyze various targets and drugs
 Just in your browser. All the code runs in the browser. Using WASM and JS. The technologies include:
 
 - Next.js. Mostly the routing is easier. I have tried Vanilla ReactJS and it's not easy to set up everything from scratch. SvelteJS routing is weird, I never understood how to work with SvelteKit and host it on Github Pages. Part of the reason why QITB remains FREE forever is it is a static website.
-- (https://github.com/rdkit/rdkit/tree/master/Code/MinimalLib)[RDKit JS]. This is a custom build of the JS version with hopes for more contributions to the RDKit MinimalLib to import more functionalities into QITB. I need people with C++ knowledge to fix things. I have started porting things.
+- (https://github.com/rdkit/rdkit/tree/master/Code/MinimalLib)[RDKit JS]. This is a custom build of the JS version with hopes for more contributions to the RDKit MinimalLib to import more functionalities into QITB. I need people with C++ knowledge to fix things. I have started porting things though.
 - Pyodide and Scikit-Learn. What a gift to mankind.
 - Big thanks to ChEMBL for existing.
 

app/about/page.tsx

@@ -3,8 +3,12 @@ import AboutSection from '../../README.md';
 
 export default function About(){
     return(
-        <div style = {{marginTop : "40px"}}>
-            <ReactMarkdown skipHtml={true} children={AboutSection} />
+        <div className='container'>
+            <div className="content-wrapper" style = {{minHeight : "100vh"}}>
+                <div>
+                    <ReactMarkdown skipHtml={false} children={AboutSection} />
+                </div>
+            </div>
         </div>
     )
 }

app/page.tsx

@@ -7,14 +7,13 @@ export default function IndexPage() {
   const router = useRouter();
 
   return (
-    <div style = {{marginTop : "60px"}}>
-        <div className="content-wrapper">
+    <div className="container">
+        <div className="content-wrapper" style = {{marginTop : "60px"}}>
           <div className="image-container">
             <img src="logo.svg" alt="Logo" />
           </div>
           <div className="text-container">
             <h1>Cheminformatics in Your Browser Without Writing Code!</h1>
-            <br></br>
             <p className="larger-text">
               QITB simplifies the world of chemistry and data analysis. Easily
               upload chemical data or fetch it from trusted resources, and the
@@ -25,7 +24,7 @@ export default function IndexPage() {
               Also....the code behind this app is open source.
             </p>
             <br></br>
-            <button className="button" onClick={() => {router.push("/load_data")}}>
+            <button className="button" onClick={() => {router.push("/tools/load_data")}}>
               <h1>Start Here!</h1>
             </button>
           </div>

app/tools/activity/page.tsx

@@ -4,19 +4,18 @@ import { useContext } from "react";
 import LigandContext from "../../../context/LigandContext";
 import Histogram from "../../../components/tools/toolViz/Histogram";
 import { mean, median, mode, round } from "mathjs";
+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"]);
 
     return (
         <div className="tools-container">
-            <Histogram data={data} xLabel="Activity" yLabel="Count" toolTipData={ligand}>
+            <Histogram data={data} xLabel={target.activity_type} yLabel="Count" toolTipData={ligand}>
                 <span>Mean : {round(mean(data), 2) } || Median : {round(median(data), 2)} || Mode : {round(mode(data), 2)}</span>
             </Histogram>
-            <div className="">
-            </div>
-
         </div>
     )
 }

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

@@ -0,0 +1,65 @@
+"use client"
+
+import { useContext, useEffect, useRef, useState } from "react";
+import LigandContext from "../../../../context/LigandContext";
+import PyodideContext from "../../../../context/PyodideContext";
+import Scatterplot from "../../../../components/tools/toolViz/ScatterPlot";
+import Loader from "../../../../components/ui-comps/Loader";
+
+export default function PCA() {
+    const { ligand, setLigand } = useContext(LigandContext);
+    const { pyodide } = useContext(PyodideContext);
+    const [pca, setPCA] = useState<any[]>([]);
+    const containerRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        setLoaded(false);
+        if (ligand.some(obj => obj.pca)) {
+            setPCA(ligand.map(obj => obj.pca));
+            setLoaded(true);
+        } else {
+            runDimRed();
+        }
+    }, []);
+
+    globalThis.fp = ligand.map((obj) => obj.fingerprint);
+
+    async function runDimRed() {
+        setLoaded(false);
+        await pyodide.runPython(`
+      from sklearn.decomposition import PCA
+      import js
+
+      pca = PCA(n_components=2)
+      result = pca.fit_transform(js.fp)
+      js.pca = result
+    `);
+        const pca_result = globalThis.pca.toJs();
+        const pca_data_in = pca_result.map(([x, y]) => ({ x, y }));
+        let new_ligand = ligand.map((obj, index) => ({
+            ...obj,
+            pca: pca_data_in[index],
+        }));
+        setLigand(new_ligand);
+        setPCA(pca_data_in);
+        setLoaded(true);
+    }
+
+    return (
+        <div className="tools-container" ref={containerRef}>
+            <h1>Principal Component Analysis</h1>
+            {pca.length > 0 && (
+                <Scatterplot
+                    data={pca}
+                    colorProperty={ligand.map((obj) => obj.neg_log_activity_column)}
+                    hoverProp={ligand.map((obj) => obj.canonical_smiles)}
+                    xAxisTitle={"Principal Component 1"}
+                    yAxisTitle={"Principal Component 2"}
+                    id={ligand.map((obj) => obj.id)}
+                />
+            )}
+            {!loaded && <Loader loadingText="Doing PCA Magic" />}
+        </div>
+    );
+}