Skip to content

Add time range selector to Gantt view#64204

Closed
Smitaambiger wants to merge 1 commit intoapache:mainfrom
Smitaambiger:feat/gantt-clean
Closed

Add time range selector to Gantt view#64204
Smitaambiger wants to merge 1 commit intoapache:mainfrom
Smitaambiger:feat/gantt-clean

Conversation

@Smitaambiger
Copy link

@Smitaambiger Smitaambiger commented Mar 25, 2026

Fixes #63715

What this PR does

Adds a start date and end date filter to the Gantt view UI.

This allows users to zoom into a specific time range and better visualize task durations, especially when task instance tries span a large time window.


Implementation details

  • Added two date inputs (start and end) above the Gantt chart
  • Applied client-side filtering on transformed Gantt data (task.x start/end timestamps)
  • Dynamically updated visible labels based on filtered tasks
  • Default behavior remains unchanged when no filter is applied
  • No backend changes required

Why this is needed

As discussed in the issue, when task instance tries are spread across a long duration (e.g., after clearing runs much later), the Gantt chart expands its time window significantly.

This causes task bars to appear compressed (due to minimum width constraints), making it difficult to distinguish duration differences.

The introduced date range filter allows users to focus on a smaller time window, improving readability and enabling more accurate visual analysis.


Testing

  • Verified UI rendering and interaction locally

  • Confirmed filtering logic works correctly for:

    • start date only
    • end date only
    • both start and end date
  • Ensured default behavior (no filter) remains unchanged

Due to local environment limitations with Breeze (Docker + WSL), I was not able to fully reproduce the long-gap retry scenario (i.e., widely spaced task instance tries after clearing runs).

However, the implemented filtering aligns with the expected behavior described in the issue discussion, and should allow proper visualization when such scenarios occur.


Notes

  • This implementation focuses on frontend-level filtering as suggested in the discussion
  • Happy to iterate further based on feedback (e.g., UX improvements or backend integration if needed)

@boring-cyborg
Copy link

boring-cyborg bot commented Mar 25, 2026

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

  • Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
  • In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
  • Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
  • Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
  • Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
  • Be sure to read the Airflow Coding style.
  • Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
    Apache Airflow is a community-driven project and together we are making it better 🚀.
    In case of doubts contact the developers at:
    Mailing List: dev@airflow.apache.org
    Slack: https://s.apache.org/airflow-slack

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Mar 25, 2026
@bbovenzi
Copy link
Contributor

bbovenzi commented Mar 25, 2026

This is client side filtering. Closing. This needs to be a start date and end date filter added to the gantt and grid runs endpoint.

@bbovenzi bbovenzi closed this Mar 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a time range selector for the Gantt view

2 participants