Reroute pointless OR nodes
22 |New OR node
29 |New AND node
32 |About
25 |26 | Prereq Flow is an unofficial course planning aid for University of 27 | Washington students that visualizes courses and prerequisites in 28 | undergraduate degrees. 29 |
30 | 31 |32 | Powered by{" "} 33 | 34 | React Flow 35 | {" "} 36 | in the front and{" "} 37 | 42 | FastAPI 43 | {" "} 44 | in the back. Built with{" "} 45 | 46 | Vite 47 | {" "} 48 | and hosted on 49 | 50 | Vercel 51 | 52 | . 53 |
54 | 55 |
56 |
62 |
63 | Source code
64 |
65 |
Archived on December 1, 2023
30 |31 | You've reached the archived version of Prereq Flow, last updated on 32 | December 1, 2023. Data for a limited number of majors and courses has 33 | been kept for demo purposes. 34 |
35 |
50 | {}}
53 | busy={busy}
54 | />
55 |
64 |
78 |
79 |
93 | csUpdater.value("ambiguityHandling", a)}
96 | busy={busy}
97 | />
98 |
110 | );
111 | }
112 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/DegreeSelect.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .DegreeSelect {
4 | .majors,
5 | .minors {
6 | margin-bottom: 0.5rem;
7 |
8 | &__selected-list {
9 | height: 6rem;
10 | margin: 0.5rem 0;
11 | }
12 | &__selected-item {
13 | display: flex;
14 | justify-content: space-between;
15 | margin: 0.5rem 0;
16 | padding-left: 0.5rem;
17 | font-size: 0.9rem;
18 | line-height: 1.5rem;
19 |
20 | background-color: hsl(0, 0%, 97%);
21 | }
22 |
23 | &__add-button,
24 | &__delete-button {
25 | margin-left : 0.25rem;
26 | height: 1.5rem;
27 | width: 1.5rem;
28 | }
29 |
30 | &__add-button {
31 | @include img-button-style(70);
32 | }
33 | &__delete-button {
34 | @include img-button-style(75);
35 | }
36 |
37 | &__bar-and-button {
38 | display: flex;
39 | justify-content: space-between;
40 | }
41 | &__select-input {
42 | flex-grow: 1;
43 | height: 1.5rem;
44 | }
45 | }
46 |
47 | .AmbiguitySelect {
48 | margin-top: 1rem;
49 | }
50 |
51 | &__get-courses-button {
52 | @include base-button-style;
53 | font-size: 1rem;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/NewFlowTextSearch.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .NewFlowTextSearch {
4 | &__textarea {
5 | flex: 1 0;
6 |
7 | @include gray-border;
8 | width: 100%;
9 | resize: none;
10 | margin: 0.5rem 0 2.5rem;
11 | padding: 0.25rem;
12 |
13 | font-family: sans-serif;
14 | font-size: 0.8rem;
15 | }
16 |
17 | &__button-wrapper {
18 | margin-bottom: 0;
19 | }
20 | &__get-courses-button {
21 | @include base-button-style;
22 | font-size: 1rem;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/NewFlowTextSearch.tsx:
--------------------------------------------------------------------------------
1 | import type { MouseEvent } from "react";
2 | import { useEffect, useRef } from "react";
3 |
4 | import Tippy from "@tippyjs/react";
5 | // eslint-disable-next-line import/no-extraneous-dependencies
6 | import "tippy.js/dist/tippy.css";
7 |
8 | import type { SetState } from "types/main";
9 |
10 | import "./NewFlowTextSearch.scss";
11 | import AmbiguitySelect from "../AmbiguitySelect";
12 |
13 | import type { TextSearchState } from "./types";
14 |
15 | interface TextSearchProps {
16 | tabIndex: number;
17 | connectionError: boolean;
18 | busy: boolean;
19 | tsState: TextSearchState;
20 | setTsState: SetState
99 |
107 |
108 |
109 |
49 |
58 |
72 |
73 |
74 | {
77 | setTsState(prev => ({ ...prev, ambiguityHandling: a }));
78 | }}
79 | busy={busy}
80 | />
81 |
82 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/PreWarning.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .PreWarning {
4 | & > section {
5 | position: relative;
6 | }
7 | overflow-y: scroll;
8 |
9 | p:not(:first-of-type) {
10 | margin-top: 1rem;
11 | }
12 |
13 |
14 | li {
15 | margin-top: 0.25rem;
16 | margin-left: 1.5rem;
17 | list-style-type: square;
18 | }
19 |
20 | &__accept-button {
21 | @include base-button-style;
22 | font-size: 1rem;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/PreWarning.tsx:
--------------------------------------------------------------------------------
1 | import type { RefObject } from "react";
2 |
3 | import "./PreWarning.scss";
4 |
5 | import type { SetState } from "types/main";
6 |
7 | interface PreWarningProps {
8 | warningAccepted: number;
9 | setWarningAccepted: SetState
83 |
91 |
92 |
19 |
20 |
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/index.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .NewFlowDialog {
4 | width: min(30rem, 100% - 1rem);
5 | overflow-x: hidden;
6 | padding: 1rem 0 0 0;
7 |
8 | h2 {
9 | margin: 0.5rem 1rem;
10 | margin-top: 0;
11 |
12 | position: relative;
13 |
14 | &.connection-error::after {
15 | content: "Connection error";
16 | position: absolute;
17 | display: inline-block;
18 | margin-left: 1rem;
19 | padding: 5px 9px;
20 | border-radius: 4px;
21 |
22 | font-size: 14px;
23 | font-weight: normal;
24 | color: white;
25 | background: darkred;
26 | }
27 | }
28 |
29 | h3 {
30 | margin: 0.5rem 0;
31 | }
32 |
33 | hr {
34 | margin: 0 1rem;
35 | }
36 |
37 | &__slides {
38 | width: 200%;
39 |
40 | display: flex;
41 | max-height: 26rem;
42 |
43 | @media (prefers-reduced-motion: no-preference) {
44 | transition: transform 250ms;
45 | }
46 |
47 | // No transform for slide-0
48 | &.slide-1 {
49 | transform: translateX(calc(100%/-2));
50 | }
51 |
52 | & > * {
53 | width: calc(100%/2);
54 | padding: 0 1rem;
55 | }
56 | }
57 | }
58 |
59 | .FlowType {
60 | [data-reach-tab-list] {
61 | height: 1.8rem;
62 | }
63 |
64 | [data-reach-tabs] {
65 | height: calc(100% - 1rem);
66 | }
67 |
68 | [data-reach-tab-panels] {
69 | height: calc(100% - 1.8rem);
70 | }
71 |
72 | [data-reach-tab-panel] {
73 | height: 100%;
74 | }
75 | }
76 |
77 | .PreWarning,
78 | .DegreeSelect,
79 | .CurriculumSelect,
80 | .NewFlowTextSearch,
81 | .NewBlankFlow {
82 | display: flex;
83 | flex-direction: column;
84 |
85 | &__button-wrapper {
86 | margin: 1rem 0;
87 | display: flex;
88 | justify-content: flex-end;
89 | }
90 | }
91 |
92 | .DegreeSelect,
93 | .CurriculumSelect,
94 | .NewFlowTextSearch,
95 | .NewBlankFlow {
96 | height: 100%;
97 |
98 | &__end-padding {
99 | flex-grow: 1;
100 | background-image: url("../../../icons/x-gray.svg");
101 | }
102 | }
103 |
104 | .NewBlankFlow {
105 | p {
106 | margin-top: 0.5rem;
107 | }
108 |
109 | &__generate-button {
110 | @include base-button-style;
111 | font-size: 1rem;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/components/dialogs/NewFlowDialog/types.d.ts:
--------------------------------------------------------------------------------
1 | import type { AmbiguityHandling } from "../AmbiguitySelect";
2 |
3 | export interface DegreeSelectState {
4 | majors: string[];
5 | selected: string;
6 | ambiguityHandling: AmbiguityHandling;
7 | errorMsg: string;
8 | }
9 |
10 | export interface CurriculumSelectState {
11 | selected: string;
12 | includeExternal: boolean;
13 | ambiguityHandling: AmbiguityHandling;
14 | errorMsg: string;
15 | }
16 |
17 | export interface TextSearchState {
18 | text: string;
19 | ambiguityHandling: AmbiguityHandling;
20 | errorMsg: string;
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/dialogs/OpenFileDialog/Dropzone.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useMemo } from "react";
2 |
3 | import classNames from "classnames";
4 |
5 | import { useDropzone } from "react-dropzone";
6 | // https://react-dropzone.js.org/#section-styling-dropzone
7 |
8 | import type { SetState } from "types/main";
9 |
10 | interface DropzoneProps {
11 | busy: boolean;
12 | errorMsg: string;
13 | setErrorMsg: SetState⚠️ Important information ⚠️
21 |22 | Prereq Flow is not an official University of Washington resource. No 23 | guarantees are made about the accuracy, completeness, or 24 | up-to-dateness of any information presented. 25 |
26 | 27 |Some limitations to keep in mind:
28 |-
29 |
- Grouping and either/or conditions are not displayed. 30 |
- Co-requisite conditions are not displayed. 31 |
- Registration restrictions are not displayed. 32 |
35 | All caveats for Prereq Map (now part of{" "} 36 | 42 | DawgPath 43 | 44 | ) also apply here: 45 |
46 |-
47 |
- 48 | Prerequisites and graduation requirements may change over time. 49 | 50 |
- 51 | Non-course graduation requirements (e.g. 5 credits of VLPA) are 52 | not displayed. 53 | 54 |
- 55 | Equivalencies (e.g. placements tests, AP credits) are 56 | not displayed. 57 | 58 |
Talk to your advisor when course planning.
60 |
61 |
75 |
76 |
85 | {/* eslint-disable-next-line react/jsx-props-no-spreading */}
86 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/components/dialogs/OpenFileDialog/index.scss:
--------------------------------------------------------------------------------
1 | .OpenFileDialog {
2 | width: min(20rem, 100% - 1rem);
3 | min-height: 10rem;
4 |
5 | h2 {
6 | margin-bottom: 0.5rem;
7 | }
8 |
9 | .Dropzone {
10 | & > div {
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | padding: 2rem 1rem;
15 | border-width: 2px;
16 | border-radius: 2px;
17 | border-color: gray;
18 | border-style: dashed;
19 | background-color: hsl(0, 0%, 98%);
20 | color: black;
21 | outline: none;
22 | @media (prefers-reduced-motion: no-preference) {
23 | transition: border .24s ease-in-out;
24 | }
25 |
26 | &:hover,
27 | &:focus {
28 | background-color: hsl(0, 0%, 95%);
29 | }
30 | }
31 |
32 | &--disabled > div {
33 | background-color: hsl(0, 0%, 90%);
34 | }
35 |
36 | p.error {
37 | color: red;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/dialogs/TableDialog.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .TableDialog {
4 | overflow-y: auto;
5 |
6 | // https://css-tricks.com/sticky-as-a-local-fixed/
7 | .CloseButton {
8 | position: sticky;
9 | top: 0;
10 | left: calc(100% - 1.5rem);
11 | }
12 |
13 | &__prereq-warning {
14 | margin-bottom: 1rem;
15 | }
16 |
17 | .SortBy {
18 | margin: 0.25rem 0;
19 | border: none;
20 | display: flex;
21 |
22 | &__radio-label:first-child {
23 | margin-left: 0.5rem;
24 | }
25 |
26 | &__radio-label:not(:last-child) {
27 | margin-right: 1rem;
28 | }
29 |
30 | &__radio-button {
31 | margin-right: 0.25rem;
32 | }
33 | }
34 |
35 | &__course-table {
36 | border-collapse: collapse;
37 | font-size: 0.9rem;
38 |
39 | tr:nth-child(even) td {
40 | background-color: rgb(250,250,250);
41 | }
42 |
43 | tr:nth-child(odd) td {
44 | background-color: rgb(245,245,245);
45 | }
46 |
47 | td,
48 | th {
49 | border: 1px solid rgb(190,190,190);
50 | padding: 0.75rem 0.5rem;
51 |
52 | // Name
53 | &:nth-child(3) {
54 | min-width: 10rem;
55 | max-width: 20rem;
56 | }
57 |
58 | // Prerequisite
59 | &:nth-child(4) {
60 | min-width: 10rem;
61 | max-width: 30rem;
62 |
63 | a[class="uw-course-id"] {
64 | text-decoration: none;
65 |
66 | &:hover {
67 | text-decoration: underline;
68 | }
69 | }
70 | }
71 |
72 | // Offered
73 | &:nth-child(5) {
74 | max-width: 12.5rem;
75 |
76 | .offered-autumn,
77 | .offered-winter,
78 | .offered-spring,
79 | .offered-summer {
80 | border-radius: 0;
81 | }
82 | }
83 | }
84 |
85 | th {
86 | background-color: rgb(235,235,235);
87 | text-align: start;
88 | }
89 |
90 | td {
91 | vertical-align: top;
92 |
93 | // Depth
94 | &:first-child {
95 | text-align: center;
96 | }
97 |
98 | &:nth-child(2),
99 | &:nth-child(4),
100 | &:nth-child(6),
101 | &:nth-child(7) {
102 | a:hover {
103 | @each $status, $color in $flow-colors {
104 | &.#{$status} {
105 | color: white;
106 | background-color: $color;
107 | text-decoration: none;
108 | }
109 | }
110 | }
111 | }
112 |
113 | &:nth-child(2) a,
114 | &:nth-child(4) a,
115 | &:nth-child(6) a,
116 | &:nth-child(7) a,
117 | span {
118 | @each $status, $color in $flow-colors {
119 | padding: 0 0.1rem;
120 | border-radius: 3px;
121 | &.#{$status} {
122 | text-decoration: underline $color 3px;
123 | }
124 | }
125 | }
126 |
127 | .uw-course-id {
128 | white-space: nowrap;
129 | }
130 | }
131 |
132 |
133 | ul {
134 | list-style-type: none;
135 | }
136 |
137 | li {
138 | display: flex;
139 | align-items: center;
140 | white-space: nowrap;
141 |
142 | height: 1.4rem;
143 |
144 | span {
145 | height: 1.25rem;
146 | line-height: 1.25rem;
147 | }
148 | }
149 | }
150 |
151 | &__small-delete-btn {
152 | height: 1.25rem;
153 | width: 1.25rem;
154 | margin-right: 0.1rem;
155 |
156 | @include img-button-style(100);
157 | }
158 |
159 |
160 | &__large-delete-btn {
161 | margin: 0 auto;
162 | height: 2rem;
163 | width: 2rem;
164 |
165 | @include img-button-style(100);
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/src/components/flow/AndNode.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 |
3 | import { Handle, Position } from "react-flow-renderer";
4 |
5 | import type { BaseNodeData } from "types/main";
6 |
7 | export default function AndNode({ data }: { data: BaseNodeData }): JSX.Element {
8 | return (
9 |
87 | {/* eslint-disable-next-line react/jsx-props-no-spreading */}
88 |
89 |
93 | 90 | {errorMsg.length ? errorMsg : message} 91 |
92 |
14 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/flow/CourseNode.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from "react";
2 |
3 | import classNames from "classnames";
4 |
5 | import Tippy from "@tippyjs/react";
6 | // eslint-disable-next-line import/no-extraneous-dependencies
7 | import "tippy.js/dist/tippy.css";
8 |
9 | import { Handle, Position } from "react-flow-renderer";
10 |
11 | import type { InnerText, CourseNodeData } from "types/main";
12 |
13 | import usePrefersReducedMotion from "@usePrefersReducedMotion";
14 | import { CRS } from "@utils";
15 |
16 | function capitalizeFirstCharacter(text: string): string {
17 | return `${text.charAt(0).toUpperCase()}${text.slice(1)}`;
18 | }
19 |
20 | export function splitByCourses(
21 | text: string,
22 | capitalizeFirst = false,
23 | ): InnerText {
24 | if (capitalizeFirst) {
25 | return capitalizeFirstCharacter(text)
26 | .replaceAll("/", "/\u200B")
27 | .split(new RegExp(`(${CRS})`));
28 | } else {
29 | return text.replaceAll("/", "/\u200B").split(new RegExp(`(${CRS})`));
30 | }
31 | }
32 |
33 | export function generateUwCourseElements(
34 | innerHTML: InnerText,
35 | elemFunc: (elemText: string, i: number) => ReactElement,
36 | ): void {
37 | for (let i = 1; i < innerHTML.length; i += 2) {
38 | innerHTML[i] = elemFunc(innerHTML[i] as string, i);
39 | }
40 | }
41 |
42 | function highlightUwCourses(text: string): InnerText {
43 | const innerHTML = splitByCourses(text, true);
44 | generateUwCourseElements(innerHTML, (elemText, i) => (
45 |
46 | {elemText}
47 |
48 | ));
49 | return innerHTML;
50 | }
51 |
52 | const QUARTER_REGEX = {
53 | autumn: /\bA(?=W|Sp|S|\b)(?=[WSp]*\.\s*$)/,
54 | winter: /\bW(?=Sp|S|\b)(?=[Sp]*\.\s*$)/,
55 | spring: /\bSp(?=S|\b)(?=S?\.\s*$)/,
56 | summer: /\bS(?=\b\.\s*$)/,
57 | };
58 | export function markOfferedQuarters(innerHTML: InnerText): void {
59 | for (const [quarter, regex] of Object.entriesAND
16 | Offered: {offeredHTML}
; 96 | } 97 | 98 | const tippyContent = ( 99 | <> 100 |101 | {data.id} — {data.name} ({data.credits}) 102 |
103 |{descriptionHTML}
104 |105 |
Prerequisite: {prereqHTML}
106 | {offeredHTML} 107 | 108 | ); 109 | 110 | return ( 111 |
127 |
131 | {data.id}
129 |
14 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/header/Header.scss:
--------------------------------------------------------------------------------
1 | @use "src/utils" as *;
2 |
3 | .Header {
4 | position: absolute;
5 | top: 0;
6 | left: 50%;
7 | transform: translateX(-50%);
8 | z-index: 10;
9 |
10 | &--pinned {
11 | .Header__content {
12 | transform: translateY(0);
13 | }
14 | .Header__pin-button img {
15 | transform: rotate(0);
16 | }
17 | }
18 |
19 | &:hover &__content{
20 | transform: translateY(0);
21 | }
22 | &:not(:hover) &__content {
23 | transition-delay: 500ms;
24 | }
25 |
26 | &__content {
27 | transform: translateY(-100%);
28 |
29 | @media (prefers-reduced-motion: no-preference) {
30 | transition: transform 250ms;
31 | }
32 |
33 | @include lightgray-border;
34 | border-top: none;
35 | border-top-left-radius: 0;
36 | border-top-right-radius: 0;
37 | padding: 0.5rem;
38 | background: rgba(white, 0.95);
39 | }
40 |
41 | &__pin-button {
42 | position: absolute;
43 | top: 0.5rem;
44 | left: 0.5rem;
45 | z-index: 10;
46 |
47 | height: 1.5rem;
48 | width: 1.5rem;
49 |
50 | @include img-button-style(90);
51 |
52 | img {
53 | transform: rotate(-90deg);
54 | @media (prefers-reduced-motion: no-preference) {
55 | transition: transform 50ms;
56 | }
57 | }
58 |
59 | &:not(:disabled):hover img {
60 | filter: invert(100%);
61 | }
62 | }
63 |
64 | h1 {
65 | text-align: center;
66 | }
67 |
68 | &__nav-buttons {
69 | display: flex;
70 | margin-top: 0.5rem;
71 |
72 | .HeaderButton {
73 | @include base-button-style;
74 | margin: 0 0.25rem;
75 | &:first-child {
76 | margin-left: 0;
77 | }
78 | &:last-child {
79 | margin-right: 0;
80 | }
81 | }
82 | }
83 |
84 | &__version {
85 | position: absolute;
86 | top: 0.5rem;
87 | right: 0.5rem;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/header/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import type { ReactNode } from "react";
3 |
4 | import classNames from "classnames";
5 |
6 | import Tippy from "@tippyjs/react";
7 | // eslint-disable-next-line import/no-extraneous-dependencies
8 | import "tippy.js/dist/tippy.css";
9 |
10 | import usePrefersReducedMotion from "@usePrefersReducedMotion";
11 | import triangleIcon from "@icons/triangle.svg";
12 |
13 | import "./Header.scss";
14 |
15 | interface HeaderProps {
16 | children: ReactNode;
17 | }
18 | export default function Header({ children }: HeaderProps): JSX.Element {
19 | const prefersReducedMotion = usePrefersReducedMotion();
20 |
21 | const [pinned, setPinned] = useState(true);
22 |
23 | return (
24 | OR
16 |
26 |
33 |
40 |
41 |
45 |