UI Architecture

This content is currently WIP. Diagrams, content, and structure are subject to change.

This section explores the UI architecture of the C3 Agentic AI Platform. The architecture provides a structured approach to building user interfaces that integrate seamlessly with the platform’s data model and business logic.

UI Architecture Overview

The C3 Agentic AI Platform’s UI architecture follows a layered approach that separates concerns and promotes reusability:

UI components

Reusable visual elements that follow design patterns and can be composed to create complex interfaces.

Data binding

Mechanisms for connecting UI components to data from the Type System, ensuring interfaces stay in sync with the underlying data.

State management

Tools for managing application state, handling user interactions, and coordinating between components.

Layout system

Frameworks for organizing components on the page, creating responsive designs, and managing navigation.

This architecture enables a clear separation of concerns, with each layer handling a specific aspect of the UI. This separation makes it easier to develop, test, and maintain your application’s user interface.

Component-Based Architecture

The C3 Agentic AI Platform follows a component-based architecture for UI development. This approach allows you to build complex interfaces from reusable, self-contained components.

Component Hierarchy

Components are organized in a hierarchical structure:

Application
├── Layout
│   ├── Header
│   ├── Sidebar
│   ├── Main Content
│   │   ├── Dashboard
│   │   │   ├── Card (Status)
│   │   │   ├── Card (Metrics)
│   │   │   └── Card (Chart)
│   │   └── ...
│   └── Footer
└── ...

This hierarchy provides several benefits:

• Encapsulation: Components manage their own state and behavior
• Composition: Complex interfaces are built by composing simpler components
• Reusability: Components can be reused across different parts of the application
• Maintainability: Changes to a component are isolated to that component

Component Types

The C3 Agentic AI Platform includes several types of components, each with a specific purpose:

Presentational components

Focus on how things look, rendering UI elements based on the props they receive.

Container components

Focus on how things work, managing data fetching, state, and business logic.

Higher-order components

Enhance other components by adding functionality or modifying behavior.

Composite components

Combine multiple components to create more complex UI elements.

Data Flow Architecture

The C3 Agentic AI Platform’s UI architecture follows a unidirectional data flow pattern, which makes application state changes predictable and easier to understand.

Unidirectional Data Flow

Data flows in one direction through the application:

1. Actions describe what happened (example: “user selected a turbine”)
2. Store updates the application state based on the action
3. View renders based on the current state
4. User Events trigger new actions, continuing the cycle

This pattern provides several benefits:

• Predictability: State changes follow a clear path
• Debugging: Easier to track down issues
• Testability: Components can be tested in isolation
• Maintainability: Clear separation of concerns

Integration with the Type System

The C3 Agentic AI Platform’s UI architecture integrates seamlessly with the Type System, allowing you to build UIs that reflect your application’s data model.

Data Binding

UI components can bind directly to data from the Type System:

• Declarative data fetching: Specify what data you need, not how to get it
• Automatic updates: UI reflects changes in the underlying data
• Relationship traversal: Access related entities through the Type System
• Type-driven forms: Generate forms based on Type definitions
• Validation: Leverage Type constraints for form validation

Performance Optimization

The C3 Agentic AI Platform’s UI architecture includes several features to optimize performance.

Key Performance Techniques

Lazy loading

Load components on demand to reduce initial load time and improve application startup performance.

Virtualization

Render only visible items in lists and tables to efficiently handle large datasets.

Memoization

Cache results of expensive operations to avoid unnecessary recalculations and re-renders.

Code splitting

Split application code into smaller chunks to improve load time and enable more efficient caching.

Architectural Patterns

The C3 Agentic AI Platform supports several architectural patterns that help you build well-structured applications.

Master-Detail Pattern

The master-detail pattern shows a list of items (master) and details for the selected item (detail):

Dashboard Pattern

The dashboard pattern displays multiple visualizations and metrics in a single view:

Form Wizard Pattern

The form wizard pattern breaks complex forms into a series of steps:

Practical Application: Asset Monitoring

Let’s explore how the UI architecture applies to an asset monitoring application:

Component Hierarchy

The asset monitoring application might have the following component hierarchy:

AssetMonitoringApp
├── AppHeader
├── AppSidebar
│   └── AssetList
├── MainContent
│   ├── Dashboard
│   │   ├── StatusSummary
│   │   ├── PerformanceMetrics
│   │   └── AlertsList
│   ├── AssetDetails
│   │   ├── AssetInfo
│   │   ├── AssetPerformance
│   │   ├── AssetSensors
│   │   └── AssetMaintenance
│   └── ...
└── AppFooter

Data Flow

The data flow in the application follows the unidirectional pattern:

1. User selects an asset from the AssetList
2. This triggers an action to update the selected asset in the application state
3. The AssetDetails component receives the updated state and fetches the asset data
4. The asset data is displayed in the AssetDetails component and its children

Type System Integration

The application integrates with the Type System to fetch and update asset data, ensuring that the UI always reflects the current state of the assets.

Related Concepts

UI Component Library

Explore the pre-built components available in the platform.

Data Binding and State Management

Discover how to connect UI components to data and manage state.

UI Development Workflow

Learn about the workflow for developing UI applications.