Fix Project Overlays

Author: Peyton-McKee

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

@@ -48,7 +48,7 @@ const GanttTaskBarDisplay = <T,>({
   highlightTaskComparator
 }: GanttTaskBarDisplayProps<T>) => {
   const theme = useTheme();
-  const hasChildren = task.children.length > 0;
+  const hasOverlays = task.overlays.length > 0;
 
   const ganttTaskBarHoverDetectionBoxStyles: CSSProperties = {
     gridColumnStart: getStartCol(task.start),
@@ -69,10 +69,10 @@ const GanttTaskBarDisplay = <T,>({
     gridColumnEnd: getEndCol(task.end),
     display: 'flex',
     alignItems: 'center',
-    marginTop: hasChildren ? '-10px' : undefined,
-    marginBottom: hasChildren ? '-10px' : undefined,
+    marginTop: hasOverlays ? '-10px' : undefined,
+    marginBottom: hasOverlays ? '-10px' : undefined,
     cursor: 'pointer',
-    width: hasChildren ? 'fit-content' : '100%'
+    width: hasOverlays ? 'fit-content' : '100%'
   };
 
   const ganttTaskBarChildOverlayStyles = (child: GanttTask<T>): CSSProperties => {
@@ -174,7 +174,7 @@ const GanttTaskBarDisplay = <T,>({
           onMouseLeave={handleOnMouseLeave}
           onClick={task.onClick}
         >
-          {hasChildren && (
+          {hasOverlays && (
             <IconButton
               onClick={(e) => {
                 e.stopPropagation();
@@ -193,8 +193,8 @@ const GanttTaskBarDisplay = <T,>({
             {task.name}
           </Typography>
         </div>
-        {hasChildren &&
-          task.children.map((childTask) => {
+        {hasOverlays &&
+          task.overlays.map((childTask) => {
             return (
               <div
                 style={ganttTaskBarChildOverlayStyles(childTask)}

src/frontend/src/utils/gantt.utils.tsx

@@ -87,6 +87,7 @@ interface GanttTaskData<T> {
   blocking: GanttTaskData<T>[];
   children: GanttTaskData<T>[];
   events: GanttEvent[];
+  overlays: GanttTaskData<T>[];
 
   // Optional Values
   styles?: GanttTaskStyles;
@@ -388,6 +389,7 @@ export const transformWorkPackageToGanttTask = <T extends WorkPackage>(
     events: workPackage.designReviews.map(transformDesignReviewToGanttEvent),
     blocking: getBlockingGanttTasks(workPackage, allWorkPackages, transformWorkPackageToGanttTask),
     children: [],
+    overlays: [],
 
     tooltip: {
       upperRightDisplay: <UserDisplay user={workPackage.lead} label="Lead" />,
@@ -418,6 +420,7 @@ export const transformProjectToGanttTask = (project: ProjectPreview): GanttTask<
     children: project.workPackages
       .filter((workPackage) => workPackage.blockedBy.length === 0)
       .map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
+    overlays: project.workPackages.map((wp) => transformWorkPackageToGanttTask(wp, project.workPackages)),
     events: [],
     tooltip: {
       upperRightDisplay: <UserDisplay user={project.lead} label="Lead" />,