From 570ff49ac64de12aada01ffc094abaf6f4303b92 Mon Sep 17 00:00:00 2001 From: Jeff Hwang Date: Wed, 21 May 2025 13:37:46 -0400 Subject: [PATCH 1/2] fix progress bar during precompute stage --- .../backfila/ui/components/BackfillsTable.kt | 2 +- .../backfila/ui/components/ProgressBar.kt | 33 ++++++++++++++----- .../ui/components/ProgressBarReloader.kt | 33 ++++++++++++++----- .../backfila/ui/pages/BackfillShowAction.kt | 1 + 4 files changed, 50 insertions(+), 19 deletions(-) diff --git a/service/src/main/kotlin/app/cash/backfila/ui/components/BackfillsTable.kt b/service/src/main/kotlin/app/cash/backfila/ui/components/BackfillsTable.kt index 1710f764f..1e15770e2 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/components/BackfillsTable.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/components/BackfillsTable.kt @@ -80,7 +80,7 @@ fun TagConsumer<*>.BackfillsTable( td( "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0", ) { - ProgressBar(it.backfilled_matching_record_count, it.computed_matching_record_count) + ProgressBar(it.backfilled_matching_record_count, it.computed_matching_record_count, it.precomputing_done) } listOf(it.created_by_user, it.created_at, it.last_active_at).map { td( diff --git a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt index 432e3ffef..df844107b 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt @@ -5,16 +5,31 @@ import kotlinx.html.TagConsumer import kotlinx.html.div import kotlinx.html.style -fun TagConsumer<*>.ProgressBar(numerator: Number, denominator: Number) { +fun TagConsumer<*>.ProgressBar( + numerator: Number, + denominator: Number, + precomputingDone: Boolean = true, +) { div("w-full bg-gray-200 rounded-full dark:bg-gray-700") { - val percentComplete = if (numerator.toInt() == 0) 0 else round((numerator.toDouble() / denominator.toDouble()) * 100) - // Don't show blue sliver for 0%, just show the gray empty bar - val showPartialBarStyle = if (percentComplete.toInt() != 0) "bg-blue-600" else "" - div( - "$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full", - ) { - style = "width: ${if (percentComplete.toInt() == 0) 100 else percentComplete}%" - +"""$percentComplete%""" + val percentComplete = when { + !precomputingDone -> null // Show indeterminate during precomputing + denominator.toDouble() <= 0 -> 0.0 // Handle zero denominator + else -> round((numerator.toDouble() / denominator.toDouble()) * 100) + } + + // Show indeterminate progress bar during precomputing + if (percentComplete == null) { + div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") { + style = "width: 100%" + +"Computing..." + } + } else { + // Don't show blue sliver for 0%, just show the gray empty bar + val showPartialBarStyle = if (percentComplete > 0) "bg-blue-600" else "" + div("$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full") { + style = "width: $percentComplete%" + +"${percentComplete.toInt()}%" + } } } } diff --git a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt index 55bf05149..ddc9f1b28 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt @@ -5,16 +5,31 @@ import kotlinx.html.TagConsumer import kotlinx.html.div import kotlinx.html.style -fun TagConsumer<*>.ProgressBarReloader(numerator: Number, denominator: Number) { +fun TagConsumer<*>.ProgressBarReloader( + numerator: Number, + denominator: Number, + precomputingDone: Boolean = true, +) { div("w-full bg-gray-200 rounded-full dark:bg-gray-700") { - val percentComplete = if (numerator.toInt() == 0) 0 else round((numerator.toDouble() / denominator.toDouble()) * 100) - // Don't show blue sliver for 0%, just show the gray empty bar - val showPartialBarStyle = if (percentComplete.toInt() != 0) "bg-blue-600" else "" - div( - "$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full", - ) { - style = "width: ${if (percentComplete.toInt() == 0) 100 else percentComplete}%" - +"""$percentComplete%""" + val percentComplete = when { + !precomputingDone -> null // Show indeterminate during precomputing + denominator.toDouble() <= 0 -> 0.0 // Handle zero denominator + else -> round((numerator.toDouble() / denominator.toDouble()) * 100) + } + + // Show indeterminate progress bar during precomputing + if (percentComplete == null) { + div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") { + style = "width: 100%" + +"Computing..." + } + } else { + // Don't show blue sliver for 0%, just show the gray empty bar + val showPartialBarStyle = if (percentComplete > 0) "bg-blue-600" else "" + div("$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full") { + style = "width: $percentComplete%" + +"${percentComplete.toInt()}%" + } } } } diff --git a/service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt b/service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt index 8cfd532d1..a3002b444 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/pages/BackfillShowAction.kt @@ -187,6 +187,7 @@ class BackfillShowAction @Inject constructor( ProgressBar( partition.backfilled_matching_record_count, partition.computed_matching_record_count, + partition.precomputing_done, ) } td("hidden py-5 pl-8 pr-0 text-right align-top tabular-nums text-gray-700 sm:table-cell") { From f825188d1ca0daa909db6cef80e18a8155b600ff Mon Sep 17 00:00:00 2001 From: Jeff Hwang Date: Thu, 22 May 2025 18:05:53 -0400 Subject: [PATCH 2/2] address comments --- .../main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt | 2 +- .../app/cash/backfila/ui/components/ProgressBarReloader.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt index df844107b..038c74feb 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBar.kt @@ -21,7 +21,7 @@ fun TagConsumer<*>.ProgressBar( if (percentComplete == null) { div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") { style = "width: 100%" - +"Computing..." + +"..." } } else { // Don't show blue sliver for 0%, just show the gray empty bar diff --git a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt index ddc9f1b28..740cfe658 100644 --- a/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt +++ b/service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt @@ -21,7 +21,7 @@ fun TagConsumer<*>.ProgressBarReloader( if (percentComplete == null) { div("animate-pulse bg-gray-300 text-xs font-medium text-center p-0.5 leading-none rounded-full") { style = "width: 100%" - +"Computing..." + +"..." } } else { // Don't show blue sliver for 0%, just show the gray empty bar