[Gantt Chart] - Improvements

Overview

As a centralized view of the timelines of every project on Finishline, the Gantt Chart is one of the core pages of the application. It is relevant for nearly everyone on the site, from leadership to members to judges. While the current Gantt Chart functions with a good design, there are a series of improvements that need to be made in order to improve the user experience. These improvements can be broken down into 4 main sections:

• Speed
• View Windows
• Bugs
• Mobile Friendly

Stakeholders

Product Stakeholder: @naishahmistry
Software Stakeholder: @chpy04 @walker-sean @wavehassman
Reference Users: @chpy04

User Story

• As a member, I want to be able to quickly navigate through the gantt chart, opening and closing projects without lag, so that I can quickly find and open relevant projects.
• As a lead / head, I want to be able to change and move timelines quickly without lag, so that I can iterate and modify timelines without my experience being worsened by speed
• As a general viewer, I want to be able to select from a list of time ranges in which to view the gantt chart so that I can see the level of detail that I want, whether that be an overall view of the whole year or a week-by-week view of a specific work package.
• As a general viewer, I want to be able to set filters for the projects that show up. The projects should not have massive spaces between them. The filters should save between refreshes and be shareable with a URL so that I can set up a view of the Gantt Chart that makes sense for my role and not have to add filters every time I visit the page.
• As a general viewer, I want to be able to view and navigate the Gantt Chart from my phone, so that I can see project timelines on the go.

Success Metrics

The primary success metric of this epic is increased use of the Gantt Chart across the club. If users are able to easily navigate and view content on the Gantt Chart, they should spend a higher percentage of time on the page compared to other pages and compared to previous semesters.

Rollout Plan

Phase 1: Speed
5 weeks, Sep 14 - Oct 19

• Benchmark current speed with updated seed data for post-phase 1 comparison
• Backend-driven filtering (a new request per filter change, returning only relevant data) instead of frontend filtering
• Default filter to the latest car only
• Re-render isolation: opening/editing one project must not re-render others
• Smooth expand/collapse animation, fluid scroll, and drag-to-edit that snaps exactly to the release point with no delay

Phase 2: View Windows & Date Markers
2 weeks, Oct 19 - Nov 2

• Week/Month/Half Year/Year dropdown, each rendering elements proportionally with a minimum width floor, built on an abstracted time-window system so future ranges are easy to add
• Full view/edit parity across all four windows
• Date Markers modal: admin-settable, always-visible vertical lines for fixed dates (design freeze, SES submission, cost report, comp)

Phase 3: Bug Fixes
1 week, Nov 2 - Nov 9

• Sub-team filter fixed to show that team's projects (currently shows nothing)
• Filtered results stack with no gaps left by filtered-out projects
• Drag-to-edit "one-off" snap bug fixed
• A work package blocked by two others no longer renders twice

Phase 4: Retrospective Mode
2 weeks, Nov 9 - 23

• Toggle (personal/session-scoped, not shared across users), page title switches to red "Retrospective"
• Dashed orange bounding box per bar showing the originally planned date range, labeled Original: MM/DD/YYYY – MM/DD/YYYY, alongside the actual bar and its actual dates
• Search, filters, phase-color legend, and expand/collapse all behave identically to standard mode and not inherit old bugs (i.e. do some regression testing)

Phase 5: Mobile
2 weeks, Nov 23 - Dec 7

• Built against the mobile epic's designs, applied to the now-stable, already-optimized desktop implementation from Phases 1–4

Phase 6: Final testing, overflow, demo prep
1 week, Dec 7 - 13
Finals week (Dec 14 - 18): any last-minute fixes following demo

For the most part, this feature should be rolled out continuously with incremental merges into Develop. Larger related tasks, such as speed improvements, may be broken into mini-feature branches to span multiple tickets, but for the most part, there shouldn't be any branches with more than 5 sub-tickets.

This feature needs to be completed, meaning we sit down and go through all the functionality together, by December 13. Only the required functionality needs to be done. This is a day before the start of the final exam period. This will give us the final exam period to make any last changes. It is up to you how to split up this time between the 5 phases.

Out of Scope

Improving the readability of the retrospective Gantt Chart is something that could be done after the other items in this epic, but would likely require design and input from the product team, so for now it is out of scope. In addition, the design of the Gantt Chart (how it looks and what information is displayed) does not need to be changed for this ticket, so those kinds of improvements are out of scope.

Background / Context

We already have a Gantt Chart, but it is very slow and annoying to use, so people aren't clicking around it as much as would be useful, and editting the Gantt Chart is essentially never used right now. While the editting is in part because of a lack of advertisement of the feature, it is also extremely frustrating to use because of the speed concerns, so we would like to make it more usable first and then advertise it. This epic also helps to address speed concerns that have surrounded finishline. With this page being one of the more visitted ones, increasing its speed will help substantially with not only the user experience but also the overall public perception of finishline.

Acceptance Criteria & Mock-ups

Speed Improvement

AC for speed improvements on the Gantt Chart: after the initial page load, users should not experience any lag or loading times for anything other than when they change filters or hit a post endpoint to change something. Clicking the dropdown on projects should have a single smooth animation without delay, scrolling left/right or up/down should be fluid without buffering, and the speed of specific projects should be independent of the number of projects on the screen. When a user clicks to edit / create a project, there should be no noticable buffering time to pull up the new view. Changing the length or start date of objects in the Gantt Chart should have no delay, and it should snap the chart to the location the mouse actually drags it to. While the technical implementations of speed improvements will be largely up to the discretion of the lead, there are specific requirements:

• Filtering should be done on the backend instead of the frontend, so when a user changes filters it should make a new request that returns only the data that is relevant for that filter
• There should be as little re-rendering as possible (i.e. opening / editing one project should not re-render other projects)
• By default, filters should apply only to the latest car, to prevent loading every project
• The Gantt Chart should still use the same abstraction across projects, work packages, and tasks to display "Gantt Tasks" (Although it is recommended that the name of the abstraction be changed to something other than task now that tasks are objects on the Gantt Chart)
  To verify that the speed improvements are working as expected, the first step for this epic should be creating much more extensive seed data to stress test the system. An external package should at least be considered for this use case, although it may be the case that the editing capabilities make it so it is easier to code custom components.
  Note: seed data was improved during summer 2026 and is ready to use for this project

View Windows

The user should be able to select from a dropdown to change the time window they are looking at. Currently, the time window is hard-coded to show roughly 6 months. The dropdown options should be the following:

• "Week" shows two weeks across the screen on a normal application window and highlights day numbers at the top
• "Month" shows two months across the screen on a normal application window and highlights week numbers at the top
• "Half Year" shows eight months across the screen on a normal application window and highlights week numbers at the top (slightly wider range than the current implementation)
• "Year" shows 18 months across the screen on a normal application window and highlights months at the top
  Across all views, each element should take up a proportional amount of time on the chart, although there should be a minimum screen width that each element takes up even if it is shorter than that on the timeline. While the dropdowns should be hard-coded, the implementation should aim to abstract as much of the time window as possible such that adding different time frames in the future is a relatively easy task. Full functionality for viewing and editing should be available on every view.

Date Markers

The user should be able to set markers on certain dates that always appear on the calendar.
Examples: club-wide design freeze, SES Submission, Cost Report, Comp, etc could be vertical lines that are always visible.
This should be a modal accessible via a button on the gantt chart.

Bugs

There are a series of miscellaneous bugs currently on the Gantt Chart that should be fixed as part of this epic. Bug phase will come after speed issues and view windows as they may be altered/improved in those phases.

• Filtering by sub-team should show projects for that subteam (currently shows nothing)
• Filtering should show all the applicable projects stacked directly on top of each other instead of leaving spaces where the filtered-out projects were
• Editing the length or start date of a Gantt Element should put it where the user releases the mouse (currently nonfunctional)
• If a work package depends on two other work packages, it should not appear twice

Mobile

The mobile portion of this epic will be based on the mobile epic, and encompasses all mobile designs related to the Gantt Chart Page

Tickets

Fall 2026

Phase 1 (Speed)

• #4465
• #4466
• #4467
• #4468
• #4469
• #4470
• #4471
• #4472
• #4473
• #4474
• #4475
• #4476
• #4477

Phase 2 (view windows)

• #4478
• #4479
• #4480
• #4481
• #4482
• #4483
• #4484
• #4485

Phase 2 (date markers)

• #4486
• #4487
• #4488
• #4489

Phase 3 (bugs)

• #4490
• #4491
• #4492
• #4493

Phase 4 (retrospective mode)

• #4494
• #4495
• #4496
• #4497
• #4498

Phase 5 (mobile)

• #4499

Spring 2026 legacy tickets

• #3930
• #3924
• #3926
• #3927
• #3928
• #3929
• #3967
• #4009
• #4058
• #4079
• #4152