From f376756b06be74dfe469f31f47a78291a07ee19f Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 17 Mar 2021 16:04:54 +0530
Subject: [PATCH 01/33] Added sort by key feature in WiFi tab and Improved UI
 in WiFi tab

---
 frontend/routes/Wifi.jsx | 292 +++++++++++++++++++++++++++++++++++----
 1 file changed, 267 insertions(+), 25 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 7329e31..2593681 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -1,5 +1,23 @@
-import * as React from 'react';
+import React from 'react';
 import { exec_table, exec } from '../util/exec';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { lighten, makeStyles } from '@material-ui/core/styles';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import color from '@material-ui/core/colors/amber';
+
+
 
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
@@ -10,44 +28,268 @@ export class Component extends React.Component {
 
     this.state = {
       wifi_networks: [],
-      last_refresh: '',
+      last_refresh: ''
     };
+
+
+
     setInterval(() => {
-      exec_table('nmcli dev wifi').then(result => this.setState({ wifi_networks: result }));
-      exec('date').then(result => this.setState({ last_refresh: result }));
+      exec_table('nmcli dev wifi')
+      .then(result => {
+        if(!result)
+          return;
+          
+        this.setState({
+          wifi_networks: result,
+        });
+      });
+      exec('date')
+      .then(result => {
+        this.setState({ 
+          last_refresh: result
+        })
+        
+      }
+        );
     }, 1000);
   }
 
+
   render() {
     return (
       <div>
-        <Table data={this.state.wifi_networks} />
+        <EnhancedTable rows={this.state.wifi_networks}/>
       </div>
     );
   }
+
 }
 
-function Table(props) {
-  const { data } = props;
-  if (data.length === 0) return <table />;
+
+const headCells = [
+  { id: 'IN-USE', numeric: false, disablePadding: true, label: 'In-Use' },
+  { id: 'BSSID', numeric: false, disablePadding: false, label: 'BSSID' },
+  { id: 'SSID', numeric: false, disablePadding: false, label: 'SSID' },
+  { id: 'MODE', numeric: false, disablePadding: false, label: 'MODE' },
+  { id: 'CHAN', numeric: true, disablePadding: false, label: 'CHAN' },
+  { id: 'RATE', numeric: true, disablePadding: false, label: 'RATE (Mbits/sec)' },
+  { id: 'SIGNAL', numeric: true, disablePadding: false, label: 'SIGNAL' },
+  { id: 'BARS', numeric: false, disablePadding: false, label: 'BARS' },
+  { id: 'SECURITY', numeric: false, disablePadding: false, label: 'SECURITY' },
+];
+
+function EnhancedTableHead(props) {
+  const { classes, order, orderBy, onRequestSort } = props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
   return (
-    <table>
-      <thead>
-        <tr>
-          {Object.keys(data[0]).map(s => (
-            <th key={s}>{s}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {data.map((row, i) => (
-          <tr key={i}>
-            {Object.values(row).map((s, i) => (
-              <td key={i}>{s}</td>
-            ))}
-          </tr>
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align='center'
+            padding={headCell.disablePadding ? 'none' : 'default'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <span className={classes.visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </span>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
         ))}
-      </tbody>
-    </table>
+      </TableRow>
+    </TableHead>
   );
 }
+
+EnhancedTableHead.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+};
+
+const useToolbarStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+  highlight:
+    theme.palette.type === 'light'
+      ? {
+          color: theme.palette.secondary.main,
+          backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+        }
+      : {
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.secondary.dark,
+        },
+  title: {
+    flex: '1 1 100%',
+  },
+}));
+
+const EnhancedTableToolbar = (props) => {
+  const classes = useToolbarStyles();
+  return (
+    <Toolbar>
+        <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
+          Wifi 
+        </Typography>
+
+    </Toolbar>
+  );
+};
+
+EnhancedTableToolbar.propTypes = {
+};
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '90%',
+    margin: theme.spacing(2),
+  },
+  paper: {
+    width: '100%',
+    padding: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+    
+  },
+  table: {
+    minWidth: 550,
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1,
+    
+  },
+}));
+
+function descendingComparator(a, b, orderBy) {
+  let is_num = false;
+  headCells.map((element)=>{
+    if(element.id == orderBy)
+      is_num = is_num || element.numeric
+  });
+
+  if(is_num){
+    if (parseInt(b[orderBy]) < parseInt(a[orderBy])) {
+      return -1;
+    }
+    if (parseInt(b[orderBy]) > parseInt(a[orderBy])) {
+      return 1;
+    }
+    return 0;
+  }
+  else{
+    return a[orderBy] < b[orderBy] ? -1 : a[orderBy] > b[orderBy];    
+  }
+
+
+}
+
+function getComparator(order, orderBy) {
+  
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+function EnhancedTable(props) {
+  const classes = useStyles();
+  const [order, setOrder] = React.useState('asc');
+  const [orderBy, setOrderBy] = React.useState(headCells[0].id);
+  const [dense, setDense] = React.useState(false);
+  const {rows} = props;
+
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+
+  const handleChangeDense = (event) => {
+    setDense(event.target.checked);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <EnhancedTableToolbar />
+        <TableContainer>
+          <Table
+            className={classes.table}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+            aria-label="enhanced table"
+          >
+            <EnhancedTableHead
+              classes={classes}
+              order={order}
+              orderBy={orderBy}
+              onRequestSort={handleRequestSort}
+            />
+            <TableBody>
+              {stableSort(rows, getComparator(order, orderBy))
+                .map((row, index) => {
+                  const labelId = `enhanced-table-checkbox-${index}`;
+                  return (
+                    <TableRow
+                      hover
+                      tabIndex={-1}
+                      key={index}                 
+                      >               
+                      {
+                        headCells.map((element)=>{
+                        return <TableCell key={element.id} align="center">{row[element.id]}</TableCell>
+                        })
+                      }
+                    </TableRow>
+                  );
+                })}
+
+              {/* {emptyRows > 0 && (
+                <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
+                  <TableCell colSpan={headCells.length} />
+                </TableRow>
+              )} */}
+
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+      <FormControlLabel
+        control={<Switch checked={dense} onChange={handleChangeDense} />}
+        label="Dense padding"
+      />
+    </div>
+  );
+};

From d1ee1ca9522b7534fbf46798b1f68b2ec1c9bfa5 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 18 Mar 2021 18:51:51 +0530
Subject: [PATCH 02/33] Highlighted row and added active dot for connected
 network. Removed unncecesary imports and comments.

---
 frontend/routes/Wifi.jsx | 236 ++++++++++++----------------
 package.json             |   9 +-
 yarn.lock                | 330 ++++++++++++++++++++++-----------------
 3 files changed, 296 insertions(+), 279 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 2593681..9a7a70f 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useState } from 'react';
 import { exec_table, exec } from '../util/exec';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -7,17 +8,15 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { lighten, makeStyles } from '@material-ui/core/styles';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import color from '@material-ui/core/colors/amber';
-
-
+import { green, orange } from '@material-ui/core/colors';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { Box } from '@material-ui/core';
+import { isNullishCoalesce } from 'typescript';
 
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
@@ -28,86 +27,87 @@ export class Component extends React.Component {
 
     this.state = {
       wifi_networks: [],
-      last_refresh: ''
+      last_refresh: '',
     };
 
-
-
     setInterval(() => {
-      exec_table('nmcli dev wifi')
-      .then(result => {
-        if(!result)
-          return;
-          
+      exec_table('nmcli dev wifi').then(result => {
+        if (!result) return;
+
         this.setState({
           wifi_networks: result,
         });
       });
-      exec('date')
-      .then(result => {
-        this.setState({ 
-          last_refresh: result
-        })
-        
-      }
-        );
+      exec('date').then(result => {
+        this.setState({
+          last_refresh: result,
+        });
+      });
     }, 1000);
   }
 
-
   render() {
     return (
       <div>
-        <EnhancedTable rows={this.state.wifi_networks}/>
+        <EnhancedTable rows={this.state.wifi_networks} />
       </div>
     );
   }
-
 }
 
 
-const headCells = [
-  { id: 'IN-USE', numeric: false, disablePadding: true, label: 'In-Use' },
-  { id: 'BSSID', numeric: false, disablePadding: false, label: 'BSSID' },
-  { id: 'SSID', numeric: false, disablePadding: false, label: 'SSID' },
-  { id: 'MODE', numeric: false, disablePadding: false, label: 'MODE' },
-  { id: 'CHAN', numeric: true, disablePadding: false, label: 'CHAN' },
-  { id: 'RATE', numeric: true, disablePadding: false, label: 'RATE (Mbits/sec)' },
-  { id: 'SIGNAL', numeric: true, disablePadding: false, label: 'SIGNAL' },
-  { id: 'BARS', numeric: false, disablePadding: false, label: 'BARS' },
-  { id: 'SECURITY', numeric: false, disablePadding: false, label: 'SECURITY' },
-];
+// Meta-Data
+
+const in_use = 'IN-USE';
+const first_column = 'IN-USE';
+const active_color = orange[50];
+const headCells = {
+  'IN-USE': { numeric: false, disablePadding: true, label: 'Connected' },
+  BSSID: { numeric: false, disablePadding: false, label: 'BSSID' },
+  SSID: { numeric: false, disablePadding: false, label: 'SSID' },
+  MODE: { numeric: false, disablePadding: false, label: 'Mode' },
+  CHAN: { numeric: true, disablePadding: false, label: 'Channel' },
+  RATE: { numeric: true, disablePadding: false, label: 'Rate' },
+  SIGNAL: { numeric: true, disablePadding: false, label: 'Signal' },
+  BARS: { numeric: false, disablePadding: false, label: 'Bars' },
+  SECURITY: { numeric: false, disablePadding: false, label: 'Security' },
+};
+
+// Meta-Data 
+
 
 function EnhancedTableHead(props) {
   const { classes, order, orderBy, onRequestSort } = props;
-  const createSortHandler = (property) => (event) => {
+  const createSortHandler = property => event => {
     onRequestSort(event, property);
   };
 
   return (
     <TableHead>
       <TableRow>
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id}
-            align='center'
-            padding={headCell.disablePadding ? 'none' : 'default'}
-            sortDirection={orderBy === headCell.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : 'asc'}
-              onClick={createSortHandler(headCell.id)}
+        {Object.keys(headCells).map(function(key) {
+          return (
+            <TableCell
+              key={key}
+              align='center'
+              padding={headCells[key].disablePadding ? 'none' : 'default'}
+              sortDirection={orderBy === key ? order : false}
             >
-              {headCell.label}
-              {orderBy === headCell.id ? (
-                <span className={classes.visuallyHidden}>
-                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                </span>
-              ) : null}
-            </TableSortLabel>
-          </TableCell>
-        ))}
+              <TableSortLabel
+                active={orderBy === key}
+                direction={orderBy === key ? order : 'asc'}
+                onClick={createSortHandler(key)}
+              >
+                <b>{headCells[key].label}</b>
+                {orderBy === key ? (
+                  <span className={classes.visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                ) : null}
+              </TableSortLabel>
+            </TableCell>
+          );
+        })}
       </TableRow>
     </TableHead>
   );
@@ -120,7 +120,7 @@ EnhancedTableHead.propTypes = {
   orderBy: PropTypes.string.isRequired,
 };
 
