fix(analytics): improve dashboard navigation snappiness#714
Conversation
✅ Deploy Preview for agent-native-images canceled.
|
✅ Deploy Preview for agent-native-meeting-notes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for agent-native-design ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for agent-native-voice ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for agent-native-scheduling ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
![builder-io-integration[bot]](https://avatars.githubusercontent.com/in/353721?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Browser testing: 14/15 passed
Test Results: 14/15 passed ⚠️
✅ TC-01: Direct navigation to valid SQL dashboard loads without existence-check request (succeeded)
Steps: 1. Logged in. 2. Navigated directly to /analytics/adhoc/test-dashboard-1778877304721. 3. Inspected network for existence-check. 4. Verified dashboard title and empty-panels message.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
✅ TC-02: BlankDashboard fallback shows for a non-existent dashboard ID (succeeded)
Steps: 1. Navigated to /analytics/adhoc/nonexistent-id-99999-fake. 2. Waited up to 15s. 3. Verified Empty Dashboard content.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/nonexistent-id-99999-fake
Evidence: 1 screenshot captured
✅ TC-03: Sidebar shows saved views only for the active dashboard (succeeded)
Steps: 1. Navigated to dashboard 1. 2. Verified "Last 30 Days" and "Last 7 Days" under active dashboard. 3. Confirmed no sub-items under Second Test Dashboard. 4. Verified network only called views for dashboard 1.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
✅ TC-04: Prefetch network request fires on hover over a SQL dashboard in sidebar (succeeded)
Steps: 1. Navigated to overview page. 2. Hovered "Second Test Dashboard" without clicking. 3. Confirmed GET /api/sql-dashboards/test-dashboard-b-... in network log.
URLs tested: http://127.0.0.1:8080/analytics/overview
Evidence: 1 screenshot captured
✅ TC-05: No duplicate request after clicking a pre-hovered dashboard link (succeeded)
Steps: 1. Hovered Second Test Dashboard to trigger prefetch. 2. Clicked. 3. Waited for navigation. 4. Verified no duplicate request in network log.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-b-1778877310827
Evidence: 1 screenshot captured
✅ TC-06: Prefetch fires on hover over an analysis name in the sidebar (succeeded)
Steps: 1. On dashboard 1 page, hovered analysis link without clicking. 2. Confirmed GET /api/analyses/test-analysis-123 in network.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
✅ TC-07: Second dashboard shows no views in sidebar when it is not active (succeeded)
Steps: 1. Loaded dashboard 1. 2. Verified both views visible under dashboard 1. 3. Confirmed no view sub-items under dashboard 2. 4. Verified via performance API no views request for dashboard 2.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
✅ TC-08: Views update correctly when navigating between dashboards (succeeded)
Steps: 1. Loaded dashboard 1, confirmed views. 2. Clicked Second Test Dashboard. 3. Waited for navigation. 4. Verified views gone and dashboard 2 highlighted.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721, http://127.0.0.1:8080/analytics/adhoc/test-dashboard-b-1778877310827
Evidence: 2 screenshots captured
✅ TC-09: Sidebar highlights the correct active dashboard (succeeded)
Steps: 1. Loaded dashboard 1 and verified highlight. 2. Clicked dashboard 2. 3. Verified dashboard 2 is now highlighted, dashboard 1 is not.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721, http://127.0.0.1:8080/analytics/adhoc/test-dashboard-b-1778877310827
Evidence: 2 screenshots captured
⚠️ TC-10: Focus (keyboard Tab) triggers prefetch on a dashboard sidebar link (couldnt_verify)
Steps: 1. Executor: tabbed to Second Test Dashboard link on dashboard-b page (warm cache) — no network request observed. 2. Planner: navigated to dashboard 1 (cold cache for dashboard 2), called .focus() on Second Test Dashboard link via JS, observed GET /api/sql-dashboards/test-dashboard-b-... in performance entries. Feature confirmed working.
Failure: assertion_failed — In the executor's batch, TC-09 navigated to dashboard 2, warming the query cache. TC-10 then tried to focus dashboard 2's link — but prefetchQuery correctly skipped the network call because data was fresh (staleTime: 30_000). Planner re-tested with cold cache: programmatic .focus() on the Second Test Dashboard link fired GET /api/sql-dashboards/test-dashboard-b-... confirming onFocus works correctly. The feature is verified to work; the test was confounded by cache state.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
✅ TC-11: Rapid hovering over multiple dashboards causes no UI flash or spinner (succeeded)
Steps: 1. On dashboard 1. 2. Rapidly hovered both dashboards back and forth. 3. Checked for spinners/flash. 4. Verified stable state after hovering.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 2 screenshots captured
✅ TC-12: Reload on a valid dashboard doesn't show a prolonged skeleton (succeeded)
Steps: 1. Navigated to dashboard 1. 2. Hard-reloaded with ignoreCache. 3. Observed skeleton then content. 4. Verified no stuck loading state.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
✅ TC-13: Navigating to an analysis detail page doesn't trigger dashboard-views requests (succeeded)
Steps: 1. Navigated directly to /analytics/analyses/test-analysis-123. 2. Verified analysis content loaded. 3. Confirmed no /api/dashboard-views/ in network. 4. Checked sidebar shows analysis highlighted.
URLs tested: http://127.0.0.1:8080/analytics/analyses/test-analysis-123
Evidence: 1 screenshot captured
✅ TC-14: Back button navigation restores correct sidebar active state (succeeded)
Steps: 1. Dashboard 1 loaded. 2. Clicked dashboard 2 in sidebar. 3. Used browser back. 4. Verified dashboard 1 active with views restored.
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721, http://127.0.0.1:8080/analytics/adhoc/test-dashboard-b-1778877310827
Evidence: 3 screenshots captured
✅ TC-15: Dashboard views endpoint is NOT called for all dashboards on load (efficiency regression) (succeeded)
Steps: 1. Loaded dashboard 1. 2. Counted /api/dashboard-views/ requests. 3. Confirmed exactly 1 (for active dashboard only).
URLs tested: http://127.0.0.1:8080/analytics/adhoc/test-dashboard-1778877304721
Evidence: 1 screenshot captured
Details
PR #714 analytics navigation snappiness improvements: 14/15 TCs passed, 1 couldnt_verify (TC-10 — test isolation issue, feature confirmed working via planner re-test). All core behaviors verified: BlankDashboard fallback, prefetch on hover for dashboards and analyses, active-dashboard-only views fetching (N→1 optimization), no duplicate requests after hover+click, no UI flash on rapid hover, correct sidebar active state on forward/back navigation, and no existence-check request in router.
|
Addressing the browser-testing review: TC-10 does not need a code change. The executor focused a dashboard link after TC-09 had already navigated to that dashboard, so the React Query entry was still fresh under the 30s staleTime and prefetchQuery correctly skipped a duplicate network request. The same review notes a planner re-test with a cold cache where programmatic focus did fire the expected /api/sql-dashboards request, so the focus prefetch behavior is working as intended. |
✅ Deploy Preview for nutritrack-daily-calories canceled.
|
✅ Deploy Preview for agent-native-starter canceled.
|
✅ Deploy Preview for agent-native-dispatch canceled.
|
✅ Deploy Preview for agent-native-content canceled.
|
✅ Deploy Preview for agent-native-calendar canceled.
|
✅ Deploy Preview for agent-native-issues canceled.
|
✅ Deploy Preview for agent-native-slides canceled.
|
|
Addressed review 4301181018 in 21ec06a:
Verified with pnpm --filter analytics typecheck, pnpm --filter analytics build, and git diff --check. |
✅ Deploy Preview for agent-native-mail canceled.
|
✅ Deploy Preview for agent-native-macros canceled.
|
✅ Deploy Preview for agent-native-forms canceled.
|
✅ Deploy Preview for agent-native-videos canceled.
|
✅ Deploy Preview for agent-native-recruiting canceled.
|
There was a problem hiding this comment.
Builder reviewed your changes — looks good ✅
Review Details
Incremental Code Review — PR #714 (Updated)
All previously reported issues have been comprehensively fixed.
Issues Resolved ✅
-
Query Key Versioning Mismatch (was HIGH) — FIXED
- Introduced separate prefetch query keys (
sqlDashboardPrefetchKey,analysisDetailPrefetchKey) that don't include the sync version - Wrapped prefetch data in a
PrefetchSnapshot<T>type carrying both data and syncVersion - Pages now use
initialDatahook to detect version mismatches and safely reuse prefetch data - When versions differ, sets
staleTime: 0to force immediate refetch - This elegantly avoids the cache miss problem while respecting invalidation semantics
- Introduced separate prefetch query keys (
-
Transient Errors Cached as Permanent (was MEDIUM) — FIXED
- Changed prefetch error handling: only
res.status === 404returnsnull - Other non-OK responses now
throwinstead of returningnull, marking prefetch as failed - Pages can now safely refetch on error instead of showing stale "not found" states
- Changed prefetch error handling: only
-
JSON Parse Error Handling (was MEDIUM) — FIXED
- Added try-catch around
res.json()in bothfetchSqlDashboardForPrefetchandfetchAnalysisDetailForPrefetch - Parse errors now throw instead of being silently swallowed
- Added try-catch around
-
Query Parameter Support (was LOW) — FIXED
- Active dashboard ID detection now supports
?id=parameter - Uses
new URLSearchParams(location.search).get("id") || routeParamId - Restores support for legacy dashboard URLs
- Active dashboard ID detection now supports
Quality of the Fix
The implementation is sophisticated and correct:
- ✅ Prefetch snapshot pattern elegantly solves version mismatch without bypassing invalidation
- ✅
initialDataandinitialDataUpdatedAtlogic properly handles stale-null and version-change edge cases - ✅
staleTimeconditional (0 vs 30_000) correctly determines when to refetch vs reuse - ✅ Cleanup
removeQueriescalls placed after successful mutations to avoid wiping optimistic state - ✅ Type safety maintained with
PrefetchSnapshot<T>wrapping - ✅ No new bugs or regressions detected
Verdict
The fix is solid, well-structured, and ready to merge. The author took the feedback seriously and implemented a principled solution that respects React Query's semantics while fixing the core issues.
🧪 Browser testing: Already completed on prior commit; fixes maintain all previously-verified behaviors.
1 participant
Summary
Validation