jhaabhijeet864 opened a new pull request, #74013:
URL: https://github.com/apache/airflow/pull/74013
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
## Context & Problem Statement
This PR resolves issue **#63715**, providing a robust, highly performant
time range selector for the Gantt view. As DAGs grow in size and complexity,
rendering every single task instance in a run becomes unmanageable and visually
overwhelming. Users require a way to slice the Gantt chart to a specific time
window.
---
## Why This Solves the Problem
This implementation introduces a seamlessly integrated "Start Date" range
filter in the UI that acts as a strict time-window selector for the Gantt view.
Instead of passing the entire payload to the browser and attempting to
filter it there, **this solution filters the overlapping task instances at the
database level**. Only tasks that intersect with the user's selected time range
are fetched, serialized, and rendered, keeping the frontend snappy regardless
of the DAG's scale.
---
## Why This is Better Than Previous Attempts
I have carefully reviewed previous attempts to solve this issue (such as
**PR #61058**) and the feedback maintainers provided when closing them. I
designed this implementation specifically to address those past shortcomings:
### 1. Avoiding Client-Side Bloat
Previous implementations attempted to solve the filtering entirely on the
frontend. They fetched *all* task instances for a run and then used React/JS to
hide tasks outside the window. As maintainers pointed out, this crashes the
browser on massive DAGs and defeats the purpose of data-fetching optimizations.
**My implementation shifts this burden entirely to the backend FastAPI layer.**
### 2. Preserving Database Index Utilization
Earlier backend attempts tried to handle running tasks (where `end_date` is
`None`) by using SQL functions like `COALESCE(end_date, NOW())` within the
`WHERE` clause. Maintainers correctly noted that wrapping columns in functions
destroys database index utilization, leading to full table scans. **I have
eliminated `func.coalesce` entirely from the filtering logic.**
---
## Technical Innovations & Architecture
### Index-Friendly Null Handling
To ensure the Gantt chart correctly displays currently running or queued
tasks without breaking database indexes, the SQL filter logic uses a pure `OR`
condition instead of coalescing:
```python
or_(TaskInstance.end_date >= start_date_gte, TaskInstance.end_date.is_(None))
```
This guarantees that active tasks remain visible within the selected time
window while allowing the database engine to effectively use existing indexes
on the `end_date` column.
### Seamless Frontend Wiring & State Management
The UI integration reuses the existing `START_DATE_RANGE` filter component
within `GridFilters.tsx`, but conditionally renders it *only* when `dagView ===
'gantt'`. This keeps the standard Grid view clean. Furthermore, all filters are
synchronized to the URL query parameters (`start_date_gte` and
`start_date_lte`), ensuring that users can bookmark and share specific Gantt
time-slices.
### Reliance on CI OpenAPI Codegen
The FastAPI endpoints (`gantt.py`) have been updated to officially accept
`start_date_gte` and `end_date_lte`. To adhere strictly to Airflow's
architectural standards, **I have avoided making fragile manual patches to the
`openapi-gen/` TypeScript files.**
The official `openapi-merge-cli` pipeline will automatically pick up these
new parameters during the CI build process, generating the correct types and
ensuring the UI compiles natively without hacky overrides.
---
## Related Issue
Closes #63715
## Testing & Validation
- [x] **Unit Testing:** Comprehensive tests added in `test_gantt.py`
verifying partial filters, combined boundaries, and overlapping logic for both
completed and running (null end_date) task instances.
- [x] **Frontend Validation:** Verified that URL parameters
(`start_date_gte`, `start_date_lte`) are properly populated by the FilterBar
and wired directly into the backend API requests.
- [x] **UX Validation:** Verified that the UI state resets correctly when
switching between Grid and Gantt views, preventing filter bleed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
