Add missing views #21

bburda · 2026-01-26T18:14:54Z

Pull Request

Summary

This pull request adds comprehensive support for new SOVD entity types (Apps, Functions,) and significantly refactors the entity tree hierarchy to better align with SOVD specification. The changes implement the requirements from issue #14, introducing new view panels, improving the UI/UX with theme support and search functionality, and restructuring the data model from a flat component-centric structure to a hierarchical server → area → component → app model.

Changes:

Introduced new entity type support (Areas, Subareas, Components, Subcomponents, Apps, Functions) with dedicated panel components
Refactored entity tree hierarchy to use a server root node containing areas, replacing the previous flat structure
Added Faults Dashboard with real-time polling, filtering, grouping, and clear actions
Implemented search functionality (Ctrl+K), theme toggle, and mobile-responsive sidebar
Updated API client with new endpoints for subareas, subcomponents, and function resources

Issue

Link the related issue (required):

closes Add missing views and new entity view #14

Type

Bug fix
New feature
Breaking change
Documentation only

Testing

How was this tested / how should reviewers verify it?
Mostly manual testing with a sensors demo.

Checklist

Breaking changes are clearly described (and announced in docs / changelog if needed)
Linting passes (npm run lint)
Build succeeds (npm run build)
Docs were updated if behavior or public API changed

- Add AreasPanel for area entity details with related components - Add AppsPanel for ROS 2 node details with tabs for data/operations/configs/faults - Add FunctionsPanel for capability grouping with aggregated resources - Refactor EntityTreeNode with distinct icons and colors per entity type - Add breadcrumb navigation in EntityDetailPanel - Update EntityDetailPanel to route to appropriate panels by entity type Entity types now have visual distinction: - Area: cyan (Layers icon) - Component: indigo (Box icon) - App: emerald (Cpu icon) - Function: violet (GitBranch icon) - Resources: blue/amber/purple/red for data/ops/configs/faults

- Add EntityTreeSkeleton for tree loading state - Add EntityDetailSkeleton for detail panel loading states - Add ThemeToggle component with light/dark/system modes - Add shadcn skeleton, switch, dropdown-menu components - Update EntityTreeSidebar to use skeleton and theme toggle - Update EntityDetailPanel to use skeleton loading - Add refresh button spinner animation

- Display server connection status, name, and version - Show SOVD specification version - List supported features as badges - Show API entry points when available - Replace empty state with server info when connected but nothing selected - Add loading skeleton and error states

- Add SearchCommand component with command palette UI - Support quick navigation to any entity by name, ID, or path - Group search results by entity type (Areas, Components, Apps, Functions) - Add useSearchShortcut hook for Ctrl+K / Cmd+K binding - Update sidebar placeholder with keyboard hint

- Create FaultsDashboard component with polling-based updates - Add severity and status filtering with dropdown menus - Support grouping faults by entity (component/app) - Add FaultsCountBadge for sidebar showing critical/error count - Add quick access button in sidebar footer - Support auto-refresh with toggle control - Clear fault actions with loading state

- Create ErrorBoundary class component with retry option - Show error details in collapsible section - Wrap main panel with error boundary for isolated error handling - Add ErrorBoundaryWrapper for convenient functional component usage - Report errors via toast notification

- Add role='tree' and aria-label to EntityTreeSidebar container - Add role='group' to entity list container - Add role='treeitem', aria-expanded, aria-selected to EntityTreeNode - Add keyboard navigation (Enter, Space, ArrowLeft/Right) - Add aria-label to search input and clear button - Add focus ring styling for keyboard users

- Add collapsible sidebar with hamburger menu toggle on mobile (<768px) - Add overlay backdrop when sidebar is open on mobile - Auto-close sidebar when selecting entity or navigating on mobile - Add responsive padding to sidebar header for menu button - Use Tailwind md: breakpoint for tablet/desktop layout

