Refine UI and conditional rendering across various components

This commit enhances UI and implements conditional rendering in multiple components. Notably, CremerPopleGraph's scatter plots receive color and legend updates, while DatabaseHeader and DatabaseResult's flex containers are widened. Improvements are made to SugarList and BFactorVsRSCC visual elements, and an extraneous hover title in SNFGList is removed. Additionally, a new data extraction function is included in Constants.tsx for better data accessibility and presentation.

webapp/src/data/Constants.tsx

@@ -139,46 +139,102 @@ export const DatabaseColumns = [
     },
 ];
 
+function extracted(props, accessor) {
+    const typeValue = props.row.original[accessor];
+    const diagnostic = props.row.original.diagnostic;
+
+    const colour = diagnostic === "yes" ? "text-red-600" : (diagnostic === "check" ? "text-yellow-600": "")
+    return (
+        <span
+            className={colour}>
+            {typeValue}
+        </span>
+    );
+}
+
 export const SugarListColumns = [
     {
         Header: 'Sugar ID',
         accessor: 'sugarId',
+        Cell: (props) => extracted(props, 'sugarId'),
+    },
+    {
+        Header: 'Conformation',
+        accessor: 'conformation',
+        Cell: (props: {
+            row: { original: { conformation: any; diagnostic: any } };
+        }) => {
+            const typeValue = props.row.original.conformation;
+            const diagnostic = props.row.original.diagnostic;
+            const colour = diagnostic === "yes" ? "text-red-400" : (diagnostic === "check" ? "text-yellow-600": "")
+
+            const regex = /([a-zA-Z]*?\d*)([a-zA-Z])(\d*)/;
+            const formattedString = typeValue.replace(
+                regex,
+                (_, before, letter, after) => {
+                    let string = '';
+                    if (before) {
+                        string += '<sup>' + before + '</sup>';
+                    }
+                    string += letter;
+                    if (after) {
+                        string += '<sub>' + after + '</sub>';
+                    }
+                    return string;
+                }
+            );
+            return (
+                <div
+                    className={colour}
+                    dangerouslySetInnerHTML={{ __html: formattedString }}
+                ></div>
+            );
+        },
     },
     {
         Header: 'Q',
         accessor: 'q',
+        Cell: (props) => extracted(props, 'q'),
     },
     {
         Header: 'Phi',
         accessor: 'phi',
+        Cell: (props) => extracted(props, 'phi'),
     },
     {
         Header: 'Theta',
         accessor: 'theta',
+        Cell: (props) => extracted(props, 'theta'),
     },
+
     {
         Header: 'RSCC',
         accessor: 'rscc',
+        Cell: (props) => extracted(props, 'rscc'),
     },
     {
         Header: 'B Factor',
         accessor: 'bFactor',
+        Cell: (props) => extracted(props, 'bFactor'),
     },
     {
         Header: 'Detected Type',
         accessor: 'detectedType',
+        Cell: (props) => extracted(props, 'detectedType'),
     },
-    {
-        Header: 'mFo',
-        accessor: 'mFo',
-    },
+    // {
+    //     Header: 'mFo',
+    //     accessor: 'mFo',
+    // },
     {
         Header: 'Type',
         accessor: 'type',
+        Cell: (props) => extracted(props, 'type'),
     },
     {
         Header: 'Diagnostic',
         accessor: 'diagnostic',
+        Cell: (props) => extracted(props, 'diagnostic'),
     },
 ];
 

webapp/src/database/DatabaseComponents/BFactorVsRSCC.tsx

@@ -42,7 +42,7 @@ export default function BFactorVsRSCC(props) {
             marker: {
                 size: 1,
                 color: 'rgba(173,181,189,0.5)',
-                symbol: ['o'],
+                symbol: 'x',
             },
         });
 
@@ -55,8 +55,8 @@ export default function BFactorVsRSCC(props) {
             type: 'scatter',
             marker: {
                 size: 8,
-                color: 'green',
-                symbol: ['o'],
+                color: 'blue',
+                symbol: 'o',
             },
         });
     }, [props]);

webapp/src/database/DatabaseComponents/CremerPopleGraph.tsx

@@ -53,7 +53,7 @@ export default function CremerPopleGraph(props: any) {
             marker: {
                 size: 8,
                 color: 'blue',
-                symbol: ['o'],
+                symbol: 'o',
             },
             name: 'No Issues',
         });
@@ -67,7 +67,7 @@ export default function CremerPopleGraph(props: any) {
             marker: {
                 size: 8,
                 color: 'red',
-                symbol: ['o'],
+                symbol: 'x',
             },
             name: 'Issues',
         });
@@ -89,9 +89,7 @@ export default function CremerPopleGraph(props: any) {
                         y: 0.5,
                         bgcolor: 'rgba(0,0,0,0)',
                         borderwidth: 0.2,
-                        bordercolor: "gray"
-
-
+                        bordercolor: 'gray',
                     },
                     width: 500,
                     height: 400,

webapp/src/database/DatabaseComponents/SNFGList.tsx

@@ -140,7 +140,6 @@ export default function SNFGList(props) {
                             return (
                                 <tr
                                     {...row.getRowProps()}
-                                    title="Click to visualise."
                                     id="row"
                                     key={row.name}
                                 >

webapp/src/database/DatabaseComponents/SugarList.tsx

@@ -192,7 +192,6 @@ export default function SugarList(props) {
                             return (
                                 <tr
                                     {...row.getRowProps()}
-                                    title="Click to visualise."
                                     id="row"
                                     key={row.name}
                                 >

webapp/src/database/DatabaseResult/DatabaseResult.tsx

@@ -36,7 +36,7 @@ export default function DatabaseResult(props: DatabaseResultProps) {
     return (
         <>
             {selectedData !== undefined ? (
-                <div className="flex flex-col space-y-6">
+                <div className="flex w-full flex-col space-y-6">
                     <h2 className="text-center">
                         Validation Report - {props.PDBCode}
                         {props.pdbRedoResults !== '' ? toggleSwitch() : <></>}

webapp/src/database/Header/DatabaseHeader.tsx

@@ -18,7 +18,7 @@ export function DatabaseHeader(props: DatabaseHeaderProps): ReactElement {
     return (
         <div className="bg-gray text-primary">
             <NavBar />
-            <div className="flex justify-center mb-6">
+            <div className="flex w-full justify-center mb-6">
                 {!props.fallback ? (
                     <Suspense
                         fallback={

webapp/src/main.tsx

@@ -3,10 +3,10 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 import { BrowserRouter } from 'react-router-dom';
-import ReactGA from "react-ga4";
-import {onCLS, onFID, onLCP} from 'web-vitals';
+import ReactGA from 'react-ga4';
+import { onCLS, onFID, onLCP } from 'web-vitals';
 
-ReactGA.initialize("G-PGPMR0MEYT");
+ReactGA.initialize('G-PGPMR0MEYT');
 ReactDOM.createRoot(document.getElementById('root')).render(
     // <React.StrictMode>
     <BrowserRouter>
@@ -15,18 +15,17 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 
     // </React.StrictMode>,
 );
-const SendAnalytics = ()=> {
+const SendAnalytics = () => {
     ReactGA.send({
-        hitType: "pageview",
+        hitType: 'pageview',
         page: window.location.pathname,
     });
-}
+};
 
 try {
     onCLS(SendAnalytics);
     onLCP(SendAnalytics);
     onFID(SendAnalytics);
-}
-catch (err) {
-    console.error(err)
+} catch (err) {
+    console.error(err);
 }