feat(ui): Add lazy loading for remote dataset catalogs by hfl0506 · Pull Request #233 · goptics/vizb

hfl0506 · 2026-07-17T06:16:07Z

Related Issue

Closes #223

Changes

Automatic catalog/full-payload classification with useful validation
errors.
Encoded detail URLs preserving queries and removing fragments.
Module-scoped success and in-flight caches.
Race-safe selection, retryable failures, and deep-link-aware
initialization.
Continuous network/worker skeleton transitions with inline Retry.
Dataset picker capped at 100 results while searching the full catalog.
Updated CLI, GitHub Action, and endpoint contract documentation.
Added comprehensive tests for detection, caching, races, retries, URLs,
deep links, skeletons, and large catalogs.

Test Steps

- pnpm --dir ui test — 485 tests
- pnpm --dir ui typecheck
- task build:ui
- task test
- task format:check

Screenshots

Large catalog picker

Screen.Recording.2026-07-16.at.11.10.06.PM.mov

Three-second loading skeleton

Screen.Recording.2026-07-16.at.11.12.09.PM.mov

Inline error, then successful Retry

Screen.Recording.2026-07-16.at.11.12.42.PM.mov

Encoded slash ID

codecov-commenter · 2026-07-17T06:19:36Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-07-18T16:09:38Z

Warning

Review limit reached

@hfl0506, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 7 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d4a923f-4c76-4d81-b034-f0b8a1c8be5b

📥 Commits

Reviewing files that changed from the base of the PR and between 07d6aea and 585987a.

📒 Files selected for processing (18)

action.yml
cmd/ui.go
docs/src/content/docs/ci-cd/github-action.mdx
docs/src/content/docs/commands/ui.mdx
ui/src/components/DataSetHeader.vue
ui/src/components/LoadError.vue
ui/src/components/LoadingSkeleton.vue
ui/src/components/Selector.vue
ui/src/composables/useChartPipeline.ts
ui/src/composables/useDashboardInit.ts
ui/src/composables/useDataPoint.ts
ui/src/composables/useUrlRouter.test.ts
ui/src/composables/useUrlRouter.ts
ui/src/lib/pickerLimit.test.ts
ui/src/lib/pickerLimit.ts
ui/src/lib/remoteData.test.ts
ui/src/lib/remoteData.ts
ui/src/views/Dashboard.vue

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

_{Comment @coderabbitai help to get the list of available commands.}

fahimfaisaal · 2026-07-19T05:25:09Z

@hfl0506 this PR has changes of #232 correct?

hfl0506 · 2026-07-19T05:38:53Z

@hfl0506 this PR has changes of #232 correct?

Yes, it does included change from #232

fahimfaisaal · 2026-07-19T05:42:42Z

@hfl0506 I see; It should be originating from the main branch tho. Ok, let's merge #232 first. then I will come here

fahimfaisaal · 2026-07-19T06:29:03Z

@hfl0506 let's fix the conflicts.

hfl0506 · 2026-07-19T06:36:45Z

@hfl0506 let's fix the conflicts.

@fahimfaisaal resolved conflict, please have a look when you have a chance. Thanks

fahimfaisaal · 2026-07-19T06:54:27Z

@hfl0506 Thanks, i've run the /ponytail inside my agent for this PR and got the following improvement scope you may review.

ui/src/lib/dashboardState.ts + .test.ts: yagni one-expression helper + 48-line suite, one call site. Inline in Dashboard.vue computed.

ui/src/lib/remoteData.ts:L149-173 (LazyDatasetSelection): yagni class + generation + Result union. selectDataSet already drops stale work via activeDataSetId !== id. Keep fetchDatasetDetail; drop the class.

useDataPoint.ts:L51-52 + L96 + L195 (catalogEntries): delete second copy of {id,name}. Shells already land in dataSets with those fields — use dataSets.value[id].id.

remoteData.ts detailCache + useDataPoint.ts loadedDetails: shrink two success maps. One map of prepared datasets + in-flight promises is enough (raw cache only serves re-prepare).

pickerLimit.ts:L11-14 (limit <= 0): delete dead branch. Only caller passes 100.

pickerLimit.ts:L24-28 (filterPickerOptions): shrink reimplements Selector’s filterFunction. Keep limitPickerOptions; filter once in the component.

Selector.vue:L68-71 + L90-91: shrink dual filter paths (resultLimit → pre-filter + identity combobox filter; else combobox filters). One path: always compute matchingOptions, always identity filter-function when limited (or always pre-filter).

remoteData.ts:L20-21 (hasOwn): stdlib Object.hasOwn(entry, 'data') (or 'data' in entry on plain JSON). Drop the wrapper.

───

Keep (not bloat): classifyRemotePayload / detail validation (trust boundary), URL builder, in-flight dedupe, :resultLimit="100" + truncated footer, Retry wiring, remoteData.test.ts for the classifier.

