Tutorial

src/components/dashboard/Tutorial/tutorial.tsx

@@ -0,0 +1,209 @@
+import type { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import CloseIcon from '@mui/icons-material/Close';
+import { Backdrop, Button, IconButton, Popover } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+type TutorialPopupProps = {
+  element: Element;
+  open: boolean;
+  incrementStep: () => void;
+  close: () => void;
+  title: string;
+  buttonText: string;
+  anchorOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  transformOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  children: ReactJSXElement | string;
+};
+
+const TutorialPopup = ({
+  element,
+  open,
+  incrementStep,
+  close,
+  title,
+  buttonText,
+  anchorOrigin,
+  transformOrigin,
+  children,
+}: TutorialPopupProps) => {
+  useEffect(() => {
+    if (open) {
+      element.classList.add('tutorial-raise');
+      if (element.tagName === 'TR' || element.tagName === 'TD') {
+        element.classList.add('tutorial-table');
+      }
+      //Wait to scroll untill classes applies
+      setTimeout(
+        () => element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
+        0,
+      );
+    } else {
+      element.classList.remove('tutorial-raise');
+      element.classList.remove('tutorial-table');
+    }
+    return () => {
+      element.classList.remove('tutorial-raise');
+      element.classList.remove('tutorial-table');
+    };
+  }, [open, element]);
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={element}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+      className="pointer-events-auto"
+      disableScrollLock={true}
+      marginThreshold={0}
+    >
+      <div
+        className="p-2 flex flex-col items-start min-w-32 max-w-96"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="flex w-full items-center gap-2 pl-2">
+          <p className="text-lg font-bold">{title}</p>
+          <IconButton onClick={close} className="ml-auto">
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <div className="p-2">{children}</div>
+        <Button
+          variant="contained"
+          className="self-end"
+          onClick={incrementStep}
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </Popover>
+  );
+};
+
+type StepTemplate = {
+  id: string;
+  element?: Element;
+  title: string;
+  content: ReactJSXElement | string;
+  anchorOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  transformOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+};
+type Step = StepTemplate & { element: Element };
+
+const stepsTemplate: StepTemplate[] = [
+  {
+    id: 'search',
+    title: 'Search',
+    content:
+      "Search for any number of courses and professors and we'll find all the combinations of classes they teach.",
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'RHS',
+    title: 'Overviews and Compare',
+    content: 'See an overview of your search on this side.',
+    anchorOrigin: { vertical: 'top', horizontal: 'left' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'right' },
+  },
+  {
+    id: 'result',
+    title: 'Results',
+    content:
+      'See the average grade for a course and Rate My Professors score here.',
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'dropdown',
+    title: 'More information',
+    content: 'Open a result for more detailed information.',
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'compare',
+    title: 'Compare',
+    content: 'Click the checkbox to add an item to the compare tab.',
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'LHS',
+    title: "That's all!",
+    content:
+      'Try searching for a class you need to take and looking through the results.',
+    anchorOrigin: { vertical: 'top', horizontal: 'right' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+  },
+];
+
+type TutorialProps = {
+  open: boolean;
+  close: () => void;
+};
+
+const Tutorial = ({ open, close }: TutorialProps) => {
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [place, setPlace] = useState(0);
+
+  useEffect(() => {
+    // For each element, set anchor based on `data-tutorial-id`
+    const elements = document.querySelectorAll('[data-tutorial-id]');
+    if (!elements.length) {
+      close();
+      return;
+    }
+    const newSteps = [...stepsTemplate];
+    elements.forEach((element) => {
+      const id = element.getAttribute('data-tutorial-id') as string;
+      const foundStep = newSteps.findIndex((step) => step.id === id);
+      if (foundStep !== -1) {
+        newSteps[foundStep].element = element;
+      }
+    });
+    setSteps(
+      newSteps.filter((step) => typeof step.element !== 'undefined') as Step[],
+    );
+    setPlace(0);
+  }, [open, close]);
+
+  return (
+    <>
+      <Backdrop sx={(theme) => ({ zIndex: theme.zIndex.modal })} open={open} />
+      {steps.map(({ content, ...otherProps }, index) => (
+        <TutorialPopup
+          key={index}
+          open={open && place === index}
+          incrementStep={() => {
+            if (place === steps.length - 1) {
+              close();
+              return;
+            }
+            setPlace(place + 1);
+          }}
+          close={close}
+          buttonText={index === steps.length - 1 ? 'Done' : 'Next'}
+          {...otherProps}
+        >
+          {content}
+        </TutorialPopup>
+      ))}
+    </>
+  );
+};
+
+export default Tutorial;

src/components/navigation/topMenu/topMenu.tsx

@@ -1,11 +1,13 @@
-import { Share } from '@mui/icons-material';
+import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
+import ShareIcon from '@mui/icons-material/Share';
 import { IconButton, Snackbar, Tooltip, useMediaQuery } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import Background from '@/../public/background.png';
+import Tutorial from '@/components/dashboard/Tutorial/tutorial';
 import SearchBar from '@/components/search/SearchBar/searchBar';
 
 /**
@@ -51,6 +53,9 @@ export function TopMenu() {
     />
   );
 
+  const [openTutorial, setOpenTutorial] = useState(false);
+  const closeTutorial = useCallback(() => setOpenTutorial(false), []);
+
   return (
     <>
       <div
@@ -72,25 +77,38 @@ export function TopMenu() {
           UTD TRENDS
         </Link>
         {matches && searchBar}
-        <Tooltip title="Share link to search" className="ml-auto">
-          <IconButton
-            className="aspect-square"
-            size="medium"
-            onClick={() => {
-              let url = window.location.href;
-              if (
-                router.query &&
-                Object.keys(router.query).length === 0 &&
-                Object.getPrototypeOf(router.query) === Object.prototype
-              ) {
-                url = 'https://trends.utdnebula.com/';
-              }
-              shareLink(url);
-            }}
-          >
-            <Share className="text-3xl mr-1" />
-          </IconButton>
-        </Tooltip>
+        <div className="flex gap-4 ml-auto">
+          <Tooltip title="Open tutorial">
+            <IconButton
+              className="w-12 h-12"
+              size="medium"
+              onClick={() => {
+                setOpenTutorial(true);
+              }}
+            >
+              <QuestionMarkIcon className="text-3xl" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Share link to search">
+            <IconButton
+              className="w-12 h-12"
+              size="medium"
+              onClick={() => {
+                let url = window.location.href;
+                if (
+                  router.query &&
+                  Object.keys(router.query).length === 0 &&
+                  Object.getPrototypeOf(router.query) === Object.prototype
+                ) {
+                  url = 'https://trends.utdnebula.com/';
+                }
+                shareLink(url);
+              }}
+            >
+              <ShareIcon className="text-3xl mr-1" />
+            </IconButton>
+          </Tooltip>
+        </div>
         {!matches && searchBar}
       </div>
       <Snackbar
@@ -99,6 +117,7 @@ export function TopMenu() {
         onClose={() => setOpenCopied(false)}
         message="Copied!"
       />
+      <Tutorial open={openTutorial} close={closeTutorial} />
     </>
   );
 }

src/components/search/SearchBar/searchBar.tsx

@@ -211,7 +211,10 @@ const SearchBar = ({
   }, []);
 
   return (
-    <div className={'flex items-center gap-2 ' + (className ?? '')}>
+    <div
+      className={'flex items-center gap-2 ' + (className ?? '')}
+      data-tutorial-id="search"
+    >
       <Autocomplete
         multiple
         freeSolo

src/components/search/SearchResultsTable/searchResultsTable.tsx

@@ -86,6 +86,7 @@ type RowProps = {
   addToCompare: (arg0: SearchQuery) => void;
   removeFromCompare: (arg0: SearchQuery) => void;
   color?: string;
+  showTutorial: boolean;
 };
 
 function Row({
@@ -96,6 +97,7 @@ function Row({
   addToCompare,
   removeFromCompare,
   color,
+  showTutorial,
 }: RowProps) {
   const [open, setOpen] = useState(false);
 
@@ -120,8 +122,12 @@ function Row({
       <TableRow
         onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
         className="cursor-pointer"
+        data-tutorial-id={showTutorial && 'result'}
       >
-        <TableCell className="border-b-0">
+        <TableCell
+          className="border-b-0"
+          data-tutorial-id={showTutorial && 'dropdown'}
+        >
           <Tooltip
             title={open ? 'Minimize Result' : 'Expand Result'}
             placement="top"
@@ -136,7 +142,10 @@ function Row({
             </IconButton>
           </Tooltip>
         </TableCell>
-        <TableCell className="border-b-0">
+        <TableCell
+          className="border-b-0"
+          data-tutorial-id={showTutorial && 'compare'}
+        >
           <Tooltip
             title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
             placement="top"
@@ -252,6 +261,7 @@ function Row({
 
 type SearchResultsTableProps = {
   resultsLoading: 'loading' | 'done';
+  numSearches: number;
   includedResults: SearchQuery[];
   grades: { [key: string]: GenericFetchedData<GradesType> };
   rmp: { [key: string]: GenericFetchedData<RMPInterface> };
@@ -263,6 +273,7 @@ type SearchResultsTableProps = {
 
 const SearchResultsTable = ({
   resultsLoading,
+  numSearches,
   includedResults,
   grades,
   rmp,
@@ -495,7 +506,7 @@ const SearchResultsTable = ({
           </TableHead>
           <TableBody>
             {resultsLoading === 'done'
-              ? sortedResults.map((result) => (
+              ? sortedResults.map((result, index) => (
                   <Row
                     key={searchQueryLabel(result)}
                     course={result}
@@ -509,6 +520,7 @@ const SearchResultsTable = ({
                     addToCompare={addToCompare}
                     removeFromCompare={removeFromCompare}
                     color={colorMap[searchQueryLabel(result)]}
+                    showTutorial={index === numSearches}
                   />
                 ))
               : Array(10)

src/pages/_app.tsx

@@ -79,6 +79,7 @@ const kallisto = localFont({
 function MyApp({ Component, pageProps }: AppProps) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const muiTheme = createTheme({
+    cssVariables: true,
     palette: {
       mode: prefersDarkMode ? 'dark' : 'light',
       //copied from tailwind.config.js