apache/airflow

[Filters] Improve DAG View – Code tab with search and section filters

Open

#53045 opened on Jul 8, 2025

View on GitHub
 (10 comments) (0 reactions) (0 assignees)Python (44,809 stars) (16,781 forks)batch import
area:UIgood first issuekind:featurekind:meta

Description

View

DAG View - Code tab

Proposed Improvements

  • Text Search (within DAG code)
    ↪ Enables quick lookup of task IDs, parameter names, function names, or config snippets

  • Toggle for File Diff (across DAG Versions)
    ↪ Helps users understand changes introduced between versions (especially when troubleshooting regressions)

  • Section Filter (e.g., show only task definitions, schedule config, etc.)
    ↪ Useful when scanning long DAG files to focus on relevant areas (e.g., @task decorators, @asset functions)

API Support

❌ No

  • DAG source code is retrieved in full via the /dagSource endpoint.
  • No server-side support for search, diff, or section indexing currently exists.

UI Impact

  • Text search input could be added above the code viewer, with inline highlighting.
  • A toggle for DAG version comparison could enable unified or split diff views.
  • Section filters could be implemented via regex (e.g., jump to task definitions) or indexing during parsing.

Notes

  • Particularly helpful for large DAGs with many custom functions or inline logic
  • Would bring the UI experience closer to modern IDEs, improving developer ergonomics

Contributor guide

Tech stack
pythonjavascriptreact
Domain
frontenddeveloper experienceperformance
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic understanding of Airflow DAGsfamiliarity with React frontendknowledge of regex for section filtering
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Start by examining the `/dagSource` API endpoint in the Airflow backend (likely in `airflow/api connexion/endpoints/dag source endpoint.py`) to understand how DAG code is fetched. For the frontend, look at the Code tab component in `airflow/www/static/js/dag/code.js` or similar. Text search can be implemented with client side JavaScript filtering and highlighting. The version diff feature may require fetching code from previous DAG runs; check the `dagVersion` API endpoint. Section filtering can be achieved by parsing the DAG code for patterns like `@task` or `@asset` using regex. Existing PRs or comments in the issue may provide additional context.