Update on MUI and using localStorage for search.

raphamontana · Aug 3, 2022 · b55ba91 · b55ba91
1 parent 1f65225
commit b55ba91
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 94 deletions.
diff --git a/frontend/components/layout/style.js b/frontend/components/layout/style.js
@@ -1,4 +1,4 @@
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles } from '@material-ui/core/styles';
 
 const drawerWidth = 240;
 
@@ -102,9 +102,9 @@ const useStyles = makeStyles((theme) => ({
   search: {
     position: 'relative',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
     '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
     marginRight: theme.spacing(2),
     marginLeft: 0,

diff --git a/frontend/components/ml/DatasetComponent.js b/frontend/components/ml/DatasetComponent.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Box, Button, Grid, TextField, Typography } from '@material-ui/core';
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary } from './ExpansionPanel';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
 import { Add as AddIcon } from '@material-ui/icons';
 import AlertDialog from './AlertDialog';
 import JSMEComponent from '../draw/JSMEComponent';
@@ -55,11 +57,11 @@ const DatasetComponent = ({ dataset, setDataset, handleNext }) => {
       >
         <Grid item xs>
           <Typography variant="h6" color="initial">DATASET INPUT</Typography>
-          <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleExpansion('panel1')}>
-            <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Accordion square expanded={expanded === 'panel1'} onChange={handleExpansion('panel1')}>
+            <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
               <Typography>#1 Draw</Typography>
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails>
+            </AccordionSummary>
+            <AccordionDetails>
               <Grid
                 container
                 direction="column"
@@ -89,13 +91,13 @@ const DatasetComponent = ({ dataset, setDataset, handleNext }) => {
                   </Box>
                 </Grid>
               </Grid>
-            </ExpansionPanelDetails>
-          </ExpansionPanel>
-          <ExpansionPanel square expanded={expanded === 'panel2'} onChange={handleExpansion('panel2')}>
-            <ExpansionPanelSummary aria-controls="panel2d-content" id="panel2d-header">
+            </AccordionDetails>
+          </Accordion>
+          <Accordion square expanded={expanded === 'panel2'} onChange={handleExpansion('panel2')}>
+            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
               <Typography>#2 Write</Typography>
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails>
+            </AccordionSummary>
+            <AccordionDetails>
               <Grid
                 container
                 direction="column"
@@ -124,16 +126,16 @@ const DatasetComponent = ({ dataset, setDataset, handleNext }) => {
                   </Button>
                 </Grid>
               </Grid>
-            </ExpansionPanelDetails>
-          </ExpansionPanel>
-          <ExpansionPanel square expanded={expanded === 'panel3'} onChange={handleExpansion('panel3')}>
-            <ExpansionPanelSummary aria-controls="panel3d-content" id="panel3d-header">
+            </AccordionDetails>
+          </Accordion>
+          <Accordion square expanded={expanded === 'panel3'} onChange={handleExpansion('panel3')}>
+            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
               <Typography>#3 Upload file</Typography>
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails>
+            </AccordionSummary>
+            <AccordionDetails>
               <StructuresUploadButton addStructures={addToDataset} />
-            </ExpansionPanelDetails>
-          </ExpansionPanel>
+            </AccordionDetails>
+          </Accordion>
         </Grid>
         <Grid item xs>
           <StructuresListComponent structures={dataset} setStructures={setDataset} />

diff --git a/frontend/components/ml/ExpansionPanel.js b/frontend/components/ml/ExpansionPanel.js
@@ -1,7 +1,10 @@
 import { withStyles } from '@material-ui/core/styles';
-import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
-import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import MuiAccordion from '@material-ui/core/ExpansionPanel';
+import MuiAccordionSummary from '@material-ui/core/ExpansionPanelSummary';
+import MuiAccordionDetails from '@material-ui/core/ExpansionPanelDetails';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
 
 const ExpansionPanel = withStyles({
   root: {
@@ -18,7 +21,7 @@ const ExpansionPanel = withStyles({
     },
   },
   expanded: {},
-})(MuiExpansionPanel);
+})(MuiAccordion);
 
 const ExpansionPanelSummary = withStyles({
   root: {
@@ -36,12 +39,12 @@ const ExpansionPanelSummary = withStyles({
     },
   },
   expanded: {},
-})(MuiExpansionPanelSummary);
+})(MuiAccordionSummary);
 
 const ExpansionPanelDetails = withStyles((theme) => ({
   root: {
     padding: theme.spacing(2),
   },
-}))(MuiExpansionPanelDetails);
+}))(MuiAccordionDetails);
 
 export { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary };
