From 7f516accb8dba0f3535413cdfd4cf53643bedf94 Mon Sep 17 00:00:00 2001
From: Jessica Nash <janash@vt.edu>
Date: Thu, 5 Oct 2023 11:46:13 -0400
Subject: [PATCH 1/3] remove unused files

---
 frontend/src/Album.js  | 148 -----------------------------------------
 frontend/src/Album.tsx | 137 --------------------------------------
 2 files changed, 285 deletions(-)
 delete mode 100644 frontend/src/Album.js
 delete mode 100644 frontend/src/Album.tsx

diff --git a/frontend/src/Album.js b/frontend/src/Album.js
deleted file mode 100644
index e78dde2..0000000
--- a/frontend/src/Album.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import CameraIcon from '@mui/icons-material/PhotoCamera';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import CssBaseline from '@mui/material/CssBaseline';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-import MyPlot from "./Graph.js";
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
-
-const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-
-const theme = createTheme();
-
-export default function Album() {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <AppBar position="relative">
-        <Toolbar>
-          <CameraIcon sx={{ mr: 2 }} />
-          <Typography variant="h6" color="inherit" noWrap>
-            Album layout
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <main>
-        {/* Hero unit */}
-        <Box
-          sx={{
-            bgcolor: 'background.paper',
-            pt: 8,
-            pb: 6,
-          }}
-        >
-          <Container maxWidth="lg">
-            <Typography
-              component="h1"
-              variant="h2"
-              align="center"
-              color="text.primary"
-              gutterBottom
-            >
-              Album layout
-            </Typography>
-            <Typography variant="h5" align="center" color="text.secondary" paragraph>
-              Something short and leading about the collection below—its contents,
-              the creator, etc. Make it short and sweet, but not too short so folks
-              don&apos;t simply skip over it entirely!
-              
-            </Typography>
-
-            <Container maxWidth="100%">
-              <MyPlot
-              align="center"
-              ></MyPlot>
-
-            </Container>
-            
-            <Stack
-              sx={{ pt: 4 }}
-              direction="row"
-              spacing={2}
-              justifyContent="center"
-            >
-              <Button variant="contained">Main call to action</Button>
-              <Button variant="outlined">Secondary action</Button>
-            </Stack>
-          </Container>
-        </Box>
-        <Container sx={{ py: 8 }} maxWidth="md">
-          {/* End hero unit */}
-          <Grid container spacing={4}>
-            {cards.map((card) => (
-              <Grid item key={card} xs={12} sm={6} md={4}>
-                <Card
-                  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-                >
-                  <CardMedia
-                    component="img"
-                    sx={{
-                      // 16:9
-                      pt: '56.25%',
-                    }}
-                    image="https://source.unsplash.com/random"
-                    alt="random"
-                  />
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography gutterBottom variant="h5" component="h2">
-                      Heading
-                    </Typography>
-                    <Typography>
-                      This is a media card. You can use this section to describe the
-                      content.
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button size="small">View</Button>
-                    <Button size="small">Edit</Button>
-                  </CardActions>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
-        </Container>
-      </main>
-      {/* Footer */}
-      <Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer">
-        <Typography variant="h6" align="center" gutterBottom>
-          Footer
-        </Typography>
-        <Typography
-          variant="subtitle1"
-          align="center"
-          color="text.secondary"
-          component="p"
-        >
-          Something here to give the footer a purpose!
-        </Typography>
-        <Copyright />
-      </Box>
-      {/* End footer */}
-    </ThemeProvider>
-  );
-}
\ No newline at end of file
diff --git a/frontend/src/Album.tsx b/frontend/src/Album.tsx
deleted file mode 100644
index eb73d7e..0000000
--- a/frontend/src/Album.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import CameraIcon from '@mui/icons-material/PhotoCamera';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import CssBaseline from '@mui/material/CssBaseline';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
-
-const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-const theme = createTheme();
-
-export default function Album() {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <AppBar position="relative">
-        <Toolbar>
-          <CameraIcon sx={{ mr: 2 }} />
-          <Typography variant="h6" color="inherit" noWrap>
-            Album layout
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <main>
-        {/* Hero unit */}
-        <Box
-          sx={{
-            bgcolor: 'background.paper',
-            pt: 8,
-            pb: 6,
-          }}
-        >
-          <Container maxWidth="sm">
-            <Typography
-              component="h1"
-              variant="h2"
-              align="center"
-              color="text.primary"
-              gutterBottom
-            >
-              Album layout
-            </Typography>
-            <Typography variant="h5" align="center" color="text.secondary" paragraph>
-              Something short and leading about the collection below—its contents,
-              the creator, etc. Make it short and sweet, but not too short so folks
-              don&apos;t simply skip over it entirely.
-            </Typography>
-            <Stack
-              sx={{ pt: 4 }}
-              direction="row"
-              spacing={2}
-              justifyContent="center"
-            >
-              <Button variant="contained">Main call to action</Button>
-              <Button variant="outlined">Secondary action</Button>
-            </Stack>
-          </Container>
-        </Box>
-        <Container sx={{ py: 8 }} maxWidth="md">
-          {/* End hero unit */}
-          <Grid container spacing={4}>
-            {cards.map((card) => (
-              <Grid item key={card} xs={12} sm={6} md={4}>
-                <Card
-                  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-                >
-                  <CardMedia
-                    component="img"
-                    sx={{
-                      // 16:9
-                      pt: '56.25%',
-                    }}
-                    image="https://source.unsplash.com/random"
-                    alt="random"
-                  />
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography gutterBottom variant="h5" component="h2">
-                      Heading
-                    </Typography>
-                    <Typography>
-                      This is a media card. You can use this section to describe the
-                      content.
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button size="small">View</Button>
-                    <Button size="small">Edit</Button>
-                  </CardActions>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
-        </Container>
-      </main>
-      {/* Footer */}
-      <Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer">
-        <Typography variant="h6" align="center" gutterBottom>
-          Footer
-        </Typography>
-        <Typography
-          variant="subtitle1"
-          align="center"
-          color="text.secondary"
-          component="p"
-        >
-          Something here to give the footer a purpose!
-        </Typography>
-        <Copyright />
-      </Box>
-      {/* End footer */}
-    </ThemeProvider>
-  );
-}
\ No newline at end of file

From e8233416e61824f099d9fe06285df0d28567b86d Mon Sep 17 00:00:00 2001
From: Jessica Nash <janash@vt.edu>
Date: Thu, 5 Oct 2023 11:46:45 -0400
Subject: [PATCH 2/3] move theming options to outer level

---
 frontend/src/App.jsx                     | 13 +++++++++++++
 frontend/src/common/MoleculeUtils.jsx    |  6 +++---
 frontend/src/common/Navbar.jsx           |  2 +-
 frontend/src/components/KetcherPopup.jsx |  4 ----
 frontend/src/pages/Home.jsx              |  6 ++++--
 frontend/src/pages/Molecule.jsx          |  4 ++--
 frontend/src/pages/Neighbors.jsx         |  6 +++---
 frontend/src/pages/SearchHook.jsx        |  4 +---
 8 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9fef449..faceb32 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -8,6 +8,17 @@ import { Box } from '@mui/material'
 
 import Home from './pages/Home';
 
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#393536",
+    }
+  },
+});
+
 const Search = lazy(() => import('./pages/SearchHook'));
 const NeighborSearch = lazy(() => import('./pages/Neighbors'));
 const Library_Details = lazy(() => import('./pages/Library_Details'))
