Frontend

Studio

Overview of the Cortex Studio - an admin interface for configuring semantic metrics, data models, and dashboards.

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:

ComponentTechnologyPurpose
FrameworkNuxt.js 4Full-stack Vue.js framework
UI ComponentsShadcn/ui + Reka UIModern, accessible component library
ChartsEChartsAdvanced data visualization
Form HandlingVeeValidate + ZodForm validation and schema handling
StylingTailwind CSSUtility-first CSS framework
IconsLucide VueConsistent iconography
State ManagementVue Composition APIReactive 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:

  1. Set up a Workspace - Configure your organizational workspace and environments
  2. Connect Data Sources - Establish connections to your data infrastructure
  3. Build Metrics - Use the semantic builders to define analytical metrics
  4. Create Dashboards - Compose dashboards with charts and visualizations
  5. Test & Deploy - Preview configurations and deploy to production

Typical Studio configuration workflow

Next Steps

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.