Restore prerequisite tree on frontend (#3463)

* Enable new prereq tree

* Update test snapshots

* Fix mild text presentation bug

* Fix lint

* Remove unnecessary comment

* Support nOf operator

* Fix planner prereq checks

* Fix planner conflict text

Author: chrisgzf

website/src/types/modules.ts

@@ -27,7 +27,11 @@ export type WeekRange = {
 };
 
 // Recursive tree of module codes and boolean operators for the prereq tree
-export type PrereqTree = string | { and: PrereqTree[] } | { or: PrereqTree[] };
+export type PrereqTree =
+  | string
+  | { and: PrereqTree[] }
+  | { or: PrereqTree[] }
+  | { nOf: [number, PrereqTree[]] };
 
 // Auxiliary data types
 export type Day =

website/src/utils/planner.ts

@@ -14,6 +14,8 @@ export const EXEMPTION_SEMESTER: Semester = -1;
 export const PLAN_TO_TAKE_YEAR = '3000';
 export const PLAN_TO_TAKE_SEMESTER = -2;
 
+const GRADE_REQUIREMENT_SEPARATOR = ':';
+
 // We assume iBLOCs takes place in special term 1
 export const IBLOCS_SEMESTER = 3;
 
@@ -36,6 +38,10 @@ export function getSemesterName(semester: Semester) {
 export function checkPrerequisite(moduleSet: Set<ModuleCode>, tree: PrereqTree) {
   function walkTree(fragment: PrereqTree): PrereqTree[] | null {
     if (typeof fragment === 'string') {
+      if (fragment.includes(GRADE_REQUIREMENT_SEPARATOR)) {
+        const [module] = fragment.split(GRADE_REQUIREMENT_SEPARATOR);
+        return moduleSet.has(module) ? null : [module];
+      }
       return moduleSet.has(fragment) ? null : [fragment];
     }
 
@@ -51,6 +57,12 @@ export function checkPrerequisite(moduleSet: Set<ModuleCode>, tree: PrereqTree)
       return notFulfilled.length === 0 ? null : flatten(notFulfilled);
     }
 
+    if ('nOf' in fragment) {
+      const requiredCount = fragment.nOf[0];
+      const fulfilled = fragment.nOf[1].map(walkTree).filter((x) => x === null);
+      return fulfilled.length >= requiredCount ? null : [fragment];
+    }
+
     return assertNever(fragment);
   }
 
@@ -71,6 +83,11 @@ export function conflictToText(conflict: PrereqTree): string {
     return conflict.and.map(conflictToText).join(' and ');
   }
 
+  if ('nOf' in conflict) {
+    const [n, conflicts] = conflict.nOf;
+    return `require ${n} of ${conflicts.map(conflictToText).join(', ')}`;
+  }
+
   return assertNever(conflict);
 }
 

website/src/views/modules/ModulePageContent.tsx

@@ -27,8 +27,10 @@ import Title from 'views/components/Title';
 import { Archive, Check } from 'react-feather';
 
 import useScrollToTop from 'views/hooks/useScrollToTop';
+import ErrorBoundary from 'views/errors/ErrorBoundary';
 import styles from './ModulePageContent.scss';
 import ReportError from './ReportError';
+import ModuleTree from './ModuleTree';
 
 export type Props = {
   module: Module;
@@ -257,10 +259,7 @@ const ModulePageContent: React.FC<Props> = ({ module, archiveYear }) => {
             </section>
           </div>
 
-          {/* Disabled for now because a new parser needs to be written to
-          process the new updated requisite string. */}
-
-          {/* <section className={styles.section} id={SIDE_MENU_ITEMS.prerequisites}>
+          <section className={styles.section} id={SIDE_MENU_ITEMS.prerequisites}>
             <h2 className={styles.sectionHeading}>Prerequisite Tree</h2>
             <ErrorBoundary>
               <ModuleTree
@@ -269,14 +268,6 @@ const ModulePageContent: React.FC<Props> = ({ module, archiveYear }) => {
                 fulfillRequirements={module.fulfillRequirements}
               />
             </ErrorBoundary>
-          </section> */}
-
-          <section className={styles.section} id={SIDE_MENU_ITEMS.prerequisites}>
-            <h2 className={styles.sectionHeading}>Prerequisite Tree</h2>
-            <p>
-              The prerequisite tree is now being improved to support the new (and more accurate)
-              prerequisite information provided by NUS. It will be back soon!
-            </p>
           </section>
 
           <section className={styles.section} id={SIDE_MENU_ITEMS.timetable}>

website/src/views/modules/ModuleTree.tsx

@@ -20,17 +20,56 @@ interface TreeDisplay {
   isPrereq?: boolean;
 }
 
-const formatConditional = (name: string) => (name === 'or' ? 'one of' : 'all of');
+const GRADE_REQUIREMENT_SEPARATOR = ':';
+const MODULE_NAME_WILDCARD = '%';
+const PASSING_GRADE = 'D';
+
+const formatConditional = (node: PrereqTree) => {
+  if (typeof node === 'string') return node;
+  if ('nOf' in node) {
+    const requiredNum = node.nOf[0];
+    return `at least ${requiredNum} of`;
+  }
+  if ('or' in node) {
+    return 'one of';
+  }
+  return 'all of';
+};
 
-const nodeName = (node: PrereqTree) => (typeof node === 'string' ? node : Object.keys(node)[0]);
+const nodeName = (node: PrereqTree) => {
+  if (typeof node !== 'string') {
+    return Object.keys(node)[0];
+  }
+  let name = node;
+  if (name.includes(GRADE_REQUIREMENT_SEPARATOR)) {
+    const [moduleName, requiredGrade] = name.split(GRADE_REQUIREMENT_SEPARATOR);
+    if (requiredGrade !== PASSING_GRADE) {
+      name = `${moduleName} (grade of at least ${requiredGrade})`;
+    } else {
+      name = moduleName;
+    }
+  }
+  if (name.includes(MODULE_NAME_WILDCARD)) {
+    const [beforeWildcard, afterWildcard] = name.split(MODULE_NAME_WILDCARD);
+    name = `course that starts with "${beforeWildcard}" ${afterWildcard}`;
+  }
+  return name.trim();
+};
 
-const unwrapLayer = (node: PrereqTree) =>
-  typeof node === 'string' ? [node] : flatten(values(node).filter(notNull));
+const unwrapLayer = (node: PrereqTree) => {
+  if (typeof node === 'string') {
+    return [node];
+  }
+  if ('nOf' in node) {
+    return node.nOf[1];
+  }
+  return flatten(values(node).filter(notNull));
+};
 
 const Branch: React.FC<{ nodes: PrereqTree[]; layer: number }> = (props) => (
   <ul className={styles.tree}>
-    {props.nodes.map((child) => (
-      <li className={styles.branch} key={nodeName(child)}>
+    {props.nodes.map((child, idx) => (
+      <li className={styles.branch} key={typeof child === 'string' ? nodeName(child) : idx}>
         <Tree node={child} layer={props.layer} />
       </li>
     ))}
@@ -53,7 +92,7 @@ const Tree: React.FC<TreeDisplay> = (props) => {
         })}
       >
         {isConditional ? (
-          formatConditional(name)
+          formatConditional(node)
         ) : (
           <LinkModuleCodes className={styles.link}>{name}</LinkModuleCodes>
         )}
@@ -96,9 +135,27 @@ const ModuleTree: React.FC<Props> = (props) => {
         </ul>
       </div>
 
-      <p className="alert alert-warning">
+      {/* <p className="alert alert-warning">
         The prerequisite tree is displayed for visualization purposes and may not be accurate.
         Viewers are encouraged to double check details.
+      </p> */}
+
+      <p className="alert alert-warning">
+        This new version of the prerequisite tree is being tested and may not be accurate. Viewers
+        are encouraged to double check details with the prerequisite text above. To report bugs with
+        the new tree, please post a bug report on GitHub (preferred) at{' '}
+        <a
+          href="https://github.com/nusmodifications/nusmods/issues/new/choose"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          our repository
+        </a>{' '}
+        or send an email to{' '}
+        <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">
+          [email protected]
+        </a>
+        .
       </p>
     </>
   );

website/src/views/modules/__snapshots__/ModuleTree.test.tsx.snap

@@ -351,7 +351,23 @@ Array [
   <p
     class="alert alert-warning"
   >
-    The prerequisite tree is displayed for visualization purposes and may not be accurate. Viewers are encouraged to double check details.
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    <a
+      href="https://github.com/nusmodifications/nusmods/issues/new/choose"
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+    >
+      our repository
+    </a>
+     or send an email to 
+    <a
+      href="mailto:[email protected]"
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+    >
+      [email protected]
+    </a>
+    .
   </p>,
 ]
 `;
@@ -573,7 +589,23 @@ Array [
   <p
     class="alert alert-warning"
   >
-    The prerequisite tree is displayed for visualization purposes and may not be accurate. Viewers are encouraged to double check details.
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    <a
+      href="https://github.com/nusmodifications/nusmods/issues/new/choose"
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+    >
+      our repository
+    </a>
+     or send an email to 
+    <a
+      href="mailto:[email protected]"
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+    >
+      [email protected]
+    </a>
+    .
   </p>,
 ]
 `;