Skip to content

[web-console] Make transaction progress jump when transaction ID changes #6246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Karakatiza666 wants to merge 1 commit into from
+27 −4
Open

[web-console] Make transaction progress jump when transaction ID changes #6246

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions ...ages/web-console/src/lib/components/pipelines/editor/performance/TransactionStatus.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
const global = $derived(metrics.current.global)
const transactionStatus = $derived(global.transaction_status)
const commitProgress = $derived(global.commit_progress)
const transactionId = $derived(global.transaction_id)

const total = $derived(
commitProgress
Expand All @@ -32,18 +33,36 @@
? ((commitProgress.completed + commitProgress.in_progress * inProgressFraction) / total) * 100
: null
)

// Disable the smooth progress bar transition when the transaction changes so
// the bar jumps immediately to the new value rather than animating.
let disableTransition = $state(false)
let prevTransactionId = transactionId

$effect(() => {
const currentId = transactionId
if (currentId !== prevTransactionId) {
prevTransactionId = currentId
disableTransition = true
requestAnimationFrame(() => {
disableTransition = false
})
}
})
</script>

{#if transactionStatus !== 'NoTransaction'}
<div class="flex flex-wrap items-center gap-x-8 gap-y-2 {_class}" transition:slide>
<div class="flex w-28 flex-col items-center">
<div class="flex w-28 flex-col items-center mr-14">
<div class="text-sm text-nowrap">Transaction status</div>
<div class="pt-2">
<div class="pt-2 flex flex-nowrap justify-center items-center gap-2">
<div></div>
{#if transactionStatus === 'TransactionInProgress'}
<div class="pointer-events-none chip bg-tertiary-50-950 uppercase">Started</div>
{:else if transactionStatus === 'CommitInProgress'}
<div class="pointer-events-none chip bg-warning-200-800 uppercase">Committing</div>
{/if}
<div class="font-dm-mono text-sm w-0 text-nowrap"><span class="select-none">ID:</span>{transactionId}</div>
</div>
</div>

Expand All @@ -66,13 +85,17 @@
<div class="relative">
<Progress class="h-2" value={combinedPercent} max={100}>
<Progress.Track class="bg-surface-600-400">
<Progress.Range class="bg-yellow-500 duration-2000 ease-linear" />
<Progress.Range
class="bg-yellow-500 {disableTransition ? 'duration-0' : 'duration-2000 ease-linear'}"
/>
</Progress.Track>
</Progress>
<Progress class="absolute inset-x-0 bottom-0 h-2" value={completedPercent} max={100}>
<Progress.Track class="opacity-0"></Progress.Track>
<Progress.Range
class="absolute inset-y-0 left-0 bg-success-500 duration-2000 ease-linear"
class="absolute inset-y-0 left-0 bg-success-500 {disableTransition
? 'duration-0'
: 'duration-2000 ease-linear'}"
/>
</Progress>
</div>
Expand Down
Loading