@@ -35,9 +46,11 @@ function App() {
   return (
     <>
     <Box sx={{ display: 'flex', flexDirection: 'column'}}>
+      <ThemeProvider theme={theme}>
         <Router>
             <Content />
         </Router>
+      </ThemeProvider>
     </Box>
     <Footer />
     </>
diff --git a/frontend/src/common/MoleculeUtils.jsx b/frontend/src/common/MoleculeUtils.jsx
index bf2aada..a07d233 100644
--- a/frontend/src/common/MoleculeUtils.jsx
+++ b/frontend/src/common/MoleculeUtils.jsx
@@ -70,7 +70,7 @@ function dynamicGrid( svgs ) {
             <Item sx={{border: 3, borderColor: '#ed1c24'}}>
             <img alt='' src={`data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`} />
             <Typography sx={{ wordBreak: "break-word" }}> <strong>Smiles: </strong> { result.smiles }</Typography>
-            <ThemeProvider theme={theme}><Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button></ThemeProvider>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
             </Item>
             // False condition - render Item without border if distance is not 0.
             :
@@ -83,7 +83,7 @@ function dynamicGrid( svgs ) {
                   <strong>Distance: </strong> {result.distance.toFixed(2)}
                 </Typography>
               )}
-            <ThemeProvider theme={theme}><Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button></ThemeProvider>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
             </Item>} 
         </Grid>
         ))
