fixes using command

npx standard --fix

38 files changed, 1040 insertions, 1041 deletions

diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index 94cee9ca..e802cd41 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -24,15 +24,19 @@ function PrivateRoute ({ component: Component, ...rest }) {
 
   useEffect(() => dispatch(loadUser()), [dispatch])
 
-  return <Route {...rest} render={props => {
-    if (auth.isLoading) {
-      return <CircularProgress style={{ margin: '50vh 50vw' }} />
-    } else if (!auth.isAuthenticated) {
-      return <Redirect to="/login" />
-    } else {
-      return <Component {...props} />
-    }
-  }} />
+  return (
+    <Route
+      {...rest} render={props => {
+        if (auth.isLoading) {
+          return <CircularProgress style={{ margin: '50vh 50vw' }} />
+        } else if (!auth.isAuthenticated) {
+          return <Redirect to='/login' />
+        } else {
+          return <Component {...props} />
+        }
+      }}
+    />
+  )
 }
 
 // Public routes accessible to all users. [ e.g. editor, gallery ]
@@ -42,17 +46,21 @@ function PublicRoute ({ component: Component, restricted, nav, ...rest }) {
 
   useEffect(() => dispatch(loadUser()), [dispatch])
 
-  return <Route {...rest} render={props => {
-    if (auth.isLoading) {
-      return <CircularProgress style={{ margin: '50vh 50vw' }} />
-    } else if (auth.isAuthenticated && restricted) {
-      return <Redirect to="/dashboard" />
-    } else if (nav) {
-      return (<><Navbar /><Component {...props} /></>)
-    } else {
-      return <Component {...props} />
-    }
-  }} />
+  return (
+    <Route
+      {...rest} render={props => {
+        if (auth.isLoading) {
+          return <CircularProgress style={{ margin: '50vh 50vw' }} />
+        } else if (auth.isAuthenticated && restricted) {
+          return <Redirect to='/dashboard' />
+        } else if (nav) {
+          return (<><Navbar /><Component {...props} /></>)
+        } else {
+          return <Component {...props} />
+        }
+      }}
+    />
+  )
 }
 
 function App () {
@@ -60,17 +68,16 @@ function App () {
     // Handles Routing for an application
     <HashRouter>
       <Switch>
-        <PublicRoute exact path="/login" restricted={true} nav={false} component={Login} />
-        <PublicRoute exact path="/signup" restricted={true} nav={false} component={SignUp} />
-        <PublicRoute exact path="/" restricted={false} nav={true} component={Home} />
+        <PublicRoute exact path='/login' restricted nav={false} component={Login} />
+        <PublicRoute exact path='/signup' restricted nav={false} component={SignUp} />
+        <PublicRoute exact path='/' restricted={false} nav component={Home} />
         {localStorage.getItem(process.env.REACT_APP_NAME + '_token') !== null
-          ? <PublicRoute exact path="/editor" restricted={false} nav={false} component={SchematicEditor} />
-          : <Route path="/editor" component={SchematicEditor} />
-        }
-        <PublicRoute exact path="/simulator/ngspice" restricted={false} nav={true} component={Simulator} />
-        <PublicRoute exact path="/gallery" restricted={false} nav={true} component={Gallery} />
-        <PrivateRoute path="/dashboard" component={Dashboard} />
-        <PublicRoute restricted={false} nav={true} component={NotFound} />
+          ? <PublicRoute exact path='/editor' restricted={false} nav={false} component={SchematicEditor} />
+          : <Route path='/editor' component={SchematicEditor} />}
+        <PublicRoute exact path='/simulator/ngspice' restricted={false} nav component={Simulator} />
+        <PublicRoute exact path='/gallery' restricted={false} nav component={Gallery} />
+        <PrivateRoute path='/dashboard' component={Dashboard} />
+        <PublicRoute restricted={false} nav component={NotFound} />
       </Switch>
     </HashRouter>
   )
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
index 5649d5b6..d1e56c4e 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
@@ -37,16 +37,16 @@ function MainCard () {
         <Typography className={classes.title} gutterBottom>
           Welcome to your EDA Dashboard
         </Typography>
-        <Typography variant="h5" component="h2">
+        <Typography variant='h5' component='h2'>
           Welcome {auth.user.username}...
         </Typography>
       </CardContent>
       <CardActions>
         <Button
           component={RouterLink}
-          to="/dashboard/schematics"
-          color="primary"
-          size="small"
+          to='/dashboard/schematics'
+          color='primary'
+          size='small'
         >
           {button}
         </Button>
@@ -64,10 +64,10 @@ export default function DashboardHome () {
     <>
       <Grid
         container
-        direction="row"
-        justify="flex-start"
-        alignItems="flex-start"
-        alignContent="center"
+        direction='row'
+        justify='flex-start'
+        alignItems='flex-start'
+        alignContent='center'
         spacing={3}
       >
         {/* User Dashboard Home Header */}
@@ -77,7 +77,7 @@ export default function DashboardHome () {
 
         <Grid item xs={12}>
           <Card style={{ padding: '7px 15px' }} className={classes.mainHead}>
-            <Typography variant="subtitle1" gutterBottom>
+            <Typography variant='subtitle1' gutterBottom>
               Hey {auth.user.username} , {typography}
             </Typography>
           </Card>
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index 34d58b5f..571759c5 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -67,9 +67,9 @@ export default function DashSidebar (props) {
       </Hidden>
       <List>
         <ListItem
-          alignItems="flex-start"
+          alignItems='flex-start'
           component={RouterLink}
-          to="/dashboard"
+          to='/dashboard'
           style={{ marginTop: '15px' }}
           className={classes.sideItem}
           button
@@ -83,45 +83,45 @@ export default function DashSidebar (props) {
           <ListItemText
             primary={auth.user.username}
             secondary={
-              <React.Fragment>
+              <>
                 <Typography
-                  component="span"
-                  variant="body2"
-                  color="textSecondary"
+                  component='span'
+                  variant='body2'
+                  color='textSecondary'
                 >
                   Contributor
                 </Typography>
-              </React.Fragment>
+              </>
             }
           />
         </ListItem>
 
         <ListItem
           component={RouterLink}
-          to="/dashboard/profile"
+          to='/dashboard/profile'
           className={classes.sideItem}
           button
           divider
         >
-          <ListItemText primary='My Profile'/>
+          <ListItemText primary='My Profile' />
         </ListItem>
         <ListItem
           component={RouterLink}
-          to="/dashboard/schematics"
+          to='/dashboard/schematics'
           className={classes.sideItem}
           button
         >
-          <ListItemText primary={button}/>
+          <ListItemText primary={button} />
         </ListItem>
 
         {/* List name of saved schematics */}
-        <List className={classes.nestedSearch} >
+        <List className={classes.nestedSearch}>
           <InputBase
             className={classes.input}
             placeholder={placeholder}
           />
         </List>
-        <div className={classes.nested} >
+        <div className={classes.nested}>
           {schematics.map((sch) => (
             <ListItem key={sch.save_id} button>
               <ListItemText primary={`${sch.name}`} />
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index 564bc035..777df535 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -20,7 +20,7 @@ function TabPanel (props) {
 
   return (
     <div
-      role="tabpanel"
+      role='tabpanel'
       hidden={value !== index}
       id={`scrollable-auto-tabpanel-${index}`}
       aria-labelledby={`scrollable-auto-tab-${index}`}
@@ -69,13 +69,13 @@ export default function ProgressPanel () {
   const typography = 'You have not created any ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME
   return (
     <div className={classes.root}>
-      <AppBar position="static">
+      <AppBar position='static'>
         <Tabs
           value={value}
           onChange={handleChange}
-          variant="scrollable"
-          scrollButtons="auto"
-          aria-label="scrollable auto tabs example"
+          variant='scrollable'
+          scrollButtons='auto'
+          aria-label='scrollable auto tabs example'
         >
           <Tab label={tab} {...a11yProps(0)} />
         </Tabs>
@@ -85,13 +85,13 @@ export default function ProgressPanel () {
       <TabPanel value={value} index={0}>
         {schematics.length !== 0
           ? <Grid
-            container
-            direction="row"
-            justify="flex-start"
-            alignItems="flex-start"
-            alignContent="center"
-            spacing={3}
-          >
+              container
+              direction='row'
+              justify='flex-start'
+              alignItems='flex-start'
+              alignContent='center'
+              spacing={3}
+            >
             {schematics.slice(0, 4).map(
               (sch) => {
                 return (
@@ -102,10 +102,9 @@ export default function ProgressPanel () {
               }
             )}
           </Grid>
-          : <Typography variant="button" display="block" gutterBottom>
+          : <Typography variant='button' display='block' gutterBottom>
             {typography} , Create your first one now...
-          </Typography>
-        }
+          </Typography>}
       </TabPanel>
     </div>
   )
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
index 63b469a6..6d2a0f97 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 function Alert (props) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />
+  return <MuiAlert elevation={6} variant='filled' {...props} />
 }
 
 // Schematic delete snackbar
@@ -48,15 +48,16 @@ function SimpleSnackbar ({ open, close, sch }) {
       autoHideDuration={6000}
       onClose={close}
     >
-      <Alert icon={false} severity="warning" color="error" style={{ width: '100%' }} action={
-        <>
-          <Button size="small" aria-label="close" color="inherit" onClick={() => { dispatch(deleteSchematic(sch.save_id)) }}>
-            Yes
-          </Button>
-          <Button size="small" aria-label="close" color="inherit" onClick={close}>
-            NO
-          </Button>
-        </>
+      <Alert
+        icon={false} severity='warning' color='error' style={{ width: '100%' }} action={
+          <>
+            <Button size='small' aria-label='close' color='inherit' onClick={() => { dispatch(deleteSchematic(sch.save_id)) }}>
+              Yes
+            </Button>
+            <Button size='small' aria-label='close' color='inherit' onClick={close}>
+              NO
+            </Button>
+          </>
       }
       >
         {'Delete ' + sch.name + ' ?'}
@@ -73,13 +74,13 @@ SimpleSnackbar.propTypes = {
 
 // Display schematic updated status (e.g : updated 2 hours ago...)
 function timeSince (jsonDate) {
-  var json = jsonDate
+  const json = jsonDate
 
-  var date = new Date(json)
+  const date = new Date(json)
 
-  var seconds = Math.floor((new Date() - date) / 1000)
+  const seconds = Math.floor((new Date() - date) / 1000)
 
-  var interval = Math.floor(seconds / 31536000)
+  let interval = Math.floor(seconds / 31536000)
 
   if (interval > 1) {
     return interval + ' years'
@@ -105,8 +106,8 @@ function timeSince (jsonDate) {
 
 // Display schematic created date (e.g : Created On 29 Jun 2020)
 function getDate (jsonDate) {
-  var json = jsonDate
-  var date = new Date(json)
+  const json = jsonDate
+  const date = new Date(json)
   const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' })
   const [{ value: month }, , { value: day }, , { value: year }] = dateTimeFormat.formatToParts(date)
   return `${day}-${month}-${year}`
@@ -145,11 +146,11 @@ export default function SchematicCard ({ sch }) {
             title={sch.name}
           />
           <CardContent>
-            <Typography variant="body2" component="p">
+            <Typography variant='body2' component='p'>
               {sch.description}
             </Typography>
             {/* Display updated status */}
-            <Typography variant="body2" color="textSecondary" component="p" style={{ margin: '5px 0px 0px 0px' }}>
+            <Typography variant='body2' color='textSecondary' component='p' style={{ margin: '5px 0px 0px 0px' }}>
               Updated {timeSince(sch.save_time)} ago...
             </Typography>
           </CardContent>
@@ -157,20 +158,20 @@ export default function SchematicCard ({ sch }) {
 
         <CardActions>
           <Button
-            target="_blank"
+            target='_blank'
             component={RouterLink}
             to={'/editor?id=' + sch.save_id}
-            size="small"
-            color="primary"
+            size='small'
+            color='primary'
           >
             Launch in Editor
           </Button>
 
           {/* Display delete option */}
-          <Tooltip title='Delete' placement="bottom" arrow>
+          <Tooltip title='Delete' placement='bottom' arrow>
             <DeleteIcon
               color='secondary'
-              fontSize="small"
+              fontSize='small'
               style={{ marginLeft: 'auto' }}
               onClick={() => { handleSnacClick() }}
             />
@@ -178,10 +179,10 @@ export default function SchematicCard ({ sch }) {
           <SimpleSnackbar open={snacOpen} close={handleSnacClose} sch={sch} />
 
           {/* Display share status */}
-          <Tooltip title={!sch.shared ? 'SHARE OFF' : 'SHARE ON'} placement="bottom" arrow>
+          <Tooltip title={!sch.shared ? 'SHARE OFF' : 'SHARE ON'} placement='bottom' arrow>
             <ShareIcon
               color={!sch.shared ? 'disabled' : 'primary'}
-              fontSize="small"
+              fontSize='small'
               style={{ marginRight: '10px' }}
             />
           </Tooltip>
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index fa17d2b5..387a8054 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -38,21 +38,21 @@ function MainCard () {
         <Typography className={classes.title} gutterBottom>
           {typography1}
         </Typography>
-        <Typography variant="h5" component="h2">
+        <Typography variant='h5' component='h2'>
           {typography2}
         </Typography>
       </CardContent>
       <CardActions>
         <Button
-          target="_blank"
+          target='_blank'
           component={RouterLink}
-          to="/editor"
-          size="small"
-          color="primary"
+          to='/editor'
+          size='small'
+          color='primary'
         >
           Create New
         </Button>
-        <Button size="small" color="secondary">
+        <Button size='small' color='secondary'>
           Load More
         </Button>
       </CardActions>
@@ -77,10 +77,10 @@ export default function SchematicsList () {
     <>
       <Grid
         container
-        direction="row"
-        justify="flex-start"
-        alignItems="flex-start"
-        alignContent="center"
+        direction='row'
+        justify='flex-start'
+        alignItems='flex-start'
+        alignContent='center'
         spacing={3}
       >
         {/* User Dashboard My Schematic Header */}
@@ -103,12 +103,11 @@ export default function SchematicsList () {
           </>
           : <Grid item xs={12}>
             <Card style={{ padding: '7px 15px' }} className={classes.mainHead}>
-              <Typography variant="subtitle1" gutterBottom>
+              <Typography variant='subtitle1' gutterBottom>
                 Hey {auth.user.username} , {typography1}
               </Typography>
             </Card>
-          </Grid>
-        }
+          </Grid>}
       </Grid>
     </>
   )
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
index 550e207c..6888dbd2 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
@@ -16,7 +16,7 @@ export default function ComponentProperties () {
   const dispatch = useDispatch()
 
   useEffect(() => {
-      setVal(parameter_values)
+    setVal(parameter_values)
   }, [parameter_values])
 
   const getInputValues = (evt) => {
@@ -31,25 +31,27 @@ export default function ComponentProperties () {
     dispatch(setCompProperties(id, val))
   }
 
-  const link1 = name + ' Parameters';
-  const link2 = 'Set ' + process.env.REACT_APP_BLOCK_NAME + ' Parameters';
-  const link3 = 'No ' + name + ' Parameters';
+  const link1 = name + ' Parameters'
+  const link2 = 'Set ' + process.env.REACT_APP_BLOCK_NAME + ' Parameters'
+  const link3 = 'No ' + name + ' Parameters'
   return (
     <div style={isOpen ? {} : { display: 'none' }}>
 
       <ListItem>
-        { compProperties !== undefined ? <ListItemText primary={link1} /> : <ListItemText primary={link3} /> }
+        {compProperties !== undefined ? <ListItemText primary={link1} /> : <ListItemText primary={link3} />}
       </ListItem>
 
       {
         Object.keys(val).map((keyName, i) => {
           if (keyName.match(/^p[0-9]*_value$/)) {
-            let rootKeyName = keyName.substr(0, 4)
-            let type_id = rootKeyName + '_type';
+            const rootKeyName = keyName.substr(0, 4)
+            const type_id = rootKeyName + '_type'
             if (compProperties !== undefined && compProperties[rootKeyName] !== null && compProperties[type_id] !== null) {
-              return <ListItem key={i}>
-                <TextField id={keyName} label={compProperties[rootKeyName]} value={val[keyName] || ''} size='small' variant='outlined' onChange={getInputValues} />
-              </ListItem>
+              return (
+                <ListItem key={i}>
+                  <TextField id={keyName} label={compProperties[rootKeyName]} value={val[keyName] || ''} size='small' variant='outlined' onChange={getInputValues} />
+                </ListItem>
+              )
             }
           }
 
@@ -59,7 +61,7 @@ export default function ComponentProperties () {
 
       {
         compProperties !== undefined && <ListItem>
-          <Button size='small' variant="contained" color="primary" onClick={setProps}>{link2}</Button>
+          <Button size='small' variant='contained' color='primary' onClick={setProps}>{link2}</Button>
         </ListItem>
       }
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index f54a6698..f002b944 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 const searchOptions = {
-  NAME: 'name__istartswith',
+  NAME: 'name__istartswith'
 }
 
 export default function ComponentSidebar ({ compRef }) {
@@ -145,15 +145,15 @@ export default function ComponentSidebar ({ compRef }) {
           <ListItem>
 
             <TextField
-              id="standard-number"
+              id='standard-number'
               placeholder={link2}
-              variant="outlined"
-              size="small"
+              variant='outlined'
+              size='small'
               value={searchText}
               onChange={handleSearchText}
               InputProps={{
                 startAdornment: (
-                  <InputAdornment position="start">
+                  <InputAdornment position='start'>
                     <SearchIcon />
                   </InputAdornment>
                 )
@@ -162,22 +162,23 @@ export default function ComponentSidebar ({ compRef }) {
 
           </ListItem>
 
-          <div style={{ maxHeight: '70vh', overflowY: 'auto', overflowX: 'hidden' }} >
+          <div style={{ maxHeight: '70vh', overflowY: 'auto', overflowX: 'hidden' }}>
             {searchText.length !== 0 && searchedComponentList.length !== 0 &&
 
               searchedComponentList.map((component, i) => {
-                return (<ListItemIcon key={i}>
-                  <SideComp component={component} />
-                </ListItemIcon>)
+                return (
+                  <ListItemIcon key={i}>
+                    <SideComp component={component} />
+                  </ListItemIcon>
+                )
               }
-              )
-            }
+              )}
 
             <ListItem>
 
               <Loader
-                type="TailSpin"
-                color="#F44336"
+                type='TailSpin'
+                color='#F44336'
                 height={100}
                 width={100}
                 visible={loading}
@@ -186,8 +187,7 @@ export default function ComponentSidebar ({ compRef }) {
 
             {!loading && searchText.length !== 0 && isSearchedResultsEmpty &&
 
-              <span style={{ margin: '20px' }}>{link3}</span>
-            }
+              <span style={{ margin: '20px' }}>{link3}</span>}
 
             {/* Collapsing List Mapped by Libraries fetched by the API */}
             {searchText.length === 0 &&
@@ -199,8 +199,8 @@ export default function ComponentSidebar ({ compRef }) {
                         <span className={classes.head}>{library.name}</span>
                         {collapse[library.id] ? <ExpandLess /> : <ExpandMore />}
                       </ListItem>
-                      <Collapse in={collapse[library.id]} timeout={'auto'} unmountOnExit mountOnEnter exit={false}>
-                        <List component="div" disablePadding dense >
+                      <Collapse in={collapse[library.id]} timeout='auto' unmountOnExit mountOnEnter exit={false}>
+                        <List component='div' disablePadding dense>
 
                           {/* Chunked Blocks of Library */}
                           {
@@ -209,9 +209,11 @@ export default function ComponentSidebar ({ compRef }) {
                                 <ListItem key={componentChunk[0].id} divider>
                                   {
                                     componentChunk.map((component) => {
-                                      return (<ListItemIcon key={component.name}>
-                                        <SideComp component={component} />
-                                      </ListItemIcon>)
+                                      return (
+                                        <ListItemIcon key={component.name}>
+                                          <SideComp component={component} />
+                                        </ListItemIcon>
+                                      )
                                     }
                                     )
                                   }
@@ -225,8 +227,7 @@ export default function ComponentSidebar ({ compRef }) {
                     </div>
                   )
                 }
-              )
-            }
+              )}
           </div>
         </List>
       </div>
@@ -235,9 +236,9 @@ export default function ComponentSidebar ({ compRef }) {
         <List>
           <ListItem button divider>
             <h2 style={{ margin: '5px auto 5px 5px' }}>Simulation Modes</h2>
-            <Tooltip title="close">
-              <IconButton color="inherit" className={classes.tools} size="small" onClick={() => { dispatch(toggleSimulate()) }}>
-                <CloseIcon fontSize="small" />
+            <Tooltip title='close'>
+              <IconButton color='inherit' className={classes.tools} size='small' onClick={() => { dispatch(toggleSimulate()) }}>
+                <CloseIcon fontSize='small' />
               </IconButton>
             </Tooltip>
           </ListItem>
@@ -248,7 +249,7 @@ export default function ComponentSidebar ({ compRef }) {
   )
 }
 
-export function ComponentImages() {
+export function ComponentImages () {
   const component_images = useSelector(state => state.schematicEditorReducer.component_images)
 
   const dispatch = useDispatch()
@@ -260,7 +261,7 @@ export function ComponentImages() {
 
   return (
     <div>
-      {(component_images !== undefined) && component_images.forEach((image) => { new Image().src = '/django_static/' + image; })}
+      {(component_images !== undefined) && component_images.forEach((image) => { new Image().src = '/django_static/' + image })}
     </div>
   )
 }
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index 388a0bda..b103e209 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -81,11 +81,11 @@ function SimpleSnackbar ({ open, close, message }) {
         onClose={close}
         message={message}
         action={
-          <React.Fragment>
-            <IconButton size="small" aria-label="close" color="inherit" onClick={close}>
-              <CloseIcon fontSize="small" />
+          <>
+            <IconButton size='small' aria-label='close' color='inherit' onClick={close}>
+              <CloseIcon fontSize='small' />
             </IconButton>
-          </React.Fragment>
+          </>
         }
       />
     </div>
@@ -172,8 +172,8 @@ function Header () {
 
   // handle display format of last saved status
   function getDate (jsonDate) {
-    var json = jsonDate
-    var date = new Date(json)
+    const json = jsonDate
+    const date = new Date(json)
     const dateTimeFormat = new Intl.DateTimeFormat('en', { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
     const [{ value: month }, , { value: day }, , { value: hour }, , { value: minute }, , { value: second }] = dateTimeFormat.formatToParts(date)
     return `${day} ${month} ${hour}:${minute}:${second}`
@@ -195,20 +195,20 @@ function Header () {
   const typography1 = 'Share Your ' + process.env.REACT_APP_DIAGRAM_NAME
   const typography2 = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
   return (
-    <Toolbar variant="dense" color="default">
+    <Toolbar variant='dense' color='default'>
       <SimpleSnackbar open={snacOpen} close={handleSnacClose} message={message} />
 
       {/* Display logo */}
-      <IconButton edge="start" className={classes.button} color="primary">
+      <IconButton edge='start' className={classes.button} color='primary'>
         <Avatar alt={altImage} src={logo} className={classes.small} />
       </IconButton>
       <Typography
-        variant="h6"
-        color="inherit"
+        variant='h6'
+        color='inherit'
         noWrap
         className={classes.toolbarTitle}
       >
-        <Link color="inherit" target='_blank' component={RouterLink} to="/">
+        <Link color='inherit' target='_blank' component={RouterLink} to='/'>
           {link}
         </Link>
       </Typography>
@@ -217,7 +217,7 @@ function Header () {
       <Hidden xsDown>
         <Input
           className={classes.input}
-          color="secondary"
+          color='secondary'
           value={schSave.title === 'Untitled' ? 'Untitled' : schSave.title}
           onChange={titleHandler}
           inputProps={{ 'aria-label': 'SchematicTitle' }}
@@ -229,17 +229,16 @@ function Header () {
         ? <>
           {(schSave.isSaved === true && schSave.details.save_time !== undefined)
             ? <Typography
-              variant="body2"
-              style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }}
-            >
+                variant='body2'
+                style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }}
+              >
               Last Saved : {getDate(schSave.details.save_time)} {/* Display last saved status for saved schematics */}
             </Typography>
-            : <></>
-          }
+            : <></>}
           <Button
-            size="small"
+            size='small'
             variant={shared !== true ? 'outlined' : 'contained'}
-            color="primary"
+            color='primary'
             className={schSave.isSaved === true && schSave.details.save_time !== undefined ? classes.button : classes.rightBlock}
             startIcon={<ShareIcon />}
             onClick={handleShare}
@@ -247,44 +246,41 @@ function Header () {
             <Hidden xsDown>Share</Hidden>
           </Button>
         </>
-        : <></>
-      }
+        : <></>}
 
       {/* Share dialog box to get share url */}
       <Dialog
         open={openShare}
         onClose={handleShareClose}
-        aria-labelledby="share-dialog-title"
-        aria-describedby="share-dialog-description"
+        aria-labelledby='share-dialog-title'
+        aria-describedby='share-dialog-description'
       >
-        <DialogTitle id="share-dialog-title">{typography1}</DialogTitle>
+        <DialogTitle id='share-dialog-title'>{typography1}</DialogTitle>
         <DialogContent>
-          <DialogContentText id="share-dialog-description">
+          <DialogContentText id='share-dialog-description'>
             <FormControlLabel
-              control={<Switch checked={shared} onChange={handleShareChange} name="shared" />}
-              label=": Sharing On"
+              control={<Switch checked={shared} onChange={handleShareChange} name='shared' />}
+              label=': Sharing On'
             />
           </DialogContentText>
-          <DialogContentText id="share-dialog-description">
+          <DialogContentText id='share-dialog-description'>
             {shared === true
               ? <input
-                ref={textAreaRef}
-                value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`}
-                readOnly
-              />
-              : <> Turn On sharing </>
-            }
+                  ref={textAreaRef}
+                  value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`}
+                  readOnly
+                />
+              : <> Turn On sharing </>}
           </DialogContentText>
 
         </DialogContent>
         <DialogActions>
           {shared === true && document.queryCommandSupported('copy')
-            ? <Button onClick={copyToClipboard} color="primary" autoFocus>
+            ? <Button onClick={copyToClipboard} color='primary' autoFocus>
               Copy url
             </Button>
-            : <></>
-          }
-          <Button onClick={handleShareClose} color="primary" autoFocus>
+            : <></>}
+          <Button onClick={handleShareClose} color='primary' autoFocus>
             close
           </Button>
         </DialogActions>
@@ -293,22 +289,22 @@ function Header () {
       {/* Display login option or user menu as per authenticated status */}
       {
         (!auth.isAuthenticated ? (<Button
-          size="small"
+          size='small'
           component={RouterLink}
-          to="/login"
+          to='/login'
           style={{ marginLeft: 'auto' }}
-          color="primary"
-          variant="outlined"
-        >
+          color='primary'
+          variant='outlined'
+                                  >
           Login
         </Button>)
           : (<>
 
             <IconButton
-              edge="start"
-              color="primary"
-              aria-controls="simple-menu"
-              aria-haspopup="true"
+              edge='start'
+              color='primary'
+              aria-controls='simple-menu'
+              aria-haspopup='true'
               onClick={handleClick}
             >
               <Avatar className={classes.purple}>
@@ -316,7 +312,7 @@ function Header () {
               </Avatar>
             </IconButton>
             <Menu
-              id="simple-menu"
+              id='simple-menu'
               anchorEl={anchorEl}
               keepMounted
               open={Boolean(anchorEl)}
@@ -327,7 +323,7 @@ function Header () {
               <MenuItem
                 target='_blank'
                 component={RouterLink}
-                to="/dashboard"
+                to='/dashboard'
                 onClick={handleClose}
               >
                 <ListItemText primary={auth.user.username} secondary={auth.user.email} />
@@ -335,7 +331,7 @@ function Header () {
               <MenuItem
                 target='_blank'
                 component={RouterLink}
-                to="/dashboard/profile"
+                to='/dashboard/profile'
                 onClick={handleClose}
               >
                 My Profile
@@ -343,19 +339,20 @@ function Header () {
               <MenuItem
                 target='_blank'
                 component={RouterLink}
-                to="/dashboard/schematics"
+                to='/dashboard/schematics'
                 onClick={handleClose}
               >
                 {typography2}
               </MenuItem>
               <MenuItem onClick={() => {
                 store.dispatch(logout(history))
-              }}>
+              }}
+              >
                 Logout
               </MenuItem>
             </Menu>
           </>
-          )
+            )
         )
       }
     </Toolbar>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index 43f03a81..5c84a80b 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -1,6 +1,6 @@
-import 'mxgraph/javascript/src/css/common.css';
+import 'mxgraph/javascript/src/css/common.css'
 
-import mxGraphFactory from 'mxgraph';
+import mxGraphFactory from 'mxgraph'
 import store from '../../../redux/store'
 import dot from '../../../static/dot.gif'
 import blockstyle from '../../../static/style.json'
@@ -10,7 +10,7 @@ import ToolbarTools from './ToolbarTools.js'
 import KeyboardShorcuts from './KeyboardShorcuts.js'
 import { SideBar } from './SideBar.js'
 
-var graph
+let graph
 
 const {
   mxGraph,
@@ -35,10 +35,10 @@ const {
   mxCellRenderer,
   mxConstraintHandler,
   mxImage
-} = new mxGraphFactory();
+} = new mxGraphFactory()
 
-function configureStylesheet(graph) {
-    graph.stylesheet.styles = blockstyle;
+function configureStylesheet (graph) {
+  graph.stylesheet.styles = blockstyle
 }
 
 export default function LoadGrid (container, sidebar, outline) {
@@ -76,8 +76,8 @@ export default function LoadGrid (container, sidebar, outline) {
     mxConnectionHandler.prototype.waypointsEnabled = true
     mxGraph.prototype.resetEdgesOnConnect = false
     mxConstants.SHADOWCOLOR = '#C0C0C0'
-    var joinNodeSize = 7
-    var strokeWidth = 2
+    const joinNodeSize = 7
+    const strokeWidth = 2
 
     // Replaces the port image
     mxConstraintHandler.prototype.pointImage = new mxImage(dot, 10, 10)
@@ -87,13 +87,13 @@ export default function LoadGrid (container, sidebar, outline) {
 
     // Creates the outline (navigator, overview) for moving
     // around the graph in the top, right corner of the window.
-    var outln = new mxOutline(graph, outline)
+    const outln = new mxOutline(graph, outline)
     // To show the images in the outline, uncomment the following code
     outln.outline.labelsVisible = true
     outln.outline.setHtmlLabels(true)
 
     graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
-      var cell = evt.getProperty('cell')
+      const cell = evt.getProperty('cell')
       if (cell !== undefined && cell.CellType === 'Component') {
         store.dispatch(getCompProperties(cell))
       } else {
@@ -124,7 +124,7 @@ export default function LoadGrid (container, sidebar, outline) {
     // This can be extended as shown in portrefs.html example to allow for per-port
     // incoming/outgoing direction.
     graph.getAllConnectionConstraints = function (terminal) {
-      var geo = (terminal != null) ? this.getCellGeometry(terminal.cell) : null
+      const geo = (terminal != null) ? this.getCellGeometry(terminal.cell) : null
 
       if ((geo != null ? !geo.relative : false) && this.getModel().isVertex(terminal.cell) && this.getModel().getChildCount(terminal.cell) === 0) {
         return [new mxConnectionConstraint(new mxPoint(0, 0.5), false), new mxConnectionConstraint(new mxPoint(1, 0.5), false)]
@@ -138,7 +138,7 @@ export default function LoadGrid (container, sidebar, outline) {
       if (this.graph.getModel().isEdge(cell)) {
         return true
       } else {
-        var geo = (cell != null) ? this.graph.getCellGeometry(cell) : null
+        const geo = (cell != null) ? this.graph.getCellGeometry(cell) : null
 
         return (geo != null) ? geo.relative : false
       }
@@ -150,18 +150,18 @@ export default function LoadGrid (container, sidebar, outline) {
     // Adds a special tooltip for edges
     graph.setTooltips(true)
 
-    var getTooltipForCell = graph.getTooltipForCell
+    const getTooltipForCell = graph.getTooltipForCell
     graph.getTooltipForCell = function (cell) {
-      var tip = ''
+      let tip = ''
 
       if (cell != null) {
-        var src = this.getModel().getTerminal(cell, true)
+        const src = this.getModel().getTerminal(cell, true)
 
         if (src != null) {
           tip += this.getTooltipForCell(src) + ' '
         }
 
-        var parent = this.getModel().getParent(cell)
+        const parent = this.getModel().getParent(cell)
 
         if (this.getModel().isVertex(parent)) {
           tip += this.getTooltipForCell(parent) + '.'
@@ -169,7 +169,7 @@ export default function LoadGrid (container, sidebar, outline) {
 
         tip += getTooltipForCell.apply(this, arguments)
 
-        var trg = this.getModel().getTerminal(cell, false)
+        const trg = this.getModel().getTerminal(cell, false)
 
         if (trg != null) {
           tip += ' ' + this.getTooltipForCell(trg)
@@ -180,13 +180,13 @@ export default function LoadGrid (container, sidebar, outline) {
     }
 
     // Switch for black background and bright styles
-    var invert = false
+    const invert = false
 
     if (invert) {
       container.style.backgroundColor = 'black'
 
       // White in-place editor text color
-      var mxCellEditorStartEditing = mxCellEditor.prototype.startEditing
+      const mxCellEditorStartEditing = mxCellEditor.prototype.startEditing
       mxCellEditor.prototype.startEditing = function (cell, trigger) {
         mxCellEditorStartEditing.apply(this, arguments)
 
@@ -198,12 +198,12 @@ export default function LoadGrid (container, sidebar, outline) {
       mxGraphHandler.prototype.previewColor = 'white'
     }
 
-    var labelBackground = (invert) ? '#000000' : '#FFFFFF'
-    var fontColor = (invert) ? '#FFFFFF' : '#000000'
-    var strokeColor = (invert) ? '#C0C0C0' : '#000000'
+    const labelBackground = (invert) ? '#000000' : '#FFFFFF'
+    const fontColor = (invert) ? '#FFFFFF' : '#000000'
+    const strokeColor = (invert) ? '#C0C0C0' : '#000000'
     // var fillColor = (invert) ? 'none' : '#FFFFFF'
 
-    var style = graph.getStylesheet().getDefaultEdgeStyle()
+    let style = graph.getStylesheet().getDefaultEdgeStyle()
     delete style.endArrow
     style.strokeColor = strokeColor
     style.labelBackgroundColor = labelBackground
@@ -235,15 +235,15 @@ export default function LoadGrid (container, sidebar, outline) {
 
     SideBar(graph, sidebar)
     KeyboardShorcuts(graph)
-    //NetlistInfoFunct(graph)
+    // NetlistInfoFunct(graph)
     ToolbarTools(graph)
 
     store.subscribe(() => {
-      var id = store.getState().componentPropertiesReducer.id
-      var parameter_values = store.getState().componentPropertiesReducer.parameter_values
-      var displayProperties = store.getState().componentPropertiesReducer.displayProperties
-      var cellList = graph.getModel().cells
-      var c = cellList[id]
+      const id = store.getState().componentPropertiesReducer.id
+      const parameter_values = store.getState().componentPropertiesReducer.parameter_values
+      const displayProperties = store.getState().componentPropertiesReducer.displayProperties
+      const cellList = graph.getModel().cells
+      const c = cellList[id]
       if (c !== undefined) {
         c.parameter_values = parameter_values
         c.displayProperties = displayProperties
@@ -251,27 +251,27 @@ export default function LoadGrid (container, sidebar, outline) {
     })
 
     // Wire-mode
-    var checkbox = {
+    const checkbox = {
       checked: false
     }
 
-    //document.body.appendChild(checkbox)
-    //mxUtils.write(document.body, 'Wire Mode')
+    // document.body.appendChild(checkbox)
+    // mxUtils.write(document.body, 'Wire Mode')
 
     // Starts connections on the background in wire-mode
-    var connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent
+    const connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent
     graph.connectionHandler.isStartEvent = function (me) {
       return checkbox.checked || connectionHandlerIsStartEvent.apply(this, arguments)
     }
 
     // Avoids any connections for gestures within tolerance except when in wire-mode
     // or when over a port
-    var connectionHandlerMouseUp = graph.connectionHandler.mouseUp
+    const connectionHandlerMouseUp = graph.connectionHandler.mouseUp
     graph.connectionHandler.mouseUp = function (sender, me) {
       if (this.first != null && this.previous != null) {
-        var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY())
-        var dx = Math.abs(point.x - this.first.x)
-        var dy = Math.abs(point.y - this.first.y)
+        const point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY())
+        const dx = Math.abs(point.x - this.first.x)
+        const dy = Math.abs(point.y - this.first.y)
 
         if (dx < this.graph.tolerance && dy < this.graph.tolerance) {
           // Selects edges in non-wire mode for single clicks, but starts
@@ -310,17 +310,17 @@ export default function LoadGrid (container, sidebar, outline) {
 
   // Computes the position of edge to edge connection points.
   mxGraphView.prototype.updateFixedTerminalPoint = function (edge, terminal, source, constraint) {
-    var pt = null
+    let pt = null
 
     if (constraint != null) {
       pt = this.graph.getConnectionPoint(terminal, constraint)
     }
 
     if (pt == null) {
-      var s = this.scale
-      var tr = this.translate
-      var orig = edge.origin
-      var geo = this.graph.getCellGeometry(edge.cell)
+      const s = this.scale
+      const tr = this.translate
+      const orig = edge.origin
+      const geo = this.graph.getCellGeometry(edge.cell)
       pt = geo.getTerminalPoint(source)
 
       // Computes edge-to-edge connection point
@@ -330,16 +330,16 @@ export default function LoadGrid (container, sidebar, outline) {
 
         // Finds nearest segment on edge and computes intersection
         if (terminal != null && terminal.absolutePoints != null) {
-          var seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y)
+          const seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y)
 
           // Finds orientation of the segment
-          var p0 = terminal.absolutePoints[seg]
-          var pe = terminal.absolutePoints[seg + 1]
-          var horizontal = (p0.x - pe.x === 0)
+          const p0 = terminal.absolutePoints[seg]
+          const pe = terminal.absolutePoints[seg + 1]
+          const horizontal = (p0.x - pe.x === 0)
 
           // Stores the segment in the edge state
-          var key = (source) ? 'sourceConstraint' : 'targetConstraint'
-          var value = (horizontal) ? 'horizontal' : 'vertical'
+          const key = (source) ? 'sourceConstraint' : 'targetConstraint'
+          const value = (horizontal) ? 'horizontal' : 'vertical'
           edge.style[key] = value
 
           // Keeps the coordinate within the segment bounds
@@ -365,15 +365,15 @@ export default function LoadGrid (container, sidebar, outline) {
   }
   // Sets source terminal point for edge-to-edge connections.
   mxConnectionHandler.prototype.createEdgeState = function (me) {
-    var edge = this.graph.createEdge()
+    const edge = this.graph.createEdge()
 
     if (this.sourceConstraint != null && this.previous != null) {
       edge.style = mxConstants.STYLE_EXIT_X + '=' + this.sourceConstraint.point.x + ';' +
         mxConstants.STYLE_EXIT_Y + '=' + this.sourceConstraint.point.y + ';'
     } else if (this.graph.model.isEdge(me.getCell())) {
-      var scale = this.graph.view.scale
-      var tr = this.graph.view.translate
-      var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+      const scale = this.graph.view.scale
+      const tr = this.graph.view.translate
+      const pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
         this.graph.snap(me.getGraphY() / scale) - tr.y)
       edge.geometry.setTerminalPoint(pt, true)
     }
@@ -388,33 +388,32 @@ export default function LoadGrid (container, sidebar, outline) {
 
   // Updates target terminal point for edge-to-edge connections.
   try {
-  var mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState
-  mxConnectionHandler.prototype.updateCurrentState = function (me) {
-    try {
-    mxConnectionHandlerUpdateCurrentState.apply(this, arguments)
-    }
-    catch(err) {
-    }
-    if (this.edgeState != null) {
-      this.edgeState.cell.geometry.setTerminalPoint(null, false)
+    const mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState
+    mxConnectionHandler.prototype.updateCurrentState = function (me) {
+      try {
+        mxConnectionHandlerUpdateCurrentState.apply(this, arguments)
+      } catch (err) {
+      }
+      if (this.edgeState != null) {
+        this.edgeState.cell.geometry.setTerminalPoint(null, false)
 
-      if (this.shape != null && this.currentState != null &&
+        if (this.shape != null && this.currentState != null &&
           this.currentState.view.graph.model.isEdge(this.currentState.cell)) {
-        var scale = this.graph.view.scale
-        var tr = this.graph.view.translate
-        var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
-          this.graph.snap(me.getGraphY() / scale) - tr.y)
-        this.edgeState.cell.geometry.setTerminalPoint(pt, false)
+          const scale = this.graph.view.scale
+          const tr = this.graph.view.translate
+          const pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
+            this.graph.snap(me.getGraphY() / scale) - tr.y)
+          this.edgeState.cell.geometry.setTerminalPoint(pt, false)
+        }
       }
     }
-  } }
-  catch(e){
+  } catch (e) {
     console.log(e)
   }
 
   // Updates the terminal and control points in the cloned preview.
   mxEdgeSegmentHandler.prototype.clonePreviewState = function (point, terminal) {
-    var clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments)
+    const clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments)
     clone.cell = clone.cell.clone()
 
     if (this.isSource || this.isTarget) {
@@ -432,27 +431,27 @@ export default function LoadGrid (container, sidebar, outline) {
     return clone
   }
 
-  var mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect
+  const mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect
   mxEdgeHandler.prototype.connect = function (edge, terminal, isSource, isClone, me) {
-    var result = null
-    var model = this.graph.getModel()
+    let result = null
+    const model = this.graph.getModel()
     // var parent = model.getParent(edge)
 
     model.beginUpdate()
     try {
       result = mxEdgeHandlerConnect.apply(this, arguments)
-      var geo = model.getGeometry(result)
+      let geo = model.getGeometry(result)
 
       if (geo != null) {
         geo = geo.clone()
-        var pt = null
+        let pt = null
 
         if (model.isEdge(terminal)) {
           pt = this.abspoints[(this.isSource) ? 0 : this.abspoints.length - 1]
           pt.x = pt.x / this.graph.view.scale - this.graph.view.translate.x
           pt.y = pt.y / this.graph.view.scale - this.graph.view.translate.y
 
-          var pstate = this.graph.getView().getState(
+          const pstate = this.graph.getView().getState(
             this.graph.getModel().getParent(edge))
 
           if (pstate != null) {
@@ -474,9 +473,9 @@ export default function LoadGrid (container, sidebar, outline) {
     return result
   }
 
-  var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker
+  const mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker
   mxConnectionHandler.prototype.createMarker = function () {
-    var marker = mxConnectionHandlerCreateMarker.apply(this, arguments)
+    const marker = mxConnectionHandlerCreateMarker.apply(this, arguments)
 
     // Uses complete area of cell for new connections (no hotspot)
     marker.intersects = function (state, evt) {
@@ -518,9 +517,9 @@ export default function LoadGrid (container, sidebar, outline) {
     return marker
   }
 
-  var mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker
+  const mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker
   mxEdgeHandler.prototype.createMarker = function () {
-    var marker = mxEdgeHandlerCreateMarker.apply(this, arguments)
+    const marker = mxEdgeHandlerCreateMarker.apply(this, arguments)
 
     // Adds in-place highlighting when reconnecting existing edges
     marker.highlight.highlight = this.graph.connectionHandler.marker.highlight.highlight
@@ -528,9 +527,9 @@ export default function LoadGrid (container, sidebar, outline) {
     return marker
   }
 
-  var mxGraphGetCellStyle = mxGraph.prototype.getCellStyle
+  const mxGraphGetCellStyle = mxGraph.prototype.getCellStyle
   mxGraph.prototype.getCellStyle = function (cell) {
-    var style = mxGraphGetCellStyle.apply(this, arguments)
+    let style = mxGraphGetCellStyle.apply(this, arguments)
 
     if (style != null && this.model.isEdge(cell)) {
       style = mxUtils.clone(style)
@@ -552,7 +551,7 @@ export default function LoadGrid (container, sidebar, outline) {
   ResistorShape.prototype.constructor = ResistorShape
 
   ResistorShape.prototype.redrawPath = function (path, x, y, w, h, isForeground) {
-    var dx = w / 16
+    const dx = w / 16
 
     if (isForeground) {
       path.moveTo(0, h / 2)
@@ -574,9 +573,9 @@ export default function LoadGrid (container, sidebar, outline) {
 
   mxEdgeStyle.WireConnector = function (state, source, target, hints, result) {
     // Creates array of all way- and terminalpoints
-    var pts = state.absolutePoints
-    var horizontal = true
-    var hint = null
+    const pts = state.absolutePoints
+    let horizontal = true
+    let hint = null
 
     // Gets the initial connection from the source terminal or edge
     if (source != null && state.view.graph.model.isEdge(source.cell)) {
@@ -585,7 +584,7 @@ export default function LoadGrid (container, sidebar, outline) {
       horizontal = source.style.portConstraint !== 'vertical'
 
       // Checks the direction of the shape and rotates
-      var direction = source.style[mxConstants.STYLE_DIRECTION]
+      const direction = source.style[mxConstants.STYLE_DIRECTION]
 
       if (direction === 'north' || direction === 'south') {
         horizontal = !horizontal
@@ -594,7 +593,7 @@ export default function LoadGrid (container, sidebar, outline) {
 
     // Adds the first point
     // TODO: Should move along connected segment
-    var pt = pts[0]
+    let pt = pts[0]
 
     if (pt == null && source != null) {
       pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source))
@@ -602,7 +601,7 @@ export default function LoadGrid (container, sidebar, outline) {
       pt = pt.clone()
     }
 
-    var first = pt
+    const first = pt
 
     // Adds the waypoints
     if (hints != null && hints.length > 0) {
@@ -622,7 +621,7 @@ export default function LoadGrid (container, sidebar, outline) {
            //horizontal = !horizontal;
          } */
 
-      for (var i = 0; i < hints.length; i++) {
+      for (let i = 0; i < hints.length; i++) {
         horizontal = !horizontal
         hint = state.view.transformControlPoint(state, hints[i])
 
@@ -660,11 +659,11 @@ export default function LoadGrid (container, sidebar, outline) {
   mxStyleRegistry.putValue('wireEdgeStyle', mxEdgeStyle.WireConnector)
 
   // This connector needs an mxEdgeSegmentHandler
-  var mxGraphCreateHandler = mxGraph.prototype.createHandler
+  const mxGraphCreateHandler = mxGraph.prototype.createHandler
   mxGraph.prototype.createHandler = function (state) {
     if (state != null) {
       if (this.model.isEdge(state.cell)) {
-        var style = this.view.getEdgeStyle(state)
+        const style = this.view.getEdgeStyle(state)
 
         if (style === mxEdgeStyle.WireConnector) {
           return new mxEdgeSegmentHandler(state)
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js
index a6dbf0dc..4d650ab5 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js
@@ -1,16 +1,16 @@
-import 'mxgraph/javascript/src/css/common.css';
+import 'mxgraph/javascript/src/css/common.css'
 
-import mxGraphFactory from 'mxgraph';
+import mxGraphFactory from 'mxgraph'
 import { Undo, Redo, ZoomIn, ZoomOut, ZoomAct } from './ToolbarTools'
 
 const {
   mxKeyHandler,
   mxEvent,
   mxClient
-} = new mxGraphFactory();
+} = new mxGraphFactory()
 
 export default function KeyboardShortcuts (graph) {
-  var keyHandler = new mxKeyHandler(graph)
+  const keyHandler = new mxKeyHandler(graph)
 
   keyHandler.getFunction = function (evt) {
     if (evt != null) {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
index 626f8e92..959b3dce 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
@@ -1,6 +1,6 @@
-import 'mxgraph/javascript/src/css/common.css';
+import 'mxgraph/javascript/src/css/common.css'
 
-import mxGraphFactory from 'mxgraph';
+import mxGraphFactory from 'mxgraph'
 import { default_scale, getSvgMetadata } from './SvgParser.js'
 
 const {
@@ -8,31 +8,31 @@ const {
   mxUtils,
   mxEvent,
   mxDragSource
-} = new mxGraphFactory();
+} = new mxGraphFactory()
 
-var graph
+let graph
 
 export function SideBar (getGraph) {
   graph = getGraph
 }
 
 export function AddComponent (component, imgref) {
-  var img = imgref
+  const img = imgref
 
-  var graphF = function (evt) {
-    var x = mxEvent.getClientX(evt)
-    var y = mxEvent.getClientY(evt)
-    var elt = document.elementFromPoint(x, y)
+  const graphF = function (evt) {
+    const x = mxEvent.getClientX(evt)
+    const y = mxEvent.getClientY(evt)
+    const elt = document.elementFromPoint(x, y)
     if (mxUtils.isAncestorNode(graph.container, elt)) {
       return graph
     }
     return null
   }
-  var funct = function (graph, evt, target, x, y) {
-    var parent = graph.getDefaultParent()
-    var model = graph.getModel()
+  const funct = function (graph, evt, target, x, y) {
+    const parent = graph.getDefaultParent()
+    const model = graph.getModel()
 
-    var v1 = null
+    const v1 = null
 
     model.beginUpdate()
     try {
@@ -67,7 +67,7 @@ export function AddComponent (component, imgref) {
   }
 
   // Creates the element that is being for the actual preview.
-  var dragElt = document.createElement('div')
+  const dragElt = document.createElement('div')
   dragElt.style.border = 'dashed black 1px'
   dragElt.style.width = (component.block_width / default_scale) + 'px'
   dragElt.style.height = (component.block_height / default_scale) + 'px'
@@ -77,7 +77,7 @@ export function AddComponent (component, imgref) {
   // the use of the defaults. Note that dx and dy are only used for the
   // drag icon but not for the preview.
 
-  var ds = mxUtils.makeDraggable(
+  const ds = mxUtils.makeDraggable(
     img,
     graphF,
     funct,
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index c0134673..537b5076 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -1,22 +1,17 @@
-import 'mxgraph/javascript/src/css/common.css';
+import 'mxgraph/javascript/src/css/common.css'
 
-import mxGraphFactory from 'mxgraph';
+import mxGraphFactory from 'mxgraph'
 
 const {
-    mxPoint
-} = new mxGraphFactory();
+  mxPoint
+} = new mxGraphFactory()
 
 // we need to divide the svg width and height by the same number in order to maintain the aspect ratio.
-export const default_scale = parseFloat(process.env.REACT_APP_BLOCK_SCALE);
-export const port_size = parseFloat(process.env.REACT_APP_PORT_SIZE);
+export const default_scale = parseFloat(process.env.REACT_APP_BLOCK_SCALE)
+export const port_size = parseFloat(process.env.REACT_APP_PORT_SIZE)
 
-function getParameter(i) {
-    if (i < 10)
-        return 'p00' + i.toString();
-    else if (i < 100)
-        return 'p0' + i.toString();
-    else
-        return 'p' + i.toString();
+function getParameter (i) {
+  if (i < 10) { return 'p00' + i.toString() } else if (i < 100) { return 'p0' + i.toString() } else { return 'p' + i.toString() }
 }
 
 export function getSvgMetadata (graph, parent, evt, target, x, y, component) {
@@ -24,61 +19,58 @@ export function getSvgMetadata (graph, parent, evt, target, x, y, component) {
   // initialize information from the svg meta
   // plots pinnumbers and component labels.
 
-  const allowed_part = [0, 1];
-  const allowed_dmg = [0, 1];
+  const allowed_part = [0, 1]
+  const allowed_dmg = [0, 1]
 
-  const block_name = component.block_name;
+  const block_name = component.block_name
   const pins = []
   // make the component images smaller by scaling
-  let width = component.block_width / default_scale
-  let height = component.block_height / default_scale
+  const width = component.block_width / default_scale
+  const height = component.block_height / default_scale
 
   const v1 = graph.insertVertex(parent, null, null, x, y, width, height, block_name)
   v1.CellType = 'Component'
   v1.block_id = component.id
-  v1.blockprefix = component.blockprefix.name;
+  v1.blockprefix = component.blockprefix.name
   v1.displayProperties = {
     blockport_set: component.blockport_set,
-    display_parameter: component.initial_display_parameter,
+    display_parameter: component.initial_display_parameter
   }
-  let parameter_values = {};
+  const parameter_values = {}
   for (let i = 0; i < 40; i++) {
-      let p = getParameter(i) + '_value';
-      let pinitial = p + '_initial';
-      parameter_values[p] = component[pinitial];
+    const p = getParameter(i) + '_value'
+    const pinitial = p + '_initial'
+    parameter_values[p] = component[pinitial]
   }
-  v1.parameter_values = parameter_values;
+  v1.parameter_values = parameter_values
 
   v1.setConnectable(false)
 
-  let blockports = component.blockport_set;
-  let ports = blockports.length;
+  const blockports = component.blockport_set
+  const ports = blockports.length
   for (let i = 0; i < ports; i++) {
-      let blockport = blockports[i];
-      if (!allowed_part.includes(blockport.port_part))
-          continue;
-      if (!allowed_dmg.includes(blockport.port_dmg))
-          continue;
-      if (blockport.port_name === 'NC')
-          continue;
+    const blockport = blockports[i]
+    if (!allowed_part.includes(blockport.port_part)) { continue }
+    if (!allowed_dmg.includes(blockport.port_dmg)) { continue }
+    if (blockport.port_name === 'NC') { continue }
 
-      let x_pos = 1 / 2 + blockport.port_x / default_scale / width;
-      let y_pos = 1 / 2 - blockport.port_y / default_scale / height;
+    const x_pos = 1 / 2 + blockport.port_x / default_scale / width
+    const y_pos = 1 / 2 - blockport.port_y / default_scale / height
 
-      let port_orientation = blockport.port_orientation;
-      let point = null;
-      switch (port_orientation) {
-          case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break;
-          case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break;
-          case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break;
-          case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break;
-          default: point = new mxPoint(-port_size / 2, -port_size / 2); break;
-      }
+    const port_orientation = blockport.port_orientation
+    let point = null
+    switch (port_orientation) {
+      case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break
+      case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break
+      case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break
+      case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break
+      default: point = new mxPoint(-port_size / 2, -port_size / 2); break
+    }
 
-      var vp = graph.insertVertex(v1, null, null, x_pos, y_pos, port_size, port_size, port_orientation)
-      vp.geometry.relative = true;
-      vp.geometry.offset = point;
-      vp.CellType = 'Pin'
-      pins[i] = vp;
+    const vp = graph.insertVertex(v1, null, null, x_pos, y_pos, port_size, port_size, port_orientation)
+    vp.geometry.relative = true
+    vp.geometry.offset = point
+    vp.CellType = 'Pin'
+    pins[i] = vp
   }
 }
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 02a1ec35..05e381d6 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -1,12 +1,12 @@
-import 'mxgraph/javascript/src/css/common.css';
+import 'mxgraph/javascript/src/css/common.css'
 
-import mxGraphFactory from 'mxgraph';
-import { port_size } from './SvgParser';
+import mxGraphFactory from 'mxgraph'
+import { port_size } from './SvgParser'
 import store from '../../../redux/store'
 import { setModel, setNetlist } from '../../../redux/actions/index'
 
-var graph
-var undoManager
+let graph
+let undoManager
 
 const {
   mxPrintPreview,
@@ -17,13 +17,13 @@ const {
   mxEvent,
   mxCodec,
   mxPoint
-} = new mxGraphFactory();
+} = new mxGraphFactory()
 
 export default function ToolbarTools (grid, unredo) {
   graph = grid
 
   undoManager = new mxUndoManager()
-  var listener = function (sender, evt) {
+  const listener = function (sender, evt) {
     undoManager.undoableEditHappened(evt.getProperty('edit'))
   }
   graph.getModel().addListener(mxEvent.UNDO, listener)
@@ -33,13 +33,13 @@ export default function ToolbarTools (grid, unredo) {
 // SAVE
 export function Save (description = '') {
   XMLWireConnections()
-  var enc = new mxCodec(mxUtils.createXmlDocument())
-  var model = graph.getModel();
-  var firstCell = model.cells[0];
-  firstCell.appname = process.env.REACT_APP_NAME;
-  firstCell.description = description;
-  var node = enc.encode(model);
-  var value = mxUtils.getXml(node)
+  const enc = new mxCodec(mxUtils.createXmlDocument())
+  const model = graph.getModel()
+  const firstCell = model.cells[0]
+  firstCell.appname = process.env.REACT_APP_NAME
+  firstCell.description = description
+  const node = enc.encode(model)
+  const value = mxUtils.getXml(node)
   return value
 }
 
@@ -80,10 +80,10 @@ export function ClearGrid () {
 
 // ROTATE COMPONENT
 export function Rotate () {
-  var view = graph.getView()
-  var cell = graph.getSelectionCell()
-  var state = view.getState(cell, true)
-  var vHandler = graph.createVertexHandler(state)
+  const view = graph.getView()
+  const cell = graph.getSelectionCell()
+  const state = view.getState(cell, true)
+  const vHandler = graph.createVertexHandler(state)
   if (cell != null) {
     vHandler.rotateCell(cell, 90, cell.getParent())
   }
@@ -93,34 +93,34 @@ export function Rotate () {
 // PRINT PREVIEW OF SCHEMATIC
 export function PrintPreview () {
   // Matches actual printer paper size and avoids blank pages
-  var scale = 0.8
-  var headerSize = 50
-  var footerSize = 50
+  const scale = 0.8
+  const headerSize = 50
+  const footerSize = 50
 
   // Applies scale to page
-  var pageFormat = { x: 0, y: 0, width: 1169, height: 827 }
-  var pf = mxRectangle.fromRectangle(pageFormat || mxConstants.PAGE_FORMAT_A4_LANDSCAPE)
+  const pageFormat = { x: 0, y: 0, width: 1169, height: 827 }
+  const pf = mxRectangle.fromRectangle(pageFormat || mxConstants.PAGE_FORMAT_A4_LANDSCAPE)
   pf.width = Math.round(pf.width * scale * graph.pageScale)
   pf.height = Math.round(pf.height * scale * graph.pageScale)
 
   // Finds top left corner of top left page
-  var bounds = mxRectangle.fromRectangle(graph.getGraphBounds())
+  const bounds = mxRectangle.fromRectangle(graph.getGraphBounds())
   bounds.x -= graph.view.translate.x * graph.view.scale
   bounds.y -= graph.view.translate.y * graph.view.scale
 
-  var x0 = Math.floor(bounds.x / pf.width) * pf.width
-  var y0 = Math.floor(bounds.y / pf.height) * pf.height
+  const x0 = Math.floor(bounds.x / pf.width) * pf.width
+  const y0 = Math.floor(bounds.y / pf.height) * pf.height
 
-  var preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0)
+  const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0)
   preview.marginTop = headerSize * scale * graph.pageScale
   preview.marginBottom = footerSize * scale * graph.pageScale
   preview.autoOrigin = false
 
-  var oldRenderPage = preview.renderPage
+  const oldRenderPage = preview.renderPage
   preview.renderPage = function (w, h, x, y, content, pageNumber) {
-    var div = oldRenderPage.apply(this, arguments)
+    const div = oldRenderPage.apply(this, arguments)
 
-    var header = document.createElement('div')
+    const header = document.createElement('div')
     header.style.position = 'absolute'
     header.style.boxSizing = 'border-box'
     header.style.fontFamily = 'Arial,Helvetica'
@@ -135,8 +135,8 @@ export function PrintPreview () {
     // Vertical centering for text in header/footer
     header.style.lineHeight = (this.marginTop - 10) + 'px'
 
-    var footer = header.cloneNode(true)
-    var title = store.getState().saveSchematicReducer.title
+    const footer = header.cloneNode(true)
+    const title = store.getState().saveSchematicReducer.title
     mxUtils.write(header, title + ' - ' + process.env.REACT_APP_NAME + ' on Cloud')
     header.style.borderBottom = '1px solid blue'
     header.style.top = '0px'
@@ -156,22 +156,22 @@ export function PrintPreview () {
 
 // ERC CHECK FOR SCHEMATIC
 export function ErcCheck () {
-  const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added';
-  var list = graph.getModel().cells // mapping the grid
-  var vertexCount = 0
-  var errorCount = 0
-  var PinNC = 0
-  var ground = 0
-  for (var property in list) {
-    var cell = list[property]
+  const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added'
+  const list = graph.getModel().cells // mapping the grid
+  let vertexCount = 0
+  let errorCount = 0
+  let PinNC = 0
+  const ground = 0
+  for (const property in list) {
+    const cell = list[property]
     if (cell.CellType === 'Component') {
-      for (var child in cell.children) {
-        var childVertex = cell.children[child]
+      for (const child in cell.children) {
+        const childVertex = cell.children[child]
         if (childVertex.CellType === 'Pin' && childVertex.edges === null) { // Checking if connections exist from a given pin
           ++PinNC
           ++errorCount
         } else {
-          for (var w in childVertex.edges) {
+          for (const w in childVertex.edges) {
             if (childVertex.edges[w].source === null || childVertex.edges[w].target === null) {
               ++PinNC
             }
@@ -196,18 +196,18 @@ export function ErcCheck () {
   }
 }
 function ErcCheckNets () {
-  const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added';
-  var list = graph.getModel().cells // mapping the grid
-  var vertexCount = 0
-  var errorCount = 0
-  var PinNC = 0
-  var ground = 0
-  for (var property in list) {
-    var cell = list[property]
+  const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added'
+  const list = graph.getModel().cells // mapping the grid
+  let vertexCount = 0
+  let errorCount = 0
+  let PinNC = 0
+  const ground = 0
+  for (const property in list) {
+    const cell = list[property]
     if (cell.CellType === 'Component') {
-      for (var child in cell.children) {
+      for (const child in cell.children) {
         console.log(cell.children[child])
-        var childVertex = cell.children[child]
+        const childVertex = cell.children[child]
         if (childVertex.CellType === 'Pin' && childVertex.edges === null) {
           graph.getSelectionCell(childVertex)
           console.log('This pin is not connected')
@@ -238,37 +238,37 @@ function ErcCheckNets () {
 
 // GENERATE NETLIST
 export function GenerateNetList () {
-  var c = 1
-  var spiceModels = ''
-  var netlist = {
+  let c = 1
+  const spiceModels = ''
+  const netlist = {
     componentlist: [],
     nodelist: []
   }
-  var erc = ErcCheckNets()
-  var k = ''
+  const erc = ErcCheckNets()
+  let k = ''
   if (erc === false) {
     alert('ERC check failed')
   } else {
-    var list = annotate(graph)
-    for (var property in list) {
+    const list = annotate(graph)
+    for (const property in list) {
       if (list[property].CellType === 'Component' && list[property].blockprefix !== 'PWR') {
-        var compobj = {
+        const compobj = {
           name: '',
           node1: '',
           node2: '',
           magnitude: ''
         }
-        var component = list[property]
-          k = k + component.blockprefix + c.toString()
-          component.value = component.blockprefix + c.toString()
-          ++c
+        const component = list[property]
+        k = k + component.blockprefix + c.toString()
+        component.value = component.blockprefix + c.toString()
+        ++c
 
         if (component.children !== null) {
-          for (var child in component.children) {
-            var pin = component.children[child]
+          for (const child in component.children) {
+            const pin = component.children[child]
             if (pin.vertex === true) {
               if (pin.edges !== null && pin.edges.length !== 0) {
-                for (var wire in pin.edges) {
+                for (const wire in pin.edges) {
                   if (pin.edges[wire].source !== null && pin.edges[wire].target !== null) {
                     if (pin.edges[wire].source.edge === true) {
                       console.log('wire')
@@ -324,10 +324,10 @@ export function GenerateNetList () {
   } finally {
     graph.getModel().endUpdate()
   }
-  var a = new Set(netlist.nodelist)
+  const a = new Set(netlist.nodelist)
   console.log(netlist.nodelist)
   console.log(a)
-  var netobj = {
+  const netobj = {
     models: spiceModels,
     main: k
   }
@@ -339,91 +339,91 @@ function annotate (graph) {
 
 export function renderXML () {
   graph.view.refresh()
-  var xml = 'null'
-  var xmlDoc = mxUtils.parseXml(xml)
+  const xml = 'null'
+  const xmlDoc = mxUtils.parseXml(xml)
   parseXmlToGraph(xmlDoc, graph)
 }
 function parseXmlToGraph (xmlDoc, graph) {
   const cells = xmlDoc.documentElement.children[0].children
   const parent = graph.getDefaultParent()
-  var v1
+  let v1
 
   graph.getModel().beginUpdate()
   try {
     for (let i = 0; i < cells.length; i++) {
-      const cell = cells[i];
-      const cellAttrs = cell.attributes;
-      const cellChildren = cell.children;
+      const cell = cells[i]
+      const cellAttrs = cell.attributes
+      const cellChildren = cell.children
       if (cellAttrs.CellType.value === 'Component') { // is component
         const style = cellAttrs.style.value
         const vertexId = Number(cellAttrs.id.value)
         const geom = cellChildren[0].attributes
-        const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0;
-        const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0;
+        const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0
+        const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0
         const height = Number(geom.height.value)
         const width = Number(geom.width.value)
         v1 = graph.insertVertex(parent, vertexId, null, xPos, yPos, width, height, style)
-        v1.connectable = 0;
+        v1.connectable = 0
         v1.CellType = 'Component'
         v1.block_id = Number(cellAttrs.block_id.value)
-        v1.blockprefix = cellAttrs.blockprefix.value;
-        var blockport_set = [];
-        var cellChildrenBlockport_set = cellChildren[1].children[0];
+        v1.blockprefix = cellAttrs.blockprefix.value
+        const blockport_set = []
+        const cellChildrenBlockport_set = cellChildren[1].children[0]
         if (cellChildrenBlockport_set !== undefined) {
-          for (var b of cellChildrenBlockport_set.children) {
-            let bc = {};
+          for (const b of cellChildrenBlockport_set.children) {
+            const bc = {}
             for (let i = 0, n = b.attributes.length; i < n; i++) {
-              let key = b.attributes[i].nodeName;
-              let value = b.attributes[i].nodeValue;
-              bc[key] = value;
+              const key = b.attributes[i].nodeName
+              const value = b.attributes[i].nodeValue
+              bc[key] = value
             }
-            blockport_set.push(bc);
+            blockport_set.push(bc)
           }
         }
         v1.displayProperties = {
           blockport_set: blockport_set,
-          display_parameter: cellChildren[1].attributes.display_parameter.value,
+          display_parameter: cellChildren[1].attributes.display_parameter.value
         }
-        var parameter_values = {};
-        var cellChildrenParameter_values = cellChildren[2].attributes.parameter_values;
+        let parameter_values = {}
+        const cellChildrenParameter_values = cellChildren[2].attributes.parameter_values
         if (cellChildrenParameter_values !== undefined) {
-          parameter_values = cellChildrenParameter_values.value;
+          parameter_values = cellChildrenParameter_values.value
         }
-        v1.parameter_values = parameter_values;
+        v1.parameter_values = parameter_values
       } else if (cellAttrs.CellType.value === 'Pin') {
         const style = cellAttrs.style.value
         const vertexId = Number(cellAttrs.id.value)
         const geom = cellChildren[0].attributes
-        const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0;
-        const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0;
-        let point = null;
+        const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0
+        const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0
+        let point = null
         switch (style) {
-            case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break;
-            case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break;
-            case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break;
-            case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break;
-            default: point = new mxPoint(-port_size / 2, -port_size / 2); break;
+          case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break
+          case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break
+          case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break
+          case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break
+          default: point = new mxPoint(-port_size / 2, -port_size / 2); break
         }
-        var vp = graph.insertVertex(v1, vertexId, null, xPos, yPos, port_size, port_size, style)
-        vp.geometry.relative = true;
-        vp.geometry.offset = point;
+        const vp = graph.insertVertex(v1, vertexId, null, xPos, yPos, port_size, port_size, style)
+        vp.geometry.relative = true
+        vp.geometry.offset = point
         vp.CellType = 'Pin'
       } else if (cellAttrs.edge) { // is edge
         const edgeId = Number(cellAttrs.id.value)
         const source = Number(cellAttrs.sourceVertex.value)
         const target = Number(cellAttrs.targetVertex.value)
-        const sourceCell = graph.getModel().getCell(source);
-        const targetCell = graph.getModel().getCell(target);
+        const sourceCell = graph.getModel().getCell(source)
+        const targetCell = graph.getModel().getCell(target)
         try {
-          var edge = graph.insertEdge(parent, edgeId, null, sourceCell, targetCell)
-          var firstChild = cellChildren[0].children[0];
+          const edge = graph.insertEdge(parent, edgeId, null, sourceCell, targetCell)
+          const firstChild = cellChildren[0].children[0]
           if (firstChild !== undefined) {
             edge.geometry.points = []
-            var plist = firstChild.children
-            for (var a of plist) {
+            const plist = firstChild.children
+            for (const a of plist) {
               try {
-                var xPos = Number(a.attributes.x.value);
-                var yPos = Number(a.attributes.y.value);
+                const xPos = Number(a.attributes.x.value)
+                const yPos = Number(a.attributes.y.value)
                 edge.geometry.points.push(new mxPoint(xPos, yPos))
               } catch (e) { console.log('error', e) }
             }
@@ -447,27 +447,27 @@ function parseXmlToGraph (xmlDoc, graph) {
 export function renderGalleryXML (xml) {
   graph.removeCells(graph.getChildVertices(graph.getDefaultParent()))
   graph.view.refresh()
-  var xmlDoc = mxUtils.parseXml(xml)
+  const xmlDoc = mxUtils.parseXml(xml)
   parseXmlToGraph(xmlDoc, graph)
 }
 
 function XMLWireConnections () {
-  var erc = true
+  const erc = true
   if (erc === false) {
     alert('ERC check failed')
   } else {
-    var list = graph.getModel().cells
-    for (var property in list) {
+    const list = graph.getModel().cells
+    for (const property in list) {
       if (list[property].CellType === 'Component' && list[property].blockprefix !== 'PWR') {
-        var component = list[property]
+        const component = list[property]
 
         if (component.children !== null) {
-          for (var child in component.children) {
-            var pin = component.children[child]
+          for (const child in component.children) {
+            const pin = component.children[child]
             if (pin.vertex === true) {
               try {
                 if (pin.edges !== null && pin.edges.length !== 0) {
-                  for (var wire in pin.edges) {
+                  for (const wire in pin.edges) {
                     if (pin.edges[wire].source !== null && pin.edges[wire].target !== null) {
                       if (pin.edges[wire].source.edge === true) {
                         pin.edges[wire].sourceVertex = pin.edges[wire].source.id
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
index ac4c588a..8444937d 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
@@ -71,18 +71,18 @@ function GridProperties ({ gridRef }) {
   return (
     <>
       <ListItem>
-        <ListItemText primary="Grid Properties" />
+        <ListItemText primary='Grid Properties' />
       </ListItem>
       <ListItem style={{ padding: '10px 5px 15px 5px' }} divider>
         <TextField
-          id="filled-select-currency"
+          id='filled-select-currency'
           select
           size='small'
           className={classes.pages}
           value={gridSize}
           onChange={handleSizeChange}
-          helperText="Grid size"
-          variant="outlined"
+          helperText='Grid size'
+          variant='outlined'
         >
           {pageSize.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -91,14 +91,14 @@ function GridProperties ({ gridRef }) {
           ))}
         </TextField>
         <TextField
-          id="grid-layout"
+          id='grid-layout'
           select
           size='small'
           className={classes.pages}
           value={gridLayout}
           onChange={handleLayoutChange}
-          helperText="Grid Layout"
-          variant="outlined"
+          helperText='Grid Layout'
+          variant='outlined'
         >
           {pageLayout.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -143,7 +143,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) {
         <ListItem button divider>
           <h2 style={{ margin: '5px' }}>Properties</h2>
         </ListItem>
-        <div style={isOpen ? { display: 'none' } : {} }>
+        <div style={isOpen ? { display: 'none' } : {}}>
           <GridProperties gridRef={gridRef} />
 
           {/* Display component position box */}
@@ -151,7 +151,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) {
             <ListItemText primary={typography3} />
           </ListItem>
           <ListItem style={{ padding: '0px' }} divider>
-            <div className="outline-container" ref={outlineRef} id="outlineContainer" />
+            <div className='outline-container' ref={outlineRef} id='outlineContainer' />
           </ListItem>
 
           {/* Input form field for schematic description */}
@@ -159,7 +159,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) {
             <ListItemText primary={typography1} />
           </ListItem>
           <ListItem style={{ padding: '0px 7px 7px 7px' }} divider>
-            <TextareaAutosize id='Description' label='Description' value={ schSave.description === '' ? description || '' : schSave.description } onChange={getInputValues} rowsMin={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} />
+            <TextareaAutosize id='Description' label='Description' value={schSave.description === '' ? description || '' : schSave.description} onChange={getInputValues} rowsMin={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} />
           </ListItem>
         </div>
       </List>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
index 48e273ff..4dfa0f69 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
@@ -27,13 +27,13 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre
 
   return (
     <>
-      <nav className={classes.drawer} aria-label="mailbox folders">
-        <Hidden xlUp implementation="css">
+      <nav className={classes.drawer} aria-label='mailbox folders'>
+        <Hidden xlUp implementation='css'>
           <Drawer
             container={container}
-            variant="temporary"
+            variant='temporary'
             open={mobileOpen}
-            anchor="right"
+            anchor='right'
             onClose={mobileClose}
             classes={{
               paper: classes.drawerPaper
@@ -44,7 +44,7 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre
           >
             <IconButton
               onClick={mobileClose}
-              color="inherit"
+              color='inherit'
               style={{ marginRight: '190px' }}
             >
               <HighlightOffIcon />
@@ -53,13 +53,13 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre
           </Drawer>
         </Hidden>
 
-        <Hidden mdDown implementation="css">
+        <Hidden mdDown implementation='css'>
           <Drawer
             classes={{
               paper: classes.drawerPaper
             }}
-            anchor="right"
-            variant="permanent"
+            anchor='right'
+            variant='permanent'
             open
           >
             {children}
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index 1ef676a8..95397eeb 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -23,8 +23,8 @@ import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutli
 import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined'
 import SystemUpdateAltOutlinedIcon from '@material-ui/icons/SystemUpdateAltOutlined'
 import { Link as RouterLink } from 'react-router-dom'
-import beautify from 'xml-beautifier';
-import mxGraphFactory from 'mxgraph';
+import beautify from 'xml-beautifier'
+import mxGraphFactory from 'mxgraph'
 
 import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog } from './ToolbarExtension'
 import { ZoomIn, ZoomOut, ZoomAct, DeleteComp, PrintPreview, Rotate, GenerateNetList, Undo, Redo, Save, ClearGrid } from './Helper/ToolbarTools'
@@ -33,7 +33,7 @@ import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, open
 
 const {
   mxUtils
-} = new mxGraphFactory();
+} = new mxGraphFactory()
 
 const useStyles = makeStyles((theme) => ({
   menuButton: {
@@ -70,11 +70,11 @@ function SimpleSnackbar ({ open, close, message }) {
         onClose={close}
         message={message}
         action={
-          <React.Fragment>
-            <IconButton size="small" aria-label="close" color="inherit" onClick={close}>
-              <CloseIcon fontSize="small" />
+          <>
+            <IconButton size='small' aria-label='close' color='inherit' onClick={close}>
+              <CloseIcon fontSize='small' />
             </IconButton>
-          </React.Fragment>
+          </>
         }
       />
     </div>
@@ -100,8 +100,8 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
   const [netlist, genNetlist] = React.useState('')
 
   const handleClickOpen = () => {
-    var compNetlist = GenerateNetList()
-    var netlist = netfile.title + '\n\n' +
+    const compNetlist = GenerateNetList()
+    const netlist = netfile.title + '\n\n' +
       compNetlist.models + '\n' +
       compNetlist.main + '\n' +
       netfile.controlLine + '\n' +
@@ -157,19 +157,19 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
     canvas.height = gridRef.current.scrollHeight
     canvas.style.width = canvas.width + 'px'
     canvas.style.height = canvas.height + 'px'
-    var images = svg.getElementsByTagName('image')
-    for (var image of images) {
+    const images = svg.getElementsByTagName('image')
+    for (const image of images) {
       let data = await fetch(image.getAttribute('xlink:href')).then((v) => {
         return v.text()
       })
-      data = encodeURIComponent(data);
+      data = encodeURIComponent(data)
       image.removeAttribute('xlink:href')
       image.setAttribute(
         'href',
         'data:image/svg+xml;base64,' + window.btoa(data)
       )
     }
-    var ctx = canvas.getContext('2d')
+    const ctx = canvas.getContext('2d')
     ctx.webkitImageSmoothingEnabled = true
     ctx.msImageSmoothingEnabled = true
     ctx.imageSmoothingEnabled = true
@@ -177,13 +177,13 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
     ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
     return new Promise(resolve => {
       if (type === 'SVG') {
-        var svgdata = new XMLSerializer().serializeToString(svg)
+        const svgdata = new XMLSerializer().serializeToString(svg)
         resolve('<?xml version="1.0" encoding="UTF-8"?>' + svgdata)
         return
       }
-      var v = Canvg.fromString(ctx, svg.outerHTML)
+      const v = Canvg.fromString(ctx, svg.outerHTML)
       v.render().then(() => {
-        var image = ''
+        let image = ''
         if (type === 'JPG') {
           const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
           for (let i = 0; i < imgdata.data.length; i += 4) {
@@ -208,12 +208,12 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
 
   // Download JPEG, PNG exported Image
   function downloadImage (data, type) {
-    var evt = new MouseEvent('click', {
+    const evt = new MouseEvent('click', {
       view: window,
       bubbles: false,
       cancelable: true
     })
-    var a = document.createElement('a')
+    const a = document.createElement('a')
     const ext = (type === 'PNG') ? '.png' : '.jpg'
     a.setAttribute('download', schSave.title + '_' + process.env.REACT_APP_NAME + '_on_Cloud' + ext)
     a.setAttribute('href', data)
@@ -271,10 +271,10 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
       setMessage('You are not Logged In')
       handleSnacClick()
     } else {
-      var description = schSave.description
-      var xml = Save(description)
+      const description = schSave.description
+      const xml = Save(description)
       dispatch(setSchXmlData(xml))
-      var title = schSave.title
+      const title = schSave.title
       exportImage('PNG')
         .then(res => {
           dispatch(saveSchematic(title, description, xml, res))
@@ -307,30 +307,30 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
     fileSelector.setAttribute('accept', 'application/xml')
     fileSelector.click()
     fileSelector.addEventListener('change', function (event) {
-      var file = event.target.files[0];
-      var filename = file.name;
-      var base = '(_' + process.env.REACT_APP_NAME + '_on_Cloud)?( *\\([0-9]*\\))?\\.xml$';
-      var re = new RegExp(base, 'i');
+      const file = event.target.files[0]
+      const filename = file.name
+      const base = '(_' + process.env.REACT_APP_NAME + '_on_Cloud)?( *\\([0-9]*\\))?\\.xml$'
+      const re = new RegExp(base, 'i')
       if (re.test(filename)) {
-        var reader = new FileReader()
+        const reader = new FileReader()
         reader.onload = function (event) {
-          var title = filename.replace(re, '');
-          var data_dump = event.target.result;
-          var xmlDoc = mxUtils.parseXml(data_dump);
-          const firstCell = xmlDoc.documentElement.children[0].children[0];
-          const firstCellAttrs = firstCell.attributes;
-          const appname = firstCellAttrs.appname.value;
-          const description = (firstCellAttrs.description !== undefined) ? firstCellAttrs.description.value : '';
+          const title = filename.replace(re, '')
+          const data_dump = event.target.result
+          const xmlDoc = mxUtils.parseXml(data_dump)
+          const firstCell = xmlDoc.documentElement.children[0].children[0]
+          const firstCellAttrs = firstCell.attributes
+          const appname = firstCellAttrs.appname.value
+          const description = (firstCellAttrs.description !== undefined) ? firstCellAttrs.description.value : ''
           if (appname !== process.env.REACT_APP_NAME) {
-            setMessage('Unsupported app name error !');
-            handleSnacClick();
+            setMessage('Unsupported app name error !')
+            handleSnacClick()
           } else {
-            var obj = { 'data_dump': data_dump, 'title': title, 'description': description };
+            const obj = { data_dump: data_dump, title: title, description: description }
             if (obj.data_dump === undefined || obj.title === undefined || obj.description === undefined) {
-              setMessage('Unsupported file error !');
-              handleSnacClick();
+              setMessage('Unsupported file error !')
+              handleSnacClick()
             } else {
-              dispatch(openLocalSch(obj));
+              dispatch(openLocalSch(obj))
             }
           }
         }
@@ -355,103 +355,103 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
 
   return (
     <>
-      <Tooltip title="New">
-        <IconButton color="inherit" className={classes.tools} size="small" target="_blank" component={RouterLink} to="/editor" >
-          <CreateNewFolderOutlinedIcon fontSize="small" />
+      <Tooltip title='New'>
+        <IconButton color='inherit' className={classes.tools} size='small' target='_blank' component={RouterLink} to='/editor'>
+          <CreateNewFolderOutlinedIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Open">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleSchDialOpen} >
-          <OpenInBrowserIcon fontSize="small" />
+      <Tooltip title='Open'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleSchDialOpen}>
+          <OpenInBrowserIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <OpenSchDialog open={schOpen} close={handleSchDialClose} openLocal={handleLocalSchOpen} />
-      <Tooltip title="Save">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleSchSave} >
-          <SaveOutlinedIcon fontSize="small" />
+      <Tooltip title='Save'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleSchSave}>
+          <SaveOutlinedIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <SimpleSnackbar open={snacOpen} close={handleSnacClose} message={message} />
       <span className={classes.pipe}>|</span>
 
-      <Tooltip title="Export">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleLocalSchSave}>
-          <SystemUpdateAltOutlinedIcon fontSize="small" />
+      <Tooltip title='Export'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleLocalSchSave}>
+          <SystemUpdateAltOutlinedIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Image Export">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleImgClickOpen}>
-          <ImageOutlinedIcon fontSize="small" />
+      <Tooltip title='Image Export'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleImgClickOpen}>
+          <ImageOutlinedIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <ImageExportDialog open={imgopen} onClose={handleImgClose} />
-      <Tooltip title="Print Preview">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={PrintPreview}>
-          <PrintOutlinedIcon fontSize="small" />
+      <Tooltip title='Print Preview'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={PrintPreview}>
+          <PrintOutlinedIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <span className={classes.pipe}>|</span>
 
-      <Tooltip title="Simulate">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={() => { dispatch(toggleSimulate()) }}>
-          <PlayCircleOutlineIcon fontSize="small" />
+      <Tooltip title='Simulate'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={() => { dispatch(toggleSimulate()) }}>
+          <PlayCircleOutlineIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Generate Netlist">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleClickOpen} >
-          <BorderClearIcon fontSize="small" />
+      <Tooltip title='Generate Netlist'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleClickOpen}>
+          <BorderClearIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <NetlistModal open={open} close={handleClose} netlist={netlist} />
       <span className={classes.pipe}>|</span>
 
-      <Tooltip title="Undo">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={Undo}>
-          <UndoIcon fontSize="small" />
+      <Tooltip title='Undo'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={Undo}>
+          <UndoIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Redo">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={Redo}>
-          <RedoIcon fontSize="small" />
+      <Tooltip title='Redo'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={Redo}>
+          <RedoIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Rotate">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={Rotate}>
-          <RotateRightIcon fontSize="small" />
+      <Tooltip title='Rotate'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={Rotate}>
+          <RotateRightIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <span className={classes.pipe}>|</span>
 
-      <Tooltip title="Zoom In">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomIn}>
-          <ZoomInIcon fontSize="small" />
+      <Tooltip title='Zoom In'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomIn}>
+          <ZoomInIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Zoom Out">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomOut}>
-          <ZoomOutIcon fontSize="small" />
+      <Tooltip title='Zoom Out'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomOut}>
+          <ZoomOutIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Default Size">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomAct}>
-          <SettingsOverscanIcon fontSize="small" />
+      <Tooltip title='Default Size'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomAct}>
+          <SettingsOverscanIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <span className={classes.pipe}>|</span>
 
-      <Tooltip title="Delete">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleDeleteComp}>
-          <DeleteIcon fontSize="small" />
+      <Tooltip title='Delete'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleDeleteComp}>
+          <DeleteIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Clear All">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={ClearGrid}>
-          <ClearAllIcon fontSize="small" />
+      <Tooltip title='Clear All'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={ClearGrid}>
+          <ClearAllIcon fontSize='small' />
         </IconButton>
       </Tooltip>
-      <Tooltip title="Help">
-        <IconButton color="inherit" className={classes.tools} size="small" onClick={handleHelpOpen}>
-          <HelpOutlineIcon fontSize="small" />
+      <Tooltip title='Help'>
+        <IconButton color='inherit' className={classes.tools} size='small' onClick={handleHelpOpen}>
+          <HelpOutlineIcon fontSize='small' />
         </IconButton>
       </Tooltip>
       <HelpScreen open={helpOpen} close={handleHelpClose} />
@@ -460,11 +460,11 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
         color='inherit'
         aria-label='open drawer'
         edge='end'
-        size="small"
+        size='small'
         onClick={mobileClose}
         className={classes.menuButton}
       >
-        <AddBoxOutlinedIcon fontSize="small" />
+        <AddBoxOutlinedIcon fontSize='small' />
       </IconButton>
     </>
   )
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index b777d804..f5ddffb4 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -36,9 +36,9 @@ export default function SideComp ({ component }) {
     AddComponent(component, imageRef.current)
   }, [imageRef, component])
 
-  const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name';
-  const link2 = process.env.REACT_APP_CATEGORY_NAME;
-  const link3 = process.env.REACT_APP_CATEGORIES_NAME;
+  const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name'
+  const link2 = process.env.REACT_APP_CATEGORY_NAME
+  const link3 = process.env.REACT_APP_CATEGORIES_NAME
   return (
     <div>
 
@@ -63,23 +63,23 @@ export default function SideComp ({ component }) {
           horizontal: 'center'
         }}
       >
-        <List component="div" className={classes.popupInfo} disablePadding dense >
+        <List component='div' className={classes.popupInfo} disablePadding dense>
           <ListItemText>
             <b>{link1}:</b> {component.name}
           </ListItemText>
 
           {
             component.categories.length === 1 &&
-          <ListItemText>
-            <b>{link2}:</b> {component.categories[0].name}
-          </ListItemText>
+              <ListItemText>
+                <b>{link2}:</b> {component.categories[0].name}
+              </ListItemText>
           }
 
           {
             component.categories.length > 1 &&
-          <ListItemText>
-            <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)}
-          </ListItemText>
+              <ListItemText>
+                <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)}
+              </ListItemText>
           }
 
         </List>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
index 61bd2eff..651ffa1c 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux'
 import Graph from '../Shared/Graph'
 
 const Transition = React.forwardRef(function Transition (props, ref) {
-  return <Slide direction="up" ref={ref} {...props} />
+  return <Slide direction='up' ref={ref} {...props} />
 })
 
 const useStyles = makeStyles((theme) => ({
@@ -83,40 +83,42 @@ export default function SimulationScreen ({ open, close, isResult }) {
   const typography2 = 'SOMETHING WENT WRONG. Please Check The Simulation Parameters And ' + process.env.REACT_APP_DIAGRAM_NAME + '.'
   return (
     <div>
-      <Dialog fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
-        style: {
-          backgroundColor: '#4d4d4d',
-          boxShadow: 'none'
-        }
-      }}>
-        <AppBar position="static" elevation={0} className={classes.appBar}>
-          <Toolbar variant="dense" style={{ backgroundColor: '#404040' }} >
-            <IconButton edge="start" color="inherit" onClick={close} aria-label="close">
+      <Dialog
+        fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
+          style: {
+            backgroundColor: '#4d4d4d',
+            boxShadow: 'none'
+          }
+        }}
+      >
+        <AppBar position='static' elevation={0} className={classes.appBar}>
+          <Toolbar variant='dense' style={{ backgroundColor: '#404040' }}>
+            <IconButton edge='start' color='inherit' onClick={close} aria-label='close'>
               <CloseIcon />
             </IconButton>
-            <Typography variant="h6" className={classes.title}>
+            <Typography variant='h6' className={classes.title}>
               Simulation Result
             </Typography>
-            <Button autoFocus color="inherit" onClick={close}>
+            <Button autoFocus color='inherit' onClick={close}>
               close
             </Button>
           </Toolbar>
         </AppBar>
-        <Container maxWidth="lg" className={classes.header}>
+        <Container maxWidth='lg' className={classes.header}>
           <Grid
             container
             spacing={3}
-            direction="row"
-            justify="center"
-            alignItems="center"
+            direction='row'
+            justify='center'
+            alignItems='center'
           >
             {/* Card to display simualtion result screen header */}
             <Grid item xs={12} sm={12}>
               <Paper className={classes.paper}>
-                <Typography variant="h2" align="center" gutterBottom>
+                <Typography variant='h2' align='center' gutterBottom>
                   {result.title}
                 </Typography>
-                <Typography variant="h5" align="center" component="p" gutterBottom>
+                <Typography variant='h5' align='center' component='p' gutterBottom>
                   Simulation Result for {stitle} *
                 </Typography>
               </Paper>
@@ -128,17 +130,17 @@ export default function SimulationScreen ({ open, close, isResult }) {
                 (result.graph !== {} && result.isGraph === 'true')
                   ? <Grid item xs={12} sm={12}>
                     <Paper className={classes.paper}>
-                      <Typography variant="h4" align="center" gutterBottom>
+                      <Typography variant='h4' align='center' gutterBottom>
                         GRAPH OUTPUT
                       </Typography>
-                      <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }} >
+                      <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }}>
                         <TextField
                           style={{ width: '20%' }}
-                          id="xscale"
+                          id='xscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select X Axis Scale"
+                          label='Select X Axis Scale'
                           value={xscale}
                           onChange={handleXScale}
                           SelectProps={{
@@ -174,11 +176,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
                         </TextField>
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="yscale"
+                          id='yscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Y Axis Scale"
+                          label='Select Y Axis Scale'
                           value={yscale}
                           onChange={handleYScale}
                           SelectProps={{
@@ -215,11 +217,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="precision"
+                          id='precision'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Precision"
+                          label='Select Precision'
                           value={precision}
                           onChange={handlePrecision}
                           SelectProps={{
@@ -248,7 +250,7 @@ export default function SimulationScreen ({ open, close, isResult }) {
                       />
                     </Paper>
                   </Grid>
-                  : (result.isGraph === 'true') ? <span>{typography1}</span> : <span></span>
+                  : (result.isGraph === 'true') ? <span>{typography1}</span> : <span />
               }
 
               {/* Display text result */}
@@ -256,17 +258,17 @@ export default function SimulationScreen ({ open, close, isResult }) {
                 (result.isGraph === 'false')
                   ? <Grid item xs={12} sm={12}>
                     <Paper className={classes.paper}>
-                      <Typography variant="h4" align="center" gutterBottom>
+                      <Typography variant='h4' align='center' gutterBottom>
                         OUTPUT
                       </Typography>
                       <div style={{ padding: '15px 10px 10px 10px', backgroundColor: 'white', margin: '20px 0px', borderRadius: '5px' }}>
                         <TextField
                           style={{ width: '20%' }}
-                          id="xscale"
+                          id='xscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Scale"
+                          label='Select Scale'
                           value={xscale}
                           onChange={handleXScale}
                           SelectProps={{
@@ -303,11 +305,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="precision"
+                          id='precision'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Precision"
+                          label='Select Precision'
                           value={precision}
                           onChange={handlePrecision}
                           SelectProps={{
@@ -328,23 +330,22 @@ export default function SimulationScreen ({ open, close, isResult }) {
                       </div>
 
                       <TableContainer component={Paper}>
-                        <Table className={classes.table} aria-label="simple table">
+                        <Table className={classes.table} aria-label='simple table'>
                           <TableHead>
                             <TableRow>
-                              <TableCell align="center">Node/Branch</TableCell>
-                              <TableCell align="center">Value</TableCell>
-                              <TableCell align="center">Unit</TableCell>
+                              <TableCell align='center'>Node/Branch</TableCell>
+                              <TableCell align='center'>Value</TableCell>
+                              <TableCell align='center'>Unit</TableCell>
                             </TableRow>
                           </TableHead>
                           <TableBody>
                             {result.text.map((line, index) => (
                               <TableRow key={index}>
-                                <TableCell align="center">{line.split('=')[0]}</TableCell>
-                                <TableCell align="center">{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell>
-                                <TableCell align="center">{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell>
+                                <TableCell align='center'>{line.split('=')[0]}</TableCell>
+                                <TableCell align='center'>{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell>
+                                <TableCell align='center'>{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell>
                               </TableRow>
-                            ))
-                            }
+                            ))}
 
                           </TableBody>
                         </Table>
@@ -352,16 +353,16 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                     </Paper>
                   </Grid>
-                  : <span></span>
-              } </>
+                  : <span />
+              }
+            </>
               : <Grid item xs={12} sm={12}>
                 <Paper className={classes.paper}>
-                  <Typography variant="h6" align="center" gutterBottom>
+                  <Typography variant='h6' align='center' gutterBottom>
                     {typography2} {/* Error handling message in case of null result */}
                   </Typography>
                 </Paper>
-              </Grid>
-            }
+              </Grid>}
           </Grid>
         </Container>
       </Dialog>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index 25724859..bab9b601 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -39,18 +39,18 @@ import GallerySchSample from '../../utils/GallerySchSample'
 import { blue } from '@material-ui/core/colors'
 
 const Transition = React.forwardRef(function Transition (props, ref) {
-  return <Slide direction="up" ref={ref} {...props} />
+  return <Slide direction='up' ref={ref} {...props} />
 })
 
-var FileSaver = require('file-saver')
+const FileSaver = require('file-saver')
 
 // Dialog box to display generated netlist
 export function NetlistModal ({ open, close, netlist }) {
   const netfile = useSelector(state => state.netlistReducer)
   const createNetlistFile = () => {
-    var titleA = netfile.title.split(' ')[1]
-    var name = process.env.REACT_APP_NAME
-    var blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' })
+    const titleA = netfile.title.split(' ')[1]
+    const name = process.env.REACT_APP_NAME
+    const blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' })
     FileSaver.saveAs(blob, `${titleA}_${name}_on_Cloud.cir`)
   }
   const typography2 = 'Current netlist for given ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...'
@@ -60,22 +60,22 @@ export function NetlistModal ({ open, close, netlist }) {
       onClose={close}
       TransitionComponent={Transition}
       keepMounted
-      aria-labelledby="generate-netlist"
-      aria-describedby="generate-netlist-description"
+      aria-labelledby='generate-netlist'
+      aria-describedby='generate-netlist-description'
     >
-      <DialogTitle id="generate-netlist-title">{'Netlist Generator'}</DialogTitle>
+      <DialogTitle id='generate-netlist-title'>Netlist Generator</DialogTitle>
       <DialogContent dividers>
-        <DialogContentText id="generate-netlist-description">
+        <DialogContentText id='generate-netlist-description'>
           {typography2}<br /><br />
-          <TextareaAutosize aria-label="empty textarea" rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} />
+          <TextareaAutosize aria-label='empty textarea' rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} />
         </DialogContentText>
       </DialogContent>
       <DialogActions>
         {/* Button to download the netlist */}
-        <Button color="primary" onClick={createNetlistFile}>
+        <Button color='primary' onClick={createNetlistFile}>
           Download
         </Button>
-        <Button onClick={close} color="primary" autoFocus>
+        <Button onClick={close} color='primary' autoFocus>
           Close
         </Button>
       </DialogActions>
@@ -120,74 +120,76 @@ export function HelpScreen ({ open, close }) {
   const classes = useStyles()
   return (
     <div>
-      <Dialog fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
-        style: {
-          backgroundColor: '#4d4d4d',
-          boxShadow: 'none'
-        }
-      }} >
-        <AppBar position="static" elevation={0} className={classes.appBar}>
-          <Toolbar variant="dense" style={{ backgroundColor: '#404040' }} >
-            <IconButton edge="start" color="inherit" onClick={close} aria-label="close">
+      <Dialog
+        fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
+          style: {
+            backgroundColor: '#4d4d4d',
+            boxShadow: 'none'
+          }
+        }}
+      >
+        <AppBar position='static' elevation={0} className={classes.appBar}>
+          <Toolbar variant='dense' style={{ backgroundColor: '#404040' }}>
+            <IconButton edge='start' color='inherit' onClick={close} aria-label='close'>
               <CloseIcon />
             </IconButton>
-            <Typography variant="h6" className={classes.title}>
+            <Typography variant='h6' className={classes.title}>
               Help
             </Typography>
-            <Button autoFocus color="inherit" onClick={close}>
+            <Button autoFocus color='inherit' onClick={close}>
               close
             </Button>
           </Toolbar>
         </AppBar>
-        <Container maxWidth="lg" className={classes.header}>
+        <Container maxWidth='lg' className={classes.header}>
           <Grid
             container
             spacing={3}
-            direction="row"
-            justify="center"
-            alignItems="center"
+            direction='row'
+            justify='center'
+            alignItems='center'
           >
 
             <Grid item xs={12} sm={12}>
               <Paper className={classes.paper}>
                 <fieldset style={{ padding: '20px 40px' }}>
                   <legend>
-                    <Typography variant="h5" align="center" component="p" gutterBottom>
+                    <Typography variant='h5' align='center' component='p' gutterBottom>
                       Keyboard Shorcuts
                     </Typography>
                   </legend>
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     UNDO
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     Ctrl + Z
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     REDO
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     Ctrl + A
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     ZOOM IN
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     Ctrl + I
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     ZOOM OUT
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     Ctrl + O
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     DEFAULT SIZE
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     Ctrl + Y
                   </Typography>
                 </fieldset>
@@ -198,81 +200,81 @@ export function HelpScreen ({ open, close }) {
               <Paper className={classes.paper}>
                 <fieldset style={{ padding: '20px 40px' }}>
                   <legend>
-                    <Typography variant="h5" align="center" component="p" gutterBottom>
+                    <Typography variant='h5' align='center' component='p' gutterBottom>
                       Units Table
                     </Typography>
                   </legend>
                   <Typography>
 
                     <TableContainer component={Paper}>
-                      <Table className={classes.table} aria-label="simple table">
+                      <Table className={classes.table} aria-label='simple table'>
                         <caption>Ngspice scale factors naming conventions</caption>
                         <TableHead>
                           <TableRow>
-                            <TableCell align="center">SUFFIX</TableCell>
-                            <TableCell align="center">NAME</TableCell>
-                            <TableCell align="center">FACTOR</TableCell>
+                            <TableCell align='center'>SUFFIX</TableCell>
+                            <TableCell align='center'>NAME</TableCell>
+                            <TableCell align='center'>FACTOR</TableCell>
                           </TableRow>
                         </TableHead>
                         <TableBody>
 
                           <TableRow>
-                            <TableCell align="center">T</TableCell>
-                            <TableCell align="center">Tera</TableCell>
-                            <TableCell align="center">10<sup>12</sup></TableCell>
+                            <TableCell align='center'>T</TableCell>
+                            <TableCell align='center'>Tera</TableCell>
+                            <TableCell align='center'>10<sup>12</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">G</TableCell>
-                            <TableCell align="center">Giga</TableCell>
-                            <TableCell align="center">10<sup>9</sup></TableCell>
+                            <TableCell align='center'>G</TableCell>
+                            <TableCell align='center'>Giga</TableCell>
+                            <TableCell align='center'>10<sup>9</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">Meg</TableCell>
-                            <TableCell align="center">Mega</TableCell>
-                            <TableCell align="center">10<sup>6</sup></TableCell>
+                            <TableCell align='center'>Meg</TableCell>
+                            <TableCell align='center'>Mega</TableCell>
+                            <TableCell align='center'>10<sup>6</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">K</TableCell>
-                            <TableCell align="center">Kilo</TableCell>
-                            <TableCell align="center">10<sup>3</sup></TableCell>
+                            <TableCell align='center'>K</TableCell>
+                            <TableCell align='center'>Kilo</TableCell>
+                            <TableCell align='center'>10<sup>3</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">mil</TableCell>
-                            <TableCell align="center">Mil</TableCell>
-                            <TableCell align="center">25.4 X 10<sup>-6</sup></TableCell>
+                            <TableCell align='center'>mil</TableCell>
+                            <TableCell align='center'>Mil</TableCell>
+                            <TableCell align='center'>25.4 X 10<sup>-6</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">m</TableCell>
-                            <TableCell align="center">milli</TableCell>
-                            <TableCell align="center">10<sup>-3</sup></TableCell>
+                            <TableCell align='center'>m</TableCell>
+                            <TableCell align='center'>milli</TableCell>
+                            <TableCell align='center'>10<sup>-3</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">u</TableCell>
-                            <TableCell align="center">micro</TableCell>
-                            <TableCell align="center">10<sup>-6</sup></TableCell>
+                            <TableCell align='center'>u</TableCell>
+                            <TableCell align='center'>micro</TableCell>
+                            <TableCell align='center'>10<sup>-6</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">n</TableCell>
-                            <TableCell align="center">nano</TableCell>
-                            <TableCell align="center">10<sup>-9</sup></TableCell>
+                            <TableCell align='center'>n</TableCell>
+                            <TableCell align='center'>nano</TableCell>
+                            <TableCell align='center'>10<sup>-9</sup></TableCell>
                           </TableRow>
                           <TableRow>
-                            <TableCell align="center">p</TableCell>
-                            <TableCell align="center">pico</TableCell>
-                            <TableCell align="center">10<sup>-12</sup></TableCell>
+                            <TableCell align='center'>p</TableCell>
+                            <TableCell align='center'>pico</TableCell>
+                            <TableCell align='center'>10<sup>-12</sup></TableCell>
                           </TableRow>
 
                           <TableRow>
-                            <TableCell align="center">f</TableCell>
-                            <TableCell align="center">femto</TableCell>
-                            <TableCell align="center">10<sup>-15</sup></TableCell>
+                            <TableCell align='center'>f</TableCell>
+                            <TableCell align='center'>femto</TableCell>
+                            <TableCell align='center'>10<sup>-15</sup></TableCell>
                           </TableRow>
 
                         </TableBody>
@@ -286,36 +288,36 @@ export function HelpScreen ({ open, close }) {
               <Paper className={classes.paper}>
                 <fieldset style={{ padding: '20px 40px' }}>
                   <legend>
-                    <Typography variant="h5" align="center" component="p" gutterBottom>
+                    <Typography variant='h5' align='center' component='p' gutterBottom>
                       Simulation Modes
                     </Typography>
                   </legend>
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     DC Solver
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     A DC simulation attempts to find a stable DC solution of your circuit.
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     DC Sweep
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     A DC Sweep will plot the DC solution of your circuit across different values of a parameter of a circuit element.
                     You can sweep any numerical parameter of any circuit element in your circuit.
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     Transient Analysis
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     A Transient analysis does a Time-Domain Simulation of your circuit over a certain period of time.
                   </Typography>
                   <Divider />
-                  <Typography variant="h6" align='left' gutterBottom>
+                  <Typography variant='h6' align='left' gutterBottom>
                     AC Analysis
                   </Typography>
-                  <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
+                  <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom>
                     AC Analysis does a small signal analysis of your circuit. The input can be any voltage source or current source.
                   </Typography>
                 </fieldset>
@@ -324,7 +326,7 @@ export function HelpScreen ({ open, close }) {
           </Grid>
         </Container>
       </Dialog>
-    </div >
+    </div>
   )
 }
 
@@ -348,8 +350,8 @@ export function ImageExportDialog (props) {
   }
 
   return (
-    <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}>
-      <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle>
+    <Dialog onClose={handleClose} aria-labelledby='image-export-dialog-title' open={open}>
+      <DialogTitle id='image-export-dialog-title'>Select Image type</DialogTitle>
       <List>
         {ImgTypes.map((img) => (
           <ListItem button onClick={() => handleListItemClick(img)} key={img}>
@@ -363,7 +365,7 @@ export function ImageExportDialog (props) {
         ))}
       </List>
       <DialogActions>
-        <Button onClick={handleClose} color="primary" autoFocus>
+        <Button onClick={handleClose} color='primary' autoFocus>
           Close
         </Button>
       </DialogActions>
@@ -386,8 +388,8 @@ export function OpenSchDialog (props) {
   const schematics = useSelector(state => state.dashboardReducer.schematics)
 
   function getDate (jsonDate) {
-    var json = jsonDate
-    var date = new Date(json)
+    const json = jsonDate
+    const date = new Date(json)
     const dateTimeFormat = new Intl.DateTimeFormat('en', { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
     const [{ value: month }, , { value: day }, , { value: hour }, , { value: minute }, , { value: second }] = dateTimeFormat.formatToParts(date)
     return `${day} ${month} ${hour}:${minute}:${second}`
@@ -404,28 +406,28 @@ export function OpenSchDialog (props) {
       maxWidth='md'
       TransitionComponent={Transition}
       keepMounted
-      aria-labelledby="open-dialog-title"
-      aria-describedby="open-dialog-description"
+      aria-labelledby='open-dialog-title'
+      aria-describedby='open-dialog-description'
     >
-      <DialogTitle id="open-dialog-title" onClose={close}>
-        <Typography component="span" variant="h3">{title}</Typography>
+      <DialogTitle id='open-dialog-title' onClose={close}>
+        <Typography component='span' variant='h3'>{title}</Typography>
       </DialogTitle>
       <DialogContent dividers>
-        <DialogContentText id="open-dialog-description" >
+        <DialogContentText id='open-dialog-description'>
           {isLocal
-            ? <Button variant="outlined" fullWidth={true} size="large" onClick={() => { openLocal(); close() }} color="primary">
+            ? <Button variant='outlined' fullWidth size='large' onClick={() => { openLocal(); close() }} color='primary'>
               Upload File
             </Button>
             : isGallery
               ? <Grid item xs={12} sm={12}>
                 {/* Listing Gallery Schematics */}
                 <TableContainer component={Paper} style={{ maxHeight: '45vh' }}>
-                  <Table stickyHeader size="small" aria-label="simple table">
+                  <Table stickyHeader size='small' aria-label='simple table'>
                     <TableHead>
                       <TableRow>
-                        <TableCell align="center">Name</TableCell>
-                        <TableCell align="center">Description</TableCell>
-                        <TableCell align="center">Launch</TableCell>
+                        <TableCell align='center'>Name</TableCell>
+                        <TableCell align='center'>Description</TableCell>
+                        <TableCell align='center'>Launch</TableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
@@ -434,18 +436,18 @@ export function OpenSchDialog (props) {
                           (sch) => {
                             return (
                               <TableRow key={sch.save_id}>
-                                <TableCell align="center">{sch.name}</TableCell>
-                                <TableCell align="center">
-                                  <Tooltip title={sch.description !== null ? sch.description : 'No description'} >
+                                <TableCell align='center'>{sch.name}</TableCell>
+                                <TableCell align='center'>
+                                  <Tooltip title={sch.description !== null ? sch.description : 'No description'}>
                                     <span>
                                       {sch.description !== null ? sch.description.slice(0, 30) + (sch.description.length < 30 ? '' : '...') : '-'}
                                     </span>
                                   </Tooltip>
                                 </TableCell>
-                                <TableCell align="center">
+                                <TableCell align='center'>
                                   <Button
-                                    size="small"
-                                    color="primary"
+                                    size='small'
+                                    color='primary'
                                     onClick={() => { dispatch(loadGallery(sch.save_id.substr(7, sch.save_id.length))) }}
                                     variant={schSave.details.save_id === undefined ? 'outlined' : schSave.details.save_id !== sch.save_id ? 'outlined' : 'contained'}
                                   >
@@ -464,18 +466,18 @@ export function OpenSchDialog (props) {
               : <Grid item xs={12} sm={12}>
                 {/* Listing Saved Schematics */}
                 {schematics.length === 0
-                  ? <Typography variant="subtitle1" gutterBottom>
-                  Hey {auth.user.username} , {typography1}
+                  ? <Typography variant='subtitle1' gutterBottom>
+                    Hey {auth.user.username} , {typography1}
                   </Typography>
                   : <TableContainer component={Paper} style={{ maxHeight: '45vh' }}>
-                    <Table stickyHeader size="small" aria-label="simple table">
+                    <Table stickyHeader size='small' aria-label='simple table'>
                       <TableHead>
                         <TableRow>
-                          <TableCell align="center">Name</TableCell>
-                          <TableCell align="center">Description</TableCell>
-                          <TableCell align="center">Created</TableCell>
-                          <TableCell align="center">Updated</TableCell>
-                          <TableCell align="center">Launch</TableCell>
+                          <TableCell align='center'>Name</TableCell>
+                          <TableCell align='center'>Description</TableCell>
+                          <TableCell align='center'>Created</TableCell>
+                          <TableCell align='center'>Updated</TableCell>
+                          <TableCell align='center'>Launch</TableCell>
                         </TableRow>
                       </TableHead>
                       <TableBody>
@@ -484,24 +486,24 @@ export function OpenSchDialog (props) {
                             (sch) => {
                               return (
                                 <TableRow key={sch.save_id}>
-                                  <TableCell align="center">{sch.name}</TableCell>
-                                  <TableCell align="center">
-                                    <Tooltip title={sch.description !== null ? sch.description : 'No description'} >
+                                  <TableCell align='center'>{sch.name}</TableCell>
+                                  <TableCell align='center'>
+                                    <Tooltip title={sch.description !== null ? sch.description : 'No description'}>
                                       <span>
                                         {sch.description !== null ? sch.description.slice(0, 30) + (sch.description.length < 30 ? '' : '...') : '-'}
                                       </span>
                                     </Tooltip>
                                   </TableCell>
-                                  <TableCell align="center">{getDate(sch.create_time)}</TableCell>
-                                  <TableCell align="center">{getDate(sch.save_time)}</TableCell>
-                                  <TableCell align="center">
+                                  <TableCell align='center'>{getDate(sch.create_time)}</TableCell>
+                                  <TableCell align='center'>{getDate(sch.save_time)}</TableCell>
+                                  <TableCell align='center'>
                                     <Button
-                                      size="small"
-                                      color="primary"
+                                      size='small'
+                                      color='primary'
                                       onClick={() => { dispatch(fetchSchematic(sch.save_id)) }}
                                       variant={schSave.details.save_id === undefined ? 'outlined' : schSave.details.save_id !== sch.save_id ? 'outlined' : 'contained'}
                                     >
-                                    Launch
+                                      Launch
                                     </Button>
                                   </TableCell>
                                 </TableRow>
@@ -511,26 +513,23 @@ export function OpenSchDialog (props) {
                         </>
                       </TableBody>
                     </Table>
-                  </TableContainer>
-                }
-              </Grid>
-          }
+                  </TableContainer>}
+              </Grid>}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant={isLocal ? 'outlined' : 'text' } onClick={() => { setisLocal(true); setisGallery(false) }} color="secondary">
+        <Button variant={isLocal ? 'outlined' : 'text'} onClick={() => { setisLocal(true); setisGallery(false) }} color='secondary'>
           Local
         </Button>
-        <Button variant={isGallery ? 'outlined' : 'text' } onClick={() => { setisLocal(false); setisGallery(true) }} color="secondary">
+        <Button variant={isGallery ? 'outlined' : 'text'} onClick={() => { setisLocal(false); setisGallery(true) }} color='secondary'>
           Gallery
         </Button>
         {auth.isAuthenticated !== true
           ? <></>
-          : <Button variant={!isGallery & !isLocal ? 'outlined' : 'text' } onClick={() => { dispatch(fetchSchematics()); setisLocal(false); setisGallery(false) }} color="secondary" >
+          : <Button variant={!isGallery & !isLocal ? 'outlined' : 'text'} onClick={() => { dispatch(fetchSchematics()); setisLocal(false); setisGallery(false) }} color='secondary'>
             on Cloud
-          </Button>
-        }
-        <Button onClick={close} color="primary" autoFocus>
+          </Button>}
+        <Button onClick={close} color='primary' autoFocus>
           Close
         </Button>
       </DialogActions>
diff --git a/blocks/eda-frontend/src/components/Shared/Layout.js b/blocks/eda-frontend/src/components/Shared/Layout.js
index 6430beed..c07252c0 100644
--- a/blocks/eda-frontend/src/components/Shared/Layout.js
+++ b/blocks/eda-frontend/src/components/Shared/Layout.js
@@ -33,23 +33,23 @@ function Layout ({ header, resToolbar, sidebar }) {
     <>
       {/* Header and Toolbar of layout */}
       <AppBar
-        position="fixed"
-        color="default"
+        position='fixed'
+        color='default'
         elevation={0}
         className={classes.appBar}
       >
         {header}
 
-        <Toolbar variant="dense" color="default">
+        <Toolbar variant='dense' color='default'>
           <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            edge="start"
-            size="small"
+            color='inherit'
+            aria-label='open drawer'
+            edge='start'
+            size='small'
             onClick={handleDrawerToggle}
             className={classes.menuButton}
           >
-            <MenuIcon fontSize="small" />
+            <MenuIcon fontSize='small' />
           </IconButton>
 
           {resToolbar}
diff --git a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
index 7d238efd..0f2c3f9e 100644
--- a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
+++ b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
@@ -27,11 +27,11 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr
 
   return (
     <>
-      <nav className={classes.drawer} aria-label="mailbox folders">
-        <Hidden lgUp implementation="css">
+      <nav className={classes.drawer} aria-label='mailbox folders'>
+        <Hidden lgUp implementation='css'>
           <Drawer
             container={container}
-            variant="temporary"
+            variant='temporary'
             open={mobileOpen}
             onClose={mobileClose}
             classes={{
@@ -43,7 +43,7 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr
           >
             <IconButton
               onClick={mobileClose}
-              color="inherit"
+              color='inherit'
               style={{ marginLeft: '190px' }}
             >
               <HighlightOffIcon />
@@ -52,12 +52,12 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr
           </Drawer>
         </Hidden>
 
-        <Hidden smDown implementation="css">
+        <Hidden smDown implementation='css'>
           <Drawer
             classes={{
               paper: classes.drawerPaper
             }}
-            variant="permanent"
+            variant='permanent'
             open
           >
             {children}
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index a9880f88..16a34f7e 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -62,16 +62,16 @@ export function Header () {
   return (
     <>
       {/* Display logo */}
-      <IconButton edge="start" className={classes.button} color="primary">
+      <IconButton edge='start' className={classes.button} color='primary'>
         <Avatar alt={altImage} src={logo} className={classes.small} />
       </IconButton>
       <Typography
-        variant="h6"
-        color="inherit"
+        variant='h6'
+        color='inherit'
         noWrap
         className={classes.toolbarTitle}
       >
-        <Link color="inherit" to="/" component={RouterLink}>
+        <Link color='inherit' to='/' component={RouterLink}>
           {link}
         </Link>
       </Typography>
@@ -82,9 +82,9 @@ export function Header () {
           (auth.isAuthenticated
             ? (<>
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/"
+                variant='button'
+                color='textPrimary'
+                to='/'
                 component={RouterLink}
                 className={classes.link}
               >
@@ -92,9 +92,9 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/editor"
+                variant='button'
+                color='textPrimary'
+                to='/editor'
                 component={RouterLink}
                 className={classes.link}
               >
@@ -102,9 +102,9 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/gallery"
+                variant='button'
+                color='textPrimary'
+                to='/gallery'
                 component={RouterLink}
                 className={classes.link}
               >
@@ -112,9 +112,9 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/simulator/ngspice"
+                variant='button'
+                color='textPrimary'
+                to='/simulator/ngspice'
                 component={RouterLink}
                 className={classes.link}
               >
@@ -122,9 +122,9 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/dashboard"
+                variant='button'
+                color='textPrimary'
+                to='/dashboard'
                 component={RouterLink}
                 className={classes.link}
               >
@@ -133,9 +133,9 @@ export function Header () {
             </>)
             : (<>
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/editor"
+                variant='button'
+                color='textPrimary'
+                to='/editor'
                 component={RouterLink}
                 style={{ marginRight: '20px' }}
               >
@@ -143,9 +143,9 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/gallery"
+                variant='button'
+                color='textPrimary'
+                to='/gallery'
                 component={RouterLink}
                 style={{ marginRight: '20px' }}
               >
@@ -153,16 +153,16 @@ export function Header () {
               </Link>
 
               <Link
-                variant="button"
-                color="textPrimary"
-                to="/simulator/ngspice"
+                variant='button'
+                color='textPrimary'
+                to='/simulator/ngspice'
                 component={RouterLink}
                 style={{ marginRight: '20px' }}
               >
                 Simulator
               </Link>
             </>
-            )
+              )
           )
         }
       </nav>
@@ -170,22 +170,22 @@ export function Header () {
       {/* Display login option or user menu as per authenticated status */}
       {
         (!auth.isAuthenticated ? (<Button
-          size="small"
+          size='small'
           component={RouterLink}
-          to="/login"
-          color="primary"
-          variant="outlined"
-        >
+          to='/login'
+          color='primary'
+          variant='outlined'
+                                  >
           Login
         </Button>)
           : (<>
 
             <IconButton
-              edge="start"
+              edge='start'
               style={{ marginLeft: 'auto' }}
-              color="primary"
-              aria-controls="simple-menu"
-              aria-haspopup="true"
+              color='primary'
+              aria-controls='simple-menu'
+              aria-haspopup='true'
               onClick={handleClick}
             >
               <Avatar className={classes.purple}>
@@ -193,7 +193,7 @@ export function Header () {
               </Avatar>
             </IconButton>
             <Menu
-              id="simple-menu"
+              id='simple-menu'
               anchorEl={anchorEl}
               keepMounted
               open={Boolean(anchorEl)}
@@ -203,33 +203,34 @@ export function Header () {
             >
               <MenuItem
                 component={RouterLink}
-                to="/dashboard"
+                to='/dashboard'
                 onClick={handleClose}
               >
                 <ListItemText primary={auth.user.username} secondary={auth.user.email} />
               </MenuItem>
               <MenuItem
                 component={RouterLink}
-                to="/dashboard/profile"
+                to='/dashboard/profile'
                 onClick={handleClose}
               >
                 My Profile
               </MenuItem>
               <MenuItem
                 component={RouterLink}
-                to="/dashboard/schematics"
+                to='/dashboard/schematics'
                 onClick={handleClose}
               >
                 {typography}
               </MenuItem>
               <MenuItem onClick={() => {
                 store.dispatch(logout(history))
-              }}>
+              }}
+              >
                 Logout
               </MenuItem>
             </Menu>
           </>
-          )
+            )
         )
       }
     </>
@@ -241,12 +242,12 @@ export default function Navbar () {
 
   return (
     <AppBar
-      position="static"
-      color="default"
+      position='static'
+      color='default'
       elevation={0}
       className={classes.appBar}
     >
-      <Toolbar variant="dense" color="default" className={classes.toolbar}>
+      <Toolbar variant='dense' color='default' className={classes.toolbar}>
 
         <Header />
       </Toolbar>
diff --git a/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js b/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js
index fcfc28b8..2e5f8173 100644
--- a/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js
+++ b/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux'
 import Graph from '../Shared/Graph'
 
 const Transition = React.forwardRef(function Transition (props, ref) {
-  return <Slide direction="up" ref={ref} {...props} />
+  return <Slide direction='up' ref={ref} {...props} />
 })
 
 const useStyles = makeStyles((theme) => ({
@@ -78,49 +78,51 @@ export default function SimulationScreen ({ open, close, isResult }) {
   }
   return (
     <div>
-      <Dialog fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
-        style: {
-          backgroundColor: '#4d4d4d',
-          boxShadow: 'none'
-        }
-      }}>
-        <AppBar position="static" elevation={0} className={classes.appBar}>
-          <Toolbar variant="dense" style={{ backgroundColor: '#404040' }} >
-            <IconButton edge="start" color="inherit" onClick={close} aria-label="close">
+      <Dialog
+        fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
+          style: {
+            backgroundColor: '#4d4d4d',
+            boxShadow: 'none'
+          }
+        }}
+      >
+        <AppBar position='static' elevation={0} className={classes.appBar}>
+          <Toolbar variant='dense' style={{ backgroundColor: '#404040' }}>
+            <IconButton edge='start' color='inherit' onClick={close} aria-label='close'>
               <CloseIcon />
             </IconButton>
-            <Typography variant="h6" className={classes.title}>
+            <Typography variant='h6' className={classes.title}>
               Simulation Result
             </Typography>
-            <Button autoFocus color="inherit" onClick={close}>
+            <Button autoFocus color='inherit' onClick={close}>
               close
             </Button>
           </Toolbar>
         </AppBar>
-        <Container maxWidth="lg" className={classes.header}>
+        <Container maxWidth='lg' className={classes.header}>
           <Grid
             container
             spacing={3}
-            direction="row"
-            justify="center"
-            alignItems="center"
+            direction='row'
+            justify='center'
+            alignItems='center'
           >
             {isResult === true ? <>
               {
                 (result.graph !== {} && result.isGraph === 'true')
                   ? <Grid item xs={12} sm={12}>
                     <Paper className={classes.paper}>
-                      <Typography variant="h4" align="center" gutterBottom>
+                      <Typography variant='h4' align='center' gutterBottom>
                         GRAPH OUTPUT
                       </Typography>
                       <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }}>
                         <TextField
                           style={{ width: '20%' }}
-                          id="xscale"
+                          id='xscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select X Axis Scale"
+                          label='Select X Axis Scale'
                           value={xscale}
                           onChange={handleXScale}
                           SelectProps={{
@@ -156,11 +158,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
                         </TextField>
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="yscale"
+                          id='yscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Y Axis Scale"
+                          label='Select Y Axis Scale'
                           value={yscale}
                           onChange={handleYScale}
                           SelectProps={{
@@ -197,11 +199,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="precision"
+                          id='precision'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Precision"
+                          label='Select Precision'
                           value={precision}
                           onChange={handlePrecision}
                           SelectProps={{
@@ -230,24 +232,24 @@ export default function SimulationScreen ({ open, close, isResult }) {
                       />
                     </Paper>
                   </Grid>
-                  : (result.isGraph === 'true') ? <span>SOMETHING WENT WRONG PLEASE CHECK THE SIMULATION PARAMETERS.</span> : <span></span>
+                  : (result.isGraph === 'true') ? <span>SOMETHING WENT WRONG PLEASE CHECK THE SIMULATION PARAMETERS.</span> : <span />
               }
 
               {
                 (result.isGraph === 'false')
                   ? <Grid item xs={12} sm={12}>
                     <Paper className={classes.paper}>
-                      <Typography variant="h4" align="center" gutterBottom>
+                      <Typography variant='h4' align='center' gutterBottom>
                         OUTPUT
                       </Typography>
                       <div style={{ padding: '15px 10px 10px 10px', backgroundColor: 'white', margin: '20px 0px', borderRadius: '5px' }}>
                         <TextField
                           style={{ width: '20%' }}
-                          id="xscale"
+                          id='xscale'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Scale"
+                          label='Select Scale'
                           value={xscale}
                           onChange={handleXScale}
                           SelectProps={{
@@ -284,11 +286,11 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                         <TextField
                           style={{ width: '20%', marginLeft: '10px' }}
-                          id="precision"
+                          id='precision'
                           size='small'
-                          variant="outlined"
+                          variant='outlined'
                           select
-                          label="Select Precision"
+                          label='Select Precision'
                           value={precision}
                           onChange={handlePrecision}
                           SelectProps={{
@@ -309,23 +311,22 @@ export default function SimulationScreen ({ open, close, isResult }) {
                       </div>
 
                       <TableContainer component={Paper}>
-                        <Table className={classes.table} aria-label="simple table">
+                        <Table className={classes.table} aria-label='simple table'>
                           <TableHead>
                             <TableRow>
-                              <TableCell align="center">Node/Branch</TableCell>
-                              <TableCell align="center">Value</TableCell>
-                              <TableCell align="center">Unit</TableCell>
+                              <TableCell align='center'>Node/Branch</TableCell>
+                              <TableCell align='center'>Value</TableCell>
+                              <TableCell align='center'>Unit</TableCell>
                             </TableRow>
                           </TableHead>
                           <TableBody>
                             {result.text.map((line, index) => (
                               <TableRow key={index}>
-                                <TableCell align="center">{line.split('=')[0]}</TableCell>
-                                <TableCell align="center">{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell>
-                                <TableCell align="center">{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell>
+                                <TableCell align='center'>{line.split('=')[0]}</TableCell>
+                                <TableCell align='center'>{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell>
+                                <TableCell align='center'>{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell>
                               </TableRow>
-                            ))
-                            }
+                            ))}
 
                           </TableBody>
                         </Table>
@@ -333,16 +334,16 @@ export default function SimulationScreen ({ open, close, isResult }) {
 
                     </Paper>
                   </Grid>
-                  : <span></span>
-              }</>
+                  : <span />
+              }
+            </>
               : <Grid item xs={12} sm={12}>
                 <Paper className={classes.paper}>
-                  <Typography variant="h6" align="center" gutterBottom>
+                  <Typography variant='h6' align='center' gutterBottom>
                     SOMETHING WENT WRONG PLEASE CHECK THE NETLIST.
                   </Typography>
                 </Paper>
-              </Grid>
-            }
+              </Grid>}
           </Grid>
         </Container>
       </Dialog>
diff --git a/blocks/eda-frontend/src/components/Simulator/textToFile.js b/blocks/eda-frontend/src/components/Simulator/textToFile.js
index ad992b4d..e19d5e4a 100644
--- a/blocks/eda-frontend/src/components/Simulator/textToFile.js
+++ b/blocks/eda-frontend/src/components/Simulator/textToFile.js
@@ -2,9 +2,9 @@
 export default function textToFile (data) {
   // create a file from a blob
 
-  var myblob = new Blob([data], {
+  const myblob = new Blob([data], {
     type: 'text/plain'
   })
-  var file = new File([myblob], 'netlist.cir', { type: 'text/plain', lastModified: Date.now() })
+  const file = new File([myblob], 'netlist.cir', { type: 'text/plain', lastModified: Date.now() })
   return file
 }
diff --git a/blocks/eda-frontend/src/pages/Dashboard.js b/blocks/eda-frontend/src/pages/Dashboard.js
index bd544d43..2ba84b43 100644
--- a/blocks/eda-frontend/src/pages/Dashboard.js
+++ b/blocks/eda-frontend/src/pages/Dashboard.js
@@ -40,11 +40,11 @@ export default function Dashboard () {
 
         {/* Subroutes under dashboard section */}
         <Switch>
-          <Route exact path="/dashboard" component={DashboardHome} />
-          <Route exact path="/dashboard/profile" />
+          <Route exact path='/dashboard' component={DashboardHome} />
+          <Route exact path='/dashboard/profile' />
           <Route
             exact
-            path="/dashboard/schematics"
+            path='/dashboard/schematics'
             component={SchematicsList}
           />
         </Switch>
diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js
index 16936cab..7d221a2e 100644
--- a/blocks/eda-frontend/src/pages/Gallery.js
+++ b/blocks/eda-frontend/src/pages/Gallery.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
-var images = require.context('../static/gallery', true)
+const images = require.context('../static/gallery', true)
 
 // Card displaying overview of gallery sample schematics.
 function SchematicCard ({ sch }) {
@@ -63,10 +63,10 @@ function SchematicCard ({ sch }) {
             title={sch.name}
           />
           <CardContent>
-            <Typography gutterBottom variant="h5" component="h2">
+            <Typography gutterBottom variant='h5' component='h2'>
               {sch.name}
             </Typography>
-            <Typography variant="body2" component="p">
+            <Typography variant='body2' component='p'>
               {sch.description}
             </Typography>
           </CardContent>
@@ -74,11 +74,11 @@ function SchematicCard ({ sch }) {
 
         <CardActions>
           <Button
-            target="_blank"
+            target='_blank'
             component={RouterLink}
             to={'/editor?id=' + sch.save_id}
-            size="small"
-            color="primary"
+            size='small'
+            color='primary'
           >
             Launch in Editor
           </Button>
@@ -100,11 +100,11 @@ function MainCard () {
   return (
     <Card className={classes.mainHead}>
       <CardContent>
-        <Typography variant="h2" align="center" gutterBottom>
-        {typography}
+        <Typography variant='h2' align='center' gutterBottom>
+          {typography}
         </Typography>
-        <Typography className={classes.title} align="center" gutterBottom>
-        {diagramTypography}
+        <Typography className={classes.title} align='center' gutterBottom>
+          {diagramTypography}
         </Typography>
       </CardContent>
     </Card>
@@ -117,13 +117,13 @@ export default function Gallery () {
   return (
     <div className={classes.root}>
       <CssBaseline />
-      <Container maxWidth="lg" className={classes.header}>
+      <Container maxWidth='lg' className={classes.header}>
         <Grid
           container
-          direction="row"
-          justify="flex-start"
-          alignItems="flex-start"
-          alignContent="center"
+          direction='row'
+          justify='flex-start'
+          alignItems='flex-start'
+          alignContent='center'
           spacing={3}
         >
           {/* Gallery Header */}
diff --git a/blocks/eda-frontend/src/pages/Home.js b/blocks/eda-frontend/src/pages/Home.js
index df149db3..7d4bcf6b 100644
--- a/blocks/eda-frontend/src/pages/Home.js
+++ b/blocks/eda-frontend/src/pages/Home.js
@@ -25,34 +25,34 @@ export default function Home () {
   const typography2 = 'Online ' + process.env.REACT_APP_NAME + ' Simulator'
   const typography3 = process.env.REACT_APP_DIAGRAM_NAME + ' Editor'
   return (
-    <Container maxWidth="sm" component="main" className={classes.header}>
+    <Container maxWidth='sm' component='main' className={classes.header}>
       <center>
         <img src={logo} width='120' height='120' alt='Logo' />
       </center>
       <Typography
-        component="h1"
-        variant="h2"
-        align="center"
-        color="textPrimary"
+        component='h1'
+        variant='h2'
+        align='center'
+        color='textPrimary'
         gutterBottom
       >
         {typography1}
       </Typography>
       <Typography
-        variant="h5"
-        align="center"
-        color="textSecondary"
-        component="p"
+        variant='h5'
+        align='center'
+        color='textSecondary'
+        component='p'
       >
         {typography2}
-        <br></br>
-        <br></br>
+        <br />
+        <br />
         <Button
           component={RouterLink}
-          to="/editor"
-          variant="contained"
-          size="large"
-          color="primary"
+          to='/editor'
+          variant='contained'
+          size='large'
+          color='primary'
         >
           {typography3}
         </Button>
diff --git a/blocks/eda-frontend/src/pages/Login.js b/blocks/eda-frontend/src/pages/Login.js
index a87f6397..8696b79c 100644
--- a/blocks/eda-frontend/src/pages/Login.js
+++ b/blocks/eda-frontend/src/pages/Login.js
@@ -45,14 +45,14 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
-var url = ''
+let url = ''
 
 export default function SignIn (props) {
   const classes = useStyles()
   const auth = useSelector(state => state.authReducer)
 
   const dispatch = useDispatch()
-  var homeURL = `${window.location.protocol}\\\\${window.location.host}/`
+  const homeURL = `${window.location.protocol}\\\\${window.location.host}/`
 
   useEffect(() => {
     dispatch(authDefault())
@@ -79,75 +79,75 @@ export default function SignIn (props) {
 
   // Function call for google oAuth login.
   const handleGoogleLogin = () => {
-    var host = window.location.protocol + '//' + window.location.host
+    const host = window.location.protocol + '//' + window.location.host
     dispatch(googleLogin(host))
   }
 
   return (
-    <Container component="main" maxWidth="xs">
+    <Container component='main' maxWidth='xs'>
       <Card className={classes.paper}>
         <Avatar className={classes.avatar}>
           <LockOutlinedIcon />
         </Avatar>
 
-        <Typography component="h1" variant="h5">
+        <Typography component='h1' variant='h5'>
           Login | Sign In
         </Typography>
 
         {/* Display's error messages while logging in */}
-        <Typography variant="body1" align="center" style={{ marginTop: '10px' }} color="error" >
+        <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color='error'>
           {auth.errors}
         </Typography>
 
         <form className={classes.form} noValidate>
           <TextField
-            variant="outlined"
-            margin="normal"
+            variant='outlined'
+            margin='normal'
             required
             fullWidth
-            id="email"
-            label="Username"
-            name="email"
-            autoComplete="email"
+            id='email'
+            label='Username'
+            name='email'
+            autoComplete='email'
             value={username}
             onChange={e => setUsername(e.target.value)}
             autoFocus
           />
           <TextField
-            variant="outlined"
-            margin="normal"
+            variant='outlined'
+            margin='normal'
             required
             fullWidth
-            name="password"
-            label="Password"
+            name='password'
+            label='Password'
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">
+                <InputAdornment position='end'>
                   <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
+                    size='small'
+                    aria-label='toggle password visibility'
                     onClick={handleClickShowPassword}
                     onMouseDown={handleMouseDownPassword}
                   >
-                    {showPassword ? <Visibility fontSize="small" /> : <VisibilityOff fontSize="small" />} {/* Handle password visibility */}
+                    {showPassword ? <Visibility fontSize='small' /> : <VisibilityOff fontSize='small' />} {/* Handle password visibility */}
                   </IconButton>
                 </InputAdornment>
               )
             }}
             type={showPassword ? 'text' : 'password'}
-            id="password"
+            id='password'
             value={password}
             onChange={e => setPassword(e.target.value)}
-            autoComplete="current-password"
+            autoComplete='current-password'
           />
           <FormControlLabel
-            control={<Checkbox value="remember" color="primary" />}
-            label="Remember me"
+            control={<Checkbox value='remember' color='primary' />}
+            label='Remember me'
           />
           <Button
             fullWidth
-            variant="contained"
-            color="primary"
+            variant='contained'
+            color='primary'
             onClick={handleLogin}
             className={classes.submit}
           >
@@ -155,34 +155,34 @@ export default function SignIn (props) {
           </Button>
           <Grid container>
             <Grid item xs>
-              <Link component={RouterLink} to="#" variant="body2">
+              <Link component={RouterLink} to='#' variant='body2'>
                 Forgot password?
               </Link>
             </Grid>
             <Grid item>
-              <Link component={RouterLink} to="/signup" variant="body2">
-                {'New User? Sign Up'}
+              <Link component={RouterLink} to='/signup' variant='body2'>
+                New User? Sign Up
               </Link>
             </Grid>
           </Grid>
         </form>
-        <Typography variant="body1" color="secondary" align="center" >Or</Typography>
+        <Typography variant='body1' color='secondary' align='center'>Or</Typography>
 
         {/* Google oAuth Sign In option */}
         <Button
           fullWidth
-          variant="outlined"
-          color="primary"
+          variant='outlined'
+          color='primary'
           onClick={handleGoogleLogin}
           className={classes.submit}
         >
-          <img alt="G" src={google} height="20" />&emsp; Login With Google
+          <img alt='G' src={google} height='20' />&emsp; Login With Google
         </Button>
       </Card>
       <Button
         onClick={() => { window.open(homeURL, '_self') }}
         fullWidth
-        color="default"
+        color='default'
         className={classes.submit}
       >
         Back to home
diff --git a/blocks/eda-frontend/src/pages/NotFound.js b/blocks/eda-frontend/src/pages/NotFound.js
index af600c44..4eda146b 100644
--- a/blocks/eda-frontend/src/pages/NotFound.js
+++ b/blocks/eda-frontend/src/pages/NotFound.js
@@ -18,14 +18,14 @@ export default function NotFound () {
   })
 
   return (
-    <Container maxWidth="lg" className={classes.header}>
-      <Typography variant="h1" align="center" gutterBottom>
+    <Container maxWidth='lg' className={classes.header}>
+      <Typography variant='h1' align='center' gutterBottom>
         404 Not Found
       </Typography>
       <Typography
-        variant="h4"
-        align="center"
-        color="textSecondary"
+        variant='h4'
+        align='center'
+        color='textSecondary'
         gutterBottom
       >
         Sorry, Requested page not found
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index 5b53b03b..e3d2b5fd 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -39,14 +39,14 @@ export default function SchematicEditor (props) {
 
   useEffect(() => {
     document.title = process.env.REACT_APP_DIAGRAM_NAME + ' Editor - ' + process.env.REACT_APP_NAME
-    var container = gridRef.current
-    var sidebar = compRef.current
-    var outline = outlineRef.current
+    const container = gridRef.current
+    const sidebar = compRef.current
+    const outline = outlineRef.current
     LoadGrid(container, sidebar, outline)
 
     if (props.location.search !== '') {
       const query = new URLSearchParams(props.location.search)
-      var cktid = query.get('id')
+      const cktid = query.get('id')
 
       if (cktid.substr(0, 7) === 'gallery') {
         // Loading Gallery schemaic.
@@ -71,12 +71,12 @@ export default function SchematicEditor (props) {
       <LayoutMain>
         <div className={classes.toolbar} />
         <center>
-          <div className="grid-container A4-L" ref={gridRef} id="divGrid" />
+          <div className='grid-container A4-L' ref={gridRef} id='divGrid' />
         </center>
       </LayoutMain>
 
       {/* Schematic editor Right side pane */}
-      <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle} >
+      <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle}>
         <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} />
       </RightSidebar>
     </div>
diff --git a/blocks/eda-frontend/src/pages/Simulator.js b/blocks/eda-frontend/src/pages/Simulator.js
index 7570eca7..ac5ae10e 100644
--- a/blocks/eda-frontend/src/pages/Simulator.js
+++ b/blocks/eda-frontend/src/pages/Simulator.js
@@ -55,14 +55,14 @@ export default function Simulator () {
   }
 
   const netlistCodeSanitization = (code) => {
-    var cleanCode = code.replace('plot', 'print')
+    const cleanCode = code.replace('plot', 'print')
 
     return cleanCode
   }
 
   function prepareNetlist () {
-    var sanatizedText = netlistCodeSanitization(netlistCode)
-    var file = textToFile(sanatizedText)
+    const sanatizedText = netlistCodeSanitization(netlistCode)
+    const file = textToFile(sanatizedText)
     sendNetlist(file)
   }
 
@@ -99,25 +99,25 @@ export default function Simulator () {
         if (res.data.state === 'PROGRESS' || res.data.state === 'PENDING') {
           setTimeout(simulationResult(url), 1000)
         } else {
-          var result = res.data.details
+          const result = res.data.details
           if (result === null) {
             setIsResult(false)
           } else {
             setIsResult(true)
-            var temp = res.data.details.data
+            const temp = res.data.details.data
 
-            var data = result.data
+            const data = result.data
             if (res.data.details.graph === 'true') {
-              var simResultGraph = { labels: [], x_points: [], y_points: [] }
+              const simResultGraph = { labels: [], x_points: [], y_points: [] }
               // populate the labels
-              for (var i = 0; i < data.length; i++) {
+              for (let i = 0; i < data.length; i++) {
                 simResultGraph.labels[0] = data[i].labels[0]
-                var lab = data[i].labels
+                const lab = data[i].labels
                 // lab is an array containeing labels names ['time','abc','def']
                 simResultGraph.x_points = data[0].x
 
                 // labels
-                for (var x = 1; x < lab.length; x++) {
+                for (let x = 1; x < lab.length; x++) {
                   if (lab[x].includes('#branch')) {
                     lab[x] = `I (${lab[x].replace('#branch', '')})`
                   }
@@ -129,7 +129,7 @@ export default function Simulator () {
                   simResultGraph.labels.push(lab[x])
                 }
                 // populate y_points
-                for (var z = 0; z < data[i].y.length; z++) {
+                for (let z = 0; z < data[i].y.length; z++) {
                   simResultGraph.y_points.push(data[i].y[z])
                 }
               }
@@ -141,7 +141,7 @@ export default function Simulator () {
               }
               dispatch(setResultGraph(simResultGraph))
             } else {
-              var simResultText = []
+              const simResultText = []
               for (let i = 0; i < temp.length; i++) {
                 let postfixUnit = ''
                 if (temp[i][0].includes('#branch')) {
@@ -168,45 +168,45 @@ export default function Simulator () {
 
   const typography = process.env.REACT_APP_NAME + ' on Cloud - ngSpice Simulator'
   return (
-    <Container maxWidth="lg" className={classes.header}>
+    <Container maxWidth='lg' className={classes.header}>
       <SimulationScreen open={simulateOpen} isResult={isResult} close={handleSimulateClose} dark={state} />
       <Grid
         container
         spacing={3}
-        direction="row"
-        justify="center"
-        alignItems="stretch"
+        direction='row'
+        justify='center'
+        alignItems='stretch'
       >
-        <Grid item xs={12} >
+        <Grid item xs={12}>
           <Paper className={classes.paper}>
 
-            <Typography variant="h4" gutterBottom>
+            <Typography variant='h4' gutterBottom>
               SPICE SIMULATOR
             </Typography>
-            <Typography variant="subtitle1" gutterBottom>
+            <Typography variant='subtitle1' gutterBottom>
               {typography}
             </Typography>
           </Paper>
         </Grid>
 
-        <Grid item xs={12} >
+        <Grid item xs={12}>
           <Paper className={classes.paper}>
 
-            <Typography variant="h5" gutterBottom>
+            <Typography variant='h5' gutterBottom>
               Enter Netlist
 
             </Typography>
 
             <FormControlLabel
               style={{ marginLeft: '10px' }}
-              control={<Switch checked={state.checkedA} color="primary" onChange={handleChange} name="checkedA" />}
-              label="Light Mode"
+              control={<Switch checked={state.checkedA} color='primary' onChange={handleChange} name='checkedA' />}
+              label='Light Mode'
             />
 
             <Editor code={netlistCode} onCodeChange={onCodeChange} dark={state} />
             <br />
 
-            <Button variant="contained" color="primary" size="large" onClick={handleSimulationButtonClick}>
+            <Button variant='contained' color='primary' size='large' onClick={handleSimulationButtonClick}>
               Simulate
             </Button>
           </Paper>
diff --git a/blocks/eda-frontend/src/pages/signUp.js b/blocks/eda-frontend/src/pages/signUp.js
index 180211b9..e2364ac1 100644
--- a/blocks/eda-frontend/src/pages/signUp.js
+++ b/blocks/eda-frontend/src/pages/signUp.js
@@ -50,7 +50,7 @@ export default function SignUp () {
   const auth = useSelector(state => state.authReducer)
 
   const dispatch = useDispatch()
-  var homeURL = `${window.location.protocol}\\\\${window.location.host}/`
+  const homeURL = `${window.location.protocol}\\\\${window.location.host}/`
 
   useEffect(() => {
     dispatch(authDefault())
@@ -69,113 +69,113 @@ export default function SignUp () {
 
   // Function call for google oAuth sign up.
   const handleGoogleSignup = () => {
-    var host = window.location.protocol + '//' + window.location.host
+    const host = window.location.protocol + '//' + window.location.host
     dispatch(googleLogin(host))
   }
 
   return (
-    <Container component="main" maxWidth="xs">
+    <Container component='main' maxWidth='xs'>
       <Card className={classes.paper}>
         <Avatar className={classes.avatar}>
           <LockOutlinedIcon />
         </Avatar>
 
-        <Typography component="h1" variant="h5">
+        <Typography component='h1' variant='h5'>
           Register | Sign Up
         </Typography>
 
         {/* Display's error messages while signing in */}
-        <Typography variant="body1" align="center" style={{ marginTop: '10px' }} color={auth.isRegistered ? 'secondary' : 'error'}>
+        <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color={auth.isRegistered ? 'secondary' : 'error'}>
           {auth.regErrors}
         </Typography>
 
         <form className={classes.form} noValidate>
           <TextField
-            variant="outlined"
-            margin="normal"
+            variant='outlined'
+            margin='normal'
             required
             fullWidth
-            id="username"
-            label="Username"
-            name="username"
-            autoComplete="email"
+            id='username'
+            label='Username'
+            name='username'
+            autoComplete='email'
             value={username}
             onChange={e => setUsername(e.target.value)}
             autoFocus
           />
           <TextField
-            variant="outlined"
-            margin="normal"
+            variant='outlined'
+            margin='normal'
             required
             fullWidth
-            id="email"
-            label="email"
-            name="email"
-            type="email"
-            autoComplete="email"
+            id='email'
+            label='email'
+            name='email'
+            type='email'
+            autoComplete='email'
             value={email}
             onChange={e => setEmail(e.target.value)}
             autoFocus
           />
           <TextField
-            variant="outlined"
-            margin="normal"
+            variant='outlined'
+            margin='normal'
             required
             fullWidth
-            name="password"
-            label="Password"
+            name='password'
+            label='Password'
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">
+                <InputAdornment position='end'>
                   <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
+                    size='small'
+                    aria-label='toggle password visibility'
                     onClick={handleClickShowPassword}
                     onMouseDown={handleMouseDownPassword}
                   >
-                    {showPassword ? <Visibility fontSize="small" /> : <VisibilityOff fontSize="small" />} {/* Handle password visibility */}
+                    {showPassword ? <Visibility fontSize='small' /> : <VisibilityOff fontSize='small' />} {/* Handle password visibility */}
                   </IconButton>
                 </InputAdornment>
               )
             }}
             type={showPassword ? 'text' : 'password'}
-            id="password"
+            id='password'
             value={password}
             onChange={e => setPassword(e.target.value)}
-            autoComplete="current-password"
+            autoComplete='current-password'
           />
           <FormControlLabel
-            control={<Checkbox checked={accept} onChange={e => setAccept(e.target.checked)} color="primary" />}
-            label="I accept the Terms of Use & Privacy Policy"
+            control={<Checkbox checked={accept} onChange={e => setAccept(e.target.checked)} color='primary' />}
+            label='I accept the Terms of Use & Privacy Policy'
           />
           <Button
             fullWidth
-            variant="contained"
-            color="primary"
+            variant='contained'
+            color='primary'
             onClick={() => dispatch(signUp(email, username, password, history))}
             className={classes.submit}
             disabled={!accept}
           >
             Sign Up
           </Button>
-          <Typography variant="body2" color="secondary" align="center" >Or</Typography>
+          <Typography variant='body2' color='secondary' align='center'>Or</Typography>
 
           {/* Google oAuth Sign Up option */}
           <Button
             fullWidth
-            variant="outlined"
-            color="primary"
+            variant='outlined'
+            color='primary'
             onClick={handleGoogleSignup}
             className={classes.submit}
           >
-            <img alt="G" src={google} height="20" />&emsp; Sign Up With Google
+            <img alt='G' src={google} height='20' />&emsp; Sign Up With Google
           </Button>
         </form>
 
         <Grid container>
-          <Grid item style={{ margin: 'auto' }} >
-            <Link component={RouterLink} to="/login" variant="body2">
-              {'Already have account? Login'}
+          <Grid item style={{ margin: 'auto' }}>
+            <Link component={RouterLink} to='/login' variant='body2'>
+              Already have account? Login
             </Link>
           </Grid>
         </Grid>
@@ -183,7 +183,7 @@ export default function SignUp () {
       <Button
         fullWidth
         onClick={() => { window.open(homeURL, '_self') }}
-        color="default"
+        color='default'
         className={classes.submit}
       >
         Back to home
diff --git a/blocks/eda-frontend/src/redux/actions/authActions.js b/blocks/eda-frontend/src/redux/actions/authActions.js
index 3e94a0f0..28ba384e 100644
--- a/blocks/eda-frontend/src/redux/actions/authActions.js
+++ b/blocks/eda-frontend/src/redux/actions/authActions.js
@@ -94,7 +94,7 @@ export const login = (username, password, toUrl) => {
         }
       })
       .catch((err) => {
-        var res = err.response
+        const res = err.response
         if (res.status === 400 || res.status === 403 || res.status === 401) {
           dispatch(loginError('Incorrect Username or Password.'))
         } else {
@@ -132,7 +132,7 @@ export const signUp = (email, username, password, history) => (dispatch) => {
       }
     })
     .catch((err) => {
-      var res = err.response
+      const res = err.response
       if (res.status === 400 || res.status === 403 || res.status === 401) {
         if (res.data.username !== undefined) {
           if (res.data.username[0].search('already') !== -1 && res.data.username[0].search('exists') !== -1) { dispatch(signUpError('Username Already Taken.')) }
@@ -223,7 +223,7 @@ export const googleLogin = (host, toUrl) => {
       })
       .then((res) => { console.log(res) })
       .catch((err) => {
-        var res = err.response
+        const res = err.response
         if (res.status === 400 || res.status === 403 || res.status === 401) {
           dispatch(loginError('Incorrect Username or Password.'))
         } else {
diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
index 13f01ea6..e2c2ec45 100644
--- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
+++ b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
@@ -135,7 +135,7 @@ export const setSchShared = (share) => (dispatch, getState) => {
     config.headers.Authorization = `Token ${token}`
   }
 
-  var isShared
+  let isShared
   if (share === true) {
     isShared = 'on'
   } else {
@@ -156,7 +156,7 @@ export const setSchShared = (share) => (dispatch, getState) => {
 
 // Action for Loading Gallery schematics
 export const loadGallery = (Id) => (dispatch, getState) => {
-  var data = GallerySchSample[Id]
+  const data = GallerySchSample[Id]
 
   dispatch({
     type: actions.LOAD_GALLERY,
@@ -171,7 +171,7 @@ export const loadGallery = (Id) => (dispatch, getState) => {
 
 // Action for Loading local exported schematics
 export const openLocalSch = (obj) => (dispatch, getState) => {
-  var data = obj
+  const data = obj
 
   dispatch({ type: actions.CLEAR_DETAILS })
   dispatch(setTitle('* ' + data.title))
diff --git a/blocks/eda-frontend/src/redux/reducers/authReducer.js b/blocks/eda-frontend/src/redux/reducers/authReducer.js
index b4df18d5..cb605918 100644
--- a/blocks/eda-frontend/src/redux/reducers/authReducer.js
+++ b/blocks/eda-frontend/src/redux/reducers/authReducer.js
@@ -1,6 +1,6 @@
 import * as actions from '../actions/actions'
 
-const token = process.env.REACT_APP_NAME + '_token';
+const token = process.env.REACT_APP_NAME + '_token'
 const initialState = {
   token: localStorage.getItem(token),
   isAuthenticated: null,
diff --git a/blocks/eda-frontend/src/utils/Api.js b/blocks/eda-frontend/src/utils/Api.js
index bd30f173..cff6288e 100644
--- a/blocks/eda-frontend/src/utils/Api.js
+++ b/blocks/eda-frontend/src/utils/Api.js
@@ -5,5 +5,5 @@ export default axios.create({
   baseURL: '/api/',
   responseType: 'json',
   xsrfCookieName: 'csrftoken',
-  withCredentials: true,
+  withCredentials: true
 })
diff --git a/blocks/eda-frontend/src/utils/GallerySchSample.js b/blocks/eda-frontend/src/utils/GallerySchSample.js
index 8083ec3b..69f2c731 100644
--- a/blocks/eda-frontend/src/utils/GallerySchSample.js
+++ b/blocks/eda-frontend/src/utils/GallerySchSample.js
@@ -96,7 +96,7 @@ const GallerySchSample = [
     description: 'A simple AFFICH diagram',
     media: 'AFFICH_Xcos_on_Cloud.png',
     shared: true
-  },
+  }
 ]
 
 export default GallerySchSample