Cross-Workbench Navigation

The MATIH platform provides seamless navigation across its eight workbench applications through a shared navigation shell, a workbench switcher overlay, global search with command palette functionality, entity handoff between workbenches, deep linking for direct access to specific resources, and cross-tab synchronization via the BroadcastChannel API. This section covers the navigation architecture, its components, and the patterns for implementing cross-workbench workflows.

Navigation Architecture

+-----------------------------------------------------------+
|  TopNavigation                                             |
|  [Logo] [Global Search (Cmd+K)] [Env] [CI] [Notif] [User]|
+-----+---------------------------------------------------------+
|     |                                                      |
| S   |  Workbench Content                                   |
| i   |  (Per-workbench routes)                              |
| d   |                                                      |
| e   |  +---WorkbenchSwitcher (Cmd+Shift+W)---+            |
| b   |  | [BI]  [Data]  [ML]  [Agentic]       |            |
| a   |  | [Control] [Ops] [Onboarding]         |            |
| r   |  +--------------------------------------+            |
|     |                                                      |
+-----+------------------------------------------------------+

Navigation Components

Component	Trigger	Purpose
`Sidebar`	Always visible	Workbench-specific menu items
`TopNavigation`	Always visible	Global actions: search, notifications, user
`GlobalSearch`	Cmd+K (Mac) / Ctrl+K (Windows)	Search across all entities and commands
`WorkbenchSwitcher`	Cmd+Shift+W / Ctrl+Shift+W	Switch between workbench applications
`TenantSelector`	Click in top bar	Switch between tenant contexts
`PersonaSwitcher`	Click in sidebar	Switch role-based view
`NotificationCenter`	Click bell icon	View and manage notifications
`UserMenu`	Click avatar	Profile, preferences, logout
`EnvironmentSwitcher`	Click environment badge	Switch between dev/staging/production

Global Search

The GlobalSearch component at frontend/shared/src/components/Navigation/GlobalSearch.tsx provides a command-palette-style search interface.

Search Interface

+-----------------------------------------------------------+
|  [Search icon] Search everything...              (Cmd+K)   |
+-----------------------------------------------------------+
|                                                            |
|  Recent:                                                   |
|  [Dashboard icon] Q4 Revenue Analysis                      |
|  [Table icon] sales.orders                                 |
|  [Query icon] Top products by category                     |
|                                                            |
|  Commands:                                                 |
|  [>] Create new dashboard                                  |
|  [>] Open query editor                                     |
|  [>] Switch to Data Workbench                              |
|                                                            |
+-----------------------------------------------------------+

Search Categories

Category	Icon	Search Scope
Dashboards	Chart icon	Dashboard names and descriptions
Tables	Grid icon	Table and view names across all schemas
Queries	SQL icon	Saved query names and contents
Pipelines	Flow icon	Pipeline names and descriptions
Models	Cube icon	ML model names and versions
Experiments	Flask icon	Experiment names
Users	Person icon	User names and emails
Commands	Chevron	Workbench actions and shortcuts

Search Behavior

Feature	Description
Fuzzy matching	Matches partial and misspelled terms
Category filtering	Type prefix to filter (e.g., `table:orders`)
Keyboard navigation	Arrow keys to navigate results, Enter to select
Recent items	Shows recently accessed items before typing
Command execution	Commands prefixed with `>` execute actions directly
Cross-workbench	Results span all workbenches; selecting an item navigates to the appropriate workbench

Recent Commands

The preferences store tracks the last 10 commands executed through global search:

// From preferencesStore.ts
commandPaletteRecentCommands: string[];  // Max 10 entries
addRecentCommand: (commandId: string) => void;
clearRecentCommands: () => void;

Workbench Switcher

The WorkbenchSwitcher at frontend/shared/src/components/WorkbenchSwitcher/index.tsx provides a grid overlay for switching between workbench applications.

Switcher Interface

+-----------------------------------------------------------+
|  Switch Workbench                          (Cmd+Shift+W)   |
+-----------------------------------------------------------+
|                                                            |
|  +------------------+  +------------------+                |
|  | [BI icon]        |  | [Data icon]      |                |
|  | BI Workbench     |  | Data Workbench   |                |
|  | Dashboards &     |  | Catalog &        |                |
|  | Analytics        |  | Engineering      |                |
|  +------------------+  +------------------+                |
|                                                            |
|  +------------------+  +------------------+                |
|  | [ML icon]        |  | [AI icon]        |                |
|  | ML Workbench     |  | Agentic          |                |
|  | Models &         |  | Workbench        |                |
|  | Experiments      |  | AI Conversations |                |
|  +------------------+  +------------------+                |
|                                                            |
|  +------------------+  +------------------+                |
|  | [Admin icon]     |  | [Ops icon]       |                |
|  | Control Plane    |  | Ops Workbench    |                |
|  | Administration   |  | Monitoring       |                |
|  +------------------+  +------------------+                |
|                                                            |
+-----------------------------------------------------------+

Workbench Routing

Each workbench runs as a separate application on its own port. Navigation between workbenches triggers a page navigation to the target URL:

Workbench	Base URL	Port
BI Workbench	`http://localhost:3000`	3000
ML Workbench	`http://localhost:3001`	3001
Data Workbench	`http://localhost:3002`	3002
Agentic Workbench	`http://localhost:3003`	3003
Control Plane UI	`http://localhost:3004`	3004
Data Plane UI	`http://localhost:3005`	3005
Ops Workbench	`http://localhost:3006`	3006
Onboarding UI	`http://localhost:3007`	3007

