MATIH Platform is in active MVP development. Documentation reflects current implementation status.
16. User Experience
Overview

Chapter 16: User Experience

This chapter covers the user-facing interfaces and experience patterns that operate alongside the core workbenches described in Chapter 15. While the BI, Data, ML, and Agentic Workbenches handle domain-specific analytical workflows, the interfaces described here manage platform administration, operational monitoring, new user onboarding, cross-workbench navigation, keyboard shortcuts, and content export and embedding. Together, these interfaces complete the MATIH user experience, ensuring that administrators can manage tenants, operators can monitor health, new users can onboard smoothly, and all users can navigate efficiently across the platform.


What You Will Learn

By the end of this chapter, you will understand:

  • The Control Plane UI for tenant management, user administration, billing, infrastructure monitoring, and platform configuration on port 3004
  • The Ops Workbench for operational monitoring, incident management, alert configuration, deployment tracking, and cost analysis on port 3006
  • The Onboarding Wizard that guides new tenants through initial setup including persona selection, data source connection, schema mapping, and first query execution on port 3007
  • Cross-workbench navigation patterns including the workbench switcher, global search, entity handoff, and deep linking
  • Keyboard shortcuts providing power-user efficiency across all workbenches
  • Export and embedding capabilities for sharing dashboards, reports, and visualizations outside the platform

Chapter Structure

SectionDescriptionAudience
Control Plane UITenant management, user administration, billing, infrastructure, and platform configurationPlatform administrators, tenant managers
Ops WorkbenchService health, performance metrics, alerts, incidents, deployments, and cost trackingSRE engineers, DevOps engineers
Onboarding WizardGuided setup for new tenants: persona selection, data source connection, first queryNew users, tenant administrators
Cross-Workbench NavigationWorkbench switcher, global search, entity handoff, deep linking, and routing patternsAll users, frontend developers
Keyboard ShortcutsComplete shortcut reference for navigation, editing, and workbench-specific actionsPower users, all users
Export and EmbeddingDashboard export, chart embedding, scheduled reports, and iframe integrationData analysts, report consumers

Interface Portfolio

The platform's user experience spans eight interfaces (six covered in this chapter, two in the overview):

InterfacePortPrimary AudienceFocus
Control Plane UI3004Platform administratorsTenant management, users, billing, configuration
Data Plane UI3005Tenant operatorsTenant-scoped data operations
Ops Workbench3006SRE, DevOps engineersHealth monitoring, incidents, deployments, costs
Onboarding UI3007New tenants, first-time usersGuided setup, data source connection, first query

These interfaces complement the domain-specific workbenches:

+-----------------------------------------------------------+
|  Platform Administration Layer                             |
|  +------------------+ +------------------+ +-----------+   |
|  | Control Plane UI | | Ops Workbench    | | Onboarding|   |
|  | (Port 3004)      | | (Port 3006)      | | (Port 3007)|  |
|  +------------------+ +------------------+ +-----------+   |
+-----------------------------------------------------------+
|  Cross-Workbench Navigation Shell                          |
|  [WorkbenchSwitcher] [GlobalSearch] [Notifications] [User] |
+-----------------------------------------------------------+
|  Domain Workbenches (Chapter 15)                           |
|  +------+ +------+ +------+ +---------+ +-----------+     |
|  |  BI  | | Data | |  ML  | | Agentic | | DataPlane |     |
|  | 3000 | | 3002 | | 3001 | |  3003   | |   3005    |     |
|  +------+ +------+ +------+ +---------+ +-----------+     |
+-----------------------------------------------------------+

Shared Navigation Shell

All interfaces share a common navigation shell provided by the shared library's Navigation components. This shell provides:

ElementDescription
Top navigation barLogo, global search (Cmd+K), environment indicator, CI status, notifications, user menu
SidebarCollapsible left sidebar with context-specific menu items
Workbench switcherGrid overlay (Cmd+Shift+W) for switching between workbenches
Tenant selectorDropdown for administrators managing multiple tenants
Breadcrumb trailHierarchical navigation path within the current workbench

The navigation shell adapts its content based on the active interface. The sidebar shows different menu items for the Control Plane UI (tenants, users, billing) than for the BI Workbench (dashboards, queries, models).


Data Plane UI

The Data Plane UI at port 3005 provides tenant-scoped data operations with a simplified interface focused on operational tasks:

frontend/data-plane-ui/src/
  components/
    common/               # Shared data plane components
    ErrorBoundary.tsx      # Error boundary
    Layout/                # Layout components
    SupportChatWidget.tsx  # Embedded support chat
  App.tsx
  main.tsx

The Data Plane UI is intentionally minimal, providing a scoped view of data operations for tenant operators who need access to data plane functionality without the full complexity of the Data Workbench.


Design Principles

The user experience across all interfaces follows these principles:

  1. Progressive disclosure. Complex features are hidden behind expandable panels, advanced tabs, and contextual actions. New users see a simple interface; power users discover depth through exploration.

  2. Consistent navigation patterns. Every interface uses the same navigation shell, shortcut keys, and interaction patterns. Learning one workbench teaches the patterns for all others.

  3. Context preservation across navigation. When switching between workbenches, the selected entity, active filters, and catalog context are preserved through the cross-workbench Zustand store.

  4. Offline resilience. The offline detection system (useOfflineDetection) shows connection status, queues operations during disconnections, and resynchronizes when connectivity returns.

  5. Accessibility first. All interfaces support keyboard navigation, screen readers, reduced motion, high contrast, configurable font scaling, and ARIA landmarks throughout.


How This Chapter Connects

The interfaces described in this chapter depend on several platform services:

  • The IAM Service (Chapter 6) provides authentication, user management, and role-based access control for the Control Plane UI
  • The Tenant Service (Chapter 7) manages tenant provisioning and lifecycle operations surfaced in the Control Plane UI
  • The Observability Stack (Chapter 19) feeds metrics, logs, and traces into the Ops Workbench dashboards
  • The AI Service (Chapter 12) powers the onboarding wizard's first query experience and the support chat widget

The shared library infrastructure from Chapter 15 -- including components, hooks, state management, and the API client -- underpins every interface described here.

Begin with the Control Plane UI section to understand the platform administration interface.