Repository: apache/airflow
File: airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx (TypeScript)

Code before:

                  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%">
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "static");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "static" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.static")}
                </Button>
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "traverse");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "traverse" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.traverse")}
                </Button>
              </ButtonGroup>
            </VStack>


Review comment (suggestion):
I recently added a `ButtonGroupToggle` component. Feel free to use it here too.

Code after:

                  buildFilterSearch({
                    depth: value,
                    downstream: includeDownstream,
                    root: filterRoot,
                    upstream: includeUpstream,
                  });
                }}
                onKeyDown={(event) => {
                  event.stopPropagation();
                }}
                placeholder={translate("common:expression.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%">
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "static");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "static" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.static")}
                </Button>
                <Button
                  disabled={!hasActiveFilter}
                  flex="1"
                  onClick={() => {
                    searchParams.set("mode", "traverse");
                    setSearchParams(searchParams);
                  }}
                  variant={mode === "traverse" ? "solid" : "outline"}
                >
                  {translate("dag:panel.taskStreamFilter.modes.traverse")}
                </Button>
              </ButtonGroup>
            </VStack>