Fix query plan default viewport in preview UI

Author: koszti

core/trino-web-ui/src/main/resources/webapp-preview/src/components/QueryLivePlan.tsx

@@ -13,7 +13,7 @@
  */
 import { useParams } from 'react-router-dom'
 import { useEffect, useRef, useState } from 'react'
-import { Alert, Box, CircularProgress, Grid } from '@mui/material'
+import { Alert, Box, CircularProgress, Grid, Typography } from '@mui/material'
 import { ReactFlow, type Edge, type Node, useNodesState, useEdgesState } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
 import { queryStatusApi, QueryStatusInfo } from '../api/webapp/api.ts'
@@ -115,21 +115,31 @@ export const QueryLivePlan = () => {
                                                 ref={containerRef}
                                                 sx={{ width: '100%', height: '80vh', border: '1px solid #ccc' }}
                                             >
-                                                <ReactFlow
-                                                    nodes={nodes}
-                                                    edges={edges}
-                                                    onNodesChange={onNodesChange}
-                                                    onEdgesChange={onEdgesChange}
-                                                    nodeTypes={nodeTypes}
-                                                    minZoom={0.1}
-                                                    proOptions={{ hideAttribution: true }}
-                                                    defaultViewport={{ x: 200, y: 20, zoom: 0.8 }}
-                                                >
-                                                    <HelpMessage
-                                                        layoutDirection={layoutDirection}
-                                                        onLayoutDirectionChange={setLayoutDirection}
-                                                    />
-                                                </ReactFlow>
+                                                {nodes.length > 0 ? (
+                                                    <ReactFlow
+                                                        nodes={nodes}
+                                                        edges={edges}
+                                                        onNodesChange={onNodesChange}
+                                                        onEdgesChange={onEdgesChange}
+                                                        nodeTypes={nodeTypes}
+                                                        minZoom={0.1}
+                                                        proOptions={{ hideAttribution: true }}
+                                                        defaultViewport={{
+                                                            x: (nodes[0].position.x / 2) * -1,
+                                                            y: 20,
+                                                            zoom: 0.8,
+                                                        }}
+                                                    >
+                                                        <HelpMessage
+                                                            layoutDirection={layoutDirection}
+                                                            onLayoutDirectionChange={setLayoutDirection}
+                                                        />
+                                                    </ReactFlow>
+                                                ) : (
+                                                    <Typography sx={{ p: 1 }} fontSize="small">
+                                                        Rendering...
+                                                    </Typography>
+                                                )}
                                             </Box>
                                         </Box>
                                     </Grid>