-const useToolbarStyles = makeStyles((theme) => ({
+const useToolbarStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(2),
   },
@@ -139,22 +139,22 @@ const useToolbarStyles = makeStyles((theme) => ({
   },
 }));
 
-const EnhancedTableToolbar = (props) => {
+const EnhancedTableToolbar = () => {
   const classes = useToolbarStyles();
   return (
+    <Box>
     <Toolbar>
-        <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
-          Wifi 
-        </Typography>
-
+      <Typography className={classes.title} variant="h6" id="tableTitle" component="span">
+      Active Wifi Networks
+      </Typography>      
     </Toolbar>
-  );
-};
 
-EnhancedTableToolbar.propTypes = {
+    </Box>
+
+  );
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     width: '90%',
     margin: theme.spacing(2),
@@ -163,7 +163,6 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     padding: theme.spacing(2),
     marginBottom: theme.spacing(1),
-    
   },
   table: {
     minWidth: 550,
@@ -178,35 +177,18 @@ const useStyles = makeStyles((theme) => ({
     position: 'absolute',
     top: 20,
     width: 1,
-    
   },
 }));
 
 function descendingComparator(a, b, orderBy) {
-  let is_num = false;
-  headCells.map((element)=>{
-    if(element.id == orderBy)
-      is_num = is_num || element.numeric
-  });
-
-  if(is_num){
-    if (parseInt(b[orderBy]) < parseInt(a[orderBy])) {
-      return -1;
-    }
-    if (parseInt(b[orderBy]) > parseInt(a[orderBy])) {
-      return 1;
-    }
-    return 0;
-  }
-  else{
-    return a[orderBy] < b[orderBy] ? -1 : a[orderBy] > b[orderBy];    
+  if (headCells[orderBy].numeric) {
+    return parseInt(b[orderBy]) < parseInt(a[orderBy]) ? -1 : parseInt(b[orderBy]) > parseInt(a[orderBy]);
+  } else {
+    return a[orderBy] < b[orderBy] ? -1 : a[orderBy] > b[orderBy];
   }
-
-
 }
 
 function getComparator(order, orderBy) {
-  
   return order === 'desc'
     ? (a, b) => descendingComparator(a, b, orderBy)
     : (a, b) => -descendingComparator(a, b, orderBy);
@@ -219,15 +201,14 @@ function stableSort(array, comparator) {
     if (order !== 0) return order;
     return a[1] - b[1];
   });
-  return stabilizedThis.map((el) => el[0]);
+  return stabilizedThis.map(el => el[0]);
 }
 
 function EnhancedTable(props) {
   const classes = useStyles();
-  const [order, setOrder] = React.useState('asc');
-  const [orderBy, setOrderBy] = React.useState(headCells[0].id);
-  const [dense, setDense] = React.useState(false);
-  const {rows} = props;
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = useState(first_column);
+  const { rows } = props;
 
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -235,22 +216,12 @@ function EnhancedTable(props) {
     setOrderBy(property);
   };
 
-
-  const handleChangeDense = (event) => {
-    setDense(event.target.checked);
-  };
-
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
         <EnhancedTableToolbar />
         <TableContainer>
-          <Table
-            className={classes.table}
-            aria-labelledby="tableTitle"
-            size={dense ? 'small' : 'medium'}
-            aria-label="enhanced table"
-          >
+          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="enhanced table">
             <EnhancedTableHead
               classes={classes}
               order={order}
@@ -258,38 +229,35 @@ function EnhancedTable(props) {
               onRequestSort={handleRequestSort}
             />
             <TableBody>
-              {stableSort(rows, getComparator(order, orderBy))
-                .map((row, index) => {
-                  const labelId = `enhanced-table-checkbox-${index}`;
-                  return (
-                    <TableRow
-                      hover
-                      tabIndex={-1}
-                      key={index}                 
-                      >               
-                      {
-                        headCells.map((element)=>{
-                        return <TableCell key={element.id} align="center">{row[element.id]}</TableCell>
-                        })
-                      }
-                    </TableRow>
-                  );
-                })}
-
-              {/* {emptyRows > 0 && (
-                <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
-                  <TableCell colSpan={headCells.length} />
-                </TableRow>
-              )} */}
-
+              {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
+                return (
+                  <TableRow
+                    hover
+                    tabIndex={-1}
+                    key={index}
+                    style={{
+                      background: row[in_use].length > 0 ? active_color : null,
+                    }}
+                  >
+                    {Object.keys(headCells).map(function(key) {
+                      return (
+                        <TableCell key={key} align='center' >
+                          {key==in_use? (row[key].length>0?
+                          <Skeleton variant="circle" width={10} height={10} style={{
+                            background : green.A200,
+                            alignContent: 'center',
+                            padding: 0,
+                          }} /> : null) : row[key]}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
             </TableBody>
           </Table>
         </TableContainer>
       </Paper>
-      <FormControlLabel
-        control={<Switch checked={dense} onChange={handleChangeDense} />}
-        label="Dense padding"
-      />
     </div>
   );
-};
+}
diff --git a/package.json b/package.json
index c505f07..a0c696b 100644
--- a/package.json
+++ b/package.json
@@ -14,14 +14,15 @@
     "last 10 Firefox versions"
   ],
   "dependencies": {
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "express": "~4.17.1",
     "socketio": "^1.0.0"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.8.0",
+    "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.5.1",
     "@reduxjs/toolkit": "^1.1.0",
-    "@types/react": "^16.9.17",
+    "@types/react": "^16.8.6 || ^17.0.0",
     "@types/react-dom": "^16.9.4",
     "@types/react-router-dom": "^5.1.3",
     "js-yaml": "^3.13.1",
@@ -29,8 +30,8 @@
     "morgan": "~1.9.1",
     "parcel": "^1.12.4",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",
diff --git a/yarn.lock b/yarn.lock
index 9b864fd..e25a566 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -656,13 +656,20 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
   integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.8.3":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
+  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.4.4", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -696,35 +703,33 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@emotion/hash@^0.7.1":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
-  integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
 "@iarna/toml@^2.2.0":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
-"@material-ui/core@^4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.8.0.tgz#8fb4f4df2b35e3e781b1eec17d4aaf388edf3099"
-  integrity sha512-ODyvWlDOP0D3tU32wVlYRNrdS+LeJxB3xJbXdDxq6gnG4JhKk79+ylP0cImjPBI2yEZw0hcYHWFZOGD+0R1X4g==
+"@material-ui/core@^4.9.10":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850"
+  integrity sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.7.1"
-    "@material-ui/system" "^4.7.1"
-    "@material-ui/types" "^4.1.1"
-    "@material-ui/utils" "^4.7.1"
+    "@material-ui/styles" "^4.11.3"
+    "@material-ui/system" "^4.11.3"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.11.2"
     "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.2"
-    convert-css-length "^2.0.1"
-    hoist-non-react-statics "^3.2.1"
-    normalize-scroll-left "^0.2.0"
-    popper.js "^1.14.1"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
     prop-types "^15.7.2"
-    react-is "^16.8.0"
-    react-transition-group "^4.3.0"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
 
 "@material-ui/icons@^4.5.1":
   version "4.5.1"
@@ -733,52 +738,62 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/styles@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29"
-  integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA==
+"@material-ui/lab@^4.0.0-alpha.57":
+  version "4.0.0-alpha.57"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
+  integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.7.1"
-    "@material-ui/types" "^4.1.1"
-    "@material-ui/utils" "^4.7.1"
-    clsx "^1.0.2"
-    csstype "^2.5.2"
-    hoist-non-react-statics "^3.2.1"
-    jss "^10.0.0"
-    jss-plugin-camel-case "^10.0.0"
-    jss-plugin-default-unit "^10.0.0"
-    jss-plugin-global "^10.0.0"
-    jss-plugin-nested "^10.0.0"
-    jss-plugin-props-sort "^10.0.0"
-    jss-plugin-rule-value-function "^10.0.0"
-    jss-plugin-vendor-prefixer "^10.0.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
     prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
 
-"@material-ui/system@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d"
-  integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==
+"@material-ui/styles@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
+  integrity sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.7.1"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
     prop-types "^15.7.2"
 
-"@material-ui/types@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b"
-  integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==
+"@material-ui/system@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143"
+  integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==
   dependencies:
-    "@types/react" "*"
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
 
-"@material-ui/utils@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
-  integrity sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==
+"@material-ui/types@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
   dependencies:
     "@babel/runtime" "^7.4.4"
     prop-types "^15.7.2"
-    react-is "^16.8.0"
+    react-is "^16.8.0 || ^17.0.0"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -892,7 +907,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.17":
+"@types/react@*":
   version "16.9.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
   integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
@@ -900,6 +915,20 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.8.6 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
+  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 abab@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
@@ -1561,10 +1590,10 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
-clsx@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
-  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
 coa@^2.0.2:
   version "2.0.2"
@@ -1695,11 +1724,6 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-css-length@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c"
-  integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==
-
 convert-source-map@^1.5.1, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -1876,12 +1900,12 @@ css-unit-converter@^1.1.1:
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
   integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
 
-css-vendor@^2.0.6:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
-  integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
   dependencies:
-    "@babel/runtime" "^7.6.2"
+    "@babel/runtime" "^7.8.3"
     is-in-browser "^1.0.2"
 
 css-what@^3.2.1:
@@ -1991,11 +2015,16 @@ cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.7:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
   integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
 
+csstype@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2884,13 +2913,20 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
   integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
   dependencies:
     react-is "^16.7.0"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@@ -3015,6 +3051,13 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
+indefinite-observable@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400"
+  integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==
+  dependencies:
+    symbol-observable "1.2.0"
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -3429,72 +3472,74 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
-  integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
+jss-plugin-camel-case@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz#93d2cd704bf0c4af70cc40fb52d74b8a2554b170"
+  integrity sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==
   dependencies:
     "@babel/runtime" "^7.3.1"
     hyphenate-style-name "^1.0.3"
-    jss "10.0.0"
+    jss "10.6.0"
 
-jss-plugin-default-unit@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
-  integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
+jss-plugin-default-unit@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz#af47972486819b375f0f3a9e0213403a84b5ef3b"
+  integrity sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.6.0"
 
-jss-plugin-global@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
-  integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
+jss-plugin-global@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz#3e8011f760f399cbadcca7f10a485b729c50e3ed"
+  integrity sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.6.0"
 
-jss-plugin-nested@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
-  integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
+jss-plugin-nested@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz#5f83c5c337d3b38004834e8426957715a0251641"
+  integrity sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.6.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
-  integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
+jss-plugin-props-sort@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz#297879f35f9fe21196448579fee37bcde28ce6bc"
+  integrity sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.6.0"
 
-jss-plugin-rule-value-function@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
-  integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz#3c1a557236a139d0151e70a82c810ccce1c1c5ea"
+  integrity sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.6.0"
+    tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
-  integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz#e1fcd499352846890c38085b11dbd7aa1c4f2c78"
+  integrity sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.6"
-    jss "10.0.0"
+    css-vendor "^2.0.8"
+    jss "10.6.0"
 
-jss@10.0.0, jss@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
-  integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
+jss@10.6.0, jss@^10.5.1:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.6.0.tgz#d92ff9d0f214f65ca1718591b68e107be4774149"
+  integrity sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    csstype "^2.6.5"
+    csstype "^3.0.2"
+    indefinite-observable "^2.0.1"
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
@@ -3881,11 +3926,6 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-normalize-scroll-left@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c"
-  integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==
-
 normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
@@ -4274,10 +4314,10 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.14.1:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
-  integrity sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
@@ -4798,21 +4838,25 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@^16.12.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
-  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
+"react-dom@^16.8.0 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.18.0"
+    scheduler "^0.20.1"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.9.0:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+"react-is@^16.8.0 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-redux@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
@@ -4854,24 +4898,23 @@ react-router@5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-transition-group@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
-  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+react-transition-group@^4.4.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.12.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
-  integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
+"react@^16.8.0 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.6"
@@ -4952,6 +4995,11 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -5178,10 +5226,10 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5656,7 +5704,7 @@ svgo@^1.0.0, svgo@^1.3.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.2.0:
+symbol-observable@1.2.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

From 433147f93e10694a59ef2b5cb9d3cee1f4d1ba34 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Fri, 19 Mar 2021 18:06:38 +0530
Subject: [PATCH 03/33] Added Chips for WPA, Updated dependecies, cleaned code

---
 frontend/components/LoadGraph.jsx |   0
 frontend/index.jsx                |   2 +-
 frontend/routes/Wifi.jsx          |  96 ++++++++++++++++----------
 package.json                      |   9 +--
 yarn.lock                         | 111 ++++++++++++++++++++++++++++--
 5 files changed, 168 insertions(+), 50 deletions(-)
 create mode 100644 frontend/components/LoadGraph.jsx

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/index.jsx b/frontend/index.jsx
index 472969d..d700e60 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -10,7 +10,7 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: '#FA8756',
-      contrastText: 'white',
+      contrastText: '#ffffff',
     },
     secondary: green,
   },
diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 9a7a70f..706234e 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -15,8 +15,7 @@ import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
-import { Box } from '@material-ui/core';
-import { isNullishCoalesce } from 'typescript';
+import { Box, Chip } from '@material-ui/core';
 
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
@@ -49,17 +48,15 @@ export class Component extends React.Component {
   render() {
     return (
       <div>
-        <EnhancedTable rows={this.state.wifi_networks} />
+        <SortableTable rows={this.state.wifi_networks} />
       </div>
     );
   }
 }
 
-
-// Meta-Data
-
 const in_use = 'IN-USE';
-const first_column = 'IN-USE';
+const initial_direction = 'asc';
+const security = 'SECURITY';
 const active_color = orange[50];
 const headCells = {
   'IN-USE': { numeric: false, disablePadding: true, label: 'Connected' },
@@ -73,14 +70,9 @@ const headCells = {
   SECURITY: { numeric: false, disablePadding: false, label: 'Security' },
 };
 
-// Meta-Data 
-
-
-function EnhancedTableHead(props) {
+function SortableTableHead(props) {
   const { classes, order, orderBy, onRequestSort } = props;
-  const createSortHandler = property => event => {
-    onRequestSort(event, property);
-  };
+  const createSortHandler = property => event => onRequestSort(event, property);
 
   return (
     <TableHead>
@@ -89,7 +81,7 @@ function EnhancedTableHead(props) {
           return (
             <TableCell
               key={key}
-              align='center'
+              align="center"
               padding={headCells[key].disablePadding ? 'none' : 'default'}
               sortDirection={orderBy === key ? order : false}
             >
@@ -113,7 +105,7 @@ function EnhancedTableHead(props) {
   );
 }
 
-EnhancedTableHead.propTypes = {
+SortableTableHead.propTypes = {
   classes: PropTypes.object.isRequired,
   onRequestSort: PropTypes.func.isRequired,
   order: PropTypes.oneOf(['asc', 'desc']).isRequired,
@@ -139,18 +131,16 @@ const useToolbarStyles = makeStyles(theme => ({
   },
 }));
 
-const EnhancedTableToolbar = () => {
+const SortableTableToolbar = () => {
   const classes = useToolbarStyles();
   return (
     <Box>
-    <Toolbar>
-      <Typography className={classes.title} variant="h6" id="tableTitle" component="span">
-      Active Wifi Networks
-      </Typography>      
-    </Toolbar>
-
+      <Toolbar>
+        <Typography className={classes.title} variant="h6" id="tableTitle" component="span">
+          Active Wifi Networks
+        </Typography>
+      </Toolbar>
     </Box>
-
   );
 };
 
@@ -178,11 +168,21 @@ const useStyles = makeStyles(theme => ({
     top: 20,
     width: 1,
   },
+  chips: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    '& > *': {
+      margin: theme.spacing(0.2),
+    },
+  },
 }));
 
 function descendingComparator(a, b, orderBy) {
   if (headCells[orderBy].numeric) {
-    return parseInt(b[orderBy]) < parseInt(a[orderBy]) ? -1 : parseInt(b[orderBy]) > parseInt(a[orderBy]);
+    return parseInt(b[orderBy]) < parseInt(a[orderBy])
+      ? -1
+      : parseInt(b[orderBy]) > parseInt(a[orderBy]);
   } else {
     return a[orderBy] < b[orderBy] ? -1 : a[orderBy] > b[orderBy];
   }
@@ -204,10 +204,18 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-function EnhancedTable(props) {
+function extractWPA(wpas) {
+  let list = wpas.split(' ').map((str, idx) => {
+    return <Chip color="primary" size="small" label={str} key={idx} />;
+  });
+
+  return list;
+}
+
+function SortableTable(props) {
   const classes = useStyles();
-  const [order, setOrder] = useState('asc');
-  const [orderBy, setOrderBy] = useState(first_column);
+  const [order, setOrder] = useState(initial_direction);
+  const [orderBy, setOrderBy] = useState(in_use);
   const { rows } = props;
 
   const handleRequestSort = (event, property) => {
@@ -219,10 +227,10 @@ function EnhancedTable(props) {
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
-        <EnhancedTableToolbar />
+        <SortableTableToolbar />
         <TableContainer>
-          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="enhanced table">
-            <EnhancedTableHead
+          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="sortable table">
+            <SortableTableHead
               classes={classes}
               order={order}
               orderBy={orderBy}
@@ -241,13 +249,25 @@ function EnhancedTable(props) {
                   >
                     {Object.keys(headCells).map(function(key) {
                       return (
-                        <TableCell key={key} align='center' >
-                          {key==in_use? (row[key].length>0?
-                          <Skeleton variant="circle" width={10} height={10} style={{
-                            background : green.A200,
-                            alignContent: 'center',
-                            padding: 0,
-                          }} /> : null) : row[key]}
+                        <TableCell key={key} align="center">
+                          {key == in_use ? (
+                            row[key].length > 0 ? (
+                              <Skeleton
+                                variant="circle"
+                                width={10}
+                                height={10}
+                                style={{
+                                  background: green.A200,
+                                  alignContent: 'center',
+                                  padding: 0,
+                                }}
+                              />
+                            ) : null
+                          ) : key == security ? (
+                            <div className={classes.chips}>{extractWPA(row[security])}</div>
+                          ) : (
+                            row[key]
+                          )}
                         </TableCell>
                       );
                     })}
diff --git a/package.json b/package.json
index a0c696b..20058a4 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,14 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.57",
     "express": "~4.17.1",
+    "react-charts": "^2.0.0-beta.7",
     "socketio": "^1.0.0"
   },
   "devDependencies": {
     "@material-ui/core": "^4.9.10",
-    "@material-ui/icons": "^4.5.1",
+    "@material-ui/icons": "^4.9.10",
     "@reduxjs/toolkit": "^1.1.0",
-    "@types/react": "^16.8.6 || ^17.0.0",
+    "@types/react": "^17.0.0",
     "@types/react-dom": "^16.9.4",
     "@types/react-router-dom": "^5.1.3",
     "js-yaml": "^3.13.1",
@@ -30,8 +31,8 @@
     "morgan": "~1.9.1",
     "parcel": "^1.12.4",
     "prettier": "^1.19.1",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^^17.0.0",
+    "react-dom": "^17.0.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",
diff --git a/yarn.lock b/yarn.lock
index e25a566..466e597 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -731,10 +731,10 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@^4.5.1":
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8"
-  integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==
+"@material-ui/icons@^4.9.10":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
 
@@ -849,6 +849,11 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
+"@reach/observe-rect@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
+
 "@reduxjs/toolkit@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.1.0.tgz#16ee944782e8f716a9a062f55bea3e2435f3d490"
@@ -915,7 +920,7 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/react@^16.8.6 || ^17.0.0":
+"@types/react@^17.0.0":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
   integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
@@ -2025,6 +2030,77 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
   integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
 
+d3-array@^2.3.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.0.tgz#68a74d153e52d6bf4608d9f6388cca48b42a4c3f"
+  integrity sha512-T6H/qNldyD/1OlRkJbonb3u3MPhNwju8OPxYv0YSjDb/B2RUeeBEHzIpNrYiinwpmz8+am+puMrpcrDWgY9wRg==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-color@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
+d3-delaunay@^5.2.1:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
+  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
+  dependencies:
+    delaunator "4"
+
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
+"d3-interpolate@1.2.0 - 2":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-scale@^3.2.1:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.2.3.tgz#be380f57f1f61d4ff2e6cbb65a40593a51649cfd"
+  integrity sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "1 - 2"
+    d3-time-format "2 - 3"
+
+d3-shape@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+"d3-time-format@2 - 3":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
+"d3-time@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab"
+  integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
+
+d3-voronoi@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2135,6 +2211,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -3091,6 +3172,11 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4838,7 +4924,18 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-"react-dom@^16.8.0 || ^17.0.0":
+react-charts@^2.0.0-beta.7:
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/react-charts/-/react-charts-2.0.0-beta.7.tgz#cc989d78f976dc70796af3af816874274f0c75be"
+  integrity sha512-iUspg9rnx7kD0H/wsK67HNUioOgKgJ8WRXr/Tk3EGP2qcFb9Vo7pjDk4oz1jH12TC+mqL+HFxNYraMkhWd6CUw==
+  dependencies:
+    "@reach/observe-rect" "^1.1.0"
+    d3-delaunay "^5.2.1"
+    d3-scale "^3.2.1"
+    d3-shape "^1.3.7"
+    d3-voronoi "^1.1.2"
+
+react-dom@^17.0.0:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
   integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
@@ -4908,7 +5005,7 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-"react@^16.8.0 || ^17.0.0":
+react@^17.0.0:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
   integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==

From 4b06a8e0df2a0d976b56622f11f3031c3fcbde36 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 22 Mar 2021 01:51:08 +0530
Subject: [PATCH 04/33] Added camer load graph

---
 frontend/components/CommandWidgets.jsx        |  46 +++++-
 .../components/GraphUtils/ResizableBox.js     |  43 +++++
 .../components/GraphUtils/useDevConfig.js     | 155 ++++++++++++++++++
 frontend/components/LoadGraph.jsx             |  64 ++++++++
 frontend/routes/SystemInformation.jsx         |   3 +-
 package.json                                  |   3 +-
 yarn.lock                                     |  23 ++-
 7 files changed, 332 insertions(+), 5 deletions(-)
 create mode 100644 frontend/components/GraphUtils/ResizableBox.js
 create mode 100644 frontend/components/GraphUtils/useDevConfig.js

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 5d24d6f..441e3a4 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -9,12 +9,54 @@ export function Command(props) {
   );
 }
 
-export function PlainCommand({ command, interval, children }) {
+function extractLoadFromString(str = '') {
+  let list = str.split(',').map(ele => {
+    return ele.trim();
+  });
+  let one_min = list[2].split(':')[1];
+  let five_min = list[3];
+  let fifteen_min = list[4];
+
+  return [
+    {
+      label: 'One Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(one_min),
+        },
+      ],
+    },
+    {
+      label: 'Five Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(five_min),
+        },
+      ],
+    },
+    {
+      label: 'Fifteen Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(fifteen_min),
+        },
+      ],
+    },
+  ];
+}
+
+export function PlainCommand({ command, interval, children, randomizeData }) {
   const [output, setOutput] = useState('');
   useEffect(() => {
     const callback = () =>
       exec(command)
-        .then(result => setOutput(result[0]))
+        .then(result => {
+          setOutput(result[0]);
+          if (randomizeData !== undefined) randomizeData(extractLoadFromString(result[0]));
+        })
         .catch(err => setOutput(err[1]));
     const interval_handle = setInterval(callback, interval);
     callback();
diff --git a/frontend/components/GraphUtils/ResizableBox.js b/frontend/components/GraphUtils/ResizableBox.js
new file mode 100644
index 0000000..14aa707
--- /dev/null
+++ b/frontend/components/GraphUtils/ResizableBox.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ResizableBox as ReactResizableBox } from 'react-resizable';
+
+import 'react-resizable/css/styles.css';
+
+export default function ResizableBox({
+  children,
+  width = 500,
+  height = 300,
+  resizable = true,
+  style = {},
+  className,
+}) {
+  return (
+    <div>
+      {resizable ? (
+        <ReactResizableBox width={width} height={height}>
+          <div
+            style={{
+              ...style,
+              width: '100%',
+              height: '100%',
+            }}
+            className={className}
+          >
+            {children}
+          </div>
+        </ReactResizableBox>
+      ) : (
+        <div
+          style={{
+            width: `${width}px`,
+            height: `${height}px`,
+            ...style,
+          }}
+          className={className}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/GraphUtils/useDevConfig.js b/frontend/components/GraphUtils/useDevConfig.js
new file mode 100644
index 0000000..748180a
--- /dev/null
+++ b/frontend/components/GraphUtils/useDevConfig.js
@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react';
+
+const options = {
+  elementType: ['line', 'area', 'bar', 'bubble'],
+  primaryAxisType: ['linear', 'time', 'log', 'ordinal'],
+  secondaryAxisType: ['linear', 'time', 'log', 'ordinal'],
+  primaryAxisPosition: ['top', 'left', 'right', 'bottom'],
+  secondaryAxisPosition: ['top', 'left', 'right', 'bottom'],
+  secondaryAxisStack: [true, false],
+  primaryAxisShow: [true, false],
+  secondaryAxisShow: [true, false],
+  grouping: ['single', 'series', 'primary', 'secondary'],
+  tooltipAnchor: [
+    'closest',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'center',
+    'gridTop',
+    'gridBottom',
+    'gridLeft',
+    'gridRight',
+    'gridCenter',
+    'pointer',
+  ],
+  tooltipAlign: [
+    'auto',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+    'center',
+  ],
+  snapCursor: [true, false],
+};
+
+const optionKeys = Object.keys(options);
+
+export default function useChartConfig({
+  series,
+  useR,
+  show = [],
+  count = 1,
+  resizable = true,
+  canRandomize = true,
+  dataType = 'time',
+  elementType = 'line',
+  primaryAxisType = 'time',
+  secondaryAxisType = 'linear',
+  primaryAxisPosition = 'bottom',
+  secondaryAxisPosition = 'left',
+  primaryAxisStack = false,
+  secondaryAxisStack = true,
+  primaryAxisShow = true,
+  secondaryAxisShow = true,
+  tooltipAnchor = 'closest',
+  tooltipAlign = 'auto',
+  grouping = 'primary',
+  snapCursor = true,
+  datums = 10,
+}) {
+  const [state, setState] = useState({
+    count,
+    resizable,
+    canRandomize,
+    dataType,
+    elementType,
+    primaryAxisType,
+    secondaryAxisType,
+    primaryAxisPosition,
+    secondaryAxisPosition,
+    primaryAxisStack,
+    secondaryAxisStack,
+    primaryAxisShow,
+    secondaryAxisShow,
+    tooltipAnchor,
+    tooltipAlign,
+    grouping,
+    snapCursor,
+    datums,
+    data: [
+      {
+        label: 'One Minute Load',
+        data: [],
+      },
+      {
+        label: 'Five Minute Load',
+        data: [],
+      },
+      {
+        label: 'Fifteen Minute Load',
+        data: [],
+      },
+    ],
+  });
+
+  useEffect(() => {
+    setState(old => ({
+      ...old,
+      data: state.data,
+    }));
+  }, [count, dataType, datums, series, useR]);
+
+  const randomizeData = new_data => {
+    if (new_data === undefined) return null;
+
+    const temp_data = state;
+    temp_data.data = temp_data.data.map((ele, i) => {
+      return {
+        label: new_data[i].label,
+        data: ele.data.concat(new_data[i].data),
+      };
+    });
+
+    setState(old => ({
+      ...old,
+      data: temp_data.data,
+    }));
+  };
+
+  const Options = optionKeys
+    .filter(option => show.indexOf(option) > -1)
+    .map(option => (
+      <div key={option}>
+        {option}: &nbsp;
+        <select
+          value={state[option]}
+          onChange={({ target: { value } }) =>
+            setState(old => ({
+              ...old,
+              [option]: typeof options[option][0] === 'boolean' ? value === 'true' : value,
+            }))
+          }
+        >
+          {options[option].map(d => (
+            <option value={d} key={d.toString()}>
+              {d.toString()}
+            </option>
+          ))}
+        </select>
+        <br />
+      </div>
+    ));
+
+  return {
+    ...state,
+    randomizeData,
+    Options,
+  };
+}
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index e69de29..377f581 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Chart } from 'react-charts';
+
+import useDemoConfig from './GraphUtils/useDevConfig';
+import ResizableBox from './GraphUtils/ResizableBox';
+import { Command } from './CommandWidgets';
+import { Box, Typography } from '@material-ui/core';
+
+export default function LoadGraph() {
+  const datasets = {
+    labels: [],
+    data: [{}],
+  };
+
+  const { data, randomizeData } = useDemoConfig({
+    series: 3,
+  });
+
+  const series = React.useMemo(
+    () => ({
+      showPoints: true,
+    }),
+    []
+  );
+
+  const axes = React.useMemo(
+    () => [
+      {
+        primary: true,
+        type: 'time',
+        position: 'bottom',
+      },
+      { type: 'linear', position: 'left' },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <Box
+        style={{
+          padding: '0.5rem',
+        }}
+      >
+        <br />
+        <Typography variant="overline" display="block" gutterBottom>
+          Camera Load averages
+        </Typography>
+        <br />
+
+        <ResizableBox
+          style={{
+            background: 'rgba(0, 27, 45, 0.9)',
+            borderRadius: '5px',
+            padding: '0.1rem',
+          }}
+        >
+          <Chart data={data} series={series} axes={axes} tooltip dark />
+        </ResizableBox>
+      </Box>
+      <Command command="uptime" interval={2000} randomizeData={randomizeData} />
+    </>
+  );
+}
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index 5f313f7..a132ab0 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Command } from '../components/CommandWidgets';
+import LoadGraph from '../components/LoadGraph';
 
 export const title = 'System Information';
 export const route = '/system_information';
@@ -9,8 +10,8 @@ export const explanation = `Get an overview of whats going on in the linux side
 export function Component(props) {
   return (
     <div>
+      <LoadGraph />
       <Command command="date" interval={1000} />
-      <Command command="uptime" interval={1000} />
       <Command command="free -h" interval={1000} />
       <Command command="ip a" interval={1000} />
       <Command command="uname -a" interval={10000} />
diff --git a/package.json b/package.json
index 20058a4..9c44710 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@material-ui/lab": "^4.0.0-alpha.57",
     "express": "~4.17.1",
     "react-charts": "^2.0.0-beta.7",
+    "react-resizable": "^1.11.1",
     "socketio": "^1.0.0"
   },
   "devDependencies": {
@@ -31,7 +32,7 @@
     "morgan": "~1.9.1",
     "parcel": "^1.12.4",
     "prettier": "^1.19.1",
-    "react": "^^17.0.0",
+    "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
diff --git a/yarn.lock b/yarn.lock
index 466e597..5418dfd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1564,6 +1564,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -4801,7 +4806,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4944,6 +4949,14 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-draggable@^4.0.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
+  integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -4966,6 +4979,14 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-resizable@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.1.tgz#02ca6850afa7a22c1b3e623e64aef71ee252af69"
+  integrity sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^4.0.3"
+
 react-router-dom@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"

From e128d8731b139de87e1fa1b378836f1a7efe9c72 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 22 Mar 2021 02:42:45 +0530
Subject: [PATCH 05/33] Minor UI Changes and code improvement

---
 frontend/routes/Wifi.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 706234e..143405c 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -59,7 +59,7 @@ const initial_direction = 'asc';
 const security = 'SECURITY';
 const active_color = orange[50];
 const headCells = {
-  'IN-USE': { numeric: false, disablePadding: true, label: 'Connected' },
+  [in_use]: { numeric: false, disablePadding: true, label: 'Connected' },
   BSSID: { numeric: false, disablePadding: false, label: 'BSSID' },
   SSID: { numeric: false, disablePadding: false, label: 'SSID' },
   MODE: { numeric: false, disablePadding: false, label: 'Mode' },
@@ -72,8 +72,6 @@ const headCells = {
 
 function SortableTableHead(props) {
   const { classes, order, orderBy, onRequestSort } = props;
-  const createSortHandler = property => event => onRequestSort(event, property);
-
   return (
     <TableHead>
       <TableRow>
@@ -88,7 +86,7 @@ function SortableTableHead(props) {
               <TableSortLabel
                 active={orderBy === key}
                 direction={orderBy === key ? order : 'asc'}
-                onClick={createSortHandler(key)}
+                onClick={(event)=>{onRequestSort(event, key)}}
               >
                 <b>{headCells[key].label}</b>
                 {orderBy === key ? (
@@ -170,7 +168,7 @@ const useStyles = makeStyles(theme => ({
   },
   chips: {
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'left',
     flexWrap: 'wrap',
     '& > *': {
       margin: theme.spacing(0.2),

From 2bd325ffde0aba2bee1928c4e973bffdd8cad491 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 22 Mar 2021 13:26:22 +0530
Subject: [PATCH 06/33] Minor function name changes

---
 frontend/components/CommandWidgets.jsx         | 4 ++--
 frontend/components/GraphUtils/useDevConfig.js | 6 +++---
 frontend/components/LoadGraph.jsx              | 4 ++--
 frontend/routes/Wifi.jsx                       | 4 +++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 441e3a4..f69b7fd 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -48,14 +48,14 @@ function extractLoadFromString(str = '') {
   ];
 }
 
-export function PlainCommand({ command, interval, children, randomizeData }) {
+export function PlainCommand({ command, interval, children, updateData }) {
   const [output, setOutput] = useState('');
   useEffect(() => {
     const callback = () =>
       exec(command)
         .then(result => {
           setOutput(result[0]);
-          if (randomizeData !== undefined) randomizeData(extractLoadFromString(result[0]));
+          if (updateData !== undefined) updateData(extractLoadFromString(result[0]));
         })
         .catch(err => setOutput(err[1]));
     const interval_handle = setInterval(callback, interval);
diff --git a/frontend/components/GraphUtils/useDevConfig.js b/frontend/components/GraphUtils/useDevConfig.js
index 748180a..b652dda 100644
--- a/frontend/components/GraphUtils/useDevConfig.js
+++ b/frontend/components/GraphUtils/useDevConfig.js
@@ -47,7 +47,7 @@ export default function useChartConfig({
   show = [],
   count = 1,
   resizable = true,
-  canRandomize = true,
+  canRandomize = false,
   dataType = 'time',
   elementType = 'line',
   primaryAxisType = 'time',
@@ -106,7 +106,7 @@ export default function useChartConfig({
     }));
   }, [count, dataType, datums, series, useR]);
 
-  const randomizeData = new_data => {
+  const updateData = new_data => {
     if (new_data === undefined) return null;
 
     const temp_data = state;
@@ -149,7 +149,7 @@ export default function useChartConfig({
 
   return {
     ...state,
-    randomizeData,
+    updateData,
     Options,
   };
 }
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 377f581..f30e5bd 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -12,7 +12,7 @@ export default function LoadGraph() {
     data: [{}],
   };
 
-  const { data, randomizeData } = useDemoConfig({
+  const { data, updateData } = useDemoConfig({
     series: 3,
   });
 
@@ -58,7 +58,7 @@ export default function LoadGraph() {
           <Chart data={data} series={series} axes={axes} tooltip dark />
         </ResizableBox>
       </Box>
-      <Command command="uptime" interval={2000} randomizeData={randomizeData} />
+      <Command command="uptime" interval={2000} updateData={updateData} />
     </>
   );
 }
diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 143405c..6048b54 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -86,7 +86,9 @@ function SortableTableHead(props) {
               <TableSortLabel
                 active={orderBy === key}
                 direction={orderBy === key ? order : 'asc'}
-                onClick={(event)=>{onRequestSort(event, key)}}
+                onClick={event => {
+                  onRequestSort(event, key);
+                }}
               >
                 <b>{headCells[key].label}</b>
                 {orderBy === key ? (

From d17e912b06dbe7886c8be32106f76fcc4fc50bc1 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 24 Mar 2021 00:22:03 +0530
Subject: [PATCH 07/33] Changed graph library to ApexCharts

---
 frontend/components/CommandWidgets.jsx        |  46 +----
 .../components/GraphUtils/ResizableBox.js     |  43 -----
 .../components/GraphUtils/useDevConfig.js     | 155 ---------------
 frontend/components/LoadGraph.jsx             | 154 ++++++++++-----
 package.json                                  |   5 +-
 yarn.lock                                     | 178 ++++++++----------
 6 files changed, 190 insertions(+), 391 deletions(-)
 delete mode 100644 frontend/components/GraphUtils/ResizableBox.js
 delete mode 100644 frontend/components/GraphUtils/useDevConfig.js

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index f69b7fd..5d24d6f 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -9,54 +9,12 @@ export function Command(props) {
   );
 }
 
-function extractLoadFromString(str = '') {
-  let list = str.split(',').map(ele => {
-    return ele.trim();
-  });
-  let one_min = list[2].split(':')[1];
-  let five_min = list[3];
-  let fifteen_min = list[4];
-
-  return [
-    {
-      label: 'One Minute Load',
-      data: [
-        {
-          primary: new Date(),
-          secondary: parseFloat(one_min),
-        },
-      ],
-    },
-    {
-      label: 'Five Minute Load',
-      data: [
-        {
-          primary: new Date(),
-          secondary: parseFloat(five_min),
-        },
-      ],
-    },
-    {
-      label: 'Fifteen Minute Load',
-      data: [
-        {
-          primary: new Date(),
-          secondary: parseFloat(fifteen_min),
-        },
-      ],
-    },
-  ];
-}
-
-export function PlainCommand({ command, interval, children, updateData }) {
+export function PlainCommand({ command, interval, children }) {
   const [output, setOutput] = useState('');
   useEffect(() => {
     const callback = () =>
       exec(command)
-        .then(result => {
-          setOutput(result[0]);
-          if (updateData !== undefined) updateData(extractLoadFromString(result[0]));
-        })
+        .then(result => setOutput(result[0]))
         .catch(err => setOutput(err[1]));
     const interval_handle = setInterval(callback, interval);
     callback();
diff --git a/frontend/components/GraphUtils/ResizableBox.js b/frontend/components/GraphUtils/ResizableBox.js
deleted file mode 100644
index 14aa707..0000000
--- a/frontend/components/GraphUtils/ResizableBox.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { ResizableBox as ReactResizableBox } from 'react-resizable';
-
-import 'react-resizable/css/styles.css';
-
-export default function ResizableBox({
-  children,
-  width = 500,
-  height = 300,
-  resizable = true,
-  style = {},
-  className,
-}) {
-  return (
-    <div>
-      {resizable ? (
-        <ReactResizableBox width={width} height={height}>
-          <div
-            style={{
-              ...style,
-              width: '100%',
-              height: '100%',
-            }}
-            className={className}
-          >
-            {children}
-          </div>
-        </ReactResizableBox>
-      ) : (
-        <div
-          style={{
-            width: `${width}px`,
-            height: `${height}px`,
-            ...style,
-          }}
-          className={className}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/components/GraphUtils/useDevConfig.js b/frontend/components/GraphUtils/useDevConfig.js
deleted file mode 100644
index b652dda..0000000
--- a/frontend/components/GraphUtils/useDevConfig.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-const options = {
-  elementType: ['line', 'area', 'bar', 'bubble'],
-  primaryAxisType: ['linear', 'time', 'log', 'ordinal'],
-  secondaryAxisType: ['linear', 'time', 'log', 'ordinal'],
-  primaryAxisPosition: ['top', 'left', 'right', 'bottom'],
-  secondaryAxisPosition: ['top', 'left', 'right', 'bottom'],
-  secondaryAxisStack: [true, false],
-  primaryAxisShow: [true, false],
-  secondaryAxisShow: [true, false],
-  grouping: ['single', 'series', 'primary', 'secondary'],
-  tooltipAnchor: [
-    'closest',
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'center',
-    'gridTop',
-    'gridBottom',
-    'gridLeft',
-    'gridRight',
-    'gridCenter',
-    'pointer',
-  ],
-  tooltipAlign: [
-    'auto',
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'topLeft',
-    'topRight',
-    'bottomLeft',
-    'bottomRight',
-    'center',
-  ],
-  snapCursor: [true, false],
-};
-
-const optionKeys = Object.keys(options);
-
-export default function useChartConfig({
-  series,
-  useR,
-  show = [],
-  count = 1,
-  resizable = true,
-  canRandomize = false,
-  dataType = 'time',
-  elementType = 'line',
-  primaryAxisType = 'time',
-  secondaryAxisType = 'linear',
-  primaryAxisPosition = 'bottom',
-  secondaryAxisPosition = 'left',
-  primaryAxisStack = false,
-  secondaryAxisStack = true,
-  primaryAxisShow = true,
-  secondaryAxisShow = true,
-  tooltipAnchor = 'closest',
-  tooltipAlign = 'auto',
-  grouping = 'primary',
-  snapCursor = true,
-  datums = 10,
-}) {
-  const [state, setState] = useState({
-    count,
-    resizable,
-    canRandomize,
-    dataType,
-    elementType,
-    primaryAxisType,
-    secondaryAxisType,
-    primaryAxisPosition,
-    secondaryAxisPosition,
-    primaryAxisStack,
-    secondaryAxisStack,
-    primaryAxisShow,
-    secondaryAxisShow,
-    tooltipAnchor,
-    tooltipAlign,
-    grouping,
-    snapCursor,
-    datums,
-    data: [
-      {
-        label: 'One Minute Load',
-        data: [],
-      },
-      {
-        label: 'Five Minute Load',
-        data: [],
-      },
-      {
-        label: 'Fifteen Minute Load',
-        data: [],
-      },
-    ],
-  });
-
-  useEffect(() => {
-    setState(old => ({
-      ...old,
-      data: state.data,
-    }));
-  }, [count, dataType, datums, series, useR]);
-
-  const updateData = new_data => {
-    if (new_data === undefined) return null;
-
-    const temp_data = state;
-    temp_data.data = temp_data.data.map((ele, i) => {
-      return {
-        label: new_data[i].label,
-        data: ele.data.concat(new_data[i].data),
-      };
-    });
-
-    setState(old => ({
-      ...old,
-      data: temp_data.data,
-    }));
-  };
-
-  const Options = optionKeys
-    .filter(option => show.indexOf(option) > -1)
-    .map(option => (
-      <div key={option}>
-        {option}: &nbsp;
-        <select
-          value={state[option]}
-          onChange={({ target: { value } }) =>
-            setState(old => ({
-              ...old,
-              [option]: typeof options[option][0] === 'boolean' ? value === 'true' : value,
-            }))
-          }
-        >
-          {options[option].map(d => (
-            <option value={d} key={d.toString()}>
-              {d.toString()}
-            </option>
-          ))}
-        </select>
-        <br />
-      </div>
-    ));
-
-  return {
-    ...state,
-    updateData,
-    Options,
-  };
-}
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index f30e5bd..a673be7 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -1,64 +1,124 @@
-import React from 'react';
-import { Chart } from 'react-charts';
+import { Box } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
+import Chart from 'react-apexcharts';
 
-import useDemoConfig from './GraphUtils/useDevConfig';
-import ResizableBox from './GraphUtils/ResizableBox';
-import { Command } from './CommandWidgets';
-import { Box, Typography } from '@material-ui/core';
+const command = 'uptime';
+const interval = 1000;
 
 export default function LoadGraph() {
-  const datasets = {
-    labels: [],
-    data: [{}],
-  };
-
-  const { data, updateData } = useDemoConfig({
-    series: 3,
+  const [state, setstate] = useState({
+    data: [[], [], []],
+    output: '',
   });
 
-  const series = React.useMemo(
-    () => ({
-      showPoints: true,
-    }),
-    []
-  );
+  function extractLoadFromString(str = '') {
+    let list = str.split(',').map(ele => {
+      return ele.trim();
+    });
 
-  const axes = React.useMemo(
-    () => [
-      {
-        primary: true,
-        type: 'time',
-        position: 'bottom',
-      },
-      { type: 'linear', position: 'left' },
-    ],
-    []
-  );
+    let one_min = parseFloat(list[2].split(':')[1]);
+    let five_min = parseFloat(list[3]);
+    let fifteen_min = parseFloat(list[4]);
+
+    return {
+      x_value: new Date().getTime(),
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  function updateData(new_data) {
+    setstate(prevstate => ({
+      data: [
+        [...prevstate.data[0], new_data.y_value[0]],
+        [...prevstate.data[1], new_data.y_value[1]],
+        [...prevstate.data[2], new_data.y_value[2]],
+      ],
+      output: new_data.original_str,
+    }));
+  }
+
+  useEffect(() => {
+    const callback = () =>
+      exec(command)
+        .then(result => {
+          updateData(extractLoadFromString(result[0]));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, []);
 
   return (
     <>
       <Box
         style={{
-          padding: '0.5rem',
+          padding: '1.5rem',
         }}
       >
-        <br />
-        <Typography variant="overline" display="block" gutterBottom>
-          Camera Load averages
-        </Typography>
-        <br />
-
-        <ResizableBox
-          style={{
-            background: 'rgba(0, 27, 45, 0.9)',
-            borderRadius: '5px',
-            padding: '0.1rem',
-          }}
-        >
-          <Chart data={data} series={series} axes={axes} tooltip dark />
-        </ResizableBox>
+        <LoadChart data={state.data} title="Load averages" />
       </Box>
-      <Command command="uptime" interval={2000} updateData={updateData} />
+
+      <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
+        $ {command} {`\n`} {state.output}
+      </pre>
     </>
   );
 }
+
+function LoadChart(props) {
+  const options = {
+    chart: {
+      height: 400,
+      type: 'line',
+      zoom: {
+        enabled: true,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    title: {
+      text: props.title,
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+    colors: ['#2E93fA', '#66DA26', '#546E7A'],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        inverseColors: true,
+        gradientToColors: ['#ff0fd7', '#b7ff00', '#0841ff'],
+        opacityFrom: 1,
+        opacityTo: 1,
+        type: 'vertical',
+        stops: [0, 30],
+      },
+    },
+  };
+
+  const series = [
+    {
+      name: '1 minute',
+      data: props.data[0],
+    },
+    {
+      name: '5 minute',
+      data: props.data[1],
+    },
+    {
+      name: '15 minute',
+      data: props.data[2],
+    },
+  ];
+
+  return (
+    <div id="chart">
+      <Chart options={options} series={series} type="line" height={400} />
+    </div>
+  );
+}
diff --git a/package.json b/package.json
index 9c44710..a88af71 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,9 @@
   ],
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.57",
+    "apexcharts": "^3.26.0",
     "express": "~4.17.1",
-    "react-charts": "^2.0.0-beta.7",
+    "react-apexcharts": "^1.3.7",
     "react-resizable": "^1.11.1",
     "socketio": "^1.0.0"
   },
@@ -32,7 +33,7 @@
     "morgan": "~1.9.1",
     "parcel": "^1.12.4",
     "prettier": "^1.19.1",
-    "react": "^17.0.0",
+    "react": "^16.6.3",
     "react-dom": "^17.0.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
diff --git a/yarn.lock b/yarn.lock
index 5418dfd..30cad0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -849,11 +849,6 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
-"@reach/observe-rect@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
-  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
-
 "@reduxjs/toolkit@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.1.0.tgz#16ee944782e8f716a9a062f55bea3e2435f3d490"
@@ -1040,6 +1035,18 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+apexcharts@^3.26.0:
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.26.0.tgz#a78abc108b2e1b3086a738f0ec7c98e292f4a14b"
+  integrity sha512-zdYHs3k3tgmCn1BpYLj7rhGEndBYF33Pq1+g0ora37xAr+3act5CJrpdXM2jx2boVUyXgavoSp6sa8WpK7RkSA==
+  dependencies:
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2035,77 +2042,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
   integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
 
-d3-array@^2.3.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.0.tgz#68a74d153e52d6bf4608d9f6388cca48b42a4c3f"
-  integrity sha512-T6H/qNldyD/1OlRkJbonb3u3MPhNwju8OPxYv0YSjDb/B2RUeeBEHzIpNrYiinwpmz8+am+puMrpcrDWgY9wRg==
-  dependencies:
-    internmap "^1.0.0"
-
-"d3-color@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
-  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
-
-d3-delaunay@^5.2.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
-  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
-  dependencies:
-    delaunator "4"
-
-"d3-format@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
-  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
-
-"d3-interpolate@1.2.0 - 2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
-  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
-  dependencies:
-    d3-color "1 - 2"
-
-d3-path@1:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
-  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
-
-d3-scale@^3.2.1:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.2.3.tgz#be380f57f1f61d4ff2e6cbb65a40593a51649cfd"
-  integrity sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==
-  dependencies:
-    d3-array "^2.3.0"
-    d3-format "1 - 2"
-    d3-interpolate "1.2.0 - 2"
-    d3-time "1 - 2"
-    d3-time-format "2 - 3"
-
-d3-shape@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
-  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
-  dependencies:
-    d3-path "1"
-
-"d3-time-format@2 - 3":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
-  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
-  dependencies:
-    d3-time "1 - 2"
-
-"d3-time@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab"
-  integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
-
-d3-voronoi@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
-  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
-
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2216,11 +2152,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -3177,11 +3108,6 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-internmap@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
-  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
-
 invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4806,7 +4732,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4929,16 +4855,12 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-charts@^2.0.0-beta.7:
-  version "2.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/react-charts/-/react-charts-2.0.0-beta.7.tgz#cc989d78f976dc70796af3af816874274f0c75be"
-  integrity sha512-iUspg9rnx7kD0H/wsK67HNUioOgKgJ8WRXr/Tk3EGP2qcFb9Vo7pjDk4oz1jH12TC+mqL+HFxNYraMkhWd6CUw==
+react-apexcharts@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-apexcharts/-/react-apexcharts-1.3.7.tgz#42c8785e260535a4f8db1aadbe7b66552770944d"
+  integrity sha512-2OFhEHd70/WHN0kmrJtVx37UfaL71ZogVkwezmDqwQWgwhK6upuhlnEEX7tEq4xvjA+RFDn6hiUTNIuC/Q7Zqw==
   dependencies:
-    "@reach/observe-rect" "^1.1.0"
-    d3-delaunay "^5.2.1"
-    d3-scale "^3.2.1"
-    d3-shape "^1.3.7"
-    d3-voronoi "^1.1.2"
+    prop-types "^15.5.7"
 
 react-dom@^17.0.0:
   version "17.0.1"
@@ -5026,13 +4948,14 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.0:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@^16.6.3:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
+    prop-types "^15.6.2"
 
 readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.6"
@@ -5803,6 +5726,61 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
+  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
+  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
 svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"

From 59d1f6e6d715741b6992eaefae9432f31cae87c2 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 24 Mar 2021 01:24:27 +0530
Subject: [PATCH 08/33] graph update

---
 frontend/components/LoadGraph.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index a673be7..557af1a 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -4,6 +4,8 @@ import Chart from 'react-apexcharts';
 
 const command = 'uptime';
 const interval = 1000;
+const graph_height = 400;
+const graph_title = 'Load average';
 
 export default function LoadGraph() {
   const [state, setstate] = useState({
@@ -21,7 +23,6 @@ export default function LoadGraph() {
     let fifteen_min = parseFloat(list[4]);
 
     return {
-      x_value: new Date().getTime(),
       y_value: [one_min, five_min, fifteen_min],
       original_str: str,
     };
@@ -57,7 +58,7 @@ export default function LoadGraph() {
           padding: '1.5rem',
         }}
       >
-        <LoadChart data={state.data} title="Load averages" />
+        <LoadChart data={state.data} title={graph_title} />
       </Box>
 
       <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
@@ -70,7 +71,7 @@ export default function LoadGraph() {
 function LoadChart(props) {
   const options = {
     chart: {
-      height: 400,
+      height: graph_height,
       type: 'line',
       zoom: {
         enabled: true,
@@ -118,7 +119,7 @@ function LoadChart(props) {
 
   return (
     <div id="chart">
-      <Chart options={options} series={series} type="line" height={400} />
+      <Chart options={options} series={series} type="line" height={graph_height} />
     </div>
   );
 }

From 9ad8da43b9b015351641fd97b244f5fe01b92b08 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 24 Mar 2021 02:03:42 +0530
Subject: [PATCH 09/33] Added bars icon

---
 frontend/routes/Wifi.jsx | 63 ++++++++++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 6048b54..e6db659 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -16,7 +16,7 @@ import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Box, Chip } from '@material-ui/core';
-
+import {SignalWifi4Bar, SignalWifi0Bar, SignalWifi1Bar, SignalWifi2Bar, SignalWifi3Bar} from '@material-ui/icons';
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
 
@@ -57,6 +57,7 @@ export class Component extends React.Component {
 const in_use = 'IN-USE';
 const initial_direction = 'asc';
 const security = 'SECURITY';
+const bars = 'BARS';
 const active_color = orange[50];
 const headCells = {
   [in_use]: { numeric: false, disablePadding: true, label: 'Connected' },
@@ -212,6 +213,47 @@ function extractWPA(wpas) {
   return list;
 }
 
+function Bar2IconMapper(bars){
+  switch (bars) {
+    case '▂▄▆█':
+      return <SignalWifi4Bar />
+    case '▂▄▆_':
+      return <SignalWifi3Bar />
+    case '▂▄__':
+      return <SignalWifi2Bar />
+    case '▂___':
+      return <SignalWifi1Bar />
+    case '____':
+      return <SignalWifi0Bar />
+    default:
+      break;
+  }
+}
+
+function renderTableCell(key, row, classes){
+  if(key == in_use && row[key].length > 0){
+    return       <Skeleton
+    variant="circle"
+    width={10}
+    height={10}
+    style={{
+      background: green.A200,
+      alignContent: 'center',
+      padding: 0,
+    }}
+  />
+  }
+  else if(key == security){
+    return <div className={classes.chips}>{extractWPA(row[security])}</div>
+  }
+  else if(key == bars){
+    return Bar2IconMapper(row[key]);
+  }
+  else{
+    return row[key]
+  }
+}
+
 function SortableTable(props) {
   const classes = useStyles();
   const [order, setOrder] = useState(initial_direction);
@@ -250,24 +292,7 @@ function SortableTable(props) {
                     {Object.keys(headCells).map(function(key) {
                       return (
                         <TableCell key={key} align="center">
-                          {key == in_use ? (
-                            row[key].length > 0 ? (
-                              <Skeleton
-                                variant="circle"
-                                width={10}
-                                height={10}
-                                style={{
-                                  background: green.A200,
-                                  alignContent: 'center',
-                                  padding: 0,
-                                }}
-                              />
-                            ) : null
-                          ) : key == security ? (
-                            <div className={classes.chips}>{extractWPA(row[security])}</div>
-                          ) : (
-                            row[key]
-                          )}
+                          {renderTableCell(key, row, classes)}
                         </TableCell>
                       );
                     })}

From 8a7d92b518698b67bab265dc9b009f1ad946065c Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 24 Mar 2021 02:05:40 +0530
Subject: [PATCH 10/33] formatted code

---
 frontend/routes/Wifi.jsx | 59 ++++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index e6db659..306cc0c 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -16,7 +16,13 @@ import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Box, Chip } from '@material-ui/core';
-import {SignalWifi4Bar, SignalWifi0Bar, SignalWifi1Bar, SignalWifi2Bar, SignalWifi3Bar} from '@material-ui/icons';
+import {
+  SignalWifi4Bar,
+  SignalWifi0Bar,
+  SignalWifi1Bar,
+  SignalWifi2Bar,
+  SignalWifi3Bar,
+} from '@material-ui/icons';
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
 
@@ -213,44 +219,43 @@ function extractWPA(wpas) {
   return list;
 }
 
-function Bar2IconMapper(bars){
+function Bar2IconMapper(bars) {
   switch (bars) {
     case '▂▄▆█':
-      return <SignalWifi4Bar />
+      return <SignalWifi4Bar />;
     case '▂▄▆_':
-      return <SignalWifi3Bar />
+      return <SignalWifi3Bar />;
     case '▂▄__':
-      return <SignalWifi2Bar />
+      return <SignalWifi2Bar />;
     case '▂___':
-      return <SignalWifi1Bar />
+      return <SignalWifi1Bar />;
     case '____':
-      return <SignalWifi0Bar />
+      return <SignalWifi0Bar />;
     default:
       break;
   }
 }
 
-function renderTableCell(key, row, classes){
-  if(key == in_use && row[key].length > 0){
-    return       <Skeleton
-    variant="circle"
-    width={10}
-    height={10}
-    style={{
-      background: green.A200,
-      alignContent: 'center',
-      padding: 0,
-    }}
-  />
-  }
-  else if(key == security){
-    return <div className={classes.chips}>{extractWPA(row[security])}</div>
-  }
-  else if(key == bars){
+function renderTableCell(key, row, classes) {
+  if (key == in_use && row[key].length > 0) {
+    return (
+      <Skeleton
+        variant="circle"
+        width={10}
+        height={10}
+        style={{
+          background: green.A200,
+          alignContent: 'center',
+          padding: 0,
+        }}
+      />
+    );
+  } else if (key == security) {
+    return <div className={classes.chips}>{extractWPA(row[security])}</div>;
+  } else if (key == bars) {
     return Bar2IconMapper(row[key]);
-  }
-  else{
-    return row[key]
+  } else {
+    return row[key];
   }
 }
 

From 317f1e681af366b0929d0a0d94d395d1db865920 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 25 Mar 2021 19:48:43 +0530
Subject: [PATCH 11/33] Refactored command and graph widget

---
 frontend/components/CommandWidgets.jsx  |  23 ++---
 frontend/components/LoadChartWidget.jsx |  67 +++++++++++++
 frontend/components/LoadGraph.jsx       | 125 ------------------------
 frontend/components/RunCommand.jsx      |  77 +++++++++++++++
 frontend/routes/SystemInformation.jsx   |  17 ++--
 5 files changed, 159 insertions(+), 150 deletions(-)
 create mode 100644 frontend/components/LoadChartWidget.jsx
 delete mode 100644 frontend/components/LoadGraph.jsx
 create mode 100644 frontend/components/RunCommand.jsx

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 5d24d6f..404e39b 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -1,26 +1,17 @@
-import { default as React, useEffect, useState } from 'react';
-import { exec } from '../util/exec';
+import React from 'react';
 
-export function Command(props) {
+export function Command({ command, output, children }) {
   return (
     <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
-      $ {props.command} {`\n`} <PlainCommand {...props} />
+      $ {command} {`\n`} <PlainCommand children={children} output={output} />
     </pre>
   );
 }
 
-export function PlainCommand({ command, interval, children }) {
-  const [output, setOutput] = useState('');
-  useEffect(() => {
-    const callback = () =>
-      exec(command)
-        .then(result => setOutput(result[0]))
-        .catch(err => setOutput(err[1]));
-    const interval_handle = setInterval(callback, interval);
-    callback();
-    return () => clearInterval(interval_handle);
-  }, [command]);
-
+export function PlainCommand({ children, output }) {
+  if(!output)
+    return null;
+    
   if (children === undefined) {
     return <>{output}</>;
   } else if (typeof children === 'function') {
diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
new file mode 100644
index 0000000..275394c
--- /dev/null
+++ b/frontend/components/LoadChartWidget.jsx
@@ -0,0 +1,67 @@
+import Chart from 'react-apexcharts';
+import React from 'react';
+
+const graph_height = 400;
+
+export default function LoadChartWidget(props) {
+  const options = {
+    chart: {
+      height: graph_height,
+      type: 'line',
+      zoom: {
+        enabled: true,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    title: {
+      text: props.title,
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+    colors: ['#2E93fA', '#66DA26', '#546E7A'],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        inverseColors: true,
+        gradientToColors: ['#ff0fd7', '#b7ff00', '#0841ff'],
+        opacityFrom: 1,
+        opacityTo: 1,
+        type: 'vertical',
+        stops: [0, 30],
+      },
+    },
+    xaxis: {
+      type: 'time',
+      labels: {
+        show: false,
+      },
+      categories : props.labels
+    },
+  };
+
+  const series = [
+    {
+      name: '1 minute',
+      data: props.data[0],
+    },
+    {
+      name: '5 minute',
+      data: props.data[1],
+    },
+    {
+      name: '15 minute',
+      data: props.data[2],
+    },
+  ];
+
+  return (
+    <div id="chart">
+      <Chart options={options} series={series} type="line" height={graph_height} />
+    </div>
+  );
+}
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
deleted file mode 100644
index 557af1a..0000000
--- a/frontend/components/LoadGraph.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Box } from '@material-ui/core';
-import React, { useEffect, useState } from 'react';
-import Chart from 'react-apexcharts';
-
-const command = 'uptime';
-const interval = 1000;
-const graph_height = 400;
-const graph_title = 'Load average';
-
-export default function LoadGraph() {
-  const [state, setstate] = useState({
-    data: [[], [], []],
-    output: '',
-  });
-
-  function extractLoadFromString(str = '') {
-    let list = str.split(',').map(ele => {
-      return ele.trim();
-    });
-
-    let one_min = parseFloat(list[2].split(':')[1]);
-    let five_min = parseFloat(list[3]);
-    let fifteen_min = parseFloat(list[4]);
-
-    return {
-      y_value: [one_min, five_min, fifteen_min],
-      original_str: str,
-    };
-  }
-
-  function updateData(new_data) {
-    setstate(prevstate => ({
-      data: [
-        [...prevstate.data[0], new_data.y_value[0]],
-        [...prevstate.data[1], new_data.y_value[1]],
-        [...prevstate.data[2], new_data.y_value[2]],
-      ],
-      output: new_data.original_str,
-    }));
-  }
-
-  useEffect(() => {
-    const callback = () =>
-      exec(command)
-        .then(result => {
-          updateData(extractLoadFromString(result[0]));
-        })
-        .catch(err => console.log(err[1]));
-    const interval_handle = setInterval(callback, interval);
-    callback();
-    return () => clearInterval(interval_handle);
-  }, []);
-
-  return (
-    <>
-      <Box
-        style={{
-          padding: '1.5rem',
-        }}
-      >
-        <LoadChart data={state.data} title={graph_title} />
-      </Box>
-
-      <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
-        $ {command} {`\n`} {state.output}
-      </pre>
-    </>
-  );
-}
-
-function LoadChart(props) {
-  const options = {
-    chart: {
-      height: graph_height,
-      type: 'line',
-      zoom: {
-        enabled: true,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    title: {
-      text: props.title,
-    },
-    stroke: {
-      width: 2,
-      curve: 'smooth',
-    },
-    colors: ['#2E93fA', '#66DA26', '#546E7A'],
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shadeIntensity: 1,
-        inverseColors: true,
-        gradientToColors: ['#ff0fd7', '#b7ff00', '#0841ff'],
-        opacityFrom: 1,
-        opacityTo: 1,
-        type: 'vertical',
-        stops: [0, 30],
-      },
-    },
-  };
-
-  const series = [
-    {
-      name: '1 minute',
-      data: props.data[0],
-    },
-    {
-      name: '5 minute',
-      data: props.data[1],
-    },
-    {
-      name: '15 minute',
-      data: props.data[2],
-    },
-  ];
-
-  return (
-    <div id="chart">
-      <Chart options={options} series={series} type="line" height={graph_height} />
-    </div>
-  );
-}
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
new file mode 100644
index 0000000..7c933dc
--- /dev/null
+++ b/frontend/components/RunCommand.jsx
@@ -0,0 +1,77 @@
+import { Box } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
+import { Command } from './CommandWidgets';
+import LoadChartWidget from './LoadChartWidget';
+
+const uptime_cmd = 'uptime';
+
+const graph_title = 'Load average';
+
+export default function RunCommand(props) {
+  const [state, setstate] = useState({
+    labels: [],
+    data: [[], [], []],
+    output: '',
+  });
+
+  function extractLoadFromString(str = '') {
+    let list = str.split(',').map(ele => {
+      return ele.trim();
+    });
+
+    let one_min = parseFloat(list[2].split(':')[1]);
+    let five_min = parseFloat(list[3]);
+    let fifteen_min = parseFloat(list[4]);
+
+    return {
+      x_value: new Date(),
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  function updateData(new_data) {
+    setstate(prevstate => ({
+      labels: [...prevstate.labels, new_data.x_value],
+      data: [
+        [...prevstate.data[0], new_data.y_value[0]],
+        [...prevstate.data[1], new_data.y_value[1]],
+        [...prevstate.data[2], new_data.y_value[2]],
+      ],
+      output: new_data.original_str,
+    }));
+  }
+
+  useEffect(() => {
+    const callback = () =>
+      exec(props.command)
+        .then(result => {
+          if (props.showGraph) updateData(extractLoadFromString(result[0]));
+          else
+            setstate(prevState => ({
+              ...prevState,
+              output: result[0],
+            }));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, props.interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, [props.command]);
+
+  return (
+    <div>
+      {(props.showGraph !== undefined && props.command === uptime_cmd)? (
+        <Box
+          style={{
+            padding: '1.5rem',
+          }}
+        >
+          <LoadChartWidget labels={state.labels} data={state.data} title={graph_title} />
+        </Box>
+      ) : null}
+
+      <Command command={props.command} output={state.output} children={props.children} />
+    </div>
+  );
+}
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index a132ab0..c36ae76 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { Command } from '../components/CommandWidgets';
-import LoadGraph from '../components/LoadGraph';
+import RunCommand from '../components/RunCommand';
 
 export const title = 'System Information';
 export const route = '/system_information';
 export const explanation = `Get an overview of whats going on in the linux side of your camera. 
   Ip address, system load, etc can be found here`;
 
-export function Component(props) {
+export function Component() {
   return (
     <div>
-      <LoadGraph />
-      <Command command="date" interval={1000} />
-      <Command command="free -h" interval={1000} />
-      <Command command="ip a" interval={1000} />
-      <Command command="uname -a" interval={10000} />
-      <Command command="ps -aef --forest" interval={10000} />
+      <RunCommand command="uptime" interval={1000} showGraph={true} />
+      <RunCommand command="date" interval={1000} />
+      <RunCommand command="free -h" interval={1000} />
+      <RunCommand command="ip a" interval={1000} />
+      <RunCommand command="uname -a" interval={10000} />
+      <RunCommand command="ps -aef --forest" interval={10000} />
     </div>
   );
 }

From 5b94db9c461af949e417470d2b0662bb61eb12d5 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 25 Mar 2021 22:04:08 +0530
Subject: [PATCH 12/33] Fixed graph reset on re-render

---
 frontend/components/LoadChartWidget.jsx | 51 +++++++++++++++++--------
 frontend/components/RunCommand.jsx      |  7 ++--
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
index 275394c..f827ee0 100644
--- a/frontend/components/LoadChartWidget.jsx
+++ b/frontend/components/LoadChartWidget.jsx
@@ -1,5 +1,6 @@
 import Chart from 'react-apexcharts';
-import React from 'react';
+import React , { useEffect } from 'react';
+import ApexCharts from "apexcharts";
 
 const graph_height = 400;
 
@@ -11,6 +12,7 @@ export default function LoadChartWidget(props) {
       zoom: {
         enabled: true,
       },
+      id:'load_chart'
     },
     dataLabels: {
       enabled: false,
@@ -35,33 +37,50 @@ export default function LoadChartWidget(props) {
         stops: [0, 30],
       },
     },
-    xaxis: {
-      type: 'time',
-      labels: {
-        show: false,
-      },
-      categories : props.labels
-    },
+
   };
 
   const series = [
     {
-      name: '1 minute',
-      data: props.data[0],
+      name : '1 minute',
+      data : []
     },
     {
-      name: '5 minute',
-      data: props.data[1],
+      name : '5 minute',
+      data : []
     },
     {
-      name: '15 minute',
-      data: props.data[2],
-    },
+      name : '15 mintue',
+      data : []
+    }
   ];
 
+  useEffect(() => {
+    ApexCharts.exec('load_chart', 'updateOptions', {
+      xaxis: {
+        labels: {
+          show: false
+        }
+      },
+    });
+
+    ApexCharts.exec('load_chart', 'appendData', [
+      {
+        data: props.data[0]
+      },
+      {
+        data: props.data[1]
+      },
+      {
+        data: props.data[2]
+      },
+
+  ]);
+  })
+
   return (
     <div id="chart">
       <Chart options={options} series={series} type="line" height={graph_height} />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 7c933dc..64d4e34 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -31,12 +31,13 @@ export default function RunCommand(props) {
   }
 
   function updateData(new_data) {
+    
     setstate(prevstate => ({
       labels: [...prevstate.labels, new_data.x_value],
       data: [
-        [...prevstate.data[0], new_data.y_value[0]],
-        [...prevstate.data[1], new_data.y_value[1]],
-        [...prevstate.data[2], new_data.y_value[2]],
+        [new_data.y_value[0]],
+        [new_data.y_value[1]],
+        [new_data.y_value[2]],
       ],
       output: new_data.original_str,
     }));

From f8fe2be2b09d42c2b55fd5c6a0776c9ecb1c551a Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 25 Mar 2021 22:06:57 +0530
Subject: [PATCH 13/33] Formatted Code

---
 frontend/components/CommandWidgets.jsx  |  5 ++--
 frontend/components/LoadChartWidget.jsx | 38 ++++++++++++-------------
 frontend/components/RunCommand.jsx      | 17 ++++-------
 3 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 404e39b..41f4478 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -9,9 +9,8 @@ export function Command({ command, output, children }) {
 }
 
 export function PlainCommand({ children, output }) {
-  if(!output)
-    return null;
-    
+  if (!output) return null;
+
   if (children === undefined) {
     return <>{output}</>;
   } else if (typeof children === 'function') {
diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
index f827ee0..39c9884 100644
--- a/frontend/components/LoadChartWidget.jsx
+++ b/frontend/components/LoadChartWidget.jsx
@@ -1,6 +1,6 @@
 import Chart from 'react-apexcharts';
-import React , { useEffect } from 'react';
-import ApexCharts from "apexcharts";
+import React, { useEffect } from 'react';
+import ApexCharts from 'apexcharts';
 
 const graph_height = 400;
 
@@ -12,7 +12,7 @@ export default function LoadChartWidget(props) {
       zoom: {
         enabled: true,
       },
-      id:'load_chart'
+      id: 'load_chart',
     },
     dataLabels: {
       enabled: false,
@@ -37,50 +37,48 @@ export default function LoadChartWidget(props) {
         stops: [0, 30],
       },
     },
-
   };
 
   const series = [
     {
-      name : '1 minute',
-      data : []
+      name: '1 minute',
+      data: [],
     },
     {
-      name : '5 minute',
-      data : []
+      name: '5 minute',
+      data: [],
     },
     {
-      name : '15 mintue',
-      data : []
-    }
+      name: '15 mintue',
+      data: [],
+    },
   ];
 
   useEffect(() => {
     ApexCharts.exec('load_chart', 'updateOptions', {
       xaxis: {
         labels: {
-          show: false
-        }
+          show: false,
+        },
       },
     });
 
     ApexCharts.exec('load_chart', 'appendData', [
       {
-        data: props.data[0]
+        data: props.data[0],
       },
       {
-        data: props.data[1]
+        data: props.data[1],
       },
       {
-        data: props.data[2]
+        data: props.data[2],
       },
-
-  ]);
-  })
+    ]);
+  });
 
   return (
     <div id="chart">
       <Chart options={options} series={series} type="line" height={graph_height} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 64d4e34..1d2c8a4 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -24,23 +24,16 @@ export default function RunCommand(props) {
     let fifteen_min = parseFloat(list[4]);
 
     return {
-      x_value: new Date(),
       y_value: [one_min, five_min, fifteen_min],
       original_str: str,
     };
   }
 
   function updateData(new_data) {
-    
-    setstate(prevstate => ({
-      labels: [...prevstate.labels, new_data.x_value],
-      data: [
-        [new_data.y_value[0]],
-        [new_data.y_value[1]],
-        [new_data.y_value[2]],
-      ],
+    setstate({
+      data: [[new_data.y_value[0]], [new_data.y_value[1]], [new_data.y_value[2]]],
       output: new_data.original_str,
-    }));
+    });
   }
 
   useEffect(() => {
@@ -62,13 +55,13 @@ export default function RunCommand(props) {
 
   return (
     <div>
-      {(props.showGraph !== undefined && props.command === uptime_cmd)? (
+      {props.showGraph !== undefined && props.command === uptime_cmd ? (
         <Box
           style={{
             padding: '1.5rem',
           }}
         >
-          <LoadChartWidget labels={state.labels} data={state.data} title={graph_title} />
+          <LoadChartWidget data={state.data} title={graph_title} />
         </Box>
       ) : null}
 

From 463328d1f1c4995b733a6184e106cef438a0b085 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sat, 27 Mar 2021 02:34:12 +0530
Subject: [PATCH 14/33] Removed ticks and added loading text for no data

---
 frontend/components/LoadChartWidget.jsx | 27 ++++++++++++++++++-------
 frontend/components/RunCommand.jsx      | 18 ++++++++---------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
index 39c9884..82eda79 100644
--- a/frontend/components/LoadChartWidget.jsx
+++ b/frontend/components/LoadChartWidget.jsx
@@ -2,18 +2,25 @@ import Chart from 'react-apexcharts';
 import React, { useEffect } from 'react';
 import ApexCharts from 'apexcharts';
 
-const graph_height = 400;
+const graphHeight = 400;
 
 export default function LoadChartWidget(props) {
   const options = {
+    redrawOnWindowResize: false,
+    redrawOnParentResize: false,
     chart: {
-      height: graph_height,
+      height: graphHeight,
       type: 'line',
       zoom: {
         enabled: true,
       },
       id: 'load_chart',
     },
+    noData : {
+      text : 'Loading...',
+      align : 'center',
+      verticalAlign : 'middle'
+    },
     dataLabels: {
       enabled: false,
     },
@@ -37,6 +44,8 @@ export default function LoadChartWidget(props) {
         stops: [0, 30],
       },
     },
+
+
   };
 
   const series = [
@@ -49,18 +58,24 @@ export default function LoadChartWidget(props) {
       data: [],
     },
     {
-      name: '15 mintue',
+      name: '15 minute',
       data: [],
     },
   ];
 
   useEffect(() => {
+
     ApexCharts.exec('load_chart', 'updateOptions', {
       xaxis: {
         labels: {
-          show: false,
+          show: false
+        },
+        axisTicks : {
+          show : false
         },
+        categories : props.labels
       },
+
     });
 
     ApexCharts.exec('load_chart', 'appendData', [
@@ -77,8 +92,6 @@ export default function LoadChartWidget(props) {
   });
 
   return (
-    <div id="chart">
-      <Chart options={options} series={series} type="line" height={graph_height} />
-    </div>
+      <Chart options={options} series={series} type="line" height={graphHeight} />
   );
 }
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 1d2c8a4..3b889aa 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -4,7 +4,6 @@ import { Command } from './CommandWidgets';
 import LoadChartWidget from './LoadChartWidget';
 
 const uptime_cmd = 'uptime';
-
 const graph_title = 'Load average';
 
 export default function RunCommand(props) {
@@ -15,25 +14,26 @@ export default function RunCommand(props) {
   });
 
   function extractLoadFromString(str = '') {
-    let list = str.split(',').map(ele => {
-      return ele.trim();
-    });
-
+    let list = str.split(',');
+    let time_stamp = list[0].trim();
     let one_min = parseFloat(list[2].split(':')[1]);
     let five_min = parseFloat(list[3]);
     let fifteen_min = parseFloat(list[4]);
 
     return {
-      y_value: [one_min, five_min, fifteen_min],
-      original_str: str,
+      x_value : time_stamp,
+      y_value : [one_min, five_min, fifteen_min],
+      original_str : str,
     };
   }
 
   function updateData(new_data) {
-    setstate({
+    // console.log(state.labels);
+    // console.log(new_data.x_value);
+    setstate(prevState => ({
       data: [[new_data.y_value[0]], [new_data.y_value[1]], [new_data.y_value[2]]],
       output: new_data.original_str,
-    });
+    }));
   }
 
   useEffect(() => {

From 7512d10c8b6d0581d9bbed82023a064586497e7b Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sat, 27 Mar 2021 02:39:00 +0530
Subject: [PATCH 15/33] Changed case for setstate

---
 frontend/components/LoadChartWidget.jsx | 24 +++++++++---------------
 frontend/components/RunCommand.jsx      | 16 +++++++---------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
index 82eda79..e87c39d 100644
--- a/frontend/components/LoadChartWidget.jsx
+++ b/frontend/components/LoadChartWidget.jsx
@@ -16,10 +16,10 @@ export default function LoadChartWidget(props) {
       },
       id: 'load_chart',
     },
-    noData : {
-      text : 'Loading...',
-      align : 'center',
-      verticalAlign : 'middle'
+    noData: {
+      text: 'Loading...',
+      align: 'center',
+      verticalAlign: 'middle',
     },
     dataLabels: {
       enabled: false,
@@ -44,8 +44,6 @@ export default function LoadChartWidget(props) {
         stops: [0, 30],
       },
     },
-
-
   };
 
   const series = [
@@ -64,18 +62,16 @@ export default function LoadChartWidget(props) {
   ];
 
   useEffect(() => {
-
     ApexCharts.exec('load_chart', 'updateOptions', {
       xaxis: {
         labels: {
-          show: false
+          show: false,
         },
-        axisTicks : {
-          show : false
+        axisTicks: {
+          show: false,
         },
-        categories : props.labels
+        categories: props.labels,
       },
-
     });
 
     ApexCharts.exec('load_chart', 'appendData', [
@@ -91,7 +87,5 @@ export default function LoadChartWidget(props) {
     ]);
   });
 
-  return (
-      <Chart options={options} series={series} type="line" height={graphHeight} />
-  );
+  return <Chart options={options} series={series} type="line" height={graphHeight} />;
 }
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 3b889aa..9b30b9f 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -7,7 +7,7 @@ const uptime_cmd = 'uptime';
 const graph_title = 'Load average';
 
 export default function RunCommand(props) {
-  const [state, setstate] = useState({
+  const [state, setState] = useState({
     labels: [],
     data: [[], [], []],
     output: '',
@@ -21,19 +21,17 @@ export default function RunCommand(props) {
     let fifteen_min = parseFloat(list[4]);
 
     return {
-      x_value : time_stamp,
-      y_value : [one_min, five_min, fifteen_min],
-      original_str : str,
+      x_value: time_stamp,
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
     };
   }
 
   function updateData(new_data) {
-    // console.log(state.labels);
-    // console.log(new_data.x_value);
-    setstate(prevState => ({
+    setState({
       data: [[new_data.y_value[0]], [new_data.y_value[1]], [new_data.y_value[2]]],
       output: new_data.original_str,
-    }));
+    });
   }
 
   useEffect(() => {
@@ -42,7 +40,7 @@ export default function RunCommand(props) {
         .then(result => {
           if (props.showGraph) updateData(extractLoadFromString(result[0]));
           else
-            setstate(prevState => ({
+            setState(prevState => ({
               ...prevState,
               output: result[0],
             }));

From 9afde1a3ce85283a1734c6ec359b20b536027eee Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sat, 27 Mar 2021 02:41:34 +0530
Subject: [PATCH 16/33] added showGraph in rebuild list

---
 frontend/components/RunCommand.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 9b30b9f..3161152 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -49,7 +49,7 @@ export default function RunCommand(props) {
     const interval_handle = setInterval(callback, props.interval);
     callback();
     return () => clearInterval(interval_handle);
-  }, [props.command]);
+  }, [props.command, props.showGraph]);
 
   return (
     <div>

From e359728943179d11f65cefd6929ddbf24b3ab80b Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sat, 27 Mar 2021 18:31:40 +0530
Subject: [PATCH 17/33] Added CanvasJs Charts

---
 frontend/components/LoadGraphV2.jsx   | 131 ++++++++++++++++++++++++++
 frontend/components/RunCommand.jsx    |  10 --
 frontend/routes/SystemInformation.jsx |   4 +-
 package.json                          |   1 +
 yarn.lock                             |   5 +
 5 files changed, 140 insertions(+), 11 deletions(-)
 create mode 100644 frontend/components/LoadGraphV2.jsx

diff --git a/frontend/components/LoadGraphV2.jsx b/frontend/components/LoadGraphV2.jsx
new file mode 100644
index 0000000..74fcc5a
--- /dev/null
+++ b/frontend/components/LoadGraphV2.jsx
@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import { CanvasJSChart } from 'canvasjs-react-charts';
+import { Box } from '@material-ui/core';
+
+const command = 'uptime';
+const dataPoints1 = [];
+const dataPoints2 = [];
+const dataPoints3 = [];
+const updateInterval = 1000;
+
+//initial values
+var xValue = 0;
+var yValue1 = 0;
+var yValue2 = 0;
+var yValue3 = 0;
+
+export default function LoadGraphV2(props) {
+  let chart = {};
+  const options = {
+    zoomEnabled: true,
+    theme: 'light1',
+    title: {
+      text: 'Load averages',
+    },
+    axisX: {
+      title: 'Seconds',
+    },
+    axisY: {},
+    toolTip: {
+      shared: true,
+    },
+    legend: {
+      cursor: 'pointer',
+      verticalAlign: 'top',
+      fontSize: 18,
+      fontColor: 'dimGrey',
+      itemclick: toggleDataSeries,
+    },
+    data: [
+      {
+        type: 'spline',
+        xValueFormatString: '#,##0 seconds',
+        showInLegend: true,
+        name: '1 minute',
+        dataPoints: dataPoints1,
+      },
+      {
+        type: 'spline',
+        xValueFormatString: '#,##0 seconds',
+        showInLegend: true,
+        name: '5 minute',
+        dataPoints: dataPoints2,
+      },
+      {
+        type: 'spline',
+        xValueFormatString: '#,##0 seconds',
+        showInLegend: true,
+        name: '15 minute',
+        dataPoints: dataPoints3,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const callback = () =>
+      exec(command)
+        .then(result => {
+          updateChart(extractLoadFromString(result[0]));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, updateInterval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, []);
+
+  function extractLoadFromString(str = '') {
+    let list = str.split(',');
+    let time_stamp = list[0].trim();
+    let one_min = parseFloat(list[2].split(':')[1]);
+    let five_min = parseFloat(list[3]);
+    let fifteen_min = parseFloat(list[4]);
+
+    return {
+      x_value: time_stamp,
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  function toggleDataSeries(e) {
+    if (typeof e.dataSeries.visible === 'undefined' || e.dataSeries.visible) {
+      e.dataSeries.visible = false;
+    } else {
+      e.dataSeries.visible = true;
+    }
+    chart.render();
+  }
+
+  function updateChart(data) {
+    yValue1 = data.y_value[0];
+    yValue2 = data.y_value[1];
+    yValue3 = data.y_value[2];
+    dataPoints1.push({
+      x: xValue,
+      y: yValue1,
+    });
+    dataPoints2.push({
+      x: xValue,
+      y: yValue2,
+    });
+    dataPoints3.push({
+      x: xValue,
+      y: yValue3,
+    });
+    xValue += 1;
+    chart.options.data[0].legendText = ' 1 minute - ' + yValue1;
+    chart.options.data[1].legendText = ' 5 minute - ' + yValue2;
+    chart.options.data[2].legendText = ' 15 minute - ' + yValue3;
+
+    chart.render();
+  }
+  return (
+    <Box
+      style={{
+        padding: '1.5rem',
+      }}
+    >
+      <CanvasJSChart options={options} onRef={ref => (chart = ref)} />
+    </Box>
+  );
+}
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
index 3161152..0cb97b1 100644
--- a/frontend/components/RunCommand.jsx
+++ b/frontend/components/RunCommand.jsx
@@ -53,16 +53,6 @@ export default function RunCommand(props) {
 
   return (
     <div>
-      {props.showGraph !== undefined && props.command === uptime_cmd ? (
-        <Box
-          style={{
-            padding: '1.5rem',
-          }}
-        >
-          <LoadChartWidget data={state.data} title={graph_title} />
-        </Box>
-      ) : null}
-
       <Command command={props.command} output={state.output} children={props.children} />
     </div>
   );
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index c36ae76..8bb01bd 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import LoadGraphV2 from '../components/LoadGraphV2';
 import RunCommand from '../components/RunCommand';
 
 export const title = 'System Information';
@@ -9,7 +10,8 @@ export const explanation = `Get an overview of whats going on in the linux side
 export function Component() {
   return (
     <div>
-      <RunCommand command="uptime" interval={1000} showGraph={true} />
+      <LoadGraphV2 />
+      <RunCommand command="uptime" interval={1000} />
       <RunCommand command="date" interval={1000} />
       <RunCommand command="free -h" interval={1000} />
       <RunCommand command="ip a" interval={1000} />
diff --git a/package.json b/package.json
index a88af71..96f040f 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.57",
     "apexcharts": "^3.26.0",
+    "canvasjs-react-charts": "^1.0.5",
     "express": "~4.17.1",
     "react-apexcharts": "^1.3.7",
     "react-resizable": "^1.11.1",
diff --git a/yarn.lock b/yarn.lock
index 30cad0f..5bc99b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1509,6 +1509,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001015:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
   integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
 
+canvasjs-react-charts@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz#bdcc06f7bd50a24f69cca9615dafabc0a2a7b063"
+  integrity sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"

From eb839ff34926e8ee3bc2f6f8755990bdb20c977e Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 29 Mar 2021 17:49:30 +0530
Subject: [PATCH 18/33] Changed lib to chartjs, removed unnecessary libs and
 files, formatted code

---
 frontend/components/CommandWidgets.jsx  |  20 +++-
 frontend/components/LoadChartWidget.jsx |  91 --------------
 frontend/components/LoadGraph.jsx       | 150 ++++++++++++++++++++++++
 frontend/components/LoadGraphV2.jsx     | 131 ---------------------
 frontend/components/RunCommand.jsx      |  59 ----------
 frontend/routes/SystemInformation.jsx   |  18 +--
 package.json                            |   5 +-
 yarn.lock                               |  77 ++++++------
 8 files changed, 218 insertions(+), 333 deletions(-)
 delete mode 100644 frontend/components/LoadChartWidget.jsx
 create mode 100644 frontend/components/LoadGraph.jsx
 delete mode 100644 frontend/components/LoadGraphV2.jsx
 delete mode 100644 frontend/components/RunCommand.jsx

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 41f4478..5d24d6f 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -1,15 +1,25 @@
-import React from 'react';
+import { default as React, useEffect, useState } from 'react';
+import { exec } from '../util/exec';
 
-export function Command({ command, output, children }) {
+export function Command(props) {
   return (
     <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
-      $ {command} {`\n`} <PlainCommand children={children} output={output} />
+      $ {props.command} {`\n`} <PlainCommand {...props} />
     </pre>
   );
 }
 
-export function PlainCommand({ children, output }) {
-  if (!output) return null;
+export function PlainCommand({ command, interval, children }) {
+  const [output, setOutput] = useState('');
+  useEffect(() => {
+    const callback = () =>
+      exec(command)
+        .then(result => setOutput(result[0]))
+        .catch(err => setOutput(err[1]));
+    const interval_handle = setInterval(callback, interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, [command]);
 
   if (children === undefined) {
     return <>{output}</>;
diff --git a/frontend/components/LoadChartWidget.jsx b/frontend/components/LoadChartWidget.jsx
deleted file mode 100644
index e87c39d..0000000
--- a/frontend/components/LoadChartWidget.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Chart from 'react-apexcharts';
-import React, { useEffect } from 'react';
-import ApexCharts from 'apexcharts';
-
-const graphHeight = 400;
-
-export default function LoadChartWidget(props) {
-  const options = {
-    redrawOnWindowResize: false,
-    redrawOnParentResize: false,
-    chart: {
-      height: graphHeight,
-      type: 'line',
-      zoom: {
-        enabled: true,
-      },
-      id: 'load_chart',
-    },
-    noData: {
-      text: 'Loading...',
-      align: 'center',
-      verticalAlign: 'middle',
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    title: {
-      text: props.title,
-    },
-    stroke: {
-      width: 2,
-      curve: 'smooth',
-    },
-    colors: ['#2E93fA', '#66DA26', '#546E7A'],
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shadeIntensity: 1,
-        inverseColors: true,
-        gradientToColors: ['#ff0fd7', '#b7ff00', '#0841ff'],
-        opacityFrom: 1,
-        opacityTo: 1,
-        type: 'vertical',
-        stops: [0, 30],
-      },
-    },
-  };
-
-  const series = [
-    {
-      name: '1 minute',
-      data: [],
-    },
-    {
-      name: '5 minute',
-      data: [],
-    },
-    {
-      name: '15 minute',
-      data: [],
-    },
-  ];
-
-  useEffect(() => {
-    ApexCharts.exec('load_chart', 'updateOptions', {
-      xaxis: {
-        labels: {
-          show: false,
-        },
-        axisTicks: {
-          show: false,
-        },
-        categories: props.labels,
-      },
-    });
-
-    ApexCharts.exec('load_chart', 'appendData', [
-      {
-        data: props.data[0],
-      },
-      {
-        data: props.data[1],
-      },
-      {
-        data: props.data[2],
-      },
-    ]);
-  });
-
-  return <Chart options={options} series={series} type="line" height={graphHeight} />;
-}
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
new file mode 100644
index 0000000..f65d41d
--- /dev/null
+++ b/frontend/components/LoadGraph.jsx
@@ -0,0 +1,150 @@
+import Chart from 'chart.js';
+import React, { createRef, useEffect } from 'react';
+import 'chartjs-plugin-zoom';
+import { Button } from '@material-ui/core';
+import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import { blue, green, orange } from '@material-ui/core/colors';
+
+var chart = null;
+const update_interval = 1000;
+const command = 'uptime';
+const chart_title = 'Load Averages';
+const chart_config = {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [
+      {
+        label: '1 minute',
+        data: [],
+        backgroundColor: ['rgba(255, 100, 100, 0.1)'],
+        borderColor: [orange.A100],
+        borderWidth: 1.5,
+      },
+      {
+        label: '5 minute',
+        data: [],
+        backgroundColor: ['rgba(50, 255, 50, 0.1)'],
+        borderColor: [green.A100],
+        borderWidth: 1.5,
+      },
+      {
+        label: '15 minute',
+        data: [],
+        backgroundColor: ['rgba(100, 100, 255, 0.1)'],
+        borderColor: [blue.A100],
+        borderWidth: 1.5,
+      },
+    ],
+  },
+  options: {
+    title: {
+      display: true,
+      text: chart_title,
+    },
+    hover: {
+      animationDuration: 0,
+    },
+    responsiveAnimationDuration: 0,
+    scales: {
+      y: {
+        beginAtZero: true,
+        suggestedMax: 50,
+      },
+      x: {
+        type: 'time',
+        time: {
+          unit: 'second',
+        },
+      },
+    },
+    elements: {
+      line: {
+        tension: 0,
+      },
+    },
+    tooltips: {
+      mode: 'x',
+    },
+    plugins: {
+      zoom: {
+        zoom: {
+          enabled: true,
+          mode: 'x',
+        },
+        pan: {
+          enabled: true,
+          mode: 'x',
+        },
+      },
+    },
+  },
+};
+
+export default function LoadGraph() {
+  const chartRef = createRef();
+
+  function updateData(obj) {
+    if (chart == null) return;
+    chart.data.labels.push(obj.x_value);
+    chart.data.datasets.forEach((dataset, idx) => {
+      dataset.data.push(obj.y_value[idx]);
+    });
+    chart.update();
+  }
+
+  function extractLoadFromString(str = '') {
+    let list = str.split(',');
+    let time_stamp = list[0].trim();
+    let one_min = parseFloat(list[2].split(':')[1]);
+    let five_min = parseFloat(list[3]);
+    let fifteen_min = parseFloat(list[4]);
+
+    return {
+      x_value: time_stamp,
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  useEffect(() => {
+    chart = new Chart(chartRef.current, chart_config);
+
+    const callback = () =>
+      exec(command)
+        .then(result => {
+          updateData(extractLoadFromString(result[0]));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, update_interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, []);
+
+  function resetZoom() {
+    console.log('hello');
+    if (chart == null) {
+      console.log('Chart is not defined/initialized');
+      return;
+    }
+    chart.resetZoom();
+  }
+
+  return (
+    <div>
+      <Button
+        variant="outlined"
+        color="primary"
+        size="small"
+        onClick={resetZoom}
+        style={{
+          margin: '0.5rem',
+        }}
+        endIcon={<RotateLeftIcon />}
+      >
+        Reset Zoom
+      </Button>
+      <canvas ref={chartRef} id="myChart" width="400" height="200"></canvas>
+    </div>
+  );
+}
diff --git a/frontend/components/LoadGraphV2.jsx b/frontend/components/LoadGraphV2.jsx
deleted file mode 100644
index 74fcc5a..0000000
--- a/frontend/components/LoadGraphV2.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useEffect } from 'react';
-import { CanvasJSChart } from 'canvasjs-react-charts';
-import { Box } from '@material-ui/core';
-
-const command = 'uptime';
-const dataPoints1 = [];
-const dataPoints2 = [];
-const dataPoints3 = [];
-const updateInterval = 1000;
-
-//initial values
-var xValue = 0;
-var yValue1 = 0;
-var yValue2 = 0;
-var yValue3 = 0;
-
-export default function LoadGraphV2(props) {
-  let chart = {};
-  const options = {
-    zoomEnabled: true,
-    theme: 'light1',
-    title: {
-      text: 'Load averages',
-    },
-    axisX: {
-      title: 'Seconds',
-    },
-    axisY: {},
-    toolTip: {
-      shared: true,
-    },
-    legend: {
-      cursor: 'pointer',
-      verticalAlign: 'top',
-      fontSize: 18,
-      fontColor: 'dimGrey',
-      itemclick: toggleDataSeries,
-    },
-    data: [
-      {
-        type: 'spline',
-        xValueFormatString: '#,##0 seconds',
-        showInLegend: true,
-        name: '1 minute',
-        dataPoints: dataPoints1,
-      },
-      {
-        type: 'spline',
-        xValueFormatString: '#,##0 seconds',
-        showInLegend: true,
-        name: '5 minute',
-        dataPoints: dataPoints2,
-      },
-      {
-        type: 'spline',
-        xValueFormatString: '#,##0 seconds',
-        showInLegend: true,
-        name: '15 minute',
-        dataPoints: dataPoints3,
-      },
-    ],
-  };
-
-  useEffect(() => {
-    const callback = () =>
-      exec(command)
-        .then(result => {
-          updateChart(extractLoadFromString(result[0]));
-        })
-        .catch(err => console.log(err[1]));
-    const interval_handle = setInterval(callback, updateInterval);
-    callback();
-    return () => clearInterval(interval_handle);
-  }, []);
-
-  function extractLoadFromString(str = '') {
-    let list = str.split(',');
-    let time_stamp = list[0].trim();
-    let one_min = parseFloat(list[2].split(':')[1]);
-    let five_min = parseFloat(list[3]);
-    let fifteen_min = parseFloat(list[4]);
-
-    return {
-      x_value: time_stamp,
-      y_value: [one_min, five_min, fifteen_min],
-      original_str: str,
-    };
-  }
-
-  function toggleDataSeries(e) {
-    if (typeof e.dataSeries.visible === 'undefined' || e.dataSeries.visible) {
-      e.dataSeries.visible = false;
-    } else {
-      e.dataSeries.visible = true;
-    }
-    chart.render();
-  }
-
-  function updateChart(data) {
-    yValue1 = data.y_value[0];
-    yValue2 = data.y_value[1];
-    yValue3 = data.y_value[2];
-    dataPoints1.push({
-      x: xValue,
-      y: yValue1,
-    });
-    dataPoints2.push({
-      x: xValue,
-      y: yValue2,
-    });
-    dataPoints3.push({
-      x: xValue,
-      y: yValue3,
-    });
-    xValue += 1;
-    chart.options.data[0].legendText = ' 1 minute - ' + yValue1;
-    chart.options.data[1].legendText = ' 5 minute - ' + yValue2;
-    chart.options.data[2].legendText = ' 15 minute - ' + yValue3;
-
-    chart.render();
-  }
-  return (
-    <Box
-      style={{
-        padding: '1.5rem',
-      }}
-    >
-      <CanvasJSChart options={options} onRef={ref => (chart = ref)} />
-    </Box>
-  );
-}
diff --git a/frontend/components/RunCommand.jsx b/frontend/components/RunCommand.jsx
deleted file mode 100644
index 0cb97b1..0000000
--- a/frontend/components/RunCommand.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Box } from '@material-ui/core';
-import React, { useEffect, useState } from 'react';
-import { Command } from './CommandWidgets';
-import LoadChartWidget from './LoadChartWidget';
-
-const uptime_cmd = 'uptime';
-const graph_title = 'Load average';
-
-export default function RunCommand(props) {
-  const [state, setState] = useState({
-    labels: [],
-    data: [[], [], []],
-    output: '',
-  });
-
-  function extractLoadFromString(str = '') {
-    let list = str.split(',');
-    let time_stamp = list[0].trim();
-    let one_min = parseFloat(list[2].split(':')[1]);
-    let five_min = parseFloat(list[3]);
-    let fifteen_min = parseFloat(list[4]);
-
-    return {
-      x_value: time_stamp,
-      y_value: [one_min, five_min, fifteen_min],
-      original_str: str,
-    };
-  }
-
-  function updateData(new_data) {
-    setState({
-      data: [[new_data.y_value[0]], [new_data.y_value[1]], [new_data.y_value[2]]],
-      output: new_data.original_str,
-    });
-  }
-
-  useEffect(() => {
-    const callback = () =>
-      exec(props.command)
-        .then(result => {
-          if (props.showGraph) updateData(extractLoadFromString(result[0]));
-          else
-            setState(prevState => ({
-              ...prevState,
-              output: result[0],
-            }));
-        })
-        .catch(err => console.log(err[1]));
-    const interval_handle = setInterval(callback, props.interval);
-    callback();
-    return () => clearInterval(interval_handle);
-  }, [props.command, props.showGraph]);
-
-  return (
-    <div>
-      <Command command={props.command} output={state.output} children={props.children} />
-    </div>
-  );
-}
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index 8bb01bd..3b1a774 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import LoadGraphV2 from '../components/LoadGraphV2';
-import RunCommand from '../components/RunCommand';
+import LoadGraph from '../components/LoadGraph';
+import { Command } from '../components/CommandWidgets';
 
 export const title = 'System Information';
 export const route = '/system_information';
@@ -10,13 +10,13 @@ export const explanation = `Get an overview of whats going on in the linux side
 export function Component() {
   return (
     <div>
-      <LoadGraphV2 />
-      <RunCommand command="uptime" interval={1000} />
-      <RunCommand command="date" interval={1000} />
-      <RunCommand command="free -h" interval={1000} />
-      <RunCommand command="ip a" interval={1000} />
-      <RunCommand command="uname -a" interval={10000} />
-      <RunCommand command="ps -aef --forest" interval={10000} />
+      <LoadGraph />
+      <Command command="date" interval={1000} />
+      <Command command="uptime" interval={1000} />
+      <Command command="free -h" interval={1000} />
+      <Command command="ip a" interval={1000} />
+      <Command command="uname -a" interval={10000} />
+      <Command command="ps -aef --forest" interval={10000} />
     </div>
   );
 }
diff --git a/package.json b/package.json
index 96f040f..2ef7c37 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,9 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.57",
     "apexcharts": "^3.26.0",
-    "canvasjs-react-charts": "^1.0.5",
+    "chart.js": "^2.9.4",
+    "chartjs-plugin-zoom": "^0.7.7",
     "express": "~4.17.1",
-    "react-apexcharts": "^1.3.7",
-    "react-resizable": "^1.11.1",
     "socketio": "^1.0.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 5bc99b3..2c09e67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1509,11 +1509,6 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001015:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
   integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
 
-canvasjs-react-charts@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz#bdcc06f7bd50a24f69cca9615dafabc0a2a7b063"
-  integrity sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g==
-
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1539,6 +1534,36 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chart.js@^2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
+chartjs-plugin-zoom@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-0.7.7.tgz#b25989bd6183cc51d5bb9293c20b4b7942555584"
+  integrity sha512-8fOHPPiZTT2+K0w278TQWYs/DtPg06s1OpTqdXxPpdfH7QQbl6Io/WuE1FjPehDWVCxpe3tSTts+dPbxgq2Z5g==
+  dependencies:
+    hammerjs "^2.0.8"
+
 chokidar@^2.1.5:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -1576,11 +1601,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -1634,7 +1654,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2801,6 +2821,11 @@ gud@^1.0.0:
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -3812,6 +3837,11 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.10.2:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 morgan@~1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.1.tgz#0a8d16734a1d9afbc824b99df87e738e58e2da59"
@@ -4737,7 +4767,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@15.x, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4860,13 +4890,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-apexcharts@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/react-apexcharts/-/react-apexcharts-1.3.7.tgz#42c8785e260535a4f8db1aadbe7b66552770944d"
-  integrity sha512-2OFhEHd70/WHN0kmrJtVx37UfaL71ZogVkwezmDqwQWgwhK6upuhlnEEX7tEq4xvjA+RFDn6hiUTNIuC/Q7Zqw==
-  dependencies:
-    prop-types "^15.5.7"
-
 react-dom@^17.0.0:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -4876,14 +4899,6 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-draggable@^4.0.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
-  integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -4906,14 +4921,6 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
-react-resizable@^1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.1.tgz#02ca6850afa7a22c1b3e623e64aef71ee252af69"
-  integrity sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==
-  dependencies:
-    prop-types "15.x"
-    react-draggable "^4.0.3"
-
 react-router-dom@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"

From 7124ed4e2207ca134a11e0aa317e074423930702 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 29 Mar 2021 21:10:13 +0530
Subject: [PATCH 19/33] minor improvements

---
 frontend/components/LoadGraph.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index f65d41d..3615a9b 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -41,6 +41,7 @@ const chart_config = {
     title: {
       display: true,
       text: chart_title,
+      fontSize: 16,
     },
     hover: {
       animationDuration: 0,
@@ -49,7 +50,6 @@ const chart_config = {
     scales: {
       y: {
         beginAtZero: true,
-        suggestedMax: 50,
       },
       x: {
         type: 'time',
@@ -94,11 +94,11 @@ export default function LoadGraph() {
   }
 
   function extractLoadFromString(str = '') {
-    let list = str.split(',');
-    let time_stamp = list[0].trim();
-    let one_min = parseFloat(list[2].split(':')[1]);
-    let five_min = parseFloat(list[3]);
-    let fifteen_min = parseFloat(list[4]);
+    const list = str.split(',');
+    const time_stamp = list[0].trim();
+    const one_min = parseFloat(list[2].split(':')[1]);
+    const five_min = parseFloat(list[3]);
+    const fifteen_min = parseFloat(list[4]);
 
     return {
       x_value: time_stamp,
@@ -122,7 +122,6 @@ export default function LoadGraph() {
   }, []);
 
   function resetZoom() {
-    console.log('hello');
     if (chart == null) {
       console.log('Chart is not defined/initialized');
       return;

From 9c4fe9f44add300626e5038389bf72708e57c206 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 29 Mar 2021 21:13:27 +0530
Subject: [PATCH 20/33] minor performance improvement

---
 frontend/components/LoadGraph.jsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 3615a9b..4368ed2 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -51,12 +51,6 @@ const chart_config = {
       y: {
         beginAtZero: true,
       },
-      x: {
-        type: 'time',
-        time: {
-          unit: 'second',
-        },
-      },
     },
     elements: {
       line: {

From 2ff76b77ce987898775b0335754cb4a46e717bb9 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 29 Mar 2021 21:19:35 +0530
Subject: [PATCH 21/33] Fixed color in tooltip

---
 frontend/components/LoadGraph.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 4368ed2..7b249ae 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -9,6 +9,7 @@ var chart = null;
 const update_interval = 1000;
 const command = 'uptime';
 const chart_title = 'Load Averages';
+
 const chart_config = {
   type: 'line',
   data: {
@@ -17,22 +18,22 @@ const chart_config = {
       {
         label: '1 minute',
         data: [],
-        backgroundColor: ['rgba(255, 100, 100, 0.1)'],
-        borderColor: [orange.A100],
+        backgroundColor: 'rgba(255, 100, 100, 0.1)',
+        borderColor: orange.A100,
         borderWidth: 1.5,
       },
       {
         label: '5 minute',
         data: [],
-        backgroundColor: ['rgba(50, 255, 50, 0.1)'],
-        borderColor: [green.A100],
+        backgroundColor: 'rgba(50, 255, 50, 0.1)',
+        borderColor: green.A200,
         borderWidth: 1.5,
       },
       {
         label: '15 minute',
         data: [],
-        backgroundColor: ['rgba(100, 100, 255, 0.1)'],
-        borderColor: [blue.A100],
+        backgroundColor: 'rgba(100, 100, 255, 0.1)',
+        borderColor: blue.A100,
         borderWidth: 1.5,
       },
     ],

From dd257e0336b04d8883530edf9eb155bd530acfa5 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Tue, 30 Mar 2021 23:09:21 +0530
Subject: [PATCH 22/33] chartjs replaced with Dygraph charts

---
 frontend/components/LoadGraph.jsx     | 171 ++++++++------------------
 frontend/routes/SystemInformation.jsx |   4 +-
 package.json                          |   4 +-
 yarn.lock                             | 114 +----------------
 4 files changed, 62 insertions(+), 231 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 7b249ae..c9c716d 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -1,144 +1,79 @@
-import Chart from 'chart.js';
-import React, { createRef, useEffect } from 'react';
-import 'chartjs-plugin-zoom';
-import { Button } from '@material-ui/core';
-import RotateLeftIcon from '@material-ui/icons/RotateLeft';
-import { blue, green, orange } from '@material-ui/core/colors';
+import React, { useEffect, useRef } from 'react';
+import Dygraph from 'dygraphs';
+import { Box } from '@material-ui/core';
+import { blue, green, red } from '@material-ui/core/colors';
 
-var chart = null;
 const update_interval = 1000;
 const command = 'uptime';
 const chart_title = 'Load Averages';
-
 const chart_config = {
-  type: 'line',
-  data: {
-    labels: [],
-    datasets: [
-      {
-        label: '1 minute',
-        data: [],
-        backgroundColor: 'rgba(255, 100, 100, 0.1)',
-        borderColor: orange.A100,
-        borderWidth: 1.5,
-      },
-      {
-        label: '5 minute',
-        data: [],
-        backgroundColor: 'rgba(50, 255, 50, 0.1)',
-        borderColor: green.A200,
-        borderWidth: 1.5,
-      },
-      {
-        label: '15 minute',
-        data: [],
-        backgroundColor: 'rgba(100, 100, 255, 0.1)',
-        borderColor: blue.A100,
-        borderWidth: 1.5,
-      },
-    ],
+  legend: 'always',
+  labelsSeparateLines: true,
+  colors: [red.A200, green.A200, blue.A200],
+  strokeWidth: 1.5,
+  title: chart_title,
+  titleHeight: 26,
+  xlabel: 'Time',
+  xLabelHeight: 18,
+};
+
+const chartStyles = {
+  tooltip: {
+    margin: '0.5rem',
+    flex: 1,
   },
-  options: {
-    title: {
-      display: true,
-      text: chart_title,
-      fontSize: 16,
-    },
-    hover: {
-      animationDuration: 0,
-    },
-    responsiveAnimationDuration: 0,
-    scales: {
-      y: {
-        beginAtZero: true,
-      },
-    },
-    elements: {
-      line: {
-        tension: 0,
-      },
-    },
-    tooltips: {
-      mode: 'x',
-    },
-    plugins: {
-      zoom: {
-        zoom: {
-          enabled: true,
-          mode: 'x',
-        },
-        pan: {
-          enabled: true,
-          mode: 'x',
-        },
-      },
-    },
+  chart: {
+    width: '700px',
+    height: '350px',
+    flex: 4,
+  },
+  box_wrapper: {
+    margin: '1rem',
+    marginBottom: '1.5rem',
+    display: 'flex',
+    fontFamily: 'Arial, Helvetica, sans-serif',
   },
 };
 
-export default function LoadGraph() {
-  const chartRef = createRef();
+let data = 'date, 1 minute, 5 minute, 15 minute\n';
+let chart = null;
+export default function LoadGraph(props) {
+  const chartRef = useRef();
+  const tooltip_ref = useRef();
 
-  function updateData(obj) {
-    if (chart == null) return;
-    chart.data.labels.push(obj.x_value);
-    chart.data.datasets.forEach((dataset, idx) => {
-      dataset.data.push(obj.y_value[idx]);
-    });
-    chart.update();
-  }
-
-  function extractLoadFromString(str = '') {
-    const list = str.split(',');
-    const time_stamp = list[0].trim();
-    const one_min = parseFloat(list[2].split(':')[1]);
-    const five_min = parseFloat(list[3]);
-    const fifteen_min = parseFloat(list[4]);
-
-    return {
-      x_value: time_stamp,
-      y_value: [one_min, five_min, fifteen_min],
-      original_str: str,
-    };
+  function addData(str = '') {
+    if (str.length == 0) return;
+    const list = str.split('load average: ');
+    data += `${new Date()}, ${list[1].trim()}\n`;
+    const row = chart.getSelection();
+    chart.updateOptions({ file: data });
+    chart.setSelection(row);
   }
 
   useEffect(() => {
-    chart = new Chart(chartRef.current, chart_config);
+    chart = new Dygraph(chartRef.current, data, {
+      ...chart_config,
+      labelsDiv: tooltip_ref.current,
+    });
 
     const callback = () =>
       exec(command)
         .then(result => {
-          updateData(extractLoadFromString(result[0]));
+          addData(result[0]);
         })
         .catch(err => console.log(err[1]));
-    const interval_handle = setInterval(callback, update_interval);
+    const interval_handle = setInterval(
+      callback,
+      props.interval ? props.interval : update_interval
+    );
     callback();
     return () => clearInterval(interval_handle);
   }, []);
 
-  function resetZoom() {
-    if (chart == null) {
-      console.log('Chart is not defined/initialized');
-      return;
-    }
-    chart.resetZoom();
-  }
-
   return (
-    <div>
-      <Button
-        variant="outlined"
-        color="primary"
-        size="small"
-        onClick={resetZoom}
-        style={{
-          margin: '0.5rem',
-        }}
-        endIcon={<RotateLeftIcon />}
-      >
-        Reset Zoom
-      </Button>
-      <canvas ref={chartRef} id="myChart" width="400" height="200"></canvas>
-    </div>
+    <Box style={chartStyles.box_wrapper}>
+      <div ref={chartRef} style={chartStyles.chart} />
+      <div ref={tooltip_ref} style={chartStyles.tooltip} />
+    </Box>
   );
 }
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index 3b1a774..fcd0295 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import LoadGraph from '../components/LoadGraph';
 import { Command } from '../components/CommandWidgets';
+import LoadGraph from '../components/LoadGraph';
 
 export const title = 'System Information';
 export const route = '/system_information';
@@ -10,7 +10,7 @@ export const explanation = `Get an overview of whats going on in the linux side
 export function Component() {
   return (
     <div>
-      <LoadGraph />
+      <LoadGraph interval={1000} />
       <Command command="date" interval={1000} />
       <Command command="uptime" interval={1000} />
       <Command command="free -h" interval={1000} />
diff --git a/package.json b/package.json
index 2ef7c37..bd6957a 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,7 @@
   ],
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.57",
-    "apexcharts": "^3.26.0",
-    "chart.js": "^2.9.4",
-    "chartjs-plugin-zoom": "^0.7.7",
+    "dygraphs": "^2.1.0",
     "express": "~4.17.1",
     "socketio": "^1.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 2c09e67..acc9776 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1035,18 +1035,6 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-apexcharts@^3.26.0:
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.26.0.tgz#a78abc108b2e1b3086a738f0ec7c98e292f4a14b"
-  integrity sha512-zdYHs3k3tgmCn1BpYLj7rhGEndBYF33Pq1+g0ora37xAr+3act5CJrpdXM2jx2boVUyXgavoSp6sa8WpK7RkSA==
-  dependencies:
-    svg.draggable.js "^2.2.2"
-    svg.easing.js "^2.0.0"
-    svg.filter.js "^2.0.2"
-    svg.pathmorphing.js "^0.1.3"
-    svg.resize.js "^1.4.3"
-    svg.select.js "^3.0.1"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -1534,36 +1522,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chart.js@^2.9.4:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
-
-chartjs-plugin-zoom@^0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-0.7.7.tgz#b25989bd6183cc51d5bb9293c20b4b7942555584"
-  integrity sha512-8fOHPPiZTT2+K0w278TQWYs/DtPg06s1OpTqdXxPpdfH7QQbl6Io/WuE1FjPehDWVCxpe3tSTts+dPbxgq2Z5g==
-  dependencies:
-    hammerjs "^2.0.8"
-
 chokidar@^2.1.5:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -1654,7 +1612,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2286,6 +2244,11 @@ duplexer2@~0.1.4:
   dependencies:
     readable-stream "^2.0.2"
 
+dygraphs@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dygraphs/-/dygraphs-2.1.0.tgz#2fbfd2c803ead02307df3faf8d4dd3ef55cb2075"
+  integrity sha1-L7/SyAPq0CMH3z+vjU3T71XLIHU=
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -2821,11 +2784,6 @@ gud@^1.0.0:
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
-
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -3837,11 +3795,6 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.10.2:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 morgan@~1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.1.tgz#0a8d16734a1d9afbc824b99df87e738e58e2da59"
@@ -5738,61 +5691,6 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-svg.draggable.js@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
-  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
-  dependencies:
-    svg.js "^2.0.1"
-
-svg.easing.js@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
-  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
-  dependencies:
-    svg.js ">=2.3.x"
-
-svg.filter.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
-  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
-  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
-
-svg.pathmorphing.js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
-  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
-  dependencies:
-    svg.js "^2.4.0"
-
-svg.resize.js@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
-  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
-  dependencies:
-    svg.js "^2.6.5"
-    svg.select.js "^2.1.2"
-
-svg.select.js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
-  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.select.js@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
-  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
-  dependencies:
-    svg.js "^2.6.5"
-
 svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"

From 04b462ddb558b7fdc13d476e8c5958ce670ff926 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 31 Mar 2021 20:36:26 +0530
Subject: [PATCH 23/33] Graph autoscale x-direction

---
 frontend/components/LoadGraph.jsx | 13 +++++++------
 frontend/index.jsx                |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index c9c716d..60d4af6 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -12,20 +12,20 @@ const chart_config = {
   colors: [red.A200, green.A200, blue.A200],
   strokeWidth: 1.5,
   title: chart_title,
-  titleHeight: 26,
-  xlabel: 'Time',
-  xLabelHeight: 18,
+  titleHeight: 24,
+  xlabel: 'Time(s)',
+  xLabelHeight: 16,
 };
-
 const chartStyles = {
   tooltip: {
     margin: '0.5rem',
     flex: 1,
+    width: '100%',
   },
   chart: {
-    width: '700px',
+    width: '100%',
     height: '350px',
-    flex: 4,
+    flex: 5,
   },
   box_wrapper: {
     margin: '1rem',
@@ -37,6 +37,7 @@ const chartStyles = {
 
 let data = 'date, 1 minute, 5 minute, 15 minute\n';
 let chart = null;
+
 export default function LoadGraph(props) {
   const chartRef = useRef();
   const tooltip_ref = useRef();
diff --git a/frontend/index.jsx b/frontend/index.jsx
index d700e60..07323de 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { App } from './App';
 import { HashRouter as Router } from 'react-router-dom';
 import { createMuiTheme } from '@material-ui/core';
-import { amber, green } from '@material-ui/core/colors';
+import { green } from '@material-ui/core/colors';
 import { ThemeProvider } from '@material-ui/core/styles';
 
 const theme = createMuiTheme({

From a0b7b3ebf23d3a9292789c7eeaa266c8845457fc Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 1 Apr 2021 02:37:21 +0530
Subject: [PATCH 24/33] Added open source animation

---
 frontend/routes/Wifi.jsx                   | 101 +++++++++++++--------
 frontend/util/animations/wifi_loading.json |   1 +
 package.json                               |   2 +
 yarn.lock                                  |  50 ++++++++++
 4 files changed, 118 insertions(+), 36 deletions(-)
 create mode 100644 frontend/util/animations/wifi_loading.json

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 306cc0c..b172eb4 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -16,6 +16,8 @@ import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Box, Chip } from '@material-ui/core';
+import "@lottiefiles/lottie-player";
+const wifi_animation = require("../util/animations/wifi_loading.json");
 import {
   SignalWifi4Bar,
   SignalWifi0Bar,
@@ -25,6 +27,8 @@ import {
 } from '@material-ui/icons';
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
+import { useTheme } from '@material-ui/core/styles';
+import { Player } from '@lottiefiles/react-lottie-player';
 
 export class Component extends React.Component {
   constructor(props) {
@@ -64,7 +68,6 @@ const in_use = 'IN-USE';
 const initial_direction = 'asc';
 const security = 'SECURITY';
 const bars = 'BARS';
-const active_color = orange[50];
 const headCells = {
   [in_use]: { numeric: false, disablePadding: true, label: 'Connected' },
   BSSID: { numeric: false, disablePadding: false, label: 'BSSID' },
@@ -79,6 +82,7 @@ const headCells = {
 
 function SortableTableHead(props) {
   const { classes, order, orderBy, onRequestSort } = props;
+
   return (
     <TableHead>
       <TableRow>
@@ -271,43 +275,68 @@ function SortableTable(props) {
     setOrderBy(property);
   };
 
+  const theme = useTheme();
+
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <SortableTableToolbar />
-        <TableContainer>
-          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="sortable table">
-            <SortableTableHead
-              classes={classes}
-              order={order}
-              orderBy={orderBy}
-              onRequestSort={handleRequestSort}
-            />
-            <TableBody>
-              {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
-                return (
-                  <TableRow
-                    hover
-                    tabIndex={-1}
-                    key={index}
-                    style={{
-                      background: row[in_use].length > 0 ? active_color : null,
-                    }}
-                  >
-                    {Object.keys(headCells).map(function(key) {
-                      return (
-                        <TableCell key={key} align="center">
-                          {renderTableCell(key, row, classes)}
-                        </TableCell>
-                      );
-                    })}
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Paper>
+      {rows.length > 0 ? (
+        <Paper className={classes.paper}>
+          <SortableTableToolbar />
+          <TableContainer>
+            <Table
+              className={classes.table}
+              aria-labelledby="tableTitle"
+              aria-label="sortable table"
+            >
+              <SortableTableHead
+                classes={classes}
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}
+              />
+              <TableBody>
+                {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
+                  return (
+                    <TableRow
+                      hover
+                      tabIndex={-1}
+                      key={index}
+                      style={{
+                        background: row[in_use].length > 0 ? orange[50] : null,
+                      }}
+                    >
+                      {Object.keys(headCells).map(function(key) {
+                        return (
+                          <TableCell key={key} align="center">
+                            {renderTableCell(key, row, classes)}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Paper>
+      ) : (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            display: 'flex',
+          }}
+        >
+          <Player
+          src={wifi_animation}
+          autoplay={true}
+          loop={true}
+          controls={false}
+          style={{ height: '300px', width: '300px' }}/>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/util/animations/wifi_loading.json b/frontend/util/animations/wifi_loading.json
new file mode 100644
index 0000000..bff6835
--- /dev/null
+++ b/frontend/util/animations/wifi_loading.json
@@ -0,0 +1 @@
+{"v":"4.11.1","fr":29.9700012207031,"ip":0,"op":120.0000048877,"w":300,"h":300,"nm":"Text","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"internet Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,140,0],"ix":2},"a":{"a":0,"k":[50,42.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,2],[17.3,0],[12.4,-10.2],[-2.1,-2.3],[0,0],[-2.3,1.9],[-14.4,0],[-10.3,-8.6],[-2,2.3],[0,0]],"o":[[-12.4,-10.3],[-17.3,0],[-2.4,2],[0,0],[2,2.3],[10.3,-8.6],[14.4,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[45.5,2.8],[0,-13.6],[-45.5,2.8],[-46.1,10.6],[-45.7,11.1],[-38,11.7],[0,-2],[38,11.7],[45.7,11.1],[46.1,10.6]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,17.533],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86,"s":[0],"e":[30]},{"t":91.000003706506}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,1.9],[12.2,0],[8.8,-7.2],[-2,-2.3],[0,0],[-2.3,1.9],[-9.5,0],[-6.799,-5.6],[-1.899,2.2],[0,0]],"o":[[-8.8,-7.2],[-12.2,0],[-2.4,2],[0,0],[1.9,2.2],[6.9,-5.6],[9.5,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[32.25,0.4],[-0.05,-11.1],[-32.35,0.4],[-33.05,8.2],[-32.85,8.5],[-25.25,9.2],[-0.05,0.2],[25.15,9.2],[32.75,8.5],[32.95,8.2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.05,35.134],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[32],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":82,"s":[0],"e":[30]},{"t":88.0000035843135}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.5,1.9],[7.2,0],[5.3,-4.1],[-2,-2.3],[-2.3,1.8],[-4.7,0],[-3.4,-2.6],[-1.9,2.2]],"o":[[-5.3,-4.2],[-7.2,0],[-2.4,1.9],[1.9,2.2],[3.4,-2.7],[4.7,0],[2.3,1.8],[2,-2.3]],"v":[[19.2,-1.85],[0,-8.45],[-19.2,-1.85],[-19.9,5.95],[-12.4,6.65],[0,2.45],[12.4,6.65],[19.9,5.95]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,52.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":14,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[0],"e":[30]},{"t":83.0000033806593}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-4.584,0],[0,-4.584],[4.584,0],[0,4.584]],"o":[[4.584,0],[0,4.584],[-4.584,0],[0,-4.584]],"v":[[0,-8.3],[8.3,0],[0,8.3],[-8.3,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,72.534],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0"],"t":12,"s":[100,100],"e":[250,250]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_1_0p167_0p167","0p833_1_0p167_0p167"],"t":18,"s":[250,250],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0"],"t":24,"s":[100,100],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_0p833_0p167_0","0p833_0p833_0p167_0"],"t":63,"s":[100,100],"e":[250,250]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p667_1_0p167_0","0p667_1_0p167_0"],"t":70,"s":[250,250],"e":[100,100]},{"t":77.0000031362743}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":24,"s":[100],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":44,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":63,"s":[100],"e":[100]},{"t":70.0000028511585}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120.0000048877,"st":0,"bm":0}]}
diff --git a/package.json b/package.json
index bd6957a..a181149 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "last 10 Firefox versions"
   ],
   "dependencies": {
+    "@lottiefiles/lottie-player": "^1.0.0",
+    "@lottiefiles/react-lottie-player": "3.0.5",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "dygraphs": "^2.1.0",
     "express": "~4.17.1",
diff --git a/yarn.lock b/yarn.lock
index acc9776..c3dbfd7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -713,6 +713,24 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
+"@lottiefiles/lottie-player@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@lottiefiles/lottie-player/-/lottie-player-1.0.0.tgz#df0f74a205851a878561c56126caa9a5f0a307b2"
+  integrity sha512-LQG7zduWhbFUSSMh+N9MTyaCHd4z5OFZCxfFXSFqtr2kEfD1UNb+Av1AjXQmopBhXZSGQeBz1Ry28t9SXS8SZg==
+  dependencies:
+    "@types/pako" "^1.0.1"
+    lit-element "^2.3.1"
+    lottie-web "^5.6.6"
+    pako "^1.0.11"
+    resize-observer-polyfill "^1.5.1"
+
+"@lottiefiles/react-lottie-player@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@lottiefiles/react-lottie-player/-/react-lottie-player-3.0.5.tgz#8df8067983ed95eb72141f6234901adc6285ea79"
+  integrity sha512-wBml9Z8UNJTzuozpBRDx4Ifi1iIBYJ2Yt+lkNAxNCyS/qQkF2Pqwyqn5+50SuueeKEYTJK/rcnktIeH4vUkYQw==
+  dependencies:
+    lottie-web "^5.6.0"
+
 "@material-ui/core@^4.9.10":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850"
@@ -866,6 +884,11 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
   integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
 
+"@types/pako@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.1.tgz#33b237f3c9aff44d0f82fe63acffa4a365ef4a61"
+  integrity sha512-GdZbRSJ3Cv5fiwT6I0SQ3ckeN2PWNqxd26W9Z2fCK1tGrrasGy4puvNFtnddqH9UJFMQYXxEuuB7B8UK+LLwSg==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -3580,6 +3603,18 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lit-element@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452"
+  integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==
+  dependencies:
+    lit-html "^1.1.1"
+
+lit-html@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
+  integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -3627,6 +3662,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.6.0, lottie-web@^5.6.6:
+  version "5.7.7"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.7.tgz#077c705d5c82b33a421618c529fccebd69a111fd"
+  integrity sha512-dAUrMX5BRxP7dr+qDWzablhGY6SqXztCS46sW11wjuzExQKZl5GLX2yMGGqg4AkdjgfjetndcU+VR1xoLhlkpA==
+
 magic-string@^0.22.4:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
@@ -4125,6 +4165,11 @@ pako@^0.2.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
+pako@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
@@ -5138,6 +5183,11 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"

From 13308ee3f83cc48e36aabac8d4e29bedc73f0413 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 1 Apr 2021 02:38:06 +0530
Subject: [PATCH 25/33] code format

---
 frontend/routes/Wifi.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index b172eb4..77afa66 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -16,8 +16,8 @@ import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Box, Chip } from '@material-ui/core';
-import "@lottiefiles/lottie-player";
-const wifi_animation = require("../util/animations/wifi_loading.json");
+import '@lottiefiles/lottie-player';
+const wifi_animation = require('../util/animations/wifi_loading.json');
 import {
   SignalWifi4Bar,
   SignalWifi0Bar,
@@ -330,11 +330,12 @@ function SortableTable(props) {
           }}
         >
           <Player
-          src={wifi_animation}
-          autoplay={true}
-          loop={true}
-          controls={false}
-          style={{ height: '300px', width: '300px' }}/>
+            src={wifi_animation}
+            autoplay={true}
+            loop={true}
+            controls={false}
+            style={{ height: '300px', width: '300px' }}
+          />
         </div>
       )}
     </div>

From c4356180e999d711648b7bc6a84158698cecf15e Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Thu, 1 Apr 2021 03:09:07 +0530
Subject: [PATCH 26/33] Added apertus animation

---
 frontend/routes/Home.jsx               | 12 +++++++++++-
 frontend/util/animations/aperture.json |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 frontend/util/animations/aperture.json

diff --git a/frontend/routes/Home.jsx b/frontend/routes/Home.jsx
index f601dd7..a56b3e0 100644
--- a/frontend/routes/Home.jsx
+++ b/frontend/routes/Home.jsx
@@ -14,7 +14,10 @@ import { Link, Link as RouterLink } from 'react-router-dom';
 import ReactMarkdown from 'markdown-to-jsx';
 import { routes } from '../*/*.jsx';
 import { PlainCommand } from '../components/CommandWidgets';
+import { Player } from '@lottiefiles/react-lottie-player';
+import '@lottiefiles/lottie-player';
 
+const apertus_animation = require('../util/animations/aperture.json');
 export const title = 'Home';
 export const route = '/';
 export const position = 1;
@@ -24,7 +27,7 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
   },
   heroContent: {
-    padding: theme.spacing(12, 0, 6),
+    padding: theme.spacing(0, 0, 6),
   },
   cardGrid: {
     paddingTop: theme.spacing(8),
@@ -57,6 +60,13 @@ export function Component(props) {
     <div>
       <div className={classes.heroContent}>
         <Container maxWidth="sm">
+          <Player
+            src={apertus_animation}
+            autoplay={true}
+            loop={true}
+            controls={false}
+            style={{ height: '200px', width: '200px', alignItems: 'center', display: 'flex' }}
+          />
           <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
             AXIOM <br />
             WebUI
diff --git a/frontend/util/animations/aperture.json b/frontend/util/animations/aperture.json
new file mode 100644
index 0000000..f3a1c9c
--- /dev/null
+++ b/frontend/util/animations/aperture.json
@@ -0,0 +1 @@
+{"v":"4.6.9","fr":30,"ip":0,"op":300,"w":800,"h":600,"nm":"Aperture","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Mask1","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[-12],"e":[-30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[-30],"e":[-30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[-30],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[-12],"e":[0]},{"t":240.0000097754}]},"p":{"a":0,"k":[327.182,282,0]},"a":{"a":0,"k":[-73.125,-18.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.8392156862745098,0.25882352941176473,0.25882352941176473,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shutter6","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[300],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[288],"e":[270]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[270],"e":[270]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[270],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[288],"e":[300]},{"t":240.0000097754}]},"p":{"a":0,"k":[348.182,354.25,0]},"a":{"a":0,"k":[-72.611,-18.267,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Mask6","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[300],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[288],"e":[270]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[270],"e":[270]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[270],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[288],"e":[300]},{"t":240.0000097754}]},"p":{"a":0,"k":[348.182,354.25,0]},"a":{"a":0,"k":[-72.611,-18.267,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.387454,0.387454,0.387454,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shutter5","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[240],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[228],"e":[210]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[210],"e":[210]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[210],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[228],"e":[240]},{"t":240.0000097754}]},"p":{"a":0,"k":[420.432,372.375,0]},"a":{"a":0,"k":[-72.308,-18.509,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"Mask5","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[240],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[228],"e":[210]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[210],"e":[210]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[210],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[228],"e":[240]},{"t":240.0000097754}]},"p":{"a":0,"k":[420.432,372.375,0]},"a":{"a":0,"k":[-72.308,-18.509,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.3318627,0.3318627,0.3318627,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"Shutter4","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[180],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[168],"e":[150]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[150],"e":[150]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[150],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[168],"e":[180]},{"t":240.0000097754}]},"p":{"a":0,"k":[472.557,319.125,0]},"a":{"a":0,"k":[-72.25,-18.625,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"Mask4","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[180],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[168],"e":[150]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[150],"e":[150]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[150],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[168],"e":[180]},{"t":240.0000097754}]},"p":{"a":0,"k":[472.557,319.125,0]},"a":{"a":0,"k":[-72.25,-18.625,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.2803309,0.2803309,0.2803309,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"Shutter3","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[120],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[108],"e":[90]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[90],"e":[90]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[90],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[108],"e":[120]},{"t":240.0000097754}]},"p":{"a":0,"k":[453.307,246.875,0]},"a":{"a":0,"k":[-72.753,-18.762,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":4,"nm":"Mask3","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[120],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[108],"e":[90]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[90],"e":[90]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[90],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[108],"e":[120]},{"t":240.0000097754}]},"p":{"a":0,"k":[453.307,246.875,0]},"a":{"a":0,"k":[-72.753,-18.762,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.2320159,0.2320159,0.2320159,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":11,"ty":4,"nm":"Shutter2","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[60],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[48],"e":[30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[30],"e":[30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[30],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[48],"e":[60]},{"t":240.0000097754}]},"p":{"a":0,"k":[379.807,227.875,0]},"a":{"a":0,"k":[-73.145,-18.559,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":12,"ty":4,"nm":"Mask2","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[60],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[48],"e":[30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[30],"e":[30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[30],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[48],"e":[60]},{"t":240.0000097754}]},"p":{"a":0,"k":[379.807,227.875,0]},"a":{"a":0,"k":[-73.145,-18.559,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.1655484,0.1655484,0.1655484,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":13,"ty":4,"nm":"Shutter1","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[-12],"e":[-30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[-30],"e":[-30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[-30],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[-12],"e":[0]},{"t":240.0000097754}]},"p":{"a":0,"k":[327.182,282,0]},"a":{"a":0,"k":[-73.125,-18.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1}]}],"fonts":{"list":[{"fName":"Gotham-Book","fFamily":"Gotham","fStyle":"Book","ascent":73.9995727539062}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"2.8","cl":"8","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[25],"e":[0]},{"t":160.000006516934}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":60,"s":[399.996,475,0],"e":[399.996,455,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":70,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":150,"s":[399.996,455,0],"e":[399.996,475,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":160.000006516934}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":5,"nm":"10","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[25],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[0],"e":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":160,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[25],"e":[0]},{"t":220.000008960784}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":0,"s":[399.996,475,0],"e":[399.996,455,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":10,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":60,"s":[399.996,455,0],"e":[399.996,435,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":70,"s":[399.996,434.99999999999994,0],"e":[399.996,435,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":150,"s":[399.996,434.99999999999994,0],"e":[399.996,455,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":160,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":210,"s":[399.996,455,0],"e":[399.996,475,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":220.000008960784}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":5,"nm":"16","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[25],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[0],"e":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[0],"e":[25]},{"t":220.000008960784}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":0,"s":[399.996,455,0],"e":[399.996,435,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":10,"s":[399.996,434.99999999999994,0],"e":[399.996,435,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":210,"s":[399.996,434.99999999999994,0],"e":[399.996,455,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":220.000008960784}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Circle Guide 2","ks":{"o":{"a":0,"k":25},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[-111.812,-51.812,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[178,178]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-111.812,-51.812],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Circle Guide","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[-111.812,-51.812,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[150,150]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-111.812,-51.812],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":0,"nm":"Shutters","tt":1,"refId":"comp_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[400,300,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":800,"h":600,"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1}],"chars":[{"ch":"1","size":24,"style":"Book","w":35.8,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"o":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"v":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"c":true}},"nm":"1","mn":"ADBE Vector Shape - Group"}],"nm":"1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[53.825,0],[61.681,0],[61.681,-70.999],[55.84,-70.999],[38.618,-65.057],[40.532,-58.612],[53.825,-62.741]],"c":true}},"nm":"1","mn":"ADBE Vector Shape - Group"}],"nm":"1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"6","size":24,"style":"Book","w":64.7,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[25.781,1.208],[58.813,-8.66],[58.813,-22.458],[47.534,-44.11],[18.934,-39.981],[14.301,-34.241],[21.45,-64.453],[46.426,-61.935],[56.296,-63.647],[43.908,-71.704],[6.143,-54.886],[6.143,-33.234],[9.365,-11.582]],"o":[[47.837,1.208],[58.813,-22.256],[58.813,-35.651],[25.278,-44.11],[14.301,-33.234],[14.301,-50.153],[41.491,-64.453],[51.663,-57.504],[50.153,-68.682],[17.019,-71.704],[6.143,-33.435],[6.143,-18.833],[19.436,-1.511]],"v":[[33.536,1.208],[58.813,-22.256],[58.813,-22.458],[34.442,-44.11],[14.301,-33.234],[14.301,-34.241],[35.046,-64.453],[51.663,-57.504],[56.296,-63.647],[35.449,-71.704],[6.143,-33.435],[6.143,-33.234],[15.005,-5.942]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[44.009,-5.841],[15.811,-12.689],[15.811,-21.854],[22.861,-37.262],[50.656,-30.817],[50.656,-21.954]],"o":[[23.263,-5.841],[15.811,-21.652],[15.811,-29.709],[43.607,-37.262],[50.656,-22.156],[50.656,-12.991]],"v":[[33.636,-5.841],[15.811,-21.652],[15.811,-21.854],[33.435,-37.262],[50.656,-22.156],[50.656,-21.954]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"}],"nm":"6","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-7.755,0],[0,13.596],[0,0],[13.092,0],[4.633,-6.747],[0,0],[-13.596,0],[-5.237,-4.431],[0,0],[8.459,0],[0,-21.451],[0,0],[-5.64,-5.64]],"o":[[14.301,0],[0,0],[0,-13.193],[-9.164,0],[0,0],[0,-15.912],[6.445,0],[0,0],[-6.143,-5.035],[-18.43,0],[0,0],[0,14.401],[4.431,4.431]],"v":[[98.235,1.208],[123.512,-22.256],[123.512,-22.458],[99.141,-44.11],[78.999,-33.234],[78.999,-34.241],[99.745,-64.453],[116.362,-57.504],[120.995,-63.647],[100.148,-71.704],[70.842,-33.435],[70.842,-33.234],[79.704,-5.942]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[10.373,0],[0,8.963],[0,0],[-10.574,0],[0,-8.661],[0,0]],"o":[[-10.373,0],[0,0],[0,-7.855],[10.172,0],[0,0],[0,8.963]],"v":[[98.335,-5.841],[80.51,-21.652],[80.51,-21.854],[98.134,-37.262],[115.355,-22.156],[115.355,-21.954]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"6","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"0","size":24,"style":"Book","w":71.5,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[17.725,1.208],[65.762,-15.509],[65.762,-35.449],[54.281,-71.704],[6.244,-54.987],[6.244,-35.046]],"o":[[54.08,1.208],[65.762,-35.248],[65.762,-55.188],[18.027,-71.704],[6.244,-35.248],[6.244,-15.307]],"v":[[35.953,1.208],[65.762,-35.248],[65.762,-35.449],[36.154,-71.704],[6.244,-35.248],[6.244,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[49.347,-6.042],[14.502,-19.84],[14.502,-35.449],[22.76,-64.453],[57.504,-50.656],[57.504,-35.046]],"o":[[22.961,-6.042],[14.502,-35.248],[14.502,-50.958],[49.045,-64.453],[57.504,-35.248],[57.504,-19.638]],"v":[[36.154,-6.042],[14.502,-35.248],[14.502,-35.449],[35.953,-64.453],[57.504,-35.248],[57.504,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"}],"nm":"0","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-18.228,0],[0,19.739],[0,0],[18.127,0],[0,-19.739],[0,0]],"o":[[18.127,0],[0,0],[0,-19.739],[-18.127,0],[0,0],[0,19.739]],"v":[[107.452,1.208],[137.262,-35.248],[137.262,-35.449],[107.654,-71.704],[77.744,-35.248],[77.744,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[13.193,0],[0,15.408],[0,0],[-13.193,0],[0,-15.408],[0,0]],"o":[[-13.193,0],[0,0],[0,-15.509],[13.092,0],[0,0],[0,15.408]],"v":[[107.654,-6.042],[86.002,-35.248],[86.002,-35.449],[107.452,-64.453],[129.004,-35.248],[129.004,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"0","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"2","size":24,"style":"Book","w":59.9,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[35.55,-23.969],[53.375,-41.089],[53.375,-51.562],[44.211,-71.503],[12.488,-65.964],[11.984,-52.267],[22.86,-64.352],[45.117,-59.116],[41.19,-38.37],[4.834,-6.143]],"o":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[47.937,-34.745],[53.375,-51.361],[53.375,-63.043],[19.135,-71.503],[6.143,-56.497],[17.624,-60.122],[38.571,-64.352],[45.117,-43.808],[30.414,-28.702],[4.834,-6.143]],"v":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[35.55,-23.969],[53.375,-51.361],[53.375,-51.562],[31.522,-71.503],[6.143,-56.497],[11.984,-52.267],[30.917,-64.352],[45.117,-50.858],[30.414,-28.702],[4.834,-6.143]],"c":true}},"nm":"2","mn":"ADBE Vector Shape - Group"}],"nm":"2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,10.272],[0,0],[12.689,0],[6.345,-9.467],[0,0],[-8.057,0],[0,-8.258],[10.776,-9.668],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[12.387,-10.776],[0,0],[0,-11.481],[-12.387,0],[0,0],[5.64,-7.855],[7.654,0],[0,7.05],[0,0],[0,0]],"v":[[64.734,0],[113.98,0],[113.98,-7.251],[76.617,-7.251],[95.45,-23.969],[113.275,-51.361],[113.275,-51.562],[91.422,-71.503],[66.043,-56.497],[71.884,-52.267],[90.817,-64.352],[105.017,-50.858],[90.314,-28.702],[64.734,-6.143]],"c":true}},"nm":"2","mn":"ADBE Vector Shape - Group"}],"nm":"2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":".","size":24,"style":"Book","w":24.5,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"o":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"v":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"c":true}},"nm":".","mn":"ADBE Vector Shape - Group"}],"nm":".","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[32.254,0],[41.519,0],[41.519,-10.574],[32.254,-10.574]],"c":true}},"nm":".","mn":"ADBE Vector Shape - Group"}],"nm":".","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"8","size":24,"style":"Book","w":63,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[16.718,1.007],[58.209,-7.05],[58.209,-19.235],[52.066,-33.334],[55.792,-44.513],[55.792,-52.872],[44.614,-71.503],[7.654,-63.748],[7.654,-52.67],[13.193,-39.477],[5.237,-27.494],[5.237,-18.933]],"o":[[46.728,1.007],[58.209,-19.034],[58.209,-27.594],[50.253,-39.477],[55.792,-52.67],[55.792,-63.748],[18.832,-71.503],[7.654,-52.872],[7.654,-44.513],[11.28,-33.435],[5.237,-19.135],[5.237,-7.15]],"v":[[31.723,1.007],[58.209,-19.034],[58.209,-19.235],[43.707,-36.456],[55.792,-52.67],[55.792,-52.872],[31.723,-71.503],[7.654,-52.872],[7.654,-52.67],[19.739,-36.456],[5.237,-19.135],[5.237,-18.933]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[40.686,-39.276],[15.61,-44.513],[15.61,-52.368],[22.559,-64.554],[47.836,-59.317],[47.836,-52.167]],"o":[[22.76,-39.276],[15.61,-52.167],[15.61,-59.418],[40.887,-64.554],[47.836,-52.368],[47.836,-44.513]],"v":[[31.723,-39.276],[15.61,-52.167],[15.61,-52.368],[31.723,-64.554],[47.836,-52.368],[47.836,-52.167]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[43.304,-5.942],[13.293,-12.085],[13.293,-19.336],[21.451,-32.73],[50.153,-27.191],[50.153,-19.135]],"o":[[20.142,-5.942],[13.293,-19.135],[13.293,-27.191],[41.995,-32.73],[50.153,-19.336],[50.153,-11.985]],"v":[[31.723,-5.942],[13.293,-19.135],[13.293,-19.336],[31.723,-32.73],[50.153,-19.336],[50.153,-19.135]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"}],"nm":"8","np":6,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-15.005,0],[0,11.984],[0,0],[8.359,3.122],[0,8.157],[0,0],[12.891,0],[0,-10.876],[0,0],[-6.546,-3.021],[0,-8.359],[0,0]],"o":[[15.005,0],[0,0],[0,-8.359],[6.546,-3.021],[0,0],[0,-10.876],[-12.891,0],[0,0],[0,8.157],[-8.459,3.021],[0,0],[0,11.783]],"v":[[94.722,1.007],[121.208,-19.034],[121.208,-19.235],[106.706,-36.456],[118.791,-52.67],[118.791,-52.872],[94.722,-71.503],[70.653,-52.872],[70.653,-52.67],[82.738,-36.456],[68.236,-19.135],[68.236,-18.933]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[8.963,0],[0,7.654],[0,0],[-9.164,0],[0,-6.949],[0,0]],"o":[[-8.963,0],[0,0],[0,-7.05],[9.164,0],[0,0],[0,7.654]],"v":[[94.722,-39.276],[78.609,-52.167],[78.609,-52.368],[94.722,-64.554],[110.835,-52.368],[110.835,-52.167]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[11.581,0],[0,7.05],[0,0],[-10.272,0],[0,-7.855],[0,0]],"o":[[-11.581,0],[0,0],[0,-7.855],[10.272,0],[0,0],[0,7.15]],"v":[[94.722,-5.942],[76.292,-19.135],[76.292,-19.336],[94.722,-32.73],[113.152,-19.336],[113.152,-19.135]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"8","np":6,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"}]}
\ No newline at end of file

From 3777914c5244f9ba7ab81a3f029b7ef111c6ca2d Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sun, 4 Apr 2021 18:20:47 +0530
Subject: [PATCH 27/33] changed tooltip position, removed hardcoded theme

---
 frontend/App.jsx                  |  2 +-
 frontend/components/LoadGraph.jsx | 55 +++++++++++++++++++------------
 frontend/index.jsx                |  4 +++
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/frontend/App.jsx b/frontend/App.jsx
index d98175d..a8e62ef 100644
--- a/frontend/App.jsx
+++ b/frontend/App.jsx
@@ -59,7 +59,7 @@ const useStyles = makeStyles(theme => ({
   toolbar: theme.mixins.toolbar,
 }));
 
-export function App(props) {
+export function App() {
   const classes = useStyles();
 
   const [drawerOpen, setDrawerOpen] = useState(isDesktop);
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 60d4af6..0b05bad 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -1,39 +1,44 @@
 import React, { useEffect, useRef } from 'react';
 import Dygraph from 'dygraphs';
-import { Box } from '@material-ui/core';
+import { Box, Container, makeStyles, Paper } from '@material-ui/core';
 import { blue, green, red } from '@material-ui/core/colors';
 
 const update_interval = 1000;
 const command = 'uptime';
-const chart_title = 'Load Averages';
+const chart_title = 'Load averages';
+
 const chart_config = {
   legend: 'always',
   labelsSeparateLines: true,
   colors: [red.A200, green.A200, blue.A200],
   strokeWidth: 1.5,
-  title: chart_title,
-  titleHeight: 24,
-  xlabel: 'Time(s)',
+  xlabel: 'Time',
   xLabelHeight: 16,
+  title: chart_title,
+  
 };
-const chartStyles = {
-  tooltip: {
-    margin: '0.5rem',
-    flex: 1,
-    width: '100%',
+
+const useStyles = makeStyles(theme => ({
+  chart_paper: {
+    height: '350px',
+    margin: theme.spacing(2),
+    padding: theme.spacing(2),
   },
   chart: {
     width: '100%',
-    height: '350px',
-    flex: 5,
+    height: '100%',
   },
   box_wrapper: {
-    margin: '1rem',
-    marginBottom: '1.5rem',
-    display: 'flex',
-    fontFamily: 'Arial, Helvetica, sans-serif',
+    width: '100%',
+    marginBottom: theme.spacing(4),
+    fontFamily: theme.typography.fontFamily,
   },
-};
+  tooltip: {
+    margin: theme.spacing(2),
+    padding: theme.spacing(2),
+    
+  },
+}));
 
 let data = 'date, 1 minute, 5 minute, 15 minute\n';
 let chart = null;
@@ -41,6 +46,8 @@ let chart = null;
 export default function LoadGraph(props) {
   const chartRef = useRef();
   const tooltip_ref = useRef();
+  const classes = useStyles();
+
 
   function addData(str = '') {
     if (str.length == 0) return;
@@ -72,9 +79,15 @@ export default function LoadGraph(props) {
   }, []);
 
   return (
-    <Box style={chartStyles.box_wrapper}>
-      <div ref={chartRef} style={chartStyles.chart} />
-      <div ref={tooltip_ref} style={chartStyles.tooltip} />
-    </Box>
+    <Container className={classes.box_wrapper} >
+        <Paper className={classes.chart_paper}>
+          <div ref={chartRef} className={classes.chart} /> 
+        </Paper>
+        <Paper className={classes.tooltip} variant='outlined'>
+          <div ref={tooltip_ref}  />
+        </Paper>
+        
+    </Container>
+
   );
 }
diff --git a/frontend/index.jsx b/frontend/index.jsx
index 07323de..82d520d 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -13,6 +13,10 @@ const theme = createMuiTheme({
       contrastText: '#ffffff',
     },
     secondary: green,
+    type: 'light',
+  },
+  typography: {
+    fontFamily: 'Arial, Helvetica, sans-serif',
   },
 });
 

From dfa8512d73dbb69c824e2099ccfcdb2bec79e22c Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sun, 4 Apr 2021 18:23:36 +0530
Subject: [PATCH 28/33] format code

---
 frontend/components/LoadGraph.jsx | 21 ++++++++-------------
 frontend/index.jsx                |  3 ---
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 0b05bad..45f6041 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import Dygraph from 'dygraphs';
-import { Box, Container, makeStyles, Paper } from '@material-ui/core';
+import { Container, makeStyles, Paper } from '@material-ui/core';
 import { blue, green, red } from '@material-ui/core/colors';
 
 const update_interval = 1000;
@@ -15,7 +15,6 @@ const chart_config = {
   xlabel: 'Time',
   xLabelHeight: 16,
   title: chart_title,
-  
 };
 
 const useStyles = makeStyles(theme => ({
@@ -36,7 +35,6 @@ const useStyles = makeStyles(theme => ({
   tooltip: {
     margin: theme.spacing(2),
     padding: theme.spacing(2),
-    
   },
 }));
 
@@ -48,7 +46,6 @@ export default function LoadGraph(props) {
   const tooltip_ref = useRef();
   const classes = useStyles();
 
-
   function addData(str = '') {
     if (str.length == 0) return;
     const list = str.split('load average: ');
@@ -79,15 +76,13 @@ export default function LoadGraph(props) {
   }, []);
 
   return (
-    <Container className={classes.box_wrapper} >
-        <Paper className={classes.chart_paper}>
-          <div ref={chartRef} className={classes.chart} /> 
-        </Paper>
-        <Paper className={classes.tooltip} variant='outlined'>
-          <div ref={tooltip_ref}  />
-        </Paper>
-        
+    <Container className={classes.box_wrapper}>
+      <Paper className={classes.chart_paper}>
+        <div ref={chartRef} className={classes.chart} />
+      </Paper>
+      <Paper className={classes.tooltip} variant="outlined">
+        <div ref={tooltip_ref} />
+      </Paper>
     </Container>
-
   );
 }
diff --git a/frontend/index.jsx b/frontend/index.jsx
index 82d520d..b6f1555 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -15,9 +15,6 @@ const theme = createMuiTheme({
     secondary: green,
     type: 'light',
   },
-  typography: {
-    fontFamily: 'Arial, Helvetica, sans-serif',
-  },
 });
 
 ReactDOM.render(

From ddbf771602f4d2f3ddcd4ccbd32591e45d2b9ad9 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sun, 4 Apr 2021 23:12:18 +0530
Subject: [PATCH 29/33] added accordion on sys-info, improved performanec

---
 frontend/components/CommandWidgets.jsx |   2 +-
 frontend/components/LoadGraph.jsx      |   8 +-
 frontend/index.jsx                     |   2 +-
 frontend/routes/Dashboard.jsx          |   5 +-
 frontend/routes/SystemInformation.jsx  | 113 +++++++++++++++++++++++--
 5 files changed, 116 insertions(+), 14 deletions(-)

diff --git a/frontend/components/CommandWidgets.jsx b/frontend/components/CommandWidgets.jsx
index 5d24d6f..5da9ca3 100644
--- a/frontend/components/CommandWidgets.jsx
+++ b/frontend/components/CommandWidgets.jsx
@@ -3,7 +3,7 @@ import { exec } from '../util/exec';
 
 export function Command(props) {
   return (
-    <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
+    <pre style={{ overflowX: 'auto' }}>
       $ {props.command} {`\n`} <PlainCommand {...props} />
     </pre>
   );
diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 45f6041..12b1579 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import Dygraph from 'dygraphs';
 import { Container, makeStyles, Paper } from '@material-ui/core';
 import { blue, green, red } from '@material-ui/core/colors';
+import { Alert } from '@material-ui/lab';
 
 const update_interval = 1000;
 const command = 'uptime';
@@ -66,7 +67,10 @@ export default function LoadGraph(props) {
         .then(result => {
           addData(result[0]);
         })
-        .catch(err => console.log(err[1]));
+        .catch(err => {
+        <Alert severity="error">{err[1]}</Alert> 
+        console.log(err[1]);
+        });
     const interval_handle = setInterval(
       callback,
       props.interval ? props.interval : update_interval
@@ -85,4 +89,4 @@ export default function LoadGraph(props) {
       </Paper>
     </Container>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/index.jsx b/frontend/index.jsx
index b6f1555..0052019 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -13,7 +13,7 @@ const theme = createMuiTheme({
       contrastText: '#ffffff',
     },
     secondary: green,
-    type: 'light',
+    type: 'dark',
   },
 });
 
diff --git a/frontend/routes/Dashboard.jsx b/frontend/routes/Dashboard.jsx
index e71f518..a9a81f5 100644
--- a/frontend/routes/Dashboard.jsx
+++ b/frontend/routes/Dashboard.jsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -68,7 +69,7 @@ export function Component(props) {
   const rerender = () => setRerenderDep(rerenderDep + 1);
 
   return (
-    <div>
+    <Box>
       {
         <EditDashboard
           current_yml={yaml}
@@ -104,7 +105,7 @@ export function Component(props) {
           );
         })}
       </div>
-    </div>
+    </Box>
   );
 }
 
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index fcd0295..f6f0885 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -1,22 +1,119 @@
 import * as React from 'react';
 import { Command } from '../components/CommandWidgets';
 import LoadGraph from '../components/LoadGraph';
+import { makeStyles } from '@material-ui/core/styles';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 export const title = 'System Information';
 export const route = '/system_information';
 export const explanation = `Get an overview of whats going on in the linux side of your camera. 
   Ip address, system load, etc can be found here`;
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(16),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+}));
+
 export function Component() {
+  const classes = useStyles();
+
   return (
-    <div>
-      <LoadGraph interval={1000} />
-      <Command command="date" interval={1000} />
-      <Command command="uptime" interval={1000} />
-      <Command command="free -h" interval={1000} />
-      <Command command="ip a" interval={1000} />
-      <Command command="uname -a" interval={10000} />
-      <Command command="ps -aef --forest" interval={10000} />
+
+      <div className={classes.root}>
+      <Accordion defaultExpanded={true}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>Camera load</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <LoadGraph interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>date</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="date" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography className={classes.heading}>uptime</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="uptime" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>free -h</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="free -h" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>ip a</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="ip a" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>uname -a</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="uname -a" interval={10000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>ps -aef --forest</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <Command command="ps -aef --forest" interval={10000} />
+        </AccordionDetails>
+      </Accordion>
+
     </div>
   );
 }

From 8c9ecc8154b5214b9b3cccaa1cf950d0a3b97451 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Sun, 4 Apr 2021 23:22:18 +0530
Subject: [PATCH 30/33] format code

---
 frontend/components/LoadGraph.jsx     |  8 ++++----
 frontend/routes/SystemInformation.jsx | 22 ++++++++++------------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/components/LoadGraph.jsx b/frontend/components/LoadGraph.jsx
index 12b1579..843e978 100644
--- a/frontend/components/LoadGraph.jsx
+++ b/frontend/components/LoadGraph.jsx
@@ -68,8 +68,8 @@ export default function LoadGraph(props) {
           addData(result[0]);
         })
         .catch(err => {
-        <Alert severity="error">{err[1]}</Alert> 
-        console.log(err[1]);
+          <Alert severity="error">{err[1]}</Alert>;
+          console.log(err[1]);
         });
     const interval_handle = setInterval(
       callback,
@@ -81,7 +81,7 @@ export default function LoadGraph(props) {
 
   return (
     <Container className={classes.box_wrapper}>
-      <Paper className={classes.chart_paper}>
+      <Paper className={classes.chart_paper} variant="outlined">
         <div ref={chartRef} className={classes.chart} />
       </Paper>
       <Paper className={classes.tooltip} variant="outlined">
@@ -89,4 +89,4 @@ export default function LoadGraph(props) {
       </Paper>
     </Container>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index f6f0885..10b2ae8 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -13,7 +13,7 @@ export const route = '/system_information';
 export const explanation = `Get an overview of whats going on in the linux side of your camera. 
   Ip address, system load, etc can be found here`;
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
   },
@@ -27,9 +27,8 @@ export function Component() {
   const classes = useStyles();
 
   return (
-
-      <div className={classes.root}>
-      <Accordion defaultExpanded={true}>
+    <div className={classes.root}>
+      <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
@@ -38,7 +37,7 @@ export function Component() {
           <Typography className={classes.heading}>Camera load</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <LoadGraph interval={1000} />
+          <LoadGraph interval={1000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -50,7 +49,7 @@ export function Component() {
           <Typography className={classes.heading}>date</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="date" interval={1000} />
+          <Command command="date" interval={1000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -62,7 +61,7 @@ export function Component() {
           <Typography className={classes.heading}>uptime</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="uptime" interval={1000} />
+          <Command command="uptime" interval={1000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -74,7 +73,7 @@ export function Component() {
           <Typography className={classes.heading}>free -h</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="free -h" interval={1000} />
+          <Command command="free -h" interval={1000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -86,7 +85,7 @@ export function Component() {
           <Typography className={classes.heading}>ip a</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="ip a" interval={1000} />
+          <Command command="ip a" interval={1000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -98,7 +97,7 @@ export function Component() {
           <Typography className={classes.heading}>uname -a</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="uname -a" interval={10000} />
+          <Command command="uname -a" interval={10000} />
         </AccordionDetails>
       </Accordion>
       <Accordion TransitionProps={{ unmountOnExit: true }}>
@@ -110,10 +109,9 @@ export function Component() {
           <Typography className={classes.heading}>ps -aef --forest</Typography>
         </AccordionSummary>
         <AccordionDetails>
-        <Command command="ps -aef --forest" interval={10000} />
+          <Command command="ps -aef --forest" interval={10000} />
         </AccordionDetails>
       </Accordion>
-
     </div>
   );
 }

From 06850027a69af9689958dd1f5edfcb204622aabf Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Mon, 5 Apr 2021 02:55:47 +0530
Subject: [PATCH 31/33] small change in accordion

---
 frontend/index.jsx                    | 2 +-
 frontend/routes/SystemInformation.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/index.jsx b/frontend/index.jsx
index 0052019..b6f1555 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -13,7 +13,7 @@ const theme = createMuiTheme({
       contrastText: '#ffffff',
     },
     secondary: green,
-    type: 'dark',
+    type: 'light',
   },
 });
 
diff --git a/frontend/routes/SystemInformation.jsx b/frontend/routes/SystemInformation.jsx
index 10b2ae8..b3cf0a6 100644
--- a/frontend/routes/SystemInformation.jsx
+++ b/frontend/routes/SystemInformation.jsx
@@ -28,7 +28,7 @@ export function Component() {
 
   return (
     <div className={classes.root}>
-      <Accordion>
+      <Accordion defaultExpanded={true}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"

From 8cc9a8cf5fe74406c06cd140ac4baed03e6744d8 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 7 Apr 2021 17:25:40 +0530
Subject: [PATCH 32/33] added dark mode

---
 frontend/App.jsx    | 13 +++++++++++--
 frontend/Themer.jsx | 28 ++++++++++++++++++++++++++++
 frontend/index.jsx  | 21 ++-------------------
 3 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 frontend/Themer.jsx

diff --git a/frontend/App.jsx b/frontend/App.jsx
index a8e62ef..ce49596 100644
--- a/frontend/App.jsx
+++ b/frontend/App.jsx
@@ -17,6 +17,8 @@ import MenuIcon from '@material-ui/icons/Menu';
 import { useState } from 'react';
 import clsx from 'clsx';
 import { isDesktop } from './util/isDesktop';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
 
 const drawerWidth = 240;
 const useStyles = makeStyles(theme => ({
@@ -25,6 +27,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.default,
     width: '100vw',
     minHeight: '100vh',
+    flexGrow: 1,
   },
   appBar: {
     zIndex: theme.zIndex.drawer + 1,
@@ -57,9 +60,12 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 0,
   },
   toolbar: theme.mixins.toolbar,
+  title: {
+    flexGrow: 1,
+  },
 }));
 
-export function App() {
+export function App(props) {
   const classes = useStyles();
 
   const [drawerOpen, setDrawerOpen] = useState(isDesktop);
@@ -77,7 +83,7 @@ export function App() {
             <MenuIcon />
           </IconButton>
 
-          <Typography variant="h6" noWrap>
+          <Typography variant="h6" noWrap className={classes.title}>
             {process.env.MOCK ? 'Mock' : ''} AXIOM WebUi -&nbsp;
             <Switch>
               {Object.values(routes).map(({ route, title }) => (
@@ -87,6 +93,9 @@ export function App() {
               ))}
             </Switch>
           </Typography>
+          <IconButton aria-label="dark" onClick={props.changeTheme}>
+            {props.isDark ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
         </Toolbar>
       </AppBar>
 
diff --git a/frontend/Themer.jsx b/frontend/Themer.jsx
new file mode 100644
index 0000000..e9f08e6
--- /dev/null
+++ b/frontend/Themer.jsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { createMuiTheme } from '@material-ui/core';
+import { green } from '@material-ui/core/colors';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { App } from './App';
+
+export default function Themer() {
+  const [isDark, setDark] = useState(false);
+  function changeTheme() {
+    setDark(!isDark);
+  }
+  const theme = createMuiTheme({
+    palette: {
+      primary: {
+        main: '#FA8756',
+        contrastText: '#ffffff',
+      },
+      secondary: green,
+      type: isDark ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <App isDark={isDark} changeTheme={changeTheme} />
+    </ThemeProvider>
+  );
+}
diff --git a/frontend/index.jsx b/frontend/index.jsx
index b6f1555..67ab9ca 100644
--- a/frontend/index.jsx
+++ b/frontend/index.jsx
@@ -1,27 +1,10 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './App';
+import Themer from './Themer';
 import { HashRouter as Router } from 'react-router-dom';
-import { createMuiTheme } from '@material-ui/core';
-import { green } from '@material-ui/core/colors';
-import { ThemeProvider } from '@material-ui/core/styles';
-
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: '#FA8756',
-      contrastText: '#ffffff',
-    },
-    secondary: green,
-    type: 'light',
-  },
-});
-
 ReactDOM.render(
   <Router>
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
+    <Themer />
   </Router>,
   document.getElementById('root')
 );

From efb28fbd92a2e130270c786a9c9d4b3ac942a2b2 Mon Sep 17 00:00:00 2001
From: hanupratap <hanupratap1999@gmail.com>
Date: Wed, 7 Apr 2021 17:43:43 +0530
Subject: [PATCH 33/33] color highlight fix

---
 frontend/routes/Wifi.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/routes/Wifi.jsx b/frontend/routes/Wifi.jsx
index 77afa66..c9232a6 100644
--- a/frontend/routes/Wifi.jsx
+++ b/frontend/routes/Wifi.jsx
@@ -302,7 +302,7 @@ function SortableTable(props) {
                       tabIndex={-1}
                       key={index}
                       style={{
-                        background: row[in_use].length > 0 ? orange[50] : null,
+                        background: row[in_use].length > 0 ? theme.palette.action.hover: null,
                       }}
                     >
                       {Object.keys(headCells).map(function(key) {