docs(lab): add LabConcurrencyAnimator - #156
Open
rickcedwhat-ai wants to merge 9 commits into
Open
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 Walkthrough<review_stack_artifact> WalkthroughThis PR restructures the entire Smart Table documentation site: simplifying VitePress navigation to API and Examples, reorganizing the guide sidebar around core onboarding concepts (Why Smart Table?, Filtering, Concurrency, Pagination), adding new interactive lab components (ConfigSwatch, MethodBadge, LabConcurrencyAnimator), consolidating legacy concept/recipe pages into focused guides, and enhancing API/troubleshooting documentation with collapsible sections and interactive debugger embeds. ChangesDocumentation Site Restructuring
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Collaborator
Author
🤖 Bot HQ🔗 Issue Link
🔍 CodeRabbit Review
This comment is managed by the bot — do not edit directly. |
📖 Docs Preview — PR #156
|
rickcedwhat
marked this pull request as ready for review
May 31, 2026 21:45
Collaborator
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
rickcedwhat-ai
added
coderabbit: complete
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
docs/guide/configuration.md (1)
45-139: Good UX improvement with collapsible sections.Converting these configuration subsections to collapsible
<details>blocks improves scannability and allows readers to expand only what they need. The content preservation ensures no information is lost.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/guide/configuration.md` around lines 45 - 139, Good UX change — keep the collapsible <details> blocks but ensure the examples and API names remain consistent: preserve the code fences and example behavior for headerTransformer (ensure the exported AGGridConfig.headerTransformer signature matches usage in useTable — if the example above uses async ({ text, index }) then AGGridConfig.headerTransformer should also be async or the example should be changed to a sync function), keep the Strategies and debug examples intact, and ensure each <summary> text (e.g., "Header Transformation", "Strategies", "Debugging Config", "Dynamic Config (Reuse Across Tests)") accurately reflects the collapsed content so readers can find examples like headerTransformer, Strategies.Pagination.click, Strategies.Sorting.AriaSort, debug, and AGGridConfig quickly.docs/troubleshooting.md (2)
280-288: ⚡ Quick winClarify the "slow" example.
The "slow" example calls
findRows({})in a loop without using the results, which doesn't clearly illustrate "looping manually." Consider showing a more realistic comparison, such as manual pagination logic vs. the built-inforEachmethod.📝 Proposed improvement
-// ❌ Slow: Looping manually -for (let i = 0; i < 10; i++) { - await table.findRows({}); -} +// ❌ Slow: Manual pagination with filtering in code +const allRows = []; +for (let page = 1; page <= 10; page++) { + const pageRows = await table.findRows({}, { maxPages: 1 }); + allRows.push(...pageRows.filter(/* some condition */)); +} // ✅ Fast: Built-in iteration await table.forEach(async ({ row }) => { - // Automation handles pagination seamlessly + // Handles pagination and can break early });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/troubleshooting.md` around lines 280 - 288, The "slow" example is misleading because it calls findRows({}) repeatedly without showing manual pagination; replace it with a realistic manual-pagination loop using table.findRows (e.g., capturing results and paging token/offset from each response and iterating until no more pages) so it contrasts with the built-in table.forEach behavior; reference the functions table.findRows and table.forEach and ensure the manual loop demonstrates handling of results, pagination tokens/offsets, and awaiting each page to illustrate why forEach is preferable.
441-446: 💤 Low valueAdd language identifier to code fence.
The log output code block should specify a language identifier for better rendering and accessibility.
📝 Proposed fix
-``` +```text 🔍 [SmartTable] Finding row with filters: { Name: 'John' } ℹ️ [SmartTable] Scanned 10 rows on page 1 🔍 [SmartTable] Checking row 1: Name="Alice" (Mismatch) 🔍 [SmartTable] Checking row 2: Name="John" (Match!)</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@docs/troubleshooting.mdaround lines 441 - 446, The fenced code block in
docs/troubleshooting.md lacks a language identifier which hurts
rendering/accessibility; change the opening fence fromtotext (or
another appropriate language likeconsole) so the block readstext
followed by the log lines (keeping the content unchanged) to ensure proper
syntax highlighting and accessibility for the example logs labeled with
[SmartTable].</details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.Inline comments:
In@docs/.vitepress/theme/components/lab/LabDebuggerWidget.vue:
- Around line 160-165: The button labeled "Replay" resets but doesn't re-start
playback because stepLine() returns immediately when isDone.value is true;
update stepLine so that when isDone.value is true it calls resetDebugger() and
then initiates playback (e.g., set hasStarted.value = true or call the existing
play/start function) instead of returning, so a single click will both reset and
start replay; references: stepLine, resetDebugger, isDone, hasStarted (or the
play/start method), nextLine/executed as needed.In
@docs/.vitepress/theme/components/lab/LabGetRowTrace.vue:
- Line 183: The Replay button currently only calls the reset() method, which
returns the component to the initial state but does not start the trace; change
the click handler so it calls reset() and then immediately calls onStart()
(i.e., invoke onStart after reset completes) so the trace is replayed
automatically; update the button element that currently has@click="reset" to
call both reset and onStart (ensuring any async reset awaits before calling
onStart if reset is asynchronous) and keep the existing phase-based classes and
text unchanged.In
@docs/api/table-methods.md:
- Line 271: The paragraph currently refers to "findRow" but the section
demonstrates findRows(); update the interactive embed description to mention
findRows() instead of findRow and ensure any surrounding wording (e.g., "flow
end-to-end", "multi-page scan", "match highlight", "getCell + checkbox
interaction") remains consistent with the plural method name; locate the
sentence that begins "Walk through a fullfindRowflow..." and change the
identifier tofindRows()so the description accurately matches the documented
method.
Nitpick comments:
In@docs/guide/configuration.md:
- Around line 45-139: Good UX change — keep the collapsible
Details
blocks but
ensure the examples and API names remain consistent: preserve the code fences
and example behavior for headerTransformer (ensure the exported
AGGridConfig.headerTransformer signature matches usage in useTable — if the
example above uses async ({ text, index }) then AGGridConfig.headerTransformer
should also be async or the example should be changed to a sync function), keep
the Strategies and debug examples intact, and ensure eachtext (e.g.,
"Header Transformation", "Strategies", "Debugging Config", "Dynamic Config
(Reuse Across Tests)") accurately reflects the collapsed content so readers can
find examples like headerTransformer, Strategies.Pagination.click,
Strategies.Sorting.AriaSort, debug, and AGGridConfig quickly.In
@docs/troubleshooting.md:
- Around line 280-288: The "slow" example is misleading because it calls
findRows({}) repeatedly without showing manual pagination; replace it with a
realistic manual-pagination loop using table.findRows (e.g., capturing results
and paging token/offset from each response and iterating until no more pages) so
it contrasts with the built-in table.forEach behavior; reference the functions
table.findRows and table.forEach and ensure the manual loop demonstrates
handling of results, pagination tokens/offsets, and awaiting each page to
illustrate why forEach is preferable.- Around line 441-446: The fenced code block in docs/troubleshooting.md lacks a
language identifier which hurts rendering/accessibility; change the opening
fence fromtotext (or another appropriate language likeconsole) so the block readstext followed by the log lines (keeping the content
unchanged) to ensure proper syntax highlighting and accessibility for the
example logs labeled with [SmartTable].</details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended) - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: Path: .coderabbit.yaml **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `23f21f5e-0405-4098-bd60-47edc8da6cb7` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 2612d2a19f3679b4f6d0381e52e2dfd77fc19ea6 and 46f43b60d996634344df0ba2099e8bfd370b5ef0. </details> <details> <summary>📒 Files selected for processing (38)</summary> * `docs/.vitepress/config.mts` * `docs/.vitepress/theme/components/ConfigSwatch.vue` * `docs/.vitepress/theme/components/MethodBadge.vue` * `docs/.vitepress/theme/components/lab/LabConcurrencyAnimator.vue` * `docs/.vitepress/theme/components/lab/LabDebugPlayback.vue` * `docs/.vitepress/theme/components/lab/LabDebuggerWidget.vue` * `docs/.vitepress/theme/components/lab/LabFailureStates.vue` * `docs/.vitepress/theme/components/lab/LabGetRowTrace.vue` * `docs/.vitepress/theme/components/lab/LabMethodWalkthrough.vue` * `docs/.vitepress/theme/components/lab/LabStrategyPicker.vue` * `docs/.vitepress/theme/components/lab/LabTableTypeGallery.vue` * `docs/.vitepress/theme/index.ts` * `docs/advanced/custom-strategies.md` * `docs/advanced/debugging.md` * `docs/advanced/index.md` * `docs/advanced/performance.md` * `docs/api/table-methods.md` * `docs/concepts/pagination-strategies.md` * `docs/concepts/table-anatomy.md` * `docs/examples/ag-grid.md` * `docs/examples/data-scraping.md` * `docs/examples/index.md` * `docs/guide/concurrency.md` * `docs/guide/configuration.md` * `docs/guide/core-concepts.md` * `docs/guide/debugging.md` * `docs/guide/filtering.md` * `docs/guide/getting-started.md` * `docs/guide/header-mapping.md` * `docs/guide/pagination.md` * `docs/guide/recipes.md` * `docs/guide/strategies.md` * `docs/guide/table-anatomy.md` * `docs/guide/why.md` * `docs/index.md` * `docs/lab/index.md` * `docs/recipes/index.md` * `docs/troubleshooting.md` </details> <details> <summary>💤 Files with no reviewable changes (12)</summary> * docs/recipes/index.md * docs/guide/core-concepts.md * docs/concepts/table-anatomy.md * docs/guide/debugging.md * docs/.vitepress/theme/components/lab/LabStrategyPicker.vue * docs/.vitepress/theme/components/lab/LabFailureStates.vue * docs/concepts/pagination-strategies.md * docs/guide/recipes.md * docs/.vitepress/theme/components/lab/LabTableTypeGallery.vue * docs/.vitepress/theme/components/lab/LabDebugPlayback.vue * docs/advanced/debugging.md * docs/.vitepress/theme/components/lab/LabMethodWalkthrough.vue </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Comment on lines
+160
to
165
| const advanceIcon = computed(() => !hasStarted.value ? '▶' : isDone.value ? '↺' : '⏭') | ||
| const advanceLabel = computed(() => !hasStarted.value ? 'Play' : isDone.value ? 'Replay' : `Run line ${nextLine.value + 1}`) | ||
|
|
||
| function stepLine() { | ||
| if (isDone.value) return | ||
| if (isDone.value) { resetDebugger(); return } | ||
| if (!executedSet.value.has(nextLine.value)) executed.value = [...executed.value, nextLine.value] |
There was a problem hiding this comment.
Replay currently requires two clicks.
When isDone is true, this button is labeled Replay, but stepLine() only resets and returns. The first click does not start playback again, so the control behaves like “Reset” instead of “Replay.”
Suggested fix
function stepLine() {
- if (isDone.value) { resetDebugger(); return }
+ if (isDone.value) resetDebugger()
if (!executedSet.value.has(nextLine.value)) executed.value = [...executed.value, nextLine.value]
nextLine.value += 1
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/.vitepress/theme/components/lab/LabDebuggerWidget.vue` around lines 160
- 165, The button labeled "Replay" resets but doesn't re-start playback because
stepLine() returns immediately when isDone.value is true; update stepLine so
that when isDone.value is true it calls resetDebugger() and then initiates
playback (e.g., set hasStarted.value = true or call the existing play/start
function) instead of returning, so a single click will both reset and start
replay; references: stepLine, resetDebugger, isDone, hasStarted (or the
play/start method), nextLine/executed as needed.
| @click="onNext" | ||
| >Next →</button> | ||
| </template> | ||
| <button v-else class="grt-btn" :class="phase === 'exhausted' ? 'grt-btn--replay-err' : 'grt-btn--replay'" @click="reset">↺ Replay</button> |
There was a problem hiding this comment.
The Replay button only resets.
↺ Replay sends the component back to the initial state, so users have to click Start again. If this button is meant to replay the trace, it should reset and immediately call onStart().
Suggested fix
+function replay() {
+ reset()
+ onStart()
+}- <button v-else class="grt-btn" :class="phase === 'exhausted' ? 'grt-btn--replay-err' : 'grt-btn--replay'" `@click`="reset">↺ Replay</button>
+ <button v-else class="grt-btn" :class="phase === 'exhausted' ? 'grt-btn--replay-err' : 'grt-btn--replay'" `@click`="replay">↺ Replay</button>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/.vitepress/theme/components/lab/LabGetRowTrace.vue` at line 183, The
Replay button currently only calls the reset() method, which returns the
component to the initial state but does not start the trace; change the click
handler so it calls reset() and then immediately calls onStart() (i.e., invoke
onStart after reset completes) so the trace is replayed automatically; update
the button element that currently has `@click`="reset" to call both reset and
onStart (ensuring any async reset awaits before calling onStart if reset is
asynchronous) and keep the existing phase-based classes and text unchanged.
|
|
||
| ### See it in action | ||
|
|
||
| Walk through a full `findRow` flow end-to-end: table init, header mapping, multi-page scan, match highlight, and the final `getCell` + checkbox interaction — all animated step by step. |
There was a problem hiding this comment.
Fix copy-paste error in interactive embed description.
The description says "Walk through a full findRow flow" but this section documents findRows(). Update to match the method being demonstrated.
📝 Proposed fix
-Walk through a full `findRow` flow end-to-end: table init, header mapping, multi-page scan, match highlight, and the final `getCell` + checkbox interaction — all animated step by step.
+Walk through a full `findRows` flow end-to-end: table init, header mapping, multi-page scan, match highlight, and the final `getCell` + checkbox interaction — all animated step by step.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Walk through a full `findRow` flow end-to-end: table init, header mapping, multi-page scan, match highlight, and the final `getCell` + checkbox interaction — all animated step by step. | |
| Walk through a full `findRows` flow end-to-end: table init, header mapping, multi-page scan, match highlight, and the final `getCell` + checkbox interaction — all animated step by step. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/api/table-methods.md` at line 271, The paragraph currently refers to
"findRow" but the section demonstrates findRows(); update the interactive embed
description to mention findRows() instead of findRow and ensure any surrounding
wording (e.g., "flow end-to-end", "multi-page scan", "match highlight", "getCell
+ checkbox interaction") remains consistent with the plural method name; locate
the sentence that begins "Walk through a full `findRow` flow..." and change the
identifier to `findRows()` so the description accurately matches the documented
method.
- Add LabConcurrencyAnimator: animated 3-scenario × 3-mode concurrency demo (all-DOM, column-virtual, click-for-name) with broken-mode reveal, speed controls, cursor animation, table shake, and avatar expansion - Add ConfigSwatch and MethodBadge utility components - Update LabDebuggerWidget and LabGetRowTrace - Remove placeholder lab components no longer needed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tRow flow (#195) Reworks the "Why This Works" section to introduce the debugger-style widget, embeds <LabInitGetRowDebug />, then follows with a numbered explanation of each step (header map build, locator translation, getCell passthrough, typo detection) so beginners can connect the interactive output to concrete concepts. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Add a "Try It — Pagination Config Builder" section after the existing PaginationStrategies anatomy diagram. The new section embeds the LabPaginationSandbox component with a brief description and a five-item "What to notice" list connecting sandbox interactions (toggling selectors, switching pagination types, planning navigation) to real config decisions. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Add LabGetRowTrace as an "Interactive trace" subsection under findRow(), and LabFindRowPaginationDebug as a "See it in action" subsection under findRows() — giving readers live, step-through visualizations alongside the API reference without leaving the page. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…#194) Promotes the LabConcurrencyAnimator from the lab into a polished concepts page at docs/concepts/concurrency.md. Explains sequential, parallel, and synchronized modes with prose, TypeScript examples, embedded interactive, a "What to notice" section, and a quick-reference table. Adds the page to the Concepts sidebar in config.mts. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs: embed LabBeforeAfterV2 column shuffle demo in Table Anatomy Adds a "Why Column Order Must Not Matter" section to table-anatomy.md that explains the column-reordering failure mode, then embeds the interactive LabBeforeAfterV2 demo so readers can shuffle columns and observe brittle index-based locators break while Smart Table stays correct. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: fix misleading column map caching description in table-anatomy Corrects the claim that the map is "built once at init()" — it is actually built lazily on first use and cached in _headerMap, only rebuilt when revalidate()/remapHeaders() clears the cache. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs: add Filtering & Queries guide page with LabQueryBuilder Introduces docs/guide/filtering.md covering the filter model (key=column, value=cell text), exact vs partial matching, getRow/findRow/findRows differences, locator-based filters, typo/column-not-found error messages with fuzzy suggestions, and TypeScript type safety. Embeds LabQueryBuilder as the interactive centrepiece. Adds the page to the Guide sidebar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(docs): add text language tag to fenced code block in filtering.md Resolves MD040 lint failure flagged by CodeRabbit — the column-not-found error output block was missing a language specifier. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…ooting, fold recipes (#203) * docs: reorganize site structure — merge concepts into guide, collapse troubleshooting, fold recipes - Add "Why Smart Table?" section to homepage and new /guide/why page - Move all concepts/ pages into guide/ (table-anatomy, header-mapping, pagination, strategies, concurrency); delete concepts/ directory - Merge troubleshooting.md, guide/debugging.md, and advanced/debugging.md into a single troubleshooting.md with <details> collapsibles - Move recipes/ content into examples/data-scraping and advanced/custom-strategies + advanced/performance; delete recipes/ directory - Wrap configuration.md secondary sections in <details> blocks - Trim top nav to 4 items: Guide | API | Examples | Help (remove Concepts, Recipes, Advanced) - Add collapsed "How It Works" and "Advanced" subsections to Guide sidebar - Update advanced/index.md to reference new custom-strategies and performance pages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: remove redundant pages, add collapsibles to filtering and API methods - Delete docs/guide/core-concepts.md (superseded by How It Works group) - Delete docs/advanced/index.md (orphaned thin index, section accessible via Guide sidebar) - Remove Core Concepts and Advanced Overview entries from sidebar config - Wrap non-intro H2 sections in filtering.md with <details> collapsibles - Wrap parameters/examples for every method in table-methods.md with <details> (first method open by default) - Fix Data Scraping link in examples/index.md to /examples/data-scraping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(docs): repair dead links after recipes/concepts removal * fix(docs): update /concepts/ links in lab, restore /advanced/ index --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…aste fix - LabDebuggerWidget: remove early return in stepLine() so Replay resets and immediately starts playback in a single click - LabGetRowTrace: add replay() helper that calls reset() then onStart(), wire Replay button to it instead of reset() alone - table-methods.md: fix copy-paste error — findRows section said findRow Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
rickcedwhat-ai
force-pushed
the
docs/concurrency-animator
branch
from
June 13, 2026 17:15
46f43b6 to
fb677f1
Compare
rickcedwhat-ai
added
coderabbit: not started
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WIP — do not merge
Lab/docs page visualizing the three concurrency modes (
sequential,parallel,synchronized) as an interactive animator.Related
Part of the broader docs work tracked in #132 and #133.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation