key

Author: JoshuaGoldberg

src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx

@@ -26,6 +26,7 @@ interface GanttTaskBarProps<T> {
   onAddTaskPressed: (parent: GanttTask<T>) => void;
   highlightTaskComparator: HighlightTaskComparator<T>;
   highlightSubtaskComparator: HighlightTaskComparator<T>;
+  onToggle?: () => void;
 }
 
 const GanttTaskBar = <T,>({
@@ -38,7 +39,8 @@ const GanttTaskBar = <T,>({
   highlightedChange,
   onAddTaskPressed,
   highlightSubtaskComparator,
-  highlightTaskComparator
+  highlightTaskComparator,
+  onToggle
 }: GanttTaskBarProps<T>) => {
   const getStartCol = (start: Date) => {
     const startCol = days.findIndex((day) => toDateString(day) === toDateString(getMonday(start))) + 1;
@@ -76,6 +78,7 @@ const GanttTaskBar = <T,>({
           onAddTaskPressed={onAddTaskPressed}
           highlightSubtaskComparator={highlightSubtaskComparator}
           highlightTaskComparator={highlightTaskComparator}
+          onToggle={onToggle}
         />
       )}
     </div>

src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx

@@ -20,6 +20,7 @@ interface GanttTaskBarViewProps<T> {
   onAddTaskPressed: (parent: GanttTask<T>) => void;
   highlightTaskComparator: HighlightTaskComparator<T>;
   highlightSubtaskComparator: HighlightTaskComparator<T>;
+  onToggle?: () => void;
 }
 
 const GanttTaskBarView = <T,>({
@@ -32,7 +33,8 @@ const GanttTaskBarView = <T,>({
   highlightedChange,
   onAddTaskPressed,
   highlightSubtaskComparator,
-  highlightTaskComparator
+  highlightTaskComparator,
+  onToggle
 }: GanttTaskBarViewProps<T>) => {
   const [showChildren, setShowChildren] = useState(false);
   const [loadedChildren, setLoadedChildren] = useState<GanttTask<T>[]>(task.children);
@@ -64,7 +66,7 @@ const GanttTaskBarView = <T,>({
         highlightTaskComparator={highlightTaskComparator}
       />
 
-      <Collapse in={showChildren} unmountOnExit>
+      <Collapse in={showChildren} unmountOnExit onEntered={onToggle} onExited={onToggle}>
         {loadedChildren.map((child) => (
           <GanttTaskBar
             key={child.id}
@@ -78,6 +80,7 @@ const GanttTaskBarView = <T,>({
             onAddTaskPressed={onAddTaskPressed}
             highlightSubtaskComparator={highlightSubtaskComparator}
             highlightTaskComparator={highlightTaskComparator}
+            onToggle={onToggle}
           />
         ))}
       </Collapse>

src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx

@@ -15,7 +15,7 @@ import { Box, Typography } from '@mui/material';
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
 import GanttTaskBar from './GanttChartComponents/GanttTaskBar/GanttTaskBar';
 import GanttToolTip from './GanttChartComponents/GanttToolTip';
-import { ArcherContainer } from 'react-archer';
+import { ArcherContainer, ArcherContainerRef } from 'react-archer';
 
 interface GanttChartSectionProps<T> {
   start: Date;
@@ -70,6 +70,9 @@ const GanttChartSection = <T,>({
 }: GanttChartSectionProps<T>) => {
   const days = eachDayOfInterval({ start, end }).filter((day) => isMonday(day));
 
+  const archerRef = useRef<ArcherContainerRef>(null);
+  const handleToggle = useCallback(() => archerRef.current?.refreshScreen(), []);
+
   const updateTooltip = useRef<(options: OnMouseOverOptions | undefined, y?: number) => void>(() => {});
 
   const handleOnMouseOver = useCallback(
@@ -92,7 +95,7 @@ const GanttChartSection = <T,>({
   );
 
   return tasks.length > 0 ? (
-    <ArcherContainer strokeColor="#ef4545">
+    <ArcherContainer strokeColor="#ef4545" ref={archerRef}>
       <Box sx={{ width: 'fit-content' }}>
         <Box sx={{ mt: '1rem', width: 'fit-content' }}>
           {tasks.map((task) => {
@@ -109,6 +112,7 @@ const GanttChartSection = <T,>({
                   highlightedChange={highlightedChange}
                   highlightSubtaskComparator={highlightSubtaskComparator}
                   highlightTaskComparator={highlightTaskComparator}
+                  onToggle={handleToggle}
                 />
               </Box>
             );