frontend basics done

frontend/src/Components/NavBar/NavBar.tsx

@@ -86,10 +86,10 @@ const useStyles = createStyles((theme) => ({
 
 const data = [
   { link: '/', label: 'Home', icon: HOME_IMG },
-  { link: '/svm', label: 'SVM', icon: SVM_IMG },
-  { link: '/knn', label: 'k-NN', icon: KNN_IMG },
-  { link: '/rf', label: 'Random Forest', icon: RF_IMG },
-  { link: '/lr', label: 'Logistic Regression', icon: LR_IMG },
+  { link: '/svm', label: 'Get Your Rule', icon: SVM_IMG },
+  // { link: '/knn', label: 'Documentation', icon: KNN_IMG },
+  // { link: '/rf', label: 'Random Forest', icon: RF_IMG },
+  // { link: '/lr', label: 'Logistic Regression', icon: LR_IMG },
 ];
 
 export function NavbarSimpleColored() {
@@ -125,21 +125,15 @@ export function NavbarSimpleColored() {
         {links}
       </Navbar.Section>
 
-      <Navbar.Section className={classes.footer}>
+      {/* <Navbar.Section className={classes.footer}>
         <a href="#" className={classes.link} onClick={(event) => {
             event.preventDefault()
             navigate("/settings")
         }}>
-          {/* <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} /> */}
           <img src={SETTING_IMG} className={classes.linkIcon} />
           <span>Settings</span>
         </a>
-
-        {/* <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
-          <img src={HOME_IMG} className={classes.linkIcon} />
-          <span>Logout</span>
-        </a> */}
-      </Navbar.Section>
+      </Navbar.Section> */}
     </Navbar>
   );
 }
\ No newline at end of file

frontend/src/Components/SVM/CounterfactualTable.tsx

+import { Title, createStyles } from '@mantine/core'
+import React from 'react'
+
+const useStyle = createStyles((theme) => ({
+  table: {
+    border: "1px solid #ddd",
+    borderCollapse: "collapse",
+  },
+  td: {
+    border: "1px solid #ddd",
+    width: window.innerHeight / 4,
+    padding: "5px 10px",
+  },
+  negative: {
+    border: "1px solid #ddd",
+    width: window.innerHeight / 4,
+    padding: "5px 10px",
+    background: "green",
+    color: "white",
+  },
+  positive: {
+    border: "1px solid #ddd",
+    width: window.innerHeight / 4,
+    padding: "5px 10px",
+    background: "red",
+    color: "white",
+  }
+}))
+
+function CounterfactualTable(data: {tableData: any}) {
+  const { classes } = useStyle();
+
+  return (
+    <div>
+      <Title order={6} mt={30} mb={10}>Results</Title>
+      <table className={classes.table}>
+        {
+          data.tableData.map((e: any, i: number) => {
+            return (
+              <tr key={i}>
+                <td className={classes.positive}>{e.initial}</td>
+                {i === 0 ? <td className={classes.td} rowSpan={data.tableData.length}>Changes to</td> : null}
+                <td className={classes.negative}>{e.changedTo}</td>
+              </tr>
+            );
+          })
+        }
+      </table>
+    </div>
+  )
+}
+
+export default CounterfactualTable
\ No newline at end of file

frontend/src/Components/SVM/Prediction.tsx

+import { Text, Title } from '@mantine/core';
+
+export function Prediction(data: {prediction: string}) {
+  return (
+    <div>
+        <Title order={6} mt={60}>Prediction</Title>
+        <Text size={30} mt={10}>
+          {data.prediction}
+        </Text>
+    </div>
+  );
+}
\ No newline at end of file

frontend/src/Components/SVM/SVM.tsx

@@ -3,6 +3,11 @@ import { TextAreaCustom } from "../_common/TextAreaCustom"
 import { DropDownWidget } from "../_common/DropDownWidget";
 import { ButtonCustom } from "../_common/ButtonCustom";
 import { ScrollButton } from "../_common/ScrollButton";
+import { CustomTitle } from "../_common/CustomTitle";
+import { useWindowScroll } from "@mantine/hooks";
+import { Sentence } from "./Sentence";
+import { Prediction } from "./Prediction";
+import CounterfactualTable from "./CounterfactualTable";
 
 const useStyle = createStyles((theme) => ({
   mainContainer: {
@@ -14,19 +19,41 @@ const useStyle = createStyles((theme) => ({
 
 function SVM() {
   const { classes } = useStyle();
+  const [scroll, scrollTo] = useWindowScroll();
+
+  const tableData = [
+    {initial: "like", changedTo: "do not like"},
+    {initial: "happy", changedTo: "sad"},
+    {initial: "good", changedTo: "bad"},
+  ];
 
   return (
     <div className={classes.mainContainer}>
-      <TextAreaCustom 
-        label="Enter the review"
-        placeholder="Enter the review"
-      />
-      <DropDownWidget 
-        label="Select the Algorithm"
-        placeholder="Algorithm"
-      />
-      <ButtonCustom label="Get the rule"/>
-      <ScrollButton />
+      <div id="getData">
+        <CustomTitle title="Get Your Rule" />
+        <TextAreaCustom 
+          label="Enter the review"
+          placeholder="Enter the review"
+        />
+        <DropDownWidget 
+          label="Select the Algorithm"
+          placeholder="Algorithm"
+        />
+        <ButtonCustom 
+          label="Get the rule"
+          onClick={() => scrollTo({ y: window.innerHeight })}
+        />
+        <ScrollButton />
+      </div>
+      <div id="viewResult" style={{width: window.innerWidth / 5 * 3, height: window.innerHeight}}>
+        <CustomTitle title="Counterfactual Result" />
+        <Sentence 
+          sentence="I like apple" 
+          hightLightWords={["like"]}
+        />
+        <Prediction prediction="Positive" />
+        <CounterfactualTable tableData={tableData} />
+      </div>
     </div>
   )
 }

frontend/src/Components/SVM/Sentence.tsx

+import { Highlight, Text, Title } from '@mantine/core';
+
+export function Sentence(data: {sentence: string, hightLightWords: string[]}) {
+  return (
+    <div>
+        <Title order={6} mt={30}>Sentence</Title>
+        <Text size={30} mt={10}>
+          <Highlight highlight={data.hightLightWords}>
+            {data.sentence}
+          </Highlight>
+        </Text>
+    </div>
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/ButtonCustom.tsx

@@ -8,7 +8,7 @@ const useStyles = createStyles((theme) => ({
     }
 }))
 
-export function ButtonCustom(data: {label: string}) {
+export function ButtonCustom(data: {label: string, onClick: any}) {
   const { classes } = useStyles()
 
   return (
@@ -19,6 +19,8 @@ export function ButtonCustom(data: {label: string}) {
             radius="xl" 
             size="lg"
             mt={30}
+            mb={100}
+            onClick={data.onClick}
         >
             {data.label}
         </Button>

frontend/src/Components/_common/CustomTitle.tsx

+import { Title } from '@mantine/core';
+
+export function CustomTitle(data: {title: string}) {
+  return (
+    <>
+      <Title order={1} align='left' mt={50}>{data.title}</Title>
+    </>
+  );
+}
\ No newline at end of file