Merge pull request #90 from glycojones/refactor-frontend

Refactor Frontend Code and Fix Cryo-EM issue

src/privateer/cpp/privateer-bind.cpp

@@ -49,19 +49,27 @@ clipper::MiniMol read_molecule(const std::string &file, const std::string &name)
     return {};
   }
   ::gemmi::Structure structure = ::gemmi::read_structure_from_char_array(c_data, size, name);
-  std::cout << "structure read" << std::endl;
+  std::cout << "[Privateer] Successfully read structure" << std::endl;
   clipper::GEMMIFile gemmi_file;
   clipper::GemmiStructure *gemmi_structure = &gemmi_file;
   gemmi_structure->structure_ = structure;
   clipper::MiniMol mol;
   gemmi_file.import_minimol(mol);
+
+   clipper::Cell cell = mol.cell();
+   std::cout << cell.format() << std::endl;
+  if (cell.a() == 1.0 && cell.b() == 1.0 && cell.c() == 1.0 ) {
+      std::cout << "[Privateer] This cell is 1A, inflating the cell but this will lose crystal contact information" << std::endl;
+      mol.init ( clipper::Spacegroup::p1(), clipper::Cell(clipper::Cell_descr ( 300, 300, 300, 90, 90, 90 )) );
+  }
+  std::cout << "[Privateer] Created gemmi molecule" << std::endl;
   return mol;
 }
 
 std::vector<clipper::MGlycan> calculate_validation(clipper::MiniMol &mol)
 {
   privateer::json::GlobalTorsionZScore torsions_zscore_database = privateer::json::read_json_file_for_torsions_zscore_database("privateer_torsions_z_score_database.json");
-  const clipper::MAtomNonBond &manb = clipper::MAtomNonBond(mol, 1.0);
+  clipper::MAtomNonBond manb = clipper::MAtomNonBond(mol, 1.0);
   clipper::MGlycology mgl = clipper::MGlycology(mol, manb, torsions_zscore_database, false);
   return mgl.get_list_of_glycans();
 }
@@ -134,6 +142,7 @@ std::vector<ResultsEntry> validate(const std::string &file, const std::string &n
 
   clipper::MiniMol mol = read_molecule(file, name);
   std::vector<clipper::MGlycan> glycans = calculate_validation(mol);
+  std::cout << "Glycans found - " << glycans.size() << std::endl;
   std::vector<ResultsEntry> results = format_validation(glycans);
   return results;
 }

webapp/src/App.tsx

@@ -1,18 +1,15 @@
 import React, { useMemo, Suspense } from 'react';
 import './App.css';
-import HomeSection from './pages/Home/HomeSection';
-import DatabaseSection from './pages/DatabaseSection/DatabaseSection';
-import Statistics from './pages/Statistics/Statistics.tsx';
-
+import Home from './routes/Home/Home.tsx';
+import Database from './routes/Database/Database.tsx';
+import Statistics from './routes/Statistics/Statistics.tsx';
 import PageLoad from './shared/Loading/PageLoad';
 import { Routes, Route, useSearchParams, useLocation } from 'react-router-dom';
-// import APIForwarding from "./components/APIComponent/APIForwarding";
 
 function useQuery() {
     const { search } = useLocation();
     return useMemo(() => new URLSearchParams(search), [search]);
 }
-
 function App() {
     const query = useQuery();
     const [_, setSearchParams] = useSearchParams();
@@ -22,18 +19,17 @@ function App() {
             <div id="main" className="flex flex-col">
                 <Routes>
                     {/* @ts-expect-error */}
-                    <Route index path="/" element={<HomeSection />} />
+                    <Route index path="/" element={<Home />} />
                     <Route
                         path="/database"
                         element={
-                            <DatabaseSection
+                            <Database
                                 query={query}
                                 setSearchParams={setSearchParams}
                             />
                         }
                     />
                     <Route path="/statistics" element={<Statistics />} />
-                    {/* <Route path="/api" element={<APIForwarding query={query} />} /> */}
                 </Routes>
             </div>
         </Suspense>

webapp/src/layouts/DatabaseHeader.tsx → webapp/src/database/Header/DatabaseHeader.tsx

@@ -1,16 +1,17 @@
 import React, { lazy, type ReactElement, Suspense } from 'react';
-import { type DatabaseHeaderProps } from '../interfaces/types';
-
-const Loading = lazy(async () => await import('../shared/Loading/Loading.tsx'));
-const NavBar = lazy(async () => await import('./NavBar.tsx'));
+import { type DatabaseHeaderProps } from '../../interfaces/types.ts';
+const Loading = lazy(
+    async () => await import('../../shared/Loading/Loading.tsx')
+);
+const NavBar = lazy(async () => await import('../../layouts/NavBar.tsx'));
 const NoGlycans = lazy(
-    async () => await import('../shared/NoGlycans/NoGlycans.tsx')
+    async () => await import('../../shared/NoGlycans/NoGlycans.tsx')
 );
 const DatabaseFetch = lazy(
-    async () => await import('../database/DatabaseFetch/DatabaseFetch.jsx')
+    async () => await import('../DatabaseFetch/DatabaseFetch.jsx')
 );
 const DatabaseResult = lazy(
-    async () => await import('../database/DatabaseResult/DatabaseResult.jsx')
+    async () => await import('../DatabaseResult/DatabaseResult.tsx')
 );
 
 export function DatabaseHeader(props: DatabaseHeaderProps): ReactElement {

webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx

@@ -45,18 +45,24 @@ export function GlycanDetailMoorhenView(props: {
         <div key={props.key} className="px-8 flex flex-col items-center">
             <h3 className="text-left text-xl w-full font-bold mt-2">
                 Visualise with <i>Moorhen</i>{' '}
-
-                <a href={props.pdbCode !== "" ? `https://moorhen.org/pdb/${props.pdbCode}` : "https://moorhen.org"}
-                   title="Go to Moorhen.org"
-                    onClick={(e) => {e.stopPropagation()}}
-                   onTouchStart={(e) => {
-                       e.stopPropagation();
-                   }}
-                   onMouseDown={(e) => {
-                       e.stopPropagation();
-                   }}
-                   target="_blank"
-                   rel="noopener noreferrer"
+                <a
+                    href={
+                        props.pdbCode !== ''
+                            ? `https://moorhen.org/pdb/${props.pdbCode}`
+                            : 'https://moorhen.org'
+                    }
+                    title="Go to Moorhen.org"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                    onTouchStart={(e) => {
+                        e.stopPropagation();
+                    }}
+                    onMouseDown={(e) => {
+                        e.stopPropagation();
+                    }}
+                    target="_blank"
+                    rel="noopener noreferrer"
                 >
                     <img className="inline h-8" src="./moorhen_logo.png"></img>
                 </a>

webapp/src/main/GlycanDetail/GlycanDetailSNFGBox.tsx

@@ -1,11 +1,11 @@
-import { type TableDataEntry } from '../../interfaces/types.ts';
+import { type ResultsEntry } from '../../interfaces/types.ts';
 import { useSelector } from 'react-redux';
 import React, { useCallback, useRef } from 'react';
 import { Tooltip, type TooltipRefProps } from 'react-tooltip';
 
 export function GlycanDetailSNFGBox(props: {
     key: string;
-    tableDataEntries: TableDataEntry[];
+    tableDataEntries: ResultsEntry[];
     rowID: number;
     saveSNFG: () => void;
 }) {
@@ -84,7 +84,7 @@ export function GlycanDetailSNFGBox(props: {
                     onClick={() => {
                         props.saveSNFG();
                     }}
-                    title="Download SNFG"
+                    title="Download PrivateerResults"
                     onTouchStart={(e) => {
                         e.stopPropagation();
                     }}

webapp/src/layouts/Header.tsx → webapp/src/main/Header/MainHeader.tsx

@@ -1,17 +1,19 @@
 import React, { lazy, type ReactElement, Suspense } from 'react';
-import SNFG from '../main/PrivateerDisplay/SNFG.tsx';
+import PrivateerResults from '../PrivateerResults/PrivateerResults.tsx';
 
-import { type HeaderProps } from '../interfaces/types';
+import { type HeaderProps } from '../../interfaces/types.ts';
 import { MoorhenReduxProvider } from 'moorhen';
 
-const Upload = lazy(async () => await import('../shared/Upload/Upload.tsx'));
-const Loading = lazy(async () => await import('../shared/Loading/Loading.tsx'));
-const NavBar = lazy(async () => await import('./NavBar.tsx'));
+const Upload = lazy(async () => await import('../../shared/Upload/Upload.tsx'));
+const Loading = lazy(
+    async () => await import('../../shared/Loading/Loading.tsx')
+);
+const NavBar = lazy(async () => await import('../../layouts/NavBar.tsx'));
 const NoGlycans = lazy(
-    async () => await import('../shared/NoGlycans/NoGlycans.tsx')
+    async () => await import('../../shared/NoGlycans/NoGlycans.tsx')
 );
 
-export function Header(props: HeaderProps): ReactElement {
+export function MainHeader(props: HeaderProps): ReactElement {
     let filename = '';
     if (props.PDBCode !== '') {
         filename = props.PDBCode;
@@ -33,7 +35,10 @@ export function Header(props: HeaderProps): ReactElement {
                         <Loading loadingText={props.loadingText} />
                     ) : (
                         <MoorhenReduxProvider>
-                            <SNFG {...props} filename={filename}></SNFG>
+                            <PrivateerResults
+                                {...props}
+                                filename={filename}
+                            ></PrivateerResults>
                         </MoorhenReduxProvider>
                     )}
                 </Suspense>

webapp/src/main/PrivateerDisplay/SNFG.tsx → webapp/src/main/PrivateerResults/PrivateerResults.tsx

@@ -19,7 +19,7 @@ import GlycanDetail from '../GlycanDetail/GlycanDetail.tsx';
 
 const SVGTable = lazy(async () => await import('../SVGTable/SVGTable.tsx'));
 
-export default function SNFG(props: SNFGProps): ReactElement {
+export default function PrivateerResults(props: SNFGProps): ReactElement {
     const [rowClicked, setRowClicked] = useState(false);
     const [rowID, setRowID] = useState(0);
     const [hideMoorhen, setHideMoorhen] = useState(true);
@@ -220,7 +220,7 @@ export default function SNFG(props: SNFGProps): ReactElement {
         controls,
         map,
         moorhenProps: collectedProps,
-        pdbCode: props.PDBCode
+        pdbCode: props.PDBCode,
     };
 
     const svgTableProps = {

webapp/src/pages/DatabaseSection/DatabaseSection.tsx → webapp/src/routes/Database/Database.tsx

@@ -1,14 +1,14 @@
 import React, { lazy, type ReactElement, useEffect, useState } from 'react';
 import { Information } from '../../shared/Information/Information.tsx';
 import { type DatabaseHeaderProps } from '../../interfaces/types';
-import { DatabaseHeader } from '../../layouts/DatabaseHeader.tsx';
+import { DatabaseHeader } from '../../database/Header/DatabaseHeader.tsx';
 
 const Footer = lazy(async () => await import('../../layouts/Footer.tsx'));
 const BorderElement = lazy(
     async () => await import('../../layouts/BorderElement.tsx')
 );
 
-export default function DatabaseSection(props: {
+export default function Database(props: {
     query: any;
     setSearchParams: any;
 }): ReactElement {

webapp/src/pages/Home/HomeSection.tsx → webapp/src/routes/Home/Home.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, useEffect, useState } from 'react';
-import { Header } from '../../layouts/Header';
+import { MainHeader } from '../../main/Header/MainHeader.tsx';
 import { Information } from '../../shared/Information/Information.tsx';
 
 // @ts-expect-error: Emscripten Generated JS does not conform to typescript conventions
@@ -19,14 +19,14 @@ const BorderElement = lazy(
     async () => await import('../../layouts/BorderElement.tsx')
 );
 
-export default function HomeSection(): Element {
+export default function Home(): Element {
     const [coordinateFile, setCoordinateFile] = useState<File | null>(null);
     const [reflectionFile, setReflectionFile] = useState<File | null>(null);
     const [PDBCode, setPDBCode] = useState<string>('');
     const [fileContent, setFileContent] = useState<string | ArrayBuffer>('');
     const [mtzData, setMtzData] = useState<Uint8Array | null>(null);
     const [submit, setSubmit] = useState<boolean>(false);
-    const [tableData, setTableData] = useState<TableDataEntry[] | null>(null);
+    const [tableData, setTableData] = useState<ResultsEntry[] | null>(null);
     const [loadingText, setLoadingText] = useState<string>(
         'Validating Glycans...'
     );
@@ -236,7 +236,7 @@ export default function HomeSection(): Element {
 
     return (
         <>
-            <Header {...mainProps} />
+            <MainHeader {...mainProps} />
             <BorderElement
                 topColor={'#D6D9E5'}
                 bottomColor={'#F4F9FF'}

webapp/src/pages/Statistics/Statistics.tsx → webapp/src/routes/Statistics/Statistics.tsx

@@ -1,6 +1,6 @@
 import React, { lazy, type ReactElement } from 'react';
 import { Information } from '../../shared/Information/Information.tsx';
-import StatisticsHeader from '../../layouts/StatisticsHeader.tsx';
+import StatisticsHeader from '../../statistics/Header/StatisticsHeader.tsx';
 const Footer = lazy(async () => await import('../../layouts/Footer.tsx'));
 const BorderElement = lazy(
     async () => await import('../../layouts/BorderElement.tsx')

webapp/src/layouts/StatisticsHeader.tsx → webapp/src/statistics/Header/StatisticsHeader.tsx

@@ -1,7 +1,7 @@
 import React, { lazy, type ReactElement } from 'react';
-import Graphs from '../statistics/Graphs/Graphs.tsx';
+import Graphs from '../Graphs/Graphs.tsx';
 
-const NavBar = lazy(async () => await import('./NavBar.tsx'));
+const NavBar = lazy(async () => await import('../../layouts/NavBar.tsx'));
 
 export default function StatisticsHeader(): ReactElement {
     return (

webapp/src/utils/fetch_from_pdb.ts

@@ -52,5 +52,7 @@ export async function fetchMap(PDBCode: string): Promise<ArrayBuffer | void> {
                 throw new Error('Map Not Found');
             });
         return await file;
-    } catch {}
+    } catch (e) {
+        return await Promise.reject(e);
+    }
 }