Add fault detail view with environment data and bulk-data support#33
Merged
Add fault detail view with environment data and bulk-data support#33
Conversation
Add TypeScript type definitions for: - Snapshot union type (FreezeFrameSnapshot | RosbagSnapshot) - EnvironmentData with extended_data_records and snapshots - FaultResponse with item wrapper and SOVD status object - BulkDataDescriptor for listing rosbags - Type guards: isFreezeFrameSnapshot, isRosbagSnapshot Add unit tests for type guards and structure validation.
Update API client: - getFaultWithEnvironmentData() returns FaultResponse with environment_data - Add listBulkDataCategories() for category listing - Add listBulkData() for descriptor listing - Add getBulkDataUrl() for building download URLs - Add downloadBulkData() for fetching files as blobs - Add formatBytes() and formatDuration() utilities - Mark legacy getFaultSnapshots() as deprecated Add comprehensive unit tests with mocked fetch.
Add components for fault environment data visualization: - RosbagDownloadButton: Download button with size display and tooltip - SnapshotCard: Card component for freeze frame and rosbag snapshots - FaultsPanel: Updated to fetch and display environment_data - Collapsible fault cards with lazy loading - Extended data records display (first/last occurrence) - Snapshot list with inline download capability - Add TooltipProvider to App for tooltip support - Add shadcn tooltip component Add unit tests for RosbagDownloadButton and SnapshotCard.
Align TypeScript types and component property access with the corrected ROS 2 message field names (first_occurrence_ns, last_occurrence_ns). Updates FaultsPanel and test fixtures.
FaultsDashboard now supports collapsible fault rows that lazy-load environment data (freeze frame snapshots + rosbag downloads) when expanded, matching the FaultsPanel behavior. Uses getFaultWithEnvironmentData() and renders SnapshotCard components with rosbag download buttons.
- Skip store set() in fetchFaults when fault data hasn't actually changed, avoiding unnecessary re-renders from identical polling responses. - Only show isLoadingFaults spinner on initial load, not during background polls that would cause brief loading flash every 5 seconds. - Disable polling when SSE fault stream is active (SSE provides real-time updates, making polling redundant and a source of flicker). - Add shallow comparison in SSE onFaultConfirmed/onFaultCleared handlers to skip state updates when the incoming event doesn't change anything. - Apply same SSE-aware polling optimization to FaultsCountBadge.
Add overflow-hidden to main content wrapper in App.tsx. Without it, flexbox min-height:auto default allows the content div to grow beyond h-screen, breaking the layout when FaultsDashboard rows expand with tall snapshot details. The overflow-hidden implicitly sets min-height:0, letting the child <main> element scroll properly via overflow-y-auto.
afd7486 to
7376e7d
Compare
When FaultsPanel fetches fault details for expanding, use the fault's own entity_type/entity_id (always app-level) instead of the panel's component-level props. Synthetic components have a fabricated FQN like '/navigation_component' that doesn't prefix-match fault reporting sources like '/navigation/anomaly_detector', causing the bulk-data download security check to fail with 404.
There was a problem hiding this comment.
Pull request overview
This pull request adds snapshot download functionality for SOVD fault diagnostics, enabling users to view and download rosbag recordings and freeze frame data associated with faults. The feature integrates with the SOVD-compliant REST API to fetch environment data containing snapshots, and provides UI components to display and download this data.
Changes:
- Added SOVD-compliant type definitions for fault responses with environment data including snapshots (freeze frames and rosbags) and extended data records
- Implemented bulk data API endpoints for listing and downloading rosbag files with proper metadata extraction
- Created UI components (SnapshotCard, RosbagDownloadButton, Tooltip) to display snapshot information and enable downloads
- Enhanced FaultsPanel and FaultsDashboard to show collapsible environment data with lazy loading
- Optimized fault polling to skip SSE-aware updates and reduce unnecessary re-renders
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/types.ts | Added SOVD snapshot types (FreezeFrame, Rosbag), FaultResponse with environment data, BulkData types, type guards, and backwards-compatible deprecations |
| src/lib/types.test.ts | Unit tests for new snapshot type guards, FaultResponse structure, and BulkDataDescriptor types |
| src/lib/sovd-api.ts | Added getFaultWithEnvironmentData, bulk data endpoints (list categories/items, download), utility functions (formatBytes, formatDuration), deprecated legacy snapshot methods |
| src/lib/sovd-api.test.ts | Tests for new fault/bulk data endpoints, URL construction, file download with Content-Disposition parsing, and utility functions |
| src/lib/store.ts | Optimized fetchFaults to skip loading spinner on polls, compare fault changes efficiently, and prevent unnecessary state updates |
| src/components/ui/tooltip.tsx | New Tooltip component using Radix UI for hover information display |
| src/components/SnapshotCard.tsx | Card component to display snapshot metadata (type, timestamp, size, duration) with expandable freeze frame data |
| src/components/SnapshotCard.test.tsx | Tests for snapshot card rendering with both freeze frame and rosbag snapshots |
| src/components/RosbagDownloadButton.tsx | Button component with tooltip to trigger rosbag downloads using temporary anchor elements |
| src/components/RosbagDownloadButton.test.tsx | Tests for download button rendering, click handling, and URI construction |
| src/components/FaultsPanel.tsx | Enhanced to show collapsible environment data with lazy-loaded fault details and snapshot cards |
| src/components/FaultsDashboard.tsx | Updated to support expandable faults with environment data, skip polling when SSE active, and use proper entity type mapping |
| src/App.tsx | Wrapped app in TooltipProvider and adjusted main content flex layout for proper overflow handling |
| package.json | Added radix-ui umbrella package dependency |
| package-lock.json | Lock file updates for radix-ui and all its component dependencies |
- Fix Tooltip import: use @radix-ui/react-tooltip instead of radix-ui - Refactor getBulkDataUrl to reuse getUrl helper - Add bounds check to formatBytes for very large values - Extract mapFaultEntityTypeToResourceType as shared utility - Use blob download via downloadBulkData in RosbagDownloadButton - Improve Content-Disposition parsing with RFC 5987 support - Update RosbagDownloadButton tests for blob download
mfaferek93
approved these changes
Feb 8, 2026
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.
Pull Request
Summary
Adds snapshot download functionality for SOVD fault diagnostics, enabling users to view and download rosbag recordings and freeze frame data associated with faults. The feature integrates with the SOVD-compliant REST API to fetch environment data containing snapshots, and provides UI components to display and download this data.
Changes:
Optimized fault polling to skip SSE-aware updates and reduce unnecessary re-renders
Issue
Link the related issue (required):
Type
Testing
How was this tested / how should reviewers verify it?
Checklist
npm run lint)npm run build)