…lders - Remove resources folder from tree structure completely - Area → Component → App hierarchy is now flat (no virtual folders) - Resources (data, operations, configurations, faults) displayed in tabbed panels - AreasPanel: Overview + Components tabs (tip explains resources are at component level) - ComponentPanel: Data, Operations, Config, Faults tabs - AppsPanel: Overview, Data, Operations, Config, Faults tabs - Simplified EntityTreeNode icon/color functions - Fixed TypeScript JSX.Element namespace errors

- Create server root node with areas as children - Update VersionInfo type to match actual /version-info API format (sovd_info array with base_uri, version, vendor_info) - Add ServerPanel component showing version information - Handle server selection in detail panel - Fix API path conversion: strip /server prefix from tree paths - Add server color styling in EntityTreeNode

bburda · 2026-01-26T20:03:08Z

@mfaferek93 This is still not ready for review, but I want to use Copilot for getting some feedback.

Copilot

Pull request overview

This pull request adds comprehensive support for new SOVD entity types (Apps, Functions, Faults) and significantly refactors the entity tree hierarchy to better align with SOVD specification. The changes implement the requirements from issue #14, introducing new view panels, improving the UI/UX with theme support and search functionality, and restructuring the data model from a flat component-centric structure to a hierarchical server → area → component → app model.

Changes:

