Revert "fix: remove unnecessary code"

This reverts commit d3f12845.
parent 4521d87e
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
This diff is collapsed.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.5",
"@mantine/core": "6.0.0",
"@mantine/hooks": "6.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.3",
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"typescript": "^4.9.3",
"web-vitals": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"typecheck": "tsc --noEmit"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
import { createStyles } from "@mantine/core";
import { ThemeProvider } from "./ThemeProvider";
import { NavbarSimpleColored } from "./Components/NavBar/NavBar";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Knn from "./Components/k-NN/k-NN";
import SVM from "./Components/SVM/SVM";
import RandomForest from "./Components/RandomForest/RandomForest";
import LogisticRegression from "./Components/LogisticRegression/LogisticRegression";
import Settings from "./Components/Settings/Settings";
import Home from "./Components/Home/Home";
const useStyles = createStyles((theme) => ({
sections: {
display: "flex",
flexDirection: "row",
position: "relative",
}
}))
export default function App() {
const { classes } = useStyles()
return (
<ThemeProvider>
<Router>
<div className={classes.sections}>
<NavbarSimpleColored />
<div style={{width: window.innerWidth/5*4, position: "absolute", right: 0}}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/svm' element={<SVM />} />
<Route path='/knn' element={<Knn />} />
<Route path='/rf' element={<RandomForest />} />
<Route path='/lr' element={<LogisticRegression />} />
<Route path='/settings' element={<Settings />} />
</Routes>
</div>
</div>
</Router>
</ThemeProvider>
);
}
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
This diff is collapsed.
function LogisticRegression() {
return (
<div>LogisticRegression</div>
)
}
export default LogisticRegression
\ No newline at end of file
import { useState } from 'react';
import { createStyles, Navbar, Group, Code, getStylesRef, rem } from '@mantine/core';
import { useNavigate } from "react-router-dom";
import HOME_IMG from '../../assets/home-icon.png';
import SVM_IMG from '../../assets/svm-icon.png'
import KNN_IMG from '../../assets/knn-icon.png'
import LR_IMG from '../../assets/lr-icon.png'
import RF_IMG from '../../assets/rf-icon.png'
import SETTING_IMG from '../../assets/setting-icon.png'
import { LOGO } from '../consts';
const useStyles = createStyles((theme) => ({
navbar: {
backgroundColor: theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background,
position: "fixed",
},
version: {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
),
color: theme.white,
fontWeight: 700,
},
header: {
paddingBottom: theme.spacing.md,
marginBottom: `calc(${theme.spacing.md} * 1.5)`,
borderBottom: `${rem(1)} solid ${theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
)}`,
},
footer: {
paddingTop: theme.spacing.md,
marginTop: theme.spacing.md,
borderTop: `${rem(1)} solid ${theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
)}`,
},
link: {
...theme.fn.focusStyles(),
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
fontSize: theme.fontSizes.sm,
color: theme.white,
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
borderRadius: theme.radius.sm,
fontWeight: 500,
'&:hover': {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
),
},
},
linkIcon: {
ref: getStylesRef('icon'),
color: theme.white,
// opacity: 0.75,
marginRight: theme.spacing.sm,
width: "30px",
height: "30px"
},
linkActive: {
'&, &:hover': {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.15
),
[`& .${getStylesRef('icon')}`]: {
opacity: 0.9,
},
},
},
}));
const data = [
{ link: '/', label: 'Home', icon: HOME_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() {
const { classes, cx } = useStyles();
const [active, setActive] = useState('Billing');
const navigate = useNavigate();
const links = data.map((item) => (
<a
className={cx(classes.link, { [classes.linkActive]: item.label === active })}
href=""
key={item.label}
onClick={(event) => {
event.preventDefault();
setActive(item.label);
navigate(item.link)
}}
>
{/* <item.icon className={classes.linkIcon} stroke={1.5} /> */}
<img src={item.icon} className={classes.linkIcon} />
<span>{item.label}</span>
</a>
));
return (
<Navbar height={window.innerHeight} width={{ sm: window.innerWidth/5 }} p="md" className={classes.navbar}>
<Navbar.Section grow>
<Group className={classes.header} position="apart">
{/* <MantineLogo size={28} inverted /> */}
<img src={LOGO} className={classes.linkIcon} />
<Code className={classes.version}>v1.0.0</Code>
</Group>
{links}
</Navbar.Section>
{/* <Navbar.Section className={classes.footer}>
<a href="#" className={classes.link} onClick={(event) => {
event.preventDefault()
navigate("/settings")
}}>
<img src={SETTING_IMG} className={classes.linkIcon} />
<span>Settings</span>
</a>
</Navbar.Section> */}
</Navbar>
);
}
\ No newline at end of file
function RandomForest() {
return (
<div>RandomForest</div>
)
}
export default RandomForest
\ No newline at end of file
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
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
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 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>
)
}
export default SVM
\ No newline at end of file
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
function Settings() {
return (
<div>Settings</div>
)
}
export default Settings
\ No newline at end of file
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
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
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
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
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
import LOGO_IMG from '../assets/logo.png';
export const LOGO = LOGO_IMG;
\ No newline at end of file
function Knn() {
return (
<div>k-NN</div>
)
}
export default Knn
\ No newline at end of file
import { MantineProvider, MantineThemeOverride } from "@mantine/core";
export const theme: MantineThemeOverride = {
colorScheme: "light",
};
interface ThemeProviderProps {
children: React.ReactNode;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
return (
<MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
{children}
</MantineProvider>
);
}
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<StrictMode>
<App />
</StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
/// <reference types="react-scripts" />
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment