Feature #43397
closed
Organize Gantt chart code by separating it into views and Stimulus controllers
0%
Description
Background/Purpose¶
I believe the Gantt chart is one of the important tools in project management. However, the Gantt chart in Redmine has seen little improvement in recent years.
One possible reason is that its code has become complex, making it difficult to maintain or extend.
This patch aims to reorganize the code to make future improvements and new features easier to implement.
Since the Gantt chart is a complex feature that must not display incorrect information, I plan to refactor it step by step.
The planned steps are as follows:
- Roughly reorganize the code using views and Stimulus controllers
- Remove dependencies on jQuery and jQuery UI
- Clearly separate the view, data, and business logic, and redesign the HTML structure (including removing the Raphael dependency)
This patch implements step (1) as the first step toward modernization.
In parallel with this work, I also plan to add and improve the following features:
- Drag-and-drop editing
- Manual reordering of issues and projects
- Remembering column widths and adding a sticky header
Details¶
- Add missing tests to ensure current behavior is preserved
- Extract Gantt chart CSS into a separate
gantt.cssfile - Reorganize the code for the query form, chart, and project/issue tree using views and Stimulus controllers
- Keep the existing business logic as much as possible during reorganization
- Leave partially separated code temporarily as acceptable
- Make Stimulus controllers loosely coupled by communicating through events
- Keep the current behavior, DOM structure, and styles unchanged in this step to ensure the UI and interactions remain consistent
- Remove unnecessary addition of the CSS class
gantt_content(a leftover issue from #32019)
Checks¶
- All tests pass: https://github.com/hidakatsuya/redmine/pull/31/checks
- Verified that the appearance remains unchanged with Visual Regression Tests (VRT): https://github.com/hidakatsuya/redmine/actions/runs/18820868358
There are minor font rendering differences due to environment differences between baseline and actual screenshots, but no significant visual differences were found. - The printed output (HTML to PDF) remains identical before and after the change.
- Tested on macOS with Chrome, Firefox, and Safari
Screenshots¶
Before:
After:
For full before/after comparisons, please refer to the Visual Regression Test (VRT) results:
https://github.com/hidakatsuya/redmine/actions/runs/18820868358
Files
Updated by Katsuya HIDAKA 23 days ago
You can also check the patch diff in the following pull request:
https://github.com/hidakatsuya/redmine/pull/31
Updated by Go MAEDA 23 days ago
- Target version set to 7.0.0
Setting the target version to 7.0.0.
Katsuya HIDAKA wrote:
In parallel with this work, I also plan to add and improve the following features:
- Drag-and-drop editing
- Manual reordering of issues and projects
- Remembering column widths and adding a sticky header
I found some issues that requests the features described above.
Drag-and-drop editing: Manual reordering of issues and projects: Remembering column widths: Sticky header:
Updated by Anonymous
Updated by Go MAEDA 16 days ago
- Status changed from Closed to Reopened
The test fails during the first few days of each month.
Failure: GanttsTest#test_context_menu_and_tooltip_interactions [test/system/gantts_test.rb:76]: expected to find css "div.tooltip span.tip" but there were no matches bin/rails test test/system/gantts_test.rb:68
This happens because the Gantt chart stops showing issues whose due dates fall in the previous month. As a result, the test ends up checking the wrong tooltip and the assertion fails.
To make the test stable and independent of the current date, I suggest fixing the test time with travel_to Time.zone.today.prev_month.end_of_month.
diff --git a/test/system/gantts_test.rb b/test/system/gantts_test.rb
index 1b18caaf3..a679caae0 100644
--- a/test/system/gantts_test.rb
+++ b/test/system/gantts_test.rb
@@ -66,7 +66,9 @@ class GanttsTest < ApplicationSystemTestCase
end
test 'context menu and tooltip interactions' do
- visit_gantt
+ travel_to Time.zone.today.prev_month.end_of_month do
+ visit_gantt
+ end
issue_subject = find('div.issue-subject.hascontextmenu', match: :first)
issue_reference = issue_subject.find('a.issue', match: :first).text
Updated by Katsuya HIDAKA 15 days ago
Go MAEDA wrote in #note-6:
To make the test stable and independent of the current date, I suggest fixing the test time with
travel_to Time.zone.today.prev_month.end_of_month.
Thank you for pointing out the test failure.
I confirmed that the tests pass after applying the changes you suggested, and I agree with your modification.
Updated by Katsuya HIDAKA 15 days ago
- File 0001-Fix-Gantt-context-menu-system-test-flakiness.patch 0001-Fix-Gantt-context-menu-system-test-flakiness.patch added
- File 0002-Fix-Gantt-system-test-to-correctly-verify-context-menu-open-close-behavior.patch 0002-Fix-Gantt-system-test-to-correctly-verify-context-menu-open-close-behavior.patch added
I attached another patch 0001 as an alternative solution to the fix mentioned in #note-6.
• The context menu test now targets Issue#1.
• Since the due date of Issue#1 is 10 days after the test date, the task bar on the Gantt chart is always visible.
• I confirmed that the test passes when run with the fixtures and the test date fixed to November 1, November 15, and November 30, 2025.
Patch 0002 fixes the Gantt system test to correctly verify the context menu open/close behavior.
Updated by Go MAEDA 15 days ago
- Status changed from Reopened to Closed
Katsuya HIDAKA wrote in #note-8:
I attached another patch 0001 as an alternative solution to the fix mentioned in #note-6.
• The context menu test now targets Issue#1.
• Since the due date of Issue#1 is 10 days after the test date, the task bar on the Gantt chart is always visible.
• I confirmed that the test passes when run with the fixtures and the test date fixed to November 1, November 15, and November 30, 2025.Patch 0002 fixes the Gantt system test to correctly verify the context menu open/close behavior.
Updated by Katsuya HIDAKA 15 days ago
- File 0001-Fix-a-test-failure-in-the-Gantt-chart-context-menu-caused-by-unintended-button-clicks.patch 0001-Fix-a-test-failure-in-the-Gantt-chart-context-menu-caused-by-unintended-button-clicks.patch added
The patch attached in #note-8 has an issue, and the system test can still fail for another reason.
Here is a failing CI run:
https://github.com/hidakatsuya/redmine/actions/runs/19037565830/job/54365770501
The cause of the failure is the find('body').click added in patch 0002 to close the context menu.
It sometimes accidentally clicks the “2025-12” link, which makes the chart show December 2025 and causes the test to fail because the task bar no longer exists.
I’m attaching an additional patch to fix this problem.
I confirmed that the test passes at least three times in GitHub CI.