autoscroll to current semester

lidanielm · lidanielm · commit dbcaaf021712 · 2025-06-01T14:11:11.000-04:00
diff --git a/frontend/degree-plan/components/FourYearPlan/OnboardingTutorial.tsx b/frontend/degree-plan/components/FourYearPlan/OnboardingTutorial.tsx
@@ -137,25 +137,14 @@ interface TutorialModalContextProps {
     tutorialModalKey: TutorialModalKey;
     setTutorialModalKey: (key: TutorialModalKey) => void;
     highlightedComponentRef: any;
-    // componentRefs: any[];
-    // requirementsPanelRef: any;
-    // editButtonRef: any;
-    // calendarPanelRef: any;
-    // pastSemestersRef: any;
-    // currentSemesterRef: any;
-    // futureSemestersRef: any;
-    // editModeRef: any;
-    // showStatsRef: any;
-    // coursesDockRef: any;
-    // generalSearchRef: any;
-    // setHighlightedComponent: (component: any) => void;
+    componentRefs: any;
 }
 
 export const TutorialModalContext = createContext<TutorialModalContextProps>({
     tutorialModalKey: null,
     setTutorialModalKey: (key: TutorialModalKey) => { }, // placeholder
     highlightedComponentRef: null,
-    // componentRefs: [],
+    componentRefs: null,
     // setHighlightedComponent: (component: any) => { } // placeholder
 });
 
@@ -192,7 +181,7 @@ const ModalInterior = ({
             case "edit-mode":
                 return "-65%";
             case "show-stats":
-                return "-65%";
+                return "-62%";
             case "courses-dock":
                 return "60%";
             case "general-search":
@@ -207,7 +196,7 @@ const ModalInterior = ({
     const leftLocation = () => {
         switch (modalKey) {
             case "welcome":
-                return "-10%";
+                return "0%";
             case "requirements-panel-1":
                 return "-25%";
             case "requirements-panel-2":
@@ -237,6 +226,15 @@ const ModalInterior = ({
         }
     }
 
+    const arrowLocation = () => {
+        switch (modalKey) {
+            case "welcome":
+                return { top: 0, left: 0 };
+            case "requirements-panel-1":
+                return { top: 50, left: 50 };
+        }
+    }
+
     return (
         <>
             <ModalBackground />
diff --git a/frontend/degree-plan/components/FourYearPlan/OnboardingTutorialPanel.tsx b/frontend/degree-plan/components/FourYearPlan/OnboardingTutorialPanel.tsx
@@ -17,8 +17,6 @@ const ModalContainer = styled.div<{ $top?: string; $left?: string; $position?: s
     color: #4a4a4a;
 `;
 
-
-
 const ModalCard = styled.div`
     max-width: 400px !important;
     max-height: 400px !important;
@@ -64,17 +62,18 @@ const ModalCardBody = styled.div`
     display: block;
 `;
 
-const ModalCardArrow = styled.div`
+const ModalCardArrow = styled.div<{ $top?: number, $left?: number, $rotation?: number }>`
     position: relative;
-    top: 20%;
-    left: -20%;
+    top: ${({ $top }) => $top || 0}%;
+    left: ${({ $left }) => $left || 0}%;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid white;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
-    border-right-color: red;
+    transform: rotate(${({ $rotation }) => $rotation || 90}deg);
+    z-index: 1;
 `;
 
 const CloseButton = styled.button`
@@ -99,6 +98,7 @@ interface PanelProps {
     left?: string;
     position?: string;
     headerIcon?: string;
+    arrowPosition?: { top?: number, left?: number };
     close?: () => void;
 }
 
@@ -109,11 +109,12 @@ const OnboardingTutorialPanel = ({
     left,
     position,
     headerIcon,
+    arrowPosition,
     close,
 }: PropsWithChildren<PanelProps>) => (
     <ModalContainer $top={top} $left={left} $position={position}>
         {/* <ModalBackground /> */}
-        {/* <ModalCardArrow /> */}
+        {/* <ModalCardArrow $top={arrowPosition?.top} $left={15} /> */}
         <ModalCard>
             <ModalCardHead $center={!headerIcon}>
                 <header>{title}</header>
diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -2,7 +2,7 @@ import SelectListDropdown from "./SelectListDropdown";
 import Semesters from "./Semesters";
 import styled from "@emotion/styled";
 import type { DegreePlan } from "@/types";
-import React, { useEffect, useState, forwardRef, useContext } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { useSWRCrud } from '@/hooks/swrcrud';
 import { EditButton } from './EditButton';
 import { PanelTopBarButton, PanelTopBarIcon } from "./PanelCommon";
@@ -37,7 +37,7 @@ interface PlanPanelProps {
     setShowOnboardingModal: (arg0: boolean) => void;
 }
 
-const PlanPanel = forwardRef(({
+const PlanPanel = ({
     setModalKey,
     modalKey,
     setModalObject,
@@ -47,81 +47,78 @@ const PlanPanel = forwardRef(({
     degreeplans,
     isLoading,
     currentSemester,
-}: PlanPanelProps, semesterRefs) => {
+}: PlanPanelProps) => {
     const { copy: copyDegreeplan } = useSWRCrud<DegreePlan>('/api/degree/degreeplans');
     const [showStats, setShowStats] = useState(true);
     const [editMode, setEditMode] = useState(false);
 
-    const { tutorialModalKey, highlightedComponentRef } = useContext(TutorialModalContext);
+    const { tutorialModalKey, componentRefs } = useContext(TutorialModalContext);
     const planPanelRef = React.useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
         if (!planPanelRef.current) return;
 
         if (tutorialModalKey === "calendar-panel" || tutorialModalKey === "current-semester" || tutorialModalKey === "future-semesters" || tutorialModalKey === "past-semesters" || tutorialModalKey === "edit-mode" || tutorialModalKey === "show-stats") {
             planPanelRef.current.style.zIndex = "11";
-            highlightedComponentRef.current = planPanelRef.current;
+            componentRefs.current["planPanel"] = planPanelRef.current;
         } else {
             planPanelRef.current.style.zIndex = "0";
         }
-    }, [tutorialModalKey, highlightedComponentRef]);
+    }, [tutorialModalKey, componentRefs]);
 
     return (
-        <div style={{ position: "relative" }} ref={(el) => {
+        <PanelContainer style={{ position: "relative" }} ref={(el) => {
             planPanelRef.current = el;
             if (tutorialModalKey === "calendar-panel" || tutorialModalKey === "current-semester" || tutorialModalKey === "future-semesters" || tutorialModalKey === "past-semesters" || tutorialModalKey === "edit-mode" || tutorialModalKey === "show-stats") {
-                highlightedComponentRef.current = el;
+                componentRefs.current["planPanel"] = el;
             }
         }}>
-            <PanelContainer>
-                <PanelHeader>
-                    <SelectListDropdown
-                        itemType="degree plan"
-                        active={activeDegreeplan || undefined}
-                        getItemName={(item: DegreePlan) => item.name}
-                        allItems={degreeplans || []}
-                        selectItem={(id: DegreePlan["id"]) => setActiveDegreeplan(degreeplans?.filter(d => d.id === id)[0] || null)}
-                        mutators={{
-                            copy: (item: DegreePlan) => {
-                                (copyDegreeplan({ ...item, name: `${item.name} (copy)` }, item.id) as Promise<any>)
-                                    .then((copied) => copied && setActiveDegreeplan(copied.id))
-                            },
-                            remove: (item: DegreePlan) => {
-                                setModalKey("plan-remove")
-                                setModalObject(item)
-                            },
-                            rename: (item: DegreePlan) => {
-                                setModalKey("plan-rename")
-                                setModalObject(item)
-                            },
-                            create: () => {
-                                setShowOnboardingModal(true);
-                            }
-                        }}
-                        isLoading={isLoading}
-                    />
-                    <PanelTopBarIconList>
-                        <ShowStatsButton showStats={showStats} setShowStats={setShowStats} />
-                        <EditButton editMode={editMode} setEditMode={setEditMode} />
-                    </PanelTopBarIconList>
-                </PanelHeader>
-                {/** map to semesters */}
-                <PanelBody>
-                    <Semesters
-                        activeDegreeplan={activeDegreeplan || undefined}
-                        showStats={showStats}
-                        editMode={editMode}
-                        setEditMode={setEditMode}
-                        setModalKey={setModalKey}
-                        setModalObject={setModalObject}
-                        isLoading={isLoading}
-                        currentSemester={currentSemester}
-                    // ref={semesterRefs}
-                    />
-                </PanelBody>
-            </PanelContainer>
-        </div>
+            <PanelHeader>
+                <SelectListDropdown
+                    itemType="degree plan"
+                    active={activeDegreeplan || undefined}
+                    getItemName={(item: DegreePlan) => item.name}
+                    allItems={degreeplans || []}
+                    selectItem={(id: DegreePlan["id"]) => setActiveDegreeplan(degreeplans?.filter(d => d.id === id)[0] || null)}
+                    mutators={{
+                        copy: (item: DegreePlan) => {
+                            (copyDegreeplan({ ...item, name: `${item.name} (copy)` }, item.id) as Promise<any>)
+                                .then((copied) => copied && setActiveDegreeplan(copied.id))
+                        },
+                        remove: (item: DegreePlan) => {
+                            setModalKey("plan-remove")
+                            setModalObject(item)
+                        },
+                        rename: (item: DegreePlan) => {
+                            setModalKey("plan-rename")
+                            setModalObject(item)
+                        },
+                        create: () => {
+                            setShowOnboardingModal(true);
+                        }
+                    }}
+                    isLoading={isLoading}
+                />
+                <PanelTopBarIconList>
+                    <ShowStatsButton showStats={showStats} setShowStats={setShowStats} />
+                    <EditButton editMode={editMode} setEditMode={setEditMode} />
+                </PanelTopBarIconList>
+            </PanelHeader>
+            {/** map to semesters */}
+            <PanelBody>
+                <Semesters
+                    activeDegreeplan={activeDegreeplan || undefined}
+                    showStats={showStats}
+                    editMode={editMode}
+                    setEditMode={setEditMode}
+                    setModalKey={setModalKey}
+                    setModalObject={setModalObject}
+                    isLoading={isLoading}
+                    currentSemester={currentSemester}
+                />
+            </PanelBody>
+        </PanelContainer>
     );
-});
+};
 
 export default PlanPanel;
diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef } from "react";
+import React, { useState, useRef, useEffect, useContext } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { ItemTypes } from "../dnd/constants";
 import CoursesPlanned, { SkeletonCoursesPlanned } from "./CoursesPlanned";
@@ -12,6 +12,7 @@ import 'react-loading-skeleton/dist/skeleton.css'
 import { mutate } from "swr";
 import { ModalKey } from "./DegreeModal";
 import { TRANSFER_CREDIT_SEMESTER_KEY } from "@/constants";
+import { SemestersContext } from "./Semesters";
 
 const SEMESTER_REGEX = /\d{4}[ABC]/
 
@@ -118,7 +119,7 @@ interface SemesterProps {
     isLoading?: boolean
 }
 
-const FlexSemester = forwardRef<HTMLDivElement, SemesterProps>(({
+const FlexSemester = ({
     showStats,
     semester,
     fulfillments,
@@ -129,7 +130,9 @@ const FlexSemester = forwardRef<HTMLDivElement, SemesterProps>(({
     removeSemester,
     currentSemester,
     isLoading = false
-}, ref) => {
+}: SemesterProps) => {
+    const { semesterRefs } = useContext(SemestersContext);
+
     const credits = fulfillments.reduce((acc, curr) => acc + (curr.course?.credits || 1), 0)
 
     const { createOrUpdate: addToDock } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
@@ -185,17 +188,17 @@ const FlexSemester = forwardRef<HTMLDivElement, SemesterProps>(({
             ref={drop}
             $semesterComparison={currentSemester ? semester.localeCompare(currentSemester) : 1}
         >
-            <div ref={ref}>
-                <SemesterHeader>
-                    <SemesterLabel>
-                        {translateSemester(semester)}
-                    </SemesterLabel>
-                    {!!editMode &&
-                        <TrashIcon role="button" onClick={handleRemoveSemester}>
-                            <i className="fa fa-trash fa-md" />
-                        </TrashIcon>}
-                </SemesterHeader>
-            </div>
+            <SemesterHeader ref={(el) => {
+                semesterRefs.current[semester] = el;
+            }}>
+                <SemesterLabel>
+                    {translateSemester(semester)}
+                </SemesterLabel>
+                {!!editMode &&
+                    <TrashIcon role="button" onClick={handleRemoveSemester}>
+                        <i className="fa fa-trash fa-md" />
+                    </TrashIcon>}
+            </SemesterHeader>
             <SemesterContent>
                 <FlexCoursesPlanned
                     semester={semester}
@@ -208,6 +211,6 @@ const FlexSemester = forwardRef<HTMLDivElement, SemesterProps>(({
             </CreditsLabel>
         </SemesterCard>
     )
-});
+};
 
 export default FlexSemester;
diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { Icon } from "../common/bulma_derived_components";
 import { Course, DegreePlan, Fulfillment } from "@/types";
 import useSWR from "swr";
-import React, { useEffect, useState, forwardRef } from "react";
+import React, { useEffect, useState } from "react";
 import Select from "react-select";
 import { ModalKey } from "./DegreeModal";
 
@@ -182,6 +182,14 @@ export const interpolateSemesters = (startingYear: number, graduationYear: numbe
     return res;
 }
 
+interface SemestersContextProps {
+    semesterRefs: React.MutableRefObject<{ [semester: string]: HTMLDivElement | null }>;
+}
+
+export const SemestersContext = React.createContext<SemestersContextProps>({
+    semesterRefs: { current: {} },
+});
+
 interface SemestersProps {
     activeDegreeplan?: DegreePlan;
     showStats: any;
@@ -195,7 +203,7 @@ interface SemestersProps {
     ref?: any;
 }
 
-const Semesters = forwardRef(({
+const Semesters = ({
     activeDegreeplan,
     showStats,
     className,
@@ -205,7 +213,7 @@ const Semesters = forwardRef(({
     setEditMode,
     currentSemester,
     isLoading
-}: SemestersProps, semesterRefs) => {
+}: SemestersProps) => {
     const { data: fulfillments, isLoading: isLoadingFulfillments } = useSWR<
         Fulfillment[]
     >(
@@ -307,8 +315,6 @@ const Semesters = forwardRef(({
                             setModalKey={setModalKey}
                             setModalObject={setModalObject}
                             currentSemester={currentSemester}
-                        /* @ts-ignore */
-                        // ref={(el) => (semesterRefs.current[semester] = el)}
                         />
                     )
             }
@@ -319,6 +325,6 @@ const Semesters = forwardRef(({
             }
         </SemestersContainer >
     );
-});
+};
 
 export default Semesters;
diff --git a/frontend/degree-plan/components/FourYearPlanPage.tsx b/frontend/degree-plan/components/FourYearPlanPage.tsx
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
