feat(webui): Add a progress bar to the Presto search page. #1206

hoophalab · 2025-08-14T20:42:22Z

Description

This PR adds a progress bar at the top of the presto search page.
This PR extracts the common logic of pseudo progress value into a custom hook

Checklist

The PR satisfies the contribution guidelines.
This is a breaking change and that has been indicated in the PR title, OR this isn't a
breaking change.
Necessary docs have been updated, OR no docs need to be updated.

Validation performed

Presto search

Run a SQL query
The progress bar showed correctly
After the query status becomes FINISHED, the progress bar is hidden and search button becomes Run again

CLP search

The new usePseudoSearch hook doesn't change the behavior of clp search progress bar.

Summary by CodeRabbit

New Features
- Added a progress bar for Presto searches that starts during query submission and hides on completion or failure.
Bug Fixes
- Improved search status handling to reliably mark searches as completed across more scenarios.
Refactor
- Simplified progress behaviour using a shared hook and removed redundant progress settings.
Style
- Minor layout and styling updates to position the new progress indicator appropriately.

coderabbitai · 2025-08-14T20:42:29Z

Walkthrough

Introduces a reusable pseudo-progress hook and integrates it into QueryInput and a new Presto-specific ProgressBar. Updates search state handling to treat PRESTO FINISHED as DONE. Removes legacy progress constants. Adds conditional ProgressBar rendering on the SearchPage when the PRESTO engine is active.

Changes

Cohort / File(s)	Summary of Changes
Query input progress refactor `components/.../SearchControls/QueryInput/index.tsx`, `components/.../SearchControls/QueryInput/typings.ts`	Replaced manual interval logic with usePseudoProgress (start/stop/progress). Removed PROGRESS_INCREMENT and PROGRESS_INTERVAL_MILLIS exports and related interval code. Progress now sourced from the hook.
Pseudo-progress hook `components/.../SearchState/usePseudoProgress.ts`	Added usePseudoProgress hook managing Nullable progress with interval-based increments (5 every 100ms). Exposes start/stop with cleanup.
Presto progress bar component `components/.../Presto/ProgressBar/index.tsx`, `components/.../Presto/ProgressBar/index.module.css`	Added ProgressBar component using Ant Design Progress and usePseudoProgress, reacting to search UI state (start on PENDING, stop on DONE/FAILED). Added CSS class .prestoProgress.
Search page integration `components/.../SearchPage/index.tsx`	Conditionally renders Presto ProgressBar when SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO. Kept existing structure; added imports.
Search state signal handling `components/.../SearchState/useUpdateStateWithMetadata.ts`	Switched to a signal-based switch statement; maps PRESTO FINISHED and RESP_DONE to DONE; retains FAILED handling with error notification.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant SearchControls (QueryInput)
  participant SearchPage
  participant ProgressBar (Presto)
  participant useSearchStore
  participant usePseudoProgress
  participant PrestoEngine

  User->>SearchControls (QueryInput): Submit query
  SearchControls (QueryInput)->>useSearchStore: Dispatch QUERY_ID_PENDING
  useSearchStore-->>SearchControls (QueryInput): searchUiState = PENDING
  SearchControls (QueryInput)->>usePseudoProgress: start()
  SearchPage->>ProgressBar (Presto): Render when engine=PRESTO
  ProgressBar (Presto)->>useSearchStore: Read searchUiState
  useSearchStore-->>ProgressBar (Presto): PENDING
  ProgressBar (Presto)->>usePseudoProgress: start()

  loop every 100ms
    usePseudoProgress-->>SearchControls (QueryInput): progress += 5 (≤100)
    usePseudoProgress-->>ProgressBar (Presto): progress += 5 (≤100)
  end

  PrestoEngine-->>useSearchStore: Signal FINISHED or RESP_DONE
  useSearchStore-->>SearchPage: lastSignal updated
  SearchPage->>useUpdateStateWithMetadata: Process lastSignal
  useUpdateStateWithMetadata-->>useSearchStore: Set searchUiState = DONE

  useSearchStore-->>SearchControls (QueryInput): searchUiState = DONE
  useSearchStore-->>ProgressBar (Presto): searchUiState = DONE
  SearchControls (QueryInput)->>usePseudoProgress: stop()
  ProgressBar (Presto)->>usePseudoProgress: stop()

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs

feat(webui): Display notification for errors from Presto. #1188 — Also adjusts useUpdateStateWithMetadata to handle PRESTO signals and DONE/FAILED mappings.
feat(webui): Create result metadata document in MongoDB to track search signal for Presto queries. #1168 — Touches SearchPage logic conditioned on CLP_QUERY_ENGINES/SETTINGS_QUERY_ENGINE for PRESTO-related rendering.

Suggested reviewers

davemarco
kirkrodrigues

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

hoophalab · 2025-08-14T21:04:58Z

components/webui/client/src/pages/SearchPage/SearchState/useUpdateStateWithMetadata.ts

+        switch (resultsMetadata.lastSignal) {
+            case SEARCH_SIGNAL.RESP_DONE:
+            case PRESTO_SEARCH_SIGNAL.FINISHED:
+                updateSearchUiState(SEARCH_UI_STATE.DONE);
+                break;
+            case PRESTO_SEARCH_SIGNAL.FAILED:


Is this enough for synchronizing presto signal with ui state? @davemarco

yes i think good

davemarco

Looks good stylistic changes.

components/webui/client/src/pages/SearchPage/PrestoProgress/index.tsx

components/webui/client/src/components/usePseudoProgress.ts

components/webui/client/src/pages/SearchPage/PrestoProgress/index.module.css

components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx

davemarco · 2025-08-15T13:35:39Z

components/webui/client/src/pages/SearchPage/SearchState/useUpdateStateWithMetadata.ts

+        switch (resultsMetadata.lastSignal) {
+            case SEARCH_SIGNAL.RESP_DONE:
+            case PRESTO_SEARCH_SIGNAL.FINISHED:
+                updateSearchUiState(SEARCH_UI_STATE.DONE);
+                break;
+            case PRESTO_SEARCH_SIGNAL.FAILED:


yes i think good

hoophalab · 2025-08-15T17:46:59Z

components/webui/client/src/pages/SearchPage/usePseudoProgress.ts

+const usePseudoProgress = (): {
+    progress: Nullable<number>;
+    start: () => void;
+    stop: () => void;
+} => {
+    const [progress, setProgress] = useState<Nullable<number>>(null);


i put this file under SearchPage directly to avoid cross dependency -- does this look good?

what about in here /home/davidmawk/clp/components/webui/client/src/pages/SearchPage/SearchState? I think this is also good since it relates to ui state, and i have other hooks in there? If you dont like that, maybe just put it in a hooks folder?, its in a top level directory right now and this file seems kind of random here

davemarco

small then i approve. Thanks for changes

davemarco · 2025-08-15T20:26:52Z

components/webui/client/src/pages/SearchPage/usePseudoProgress.ts

+const usePseudoProgress = (): {
+    progress: Nullable<number>;
+    start: () => void;
+    stop: () => void;
+} => {
+    const [progress, setProgress] = useState<Nullable<number>>(null);


what about in here /home/davidmawk/clp/components/webui/client/src/pages/SearchPage/SearchState? I think this is also good since it relates to ui state, and i have other hooks in there? If you dont like that, maybe just put it in a hooks folder?, its in a top level directory right now and this file seems kind of random here

davemarco · 2025-08-15T20:29:31Z

components/webui/client/src/pages/SearchPage/Presto/PageProgress/index.tsx

+ *
+ * @return
+ */
+const PageProgress = () => {


How do you renaming folder/component this just ProgessBar?

davemarco

Changes look good. Title is good

kirkrodrigues

Deferring to @davemarco's review.

feat(webui): Add a progress bar to the Presto search page.

2ebc3bb

hoophalab requested a review from a team as a code owner August 14, 2025 20:42

This comment was marked as resolved.

Sign in to view

address coderabbit comments

9382318

hoophalab commented Aug 14, 2025

View reviewed changes

hoophalab requested a review from davemarco August 14, 2025 21:05

This comment was marked as resolved.

Sign in to view

css

a7d6689

This comment was marked as resolved.

Sign in to view

davemarco requested changes Aug 15, 2025

View reviewed changes

hoophalab added 2 commits August 15, 2025 13:30

address comments

86c2d9a

Merge branch 'main' into progress

36fd04e

hoophalab requested a review from davemarco August 15, 2025 17:33

This comment was marked as resolved.

Sign in to view

fix style

69a06bf

hoophalab commented Aug 15, 2025

View reviewed changes

This comment was marked as off-topic.

Sign in to view

davemarco requested changes Aug 15, 2025

View reviewed changes

address comments

b24d56f

hoophalab requested a review from davemarco August 15, 2025 20:50

This comment was marked as resolved.

Sign in to view

davemarco approved these changes Aug 15, 2025

View reviewed changes

kirkrodrigues approved these changes Aug 15, 2025

View reviewed changes

Merge branch 'main' into progress

498b0b4

hoophalab merged commit 619392f into y-scope:main Aug 15, 2025
7 checks passed

coderabbitai bot mentioned this pull request Aug 19, 2025

feat(webui): Display total result count rather than UI table row count for Presto queries. #1236

Merged

3 tasks

hoophalab deleted the progress branch September 5, 2025 17:05

feat(webui): Add a progress bar to the Presto search page. #1206

feat(webui): Add a progress bar to the Presto search page. #1206

Uh oh!

Conversation

hoophalab commented Aug 14, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Validation performed

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

This comment was marked as resolved.

Uh oh!

hoophalab Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

davemarco Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

davemarco left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davemarco Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

hoophalab Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

davemarco Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

Uh oh!

davemarco left a comment

Choose a reason for hiding this comment

Uh oh!

davemarco Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

davemarco Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

davemarco left a comment

Choose a reason for hiding this comment

Uh oh!

kirkrodrigues left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

hoophalab commented Aug 14, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 14, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)