diff --git a/frontend/components/molecule/Attribute.js b/frontend/components/molecule/Attribute.js
@@ -4,7 +4,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 const Attribute = ({ name, value, tooltip }) => {
   let tooltipText = tooltip ? tooltip : name;
   return(
-    <Grid container justify="space-between">
+    <Grid container justifyContent="space-between">
       <Grid item>
         <Tooltip title={ tooltipText } enterDelay={ 500 }>
           <b>{ name }:</b>

diff --git a/frontend/components/molecule/BindingCard.js b/frontend/components/molecule/BindingCard.js
@@ -1,4 +1,4 @@
-import ReactHtmlParser from 'react-html-parser';
+import HTMLParser from 'fast-html-parser';
 import { makeStyles } from '@material-ui/styles';
 import { Avatar, Card, CardContent, CardHeader, Grid, IconButton } from '@material-ui/core';
 import LinkIcon from '@material-ui/icons/Link';
@@ -30,14 +30,14 @@ const InhibitionConstant = ({ measure, value, unit }) => {
   let pValue = Math.log10(1 / value).toFixed(1);
   return(
     <>
-      { ReactHtmlParser('p'+measure) } {" = " + pValue}
+      { HTMLParser.parse(`p${measure}`) } {" = " + pValue}
     </>
   );
 }
 
 const BindingInfo = ({ binding }) => {
   return(
-    <Grid container justify="space-between">
+    <Grid container justifyContent="space-between">
       <Grid item>
         <b>{ binding.ligand }:</b> {"(Chain "} { binding.chain }{') '}
       </Grid>

diff --git a/frontend/components/molecule/MolecularFormula.js b/frontend/components/molecule/MolecularFormula.js
@@ -1,24 +1,26 @@
-import ReactHtmlParser from 'react-html-parser';
+// TODO Substituir esta biblioteca para formatar a formula molecular.
+import HTMLParser from 'fast-html-parser';
 
-import Grid from '@material-ui/core/Grid';
-import Tooltip from '@material-ui/core/Tooltip';
+import Grid from '@mui/material/Grid';
+import Tooltip from '@mui/material/Tooltip';
 
 const MolecularFormula = ({ formula }) => {
   let formattedFormula = formula.split('').map( (s) => {
     return s.match(/[0-9]/i) ? `<sub>${s}</sub>` : s;
   }).reduce((str, l) => str + l);
+
   return(
-    <Grid container justify="space-between">
+    <Grid container justifyContent="space-between">
       <Grid item>
         <Tooltip title="Molecular Formula" enterDelay={500}>
           <b>Molecular Formula:</b>
         </Tooltip>
       </Grid>
       <Grid item>
-        { ReactHtmlParser(formattedFormula) }
+        { formula }
       </Grid>
     </Grid>
   );
 }
 
-export default MolecularFormula;
+export default MolecularFormula;
diff --git a/frontend/components/molecule/MoleculeComponent.js b/frontend/components/molecule/MoleculeComponent.js
@@ -1,10 +1,10 @@
 import useSWR from "swr";
 
-import LinearProgress from "@material-ui/core/LinearProgress";
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import LinearProgress from '@mui/material/LinearProgress';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import SMILES from "../../libs/models/SMILES";
 import BindingCard from "./BindingCard";
@@ -25,17 +25,17 @@ const MoleculeComponent = ({ id, smiles }) => {
   let { chembl, pubchem, pdb, bindings } = data;
 
   return(
-    <ExpansionPanel defaultExpanded>
-      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} id={ "ep" + id } >
+    <Accordion defaultExpanded>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} id={ "ep" + id } >
         <p>SMILES: { smiles }</p>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails>
+      </AccordionSummary>
+      <AccordionDetails>
         <PubChemCard data={pubchem} />
         <ChEMBLCard data={chembl} />
         <PDBCard data={pdb} />
         <BindingCard ligand={pdb} bindings={bindings} />
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   );
 };
 

diff --git a/frontend/components/ui/theme/dark.js b/frontend/components/ui/theme/dark.js
@@ -1,4 +1,4 @@
-import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles'
 
 const darkPalette = {
   palette: {
@@ -8,4 +8,4 @@ const darkPalette = {
 const themeName = 'BioNCE dark theme';
 
 // Create a theme instance.
-export default createMuiTheme({ darkPalette, themeName });
+export default createTheme({ darkPalette, themeName });
diff --git a/frontend/components/ui/theme/light.js b/frontend/components/ui/theme/light.js
@@ -1,5 +1,5 @@
 // material-ui/examples/nextjs/src/theme.js
-import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles'
 import { red } from '@material-ui/core/colors';
 
 const palette = {
@@ -11,4 +11,4 @@ const palette = {
 const themeName = 'BioNCE light theme';
 
 // Create a theme instance.
-export default createMuiTheme({ palette, themeName });
+export default createTheme({ palette, themeName });
diff --git a/frontend/libs/controllers/chemblController.js b/frontend/libs/controllers/chemblController.js
@@ -14,9 +14,10 @@ class ChEMBLFactory {
     "https://www.ebi.ac.uk/chembl/api/data/substructure/<SMILES>.json";
 
   static parse(json) {
-    if (!json) return;
+    if (!json || json.molecules.length == 0) return;
     let i = json.molecules.findIndex(
       (m) =>
+        m.molecule_hierarchy &&
         m.molecule_hierarchy.molecule_chembl_id ==
         m.molecule_hierarchy.parent_chembl_id
     );

diff --git a/frontend/package.json b/frontend/package.json
@@ -23,30 +23,33 @@
     "start": "next start"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.10",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.9.1",
-    "axios": "^0.26.1",
-    "clsx": "^1.1.0",
-    "formidable": "^1.2.2",
-    "kekule": "^0.9.3",
-    "material-ui-dropzone": "^3.0.0",
-    "next": "^12.1.0",
-    "ngl": "^0.10.4",
-    "node-fetch": "^3.2.3",
-    "nprogress": "^0.2.0",
-    "openchemlib": "^7.2.3",
-    "papaparse": "^5.2.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^16.14.0",
-    "react-html-parser": "^2.0.2",
-    "react-simple-img": "^2.3.9",
-    "recoil": "0.0.10",
-    "swr": "^0.2.2",
-    "urlencoded-body-parser": "^3.0.0",
-    "xml2js": "^0.4.23"
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@fortawesome/fontawesome-svg-core": "latest",
+    "@fortawesome/free-solid-svg-icons": "latest",
+    "@fortawesome/react-fontawesome": "latest",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.1",
+    "axios": "latest",
+    "clsx": "latest",
+    "fast-html-parser": "^1.0.1",
+    "formidable": "latest",
+    "htmlparser2": "^8.0.1",
+    "kekule": "latest",
+    "material-ui-dropzone": "latest",
+    "next": "latest",
+    "ngl": "latest",
+    "node-fetch": "latest",
+    "nprogress": "latest",
+    "openchemlib": "latest",
+    "papaparse": "latest",
+    "prop-types": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-simple-img": "latest",
+    "recoil": "latest",
+    "swr": "latest",
+    "urlencoded-body-parser": "latest",
+    "xml2js": "latest"
   }
-}
+}
diff --git a/frontend/pages/draw.js b/frontend/pages/draw.js
@@ -50,6 +50,9 @@ const Draw = () => {
     if (dataset.length === 0) {
       event.preventDefault();
     }
+    else {
+      window.localStorage.setItem('molecules', JSON.stringify(dataset));
+    }
   }
 
   return (
@@ -90,7 +93,7 @@ const Draw = () => {
               value={smilesList}
               onChange={e => setSmilesList(e.target.value)}
               multiline
-              rows={10}
+              minRows={10}
               className={classes.textfield}
             />
             <Box display="inline">

diff --git a/frontend/pages/molecules.js b/frontend/pages/molecules.js
@@ -1,16 +1,25 @@
+import { useState, useEffect } from 'react';
+
 import parse from 'urlencoded-body-parser';
 import Grid from '@material-ui/core/Grid';
 import Layout from '../components/layout/Layout';
 import MoleculeComponent from '../components/molecule/MoleculeComponent';
 
-const molecules = [];
+const Molecules = () => {
+
+  const [molecules, setMolecules] = useState([]);
+
+  useEffect(() => {
+    let lstorage = window.localStorage.getItem('molecules');
+    setMolecules(JSON.parse(lstorage));
+    //TODO inserir um alerta de erro.
+  },[]);
 
-const Molecules = ({ smiles }) => {
-  return(
+  return (
     <Layout>
       <Grid container spacing={3}>
         <Grid item xs>
-          {smiles.map((option, index) => (
+          {molecules.map((option, index) => (
             <MoleculeComponent key={index} id={index} smiles={option} />
           ))}
         </Grid>
@@ -19,13 +28,4 @@ const Molecules = ({ smiles }) => {
   );
 };
 
-export async function getServerSideProps(context) {
-  const query = await parse(context.req);
-  const { dataset } = query;
-  if (dataset) {
-    dataset.split(',').map(m => molecules.push(m));
-  }
-  return { props: { smiles: molecules } };
-};
-
 export default Molecules;