You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2025/08/28 13:58:24 UTC
(airflow) branch main updated: Add hotkey shortcut to toggle between grid and graph views. (#54667)
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 85cd1646d35 Add hotkey shortcut to toggle between grid and graph views. (#54667)
85cd1646d35 is described below
commit 85cd1646d35418b19ced3441fb3ed5eb59687061
Author: Karthikeyan Singaravelan <ti...@gmail.com>
AuthorDate: Thu Aug 28 19:28:15 2025 +0530
Add hotkey shortcut to toggle between grid and graph views. (#54667)
* Add hotkey shortcut to toggle between grid and graph views.
* Update translations with shortcut key.
---
.../src/airflow/ui/public/i18n/locales/en/dag.json | 4 ++--
.../ui/src/layouts/Details/PanelButtons.tsx | 24 ++++++++++++++++++----
2 files changed, 22 insertions(+), 6 deletions(-)
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
index 215c4161d8c..8fbd4f20653 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
@@ -92,8 +92,8 @@
"buttons": {
"options": "Options",
"showGantt": "Show Gantt",
- "showGraph": "Show Graph",
- "showGrid": "Show Grid"
+ "showGraphShortcut": "Show Graph (Press g)",
+ "showGridShortcut": "Show Grid (Press g)"
},
"dagRuns": {
"label": "Number of Dag Runs"
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
index 75262ba3cf8..34c06f6ab4f 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -32,6 +32,7 @@ import {
Box,
} from "@chakra-ui/react";
import { useReactFlow } from "@xyflow/react";
+import { useHotkeys } from "react-hotkeys-hook";
import { useTranslation } from "react-i18next";
import { FiChevronDown, FiGrid } from "react-icons/fi";
import { LuKeyboard } from "react-icons/lu";
@@ -137,12 +138,27 @@ export const PanelButtons = ({
}
};
+ useHotkeys(
+ "g",
+ () => {
+ if (dagView === "graph") {
+ setDagView("grid");
+ handleFocus("grid");
+ } else {
+ setDagView("graph");
+ handleFocus("graph");
+ }
+ },
+ [dagView],
+ { preventDefault: true },
+ );
+
return (
<Box position="absolute" top={1} width="100%" zIndex={1}>
<Flex flexWrap="wrap" justifyContent="space-between">
<ButtonGroup attached size="sm" variant="outline">
<IconButton
- aria-label={translate("dag:panel.buttons.showGrid")}
+ aria-label={translate("dag:panel.buttons.showGridShortcut")}
colorPalette="blue"
onClick={() => {
setDagView("grid");
@@ -150,13 +166,13 @@ export const PanelButtons = ({
handleFocus("grid");
}
}}
- title={translate("dag:panel.buttons.showGrid")}
+ title={translate("dag:panel.buttons.showGridShortcut")}
variant={dagView === "grid" ? "solid" : "outline"}
>
<FiGrid />
</IconButton>
<IconButton
- aria-label={translate("dag:panel.buttons.showGraph")}
+ aria-label={translate("dag:panel.buttons.showGraphShortcut")}
colorPalette="blue"
onClick={() => {
setDagView("graph");
@@ -164,7 +180,7 @@ export const PanelButtons = ({
handleFocus("graph");
}
}}
- title={translate("dag:panel.buttons.showGraph")}
+ title={translate("dag:panel.buttons.showGraphShortcut")}
variant={dagView === "graph" ? "solid" : "outline"}
>
<MdOutlineAccountTree />