Add pre-/post-requisite tree under each class #188
Conversation
Add Requisite Tree Diagram Visualization
There was a problem hiding this comment.
See comments in the various files. Additionally, some potential ideas/comments for improvements (which you don't necessarily need to do within this PR but would be great if you could implement):
- Tooltips to show more information about the course upon hover like course name, description, etc. There's actually a tooltip component somewhere in the codebase which could make this a quick addition
- Being able to traverse more than one level forwards or backwards in the tree. Based on how you guys have implemented the tree, might need a bit of rewrite, but would be interesting to explore the tree a bit more. So like I might be able to currently see that course A is needed for course B, but if I can also expand the prereqs to course B to see that course C is also needed in addition to course A, that could be helpful
- Showing the relationship between courses a bit clearer. For example, in the picture below, 15-300 only needs (76-101 and 15-210 and 15-213) or (76-101 and 15-213 and 15-251) or (76-101 and 15-210 and 15-251), not all of them at the same time.
Design nitpicks
- Would be nice to have the current course centered in the middle at all times so that expanding to the left/right doesn't shift the whole thing. (Can make it scrollable if we want to expand the tree further)
- Being able to expand more than one course at the same time
- I feel like the "no further postrequisites" is a bit of a mouthful haha, changing it to something else could be fun
apps/backend/src/app.ts
Outdated
| @@ -21,6 +21,7 @@ app.route("/course/:courseID").get(getCourseByID); | |||
| app.route("/courses").get(getCourses); | |||
| app.route("/courses").post(isUser, getCourses); | |||
| app.route("/courses/all").get(getAllCourses); | |||
| app.route("/courses/relations").get(getCourseRelations); | |||
There was a problem hiding this comment.
Is this endpoint being used? I don’t see it being used so if it’s not it would be best to remove the dead code
| @@ -0,0 +1,136 @@ | |||
| import React from "react"; | |||
| import Link from "next/link"; // Import Next.js Link component | |||
There was a problem hiding this comment.
Remove this dead code if it's not being used
| import React from "react"; | ||
| import { useFetchCourseInfo } from "~/app/api/course"; | ||
|
|
||
| interface TreeNode { |
There was a problem hiding this comment.
I notice use define TreeNode in a few files, would be good to put one standard definition in apps/types
|
@aattiyah is attempting to deploy a commit to the ScottyLabs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
||
| {/* Normal vertical Line connector */} | ||
| {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && ( | ||
| <div className="w-[1px] bg-[#d1d5db] self-stretch"></div> |
There was a problem hiding this comment.
Generally it would be nicer to use w-1/w-0.5 instead of hard coding pixels
|
Additionally, the mobile view isn't doing great right now: 
Adding overflow behavior could be helpful along with resizing the length of the lines between the nodes as well: https://tailwindcss.com/docs/overflow |
|
We have refactored the code to address most of the comments above including refactoring types, removing dead and redundant code, and removing fixed values for colors or sizes. We have also heavily revised the look of the tree, making it more responsive to various screen sizes and the colors responsive to light and dark modes. We have attempted the following, but I believe we won't be able to complete them in this PR since we are short on time:
All of these changes are possible, and we are happy to work on them. But we would like to do them in another PR (with priority given to course relationships). Would be great if you could take a look at the current changes. |
Description
This pull request adds the requisite tree feature, which shows a tree of pre-requisites and post-requisites of courses in the course detail page. The feature enhances the user experience by providing a clear and organized visual representation of course dependencies.
Closes #53
Type of change
How Has This Been Tested?
This feature was tested mainly through manual testing since most parts of the implementation were about the visualization and rendering of the tree. Error handling techniques were used to ensure error-free code, as well as manual validation. Backend testing also took place, as we tested the outputs of new functions we implemented.
Test Configuration:
Checklist: