minyeamer commented on code in PR #71558: URL: https://github.com/apache/airflow/pull/71558#discussion_r4260467910
########## airflow-core/src/airflow/ui/src/queries/useTimeScheduleData.ts: ########## @@ -0,0 +1,92 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { experimental_streamedQuery as streamedQuery, useQuery } from "@tanstack/react-query"; + +import { OpenAPI } from "openapi/requests/core/OpenAPI"; +import type { TimeScheduleBatch } from "openapi/requests/types.gen"; + +import { useAutoRefresh } from "src/utils"; + +const streamTimeSchedule = async function* (streamQuery: string, signal: AbortSignal) { + const response = await fetch(`${OpenAPI.BASE}/ui/time-schedule?${streamQuery}`, { signal }); + + if (!response.ok || !response.body) { + throw new Error(`Time Schedule request failed with status ${response.status}`); + } + const reader = response.body.getReader(); + const decoder = new TextDecoder(); + const cancelReader = () => { + void reader.cancel().catch(() => undefined); + }; + + signal.addEventListener("abort", cancelReader, { once: true }); + let buffer = ""; + + try { + while (!signal.aborted) { + // Chunks share a buffer, so reads must remain sequential. + // eslint-disable-next-line no-await-in-loop + const { done, value } = await reader.read(); + + signal.throwIfAborted(); + buffer += done ? decoder.decode() : decoder.decode(value, { stream: true }); + const lines = buffer.split("\n"); + + buffer = lines.pop() ?? ""; + if (done && buffer.trim()) { + lines.push(buffer); + } + yield* lines.filter((line) => line.trim()).map((line) => JSON.parse(line) as TimeScheduleBatch); + if (done) { + break; + } + } + } finally { + signal.removeEventListener("abort", cancelReader); + await reader.cancel().catch(() => undefined); + reader.releaseLock(); + } +}; + +export const useTimeScheduleData = (streamQuery: string) => { + const refetchInterval = useAutoRefresh({}); + const nonZoomQuery = new URLSearchParams(streamQuery); + + nonZoomQuery.delete("time_scale"); + const nonZoomStreamQuery = nonZoomQuery.toString(); + const query = useQuery({ + placeholderData: (previousData, previousQuery) => + previousQuery?.queryKey[1] === nonZoomStreamQuery ? previousData : undefined, + queryFn: streamedQuery<TimeScheduleBatch>({ + refetchMode: "replace", + streamFn: ({ signal }) => streamTimeSchedule(streamQuery, signal), + }), + queryKey: ["time-schedule", nonZoomStreamQuery, streamQuery], + refetchInterval, + refetchIntervalInBackground: false, + retry: false, + }); Review Comment: ### Zoom and auto-refresh Time Schedule now uses React Query's `streamedQuery` and Airflow's existing `useAutoRefresh` to follow the configured refresh interval. `refetchMode: "replace"` replaces the previous batches after a refresh completes, preventing repeated refreshes from accumulating data. React Query also manages loading and errors. ########## airflow-core/src/airflow/api_fastapi/core_api/routes/ui/time_schedule.py: ########## @@ -0,0 +1,227 @@ +# Licensed to the Apache Software Foundation (ASF) under one +# or more contributor license agreements. See the NOTICE file +# distributed with this work for additional information +# regarding copyright ownership. The ASF licenses this file +# to you under the Apache License, Version 2.0 (the +# "License"); you may not use this file except in compliance +# with the License. You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, +# software distributed under the License is distributed on an +# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +# KIND, either express or implied. See the License for the +# specific language governing permissions and limitations +# under the License. + +from __future__ import annotations + +from collections.abc import Generator +from datetime import timedelta +from typing import Annotated, Literal + +import pendulum +from fastapi import Depends, HTTPException, Query, status +from fastapi.responses import StreamingResponse +from sqlalchemy import false, func, select +from sqlalchemy.sql import Select + +from airflow.api_fastapi.auth.managers.models.resource_details import DagAccessEntity +from airflow.api_fastapi.common.db.common import apply_filters_to_select +from airflow.api_fastapi.common.parameters import ( + FilterOptionEnum, + FilterParam, + QueryDagIdPatternSearch, + QueryDagRunRunTypesFilter, + QueryDagRunStateFilter, + QueryPausedFilter, + QueryTagsFilter, + QueryTeamsFilter, + RangeFilter, + datetime_range_filter_factory, + filter_param_factory, + float_range_filter_factory, +) +from airflow.api_fastapi.common.router import AirflowRouter +from airflow.api_fastapi.core_api.datamodels.ui.time_schedule import TimeScheduleBatch, TimeScheduleItem +from airflow.api_fastapi.core_api.security import ReadableDagsFilterDep, requires_access_dag +from airflow.api_fastapi.core_api.services.ui.time_schedule import aggregate_time_schedule_items +from airflow.models import DagModel, DagRun +from airflow.utils.helpers import chunks +from airflow.utils.session import create_session +from airflow.utils.state import DagRunState + +time_schedule_router = AirflowRouter(prefix="/time-schedule", tags=["Time Schedule"]) + +_DAG_BATCH_SIZE = 25 +_SUPPORTED_TIME_SCALES = (1, 5, 10, 15, 20, 30, 40, 50, 60) + + +def _build_run_item(dag_run: DagRun, *, dag_display_name: str, is_time_scheduled: bool) -> TimeScheduleItem: + start_date = dag_run.start_date or dag_run.run_after + duration_ms = (dag_run.duration or 0) * 1000 + end_date = dag_run.end_date or start_date + timedelta(milliseconds=duration_ms) + return TimeScheduleItem( + dag_id=dag_run.dag_id, + dag_run_id=dag_run.run_id, + duration_ms=duration_ms, + end_date=end_date, + is_time_scheduled=is_time_scheduled, + dag_display_name=dag_display_name, + run_count=1, + run_after_min=dag_run.run_after, + run_after_max=dag_run.run_after, + start_date=start_date, + state=dag_run.state or DagRunState.QUEUED, + ) + + +def _build_selected_dags_query( + *, + dag_id_pattern: QueryDagIdPatternSearch, + readable_dags_filter: ReadableDagsFilterDep, + paused: QueryPausedFilter, + show_scheduled_only: bool, + tags: QueryTagsFilter, + teams: QueryTeamsFilter, + timetable_type: FilterParam[list[str] | None], +) -> Select[tuple[DagModel]]: + query = select(DagModel).where(DagModel.is_stale == false()) + query = apply_filters_to_select( + statement=query, + filters=[dag_id_pattern, tags, teams, timetable_type, readable_dags_filter, paused], + ) + if show_scheduled_only: + query = query.where(DagModel.timetable_periodic.is_(True)) + return query + + +def _build_selected_runs_query( + *, + dag_ids_query: Select[tuple[DagModel]], + duration_range: RangeFilter, + limit: int, + run_after: RangeFilter, + run_type: QueryDagRunRunTypesFilter, + start_date_range: RangeFilter, + state: QueryDagRunStateFilter, +) -> Select[tuple[int, str]]: + query = select(DagRun.id, DagRun.dag_id).where( + DagRun.dag_id.in_(dag_ids_query.with_only_columns(DagModel.dag_id)) + ) + query = apply_filters_to_select( + statement=query, + filters=[run_after, start_date_range, duration_range, run_type, state], + ) + return query.order_by(func.coalesce(DagRun.start_date, DagRun.run_after).desc()).limit(limit) Review Comment: ### Default scope The API now applies the run limit in the database before loading and aggregating the runs: 200 by default, with a maximum of 5,000. It then fetches and streams only runs and Dag metadata belonging to that bounded selection, reusing Airflow's existing filters and `chunks` helper. This also bounds the number of displayed Dags by the number of selected runs. Dags without selected runs are no longer included, so there are no synthetic expected-run bars outside that selection. A busy day or week therefore cannot bypass the run limit. ########## airflow-core/src/airflow/ui/src/pages/TimeSchedule/DayTimeline.tsx: ########## @@ -0,0 +1,288 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react"; +import { useLayoutEffect } from "react"; + +import { Box, Button, Text } from "@chakra-ui/react"; +import { useVirtualizer } from "@tanstack/react-virtual"; +import dayjs from "dayjs"; +import { useTranslation } from "react-i18next"; +import { FiArrowDown, FiArrowUp } from "react-icons/fi"; + +import type { TimeScheduleItem } from "openapi/requests/types.gen"; + +import { RouterLink } from "src/system-components"; + +import { TimelineBar } from "./TimelineBar"; +import { + DAY_LABEL_WIDTH_PX, + DAY_HEADER_HEIGHT_PX, + TIMELINE_HORIZONTAL_PADDING, + TIMELINE_MIN_HEIGHT_PX, + DAY_LANE_HEIGHT_PX, +} from "./constants"; +import { getPosition, getTimelineBarLeft, getVisualDurationWidth } from "./timelineUtils"; +import type { DayRowLayout, RowSortMode, TimeMarker } from "./types"; + +type DayTimelineProps = { + readonly chartBodyRef: RefObject<HTMLDivElement | null>; + readonly chartContentHeight: number; + readonly chartMinWidth?: string; + readonly chartRootRef: RefObject<HTMLDivElement | null>; + readonly chartViewportHeight: string; + readonly headerRowRef: RefObject<HTMLDivElement | null>; + readonly hourMarkers: Array<Pick<TimeMarker, "minute" | "position">>; + readonly layouts: Array<DayRowLayout>; + readonly onCycleSort: () => void; + readonly onMouseLeave: () => void; + readonly onMouseMove: (event: ReactMouseEvent<HTMLDivElement>) => void; + readonly renderTooltip: (item: TimeScheduleItem) => ReactNode; + readonly rowSortMode: RowSortMode; + readonly scrollRegionRef: RefObject<HTMLDivElement | null>; + readonly selectedTimezone: string; + readonly timeLabelStep: number; + readonly timelineMinWidth?: string; + readonly timeMarkers: Array<TimeMarker>; +}; + +export const DayTimeline = ({ + chartBodyRef, + chartContentHeight, + chartMinWidth, + chartRootRef, + chartViewportHeight, + headerRowRef, + hourMarkers, + layouts, + onCycleSort, + onMouseLeave, + onMouseMove, + renderTooltip, + rowSortMode, + scrollRegionRef, + selectedTimezone, + timeLabelStep, + timelineMinWidth, + timeMarkers, +}: DayTimelineProps) => { + const { i18n, t: translate } = useTranslation(); + const rowVirtualizer = useVirtualizer({ + count: layouts.length, + estimateSize: (index) => layouts[index]?.height ?? 0, + getItemKey: (index) => layouts[index]?.row.dag_id ?? index, + getScrollElement: () => scrollRegionRef.current, + overscan: 5, + }); Review Comment: ### UI virtualization Added Dag-row virtualization to the Day view using `@tanstack/react-virtual`, following the existing UI examples. Only visible rows and a small overscan are rendered, including their Dag labels and bars. The virtualizer uses the calculated row heights and remeasures when overlapping lanes change after zooming. The Week view is unchanged. ########## airflow-core/src/airflow/ui/src/pages/Dashboard/TimeScheduleCard.tsx: ########## @@ -0,0 +1,54 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { Card, HStack } from "@chakra-ui/react"; +import { useTranslation } from "react-i18next"; +import { FiCalendar, FiChevronLeft, FiChevronRight } from "react-icons/fi"; + +import { RouterLink } from "src/system-components"; + +export const TimeScheduleCard = () => { + const { i18n, t: translate } = useTranslation(); + + return ( + <Card.Root + aria-labelledby="time-schedule-card-title" + asChild + bg="transparent" + borderColor="border.subtle" + size="sm" + variant="outline" + width={{ base: "full", md: "auto" }} + > Review Comment: ### Placement <img width="3816" height="1452" alt="Image" src="https://github.com/user-attachments/assets/114ac7d5-2e8f-4a20-88cd-c7b2250d98fa"; /> Moved Time Schedule out of Stats into a separate Chakra Card beside it on the Dashboard home page, following the layout we discussed on Slack. The entire card links to Time Schedule, and the existing dashboard sections keep their positions. ########## airflow-core/src/airflow/ui/src/pages/TimeSchedule/timelineUtils.ts: ########## @@ -0,0 +1,294 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import dayjs from "dayjs"; +import timezone from "dayjs/plugin/timezone"; +import utc from "dayjs/plugin/utc"; + +import type { TimeScheduleItem } from "openapi/requests/types.gen"; + +import { SearchParamsKeys } from "src/constants/searchParams"; +import { renderDuration } from "src/utils/datetimeUtils"; + +import { + DAY_DURATION_MS, + DAY_MINUTES, + DAY_ROW_MIN_HEIGHT_PX, + DAY_LANE_HEIGHT_PX, + DAY_ROW_PADDING_PX, +} from "./constants"; +import type { DayRowLayout, RowSortMode, TimeMarker, TimeScale, TimelineRow, WeekItemLayout } from "./types"; + +dayjs.extend(utc); +dayjs.extend(timezone); + +const getTimeFilterValue = (time: string, runAfter: string, selectedTimezone: string) => { + const date = dayjs(runAfter).tz(selectedTimezone).format("YYYY-MM-DD"); + const dateTime = dayjs.tz(`${date}T${time}:00`, selectedTimezone); + + return dateTime.utc().format("HH:mm:ss.SSS[Z]"); +}; + +const getLocalStartTimeSortValue = (startDate: string | null, selectedTimezone: string) => { + if (startDate === null) { + return 0; + } + + const localStart = dayjs(startDate).tz(selectedTimezone); + + return ( + localStart.hour() * 60 * 60 * 1000 + + localStart.minute() * 60 * 1000 + + localStart.second() * 1000 + + localStart.millisecond() + ); +}; + +type BuildTimelineRowsParams = { + readonly items: Array<TimeScheduleItem>; + readonly rowSortMode: RowSortMode; + readonly selectedTimezone: string; +}; + +export const buildTimelineRows = ({ + items, + rowSortMode, + selectedTimezone, +}: BuildTimelineRowsParams): Array<TimelineRow> => { + const rowsByDagId = new Map<string, Array<TimeScheduleItem>>(); + + items.forEach((item) => { + const rowItems = rowsByDagId.get(item.dag_id); + + if (rowItems) { + rowItems.push(item); + } else { + rowsByDagId.set(item.dag_id, [item]); + } + }); + + return Array.from(rowsByDagId, ([dagId, rowItems]) => ({ + dag_display_name: rowItems[0]?.dag_display_name ?? dagId, + dag_id: dagId, + is_time_scheduled: rowItems.some((item) => item.is_time_scheduled), + items: rowItems.sort( + (left, right) => + getLocalStartTimeSortValue(left.start_date, selectedTimezone) - + getLocalStartTimeSortValue(right.start_date, selectedTimezone), + ), + })).sort((left, right) => { + if (rowSortMode === "dagIdAscending") { + return left.dag_id.localeCompare(right.dag_id); + } + if (rowSortMode === "dagIdDescending") { + return right.dag_id.localeCompare(left.dag_id); + } + if (left.is_time_scheduled !== right.is_time_scheduled) { + return Number(right.is_time_scheduled) - Number(left.is_time_scheduled); + } + const difference = + getLocalStartTimeSortValue(left.items[0]?.start_date ?? null, selectedTimezone) - + getLocalStartTimeSortValue(right.items[0]?.start_date ?? null, selectedTimezone); + + return difference || left.dag_id.localeCompare(right.dag_id); + }); +}; + +export const getPosition = (value: dayjs.Dayjs, dayStart: dayjs.Dayjs) => + Math.max(0, Math.min(100, (value.diff(dayStart) / DAY_DURATION_MS) * 100)); + +const STATE_ICON_AND_SPACING_WIDTH_PX = 18; +const DURATION_CHARACTER_WIDTH_PX = 10; + +export const getTimelineDurationSeconds = (durationMs: number) => + durationMs >= 60_000 ? Math.floor(durationMs / 60_000) * 60 : durationMs / 1000; + +export const getTimelineBarMinimumWidth = (durationMs: number, locale?: string) => + STATE_ICON_AND_SPACING_WIDTH_PX + + (durationMs > 0 ? (renderDuration(getTimelineDurationSeconds(durationMs), locale)?.length ?? 0) : 0) * + DURATION_CHARACTER_WIDTH_PX; + +export const getVisualDurationWidth = (durationMs: number, locale?: string) => + `max(${getTimelineBarMinimumWidth(durationMs, locale)}px, ${(durationMs / DAY_DURATION_MS) * 100}%)`; + +export const getTimelineBarLeft = (startPosition: number, width: number | string) => + `min(${startPosition}%, calc(100% - ${typeof width === "number" ? `${width}px` : width}))`; + +type BuildDayRowLayoutsParams = { + readonly locale?: string; + readonly rows: Array<TimelineRow>; + readonly selectedTimezone: string; + readonly timelineWidth: number; +}; + +export const buildDayRowLayouts = ({ + locale, + rows, + selectedTimezone, + timelineWidth, +}: BuildDayRowLayoutsParams): Array<DayRowLayout> => + rows.map((row) => { + const laneEnds: Array<number> = []; + const items = row.items + .filter((item) => item.start_date !== null) + .sort( + (left, right) => + getLocalStartTimeSortValue(left.start_date, selectedTimezone) - + getLocalStartTimeSortValue(right.start_date, selectedTimezone), + ) + .map((item) => { + const start = dayjs(item.start_date).tz(selectedTimezone); + const startX = (getPosition(start, start.startOf("day")) / 100) * timelineWidth; + const width = Math.max( + getTimelineBarMinimumWidth(item.duration_ms, locale), + (item.duration_ms / DAY_DURATION_MS) * timelineWidth, + ); + let lane = laneEnds.findIndex((laneEnd) => laneEnd <= startX); + + if (lane === -1) { + lane = laneEnds.length; + laneEnds.push(startX + width); + } else { + laneEnds[lane] = startX + width; + } + + return { item, lane }; + }); + const height = Math.max(DAY_ROW_MIN_HEIGHT_PX, laneEnds.length * DAY_LANE_HEIGHT_PX + DAY_ROW_PADDING_PX); + + return { height, items, row }; + }); + +type BuildWeekItemLayoutsParams = { + readonly contentHeight: number; + readonly items: Array<TimeScheduleItem>; + readonly selectedTimezone: string; +}; + +export const buildWeekItemLayouts = ({ + contentHeight, + items, + selectedTimezone, +}: BuildWeekItemLayoutsParams): Array<WeekItemLayout> => { + const positionedItems = items + .filter((item) => item.start_date !== null) + .map((item) => { + const start = dayjs(item.start_date).tz(selectedTimezone); + const height = Math.min( + contentHeight, + Math.max(20, (item.duration_ms / DAY_DURATION_MS) * contentHeight), + ); + + return { height, item, startY: (getPosition(start, start.startOf("day")) / 100) * contentHeight }; + }) + .sort((left, right) => left.startY - right.startY || right.height - left.height); + const layouts: Array<WeekItemLayout> = []; + + for (let clusterStart = 0; clusterStart < positionedItems.length;) { + const firstItem = positionedItems[clusterStart]; + + if (firstItem === undefined) { + break; + } + let clusterEnd = firstItem.startY + firstItem.height; + let clusterEndIndex = clusterStart + 1; + + while (clusterEndIndex < positionedItems.length) { + const item = positionedItems[clusterEndIndex]; + + if (item === undefined || item.startY >= clusterEnd) { + break; + } + + clusterEnd = Math.max(clusterEnd, item.startY + item.height); + clusterEndIndex += 1; + } + const columnEnds: Array<number> = []; + const clusterLayouts = positionedItems.slice(clusterStart, clusterEndIndex).map((positionedItem) => { + let column = columnEnds.findIndex((columnEnd) => columnEnd <= positionedItem.startY); + + if (column === -1) { + column = columnEnds.length; + columnEnds.push(positionedItem.startY + positionedItem.height); + } else { + columnEnds[column] = positionedItem.startY + positionedItem.height; + } + + return { + column, + height: positionedItem.height, + item: positionedItem.item, + top: Math.min(positionedItem.startY, contentHeight - positionedItem.height), + }; + }); + + layouts.push(...clusterLayouts.map((layout) => ({ ...layout, columnCount: columnEnds.length }))); + clusterStart = clusterEndIndex; + } + + return layouts; +}; + +export const buildTimeMarkers = (timeScale: TimeScale): Array<TimeMarker> => + Array.from({ length: Math.floor(DAY_MINUTES / timeScale) + 1 }, (_, index) => { + const minute = index * timeScale; + + return { + label: `${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`, + minute, + position: (minute / DAY_MINUTES) * 100, + }; + }); + +export const buildHourMarkers = () => + Array.from({ length: 25 }, (_, index) => ({ + minute: index * 60, + position: (index * 60 * 100) / DAY_MINUTES, + })); + +export const getTimelineItemDestination = (item: TimeScheduleItem, selectedTimezone: string) => { + const runsPath = `/dags/${encodeURIComponent(item.dag_id)}/runs`; + + if (item.run_count === 1) { + return `${runsPath}/${encodeURIComponent(item.dag_run_id)}`; + } + + const searchParams = new URLSearchParams({ + [SearchParamsKeys.RUN_AFTER_GTE]: item.run_after_min, + [SearchParamsKeys.RUN_AFTER_LTE]: item.run_after_max, + [SearchParamsKeys.STATE]: item.state, + }); Review Comment: ### Aggregated-bar navigation Aggregated bars now open the Dag's Runs table with the Run After range, state, and the aggregation bucket's start-time window; Week bars also include a weekday filter. Single-run bars still open the individual run. Aggregation is grouped by Dag, so each bar's Runs-table destination is scoped to that Dag. A date range alone can include runs from other recurring time slots between the earliest and latest represented runs. I added Start Time and Start Weekday filters to narrow that selection, reusing `FilterPill`, the existing popover and time-input components and validation, `MultiSelectFilter`, and weekday translations. The API uses `RangeFilter` for the time range and a separate multi-selection weekday filter. The link sends times and weekdays in UTC; the time inputs display the selected UI timezone. Does this filter-based approach fit the API and UX direction you had in mind? <img width="1559" height="555" alt="Image" src="https://github.com/user-attachments/assets/dd97ddc7-8181-403f-848c-f2f4dd76c963"; /> <img width="1562" height="613" alt="Image" src="https://github.com/user-attachments/assets/0f4b06a6-4f20-42a5-975e-fb15bfe6027c"; /> <img width="1559" height="833" alt="Image" src="https://github.com/user-attachments/assets/c2797e1b-fb72-40cf-87d0-b2b5cab5e248"; /> -- 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]
