Cortex Logo

Cortex

Frontend

UI Components

Studio's custom component library for building analytics interfaces, built on top of Shadcn/ui and Reka UI.

Overview

Studio provides a comprehensive library of custom components specifically designed for analytics interfaces. These components are built on top of Shadcn/ui and Reka UI, providing higher-level abstractions for common analytics workflows.

Studio's custom component ecosystem for analytics interfaces

Foundation

Studio leverages proven UI libraries as its foundation:

  • Shadcn/ui - Provides atomic UI components (buttons, inputs, dialogs)
  • Reka UI - Accessible primitives and advanced components
  • Studio Components - Analytics-specific components built on this foundation

For basic UI components (buttons, inputs, forms, dialogs), refer to the Shadcn/ui documentation. Studio builds upon these primitives to create domain-specific components.

Analytics Components

Studio's custom components are organized by functional domain, providing abstractions for common analytics workflows.

Chart Components

Advanced visualization components that wrap ECharts with analytics-specific functionality.

Chart component architecture and relationships

Core Chart Components:

  • ChartSelector - Dynamic chart type selection with field mapping
  • BarChart - Bar and column chart visualizations
  • LineChart - Line and area chart displays
  • DonutChart - Pie and donut chart representations
  • Gauge - Gauge and KPI displays
  • SingleValue - Single metric value displays
  • Table - Data table with sorting and filtering

Key Features:

  • Unified API: Consistent interface across all chart types
  • Auto-detection: Automatic field type detection and mapping
  • Responsive: Adaptive layouts for different screen sizes
  • Theme Integration: Automatic light/dark theme support
  • Type Safety: Full TypeScript integration with data validation

Metric Builder Components

Sophisticated form builders for creating and configuring semantic metrics.

Metric builder component composition

Builder Components:

  • MetricSchemaBuilder - Main orchestrator for metric configuration
  • BasicInfoBuilder - Core metric information and properties
  • MeasuresBuilder - Quantitative measurement definitions
  • DimensionsBuilder - Categorical attribute configuration
  • JoinsBuilder - Table relationship specifications
  • FiltersBuilder - Data filtering condition setup
  • AggregationsBuilder - Complex aggregation definitions
  • ParametersBuilder - Runtime parameter configuration

Architecture Benefits:

  • Modular Design: Independent builders for different metric aspects
  • Shared State: Reactive state synchronization across builders
  • Real-time Validation: Immediate feedback on configuration errors
  • Preview Integration: Live preview of metric configurations

Dashboard Components

Comprehensive dashboard creation and management components.

Dashboard component hierarchy and data flow

Layout Components:

  • DashboardContainer - Main dashboard layout orchestrator
  • DashboardSection - Grouped widget areas with drag-and-drop
  • DashboardWidget - Individual widget wrapper and controls
  • ViewWidget - Dashboard view management and switching

Configuration Components:

  • WidgetEditSheet - Widget configuration interface
  • DataMappingEditor - Chart data mapping configuration
  • FieldMappingSelector - Dynamic field selection and mapping
  • PreviewChartRenderer - Real-time chart preview

Rendering Components:

  • ChartRenderer - Dynamic chart component rendering
  • WidgetRenderer - Generic widget content rendering
  • ExecutionResultViewer - Query result display and formatting

Key Features:

  • Drag & Drop: FormKit-powered widget arrangement
  • Real-time Preview: Live dashboard execution and updates
  • Grid System: Responsive grid layout for widgets
  • Multi-view Support: Multiple dashboard views with switching

Resource Management Components

Components for managing workspace resources and configurations.

Resource management component patterns

Data Source Components:

  • CreateDataSourceDialog - Data source connection setup
  • EditDataSourceDialog - Data source modification interface
  • DataSourceSelector - Data source selection and switching

Workspace Components:

  • CreateWorkspaceDialog - New workspace creation
  • EditWorkspaceDialog - Workspace configuration management
  • WorkspaceSelector - Workspace selection interface

Environment Components:

  • CreateEnvironmentDialog - Environment setup and configuration
  • EditEnvironmentDialog - Environment modification interface
  • EnvironmentSelector - Environment switching controls

Consumer Management:

  • CreateConsumerDialog - Consumer creation and setup
  • CreateConsumerGroupDialog - Consumer group management
  • AddMemberToGroupDialog - Group membership management

Utility Components

Supporting components that provide common functionality across the application.

Utility components and their applications

Display Components:

  • PropertiesDisplay - Key-value property presentation
  • KeyValuePairs - Editable key-value pair management
  • ExecutionResultTable - Formatted query result display
  • MetricQueryHistory - Query execution history tracking

Selection Components:

  • MetricSelector - Metric selection with search and filtering
  • ColumnSelector - Database column selection interface
  • ContextIdBuilder - Context identifier construction

Feedback Components:

  • LoadingSpinner - Loading state indication
  • CodeHighlight - Syntax highlighted code display
  • ThemeToggle - Light/dark theme switching

