Skip to content

fix(viewer): preserve dashboard scroll and show API errors#694

Open
HWliao wants to merge 1 commit into
rohitg00:mainfrom
HWliao:fix/viewer-dashboard-refresh-toast
Open

fix(viewer): preserve dashboard scroll and show API errors#694
HWliao wants to merge 1 commit into
rohitg00:mainfrom
HWliao:fix/viewer-dashboard-refresh-toast

Conversation

@HWliao
Copy link
Copy Markdown

@HWliao HWliao commented May 28, 2026

Summary:

  • Preserve dashboard scroll position during manual, auto, polling, and websocket-triggered refreshes.
  • Add bottom-right viewer toast notifications for backend API HTTP errors, network failures, and request timeouts.
  • Add viewer regression coverage for scroll preservation and API error toasts.

Tests:

  • npm test -- test/viewer-session-id.test.ts test/viewer-security.test.ts test/viewer-graph-cooldown.test.ts

Summary by CodeRabbit

  • New Features

    • Added toast notifications for API errors, timeouts, and connection failures
    • Implemented 10-second timeout for API requests with error feedback
    • Dashboard scroll position now preserved when refreshing content
  • Bug Fixes

    • Improved error handling and messaging for failed API requests
  • Tests

    • Added coverage for scroll preservation, error toasts, and timeout scenarios

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

Someone is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 28, 2026

📝 Walkthrough

Walkthrough

This PR adds a toast notification system to surface API errors, implements a 10-second request timeout with AbortController, refactors dashboard loading to preserve scroll position during live updates, and integrates both polling and websocket streams to use the scroll-preserving refresh flow. Tests verify scroll preservation and toast display for HTTP errors, connection failures, and request timeouts.

Changes

Viewer Toast Notifications and Dashboard Refresh

Layer / File(s) Summary
Toast notification infrastructure
src/viewer/index.html
Fixed-position toast region with ARIA live-region attributes and CSS styling for error toast typography; includes responsive small-screen layout adjustment.
API helper timeout and error handling with toast
src/viewer/index.html
Rewrites api() helper with 10s timeout via AbortController, logs HTTP error details, and displays rate-limited backend error toasts via showToast and showApiErrorToast before returning null on failure.
Dashboard scroll position preservation
src/viewer/index.html
loadDashboard refactored to accept options object, conditionally preserve existing dashboard HTML, and restore scrollTop when requested; refreshDashboard() now calls loadDashboard({ preserveScroll: true }).
Polling and websocket integration with scroll-preserving refresh
src/viewer/index.html
Periodic polling loop and websocket stream updates now call refreshDashboard() instead of manually toggling dashboard state when active tab is dashboard.
Test mock updates and comprehensive error/scroll verification
test/viewer-session-id.test.ts
Mock DOM element tracks innerHTML state and resets scrollTop on dashboard load; four new async tests verify scroll preservation, HTTP error toast with status, connection error toast with message, and timeout toast with "timed out after 10s" duration.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A toast to the viewer's new grace,
With timeouts and scrolls keeping pace,
API errors now shine in their glow,
While dashboards remember where they bestow,
Live updates refresh without losing the view—
A symphony smooth, through and through! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely summarizes the main changes: preserving dashboard scroll position and displaying API errors via toast notifications.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


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 and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/viewer/index.html (1)

1346-1399: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Potential race condition in concurrent refreshes may reset scroll position.

The scroll preservation works correctly in the common case, but if refreshDashboard() is called twice in quick succession (e.g., from both auto-refresh timer and an incoming websocket message), the second call may save scrollTop after the first call has already set innerHTML (which resets scroll to 0), causing the scroll position to reset rather than preserve.

The race window is small but possible given that both the 30s auto-refresh timer (line 3667) and websocket updates (line 3637) can trigger refreshDashboard() without coordination.

Consider adding a simple in-progress guard:

🛡️ Proposed fix to prevent concurrent refresh race
 var dashboardTimer = null;
+var dashboardRefreshing = false;
 function refreshDashboard() {
+  if (dashboardRefreshing) return Promise.resolve();
+  dashboardRefreshing = true;
   state.dashboard.loaded = false;
-  return loadDashboard({ preserveScroll: true });
+  return loadDashboard({ preserveScroll: true })
+    .finally(function() { dashboardRefreshing = false; });
 }
🤖 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 `@src/viewer/index.html` around lines 1346 - 1399, loadDashboard can race when
called concurrently (e.g., by refreshDashboard from timer and websocket) so
preserveScroll/priorScrollTop can be captured after innerHTML has been reset;
add a simple in-progress guard (e.g., a module-level boolean like
dashboardRefreshInProgress) in refreshDashboard/loadDashboard to short-circuit
or serialize concurrent invocations: check the flag at the start of
refreshDashboard/loadDashboard, set it before mutating DOM (before setting
el.innerHTML or starting Promise.all), and clear it in the finally block after
renderDashboard completes or on error so subsequent calls either return early or
wait/queue, ensuring the saved priorScrollTop reflects the DOM state and avoids
resetting scroll.
🤖 Prompt for all review comments with 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.

Outside diff comments:
In `@src/viewer/index.html`:
- Around line 1346-1399: loadDashboard can race when called concurrently (e.g.,
by refreshDashboard from timer and websocket) so preserveScroll/priorScrollTop
can be captured after innerHTML has been reset; add a simple in-progress guard
(e.g., a module-level boolean like dashboardRefreshInProgress) in
refreshDashboard/loadDashboard to short-circuit or serialize concurrent
invocations: check the flag at the start of refreshDashboard/loadDashboard, set
it before mutating DOM (before setting el.innerHTML or starting Promise.all),
and clear it in the finally block after renderDashboard completes or on error so
subsequent calls either return early or wait/queue, ensuring the saved
priorScrollTop reflects the DOM state and avoids resetting scroll.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d4b5112c-69e9-448d-8fd2-0300b7e8df3e

📥 Commits

Reviewing files that changed from the base of the PR and between 37fff9a and 987bae4.

📒 Files selected for processing (2)
  • src/viewer/index.html
  • test/viewer-session-id.test.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant