Skip to content

Navigate Grid view via keyboard #51784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Conversation

RoyLee1224
Copy link
Contributor

Related issues

#31556

Overview

Users can now efficiently navigate, jump within task instances using only their keyboard, enhancing operational speed for power users. The core navigation is complete and ready for initial feedback.

This PR is currently a draft because the navigation functionality for the 'Runs'(columns) and 'Tasks'(rows) is still under development.

Screenshot

grid_nav.mp4

PS: The key presses you see on screen are from my recording app, not part of the UI itself! :)


^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg bot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Jun 16, 2025
@RoyLee1224 RoyLee1224 marked this pull request as draft June 16, 2025 12:32
Copy link
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, looks nice.

I think we can reduce the need for manual useEffect and EventListener by using useHotkeys from "react-hotkeys-hook" which is what we use for other keybinds.

Comment on lines +57 to +61
const { search } = globalThis.location;
const searchParams = new URLSearchParams(search);
const groupPath = task.isGroup ? "group/" : "";
const mappedPath = task.is_mapped ? "/mapped" : "";
const path = `/dags/${dagId}/runs/${run.dag_run_id}/tasks/${groupPath}${task.id}${mappedPath}`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic seems similar to what we have in TaskLink, maybe we can extract somme utility function and reuse it at both places to avoid inconsistencies.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants