part-1 changes

DSGT-DLP · Oct 22, 2023 · 3b7256f · 3b7256f
1 parent 961ef70
commit 3b7256f
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 245 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,11 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.9.3",
     "@mui/x-data-grid": "^6.0.4",

diff --git a/frontend/src/common/components/Footer.tsx b/frontend/src/common/components/Footer.tsx
@@ -2,14 +2,16 @@ import React from "react";
 import { COLORS, URLs } from "../../constants";
 import { LinkedIn, YouTube, Instagram, GitHub } from "@mui/icons-material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faReact } from "@fortawesome/free-brands-svg-icons";
 
 const theme = createTheme({
   components: {
     MuiSvgIcon: {
       styleOverrides: {
         root: {
           fontSize: 40,
-          color: COLORS.dark_blue
+          color: COLORS.dark_blue,
         },
       },
     },
@@ -18,55 +20,38 @@ const theme = createTheme({
 
 const Footer = () => {
   return (
-    <div id="footer" data-testid="footer">
+    <div id='footer' data-testid='footer'>
       <ThemeProvider theme={theme}>
-        <div
-          className="footer-element"
-          id="footer-socials"
-          data-testid="footer-socials"
-        >
-          <a
-            className="foot-element"
-            data-testid="linkedin-icon"
-            title="Link to LinkedIn profile"
-            href={URLs.linkedin}
-          >
+        <div className='footer-element' id='footer-socials' data-testid='footer-socials'>
+          <a className='foot-element' data-testid='linkedin-icon' title='Link to LinkedIn profile' href={URLs.linkedin}>
             <LinkedIn />
           </a>
-          <a
-            className="foot-element"
-            title="Link to YouTube channel"
-            data-testid="youtube-icon"
-            href={URLs.youtube}
-          >
+          <a className='foot-element' title='Link to YouTube channel' data-testid='youtube-icon' href={URLs.youtube}>
             <YouTube />
           </a>
           <a
-            className="foot-element"
-            title="Link to Instagram profile"
-            data-testid="instagram-icon"
+            className='foot-element'
+            title='Link to Instagram profile'
+            data-testid='instagram-icon'
             href={URLs.instagram}
           >
             <Instagram />
           </a>
+          <a className='foot-element' title='Link to GitHub repository' data-testid='github-icon' href={URLs.github}>
+            <GitHub />
+          </a>
           <a
-            className="foot-element"
-            title="Link to GitHub repository"
-            data-testid="github-icon"
-            href={URLs.github}
+            className='foot-element'
+            title='Link to React documentation'
+            data-testid='react-icon'
+            href={URLs.reactLink}
           >
-            <GitHub />
+            <FontAwesomeIcon icon={faReact} style={{ fontSize: "2.5em", color: "#00233f" }} />
           </a>
         </div>
       </ThemeProvider>
-      <div
-        className="footer-element"
-        id="footer-name"
-        data-testid="footer-name"
-      >
-        <p className="copyright">
-          Deep Learning Playground © {new Date().getFullYear()}
-        </p>
+      <div className='footer-element' id='footer-name' data-testid='footer-name'>
+        <p className='copyright'>Deep Learning Playground © {new Date().getFullYear()}</p>
       </div>
     </div>
   );

diff --git a/frontend/src/common/components/NavBarMain.tsx b/frontend/src/common/components/NavBarMain.tsx
@@ -103,7 +103,7 @@ const NavbarMain = () => {
               <Grid item>
                 {isSignedIn(user) ? (
                   <Link href="/train" passHref className="nav-link">
-                    Train
+                    Hello World
                   </Link>
                 ) : null}
               </Grid>
@@ -123,7 +123,11 @@ const NavbarMain = () => {
                 </Link>
               </Grid>
               <Grid item>
-                <Link href={URLs.donate} passHref className="nav-link">
+                <Link
+                  href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                  passHref
+                  className="nav-link"
+                >
                   Donate
                 </Link>
               </Grid>

diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
@@ -15,6 +15,7 @@ export const URLs = Object.freeze({
   youtube: "https://www.youtube.com/channel/UC1DGL6Tb9ffwC-aHChadxMw",
   instagram: "https://www.instagram.com/datasciencegt/",
   github: "https://github.com/DSGT-DLP/Deep-Learning-Playground",
+  reactLink: "https://react.dev/",
 });
 
 export const GENERAL_STYLES = Object.freeze({

diff --git a/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx b/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
@@ -1,14 +1,6 @@
 import HtmlTooltip from "@/common/components/HtmlTooltip";
 import InfoIcon from "@mui/icons-material/Info";
-import {
-  Button,
-  Card,
-  Divider,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Button, Card, Divider, Paper, Stack, TextField, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import ReactFlow, {
   Background,
@@ -24,11 +16,7 @@ import ReactFlow, {
   useNodesState,
 } from "reactflow";
 import "reactflow/dist/style.css";
-import {
-  ALL_LAYERS,
-  DEFAULT_LAYERS,
-  STEP_SETTINGS,
-} from "../constants/tabularConstants";
+import { ALL_LAYERS, DEFAULT_LAYERS, STEP_SETTINGS } from "../constants/tabularConstants";
 import { ParameterData } from "../types/tabularTypes";
 import assert from "assert";
 import { nanoid } from "nanoid/non-secure";
@@ -119,21 +107,16 @@ export default function TabularFlow(props: TabularFlowProps) {
   return (
     <>
       <Paper sx={{ mb: 2 }}>
-        <Stack alignItems="center" spacing={2} padding={2}>
-          <Typography variant="h2" fontSize={25}>
+        <Stack alignItems='center' spacing={2} padding={2}>
+          <Typography variant='h2' fontSize={25}>
             Layers
           </Typography>
-          <Stack
-            direction="row"
-            gap={1}
-            flexWrap="wrap"
-            justifyContent="space-between"
-          >
+          <Stack direction='row' gap={1} flexWrap='wrap' justifyContent='space-between'>
             {STEP_SETTINGS.PARAMETERS.layerValues.map((value) => (
               <Button
                 key={value}
-                variant="outlined"
-                color="primary"
+                variant='outlined'
+                color='primary'
                 onClick={() => {
                   setNodes((cur) => [
                     ...cur,
@@ -148,9 +131,7 @@ export default function TabularFlow(props: TabularFlowProps) {
                         label: STEP_SETTINGS.PARAMETERS.layers[value].label,
                         value: value,
                         onChange: onChange,
-                        parameters: STEP_SETTINGS.PARAMETERS.layers[
-                          value
-                        ].parameters.map(() => 0),
+                        parameters: STEP_SETTINGS.PARAMETERS.layers[value].parameters.map(() => 0),
                       },
                     },
                   ]);
@@ -192,40 +173,31 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
 
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={isConnectable}
-      />
+      <Handle type='target' position={Position.Top} isConnectable={isConnectable} />
       <div>
         <Card sx={{ p: 3 }}>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            spacing={3}
-          >
+          <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={3}>
             <HtmlTooltip
               title={
                 <React.Fragment>
-                  <Typography color="inherit">{layer.label}</Typography>
+                  <Typography color='inherit'>{layer.label}</Typography>
                   {layer.description}
                 </React.Fragment>
               }
             >
               <InfoIcon>Info</InfoIcon>
             </HtmlTooltip>
 
-            <Typography variant="h3" fontSize={18}>
+            <Typography variant='h3' fontSize={18}>
               {layer.label}
             </Typography>
-            <Stack direction="row" alignItems="center" spacing={3}>
+            <Stack direction='row' alignItems='center' spacing={3}>
               <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="flex-end"
+                direction='row'
+                alignItems='center'
+                justifyContent='flex-end'
                 spacing={2}
-                divider={<Divider orientation="vertical" flexItem />}
+                divider={<Divider orientation='vertical' flexItem />}
               >
                 {layer.parameters.map((parameter, index) => (
                   <TextField
@@ -239,7 +211,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
                     key={index}
                     label={parameter.label}
                     defaultValue={data.parameters?.[index]}
-                    size="small"
+                    size='small'
                     type={parameter.type}
                     required
                   />
@@ -249,12 +221,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
           </Stack>
         </Card>
       </div>
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="b"
-        isConnectable={isConnectable}
-      />
+      <Handle type='source' position={Position.Bottom} id='b' isConnectable={isConnectable} />
     </>
   );
 }
@@ -266,9 +233,7 @@ interface OnChangeArgs {
 }
 
 interface LayerNodeData {
-  label:
-    | (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"]
-    | "Start";
+  label: (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"] | "Beginning";
   value: ALL_LAYERS | "root";
   parameters?: number[];
   onChange: (args: OnChangeArgs) => void;
@@ -282,7 +247,7 @@ const ROOT_NODE: Node<LayerNodeData> = {
   position: { x: DEFAULT_X_POSITION, y: 0 },
   deletable: false,
   data: {
-    label: "Start",
+    label: "Beginning",
     value: "root",
     parameters: [],
     onChange: () => undefined,