Gantt Chart View

The Gantt chart view displays task start/end times and dependencies on a timeline, helping you intuitively grasp project progress, identify the critical path, and spot schedule conflicts.

Entering the Gantt Chart View

After starting the Web interface, click the "Gantt" tab in the top navigation bar to enter the Gantt chart view. On first entry, the system automatically parses date data for all tasks and renders the timeline.

Page Layout

The Gantt chart view uses a left-right dual-column layout:

• Left task list: a fixed-width table showing task ID, title, time columns, and action buttons.
• Right timeline area: dynamically rendered task bars and dependency arrows, with a time-axis scale at the top.

Scroll events in the two columns are bidirectionally synchronized, so they stay aligned when scrolling vertically.

Time Granularity Switching

The top of the timeline provides five granularity buttons:

When switching granularity, task bar positions and widths are recalculated automatically to remain clear at the current scale.

Task Time Parsing

The Gantt chart does not require tasks to have planned dates. The system parses each task's effective start/end time according to the following rules:

Start time

1. If the task has plannedStart → use the planned start time first.
2. If there is no planned start time → use the task creation date (date part of createdDate).

End time

1. If the task has plannedEnd → use the planned end time first.
2. If there is no planned end time but there is updatedDate → use the date part of the update date.
3. If only the creation date exists → enable the minimum-width fallback.

Tip: To make a task show an exact time range on the Gantt chart, fill in plannedStart and plannedEnd in the "Planned dates" area of the task edit page.

Minimum Width Fallback

For tasks that only have a creation time and no planned dates, the system gives them a minimum visual width so they do not compress into invisible thin lines on the timeline:

• Day view: minimum visual width of about 4 hours; multiple tasks on the same day are automatically offset horizontally to avoid complete overlap.
• Week/Month view: minimum width of 1 day.
• Quarter/Year view: fixed 8-pixel color block width, ensuring visibility even at macroscopic scales.

These tasks are marked with * in the left list; hovering shows a "fallback rendering" hint.

Task Bar Interactions

Hover to View Details

Hovering over any task bar pops up a tooltip showing:

• Task ID and title.
• Parsed start and end times.
• Whether it is fallback rendering (tasks with only creation time).

Click to Highlight the Dependency Chain

Clicking a task bar highlights the entire dependency chain for that task:

• Predecessor tasks (what this task depends on) and successor tasks (what depends on this task) remain at normal brightness.
• Other unrelated tasks and arrows fade to 30% opacity.
• Click the task bar again or click an empty area to cancel the highlight.

This is very useful for quickly locating upstream and downstream impact scope in complex projects.

Open Task Details

• Click the "Details" button in the left list: opens the familiar task edit modal, where you can modify task fields, dates, and dependencies.
• Click the task bar on the right: highlights the dependency chain (as described above).

Dependency Arrows

Dependencies between tasks are visualized with SVG Bézier curve arrows:

• Arrows point from the predecessor task's end position to the successor task's start position.
• Multiple dependencies are automatically staggered to reduce line tangling.
• Arrows scale adaptively when switching time granularity.
• Dependency arrows also participate in the "click to highlight" interaction.

Note: The Gantt chart view currently only visualizes dependencies and does not support dragging to adjust task times. To modify task dates, use the "Details" button on the left to enter the task edit page.

List Sorting

The first four columns of the left task list (ID, Title, Start Time, End Time) support click sorting:

• Each header shows double-arrow icons (↑/↓) on the right.
• Inactive arrows are gray; ascending highlights the left arrow; descending highlights the right arrow.
• Click to toggle ascending/descending; clicking another column sorts by the new column.
• The outer frame width is the same across the three states, so header text does not jitter when switching.

After sorting, the Gantt bars on the right are re-laid out in the new task order, but their time positions remain unchanged.

Timeline Panning

Hold the mouse button and drag left or right in the timeline area to pan the time axis and view more dates:

• Drag left to view earlier times.
• Drag right to view later times.
• Panning is smooth and does not refresh the page.

Dark Mode Support

The Gantt chart view is fully adapted for dark mode:

• Task bars, timeline scales, and dependency arrows all use Tailwind CSS dark: variants.
• Hover tooltips and highlight states remain clear against dark backgrounds.
• No page refresh is needed after switching system theme or manual switching.

Tracking Gantt Chart

The tracking Gantt chart displays both the planned time range and actual task progress on the same row, helping you intuitively track deviations.

Dual-Layer Rendering

Each task row draws two independently positioned elements stacked on the z-axis:

• Bottom actual bar: solid status-color fill.
  • In Progress → blue
  • Done / Completed → green
  • To Do → gray
  • Blocked → red
  • Cancelled → light gray
• Top planned border: 60° diagonal-line fill frame (two border layers: 2px shadow layer + 1px final line).

Deviation Scenarios

Left Time Columns

The toolbar provides showPlanTime and showActualTime toggles:

• Actual Start / Actual End: always displayed, parsed in priority order actualStart → actualEnd → createdDate/updatedDate.
• Planned Start / Planned End: planned time columns, displayed only when showPlanTime is enabled.

Smart Dependency Arrows

In tracking mode, dependency arrow connection points consider both actual and planned times:

• If actual start is earlier than planned start, the arrow connects to the earlier actual position.
• If actual end is earlier than planned start (rare), it falls back to planned end to keep the dependency chain coherent.
• Arrow colors are uniformly gray to avoid clashing with status-colored actual bars.

Interaction Enhancements

• Hover tooltip: shows planned time range, actual time range, and fallback indicators together.
• Legend: the toolbar shows a legend—status-color bar = actual, diagonal-line frame = planned, arrow = dependency, amber * = estimated time.
• Click highlight: the planned border layer also participates in highlight/dimming.
• Default sort is ID descending; default view is day view.
• The first task is automatically selected on load; switching views auto-scrolls to the selected task.

Date Field Recommendations

To get the most value from the Gantt chart, it is recommended to fill in planned dates for key tasks:

These fields can be filled directly in the "Planned dates" area of the task edit page. After filling them, the Gantt chart automatically uses the more precise time range and no longer relies on creation-date fallback rendering.