Skip to content

Commit

Permalink
Multiple fixes for column width
Browse files Browse the repository at this point in the history
  • Loading branch information
@elijahbenizzy
elijahbenizzy committed Dec 23, 2024
1 parent 3c3db6f commit 355751d
Showing 1 changed file with 35 additions and 18 deletions.
53 changes: 35 additions & 18 deletions telemetry/ui/src/components/routes/app/StepList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ const CommonTableRow = (props: {
});
}
e.stopPropagation();
}}>
}}
>
{props.children}
</TableRow>
);
Expand Down Expand Up @@ -233,7 +234,8 @@ const ActionTableRow = (props: {
setCurrentHoverIndex={setCurrentHoverIndex}
setCurrentSelectedIndex={setCurrentSelectedIndex}
appID={props.appID}
partitionKey={props.partitionKey}>
partitionKey={props.partitionKey}
>
<TableCell className="text-gray-500 w-12 max-w-12 min-w-12">
<div className="flex flex-row items-center">
<RecursionDepthPadding depth={props.depth}>
Expand All @@ -251,7 +253,8 @@ const ActionTableRow = (props: {
/>
</div>
<div
className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}>
className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}
>
<Chip
label={isStreaming ? 'stream' : 'action'}
chipType={isStreaming ? 'stream' : 'action'}
Expand All @@ -276,6 +279,7 @@ const ActionTableRow = (props: {
</div>
</div>
</TableCell>
{props.minimized && <TableCell colSpan={3} />}
{!props.minimized && (
<>
<TableCell className="h-[1px] px-0" colSpan={1}>
Expand Down Expand Up @@ -500,23 +504,26 @@ const LinkSubTable = (props: {
currentSelectedIndex={currentSelectedIndex}
step={props.step}
setCurrentHoverIndex={setCurrentHoverIndex}
setCurrentSelectedIndex={setCurrentSelectedIndex}>
setCurrentSelectedIndex={setCurrentSelectedIndex}
>
<TableCell colSpan={1} className="">
<RecursionDepthPadding depth={props.depth}>
<Icon className={`h-5 w-5 ${iconColor} -ml-1`} />
</RecursionDepthPadding>
</TableCell>
<TableCell
colSpan={1}
className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}>
className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}
>
<div
className="z-50 truncate"
onClick={(e) => {
navigate(
`/project/${props.projectId}/${subApp.child.partition_key || 'null'}/${subApp.child.app_id}`
);
e.stopPropagation();
}}>
}}
>
<span className="hover:underline">{subApp.child.app_id}</span>
</div>
</TableCell>
Expand Down Expand Up @@ -547,7 +554,7 @@ const LinkSubTable = (props: {
/>
</TableCell>
)}
{/* <TableCell colSpan={1} /> */}
<TableCell colSpan={1} />
</CommonTableRow>
{subApplicationIsExpanded ? (
<SelfLoadingSubApplicationContainer
Expand Down Expand Up @@ -643,9 +650,11 @@ const StepSubTableRow = (props: {
currentSelectedIndex={currentSelectedIndex}
step={props.step}
setCurrentHoverIndex={setCurrentHoverIndex}
setCurrentSelectedIndex={setCurrentSelectedIndex}>
setCurrentSelectedIndex={setCurrentSelectedIndex}
>
<TableCell
className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}>
className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}
>
<RecursionDepthPadding depth={props.depth}>
<span>{spanIDUniqueToAction}</span>
</RecursionDepthPadding>
Expand All @@ -654,12 +663,14 @@ const StepSubTableRow = (props: {
<>
<TableCell
onClick={onClick}
className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}>
className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}
>
<div className="flex flex-row gap-1 items-center">
{[...Array(depth).keys()].map((i) => (
<Icon
key={i}
className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}></Icon>
className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}
></Icon>
))}
<Chip
label={
Expand Down Expand Up @@ -715,15 +726,16 @@ const StepSubTableRow = (props: {
className="flex justify-start overflow-hidden pl-20"
onClick={(e) => {
e.stopPropagation();
}}>
}}
>
<RenderedField
value={(props.model as AttributeModel).value}
defaultExpanded={true} // no real need for default expanded
/>
</div>
)}
</TableCell>
{props.displayAnnotations && <TableCell className="" />}
{props.displayAnnotations && <TableCell className="" colSpan={2} />}
</>
) : (
<TableCell colSpan={5}></TableCell>
Expand Down Expand Up @@ -1111,11 +1123,13 @@ const WaterfallPiece: React.FC<{
onClick={(e) => {
props.setSubActionExpanded?.(!props.isSubActionExpanded);
e.stopPropagation();
}}>
}}
>
<div
className={`${props.isHighlighted ? 'bg-transparent' : props.bgColor} opacity-50 h-1 px-0 rounded-sm flex flex-row justify-center items-center`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
onMouseLeave={() => setIsHovered(false)}
>
<SubActionIcon
className={`hover:scale-125 transform-none cursor-pointer h-4 w-4 rounded-full text-gray-700 ${props.isHighlighted ? props.bgColor : 'bg-white'}`}
/>
Expand All @@ -1132,7 +1146,8 @@ const WaterfallPiece: React.FC<{
style={{
left: `calc(${leftPositionPercentage}% - 20px)`,
width: `calc(${widthPercentage}% + 40px)` // 20px buffer on each side
}}></div>
}}
></div>

{
<div
Expand All @@ -1146,7 +1161,8 @@ const WaterfallPiece: React.FC<{
left: isCloseToEnd
? `auto`
: `calc(${leftPositionPercentage}% + ${widthPercentage}%)`
}}>
}}
>
{hoverItem}
</div>
}
Expand Down Expand Up @@ -1803,7 +1819,8 @@ const ParentLink = (props: {
<TableCell colSpan={2} className="text-gray-500">
<div className="flex flex-row gap-1 items-center pl-5">
<Link
to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}>
to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}
>
<span className="hover:underline">{props.parentPointer.app_id}</span>
</Link>
<span>@</span>
Expand Down

0 comments on commit 355751d

Please sign in to comment.