Skip to content

Commit

Permalink
hihdihafds
Browse files Browse the repository at this point in the history
  • Loading branch information
@charlestang06
charlestang06 committed Jan 13, 2024
2 parents 162a93b + 171dc84 commit 1a4b950
Show file tree
Hide file tree
Showing 10 changed files with 3,468 additions and 214 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

*/package-lock.json
3,227 changes: 3,131 additions & 96 deletions package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 7 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@
"private": true,
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@ant-design/pro-components": "^2.6.43",
"@emotion/react": "^11.11.3",
"@table-library/react-table-library": "^4.1.7",
"antd": "^5.12.8",
"antd": "^5.13.0",
"dayjs": "^1.11.10",
"elkjs": "^0.9.1",
"install": "^0.13.0",
"npm": "^10.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-firebase-hooks": "^5.1.1",
Expand All @@ -32,7 +35,8 @@
"rules": {
"no-unused-vars": "off",
"react-hook/exhaustive-deps": "off",
"jsx-a11y/anchor-is-valid": "off"
"jsx-a11y/anchor-is-valid": "off",
"eqeqeq": "off"
}
},
"browserslist": {
Expand All @@ -47,4 +51,4 @@
"last 1 safari version"
]
}
}
}
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
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>
<title>WPI Roadmap</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
16 changes: 16 additions & 0 deletions src/components/Dashboard/Dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,20 @@
background-color: #FFAEBC;
/* height: 100vh; */

}

.sideButt:hover {
background-color: white !important;
color: black !important;
border-color: black !important;
}

