Fix query splits timeline in preview UI to prevent blank screen

[koszti]

Description

Fix an issue when blank screen appears in the preview UI Query Splits Timeline when split task hasn’t started.

Additional context and related issues

Sometimes this happens because the <Timeline> component requires valid defaultTimeStart and defaultTimeEnd values, but NaN is being selected as min/max when some tasks don’t have a start/end time.

To fix:

• Filter out NaN values when calculating min/max task times.
• Add a validation check to ensure both defaultTimeStart and defaultTimeEnd are available before rendering the timeline.
• Show an Alert if the required time values are missing, instead of rendering an empty timeline that results a blank screen

Release notes

( ) This is not user-visible or is docs only, and no release notes are required.
( ) Release notes are required. Please propose a release note for me.
(x) Release notes are required, with the following suggested text:

## Section
* Fix query splits timeline in preview UI to prevent blank screen ({issue}`26920`)

[sourcery-ai]

Reviewer's Guide

Refactored the QuerySplitsTimeline component to exclude invalid NaN task times from min/max calculations and to guard timeline rendering with valid default start/end times, displaying an informational alert when data is insufficient.

Class diagram for updated QuerySplitsTimeline component logic

classDiagram
    class QuerySplitsTimeline {
        +items: SplitTimelineItem[]
        +groups: Group[]
        +startTimes: number[]
        +endTimes: number[]
        +timelineStartTime: number | null
        +timelineEndTime: number | null
        +itemRenderer(item, itemContext, getItemProps)
    }
    class Timeline {
        +groups: Group[]
        +items: SplitTimelineItem[]
        +defaultTimeStart: number
        +defaultTimeEnd: number
        +itemRenderer: TimelineItemRenderer
        +minZoom: number
        +itemHeightRatio: number
        +itemTouchSendsClick: boolean
        +canMove: boolean
        +canResize: boolean
        +stackItems: boolean
    }
    QuerySplitsTimeline --> Timeline : renders if valid times
    QuerySplitsTimeline --> Alert : renders if missing times
    class Alert {
        +severity: string
        +message: string
    }

Loading

File-Level Changes

Change	Details	Files
Filter out non-finite task times when computing timeline boundaries	Map start_time and end_time arrays through Number.isFinite to remove NaN values Compute timelineStartTime and timelineEndTime as null when no valid times exist	core/trino-web-ui/src/main/resources/webapp-preview/src/components/QuerySplitsTimeline.tsx
Conditionally render the Timeline component with a fallback alert	Wrap Timeline in a truthy check for both defaultTimeStart and defaultTimeEnd Add an Alert inside a Box to inform users when splits haven’t started	core/trino-web-ui/src/main/resources/webapp-preview/src/components/QuerySplitsTimeline.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• Consider memoizing the filtered startTimes/endTimes and computed timelineStartTime/timelineEndTime with useMemo to avoid recalculating them on every render.
• To improve readability, extract the conditional Timeline vs Alert rendering block into its own child component or helper function.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider memoizing the filtered startTimes/endTimes and computed timelineStartTime/timelineEndTime with useMemo to avoid recalculating them on every render.
- To improve readability, extract the conditional Timeline vs Alert rendering block into its own child component or helper function.

## Individual Comments

### Comment 1
<location> `core/trino-web-ui/src/main/resources/webapp-preview/src/components/QuerySplitsTimeline.tsx:292-301` </location>
<code_context>
-                    stackItems
-                    // traditionalZoom
-                />
+                {timelineStartTime && timelineEndTime ? (
+                    <Timeline
+                        groups={groups}
+                        items={items}
+                        defaultTimeStart={timelineStartTime}
+                        defaultTimeEnd={timelineEndTime}
+                        itemRenderer={itemRenderer}
+                        minZoom={60 * 1000}
+                        itemHeightRatio={0.65}
+                        itemTouchSendsClick={false}
+                        canMove={false}
+                        canResize={false}
+                        stackItems
+                        // traditionalZoom
+                    />
+                ) : (
+                    <Box sx={{ width: '100%', mt: 1 }}>
+                        <Alert severity="info">
</code_context>

<issue_to_address>
**issue:** Using truthy checks for timelineStartTime and timelineEndTime may skip valid zero values.

Explicitly check for null or undefined to ensure zero values are handled correctly.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}