small refactoring

linea-it · Feb 16, 2024 · 9e4839e · 9e4839e
1 parent 8b798e0
commit 9e4839e
Show file tree

Hide file tree

Showing 34 changed files with 211 additions and 257 deletions.
diff --git a/frontend/old_pages/Download/Detail.js b/frontend/old_pages/Download/Detail.js
@@ -1,37 +1,35 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Grid,
-  Card,
-  CardHeader,
-  CardContent,
-  Icon,
-  Button,
-  Chip,
-  Typography,
-  CircularProgress,
-  TextareaAutosize,
-} from '@material-ui/core';
-import { useParams, useHistory } from 'react-router-dom';
-import moment from 'moment';
-import filesize from 'filesize';
-import List from '../../components/List';
-import ColumnStatus from '../../components/Table/ColumnStatus';
-import Progress from '../../components/Progress';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import CardHeader from '@mui/material/CardHeader'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+import TextareaAutosize from '@mui/material/TextareaAutosize'
+import Icon from '@mui/material/Icon'
+import { useParams, useHistory } from 'react-router-dom'
+import moment from 'moment'
+import filesize from 'filesize'
+import List from '../../components/List'
+import ColumnStatus from '../../components/Table/ColumnStatus'
+import Progress from '../../components/Progress'
 import {
   getDownloadProgress,
   getDownloadJobById,
   cancelDownloadJobById,
-} from '../../services/api/Download';
-import useInterval from '../../hooks/useInterval';
-import useStyles from './styles';
+} from '../../services/api/Download'
+import useInterval from '../../hooks/useInterval'
+import useStyles from './styles'
 
 function DownloadDetail({ setTitle }) {
-  const { id } = useParams();
-  const history = useHistory();
-  const classes = useStyles();
-  const [summaryExecution, setSummaryExecution] = useState([]);
-  const [summaryResults, setSummaryResults] = useState([]);
+  const { id } = useParams()
+  const history = useHistory()
+  const classes = useStyles()
+  const [summaryExecution, setSummaryExecution] = useState([])
+  const [summaryResults, setSummaryResults] = useState([])
   const [progress, setProgress] = useState({
     status: 0,
     ccds: 0,
@@ -42,40 +40,40 @@ function DownloadDetail({ setTitle }) {
     average_time: 0,
     estimated_size: 0,
     estimated_time: 0,
-  });
-  const [loadProgress, setLoadProgress] = useState(false);
-  const [isJobCanceled, setIsJobCanceled] = useState(false);
-  const [hasCircularProgress, setHasCircularProgress] = useState(true);
-  const [ccds, setCcds] = useState(0);
-  const [errorMessage, setErrorMessage] = useState(null);
+  })
+  const [loadProgress, setLoadProgress] = useState(false)
+  const [isJobCanceled, setIsJobCanceled] = useState(false)
+  const [hasCircularProgress, setHasCircularProgress] = useState(true)
+  const [ccds, setCcds] = useState(0)
+  const [errorMessage, setErrorMessage] = useState(null)
 
-  const handleBackNavigation = () => history.goBack();
+  const handleBackNavigation = () => history.goBack()
 
   useEffect(() => {
-    setTitle('Download');
-  }, [setTitle]);
+    setTitle('Download')
+  }, [setTitle])
 
   useEffect(() => {
     getDownloadProgress(id)
       .then((data) => {
-        setProgress(data);
+        setProgress(data)
 
         if (![1, 2].includes(data.status)) {
-          setHasCircularProgress(false);
+          setHasCircularProgress(false)
         }
       })
       .catch(() => {
-        setHasCircularProgress(true);
-      });
-  }, [loadProgress]);
+        setHasCircularProgress(true)
+      })
+  }, [loadProgress])
 
   useEffect(() => {
     getDownloadJobById(id).then((res) => {
       if (res.status === 4 && res.error !== null) {
-        setErrorMessage(res.error);
+        setErrorMessage(res.error)
       }
 
-      setCcds(res.ccds);
+      setCcds(res.ccds)
       setSummaryExecution([
         {
           title: 'Status',
@@ -131,7 +129,7 @@ function DownloadDetail({ setTitle }) {
           title: 'Execution Time',
           value: res.execution_time ? res.execution_time.split('.')[0] : 0,
         },
-      ]);
+      ])
 
       setSummaryResults([
         {
@@ -146,25 +144,25 @@ function DownloadDetail({ setTitle }) {
           title: '# CCDs Downloaded',
           value: res.ccds_downloaded,
         },
-      ]);
-    });
-  }, [loadProgress]);
+      ])
+    })
+  }, [loadProgress])
 
   const formatSeconds = (value) =>
-    moment().startOf('day').seconds(value).format('HH:mm:ss');
+    moment().startOf('day').seconds(value).format('HH:mm:ss')
 
   useInterval(() => {
     if ([1, 2].includes(progress.status)) {
-      setLoadProgress((prevState) => !prevState);
+      setLoadProgress((prevState) => !prevState)
     }
-  }, [5000]);
+  }, [5000])
 
   const handleStopRun = () => {
     cancelDownloadJobById(id).then(() => {
-      setIsJobCanceled(true);
-      setLoadProgress((prevState) => !prevState);
-    });
-  };
+      setIsJobCanceled(true)
+      setLoadProgress((prevState) => !prevState)
+    })
+  }
 
   return (
     <Grid container spacing={2}>
@@ -178,7 +176,7 @@ function DownloadDetail({ setTitle }) {
               onClick={handleBackNavigation}
             >
               <Icon className="fas fa-undo" fontSize="inherit" />
-              <Typography variant="button" style={{ margin: '0 5px' }}>
+              <Typography variant="button" sx={{ margin: '0 5px' }}>
                 Back
               </Typography>
             </Button>
@@ -197,7 +195,7 @@ function DownloadDetail({ setTitle }) {
                 ) : (
                   <Icon className="fas fa-stop" fontSize="inherit" />
                 )}
-                <Typography variant="button" style={{ margin: '0 5px' }}>
+                <Typography variant="button" sx={{ margin: '0 5px' }}>
                   Abort
                 </Typography>
               </Button>
@@ -334,11 +332,11 @@ function DownloadDetail({ setTitle }) {
         </>
       )}
     </Grid>
