Initial SOVD Web UI Setup #2
Merged
Conversation
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
This change introduces a new EntityTree model. It consumes all endpoints that are available in ros2_medkit right now. It also improve basic UI workflows and add Dockerfile.
There was a problem hiding this comment.
Pull request overview
This PR establishes the initial SOVD Web UI setup, providing a React-based frontend to consume the ros2_medkit REST API. It introduces a functional web application with entity tree browsing, server connection management, and basic component architecture using modern React patterns with TypeScript, Vite, and TailwindCSS.
Key Changes
- React application scaffolding with Vite build system and TypeScript
- State management using Zustand with persistence for server connection details
- SOVD API client implementation for areas, components, and topic data
- Entity tree navigation UI with collapsible hierarchy and detail panels
Reviewed changes
Copilot reviewed 39 out of 43 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Vite configuration with React and TailwindCSS plugins |
| tsconfig.*.json | TypeScript configuration for app and node builds |
| package.json | Dependencies for React 19, Zustand, Radix UI, and TailwindCSS |
| src/main.tsx | Application entry point with React root rendering |
| src/App.tsx | Main app component with layout and auto-connect logic |
| src/lib/types.ts | TypeScript interfaces for SOVD entities and state |
| src/lib/sovd-api.ts | API client for SOVD endpoints (health, areas, components) |
| src/lib/store.ts | Zustand store for connection and entity tree state |
| src/components/* | UI components (Button, Card, Dialog, Input, etc.) |
| src/components/EntityTreeSidebar.tsx | Entity tree navigation sidebar |
| src/components/EntityTreeNode.tsx | Recursive tree node component |
| src/components/EntityDetailPanel.tsx | Entity details and topic viewer |
| src/components/ServerConnectionDialog.tsx | Server connection dialog |
| src/components/EmptyState.tsx | Empty state placeholders |
| nginx.conf | Nginx configuration for SPA routing |
| .devcontainer/Dockerfile | DevContainer setup with Ubuntu base |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- remove unnecesarry "use client" - simplify status indicator logic
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 39 out of 43 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Implement comprehensive error handling with toast notifications and add timeout protection for all API requests to prevent infinite loading states. Toast notification system (react-toastify): - Auto-connect failure now shows toast error and opens connection dialog - Publish success/error messages replaced with toast notifications - Entity loading errors display toast instead of console-only logging - Removed inline error/success state in EntityDetailPanel - Consistent UX for all error scenarios across the application Connection timeouts: - Added fetchWithTimeout wrapper with AbortController - Health check (ping): 3 second timeout - Entity loading: 5 second timeout (default) - Topic publish: 10 second timeout - Clear error message when server doesn't respond in time - Prevents infinite "Connecting..." state for unreachable servers Code cleanup: - Removed unused publishErrors and publishSuccess state variables - Removed inline error/success UI components (AlertCircle, CheckCircle2) - Removed unused imports (cn utility from EntityTreeSidebar) - Simplified error handling flow with centralized toast system
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.
This change adds basic Web UI that consumes all available (so far) ros2_medkit REST API endpoints.
It adds basic folder structure and files.
It adds EntityTree components and renders them allowing to connect to SOVD Server and fetch data.
closes #1