Skip to content

Commit 63d6efc

Browse files
samejrsamejr
committed
Added a diminished style that’s used for spans (grey progress bar)
1 parent 74ec03b commit 63d6efc

File tree

1 file changed

+89
-117
lines changed

1 file changed

+89
-117
lines changed

‎apps/webapp/app/components/run/RunTimeline.tsx‎

Lines changed: 89 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export type TimelineEventState = "complete" | "error" | "inprogress" | "delayed"
1818

1919
type TimelineLineVariant = "light" | "normal";
2020

21+
type TimelineStyle = "normal" | "diminished";
22+
2123
type TimelineEventVariant =
2224
| "start-cap"
2325
| "dot-hollow"
@@ -317,6 +319,7 @@ export type RunTimelineEventProps = {
317319
state?: "complete" | "error" | "inprogress";
318320
variant?: TimelineEventVariant;
319321
helpText?: string;
322+
style?: TimelineStyle;
320323
};
321324

322325
export function RunTimelineEvent({
@@ -325,11 +328,12 @@ export function RunTimelineEvent({
325328
state,
326329
variant = "dot-hollow",
327330
helpText,
331+
style = "normal",
328332
}: RunTimelineEventProps) {
329333
return (
330334
<div className="grid h-5 grid-cols-[1.125rem_1fr] gap-1 text-sm">
331335
<div className="relative flex flex-col items-center justify-center">
332-
<EventMarker variant={variant} state={state} />
336+
<EventMarker variant={variant} state={state} style={style} />
333337
</div>
334338
<div className="flex items-baseline justify-between gap-3">
335339
<TooltipProvider disableHoverableContent>
@@ -355,38 +359,53 @@ export function RunTimelineEvent({
355359
function EventMarker({
356360
variant,
357361
state,
362+
style,
358363
}: {
359364
variant: TimelineEventVariant;
360365
state?: TimelineEventState;
366+
style?: TimelineStyle;
361367
}) {
368+
let bgClass = "bg-text-dimmed";
369+
switch (state) {
370+
case "complete":
371+
bgClass = "bg-success";
372+
break;
373+
case "error":
374+
bgClass = "bg-error";
375+
break;
376+
case "delayed":
377+
bgClass = "bg-text-dimmed";
378+
break;
379+
case "inprogress":
380+
bgClass = style === "normal" ? "bg-pending" : "bg-text-dimmed";
381+
break;
382+
}
383+
384+
let borderClass = "border-text-dimmed";
385+
switch (state) {
386+
case "complete":
387+
borderClass = "border-success";
388+
break;
389+
case "error":
390+
borderClass = "border-error";
391+
break;
392+
case "delayed":
393+
borderClass = "border-text-dimmed";
394+
break;
395+
case "inprogress":
396+
borderClass = style === "normal" ? "border-pending" : "border-text-dimmed";
397+
break;
398+
default:
399+
borderClass = "border-text-dimmed";
400+
break;
401+
}
402+
362403
switch (variant) {
363404
case "start-cap":
364405
return (
365406
<>
366-
<div
367-
className={cn(
368-
"h-full w-[0.4375rem] border-b",
369-
state === "complete"
370-
? "border-success"
371-
: state === "error"
372-
? "border-error"
373-
: state === "inprogress"
374-
? "border-pending"
375-
: "border-text-dimmed"
376-
)}
377-
/>
378-
<div
379-
className={cn(
380-
"relative h-full w-px",
381-
state === "complete"
382-
? "bg-success"
383-
: state === "error"
384-
? "bg-error"
385-
: state === "inprogress"
386-
? "bg-pending"
387-
: "bg-text-dimmed"
388-
)}
389-
>
407+
<div className={cn("h-full w-[0.4375rem] border-b", borderClass)} />
408+
<div className={cn("relative h-full w-px", bgClass)}>
390409
{state === "inprogress" && (
391410
<div
392411
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
@@ -402,18 +421,7 @@ function EventMarker({
402421
case "dot-hollow":
403422
return (
404423
<>
405-
<div
406-
className={cn(
407-
"relative h-full w-px",
408-
state === "complete"
409-
? "bg-success"
410-
: state === "error"
411-
? "bg-error"
412-
: state === "inprogress"
413-
? "bg-pending"
414-
: "bg-text-dimmed"
415-
)}
416-
>
424+
<div className={cn("relative h-full w-px", bgClass)}>
417425
{state === "inprogress" && (
418426
<div
419427
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
@@ -425,29 +433,9 @@ function EventMarker({
425433
)}
426434
</div>
427435
<div
428-
className={cn(
429-
"size-[0.3125rem] min-h-[0.3125rem] rounded-full border",
430-
state === "complete"
431-
? "border-success"
432-
: state === "error"
433-
? "border-error"
434-
: state === "inprogress"
435-
? "border-pending"
436-
: "border-text-dimmed"
437-
)}
436+
className={cn("size-[0.3125rem] min-h-[0.3125rem] rounded-full border", borderClass)}
438437
/>
439-
<div
440-
className={cn(
441-
"relative h-full w-px",
442-
state === "complete"
443-
? "bg-success"
444-
: state === "error"
445-
? "bg-error"
446-
: state === "inprogress"
447-
? "bg-pending"
448-
: "bg-text-dimmed"
449-
)}
450-
>
438+
<div className={cn("relative h-full w-px", bgClass)}>
451439
{state === "inprogress" && (
452440
<div
453441
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
@@ -461,28 +449,10 @@ function EventMarker({
461449
</>
462450
);
463451
case "dot-solid":
464-
return (
465-
<div
466-
className={cn(
467-
"size-[0.3125rem] rounded-full",
468-
state === "complete" ? "bg-success" : state === "error" ? "bg-error" : "bg-text-dimmed"
469-
)}
470-
/>
471-
);
452+
return <div className={cn("size-[0.3125rem] rounded-full", bgClass)} />;
472453
case "start-cap-thick":
473454
return (
474-
<div
475-
className={cn(
476-
"relative h-full w-[0.4375rem] rounded-t-[0.125rem]",
477-
state === "complete"
478-
? "bg-success"
479-
: state === "error"
480-
? "bg-error"
481-
: state === "inprogress"
482-
? "bg-pending"
483-
: "bg-text-dimmed"
484-
)}
485-
>
455+
<div className={cn("relative h-full w-[0.4375rem] rounded-t-[0.125rem]", bgClass)}>
486456
{state === "inprogress" && (
487457
<div
488458
className="absolute inset-0 h-full w-full animate-tile-scroll-offset opacity-30"
@@ -495,14 +465,7 @@ function EventMarker({
495465
</div>
496466
);
497467
case "end-cap-thick":
498-
return (
499-
<div
500-
className={cn(
501-
"h-full w-[0.4375rem] rounded-b-[0.125rem]",
502-
state === "complete" ? "bg-success" : state === "error" ? "bg-error" : "bg-text-dimmed"
503-
)}
504-
/>
505-
);
468+
return <div className={cn("h-full w-[0.4375rem] rounded-b-[0.125rem]", bgClass)} />;
506469
default:
507470
return <div className={cn("size-[0.3125rem] rounded-full bg-yellow-500")} />;
508471
}
@@ -512,13 +475,19 @@ export type RunTimelineLineProps = {
512475
title: ReactNode;
513476
state?: TimelineEventState;
514477
variant?: TimelineLineVariant;
478+
style?: TimelineStyle;
515479
};
516480

517-
export function RunTimelineLine({ title, state, variant = "normal" }: RunTimelineLineProps) {
481+
export function RunTimelineLine({
482+
title,
483+
state,
484+
variant = "normal",
485+
style = "normal",
486+
}: RunTimelineLineProps) {
518487
return (
519488
<div className="grid h-6 grid-cols-[1.125rem_1fr] gap-1 text-xs">
520489
<div className="flex items-stretch justify-center">
521-
<LineMarker state={state} variant={variant} />
490+
<LineMarker state={state} variant={variant} style={style} />
522491
</div>
523492
<div className="flex items-center justify-between gap-3">
524493
<span className="text-text-dimmed">{title}</span>
@@ -530,27 +499,35 @@ export function RunTimelineLine({ title, state, variant = "normal" }: RunTimelin
530499
function LineMarker({
531500
state,
532501
variant,
502+
style,
533503
}: {
534504
state?: TimelineEventState;
535505
variant: TimelineLineVariant;
506+
style?: TimelineStyle;
536507
}) {
508+
let containerClass = "bg-text-dimmed";
509+
switch (state) {
510+
case "complete":
511+
containerClass = "bg-success";
512+
break;
513+
case "error":
514+
containerClass = "bg-error";
515+
break;
516+
case "delayed":
517+
containerClass = "bg-text-dimmed";
518+
break;
519+
case "inprogress":
520+
containerClass =
521+
style === "normal"
522+
? "rounded-b-[0.125rem] bg-pending"
523+
: "rounded-b-[0.125rem] bg-text-dimmed";
524+
break;
525+
}
526+
537527
switch (variant) {
538528
case "normal":
539529
return (
540-
<div
541-
className={cn(
542-
"relative w-[0.4375rem]",
543-
state === "complete"
544-
? "bg-success"
545-
: state === "error"
546-
? "bg-error"
547-
: state === "delayed"
548-
? "bg-text-dimmed"
549-
: state === "inprogress"
550-
? "rounded-b-[0.125rem] bg-pending"
551-
: "bg-text-dimmed"
552-
)}
553-
>
530+
<div className={cn("relative w-[0.4375rem]", containerClass)}>
554531
{state === "inprogress" && (
555532
<div
556533
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
@@ -564,20 +541,7 @@ function LineMarker({
564541
);
565542
case "light":
566543
return (
567-
<div
568-
className={cn(
569-
"relative w-px",
570-
state === "complete"
571-
? "bg-success"
572-
: state === "error"
573-
? "bg-error"
574-
: state === "delayed"
575-
? "bg-text-dimmed"
576-
: state === "inprogress"
577-
? "bg-pending"
578-
: "bg-text-dimmed"
579-
)}
580-
>
544+
<div className={cn("relative w-px", containerClass)}>
581545
{state === "inprogress" && (
582546
<div
583547
className="absolute inset-0 h-full w-full animate-tile-scroll opacity-30"
@@ -600,6 +564,7 @@ export type SpanTimelineProps = {
600564
inProgress: boolean;
601565
isError: boolean;
602566
events?: TimelineSpanEvent[];
567+
style?: TimelineStyle;
603568
};
604569

605570
export type SpanTimelineState = "error" | "pending" | "complete";
@@ -610,6 +575,7 @@ export function SpanTimeline({
610575
inProgress,
611576
isError,
612577
events,
578+
style = "diminished",
613579
}: SpanTimelineProps) {
614580
const state = isError ? "error" : inProgress ? "inprogress" : undefined;
615581

@@ -630,6 +596,7 @@ export function SpanTimeline({
630596
variant={event.markerVariant}
631597
state={state}
632598
helpText={event.helpText}
599+
style={style}
633600
/>
634601
<RunTimelineLine
635602
title={
@@ -641,6 +608,7 @@ export function SpanTimeline({
641608
}
642609
variant={event.lineVariant}
643610
state={state}
611+
style={style}
644612
/>
645613
</Fragment>
646614
);
@@ -658,12 +626,14 @@ export function SpanTimeline({
658626
variant={"start-cap-thick"}
659627
state={state}
660628
helpText={getHelpTextForEvent("Started")}
629+
style={style}
661630
/>
662631
{state === "inprogress" ? (
663632
<RunTimelineLine
664633
title={<LiveTimer startTime={startTime} />}
665634
state={state}
666635
variant={visibleEvents.length > 0 ? "light" : "normal"}
636+
style={style}
667637
/>
668638
) : (
669639
<>
@@ -674,6 +644,7 @@ export function SpanTimeline({
674644
)}
675645
state={isError ? "error" : undefined}
676646
variant="normal"
647+
style={style}
677648
/>
678649
<RunTimelineEvent
679650
title="Finished"
@@ -686,6 +657,7 @@ export function SpanTimeline({
686657
state={isError ? "error" : undefined}
687658
variant="end-cap-thick"
688659
helpText={getHelpTextForEvent("Finished")}
660+
style={style}
689661
/>
690662
</>
691663
)}

0 commit comments

Comments
 (0)