@@ -141,4 +141,4 @@ async function retrieveSVG(smiles, molecule_id, substructure = undefined, distan
   
 
 
-export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch, theme };
\ No newline at end of file
+export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch };
\ No newline at end of file
diff --git a/frontend/src/common/Navbar.jsx b/frontend/src/common/Navbar.jsx
index 8c7459f..fbee424 100644
--- a/frontend/src/common/Navbar.jsx
+++ b/frontend/src/common/Navbar.jsx
@@ -28,7 +28,7 @@ const ResponsiveAppBar = ({pages}) => {
   };
 
   return (
-      <AppBar position="static" style={{backgroundColor: "#393536"}} sx={{mb: 2}} >
+      <AppBar position="static" sx={{mb: 2}} >
         <Container maxWidth="xl">
           <Toolbar disableGutters>
             <OriginalKraken sx={{ display: { xs: 'none', md: 'flex' }, mr: 1, fontSize: '60px' }} />
diff --git a/frontend/src/components/KetcherPopup.jsx b/frontend/src/components/KetcherPopup.jsx
index 6a843c9..c806bd8 100644
--- a/frontend/src/components/KetcherPopup.jsx
+++ b/frontend/src/components/KetcherPopup.jsx
@@ -13,7 +13,6 @@ import { StandaloneStructServiceProvider } from 'ketcher-standalone';
 import { Editor } from 'ketcher-react';
 import "ketcher-react/dist/index.css";
 
-import { theme } from '../common/MoleculeUtils';
 
 const structServiceProvider = new StandaloneStructServiceProvider();
 
@@ -40,11 +39,8 @@ export default function FullScreenDialog({ ketcherCallBack }) {
 
   return (
     <div>
-      <ThemeProvider theme={theme}>
         <Button variant="contained" sx={{ mb: 5 }} onClick={handleClickOpen}>
           Open Molecular Sketcher
-        </Button>
-      </ThemeProvider>
       <Dialog
         fullWidth={true}
         maxWidth={"lg"}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 5c655cf..c1b5915 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from "react-router-dom";
 
-import { Container, Typography, Box, Grid, IconButton } from "@mui/material";
+import { Container, Typography, Box, Grid } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 
 import OriginalKraken from '../common/OriginalKraken';
 import Graph from "../components/Graph";
@@ -52,6 +53,7 @@ function Home() {
    const [ components, setComponents ] = useState(["1", "2"]);
    const [ type, setType ] = useState("umap");
    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+   const theme = useTheme();
 
    useEffect(() => {
     function checkMobile() {
@@ -113,7 +115,7 @@ function Home() {
 
   return (
   <>
-   <Box sx={{ backgroundColor: "#393536", 
+   <Box sx={{ backgroundColor: theme.palette.primary.main, 
             display: 'flex', 
             flexDirection: 'column', 
             alignItems: 'center', 
diff --git a/frontend/src/pages/Molecule.jsx b/frontend/src/pages/Molecule.jsx
index b2ba8e6..de04d4b 100644
--- a/frontend/src/pages/Molecule.jsx
+++ b/frontend/src/pages/Molecule.jsx
@@ -5,7 +5,7 @@ import { Box, Grid, Container, TextField, MenuItem, Card, CardContent, Select, I
 import Button from "@mui/material/Button";
 import Typography from '@mui/material/Typography';
 import { CircularProgress } from "@mui/material";
-import { retrieveSVG, theme } from "../common/MoleculeUtils";
+import { retrieveSVG } from "../common/MoleculeUtils";
 import { NGLStage, Component } from "../components/NGL"
 
 import MoleculeDataTable from "../components/MoleculeDataTable";
@@ -233,7 +233,7 @@ export default function MoleculeInfo() {
                </Box>
                :
                <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center">
-                  <CircularProgress sx={{ color: "#393536" }} />
+                  <CircularProgress />
                </Box>
                }
             </Grid>
diff --git a/frontend/src/pages/Neighbors.jsx b/frontend/src/pages/Neighbors.jsx
index 0bbb36e..f654cd5 100644
--- a/frontend/src/pages/Neighbors.jsx
+++ b/frontend/src/pages/Neighbors.jsx
@@ -9,7 +9,7 @@ import Button from '@mui/material/Button';
 
 import Graph from '../components/Graph'
 
-import { retrieveAllSVGs, dynamicGrid, theme } from '../common/MoleculeUtils';
+import { retrieveAllSVGs, dynamicGrid } from '../common/MoleculeUtils';
 
 
 async function NeighborSearch(molecule_id, type="pca", components="1,2,3,4", limit=48, skip=0, signal) {
@@ -180,7 +180,7 @@ export default function NeighborSearchHook () {
         />
         </Box>
         <Box display="flex" justifyContent="center">
-        { (isLoading || isLoadingMore) ? <CircularProgress />: <ThemeProvider theme={theme}> <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button> </ThemeProvider>}
+        { (isLoading || isLoadingMore) ? <CircularProgress />:  <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button>
         </Box>
         <Container sx={{justifyContent: 'center', my: 3}}>
             <Box sx={{ display: 'flex' }} justifyContent="center">
@@ -204,7 +204,7 @@ export default function NeighborSearchHook () {
             {isLoadingMore ? (
               <CircularProgress />
             ) : (
-              <ThemeProvider theme={theme}> <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button> </ThemeProvider>
+              <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button> 
             )}
           </Box>
           }
diff --git a/frontend/src/pages/SearchHook.jsx b/frontend/src/pages/SearchHook.jsx
index ee62397..a3f22ca 100644
--- a/frontend/src/pages/SearchHook.jsx
+++ b/frontend/src/pages/SearchHook.jsx
@@ -11,7 +11,7 @@ import { ThemeProvider } from '@mui/material/styles';
 
 import FullScreenDialog from '../components/KetcherPopup';
 
-import { substructureSearch, retrieveAllSVGs, dynamicGrid, theme } from '../common/MoleculeUtils';
+import { substructureSearch, retrieveAllSVGs, dynamicGrid } from '../common/MoleculeUtils';
 
 export default function SearchHook () {
 
@@ -214,9 +214,7 @@ export default function SearchHook () {
                 { dynamicGrid(svg_results)  }
                 <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
                   { isLoadingMore ? <CircularProgress /> 
-                  : <ThemeProvider theme={theme}>
                       <Button disabled={updatedParameters} variant="contained" sx={{ my: 3 }} onClick={ () => loadMore() } >Load More</Button>
-                    </ThemeProvider> 
                   }
                 </Box>
                </Container>  }

From 9c2c36a687b2e6bbe27819a45c8422f1d6f3ab9a Mon Sep 17 00:00:00 2001
From: Jessica Nash <janash@vt.edu>
Date: Thu, 5 Oct 2023 12:01:30 -0400
Subject: [PATCH 3/3] fix errors

---
 frontend/src/components/KetcherPopup.jsx | 2 +-
 frontend/src/pages/Neighbors.jsx         | 2 +-
 frontend/src/pages/SearchHook.jsx        | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/KetcherPopup.jsx b/frontend/src/components/KetcherPopup.jsx
index c806bd8..8f8ba12 100644
--- a/frontend/src/components/KetcherPopup.jsx
+++ b/frontend/src/components/KetcherPopup.jsx
@@ -13,7 +13,6 @@ import { StandaloneStructServiceProvider } from 'ketcher-standalone';
 import { Editor } from 'ketcher-react';
 import "ketcher-react/dist/index.css";
 
-
 const structServiceProvider = new StandaloneStructServiceProvider();
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -41,6 +40,7 @@ export default function FullScreenDialog({ ketcherCallBack }) {
     <div>
         <Button variant="contained" sx={{ mb: 5 }} onClick={handleClickOpen}>
           Open Molecular Sketcher
+        </Button>
       <Dialog
         fullWidth={true}
         maxWidth={"lg"}
diff --git a/frontend/src/pages/Neighbors.jsx b/frontend/src/pages/Neighbors.jsx
index f654cd5..953b115 100644
--- a/frontend/src/pages/Neighbors.jsx
+++ b/frontend/src/pages/Neighbors.jsx
@@ -180,7 +180,7 @@ export default function NeighborSearchHook () {
         />
         </Box>
         <Box display="flex" justifyContent="center">
-        { (isLoading || isLoadingMore) ? <CircularProgress />:  <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button>
+          { (isLoading || isLoadingMore) ? <CircularProgress />:  <Button disabled={updatedParameters} variant="contained" sx={{ m: 0.5 }} onClick={ () => loadMore() }>Load More</Button> }
         </Box>
         <Container sx={{justifyContent: 'center', my: 3}}>
             <Box sx={{ display: 'flex' }} justifyContent="center">
diff --git a/frontend/src/pages/SearchHook.jsx b/frontend/src/pages/SearchHook.jsx
index a3f22ca..dcd51f9 100644
--- a/frontend/src/pages/SearchHook.jsx
+++ b/frontend/src/pages/SearchHook.jsx
@@ -7,7 +7,6 @@ import CircularProgress from '@mui/material/CircularProgress';
 
 import { Switch } from '@mui/material';
 import Button from '@mui/material/Button';
-import { ThemeProvider } from '@mui/material/styles';
 
 import FullScreenDialog from '../components/KetcherPopup';
 
@@ -214,7 +213,9 @@ export default function SearchHook () {
                 { dynamicGrid(svg_results)  }
                 <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
                   { isLoadingMore ? <CircularProgress /> 
+                  : 
                       <Button disabled={updatedParameters} variant="contained" sx={{ my: 3 }} onClick={ () => loadMore() } >Load More</Button>
+
                   }
                 </Box>
                </Container>  }