Add query live plan flow page to Preview Web UI

[koszti]

Description

Add Query live plan flow page to the preview UI. Partially addressing #22697

Additional context and related issues

Retains the same functionality as the existing web UI, enhanced with the updated layout, design, and user experience.

Additional features not available in the current UI

• Draggable stage nodes
• Toggle for horizontal and vertical auto layout

Screenshots

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:

## Preview Web UI
* Add query live plan flow page to Preview Web UI. ({issue}`26392`)

[raunaqmorarka]

Please rebase to latest master, note the changes from #26524

[koszti]

@raunaqmorarka rebase done, resolved the conflicts and addressed changes from #26524. I've also applied the same update for #26440

[raunaqmorarka]

It would be nice to show the stage partitioning (io.trino.sql.planner.PlanFragment#partitioning) in the header or somewhere near the top, similar to how EXPLAIN output of the cli shows it

 Fragment 2 [SOURCE]
     Output layout: [r_regionkey, r_name, r_comment]
     Output partitioning: ROUND_ROBIN (scale writers) []
     Output partition count: 100
     TableScan[table = tpch:tiny:region]
         Layout: [r_regionkey:bigint, r_name:varchar(25), r_comment:varchar(152)]
         Estimates: {rows: 5 (459B), cpu: 459, memory: 0B, network: 0B}
         r_name := tpch:r_name
         r_comment := tpch:r_comment
         r_regionkey := tpch:r_regionkey

[koszti]

I'm wondering how to visualise it clearly. The stage cards (now called PlanFragmentNodes) are already quite large. Adding too much information will make the flow chart harder to use.

[raunaqmorarka]

Usually this info is something short like SOURCE, ROUND_ROBIN (scale writers), COORDINATOR_ONLY etc.
Please look into it as a follow-up, i'll land the current changes.

[Copilot]

Pull Request Overview

This PR adds a Query live plan flow page to the Preview Web UI, providing a visual flow representation of query execution plans with interactive features. The implementation retains the same functionality as the existing web UI while enhancing it with an updated layout, design, and user experience.

• Creates a comprehensive flow visualization system using React Flow for query execution plans
• Implements three node types: PlanFragmentNode (stages), OperatorNode (operators), and RemoteExchangeNode (connections)
• Adds interactive features including draggable stage nodes and toggle for horizontal/vertical auto layout

Reviewed Changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
utils/utils.ts	Adds formatRows utility function for row count formatting
flow/types.ts	Defines TypeScript interfaces for flow components and query status
flow/layout.ts	Implements layout engine using Dagre for automatic node positioning
flow/flowUtils.ts	Contains utilities for parsing query data and creating flow elements
flow/RemoteExchangeNode.tsx	React component for remote exchange connections between stages
flow/PlanFragmentNode.tsx	React component for main stage containers with execution statistics
flow/OperatorNode.tsx	React component for individual operators within stages
flow/HelpMessage.tsx	React component for user guidance and layout controls
QueryLivePlan.tsx	Main component orchestrating the live plan visualization
QueryDetails.tsx	Updates to enable the live plan tab
api.ts	Extends API interfaces with query stage and plan data structures
package.json	Adds dependencies for Dagre layout engine and React Flow

Files not reviewed (1)

• core/trino-web-ui/src/main/resources/webapp-preview/package-lock.json: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The catch block silently handles JSON parsing errors without logging or providing any indication of what went wrong. Consider adding error logging or a more descriptive fallback mechanism to help with debugging malformed sourceFragmentIds.

[raunaqmorarka]

@koszti why do we have a try/catch on the json parsing here ? Is there a way to do this without relying on exceptions driven logic ?

[koszti]

this is the refactored functionality of the current UI at

trino/core/trino-web-ui/src/main/resources/webapp/src/components/LivePlan.jsx

Line 268 in 6f313c9

var remoteSources = sourceFragmentIds.replace('[', '').replace(']', '').split(', ')

The sourceFragmentIds field arrives as a JSON-formatted string (e.g., [1,2,3,4]). In the normal case, it should be parsed as JSON. However, if the string is malformed (for example, provided as a plain comma-separated list) it can still be parsed successfully. This change preserves the original behavior by ensuring compatibility with both valid JSON arrays and simple comma-separated lists.

In my tests, it consistently arrives as JSON, though I’m not certain this is guaranteed in all cases and wanted to keep the original behaviour.

[raunaqmorarka]

Could we use the same logic as before then sourceFragmentIds.replace('[', '').replace(']', '').split(', ') ?
That seems less verbose and less likely to raise suspicion to a reader

[koszti]

np, updated