[#5] feat: add schema-based topic publishing with form UI#8
Conversation
Implement dynamic form generation for ROS 2 message publishing based on topic schemas, with synchronized tree and panel navigation. Features: - Schema-based form UI with support for nested objects and arrays - Dynamic JSON generation that reflects form state in real-time - Numeric input validation (uint/float types with proper constraints) - Topic integration in entity tree sidebar - Optimized data loading to prevent duplicate API requests - Auto-expansion of component nodes when selected
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive schema-based topic publishing feature for ROS 2 messages with dynamic form generation. The implementation adds support for structured message editing through an intuitive UI while maintaining backwards compatibility with JSON editing.
Key Changes:
- Schema-based form generation with support for nested objects, arrays, and primitive types
- Optimized data loading to prevent duplicate API requests through tree/panel synchronization
- Topic integration into the entity tree navigation with auto-expansion on selection
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/types.ts | Extended type definitions for topic schemas, type info, and metadata status |
| src/lib/store.ts | Added optimization logic to prevent duplicate API calls and synchronize tree with panel data |
| src/lib/sovd-api.ts | Extended API client to support topic-level navigation and increased timeout to 10s |
| src/lib/schema-utils.ts | New utility functions for schema default value generation and deep object merging |
| src/components/TopicPublishForm.tsx | New component providing form/JSON dual-view publishing interface |
| src/components/SchemaFormField.tsx | New component implementing recursive schema-based form field rendering |
| src/components/EntityTreeNode.tsx | Added MessageSquare icon for topic nodes |
| src/components/EntityDetailPanel.tsx | Refactored to use TopicPublishForm and support topic-level detail view |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add search bar to EntityTreeSidebar with recursive filtering - Make topic cards clickable in component detail panel - Add selectTopicDirect action to navigate without extra API calls - Fix float/double input fields to allow decimal values (step=0.001) - Widen numeric inputs for better UX with decimal numbers
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 12 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 14 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
215d8dc to
5b69b71
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 10 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
8fb8893 to
d5beb75
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
164ad86 to
f3c8bc9
Compare
Major UI improvements for topic viewing and management: - Add TopicDiagnosticsPanel component with: - Connection status display (active/waiting/no publishers) - QoS profile viewing for all publishers and subscribers - QoS compatibility warnings (reliability/durability mismatches) - Last received value viewer with JSON/Form toggle - Integrated publish form with "Copy from Last" functionality - Add JsonFormViewer component for readonly/editable data display - Improve topic tree display: - Show pub/sub direction indicators (↑ green, ↓ blue) - Pre-populate topic children from topicsInfo (no extra API calls) - Add refreshSelectedEntity() for manual refresh - Change URL encoding from __ to standard %2F (percent-encoding): - sovd-api.ts: encodeURIComponent/decodeURIComponent - store.ts: encodeURIComponent for topic paths - EntityDetailPanel.tsx: encodeURIComponent for topic links - Add types for QoS profiles, topic endpoints, and topicsInfo
f3c8bc9 to
8b0fb69
Compare
Pull Request
Summary
Implement dynamic form generation for ROS 2 message publishing based on topic schemas, with synchronized tree and panel navigation.
Features:
Issue
Link the related issue (required):
Type
Testing
Manual testsing with demo
Checklist
npm run lint)npm run build)