Display RMP tags

UTDNebula · Dec 3, 2024 · 9f2ad55 · 9f2ad55
1 parent 567bfda
commit 9f2ad55
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 8 deletions.
diff --git a/src/components/SearchResultsTable.tsx b/src/components/SearchResultsTable.tsx
@@ -72,14 +72,32 @@ function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
         className="cursor-pointer"
       >
         <TableCell className="border-b-0 pb-0" colSpan={6}>
-          <Typography
-            onClick={
-              (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
+          <Tooltip
+            title={
+              typeof course.profFirst !== 'undefined' &&
+              typeof course.profLast !== 'undefined' &&
+              (rmp !== undefined &&
+              rmp.state === 'done' &&
+              rmp.data.teacherRatingTags.length > 0
+                ? 'Tags: ' +
+                  rmp.data.teacherRatingTags
+                    .sort((a, b) => b.tagCount - a.tagCount)
+                    .slice(0, 3)
+                    .map((tag) => tag.tagName)
+                    .join(', ')
+                : 'No Tags Available')
             }
-            className="leading-tight text-lg text-gray-600 dark:text-gray-200"
+            placement="top"
           >
-            {searchQueryLabel(convertToProfOnly(course))}
-          </Typography>
+            <Typography
+              onClick={
+                (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
+              }
+              className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text w-fit"
+            >
+              {searchQueryLabel(convertToProfOnly(course))}
+            </Typography>
+          </Tooltip>
         </TableCell>
       </TableRow>
       <TableRow

diff --git a/src/components/SingleProfInfo.tsx b/src/components/SingleProfInfo.tsx
@@ -1,5 +1,6 @@
-import { Grid, Skeleton } from '@mui/material';
-import React from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Chip, Collapse, Grid, IconButton, Skeleton } from '@mui/material';
+import React, { useState } from 'react';
 
 import type { RMPInterface } from '~data/fetchFromRmp';
 import type { GenericFetchedData } from '~pages';
@@ -9,9 +10,12 @@ type Props = {
 };
 
 function SingleProfInfo({ rmp }: Props) {
+  const [showMore, setShowMore] = useState(false);
+
   if (typeof rmp === 'undefined' || rmp.state === 'error') {
     return null;
   }
+
   if (rmp.state === 'loading') {
     return (
       <Grid container spacing={2} className="p-4">
@@ -42,6 +46,13 @@ function SingleProfInfo({ rmp }: Props) {
       </Grid>
     );
   }
+
+  const topTags = rmp.data.teacherRatingTags.sort(
+    (a, b) => b.tagCount - a.tagCount,
+  );
+  const first5 = topTags.slice(0, 5);
+  const next5 = topTags.slice(5, 10);
+
   return (
     <Grid container spacing={2} className="p-4">
       <Grid item xs={6}>
@@ -64,6 +75,46 @@ function SingleProfInfo({ rmp }: Props) {
         </p>
         <p>Would take again</p>
       </Grid>
+
+      {first5.length > 0 && (
+        <Grid item xs={12}>
+          <div className="flex gap-y-1 flex-wrap">
+            {first5.map((tag, index) => (
+              <Chip
+                key={index}
+                label={`${tag.tagName} (${tag.tagCount})`}
+                variant="outlined"
+                className="mr-1"
+              />
+            ))}
+            {next5.length > 0 && (
+              <>
+                {next5.map((tag, index) => (
+                  <Collapse key={index} in={showMore} orientation="horizontal">
+                    <Chip
+                      label={`${tag.tagName} (${tag.tagCount})`}
+                      variant="outlined"
+                      className="mr-1"
+                    />
+                  </Collapse>
+                ))}
+                <IconButton
+                  size="small"
+                  aria-label="show more"
+                  onClick={() => setShowMore(!showMore)}
+                >
+                  <ExpandMoreIcon
+                    className={
+                      'transition ' + (showMore ? 'rotate-90' : '-rotate-90')
+                    }
+                  />
+                </IconButton>
+              </>
+            )}
+          </div>
+        </Grid>
+      )}
+
       <Grid item xs={12}>
         <a
           href={