Studio
Overview
Cortex Studio is the administrative interface for the Cortex analytics platform. It provides a centralized environment where administrators and data teams can configure workspaces, manage data sources, build semantic metrics, and create analytics dashboards.
The main Studio interface showing workspace management
Purpose & Philosophy
Studio is designed as an admin-focused configuration tool rather than an end-user analytics interface. It empowers data teams to:
- Set up and manage organizational workspaces
- Configure data source connections
- Define semantic metrics and data models
- Build foundational dashboards
- Manage user access and permissions
Studio's role in the Cortex ecosystem
Core Capabilities
Workspace Management
Configure organizational workspaces with isolated environments for development, staging, and production analytics.
Workspace configuration and environment management
Data Source Integration
Connect to various data sources including databases, data warehouses, and APIs with secure credential management.
Data source connection interface
Semantic Layer Configuration
Build and manage the semantic layer through intuitive builders for metrics, dimensions, measures, and relationships.
Visual metric configuration interface
Dashboard Creation
Create foundational dashboards with drag-and-drop widgets, chart configurations, and real-time preview capabilities.
Dashboard creation with widget management
Technology Stack
Studio is built with modern web technologies optimized for administrative workflows:
| Component | Technology | Purpose |
|---|---|---|
| Framework | Nuxt.js 4 | Full-stack Vue.js framework |
| UI Components | Shadcn/ui + Reka UI | Modern, accessible component library |
| Charts | ECharts | Advanced data visualization |
| Form Handling | VeeValidate + Zod | Form validation and schema handling |
| Styling | Tailwind CSS | Utility-first CSS framework |
| Icons | Lucide Vue | Consistent iconography |
| State Management | Vue Composition API | Reactive state with composables |
Key Features
Multi-Tenancy Support
- Workspace isolation and environment management
- Role-based access control
- Tenant-specific configurations
Real-Time Preview
- Live metric execution and testing
- Dashboard preview with sample data
- Query performance monitoring
Visual Builders
- Drag-and-drop metric configuration
- Interactive chart type selection
- Field mapping with auto-detection
Developer Experience
- TypeScript throughout the codebase
- Component-based architecture
- Hot module replacement for rapid development
For Developers
While Studio provides a comprehensive admin interface, developers are encouraged to build custom UIs tailored to their specific use cases. Studio serves as a reference implementation and provides:
- Component Examples: Reusable Vue components for common analytics patterns
- API Integration Patterns: Composables demonstrating API usage
- Chart Implementations: ECharts wrappers for various visualization types
- Form Handling: Validated forms for metric and dashboard configuration
How developers can leverage Studio components
Custom UI Development
Studio's modular architecture makes it ideal for extracting components and patterns for custom implementations. Key areas include:
- Chart Components: Ready-to-use visualization components
- Form Builders: Validated form components for metric configuration
- API Composables: Reactive data fetching and state management
- UI Patterns: Consistent design patterns and interactions
Getting Started
To explore Studio's capabilities:
- Set up a Workspace - Configure your organizational workspace and environments
- Connect Data Sources - Establish connections to your data infrastructure
- Build Metrics - Use the semantic builders to define analytical metrics
- Create Dashboards - Compose dashboards with charts and visualizations
- Test & Deploy - Preview configurations and deploy to production
Typical Studio configuration workflow
Next Steps
- Developer Guide - Learn how to build custom UIs using Studio components
- API Integration - Understand the API endpoints used by Studio
- Semantic Layer - Deep dive into semantic configuration options
Studio represents the administrative face of Cortex, providing the tools needed to configure and manage the analytical foundation that powers custom applications and embedded analytics.