In production, all workbenches are served behind Kong API Gateway with path-based routing.

Entity Handoff

The cross-workbench store enables entity handoff -- selecting an entity in one workbench and using it in another.

Handoff Flow

Data Workbench                         BI Workbench
     |                                      |
  User browses schema                       |
  User selects table "sales.orders"         |
     |                                      |
  selectEntity({                            |
    id: 'sales.orders',                     |
    type: 'table',                          |
    name: 'orders',                         |
    fqn: 'production.sales.orders',         |
    metadata: { catalog: 'production',      |
                schema: 'sales',            |
                rowCount: 1200000 },        |
    sourceWorkbench: 'data',                |
    selectedAt: '2024-12-15T...'            |
  })                                        |
     |                                      |
  BroadcastChannel ------------------>      |
                                            |
                                    selectedEntity updated
                                    BI Workbench shows:
                                    "Table 'orders' from Data"
                                    [Open in Query Builder]

Navigation Requests

For more directed cross-workbench actions, the store supports explicit navigation requests:

// Request navigation from one workbench to another
requestNavigation({
  targetWorkbench: 'bi',
  action: 'openQueryBuilder',
  entityId: 'production.sales.orders',
  entityType: 'table',
  params: {
    preloadColumns: true,
    suggestQueries: true,
  },
});

The target workbench listens for navigation requests and processes them:

// In the BI Workbench
const navigationRequest = useCrossWorkbenchStore((s) => s.navigationRequest);
const clearNavigation = useCrossWorkbenchStore((s) => s.clearNavigation);
 
useEffect(() => {
  if (navigationRequest?.targetWorkbench === 'bi') {
    switch (navigationRequest.action) {
      case 'openQueryBuilder':
        router.navigate(`/query-builder?table=${navigationRequest.entityId}`);
        break;
      case 'openDashboard':
        router.navigate(`/dashboards/${navigationRequest.entityId}`);
        break;
    }
    clearNavigation();
  }
}, [navigationRequest]);

Deep Linking

Each workbench supports deep linking to specific resources via URL parameters:

Workbench	Deep Link Pattern	Example
BI	`/dashboards/:id`	`/dashboards/dash-123`
BI	`/query-builder?table=:fqn`	`/query-builder?table=sales.orders`
Data	`/catalog/:catalog/:schema/:table`	`/catalog/production/sales/orders`
Data	`/lineage/:table`	`/lineage/production.sales.orders`
ML	`/experiments/:id`	`/experiments/exp-456`
ML	`/models/:name/versions/:version`	`/models/churn_predictor/versions/3`
Agentic	`/conversations/:id`	`/conversations/conv-789`
Control	`/tenants/:slug`	`/tenants/acme-corp`
Ops	`/incidents/:id`	`/incidents/INC-2024-0042`

Sidebar Configuration

Each workbench provides its own sidebar menu configuration:

BI Workbench Sidebar

Section	Items
Home	Home page with recent dashboards
Dashboards	All dashboards, favorites, shared with me
Queries	Saved queries, recent queries, query editor
Semantic Models	Model list, model builder
Metrics	Metrics library, metric builder
AI Assistant	Chat interface

Data Workbench Sidebar

Section	Items
Catalog	Catalog browser, search, recent tables
Pipelines	Pipeline list, pipeline builder, run history
Quality	Quality dashboard, check configuration
dbt	dbt projects, models, runs
Lineage	Lineage explorer
Governance	Policies, classifications, access reviews

Tenant Selector

The TenantSelector component allows administrators to switch between tenant contexts:

// TenantSelector changes the tenant ID in the API client
const handleTenantChange = (tenantId: string) => {
  // Update API client configuration
  apiClient.updateConfig({ tenantId });
 
  // Update cross-workbench store
  setCatalogContext(null);  // Clear catalog context
 
  // Reload current page data
  window.location.reload();
};

When a tenant is changed, the API client's X-Tenant-ID header is updated, all cached data is invalidated, and the current page reloads to fetch tenant-specific data.

Key Source Files

Component	Location
Global search	`frontend/shared/src/components/Navigation/GlobalSearch.tsx`
Sidebar	`frontend/shared/src/components/Navigation/Sidebar.tsx`
Top navigation	`frontend/shared/src/components/Navigation/TopNavigation.tsx`
Workbench switcher	`frontend/shared/src/components/WorkbenchSwitcher/index.tsx`
Tenant selector	`frontend/shared/src/components/Navigation/TenantSelector.tsx`
Persona switcher	`frontend/shared/src/components/Navigation/PersonaSwitcher.tsx`
User menu	`frontend/shared/src/components/Navigation/UserMenu.tsx`
Notification center	`frontend/shared/src/components/Navigation/NotificationCenter.tsx`
Environment switcher	`frontend/shared/src/components/Navigation/EnvironmentSwitcher.tsx`
Navigation store	`frontend/shared/src/components/Navigation/store.ts`
Navigation types	`frontend/shared/src/components/Navigation/types.ts`
Cross-workbench store	`frontend/shared/src/stores/crossWorkbenchStore.ts`
Cross-workbench hook	`frontend/shared/src/hooks/useCrossWorkbench.ts`

Onboarding Wizard Keyboard Shortcuts