import {Box,Tooltip,Typography} from "@mui/material";import type {Gallery_Captured_Frame,Gallery_Render_Plan} from "../protocol/gallery_types";import {format_nanoseconds} from "../protocol/format";
export function Worker_Timeline({frame,plan,selected_node_id,on_select_node}:{frame:Gallery_Captured_Frame;plan:Gallery_Render_Plan;selected_node_id:number|null;on_select_node:(id:number)=>void}) {const duration=Math.max(1,frame.render_duration_ns);const workers=[...new Set(frame.node_executions.map(item=>item.worker_id))].toSorted((a,b)=>a-b);const names=new Map(plan.nodes.map(node=>[node.node_id,node.name]));return <Box sx={{display:"grid",gridTemplateColumns:"76px 1fr",gap:1,alignItems:"center"}}>{workers.map(worker=><Box key={worker} sx={{display:"contents"}}><Typography variant="caption">Worker {worker}</Typography><Box sx={{position:"relative",height:34,bgcolor:"rgba(255,255,255,.04)",borderRadius:1}}>{frame.node_executions.filter(item=>item.worker_id===worker).map(item=><Tooltip key={`${item.node_id}:${item.start_offset_ns}`} title={`${names.get(item.node_id)??item.node_id} · ${format_nanoseconds(item.duration_ns)}`}><Box onClick={()=>on_select_node(item.node_id)} sx={{position:"absolute",left:`${item.start_offset_ns/duration*100}%`,width:`${Math.max(.4,item.duration_ns/duration*100)}%`,top:4,bottom:4,borderRadius:.5,cursor:"pointer",bgcolor:item.node_id===selected_node_id?"secondary.main":"primary.main"}}/></Tooltip>)}</Box></Box>)}</Box>;}