-  );
+  )
 }
 
 DownloadDetail.propTypes = {
   setTitle: PropTypes.func.isRequired,
-};
+}
 
-export default DownloadDetail;
+export default DownloadDetail
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,7 +20,6 @@
     "axios": "^1.6.7",
     "browserslist": "^4.22.3",
     "caniuse-lite": "^1.0.30001585",
-    "clsx": "^1.0.4",
     "d3": "7.6.1",
     "date-fns": "^2.0.0-beta.5",
     "dayjs": "^1.11.7",

diff --git a/frontend/package_copy.json b/frontend/package_copy.json
@@ -27,7 +27,6 @@
     "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.16.2",
     "axios": "1.2.0",
-    "clsx": "^1.0.4",
     "d3": "7.6.1",
     "date-fns": "^2.0.0-beta.5",
     "dayjs": "^1.11.7",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -6,7 +6,8 @@ import history from './services/history'
 import { AuthProvider } from './contexts/AuthContext.js'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { PredictionEventsProvider } from './contexts/PredictionContext'
-import { ThemeProvider } from '@mui/styles';
+import { ThemeProvider } from '@mui/styles'
+import './assets/css/index.css'
 
 const queryClient = new QueryClient()
 function App() {

diff --git a/frontend/src/assets/css/index.css b/frontend/src/assets/css/index.css
@@ -1,4 +1,4 @@
-/* body {
+ body {
   margin: 0;
   overflow-x: hidden;
   font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
@@ -8,7 +8,7 @@
   background: #f4f4f4;
 }
 
-code {
+/* code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
@@ -44,10 +44,7 @@ code.hljs.sql {
   width: 100% !important;
   /* height: 'auto' !important; */
 /* min-height: 400px; */
-margin: auto;
-}
 
 /* .MuiCardActionArea-root {
   display: contents!important;
 } */
-*/
diff --git a/frontend/src/components/AladinV3/index.js b/frontend/src/components/AladinV3/index.js
@@ -1,5 +1,6 @@
-import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import React from 'react'
+import Box from '@mui/material/Box'
+import { v4 as uuidv4 } from 'uuid'
 import PropTypes from 'prop-types'
 import A from 'aladin-lite'
 
@@ -20,7 +21,7 @@ export default class AladinV3 extends React.Component {
 
 
   constructor(props) {
-    super(props);
+    super(props)
 
     // Cria um ID unico para div que vai receber o aladin
     this.id = `aladin-container-${uuidv4()}`
@@ -56,7 +57,7 @@ export default class AladinV3 extends React.Component {
           showCooGrid: false,
           fullScreen: false
         }
-      );
+      )
 
       // Cria um catalogo com um unico source
       this.drawCatalog()
@@ -78,12 +79,12 @@ export default class AladinV3 extends React.Component {
         shape: 'square',
         sourceSize: 20,
         color: 'cyan'
-      });
+      })
       this.aladin.addCatalog(cat)
       // add sources to the new layer
       cat.addSources([
         this.libA.source(this.props.ra, this.props.dec, { name: "Occulted Star" })
-      ]);
+      ])
     }
   }
 
@@ -97,11 +98,11 @@ export default class AladinV3 extends React.Component {
   }
 
   render() {
-    return (<div
+    return (<Box
       id={this.id}
-      style={{
+      sx={{
         width: '100%',
         height: '100%',
-      }}></div>)
+      }}></Box>)
   }
 }
diff --git a/frontend/src/components/Chart/CalendarHeatmap.js b/frontend/src/components/Chart/CalendarHeatmap.js
@@ -1,5 +1,6 @@
 import * as d3 from 'd3'
 import React, { useEffect, useState } from 'react'
+import Box from '@mui/material/Box'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 import useStyles from './styles'
@@ -123,20 +124,20 @@ function CalendarHeatmap({ data }) {
   }, [rows])
 
   return (
-    <div>
+    <Box>
       <svg id='heatmap-svg' />
-      <div className={classes.legendWrapper} title='A summary of exposures by date.'>
+      <Box className={classes.legendWrapper} title='A summary of exposures by date.'>
         Less
-        <ul className={classes.legend}>
-          <li className={classes.legendItem} style={{ backgroundColor: '#ebedf0' }} />
-          <li className={classes.legendItem} style={{ backgroundColor: '#c6e48b' }} />
-          <li className={classes.legendItem} style={{ backgroundColor: '#7bc96f' }} />
-          <li className={classes.legendItem} style={{ backgroundColor: '#239a3b' }} />
-          <li className={classes.legendItem} style={{ backgroundColor: '#196127' }} />
-        </ul>
+        <Box className={classes.legend}>
+          <Box className={classes.legendItem} style={{ backgroundColor: '#ebedf0' }} />
+          <Box className={classes.legendItem} style={{ backgroundColor: '#c6e48b' }} />
+          <Box className={classes.legendItem} style={{ backgroundColor: '#7bc96f' }} />
+          <Box className={classes.legendItem} style={{ backgroundColor: '#239a3b' }} />
+          <Box className={classes.legendItem} style={{ backgroundColor: '#196127' }} />
+        </Box>
         More
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }