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
| Section | Description | Audience |
|---|---|---|
| Control Plane UI | Tenant management, user administration, billing, infrastructure, and platform configuration | Platform administrators, tenant managers |
| Ops Workbench | Service health, performance metrics, alerts, incidents, deployments, and cost tracking | SRE engineers, DevOps engineers |
| Onboarding Wizard | Guided setup for new tenants: persona selection, data source connection, first query | New users, tenant administrators |
| Cross-Workbench Navigation | Workbench switcher, global search, entity handoff, deep linking, and routing patterns | All users, frontend developers |
| Keyboard Shortcuts | Complete shortcut reference for navigation, editing, and workbench-specific actions | Power users, all users |
| Export and Embedding | Dashboard export, chart embedding, scheduled reports, and iframe integration | Data analysts, report consumers |
Interface Portfolio
The platform's user experience spans eight interfaces (six covered in this chapter, two in the overview):
| Interface | Port | Primary Audience | Focus |
|---|---|---|---|
| Control Plane UI | 3004 | Platform administrators | Tenant management, users, billing, configuration |
| Data Plane UI | 3005 | Tenant operators | Tenant-scoped data operations |
| Ops Workbench | 3006 | SRE, DevOps engineers | Health monitoring, incidents, deployments, costs |
| Onboarding UI | 3007 | New tenants, first-time users | Guided 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:
| Element | Description |
|---|---|
| Top navigation bar | Logo, global search (Cmd+K), environment indicator, CI status, notifications, user menu |
| Sidebar | Collapsible left sidebar with context-specific menu items |
| Workbench switcher | Grid overlay (Cmd+Shift+W) for switching between workbenches |
| Tenant selector | Dropdown for administrators managing multiple tenants |
| Breadcrumb trail | Hierarchical 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.tsxThe 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:
-
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.
-
Consistent navigation patterns. Every interface uses the same navigation shell, shortcut keys, and interaction patterns. Learning one workbench teaches the patterns for all others.
-
Context preservation across navigation. When switching between workbenches, the selected entity, active filters, and catalog context are preserved through the cross-workbench Zustand store.
-
Offline resilience. The offline detection system (
useOfflineDetection) shows connection status, queues operations during disconnections, and resynchronizes when connectivity returns. -
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.