Merge pull request #47 from janash/fix/frontend

fixes several frontend issues including download page, spacing
Descriptor-Libraries · Aug 23, 2023 · e30c2cd · e30c2cd
2 parents a3eba63 + 80051bd
commit e30c2cd
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 52 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,6 +1,5 @@
 .App {
   text-align: center;
-  height: 100vh;
 }
 
 .App-logo {

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -4,49 +4,42 @@ import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import ResponsiveAppBar from './common/Navbar';
 import { AppRoutes } from './common/Routes';
 import Footer from './common/Footer';
+import { Box } from '@mui/material'
 
-import Home from './pages/Home'
-//import Download from './pages/Download'
-//import Search from './pages/SearchHook'
-//import NeighborSearch from './pages/Neighbors'
+import Home from './pages/Home';
 
-// Lazy loading for improved performance
-const Download = lazy(() => import('./pages/Download'));
 const Search = lazy(() => import('./pages/SearchHook'));
 const NeighborSearch = lazy(() => import('./pages/Neighbors'));
 
 const pages = {
   'Home': <Home />, 
   'Search': <Search />,
   'Neighbors': <NeighborSearch/>, 
-  'Download': <Download />,
 };
 
 function Content() {
   const location = useLocation();
   return (
-    <div class="content">
+    <>
       {location.pathname !== "/" && location.pathname !== "/home" && <ResponsiveAppBar pages={pages} />}
       <Suspense fallback={<div>Loading...</div>}>
         <AppRoutes pages={pages} />
       </Suspense>
-    </div>
+    </>
   );
 }
 
-
 function App() {
   return (
-    <div className="App">
-      <Router>
-        <header className="kraken-webapp">
-          <Content />
-        </header>
-        <Footer />
-      </Router>
-    </div>
+    <>
+    <Box sx={{ display: 'flex', flexDirection: 'column'}}>
+        <Router>
+            <Content />
+        </Router>
+    </Box>
+    <Footer />
+    </>
   );
 }
 
-
 export default App;
diff --git a/frontend/src/assets/custom.css b/frontend/src/assets/custom.css
@@ -5,7 +5,7 @@ a:hover {
 
 
 a {
-	color: #ed1c24;
+	color: #1A1A1A;
 }
 
 .footer_logo {

diff --git a/frontend/src/common/Footer.jsx b/frontend/src/common/Footer.jsx
@@ -29,20 +29,21 @@ function Footer() {
     return (
     <><Box className="footer">
         <Divider />
-        <Grid container spacing={2}>
+        <Grid container spacing={2} alignItems="center" justifyContent="center">
 
-            <Grid item xs={2}>
-            {!isMobile &&
-                <a href="https://ccas.nd.edu/" target="_blank" title="Go to C-CAS in a new tab" >
-                <img src={ccas_logo} alt="CCAS logo" class="footer_logo" />
-                </a>
+        <Grid item xs={2} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {!isMobile &&
+                    <a href="https://ccas.nd.edu/" target="_blank" title="Go to C-CAS in a new tab" 
+                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
+                        <img src={ccas_logo} alt="CCAS logo" className="footer_logo" />
+                    </a>
                 }
             </Grid>
             <Grid item xs={8}>
-                <p style={{ textAlign: 'left' }}> &copy; Copyright 2019-2023 <a href="https://molssi.org/">The Molecular Sciences Software Institute </a>
+                <p style={{ textAlign: 'center' }}>This site is maintained by <a href="https://molssi.org/">The Molecular Sciences Software Institute </a>
                     and the <a href="https://ccas.nd.edu/">Center for Computer Assisted Synthesis</a>
                 </p>
-                <p style={{ textAlign: 'left' }}>
+                <p style={{ textAlign: 'center' }}>
                     MolSSI is Funded by the National Science Foundation <a href="https://nsf.gov/awardsearch/showAward?AWD_ID=1547580">OAC-1547580 </a> and
                     <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2136142"> CHE-2136142.</a>
                 </p>

diff --git a/frontend/src/components/Graph.jsx b/frontend/src/components/Graph.jsx
@@ -6,7 +6,7 @@ import { TextField } from '@mui/material';
 import MenuItem from '@mui/material/MenuItem';
 
 
-export default function Graph({ molData, componentArray, type, neighborSearch }){
+export default function Graph({ molData, componentArray, type, neighborSearch, containerStyle=null }){
     // Set the x and y indices to the first 2 values in the component array.
     const [ xIndex, setXIndex ] = useState(0);
     const [ yIndex, setYIndex ] = useState(1);
@@ -107,6 +107,7 @@ export default function Graph({ molData, componentArray, type, neighborSearch })
                     layout={ {
                         autosize: true,
                         useResizeHandler: true,
+                        showlegend: true,
                         style: {width: '100%', height: '100%'},
                         xaxis: {
                         title: {
@@ -206,8 +207,8 @@ export default function Graph({ molData, componentArray, type, neighborSearch })
       );
 
     return (
-        <Container>
-        <Container sx={{display: 'flex', flexDirection: "row", justifyContent: 'center'}}>
+        <Container sx={containerStyle ? containerStyle : {}}>
+            <Container sx={{display: 'flex', flexDirection: "row", justifyContent: 'center'}}>
             <TextField
                 id="dimension-outline"
                 value={xIndex}
@@ -236,6 +237,6 @@ export default function Graph({ molData, componentArray, type, neighborSearch })
                 ))}
             </TextField>
       </Container>
-        {myPlot}
+            {myPlot}
       </Container>);
 }
diff --git a/frontend/src/pages/Download.jsx b/frontend/src/pages/Download.jsx
@@ -2,7 +2,7 @@ import Typography from '@mui/material/Typography';
 
 function Download() {
     return  (
-    <Typography variant="h2" textAlign="center">Neighbor Search</Typography>
+    <Typography variant="h2" textAlign="center">Download</Typography>
 
     )
 

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -8,7 +8,7 @@ import Graph from "../components/Graph";
 
 import SearchIcon from '@mui/icons-material/Search';
 import BubbleChartIcon from '@mui/icons-material/BubbleChart';
-import DownloadIcon from '@mui/icons-material/Download';
+//import DownloadIcon from '@mui/icons-material/Download';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import StatCard from '../components/SummaryCard';
 import IconLink from '../components/IconLink';
@@ -36,7 +36,7 @@ const stats = [
 
   {
     "number": "21,437",
-    "description": "unique molecules"
+    "description": "unique conformers"
   },
 
   {
@@ -106,18 +106,18 @@ function Home() {
             setMolData(items);   
       })
       }
-
-      useEffect( ( ) => { 
-      loadData() },  
-      [ type ] 
-   );
    useEffect(() => {
       loadData()
    }, [type]);
 
   return (
-   <>
-   <Box sx={{ backgroundColor: "#393536", display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around', padding: 2, height: !isMobile && '35vh' }}>  
+  <>
+   <Box sx={{ backgroundColor: "#393536", 
+            display: 'flex', 
+            flexDirection: 'column', 
+            alignItems: 'center', 
+            justifyContent: 'space-around', 
+            padding: 2, height: !isMobile && '35vh' }}>  
    <Box 
         sx={{ 
             display: 'flex', 
@@ -145,26 +145,33 @@ function Home() {
           <Grid item>
             <IconLink IconElement={BubbleChartIcon} text="Neighbor Search" link='/neighbors'></IconLink>
           </Grid>
-          <Grid item>
-            <IconLink IconElement={DownloadIcon} text="Download" link="/download"></IconLink>
-          </Grid>
+          {/* Hide until we're ready to add
+            <Grid item>
+              <IconLink IconElement={DownloadIcon} text="Download" link="/download"></IconLink>
+            </Grid> 
+            */}
           <Grid item>
             <IconLink IconElement={AutoStoriesIcon} text="Documentation" link="/docs" reloadDocument></IconLink>
           </Grid>
         </Grid>
      </Box>
 
-    <Container maxWidth="xl" sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+    <Container maxWidth="xl" sx={{ display: "flex", flexDirection: "column", alignItems: "center"  }}>
       <Grid container spacing={2} sx={{ mt: 3 }}>
             {stats.map((stat, index) => (
               <StatCard key={index} number={stat.number} caption={stat.description} size={150} />
             ))}
       </Grid>
-      <Box sx={{ width: '100%', mt: 3 }}>
-        {!isMobile && <Graph molData={molData} componentArray={components} type={type} neighborSearch={false}></Graph>}
-      </Box>
-    </Container>
-
+      </Container>
+      <Box sx={{ 
+        width: '100%',
+        height: '80vh', 
+        mt: 3,
+        alignItems: 'center',  
+        justifyContent: 'center', 
+      }}>
+  {!isMobile && <Graph molData={molData} componentArray={components} type={type} neighborSearch={false} containerStyle={{ width: '100%', height: '90%' }}></Graph>}
+</Box>
     </>
   );
 }