Introduced new entity type support (Areas, Subareas, Components, Subcomponents, Apps, Functions) with dedicated panel components
Refactored entity tree hierarchy to use a server root node containing areas, replacing the previous flat structure
Added Faults Dashboard with real-time polling, filtering, grouping, and clear actions
Implemented search functionality (Ctrl+K), theme toggle, and mobile-responsive sidebar
Updated API client with new endpoints for subareas, subcomponents, and function resources

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
src/lib/types.ts	Refactored VirtualFolderData from componentId to entityId, restructured VersionInfo for SOVD spec compliance
src/lib/store.ts	Major refactoring: removed virtual folder creation in tree, added server root node, implemented hierarchical loading for areas/subareas/components/subcomponents
src/lib/sovd-api.ts	Added listSubareas() and listSubcomponents() methods for hierarchy navigation
src/hooks/useSearchShortcut.ts	New hook for Ctrl+K/Cmd+K keyboard shortcut
src/components/ui/*	Added Switch, Skeleton, DropdownMenu, Command components from shadcn/ui
src/components/ThemeToggle.tsx	New component for light/dark/system theme switching
src/components/SearchCommand.tsx	New command palette for entity search (Ctrl+K)
src/components/ServerInfoPanel.tsx	New panel displaying SOVD server capabilities and version info
src/components/FunctionsPanel.tsx	New panel for function entities with aggregated data/operations from host apps
src/components/FaultsDashboard.tsx	Comprehensive faults dashboard with filtering, grouping, real-time polling
src/components/AreasPanel.tsx	New panel for area entities showing components and subareas
src/components/AppsPanel.tsx	New panel for app (ROS 2 node) entities with tabbed resource views
src/components/ErrorBoundary.tsx	React error boundary for graceful error handling
src/components/EntityTreeSkeleton.tsx	Loading skeleton for entity tree
src/components/EntityDetailSkeleton.tsx	Loading skeleton for detail panels
src/components/EntityTreeSidebar.tsx	Enhanced with search, refresh animation, faults dashboard button, mobile support
src/components/EntityTreeNode.tsx	Updated icons and colors for new entity types, improved accessibility
src/components/EntityDetailPanel.tsx	Major refactoring: added breadcrumb navigation, specialized panels for each entity type
src/App.tsx	Added mobile sidebar, error boundary, search command, view mode switching
package.json	Added dependencies: @radix-ui/react-dropdown-menu, @radix-ui/react-switch, cmdk

src/lib/store.ts

src/components/SearchCommand.tsx

src/components/EntityDetailPanel.tsx

src/lib/types.ts

src/components/AreasPanel.tsx

src/components/FaultsDashboard.tsx

src/components/SearchCommand.tsx

src/components/EntityDetailPanel.tsx

src/components/FunctionsPanel.tsx

Copilot

Pull request overview

Copilot reviewed 23 out of 24 changed files in this pull request and generated 3 comments.

src/components/AreasPanel.tsx

src/lib/store.ts

src/components/EntityDetailPanel.tsx

- Make hasChildren dynamic based on metadata/children count - Add debouncing and memoization to SearchCommand - Add entity type icons to breadcrumb navigation - Remove misleading legacy comment from topicsInfo (field is actively used) - Add backward compatibility for componentId in type guard - Log warning on version info fetch failure - Add visibility-based polling to FaultsCountBadge - Fix namespace parsing with filter(Boolean) - Add safety counter to while loop - Add Escape key handler to mobile sidebar overlay - Use recursive findAreaNode for nested areas - Fix clearFault to use fault.entity_type - Remove redundant virtual-folder check - Consolidate ServerPanel into ServerInfoPanel - Add optional chaining for FunctionsPanel API calls - Fix home button to navigate to /server

Resources (data, operations, configurations, faults) are now shown in entity detail panel tabs instead of tree virtual folders. Removed: - VirtualFolderData interface and isVirtualFolderData type guard from types.ts - Virtual folder handling in loadChildren and selectEntity from store.ts - VirtualFolderContent component and folderType handling from EntityDetailPanel.tsx - Unused DataFolderPanel import

Add toggle between two tree views in the sidebar: - Logical View: Areas → Components → Apps (default) - Functional View: Functions → Apps (hosts) Changes: - Add treeViewMode state and setTreeViewMode action to store - Update loadRootEntities to fetch either areas or functions - Add loadChildren support for function nodes (loads hosts) - Add selectEntity handler for function type - Add view mode toggle buttons in EntityTreeSidebar - Fix FunctionsPanel to handle host objects from API - Add defensive null checks in EntityTreeNode

… all entity panels - Create EntityResourceTabs reusable component for resource display - Add Resources tab to AreasPanel with aggregated entity resources - Add Configurations and Faults tabs to FunctionsPanel - Update sovd-api.ts with SovdResourceEntityType and getEntityData method - Add red badge styling for faults when count > 0

…server view

Replace simple readonly parameter list with full ConfigurationPanel component that provides: - Inline editing by clicking on parameter values - Save/cancel with Enter/Escape keys - Boolean toggle buttons - Reset to default per parameter - Reset All button for bulk restore - Proper type validation and parsing

…upport

bburda added 10 commits January 26, 2026 17:30

bburda marked this pull request as ready for review January 26, 2026 20:02

Copilot AI review requested due to automatic review settings January 26, 2026 20:02

Copilot started reviewing on behalf of bburda January 26, 2026 20:03 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

bburda requested a review from Copilot January 26, 2026 20:17

Copilot started reviewing on behalf of bburda January 26, 2026 20:18 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

src/components/AreasPanel.tsx Outdated Show resolved Hide resolved

src/lib/store.ts Outdated Show resolved Hide resolved

src/components/EntityDetailPanel.tsx Outdated Show resolved Hide resolved

bburda marked this pull request as draft January 26, 2026 20:58

bburda added 2 commits January 27, 2026 08:44

bburda self-assigned this Jan 27, 2026

bburda added the enhancement New feature or request label Jan 27, 2026

bburda added 5 commits January 27, 2026 20:09

fix(detail-panel): hide redundant 'No detailed information' card for …

b3eb69b

…server view

fix(apps-panel): use FaultsPanel for detailed fault view with clear s…

a5d3bb4

…upport

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add missing views #21

Add missing views #21

Uh oh!

bburda commented Jan 26, 2026 •

edited

Loading

Uh oh!

bburda commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add missing views #21

Are you sure you want to change the base?

Add missing views #21

Uh oh!

Conversation

bburda commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

Summary

Issue

Type

Testing

Checklist

Uh oh!

bburda commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bburda commented Jan 26, 2026 •

edited

Loading