net: ~−120 lines possible (mostly dashboardState* + LazyDatasetSelection + dual catalog/cache).

hfl0506 · 2026-07-19T07:39:28Z

@hfl0506 Thanks, i've run the /ponytail inside my agent for this PR and got the following improvement scope you may review.

ui/src/lib/dashboardState.ts + .test.ts: yagni one-expression helper + 48-line suite, one call site. Inline in Dashboard.vue computed.

ui/src/lib/remoteData.ts:L149-173 (LazyDatasetSelection): yagni class + generation + Result union. selectDataSet already drops stale work via activeDataSetId !== id. Keep fetchDatasetDetail; drop the class.

useDataPoint.ts:L51-52 + L96 + L195 (catalogEntries): delete second copy of {id,name}. Shells already land in dataSets with those fields — use dataSets.value[id].id.

remoteData.ts detailCache + useDataPoint.ts loadedDetails: shrink two success maps. One map of prepared datasets + in-flight promises is enough (raw cache only serves re-prepare).

pickerLimit.ts:L11-14 (limit <= 0): delete dead branch. Only caller passes 100.

pickerLimit.ts:L24-28 (filterPickerOptions): shrink reimplements Selector’s filterFunction. Keep limitPickerOptions; filter once in the component.

Selector.vue:L68-71 + L90-91: shrink dual filter paths (resultLimit → pre-filter + identity combobox filter; else combobox filters). One path: always compute matchingOptions, always identity filter-function when limited (or always pre-filter).

remoteData.ts:L20-21 (hasOwn): stdlib Object.hasOwn(entry, 'data') (or 'data' in entry on plain JSON). Drop the wrapper.

───

Keep (not bloat): classifyRemotePayload / detail validation (trust boundary), URL builder, in-flight dedupe, :resultLimit="100" + truncated footer, Retry wiring, remoteData.test.ts for the classifier.

net: ~−120 lines possible (mostly dashboardState* + LazyDatasetSelection + dual catalog/cache).

@fahimfaisaal update changes accordingly, quick question: can you share your set up with me personally ? Thanks

fahimfaisaal · 2026-07-19T08:06:47Z

@hfl0506 using Zed ACP for running multiple agents and sometimes use Orca

For review, using ponytail most of the time, superpowers code review, and barely manual
For feature development and planning, using /brainstrom "superpower + openspcec

fahimfaisaal

Well Done

hfl0506 marked this pull request as ready for review July 17, 2026 06:22

hfl0506 requested a review from fahimfaisaal July 17, 2026 07:02

hfl0506 added enhancement New feature or request ui ui-related tasks labels Jul 17, 2026

hfl0506 force-pushed the feat/lazy-data-url-catalog branch from 914ec21 to 97c3dcd Compare July 18, 2026 02:39

fahimfaisaal added this to the Release v0.16.0 milestone Jul 18, 2026

hfl0506 force-pushed the feat/lazy-data-url-catalog branch from 97c3dcd to 46d1c68 Compare July 18, 2026 16:09

feat(ui): add lazy loading for remote dataset catalogs

00b3f90

hfl0506 force-pushed the feat/lazy-data-url-catalog branch from 46d1c68 to 00b3f90 Compare July 19, 2026 06:31

refactor(ui): remove redundant lazy dataset state

1aaf2b9

fix(ui): restore selector search filtering

585987a

fahimfaisaal approved these changes Jul 19, 2026

View reviewed changes

fahimfaisaal merged commit 78a8b50 into goptics:main Jul 19, 2026
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): Add lazy loading for remote dataset catalogs#233

feat(ui): Add lazy loading for remote dataset catalogs#233
fahimfaisaal merged 3 commits into
goptics:mainfrom
hfl0506:feat/lazy-data-url-catalog

hfl0506 commented Jul 17, 2026 •

edited

Loading

Uh oh!

codecov-commenter commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading

Review limit reached

Uh oh!

fahimfaisaal commented Jul 19, 2026

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 •

edited

Loading

Uh oh!

fahimfaisaal commented Jul 19, 2026

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 •

edited

Loading

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 •

edited

Loading

Uh oh!

fahimfaisaal left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

hfl0506 commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issue

Changes

Test Steps

Screenshots

Large catalog picker

Three-second loading skeleton

Inline error, then successful Retry

Encoded slash ID

Uh oh!

codecov-commenter commented Jul 17, 2026

Codecov Report

Uh oh!

coderabbitai Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

fahimfaisaal commented Jul 19, 2026

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fahimfaisaal commented Jul 19, 2026

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hfl0506 commented Jul 19, 2026

Uh oh!

fahimfaisaal commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fahimfaisaal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hfl0506 commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 18, 2026 •

edited

Loading

fahimfaisaal commented Jul 19, 2026 •

edited

Loading

fahimfaisaal commented Jul 19, 2026 •

edited

Loading

fahimfaisaal commented Jul 19, 2026 •

edited

Loading