Component Architecture Patterns

Studio's components follow consistent architectural patterns that enable scalability and maintainability.

Composition Over Inheritance

How Studio components compose rather than inherit

Components are designed to be composed together rather than extended through inheritance:

  • Small, Focused Components: Each component has a single responsibility
  • Composable APIs: Components expose consistent prop and event interfaces
  • Flexible Composition: Complex interfaces built from simple components
  • Reusable Logic: Business logic extracted to composables

Reactive State Management

Reactive state flow through component hierarchies

All components integrate seamlessly with Vue's reactivity system:

  • Props Down: Data flows down through props
  • Events Up: User interactions bubble up through events
  • Reactive Updates: Components automatically update when data changes
  • Computed Properties: Derived state calculated automatically

Error Boundary Integration

Error handling patterns in Studio components

Components include comprehensive error handling:

  • Graceful Degradation: Components handle errors without breaking the interface
  • User Feedback: Clear error messages and recovery suggestions
  • Fallback States: Alternative content when components fail to load
  • Error Reporting: Automatic error tracking and reporting

Integration Patterns

How Studio components integrate with external systems and libraries.

API Integration

Component integration with API layers

Components seamlessly integrate with Cortex APIs through composables:

  • Reactive Data: Components automatically update when API data changes
  • Loading States: Built-in loading indicators during API calls
  • Error Handling: Consistent error display across all components
  • Optimistic Updates: Immediate UI feedback before API confirmation

Form Integration

Form validation and data handling patterns

Complex forms integrate VeeValidate with Zod for robust validation:

  • Schema Validation: Type-safe validation with immediate feedback
  • Field Dependencies: Cross-field validation and conditional logic
  • Auto-save: Draft saving for complex configuration forms
  • Progress Tracking: Visual indicators for multi-step forms

Chart Integration

Chart component integration with ECharts and data sources

Chart components provide sophisticated visualization capabilities:

  • Data Transformation: Automatic data formatting for different chart types
  • Interactive Features: Built-in zoom, pan, and selection capabilities
  • Export Functionality: Chart export to various formats
  • Performance Optimization: Efficient rendering for large datasets

Customization and Extension

Studio components are designed to be customizable and extensible for different use cases.

Theme Integration

Theme system integration across all components

All components respect the global theme system:

  • CSS Variables: Components use semantic color tokens
  • Dark Mode: Automatic dark mode support across all components
  • Brand Colors: Easy customization of brand-specific colors
  • Consistent Spacing: Unified spacing scale across components

Component Extension

Patterns for extending and customizing Studio components

Components can be extended and customized:

  • Prop-based Customization: Extensive prop APIs for configuration
  • Slot-based Content: Flexible content injection through slots
  • Event Customization: Rich event APIs for custom behavior
  • Style Overrides: CSS class customization for visual changes

Best Practices

Component Design

  1. Single Responsibility: Each component focuses on one specific task
  2. Consistent APIs: Similar components expose similar prop and event interfaces
  3. Accessibility First: All components include proper ARIA labels and keyboard navigation
  4. Performance Aware: Components optimize for large datasets and complex interactions
  5. Type Safety: Full TypeScript integration with strict prop validation

Integration Approach

  1. Start Simple: Begin with basic component usage before customization
  2. Leverage Composition: Build complex interfaces from simple components
  3. Use Provided Patterns: Follow established patterns for consistency
  4. Handle Errors: Implement proper error boundaries and fallback states
  5. Optimize Performance: Use lazy loading and efficient rendering patterns

Customization Strategy

  1. Theme Variables: Use CSS custom properties for consistent theming
  2. Component Variants: Extend existing components rather than creating new ones
  3. Composable Logic: Extract business logic to reusable composables
  4. Progressive Enhancement: Build core functionality first, then add enhancements
  5. Documentation: Document custom components and their usage patterns

Development Workflow

Component Discovery

Process for discovering and understanding Studio components

  1. Browse Component Structure: Explore /app/components/ directory organization
  2. Study Usage Patterns: Examine how components are used in pages
  3. Review Props and Events: Understand component APIs through TypeScript interfaces
  4. Test Integration: Create small test implementations before full integration

Integration Process

Step-by-step component integration workflow

  1. Identify Requirements: Determine which components meet your needs
  2. Extract Components: Copy relevant components to your project
  3. Adapt Dependencies: Update imports and dependencies for your environment
  4. Customize Styling: Apply your theme and brand requirements
  5. Test Thoroughly: Ensure components work correctly in your context

Next Steps

For basic UI components (buttons, inputs, dialogs), refer to the Shadcn/ui Vue documentation. Studio's value lies in its higher-level analytics components that orchestrate these primitives into powerful analytics workflows.

API Integration

Learn how Studio integrates with Cortex APIs using reactive composables and type-safe patterns.

Data Flow

Understanding how data flows through Studio's reactive architecture and component hierarchy.