OscarLigthart commented on code in PR #60549:
URL: https://github.com/apache/airflow/pull/60549#discussion_r2697461432
##########
airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx:
##########
@@ -107,87 +135,128 @@ export const TaskStreamFilter = () => {
</Text>
)}
- <VStack align="stretch" gap={1} width="100%">
- <Menu.Item asChild value="upstream">
- <Button
- asChild
- color={activeUpstream ? "white" : undefined}
- colorPalette={activeUpstream ? "blue" : "gray"}
- disabled={currentTaskId === undefined}
- size="sm"
- variant={activeUpstream ? "solid" : "ghost"}
- width="100%"
- >
- <Link
- replace
- style={{
- justifyContent: "flex-start",
- pointerEvents: currentTaskId === undefined ? "none" :
"auto",
- }}
- to={{ search: buildFilterSearch(true, false,
currentTaskId) }}
- >
- {translate("dag:panel.taskStreamFilter.options.upstream")}
- </Link>
- </Button>
- </Menu.Item>
+ <Separator my={2} />
+
+ {/* Direction Section */}
+ <VStack align="stretch" gap={2} width="100%">
+ <Text fontSize="xs" fontWeight="semibold">
+ {translate("dag:panel.taskStreamFilter.direction")}
+ </Text>
+ <VStack align="stretch" gap={1} width="100%">
+ {[
+ { active: activeUpstream, down: false, key: "upstream",
label: "upstream", up: true },
+ { active: activeDownstream, down: true, key: "downstream",
label: "downstream", up: false },
+ { active: bothActive, down: true, key: "both", label:
"both", up: true },
+ ].map(({ active, down, key, label, up }) => {
+ const onClick = () =>
+ buildFilterSearch({ depth, downstream: down, root:
currentTaskId, upstream: up });
+
+ return (
+ <Button
+ color={active ? "white" : undefined}
+ colorPalette={active ? "brand" : "gray"}
+ disabled={currentTaskId === undefined}
+ justifyContent="flex-start"
+ key={key}
+ onClick={onClick}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ onClick();
+ }
+ }}
+ size="sm"
+ variant={active ? "solid" : "ghost"}
+ width="100%"
+ >
+
{translate(`dag:panel.taskStreamFilter.options.${label}`)}
+ </Button>
+ );
+ })}
+ </VStack>
+ </VStack>
- <Menu.Item asChild value="downstream">
+ <Separator my={2} />
+
+ {/* Depth Section */}
+ <VStack align="stretch" gap={2} width="100%">
+ <Text fontSize="xs" fontWeight="semibold">
+ {translate("dag:panel.taskStreamFilter.depth")}
+ </Text>
+ <Input
+ disabled={currentTaskId === undefined || !hasActiveFilter}
+ min={0}
+ onChange={(event) => {
+ const { value } = event.target;
+
+ buildFilterSearch({
+ depth: value,
+ downstream: includeDownstream,
+ root: filterRoot,
+ upstream: includeUpstream,
+ });
+ }}
+ onKeyDown={(event) => {
+ event.stopPropagation();
+ }}
+ placeholder="All"
+ size="sm"
+ type="number"
+ value={depth ?? ""}
+ />
+ </VStack>
+
+ <Separator my={2} />
+
+ {/* Mode Section */}
+ <VStack align="stretch" gap={2} width="100%">
+ <Text fontSize="xs" fontWeight="semibold">
+ {translate("dag:panel.taskStreamFilter.mode")}
+ </Text>
+ <ButtonGroup attached colorPalette="brand" size="sm"
variant="outline" width="100%">
Review Comment:
I started out using it, but the buttons themselves don't span the full
width, which looked a bit weird in the module.
<img width="644" height="613" alt="image"
src="https://github.com/user-attachments/assets/a09ea5bf-b0e2-4f0c-95d0-fd6d7eda90d8";
/>
I added `flex: 1` to the buttons in this `ButtonGroup`. When I altered that
in the `ButtonGroupToggle` you added, it would mess up the DagList view. So I
figured best to keep the blast radius small and use these, tailored to this
module.
Let me know if you think there is a way to make them fit to both scenario's,
or whether this will do for now.
--
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]
