Merge branch 'IT20013950-Lakshani' into 'master'

Frontend & k-NN model training

See merge request !4

frontend/src/App.tsx

@@ -13,6 +13,7 @@ const useStyles = createStyles((theme) => ({
   sections: {
     display: "flex",
     flexDirection: "row",
+    position: "relative",
   }
 }))
 
@@ -23,7 +24,7 @@ export default function App() {
       <Router>
         <div className={classes.sections}>
           <NavbarSimpleColored />
-          <div style={{width: window.innerWidth/5*4}}>
+          <div style={{width: window.innerWidth/5*4, position: "absolute", right: 0}}>
             <Routes>
               <Route path='/' element={<Home />} />
               <Route path='/svm' element={<SVM />} />

frontend/src/Components/Card/CardCustom.tsx

+import { Card, Image, Text } from '@mantine/core';
+
+export function CardCustom(data: {src: string, title: string}) {
+  return (
+    <Card
+      shadow="xl"
+      padding="xl"
+      component="a"
+    //   href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+      target="_blank"
+    >
+      <Card.Section>
+        <Image
+          src={data.src}
+          height={160}
+          alt="No way!"
+        />
+      </Card.Section>
+
+      <Text weight={500} size="lg" mt="md">
+        {data.title}
+      </Text>
+
+      {/* <Text mt="xs" color="dimmed" size="sm">
+        try {data.title} ...
+      </Text> */}
+    </Card>
+  );
+}
\ No newline at end of file

frontend/src/Components/NavBar/NavBar.tsx

@@ -13,6 +13,7 @@ import { LOGO } from '../consts';
 const useStyles = createStyles((theme) => ({
   navbar: {
     backgroundColor: theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background,
+    position: "fixed",
   },
 
   version: {
@@ -85,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() {
@@ -124,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

+import { createStyles } from "@mantine/core"
+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: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  }
+}))
+
 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>SVM</div>
+    <div className={classes.mainContainer}>
+      <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

+import { Button, createStyles } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+    container: {
+        width: window.innerWidth / 5 * 3,
+        display: "flex",
+        justifyContent: "end",
+    }
+}))
+
+export function ButtonCustom(data: {label: string, onClick: any}) {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.container}>
+        <Button 
+            variant="gradient" 
+            gradient={{ from: 'teal', to: 'blue', deg: 60 }}
+            radius="xl" 
+            size="lg"
+            mt={30}
+            mb={100}
+            onClick={data.onClick}
+        >
+            {data.label}
+        </Button>
+    </div>
+  );
+}
\ No newline at end of file

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

frontend/src/Components/_common/DropDownWidget.tsx

+import { Select } from '@mantine/core';
+
+export function DropDownWidget(data: {label: string, placeholder: string}) {
+  return (
+    <Select
+      mt={30}
+      label={data.label}
+      placeholder={data.placeholder}
+      data={[
+        { value: 'SVM', label: 'Support Vector Machine' },
+        { value: 'random forest', label: 'Random Forest' },
+        { value: 'logistic Regression', label: 'Logistic Regression' },
+        { value: 'KNN', label: 'K-Nearest Neighbor' },
+      ]}
+      style={{width: window.innerWidth / 5 * 3}}
+    />
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/ScrollButton.tsx

+import { useWindowScroll } from '@mantine/hooks';
+import { Button, createStyles } from '@mantine/core';
+
+const useStyle = createStyles((theme) => ({
+    button: {
+        position: "fixed",
+        bottom: 50,
+        right: 50,
+        width: "50px",
+        height: "50px",
+        borderRadius: "50%",
+    }
+}))
+
+export function ScrollButton() {
+  const [scroll, scrollTo] = useWindowScroll();
+  const { classes } = useStyle()
+
+  return (
+    <Button className={classes.button} onClick={() => scrollTo({ y: 0 })}>^</Button>
+
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/TextAreaCustom.tsx

+import { Textarea } from "@mantine/core";
+
+export function TextAreaCustom(data: {placeholder: string, label: string}) {
+  return (
+    <Textarea
+      mt={30}
+      placeholder={data.placeholder}
+      label={data.label}
+      style={{width: window.innerWidth / 5 * 3}}
+      minRows={10}
+      autosize={true}
+      withAsterisk
+    />
+  );
+}
\ No newline at end of file