[#14] Add support for missing entities and faults. #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

getEntityData was returning raw API response without mapping id/name fields to topic property. EntityResourceTabs expects topic field for display. - Add DataItem interface for API response structure - Transform to ComponentTopic with topic from name/x-medkit - Extract type info from x-medkit extension

- Add generic getResources() method for unified data/operations/configurations/faults fetching - Add transformDataResponse() with direction fields (isPublisher, isSubscriber, uniqueKey) - Refactor getFunctionData(), getFunctionOperations(), getAppData() to use getResources() - Add publishToEntityData() for generic publishing to any entity type - Export SovdResourceEntityType from types.ts fix(ui): resolve Data panel display and publishing issues - Fix Component data showing 'No data available' despite correct count - Fix Function data items not being clickable - Fix topic publishing using wrong componentId (now extracts parent entity from path) - Add entityType support to DataPanel and TopicPublishForm for correct API endpoints - Add DataPanel component for single topic diagnostic view - Remove TopicDiagnosticsPanel (functionality merged into DataPanel) refactor(components): improve data flow in EntityDetailPanel - Add topicsData state to store fetched data for display - Update fetchResourceCounts to populate topicsData - Pass topicsData to DataTabContent as primary data source - Extract parent component ID from path for topic views

- Rename componentId prop to entityId in all resource panels: - OperationsPanel, DataPanel, ConfigurationPanel, FaultsPanel - ActionStatusPanel, TopicPublishForm - Rename componentOperations to entityOperations for consistency - Update all panel usages in EntityDetailPanel, AppsPanel, FunctionsPanel, EntityResourceTabs - Fix operations API transformation to extract kind/type from x-medkit.ros2 - Add transformOperationsResponse() to properly parse SOVD API response This aligns naming with the universal entity model (areas, components, apps, functions) instead of component-specific terminology.

- EntityResourceTabs: replace inline faults card with FaultsPanel component - FunctionsPanel: replace inline faults card with FaultsPanel component - FaultsDashboard: add mapFaultEntityTypeToResourceType helper for proper API routing - FaultsDashboard: use store's clearFault for consistent error handling - sovd-api: fix transformFault to convert node names to SOVD app IDs (diagnostic_bridge → diagnostic-bridge) and set entity_type to 'app' This ensures consistent fault UI with clear buttons across areas, components, apps, and functions, and fixes 404 errors when clearing faults from dashboard.

Copilot

Pull request overview

Copilot reviewed 33 out of 34 changed files in this pull request and generated 13 comments.

src/lib/types.ts

src/lib/store.ts

src/components/FaultsDashboard.tsx

src/lib/types.ts

src/lib/store.ts

src/components/EntityDetailPanel.tsx

src/App.tsx

src/components/SearchCommand.tsx

src/lib/store.ts

src/components/EntityResourceTabs.tsx

src/components/EntityTreeNode.tsx

src/components/ServerInfoPanel.tsx

src/components/FaultsDashboard.tsx

T1. **EntityTreeNode.tsx**: Remove unused `_data` parameter - Removed unused parameter from getEntityIcon() and getEntityColor() - Simplified function signatures from (type, _data?, isExpanded?) to (type, isExpanded?) 2. **ServerInfoPanel.tsx**: Extract repeated sovd_info access - Added `const sovdInfo = versionInfo?.sovd_info?.[0]` - Eliminated 6 duplicate accesses to versionInfo?.sovd_info?.[0] 3. **EntityResourceTabs.tsx**: Implement lazy loading per tab - Resources now load only when their tab is first selected - Added LoadedResources interface to track loaded tabs - Replaced eager Promise.all() with lazy loadTabResources() callback - Reduces unnecessary API calls when only viewing specific tabs 4. **FaultsDashboard.tsx**: Share faults polling state - Removed duplicate polling between FaultsDashboard and FaultsCountBadge - Both components now use shared faults state from useAppStore - Eliminated redundant API calls and local state management 5. **store.ts**: Refactor complex selectEntity function - Extracted 9 type-specific selection handlers: * handleTopicSelection, handleServerSelection * handleComponentSelection, handleAreaSelection * handleFunctionSelection, handleAppSelection * handleFaultSelection, handleParameterSelection * handleOperationSelection - Added fetchEntityFromApi() fallback helper - Reduced selectEntity from ~350 lines with 12+ conditional branches to ~90 lines - Improved maintainability and testability

1. **SearchCommand.tsx**: Add TODO comment about search limitation - Document that search only indexes expanded tree nodes - Unexpanded children (e.g., apps under components) not searchable - Suggest API-based search as future improvement 2. **.github/copilot-instructions.md**: Update to reflect current architecture - Add missing components: FaultsDashboard, FaultsPanel, ServerInfoPanel, EntityResourceTabs, EntityTreeNode, SearchCommand - Document SOVD entity hierarchy (Area/Subarea/Component/Subcomponent/App/Function) - Add Entity Selection Handlers section describing extracted handlers pattern - Update Zustand example (useAppStore with shared faults state) - Expand API reference with /functions, /faults endpoints - Add conventions: lazy loading per tab, useShallow for subscriptions - Note search limitation in Important Notes section - Remove outdated references (useStore, integration tests directory)

1. **App.tsx**: Fix mobile sidebar overlay accessibility - Replace div with semantic button element for overlay - Remove redundant role and tabIndex attributes (implicit in button) - Add cursor-default to maintain visual consistency - Improves keyboard navigation and screen reader experience 2. **EntityDetailPanel.tsx**: Remove unnecessary key props - Remove key={entityId} from OperationsPanel, ConfigurationPanel, FaultsPanel - Previous behavior caused full component remount on entity change - This lost in-progress form state and execution history - Components now maintain state across entity selections when appropriate - More granular state management without losing user context

1. **FaultsDashboard.tsx**: Add warning for unexpected entity types - Explicitly handle 'component'/'components' case before fallback - Log console.warn when unknown entity type is encountered - Helps identify bugs where unexpected entity types are passed - Maintains existing default behavior while improving debuggability 2. **store.ts**: Add validation for malformed function data - Validate fn.id exists and is string or number before mapping - Warn when both fn.name and fn.id are missing - Prevents data quality issues from being silently masked - Aids debugging when API returns unexpected function data structure - Preserves existing fallback behavior ('Unknown', String(fn.id))

1. **store.ts - loadRootEntities**: Enhance version info error handling - Add more informative warning message when version info fetch fails - Explain impact to users: "Server will be shown with generic name" - Clarify that version info may be incomplete but UI remains functional - Maintains existing fallback behavior with better user communication 2. **store.ts - toTreeNode**: Add documentation for hasChildren logic - Clarify relationship between hasChildren and children: undefined - hasChildren controls whether expand button is shown - children: undefined means "not loaded yet" (lazy loading) - Document all three hasChildren determination paths: * Explicit metadata from API (preferred) * Children array length check (if provided) * Type-based heuristic fallback (areas/components have children, apps don't) - Prevents confusion about apparent inconsistency between flags

- 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

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 7 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

bburda added 2 commits January 28, 2026 20:21

bburda marked this pull request as ready for review January 28, 2026 20:44

bburda requested a review from Copilot January 28, 2026 20:45

Copilot started reviewing on behalf of bburda January 28, 2026 20:46 View session

bburda changed the title ~~Add missing views~~ [#14] Add support for missing entities and faults. Jan 28, 2026

bburda requested a review from mfaferek93 January 28, 2026 20:46

Copilot AI reviewed Jan 28, 2026

View reviewed changes

mfaferek93 reviewed Jan 28, 2026

View reviewed changes

bburda added 5 commits January 29, 2026 06:41

mfaferek93 self-requested a review January 29, 2026 07:04

mfaferek93 approved these changes Jan 29, 2026

View reviewed changes

bburda merged commit 2a8ef10 into main Jan 29, 2026
3 checks passed

bburda deleted the feat/add-missing-views branch January 29, 2026 07:14

[#14] Add support for missing entities and faults. #21

[#14] Add support for missing entities and faults. #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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bburda commented Jan 26, 2026 •

edited

Loading