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/04/03 19:21:04 UTC
(airflow) branch main updated: Keep graph interactions with options panel open (#48744)
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 fbc19a8b9b4 Keep graph interactions with options panel open (#48744)
fbc19a8b9b4 is described below
commit fbc19a8b9b4e426b6d3e220465905774ef606ab1
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Apr 3 15:20:58 2025 -0400
Keep graph interactions with options panel open (#48744)
---
.../ui/src/layouts/Details/PanelButtons.tsx | 154 ++++++++++-----------
1 file changed, 73 insertions(+), 81 deletions(-)
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 2b0cb378bae..a0174f849f6 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -17,10 +17,9 @@
* under the License.
*/
import {
- HStack,
+ Box,
IconButton,
ButtonGroup,
- type StackProps,
Stack,
createListCollection,
type SelectValueChangeDetails,
@@ -43,7 +42,7 @@ type Props = {
readonly limit: number;
readonly setDagView: (x: "graph" | "grid") => void;
readonly setLimit: React.Dispatch<React.SetStateAction<number>>;
-} & StackProps;
+};
const options = createListCollection({
items: [
@@ -57,7 +56,7 @@ const deps = ["all", "immediate", "tasks"];
type Dependency = (typeof deps)[number];
-export const PanelButtons = ({ dagView, limit, setDagView, setLimit, ...rest }: Props) => {
+export const PanelButtons = ({ dagView, limit, setDagView, setLimit }: Props) => {
const { dagId = "" } = useParams();
const [dependencies, setDependencies, removeDependencies] = useLocalStorage<Dependency>(
`dependencies-${dagId}`,
@@ -97,17 +96,8 @@ export const PanelButtons = ({ dagView, limit, setDagView, setLimit, ...rest }:
};
return (
- <HStack
- alignItems="flex-start"
- justifyContent="space-between"
- position="absolute"
- pr={3}
- top={0}
- width="100%"
- zIndex={1}
- {...rest}
- >
- <ButtonGroup attached size="sm" variant="outline">
+ <>
+ <ButtonGroup attached left={0} position="absolute" size="sm" top={0} variant="outline" zIndex={1}>
<IconButton
aria-label="Show Grid"
colorPalette="blue"
@@ -127,84 +117,86 @@ export const PanelButtons = ({ dagView, limit, setDagView, setLimit, ...rest }:
<MdOutlineAccountTree />
</IconButton>
</ButtonGroup>
- <Accordion.Root collapsible>
- <Accordion.Item borderBottomWidth={0} value="1">
- <Accordion.ItemTrigger justifyContent="flex-end">
- <Text fontSize="sm">Options</Text>
- <Accordion.ItemIndicator />
- </Accordion.ItemTrigger>
- <Accordion.ItemContent display="flex" justifyContent="flex-end">
- <Accordion.ItemBody bg="bg.muted" p={2} width="fit-content">
- <Stack gap={1} mr={2}>
- {dagView === "graph" ? (
- <>
- <DagVersionSelect />
- <DagRunSelect limit={limit} />
- <Select.Root
- collection={options}
- data-testid="filter-duration"
- onValueChange={handleDepsChange}
- size="sm"
- value={[dependencies]}
- >
- <Select.Label fontSize="xs">Dependencies</Select.Label>
- <Select.Trigger>
- <Select.ValueText placeholder="Dependencies" />
- </Select.Trigger>
- <Select.Content>
- {options.items.map((option) => (
- <Select.Item item={option} key={option.value}>
- {option.label}
- </Select.Item>
- ))}
- </Select.Content>
- </Select.Root>
+ <Box justifyContent="flex-end" position="absolute" right={3} top={0} width="250px" zIndex={1}>
+ <Accordion.Root collapsible>
+ <Accordion.Item borderBottomWidth={0} value="1">
+ <Accordion.ItemTrigger justifyContent="flex-end">
+ <Text fontSize="sm">Options</Text>
+ <Accordion.ItemIndicator />
+ </Accordion.ItemTrigger>
+ <Accordion.ItemContent display="flex">
+ <Accordion.ItemBody bg="bg.muted" p={2} width="fit-content">
+ <Stack gap={1} mr={2}>
+ {dagView === "graph" ? (
+ <>
+ <DagVersionSelect />
+ <DagRunSelect limit={limit} />
+ <Select.Root
+ collection={options}
+ data-testid="filter-duration"
+ onValueChange={handleDepsChange}
+ size="sm"
+ value={[dependencies]}
+ >
+ <Select.Label fontSize="xs">Dependencies</Select.Label>
+ <Select.Trigger>
+ <Select.ValueText placeholder="Dependencies" />
+ </Select.Trigger>
+ <Select.Content>
+ {options.items.map((option) => (
+ <Select.Item item={option} key={option.value}>
+ {option.label}
+ </Select.Item>
+ ))}
+ </Select.Content>
+ </Select.Root>
+ <Select.Root
+ collection={directionOptions}
+ onValueChange={handleDirectionUpdate}
+ size="sm"
+ value={[direction]}
+ >
+ <Select.Label fontSize="xs">Graph Direction</Select.Label>
+ <Select.Trigger>
+ <Select.ValueText />
+ </Select.Trigger>
+ <Select.Content>
+ {directionOptions.items.map((option) => (
+ <Select.Item item={option} key={option.value}>
+ {option.label}
+ </Select.Item>
+ ))}
+ </Select.Content>
+ </Select.Root>
+ </>
+ ) : (
<Select.Root
- collection={directionOptions}
- onValueChange={handleDirectionUpdate}
+ collection={displayRunOptions}
+ data-testid="display-dag-run-options"
+ onValueChange={handleLimitChange}
size="sm"
- value={[direction]}
+ value={[limit.toString()]}
>
- <Select.Label fontSize="xs">Graph Direction</Select.Label>
+ <Select.Label>Number of Dag Runs</Select.Label>
<Select.Trigger>
+ {}
<Select.ValueText />
</Select.Trigger>
<Select.Content>
- {directionOptions.items.map((option) => (
+ {displayRunOptions.items.map((option) => (
<Select.Item item={option} key={option.value}>
{option.label}
</Select.Item>
))}
</Select.Content>
</Select.Root>
- </>
- ) : (
- <Select.Root
- collection={displayRunOptions}
- data-testid="display-dag-run-options"
- onValueChange={handleLimitChange}
- size="sm"
- value={[limit.toString()]}
- >
- <Select.Label>Number of Dag Runs</Select.Label>
- <Select.Trigger>
- {}
- <Select.ValueText />
- </Select.Trigger>
- <Select.Content>
- {displayRunOptions.items.map((option) => (
- <Select.Item item={option} key={option.value}>
- {option.label}
- </Select.Item>
- ))}
- </Select.Content>
- </Select.Root>
- )}
- </Stack>
- </Accordion.ItemBody>
- </Accordion.ItemContent>
- </Accordion.Item>
- </Accordion.Root>
- </HStack>
+ )}
+ </Stack>
+ </Accordion.ItemBody>
+ </Accordion.ItemContent>
+ </Accordion.Item>
+ </Accordion.Root>
+ </Box>
+ </>
);
};