Merge pull request #61 from glycojones/migration_to_typescript

Migration to typescript
glycojones · Nov 10, 2023 · 4173198 · 4173198
2 parents 7ce17b8 + 54bd74d
commit 4173198
Show file tree

Hide file tree

Showing 30 changed files with 627 additions and 232 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,4 +105,5 @@ old_cmake*/*
 *.mov
 *.zip
 dependencies/gemmi
-web/*
+web/*
+*___api___*
diff --git a/webserver/index.html b/webserver/index.html
@@ -34,6 +34,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script src="/src/main.jsx" type="module"></script>
+<script src="/src/main.tsx" type="module"></script>
 </body>
 </html>
diff --git a/webserver/package-lock.json b/webserver/package-lock.json
diff --git a/webserver/package.json b/webserver/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/jest": "^29.5.6",
+    "@types/node": "^20.8.9",
     "moorhen": "file:moorhen-0.5.1.tgz",
     "plotly.js": "^2.26.0",
     "react": "^18.2.0",
@@ -22,12 +24,11 @@
     "react-spinners": "^0.13.8",
     "react-table": "^7.8.0",
     "styled-components": "^6.0.6",
-    "typescript": "^5.1.6",
     "vite-plugin-top-level-await": "^1.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.45.0",
@@ -36,6 +37,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
     "vite": "^4.4.5",
     "vite-plugin-cross-origin-isolation": "^0.1.6",
     "vite-plugin-wasm": "^3.2.2"

diff --git a/webserver/src/App.jsx → webserver/src/App.tsx b/webserver/src/App.jsx → webserver/src/App.tsx
@@ -4,15 +4,13 @@ import HomeSection from './pages/Home/HomeSection'
 import PageLoad from './components/Loading/PageLoad'
 
 function App() {
-  const [resetApp, setResetApp] = useState(false)
-
   return (
     <Suspense fallback={<PageLoad/>}>
 
-    <div className='flex flex-col'>
-      <HomeSection/>
-     </div>
-     </Suspense>
+      <div className='flex flex-col'>
+        <HomeSection />
+      </div>
+    </Suspense>
   )
 }
 

diff --git a/.../components/GlycanDetail/GlycanDetail.jsx → .../components/GlycanDetail/GlycanDetail.tsx b/.../components/GlycanDetail/GlycanDetail.jsx → .../components/GlycanDetail/GlycanDetail.tsx
@@ -1,10 +1,13 @@
 import {lazy, useCallback, useEffect, useState} from "react";
 import {MoorhenContainer, MoorhenContextProvider} from 'moorhen'
-import GlycanDetailInfoBox from "./GlycanDetailInfoBox";
-import TorsionMultiPlot from "../TorsionPlot/TorsionMultiPlot";
 
+import {GlycanDetailProps} from "../../interfaces/types"
+import { type } from "os";
+const GlycanDetailInfoBox = lazy(() => import('./GlycanDetailInfoBox'));
+const TorsionMultiPlot = lazy(() => import('../TorsionPlot/TorsionMultiPlot.tsx'));
 
-export default function GlycanDetail(props) {
+
+export default function GlycanDetail(props: GlycanDetailProps) {
 
     async function handle_click(e) { 
 
@@ -14,7 +17,8 @@ export default function GlycanDetail(props) {
 
     }
 
-    const ref = useCallback((node) => {
+    const ref = useCallback((node: HTMLElement | null) => {
+        console.log("NODE", node, typeof(node))
         if (node !== null) {
 
             let useList = node.querySelectorAll('use')
@@ -27,7 +31,7 @@ export default function GlycanDetail(props) {
         document.querySelectorAll("svg")[0].setAttribute("width", "50vw")
         document.querySelectorAll("svg")[0].setAttribute("height", "100%")
 
-    })
+    }, [])
 
     async function handleContourChange(e) { 
         props.map.contourLevel = Number(e.target.value)
@@ -56,7 +60,7 @@ export default function GlycanDetail(props) {
                     </button>
                 </div>
                 <h2 className="">Glycan Details</h2>
-                <div class="flex-1"></div>
+                <div className="flex-1"></div>
             </div>
 
             <div className="my-5 w-full">
@@ -74,7 +78,7 @@ export default function GlycanDetail(props) {
 
             <h3 className="text-left text-xl w-full">Visualise</h3>
 
-            <label for="contour-range-text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white translate-y-10">Map Contour</label>
+            <label htmlFor="contour-range-text" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white translate-y-10">Map Contour</label>
             <input id="contour-range" type="range" min="0" max="1" step="0.05" defaultValue="0.2" className="w-36 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 translate-y-10" onChange={handleContourChange}/>
 
             <MoorhenContextProvider defaultBackgroundColor={[51, 65, 85, 1]}>

diff --git a/...rc/components/Information/Information.jsx → ...rc/components/Information/Information.tsx b/...rc/components/Information/Information.jsx → ...rc/components/Information/Information.tsx
@@ -1,4 +1,4 @@
-export function Information({}) {
+export function Information() {
     return <div className="text-secondary bg-tertiary pb-12">
         <div className="flex flex-col">
             <div className="text-center sm:text-left sm:text-center mb-4 px-12 pt-12 sm:p-12 flex flex-col">

diff --git a/webserver/src/components/Loading/Loading.jsx → webserver/src/components/Loading/Loading.tsx b/webserver/src/components/Loading/Loading.jsx → webserver/src/components/Loading/Loading.tsx
@@ -1,11 +1,10 @@
 import ClipLoader from "react-spinners/ClipLoader";
 
-export default function Loading({loadingText}) {
-
+export default function Loading(props: {loadingText: string}) {
     return (
         <div
             className="flex flex-col items-center justify-center px-12 m-12 h-64 min-w-64 border-2 border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 dark:border-gray-600">
-            <h3 className="my-6">{loadingText}</h3>
+            <h3 className="my-6">{props.loadingText}</h3>
             <ClipLoader
                 loading={true}
                 size={100}

diff --git a/...er/src/components/NoGlycans/NoGlycans.jsx → ...er/src/components/NoGlycans/NoGlycans.tsx b/...er/src/components/NoGlycans/NoGlycans.jsx → ...er/src/components/NoGlycans/NoGlycans.tsx
@@ -1,23 +1,22 @@
 
+import {NoGlycansProps} from "../../interfaces/types.tsx"
 
-export default function NoGlycans({
-    setResetApp, text
-}) {
+export default function NoGlycans(props: NoGlycansProps) {
     return (
         <div
             className="flex flex-col m-12 px-12 pt-8 w-64 
             items-center text-center justify-between h-64 border-2
             transition-all border-gray-300 rounded-lg 
             bg-gray-50 flex-grow-0">
 
-            <p>{text}</p>
+            <p>{props.text}</p>
 
             <div className="flex space-x-4 py-6">
                 <button
                     className="bg-gray hover:bg-hover border-gray-800 border-2 text-primary opacity-60 font-bold py-2 px-4 rounded"
                     onClick={() => { 
 
-                        setResetApp(true)
+                        props.setResetApp(true)
                          }}>Retry</button>
             </div>
 

diff --git a/.../src/components/PrivateerDisplay/SNFG.jsx → .../src/components/PrivateerDisplay/SNFG.tsx b/.../src/components/PrivateerDisplay/SNFG.jsx → .../src/components/PrivateerDisplay/SNFG.tsx
@@ -1,10 +1,11 @@
 import {lazy, useEffect, useRef, useState} from "react";
 import {MoorhenMap, MoorhenMolecule} from 'moorhen'
-import GlycanDetail from "../GlycanDetail/GlycanDetail"
+import {SNFGProps} from "../../interfaces/types"
 
-const SVGTable = lazy(() => import('../SVGTable/SVGTable'));
+const SVGTable = lazy(() => import('../SVGTable/SVGTable.tsx'));
+const GlycanDetail = lazy(() => import('../GlycanDetail/GlycanDetail.tsx'));
 
-export default function SNFG(props) {
+export default function SNFG (props: SNFGProps) {
     const [rowClicked, setRowClicked] = useState(false)
     const [rowID, setRowID] = useState(0)
     const [hideMoorhen, setHideMoorhen] = useState(true)

diff --git a/...rver/src/components/SVGTable/SVGTable.jsx → ...rver/src/components/SVGTable/SVGTable.tsx b/...rver/src/components/SVGTable/SVGTable.jsx → ...rver/src/components/SVGTable/SVGTable.tsx
@@ -2,6 +2,7 @@ import {useMemo, useRef, useState} from 'react';
 import {useTable} from 'react-table';
 import {COLUMNS} from "../../data/Constants"
 import styled from 'styled-components'
+import {SVGTableProps} from "../../interfaces/types"
 
 
 let Styles = styled.div`
@@ -68,24 +69,25 @@ table tr:last-of-type td:last-of-type {
 }
 `
 
-  export default function SVGTable({tableData, allowRowClick, rowClick, setRowClicked, setRowID}) {   
-    const [data, setData] = useState(tableData);
+  export default function SVGTable(props: SVGTableProps) { 
+    const [data, setData] = useState(props.tableData);
     const controls = useRef()
 
     const columns = useMemo(() => COLUMNS, []);
     const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = useTable({columns, data});
 
 
-    const handleRowClick = ((rowId) => {
-      if (allowRowClick) { 
-        setRowClicked(!rowClick)
-        setRowID(rowId)
+    const handleRowClick = ((rowId: number) => {
+      if (props.allowRowClick) { 
+        props.setRowClicked(!props.rowClick)
+        props.setRowID(rowId)
       }
     })
 
 
     return (
-        <Styles $allowRowClick={allowRowClick}>
+      // @ts-ignore
+        <Styles $allowRowClick={props.allowRowClick}>
             <div className="container" id='table'>
                 <table {...getTableProps()}>
                     <thead>
@@ -103,7 +105,7 @@ table tr:last-of-type td:last-of-type {
                     {rows.map((row) => {
                         prepareRow(row);
                         return (
-                            <tr {...row.getRowProps()} onClick={() => {if(allowRowClick) {handleRowClick(row.id)}}}
+                            <tr {...row.getRowProps()} onClick={() => {if(props.allowRowClick) {handleRowClick(row.id)}}}
                                 title="Click to visualise." id='row'>
                                 {row.cells.map((cell) => {
                                     return (

diff --git a/...mponents/TorsionPlot/TorsionMultiPlot.jsx → ...mponents/TorsionPlot/TorsionMultiPlot.tsx b/...mponents/TorsionPlot/TorsionMultiPlot.jsx → ...mponents/TorsionPlot/TorsionMultiPlot.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
-import TorsionPlot from "./TorsionPlot";
+import { useEffect, lazy} from "react";
+
+const TorsionPlot = lazy(() => import('./TorsionPlot'));
 
 
 function sortTorsions(torsions) { 
@@ -46,9 +47,8 @@ function TorsionMultiPlotTabs({torsions, setTab}) {
     return (
        linkage_array.map((item, index) => { 
         return (
-
-            <li class="mr-2">
-                    <button class="inline-block p-4 border-b-2 border-transparent border-secondary rounded-t-lg hover:scale-105" onClick={() => {setTab(index)}}>{item}</button>
+            <li className="mr-2" key={item}>
+                    <button className="inline-block p-4 border-b-2 border-transparent border-secondary rounded-t-lg hover:scale-105" onClick={() => {setTab(index)}}>{item}</button>
             </li>
 
         )
@@ -67,8 +67,8 @@ export default function TorsionMultiPlot({torsions, tab, setTab}) {
 
     return (
         <div className="flex flex-col align-middle justify-center items-center space-y-6 ">  
-            <div class="text-sm font-medium text-center text-gray-500 border-gray-200 text-gray-400 border-gray-700">
-                <ul class="flex flex-wrap -mb-px mt-2">                
+            <div className="text-sm font-medium text-center text-gray-500 border-gray-200 text-gray-400 border-gray-700">
+                <ul className="flex flex-wrap -mb-px mt-2">                
                     <TorsionMultiPlotTabs torsions={torsions} setTab={setTab}/>   
                 </ul>
             </div>

diff --git a/...rc/components/TorsionPlot/TorsionPlot.jsx → ...rc/components/TorsionPlot/TorsionPlot.tsx b/...rc/components/TorsionPlot/TorsionPlot.jsx → ...rc/components/TorsionPlot/TorsionPlot.tsx
diff --git a/webserver/src/components/Upload/Upload.jsx → webserver/src/components/Upload/Upload.tsx b/webserver/src/components/Upload/Upload.jsx → webserver/src/components/Upload/Upload.tsx
@@ -2,8 +2,9 @@ import { useEffect, useState } from "react";
 import UploadButton from "./UploadButton"
 import Submit from "../Submit/Submit";
 import PDBFetch from "../PDBFetch/PDBFetch";
+import {HeaderProps, UploadButtonProps} from "../../interfaces/types"
 
-export default function Upload(props) {
+export default function Upload(props: HeaderProps) {
     const [showUploadAgain, setShowUploadAgain] = useState(true)
     const [showSubmit, setShowSubmit] = useState(false)
     const [allowSubmit, setAllowSubmit] = useState(false)
@@ -43,10 +44,15 @@ export default function Upload(props) {
         }
     }, [props.coordinateFile, props.reflectionFile])
 
+    const uploadButtonProps: UploadButtonProps = {
+        setCoordinateFile: props.setCoordinateFile,
+        setReflectionFile: props.setReflectionFile
+    }
+
     return (
         <div className="flex flex-wrap align-middle items-center justify-center">
-            { showUploadAgain == true ? <UploadButton setCoordinateFile={props.setCoordinateFile} setReflectionFile={props.setReflectionFile}/>: <></>}
-            {showSubmit == true ? 
+            { showUploadAgain === true ? <UploadButton {...uploadButtonProps}/>: <></>}
+            {showSubmit === true ? 
              <Submit 
                 coordinateFile={props.coordinateFile} 
                 reflectionFile={props.reflectionFile} 
@@ -55,11 +61,11 @@ export default function Upload(props) {
                 allowSubmit={allowSubmit}
             /> : <></>}
 
-            {showPDBFetch == true ? 
+            {showPDBFetch === true ? 
              <div className="mx-6 w-full lg:w-6 sm:w-full text-center">OR</div>
              :
               <></>} 
-            {showPDBFetch == true ? 
+            {showPDBFetch === true ? 
              <PDBFetch PDBCode={props.PDBCode} setPDBCode={props.setPDBCode} submitPressed={props.setSubmit}/> 
              :
               <></>} 

diff --git a/webserver/src/components/Upload/UploadButton.jsx b/webserver/src/components/Upload/UploadButton.jsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,4 +105,5 @@ old_cmake*/* @@
     *.mov
     *.zip
     dependencies/gemmi
-    web/*
+    web/*
+    *___api___*