Add spec for result view auto-refresh on logical ID change#266
Open
Add spec for result view auto-refresh on logical ID change#266
Conversation
Defines auto-refresh behavior for result views bound to logical result IDs, including viewport preservation, debouncing, pause/resume, and multi-view independence. Absorbs E03 #83 into E04 results visualization. https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
Phase 0: research.md — technical decisions on registry events, Vega signal API for viewport, 300ms debounce, service-layer controller. Phase 1: data-model.md, contracts (AutoRefreshController, viewport handle, useAutoRefresh hook), quickstart.md. Phase 2: planning blog post and LinkedIn summary. All constitution gates pass. No new dependencies required. https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
Clarification session: pause/resume toggle is a small icon button in the tab header next to the close button (per-tab action pattern). https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
When the same logical result ID is open in multiple views (panel + editor tab), each refreshes independently with its own auto-refresh state. Updated FR-004 and edge cases. https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
48 tasks across 8 phases: setup, foundation, 4 user stories (auto-refresh, viewport preservation, multi-view, pause/resume), Storybook/E2E, and polish with evidence collection and PR creation. https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
Phase 1+2: Setup and Foundation for result view auto-refresh. - AutoRefreshController in services/session-state/src/refresh/ - register/unregister views per logical result ID - subscribe to ResultIdRegistry change events - per-view state management (paused, stale, visible) - debounce rapid updates (300ms trailing edge) - visibility-deferred refresh for background tabs - pause/resume with pending event capture - ChartRenderer viewport extension - forwardRef + useImperativeHandle for ChartRendererHandle - captureViewport() reads Vega signals matching known prefixes - restoreViewport() writes signals back and re-runs dataflow - viewportConstants.ts with VIEWPORT_SIGNAL_PREFIXES - useAutoRefresh React hook - register on mount, unregister on unmount - state/pause/resume/toggle operations - hasPendingUpdate computed property - 29 tests passing (20 controller + 9 viewport) https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
…extension Phase 3-6: All four user stories implemented. - ChartPanelWrapper integration: - useAutoRefresh hook binds active tab to controller - Pause/resume indicator button in tab header (next to close) - Pending update badge (blue dot) when paused with changes - Warning banner for error/unavailable states (FR-009, FR-010) - ChartRendererHandle ref passed for viewport capture/restore - PanelContext extended: - ChartTabData.resultId for auto-refresh binding - autoRefreshController field in PanelContextValue - VS Code extension wiring: - createAutoRefreshController called after registry creation - Controller disposed via context.subscriptions - Hook test (10 tests): - Mount/unmount registration lifecycle - toggle/pause/resume operations - hasPendingUpdate reactive property https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
Phase 7: Storybook stories and E2E test specs. - AutoRefresh story: simulates data updates with viewport preservation - Refresh button triggers re-render, viewport info displayed - Interactive zoom-then-refresh demonstration - PauseResume story: demonstrates toggle and pending badge - Pause/Resume button with visual state - Data change while paused shows pending badge - Resume flushes pending update - Playwright E2E specs (ChartAutoRefresh.spec.ts): - Theme variant screenshots (light, dark, vscode) - Data update interaction test - Pause/resume with pending flush interaction test https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
Evidence: test-summary.md (49 tests passing), usage-example.md, e2e-summary.md (61 E2E tests passing), 7 theme-variant screenshots. Media: shipped blog post and LinkedIn summary. https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB
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
2 participants
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.
Summary
This PR introduces the formal specification for the Result View Auto-Refresh feature (001-result-auto-refresh), which enables result views to automatically update when underlying result data changes, while preserving the analyst's viewport state.
Key Changes
spec.md: Complete feature specification covering:
requirements.md: Specification quality checklist validating:
Notable Details
https://claude.ai/code/session_01Hryx1Gtq4c5dk539KzVVNB