Merge pull request #748 from pennlabs/feature/stick-header2.0

jamesdoh0109 · web-flow · commit 067acc096705 · 2025-11-09T13:04:41.000-05:00
recreate sticky headers changes
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -1,5 +1,5 @@
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useContext, useRef, useLayoutEffect } from 'react';
 import RuleComponent, { SkeletonRule } from './Rule';
 import { Degree as DegreeType, DegreePlan, Fulfillment, Rule, Degree as DegreeD } from '@/types';
 import styled from '@emotion/styled';
@@ -44,6 +44,9 @@ const DegreeHeaderContainer = styled.div`
   color: #FFF;
   padding: 0.75rem 1.25rem;
   border-radius: var(--req-item-radius);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 `
 
 const ReqPanelTitle = styled.div`
@@ -52,9 +55,7 @@ const ReqPanelTitle = styled.div`
 `
 
 const DegreeBody = styled.div`
-  margin-top: .5rem;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow-y: none;
 `
 
 export const DegreeYear = styled.span`
@@ -84,6 +85,27 @@ const AddButton = styled.div`
 const ReqPanelBody = styled(PanelBody)`
   overflow-y: scroll;
   padding: 1.5rem;
+  gap: 0;
+`
+
+// pr, mr for scroll bar
+const ReqContent = styled.div`
+  padding: 0;
+  padding-right: 12px;
+  margin-right: -12px;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  overflow-y: scroll;
+`
+
+export const HEADER_DEFAULT_BUFFER = 8;
+export const WhiteSpace = styled.div<{ $headerHeight: number, $zIndex: number }>`
+  height: ${HEADER_DEFAULT_BUFFER}px;
+  background-color: white;
+  z-index: ${(props) => props.$zIndex || 500};
+  position: sticky;
+  top: ${(props) => props.$headerHeight}px;
 `
 
 interface DegreeHeaderProps {
@@ -93,12 +115,21 @@ interface DegreeHeaderProps {
   collapsed: boolean,
   editMode: boolean,
   skeleton?: boolean,
+  containerRef?: React.Ref<HTMLDivElement>
 }
 
-const DegreeHeader = ({ degree, remove, setCollapsed, collapsed, editMode, skeleton }: DegreeHeaderProps) => {
+const DegreeHeader = ({ 
+  degree, 
+  remove, 
+  setCollapsed, 
+  collapsed, 
+  editMode, 
+  skeleton,
+  containerRef
+}: DegreeHeaderProps) => {
   const degreeName = !skeleton ? `${degree.degree} in ${degree.major_name} ${degree.concentration ? `(${degree.concentration_name})` : ''}` : <DarkBlueBackgroundSkeleton width="10em" />;
   return (
-    <DegreeHeaderContainer onClick={() => setCollapsed(!collapsed)}>
+    <DegreeHeaderContainer ref={containerRef} onClick={() => setCollapsed(!collapsed)}>
       <DegreeTitleWrapper>
         <div>
           {degreeName}
@@ -167,8 +198,37 @@ const computeRuleTree = ({activeDegreePlanId, rule, rulesToFulfillments, rulesTo
 }
 
 
-const Degree = ({ allRuleLeaves, degree, rulesToFulfillments, rulesToUnselectedFulfillments, activeDegreeplan, editMode, setModalKey, setModalObject, isLoading }: any) => {
+const Degree = ({ 
+  allRuleLeaves, 
+  degree, 
+  rulesToFulfillments, 
+  rulesToUnselectedFulfillments, 
+  activeDegreeplan, 
+  editMode, 
+  setModalKey, 
+  setModalObject, 
+  isLoading 
+}: any) => {
   const [collapsed, setCollapsed] = useState(false);
+
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+
+  useLayoutEffect(() => {
+    if (!headerRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setHeaderHeight(entry.target.clientHeight);
+      }
+    });
+    resizeObserver.observe(headerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    }
+  }, []);
+
   if (isLoading) {
     return (
       <div>
@@ -206,6 +266,7 @@ const Degree = ({ allRuleLeaves, degree, rulesToFulfillments, rulesToUnselectedF
   return (
     <div>
       <DegreeHeader
+        containerRef={headerRef}
         degree={degree}
         key={degree.id}
         remove={() => {
@@ -217,16 +278,22 @@ const Degree = ({ allRuleLeaves, degree, rulesToFulfillments, rulesToUnselectedF
         editMode={editMode}
         skeleton={false}
       />
-      {!collapsed && !editMode && 
-        <DegreeBody>
-          {degree && degree.rules.map((rule: any) => {
-            return (
-            <RuleComponent
-              {...computeRuleTree({activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments, rulesToUnselectedFulfillments, degree })}
-            />
-          )}
-          )}
-        </DegreeBody>}
+      <WhiteSpace $headerHeight={headerHeight} $zIndex={999} />
+      {!collapsed && !editMode &&
+        <>
+          <DegreeBody>
+            {degree && degree.rules.map((rule: any) => {
+              return (
+              <RuleComponent
+                headerHeight={headerHeight}
+                zIndex={999}
+                {...computeRuleTree({activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments, rulesToUnselectedFulfillments, degree })}
+              />
+            )}
+            )}
+          </DegreeBody>
+        </>
+      }
     </div>
   )
 }
@@ -287,33 +354,36 @@ const ReqPanel = ({ setModalKey, setModalObject, activeDegreeplan, isLoading }:
         <>
           {activeDegreeplanDetail &&
             <ReqPanelBody>
-              {activeDegreeplanDetail.degrees.length == 0 && !editMode && <EmptyPanel />}
-              {activeDegreeplanDetail.degrees.map(degree => (
-                <Degree
-                  allRuleLeaves={allRuleLeaves}
-                  degree={degree}
-                  rulesToFulfillments={rulesToFulfillments}
-                  rulesToUnselectedFulfillments={rulesToUnselectedFulfillments}
-                  activeDegreeplan={activeDegreeplan}
-                  editMode={editMode}
-                  setModalKey={setModalKey}
-                  setModalObject={setModalObject}
-                  isLoading={isLoading}
-                />
-              ))}
-              {editMode && <AddButton role="button" onClick={() => {
-                setModalObject(activeDegreeplan);
-                setModalKey("degree-add");
-              }}>
-                <i className="fa fa-plus" />
-                <div>
-                  Add Degree
-                </div>
-              </AddButton>}
+              <ReqContent>
+                {activeDegreeplanDetail.degrees.length == 0 && !editMode && <EmptyPanel />}
+                {activeDegreeplanDetail.degrees.map(degree => (
+                  <Degree
+                    key={degree.id}
+                    allRuleLeaves={allRuleLeaves}
+                    degree={degree}
+                    rulesToFulfillments={rulesToFulfillments}
+                    rulesToUnselectedFulfillments={rulesToUnselectedFulfillments}
+                    activeDegreeplan={activeDegreeplan}
+                    editMode={editMode}
+                    setModalKey={setModalKey}
+                    setModalObject={setModalObject}
+                    isLoading={isLoading}
+                  />
+                ))}
+                {editMode && <AddButton role="button" onClick={() => {
+                  setModalObject(activeDegreeplan);
+                  setModalKey("degree-add");
+                }}>
+                  <i className="fa fa-plus" />
+                  <div>
+                    Add Degree
+                  </div>
+                </AddButton>}
+              </ReqContent>
             </ReqPanelBody>
           }
         </>}
     </PanelContainer>
   );
 }
-export default ReqPanel;
+export default ReqPanel;
diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState, useLayoutEffect, useRef } from "react";
 import RuleLeaf, { SkeletonRuleLeaf } from "./QObject";
 import { DnDCourse, Fulfillment } from "@/types";
 import styled from "@emotion/styled";
@@ -7,15 +7,17 @@ import { useSWRCrud } from "@/hooks/swrcrud";
 import { useDrop } from "react-dnd";
 import { ItemTypes } from "../Dock/dnd/constants";
 import { DarkBlueBackgroundSkeleton } from "../FourYearPlan/PanelCommon";
-import { DegreeYear, RuleTree } from "./ReqPanel";
+import { DegreeYear, RuleTree, WhiteSpace, HEADER_DEFAULT_BUFFER } from "./ReqPanel";
 import SatisfiedCheck from "../FourYearPlan/SatisfiedCheck";
 import { ExpandedCoursesPanelContext } from "@/components/ExpandedBox/ExpandedCoursesPanelTrigger";
 import { parseQJson } from "./ruleUtils";
 
-const RuleTitleWrapper = styled.div`
+const RuleTitleWrapper = styled.div<{ $headerHeight?: number, $zIndex?: number }>`
   background-color: var(--primary-color);
-  position: relative;
+  position: sticky;
   border-radius: var(--req-item-radius);
+  top: ${(props) => (props.$headerHeight || 0) + HEADER_DEFAULT_BUFFER}px;
+  z-index: ${(props) => props.$zIndex || 995};
 `;
 
 const ProgressBar = styled.div<{ $progress: number }>`
@@ -152,11 +154,34 @@ export const SkeletonRule: React.FC<React.PropsWithChildren> = ({
 /**
  * Recursive component to represent a rule.
  */
-const RuleComponent = (ruleTree: RuleTree) => {
+const RuleComponent = (ruleTree: RuleTree & { headerHeight?: number, zIndex?: number }) => {
   const { setCourses, courses } = useContext(ExpandedCoursesPanelContext);
   const { type, activeDegreePlanId, rule, progress } = ruleTree;
   const satisfied = progress === 1;
 
+  const headerHeight = ruleTree.headerHeight;
+  const zIndex = ruleTree.zIndex || -1;
+
+  const myHeaderRef = useRef<HTMLDivElement>(null);
+  const [myHeight, setMyHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!myHeaderRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target instanceof HTMLElement) {
+          setMyHeight(entry.target.clientHeight);
+        }
+      }
+    });
+    resizeObserver.observe(myHeaderRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [rule.id]);
+
   // state for INTERNAL_NODEs
   const [collapsed, setCollapsed] = useState(false);
 
@@ -322,7 +347,7 @@ const RuleComponent = (ruleTree: RuleTree) => {
 
   return (
     <>
-      <RuleTitleWrapper onClick={() => setCollapsed(!collapsed)}>
+      <RuleTitleWrapper $headerHeight={headerHeight} $zIndex={zIndex} onClick={() => setCollapsed(!collapsed)} ref={myHeaderRef}>
         <ProgressBar $progress={progress}></ProgressBar>
         <RuleTitle>
           <div>
@@ -335,12 +360,13 @@ const RuleComponent = (ruleTree: RuleTree) => {
           )}
         </RuleTitle>
       </RuleTitleWrapper>
+      <WhiteSpace $headerHeight={myHeight + (headerHeight ||0) + HEADER_DEFAULT_BUFFER} $zIndex={500} />
       {!collapsed && (
         <Indented>
           <Column>
             {children.map((ruleTree) => (
               <div>
-                <RuleComponent {...ruleTree} />
+                <RuleComponent headerHeight={myHeight + (headerHeight || 0) + HEADER_DEFAULT_BUFFER} zIndex={zIndex - 1} {...ruleTree} />
               </div>
             ))}
           </Column>
