Merge pull request #3823 from Northeastern-Electric-Racing/#3661-Gantt-Chart-Items-Duplicating

#3661 gantt chart items duplicating

Author: chpy04

src/backend/src/prisma/seed.ts

@@ -1395,7 +1395,7 @@ const performSeed: () => Promise<void> = async () => {
   await ChangeRequestsService.reviewChangeRequest(joeShmoe, project3WP1ActivationCrId, 'Approved!', true, ner, null);
 
   /** Work Package 2 */
-  await seedWorkPackage(
+  const { workPackage: project3WP2 } = await seedWorkPackage(
     lexLuther,
     'Laser Canon Research',
     changeRequestProject7Id,
@@ -1420,7 +1420,7 @@ const performSeed: () => Promise<void> = async () => {
     WorkPackageStage.Testing,
     weeksFromNow(3).toISOString().split('T')[0],
     4,
-    [],
+    [project3WP1.wbsNum, project3WP2.wbsNum],
     [],
     zatanna,
     WbsElementStatus.Active,

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

@@ -5,9 +5,6 @@
 
 import GanttTaskBarEdit from './GanttTaskBarEdit';
 import GanttTaskBarView from './GanttTaskBarView';
-import { ArcherContainer } from 'react-archer';
-import { useRef } from 'react';
-import { ArcherContainerHandle } from 'react-archer/lib/ArcherContainer/ArcherContainer.types';
 import {
   GanttChange,
   GanttTask,
@@ -46,14 +43,11 @@ const GanttTaskBar = <T,>({
   highlightSubtaskComparator,
   highlightTaskComparator
 }: GanttTaskBarProps<T>) => {
-  const archerRef = useRef<ArcherContainerHandle>(null);
-
   const getStartCol = (start: Date) => {
     const startCol = days.findIndex((day) => dateToString(day) === dateToString(getMonday(start))) + 1;
     return startCol;
   };
 
-  // if the end date doesn't exist within the timeframe, have it span to the end
   const getEndCol = (end: Date) => {
     const endCol =
       days.findIndex((day) => dateToString(day) === dateToString(getMonday(end))) === -1
@@ -62,45 +56,34 @@ const GanttTaskBar = <T,>({
     return endCol;
   };
 
-  const handleChange = (change: GanttChange<T>) => {
-    createChange(change);
-    setTimeout(() => {
-      if (archerRef.current) {
-        archerRef.current.refreshScreen();
-      }
-    }, 100); // wait for the change to be added to the state and the DOM to update
-  };
-
   return (
-    <ArcherContainer ref={archerRef} strokeColor="#ef4545">
-      <div id={`gantt-task-${task.id}`}>
-        {isEditMode ? (
-          <GanttTaskBarEdit
-            days={days}
-            task={task}
-            createChange={handleChange}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            onAddTaskPressed={onAddTaskPressed}
-          />
-        ) : (
-          <GanttTaskBarView
-            days={days}
-            task={task}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            handleOnMouseOver={handleOnMouseOver}
-            handleOnMouseLeave={handleOnMouseLeave}
-            showChildren={showChildren}
-            onShowChildrenToggle={onShowChildrenToggle}
-            highlightedChange={highlightedChange}
-            onAddTaskPressed={onAddTaskPressed}
-            highlightSubtaskComparator={highlightSubtaskComparator}
-            highlightTaskComparator={highlightTaskComparator}
-          />
-        )}
-      </div>
-    </ArcherContainer>
+    <div id={`gantt-task-${task.id}`}>
+      {isEditMode ? (
+        <GanttTaskBarEdit
+          days={days}
+          task={task}
+          createChange={createChange}
+          getStartCol={getStartCol}
+          getEndCol={getEndCol}
+          onAddTaskPressed={onAddTaskPressed}
+        />
+      ) : (
+        <GanttTaskBarView
+          days={days}
+          task={task}
+          getStartCol={getStartCol}
+          getEndCol={getEndCol}
+          handleOnMouseOver={handleOnMouseOver}
+          handleOnMouseLeave={handleOnMouseLeave}
+          showChildren={showChildren}
+          onShowChildrenToggle={onShowChildrenToggle}
+          highlightedChange={highlightedChange}
+          onAddTaskPressed={onAddTaskPressed}
+          highlightSubtaskComparator={highlightSubtaskComparator}
+          highlightTaskComparator={highlightTaskComparator}
+        />
+      )}
+    </div>
   );
 };
 

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

@@ -148,7 +148,7 @@ const GanttTaskBarDisplay = <T,>({
   };
 
   return (
-    <div id={task.id} style={ganttTaskBarContainerStyles()}>
+    <div style={ganttTaskBarContainerStyles()}>
       <Box sx={ganttTaskBarBackgroundStyles(days.length)}>
         <ArcherElement
           id={task.id}

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

@@ -6,7 +6,6 @@ import {
 } from '../../../../../utils/gantt.utils';
 import { Collapse } from '@mui/material';
 import GanttTaskBar from './GanttTaskBar';
-import BlockedGanttTaskView from './BlockedTaskBarView';
 import GanttTaskBarDisplay from './GanttTaskBarDisplay';
 
 interface GanttTaskBarViewProps<T> {
@@ -54,7 +53,7 @@ const GanttTaskBarView = <T,>({
         highlightTaskComparator={highlightTaskComparator}
       />
 
-      <Collapse in={showChildren}>
+      <Collapse in={showChildren} unmountOnExit>
         {task.children.map((child) => {
           return (
             <GanttTaskBar
@@ -74,23 +73,6 @@ const GanttTaskBarView = <T,>({
           );
         })}
       </Collapse>
-      {task.blocking.map((blocking) => {
-        return (
-          <BlockedGanttTaskView
-            key={blocking.id}
-            task={blocking}
-            days={days}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            handleOnMouseOver={handleOnMouseOver}
-            onShowChildrenToggle={onShowChildrenToggle}
-            highlightSubtaskComparator={highlightSubtaskComparator}
-            highlightTaskComparator={highlightTaskComparator}
-            handleOnMouseLeave={handleOnMouseLeave}
-            highlightedChange={highlightedChange}
-          />
-        );
-      })}
     </>
   );
 };

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

@@ -15,6 +15,7 @@ import { Box, Typography } from '@mui/material';
 import { useState } from 'react';
 import GanttTaskBar from './GanttChartComponents/GanttTaskBar/GanttTaskBar';
 import GanttToolTip from './GanttChartComponents/GanttToolTip';
+import { ArcherContainer } from 'react-archer';
 
 interface GanttChartSectionProps<T> {
   start: Date;
@@ -64,42 +65,43 @@ const GanttChartSection = <T,>({
   };
 
   return tasks.length > 0 ? (
-    <Box sx={{ width: 'fit-content' }}>
-      <Box sx={{ mt: '1rem', width: 'fit-content' }}>
-        {tasks.map((task) => {
-          return (
-            <Box display="flex" alignItems="center">
-              <GanttTaskBar
-                key={task.id}
-                days={days}
-                task={task}
-                isEditMode={isEditMode}
-                createChange={handleCreateProjectChange}
-                handleOnMouseOver={handleOnMouseOver}
-                handleOnMouseLeave={handleOnMouseLeave}
-                onShowChildrenToggle={() => onShowChildrenToggle(task)}
-                onAddTaskPressed={onAddTaskPressed}
-                showChildren={shouldShowChildren(task)}
-                highlightedChange={highlightedChange}
-                highlightSubtaskComparator={highlightSubtaskComparator}
-                highlightTaskComparator={highlightTaskComparator}
-              />
-            </Box>
-          );
-        })}
+    <ArcherContainer strokeColor="#ef4545">
+      <Box sx={{ width: 'fit-content' }}>
+        <Box sx={{ mt: '1rem', width: 'fit-content' }}>
+          {tasks.map((task) => {
+            return (
+              <Box key={task.id} display="flex" alignItems="center">
+                <GanttTaskBar
+                  days={days}
+                  task={task}
+                  isEditMode={isEditMode}
+                  createChange={handleCreateProjectChange}
+                  handleOnMouseOver={handleOnMouseOver}
+                  handleOnMouseLeave={handleOnMouseLeave}
+                  onShowChildrenToggle={() => onShowChildrenToggle(task)}
+                  onAddTaskPressed={onAddTaskPressed}
+                  showChildren={shouldShowChildren(task)}
+                  highlightedChange={highlightedChange}
+                  highlightSubtaskComparator={highlightSubtaskComparator}
+                  highlightTaskComparator={highlightTaskComparator}
+                />
+              </Box>
+            );
+          })}
+        </Box>
+        {currentTooltipOptions && (
+          <GanttToolTip
+            yCoordinate={cursorY}
+            title={currentTooltipOptions.name}
+            startDate={currentTooltipOptions.start}
+            endDate={currentTooltipOptions.end}
+            color={currentTooltipOptions.styles?.backgroundColor}
+            upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
+            lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
+          />
+        )}
       </Box>
-      {currentTooltipOptions && (
-        <GanttToolTip
-          yCoordinate={cursorY}
-          title={currentTooltipOptions.name}
-          startDate={currentTooltipOptions.start}
-          endDate={currentTooltipOptions.end}
-          color={currentTooltipOptions.styles?.backgroundColor}
-          upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
-          lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
-        />
-      )}
-    </Box>
+    </ArcherContainer>
   ) : (
     <Typography sx={{ marginTop: 5 }}>No Projects to Display</Typography>
   );

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

@@ -411,7 +411,7 @@ const getBlockingGanttTasks = <T extends WorkPackage>(
 
 export const transformTaskToGanttTask = <T extends Task>(task: T, end: Date): GanttTask<T> => {
   return {
-    id: uuidv4(),
+    id: task.taskId,
     element: task,
 
     name: task.title,
@@ -441,7 +441,7 @@ export const transformWorkPackageToGanttTask = <T extends WorkPackage>(
   allWorkPackages: T[]
 ): GanttTask<T> => {
   return {
-    id: uuidv4(),
+    id: workPackage.id,
     element: workPackage,
 
     name: workPackage.name,
@@ -477,17 +477,15 @@ export const transformProjectToGanttTask = (
   const taskList = hideTasks ? [] : project.tasks;
 
   return {
-    id: uuidv4(),
+    id: project.id,
     element: project,
 
     name: project.name,
     start: startDate,
     end: endDate,
     blocking: [],
     children: [
-      ...project.workPackages
-        .filter((workPackage) => workPackage.blockedBy.length === 0)
-        .map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
+      ...project.workPackages.map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
       ...taskList.map((task) => transformTaskToGanttTask(task, endDate))
     ],
     overlays: [