Repository navigation
perf(query): render each result row's data browser link as a ULink - #154
Merged
Merged
Conversation
A browsable result rendered one UButton per row for its Open in data browser link. Each UButton builds its own variant classes and wraps a ULink, a ULinkBase and a UIcon, so a 1,000-row result spent most of its render mounting them. A raw ULink with the same classes and icon keeps the link, its label, its in-app navigation and its look.
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
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.
Why
The DMS database console should show a query's result without freezing the page. A query with no
sliceon a table of more than 1,000 rows, such asschemas.metrics.instance().table("readings"), returns the console's 1,000-row cap. When the result is browsable, each row renders its "Open in data browser" link as a Nuxt UIUButton. Each of those buttons resolves its own variant classes and mounts aULink, aULinkBaseand aUIcon. Mounting 1,000 of them took most of the render.Change
frontend-vue/app/components/QueryResultPanel.vue: the row link is now a<ULink raw>with the classes theUButtonresolved to, wrapping one<UIcon>. It keeps the same role, accessible name, title andhref. It still navigates in-app throughULink, and still shows only on row hover or keyboard focus.Workload
The production dashboard build of an isolated DMS run (
dms-control up). Chromium is headless at 1280×900 with 4× CPU throttling (Emulation.setCPUThrottlingRate). It runsschemas.metrics.instance().table("readings").slice(0, 1000)with Ctrl+Enter, after a 1-row query, so the table mounts fresh each time. Timing runs from the keypress to the paint after 1,000 rows exist, with long tasks read from aPerformanceObserver. Base and change ran as two separate DMS runs: 3 rounds of 5 runs per side, interleaved.Evidence
Confirmed in an end-to-end browser benchmark.
Primary number: a 1,000-row result is visible after 2.25 s instead of 5.26 s, 57% faster on a mid-range laptop profile.
.without("_id"), which renders no row links, show in about 1.1 s. The rest of the remaining time is the per-rowULinkand the table cells.ce0901f. After review, the change added two classes to the same element (text-xs active:scale-[0.98]), with no new component or node.Impact
Anyone who runs a broad query in the console. The longest frozen stretch drops from 3.7 s to 1.2 s at 4× throttling, about 0.9 s to 0.3 s on an unthrottled machine. The impact is medium. It happens on every query that hits the 1,000-row cap.
Proof the link is unchanged
The
UButtonlink (base9260525) and this branch (be8f22b) were compared in a real browser onshop.productsandshop.customersresults:Rows with no
_id, and a result that is not browsable, render no link in either build.pnpm run checks:Checks: 8 passed, 0 failed.pnpm test:layer:19 passed (19)files,166 passed (166)tests.pnpm test:frontend:Verified 2 modules.flowchart LR R[result row] --> B{browsable and has _id?} B -- before --> U[UButton: ULink + ULinkBase + UIcon + own variant classes] B -- after --> L[ULink raw + UIcon, fixed classes]Readability
The template names the link's classes instead of the button props
color,variantandsize. They are the classes the DMS button theme resolved to for a ghost, neutral, xs, square button, so a theme change to that button no longer reaches this link.No overlap with #152.
Verify skill
verify-dms-databaseonbe8f22b, with the featuresplanlists:open-in-data-browser-opens-the-target-table-or-the-rowpasses. It covers a result row's own link opening the data browser filtered on that row.The verdict reads
FAILbecause of one guard journey,a-replace-on-a-selection-changes-every-row-the-dry-run-announced. It is the known product finding in.agents/skills/verify-dms-database/features/guard.md:@antelopejs/mongodb1.6.2 runs a selection replace asfindOneAndReplace. The journey fails onmainas well. It counts against this PR only becauseQueryResultPanel.vueis under the guard feature's globs. This diff does not touch the replace path.