wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { SpanPrimitive } from "@assistant-ui/react-o11y";
|
|
import { AuiIf } from "@assistant-ui/store";
|
|
import { WaterfallBar } from "./waterfall-bar";
|
|
import { useWaterfallLayout } from "./waterfall-timeline";
|
|
|
|
const LABEL_WIDTH = 200;
|
|
|
|
export function WaterfallRow() {
|
|
const { barWidth, contentWidth, barHeight } = useWaterfallLayout();
|
|
|
|
return (
|
|
<SpanPrimitive.Root
|
|
className="group flex cursor-pointer items-center"
|
|
style={{ width: contentWidth, height: barHeight }}
|
|
>
|
|
<SpanPrimitive.Indent
|
|
baseIndent={8}
|
|
indentPerLevel={12}
|
|
className="border-border bg-background group-hover:bg-accent/50 sticky left-0 z-10 flex shrink-0 items-center gap-1 overflow-hidden border-r px-2"
|
|
style={{ width: LABEL_WIDTH, height: barHeight }}
|
|
>
|
|
<AuiIf condition={(s) => s.span.hasChildren}>
|
|
<SpanPrimitive.CollapseToggle className="text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center rounded p-0.5">
|
|
<svg
|
|
aria-hidden="true"
|
|
className="data-[collapsed=true]:[-rotate-90] size-3.5 transition-transform"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M4 6l4 4 4-4H4z" />
|
|
</svg>
|
|
</SpanPrimitive.CollapseToggle>
|
|
</AuiIf>
|
|
<AuiIf condition={(s) => !s.span.hasChildren}>
|
|
<span className="w-4.5 shrink-0" />
|
|
</AuiIf>
|
|
<SpanPrimitive.StatusIndicator className="size-1.5 shrink-0 rounded-full bg-current" />
|
|
<SpanPrimitive.TypeBadge className="border-border text-muted-foreground shrink-0 rounded border px-1 text-[10px]" />
|
|
<SpanPrimitive.Name className="truncate text-sm" />
|
|
</SpanPrimitive.Indent>
|
|
|
|
{/* Timeline bar */}
|
|
<div
|
|
className="group-hover:bg-accent/30"
|
|
style={{ width: barWidth, height: barHeight }}
|
|
>
|
|
<svg aria-hidden="true" width={barWidth} height={barHeight}>
|
|
<WaterfallBar />
|
|
</svg>
|
|
</div>
|
|
</SpanPrimitive.Root>
|
|
);
|
|
}
|