.courseNode {
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.courseNode:hover {
cursor: pointer;
background-color: black !important;
color: white !important;
}
143 changes: 94 additions & 49 deletions src/components/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@ import { useState } from "react";
import { useNavigate } from "react-router";
import "./Dashboard.css";
import { Button, ConfigProvider, Dropdown, Form, Input, Layout, Menu, Modal, Select, theme } from "antd";

import Table from "../Table/Table.jsx";

import { MenuFoldOutlined, MenuUnfoldOutlined, ApartmentOutlined, FileTextOutlined, UserOutlined } from "@ant-design/icons";
import ReactFlow from 'reactflow';
import ReactFlow, { Background, MarkerType } from 'reactflow';
import Flow from './Flow.js';
import RequirementsSidebar from './Requirements/Requirements.js';

import 'reactflow/dist/style.css';

var data = require('./Courses.json');
const data = require('./courses.json');
const { Option } = Select;
const { Header, Sider, Content } = Layout;
var data = require('./Courses.json');

function Dashboard() {

Expand All @@ -31,30 +30,31 @@ function Dashboard() {

const items2 = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
];
];

const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
Expand Down Expand Up @@ -95,6 +95,8 @@ function Dashboard() {
desc: data.Report_Entry[i]["Course_Description"],
parentNode: courseCode.length == 3 ? 6 + data.Report_Entry.length : Number(courseCode.substring(0, 1)) - 1 + data.Report_Entry.length,
courseType: courseCode.length == 3 ? 7 : courseCode.substring(0, 1),
courseCode: data["Report_Entry"][i]["Course_Title"].slice(0, data["Report_Entry"][i]["Course_Title"].indexOf(" - ")).trim(),
professor: data["Report_Entry"][i]["Instructors"] ? data["Report_Entry"][i]["Instructors"] : "",
});
if (id % 2 == 0) {
x += 100;
Expand Down Expand Up @@ -131,6 +133,12 @@ function Dashboard() {
if (tempCourses[j].data.label.match(courseCodeRegex) == courseCodes[k]) {
tempEdges.push({
id: 'e' + first.toString() + '-' + second.toString(),
type: 'smoothstep',
markerStart: {
type: MarkerType.ArrowClosed,
width: 20,
height: 20,
},
source: tempCourses[i].id,
target: tempCourses[j].id
});
Expand All @@ -148,11 +156,13 @@ function Dashboard() {

for (let i = 1; i <= 7; i++) {
tempCourses.push({
id: i - 1 + data.Report_Entry.length,
data: { label: (i == 7 ? 'Grad' : i + '000') + 'Courses' },
style: { display: "none" },
type: 'group',
courseType: i,
id: i-1 + data.Report_Entry.length,
data: { label: (i == 7 ? 'Grad' : i + '000') + 'Courses' },
style: { display: "none" },
type: 'group',
courseType: i,
courseCode: "",
professor: ""
})
}

Expand Down Expand Up @@ -241,13 +251,30 @@ function Dashboard() {

let [q, setQ] = useState(1);

let windowContent
if (tab == 1) {
windowContent = <Content
style={{
margin: 0,//'24px 16px',
padding: 24,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
<Flow initialNodes={nodes} initialEdges={edges} />
{/* <ReactFlow nodes={nodes} edges={initialEdges} /> */}
</Content>;
} else {
// windowContent = <Table />
}

return (
<>
<ConfigProvider
theme={{
token: {
colorPrimary: '#AB2B37',

},
}}
>
Expand Down Expand Up @@ -286,69 +313,87 @@ function Dashboard() {
]}
/>
</Sider>

<Layout>
<Header
style={{
padding: 0,
background: colorBgContainer,
position: "relative",
height: 0,
}}
>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
className="sideButt"
style={{
fontSize: '16px',
width: 64,
height: 64,
width: 48,
height: 48,
position: "absolute",
top: 16,
left: 16,
zIndex: 1,
background: "black",
color: "white",
borderStyle: "solid",
borderWidth: 1,
borderColor: "white",
}}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
padding: 20,
minHeight: 280,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
{
tab == 0 ? <Flow initialNodes={nodes} initialEdges={edges} /> : tab == 1 ? <h1>Tracking Sheet</h1> :
<><h1>Profile</h1>
<h3>First Name: {first}</h3>
<h3>Last Name: {last}</h3>
<h3>Year: {year}</h3>
<h3>Major: {major}</h3>
</>
tab === 0 ?
<Flow initialNodes={nodes} initialEdges={edges} /> :
tab === 1 ? <Table />
: <>
<h1>Profile</h1>
<h3>First Name: {first}</h3>
<h3>Last Name: {last}</h3>
<h3>Year: {year}</h3>
<h3>Major: {major}</h3>
</>
}

{/* <ReactFlow nodes={nodes} edges={initialEdges} /> */}
</Content>
<RequirementsSidebar switchTree={() => { }} />
</Layout>
</Layout>
<Modal width="25rem" title="Get Started with Roadmap-WPI" open={signup} onClose={handleClose} footer={[]}>
<Modal title="Get Started!" open={signup} onClose={handleClose} footer={[]}>

<p>Tell us a little bit about yourself to customize your Roadmap-WPI experience!</p>
<p>Tell us a little bit about yourself to customize your roadmap experience!</p>
<br></br>
<Form>
<Form.Item style={{
<Form layout='vertical'>
<Form.Item label="First Name" style={{
width: "50%",
marginBottom: "10px"
}}>
<Input placeholder="First Name" size="medium" width={200} onChange={(e) => {
<Input size="medium" width={200} onChange={(e) => {
setFirst(e.target.value)
}}></Input>
</Form.Item>
<Form.Item style={{
<Form.Item label="Last Name" style={{
width: "50%",
marginBottom: "10px"
}}>
<Input placeholder="Last Name" size="medium" width={200} onChange={(e) => {
<Input size="medium" width={200} onChange={(e) => {
setLast(e.target.value)
}}
/>
</Form.Item>
<Form.Item style={{
<Form.Item label="Year" style={{
width: "50%",
marginBottom: "10px"
}}>
<Select
size="medium"
Expand All @@ -363,7 +408,7 @@ function Dashboard() {
</Select>
</Form.Item>

<Form.Item style={{
<Form.Item label="Major" style={{
width: "50%",
}}>
<Select
Expand Down
27 changes: 22 additions & 5 deletions src/components/Dashboard/Flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import ReactFlow, {
import 'reactflow/dist/style.css';
import DataParse from '../DataParse/DataParse';


import profRatings from '../DataParse/ProfessorRating.json';
import classRatings from '../DataParse/CourseRatings.json';
import data from "../DataParse/prod-data.json"

const elk = new ELK();
const elkOptions = {
Expand All @@ -28,12 +30,23 @@ const elkOptions = {
'elk.partitioning.activate': 'true',
};

const lerpColor = (h1, h2, progress) => {
return `hsl(${h1 + Math.round((h2-h1) * progress)}, 100%, 80%)`
}

const getLayoutedElements = (nodes, edges, options = {}) => {
const isHorizontal = options?.['elk.direction'] === 'RIGHT';
const easyColor = 125;
const hardColor = 0;
const graph = {
id: 'root',
layoutOptions: options,
children: nodes.map((node) => ({
children: nodes.map((node) => {
const courseRating = classRatings[node.courseCode] ? classRatings[node.courseCode] : Math.round(Math.random() * 100);
const profRating = profRatings[node.professor] ? profRatings[node.professor] : Math.round(Math.random() * 100);
const projRating = 0.6 * profRating + 0.4 * courseRating;
// console.log("rating " + projRating);

return {
...node,
// Adjust the target and source handle positions based on the layout
// direction.
Expand All @@ -46,7 +59,11 @@ const getLayoutedElements = (nodes, edges, options = {}) => {
// Hardcode a width and height for elk to use when layouting.
width: 150,
height: 50,
})),
className: "courseNode",
style: {
backgroundColor: projRating ? lerpColor(easyColor, hardColor, projRating/100) : "white",
}
}}),
edges: edges,
};

Expand Down Expand Up @@ -93,7 +110,7 @@ function FlowWithoutProvider({initialNodes, initialEdges}) {

// Calculate the initial layout on mount.
useLayoutEffect(() => {
onLayout({ direction: 'DOWN', useInitialNodes: true });
onLayout({ direction: 'UP', useInitialNodes: true });
}, []);


Expand Down
Loading

0 comments on commit 1a4b950

Please sign in to comment.