Merge pull request #67 from glycojones/add_database

Added database API

webserver/package.json

@@ -13,14 +13,15 @@
     "@types/jest": "^29.5.6",
     "@types/node": "^20.8.9",
     "moorhen": "file:moorhen-0.5.1.tgz",
+    "pako": "^2.1.0",
     "plotly.js": "^2.26.0",
     "react": "^18.2.0",
+    "react-collapsed": "^4.1.2",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-inlinesvg": "^3.0.2",
     "react-plotly.js": "^2.6.0",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^6.14.2",
     "react-spinners": "^0.13.8",
     "react-table": "^7.8.0",
     "styled-components": "^6.0.6",
@@ -36,6 +37,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
+    "react-router-dom": "^6.20.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.5",

webserver/src/App.tsx

@@ -1,14 +1,20 @@
 import { useEffect, useState, Suspense } from 'react'
 import './App.css'
 import HomeSection from './pages/Home/HomeSection'
+import DatabaseSection from './pages/DatabaseSection/DatabaseSection'
+
 import PageLoad from './components/Loading/PageLoad'
+import {  Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <Suspense fallback={<PageLoad/>}>
-
+    <Suspense fallback={<PageLoad />}>
       <div className='flex flex-col'>
-        <HomeSection />
+
+          <Routes>
+            <Route index path="/" element={<HomeSection />}/>
+            <Route path="/database" element={<DatabaseSection />} />
+          </Routes>
       </div>
     </Suspense>
   )

webserver/src/components/DatabaseComponents/BFactorVsRSCC.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState, lazy } from 'react';
+
+const Plot = lazy(() => import('react-plotly.js'));
+
+function calculate_points(data) {
+    let glycans = data.data.glycans
+
+    let x_axis = []
+    let y_axis = []
+    let text = []
+
+    for (const key in glycans) {
+        let glycan_type = glycans[key]
+        for (let i = 0; i < glycan_type.length; i++) {
+            let sugars = glycan_type[i].Sugars
+            for (let j = 0; j < sugars.length; j++) {
+                x_axis.push(sugars[j].BFactor)
+                y_axis.push(sugars[j].RSCC)
+                text.push(sugars[j]["Sugar ID"])
+            }
+        }
+    }
+
+
+    return [x_axis, y_axis, text]
+}
+
+export default function BFactorVsRSCC(props) {
+
+    const [trace, setTrace] = useState({})
+
+    useEffect(() => {
+        const [x_axis, y_axis, text] = calculate_points(props)
+
+        setTrace({
+            x: x_axis,
+            y: y_axis,
+            text: text,
+            hoverinfo: "text",
+            mode: 'markers',
+            type: 'scatter',
+            marker: {
+                size: 8,
+                color: 'green',
+                symbol: ['o']
+            },
+        })
+    }, [])
+
+
+    return (
+        <div className='flex flex-col mx-auto'>
+            <span className='text-xl'>BFactor vs RSCC</span>
+            <Plot
+                data={[
+                    trace
+                ]}
+                layout={{
+                    width: 500, height: 400, title: "",
+                    plot_bgcolor: "#D6D9E5",
+                    paper_bgcolor: "#D6D9E5",
+                    margin: {
+                        l: 50,
+                        r: 50,
+                        b: 50,
+                        t: 10,
+                        pad: 4
+                    },
+                    yaxis: {
+                        title: {
+                            text: "RSCC"
+                        },
+                        fixedrange: true,
+                        range: [0, 1],
+                        showgrid: true
+                    },
+                    xaxis: {
+                        title: {
+                            text: "B Factor"
+                        },
+                        fixedrange: true,
+                        range: [0, 100],
+                        showgrid: true
+                    },
+                }}
+            />
+        </div>
+    )
+
+
+
+}

webserver/src/components/DatabaseComponents/CremerPopleGraph.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState, lazy } from 'react';
+
+const Plot = lazy(() => import('react-plotly.js'));
+
+function calculate_points(data) {
+    let glycans = data.data.glycans
+
+    let x_axis = []
+    let y_axis = []
+    let text = []
+
+    for (const key in glycans) {
+        let glycan_type = glycans[key]
+        for (let i = 0; i < glycan_type.length; i++) {
+            let sugars = glycan_type[i].Sugars
+            for (let j = 0; j < sugars.length; j++) {
+
+                x_axis.push(sugars[j].Phi)
+                y_axis.push(sugars[j].Theta)
+                text.push(sugars[j]["Sugar ID"])
+            }
+        }
+    }
+
+
+    return [x_axis, y_axis, text]
+}
+
+export default function CremerPopleGraph(props) {
+
+    const [trace, setTrace] = useState({})
+
+    useEffect(() => {
+        const [x_axis, y_axis, text] = calculate_points(props)
+
+        setTrace({
+            x: x_axis,
+            y: y_axis,
+            text: text,
+            hoverinfo: "text",
+            mode: 'markers',
+            type: 'scatter',
+            marker: {
+                size: 8,
+                color: 'green',
+                symbol: ['o']
+            },
+        })
+
+    }, [])
+
+
+    return (
+        <div className='flex flex-col mx-auto'>
+            <span className='text-xl'>Conformational landscape for pyranoses</span>
+
+            <Plot
+                data={[
+                    trace
+                ]}
+                layout={{
+                    width: 500, height: 400, title: "",
+                    plot_bgcolor: "#D6D9E5",
+                    paper_bgcolor: "#D6D9E5",
+                    margin: {
+                        l: 50,
+                        r: 50,
+                        b: 50,
+                        t: 10,
+                        pad: 4
+                    },
+
+                    yaxis: {
+                        title: {
+                            text: "Theta / °"
+                        },
+                        fixedrange: true,
+                        range: [180, 0],
+                        showgrid: true
+                    },
+                    xaxis: {
+                        title: {
+                            text: "Phi / °"
+                        },
+                        fixedrange: true,
+                        range: [360, 0],
+                        showgrid: true
+                    },
+                }}
+            />
+
+        </div>
+
+    )
+
+
+
+}