Implementation:TobikoData Sqlmesh Routes

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Application_Architecture, Routing
Last Updated	2026-02-07 20:00 GMT

Overview

The routing configuration system for the SQLMesh web UI application using React Router v7.

Description

routes.tsx defines the complete navigation structure and route mappings for the SQLMesh web application, including module-based conditional routing, lazy-loaded page components, nested route hierarchies, and 404 handling. The routing system is dynamically configured based on enabled modules (plans, files, data-catalog, errors, etc.) and uses React.lazy for code-splitting to optimize bundle size.

The file exports EnumRoutes with route path constants, a getBrowserRouter factory function that creates module-filtered route configurations, and defines route hierarchies for complex pages like Plan, Data Catalog, Lineage, and Errors that have nested model-specific sub-routes.

Usage

Import and call getBrowserRouter with the modules configuration to create the router instance for the application. The router is passed to RouterProvider in the main application entry point.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/routes.tsx

Signature

export function getBrowserRouter(
  modules: ModelModuleController,
): ReturnType<typeof createBrowserRouter>

export const EnumRoutes = {
  Home: '/',
  Editor: '/editor',
  DataCatalog: '/data-catalog',
  DataCatalogModels: '/data-catalog/models',
  Data: '/data',
  DataModels: '/data/models',
  Lineage: '/lineage',
  LineageModels: '/lineage/models',
  Tests: '/tests',
  Audits: '/audits',
  Errors: '/errors',
  Plan: '/plan',
  Models: '/models',
  NotFound: '/not-found',
} as const

export type Routes = (typeof EnumRoutes)[keyof typeof EnumRoutes]

Import

import { getBrowserRouter, EnumRoutes } from './routes'

I/O Contract

Function Inputs

Name	Type	Required	Description
modules	ModelModuleController	Yes	Module configuration determining which routes to enable

Function Outputs

Name	Type	Description
Router	ReturnType<typeof createBrowserRouter>	Configured React Router instance

Route Structure

Top-Level Routes

Path	Component	Description
/	Root	Home page (redirects to default module)
/editor	Root + Editor	Code editor page (files module)
/data-catalog	Root + Models	Data catalog with model browser (data-catalog module)
/data	Root + Models	Data viewer with model browser (data module)
/lineage	Root + Models	Lineage viewer with model browser (lineage module)
/plan	Root + Plan	Plan management page (plans module)
/tests	Root + Tests	Test execution and results (tests module)
/audits	Root + Audits	Audit execution and results (audits module)
/errors	Root + Errors	Error reporting page (errors module)
*	NotFound	404 page

Nested Routes

Data Catalog / Data / Lineage:

`/models/:modelName` - Model detail page
Welcome page for index route
404 handler for invalid model names

Plan:

`/environments/:environmentName` - Environment-specific plan content
Welcome page for index route
404 handler for invalid environments

Errors:

`/:id` - Specific error detail page
Welcome page for index route
404 handler for invalid error IDs

Usage Examples

// Application entry point (main.tsx)
import { getBrowserRouter } from './routes'
import { ModelModuleController } from '@models/module-controller'
import { RouterProvider } from 'react-router'

// Get module configuration from API
const modules = new ModelModuleController([
  Modules.plans,
  Modules.editor,
  Modules.data_catalog
])

// Create router with enabled modules
const router = getBrowserRouter(modules)

// Render application
root.render(
  <RouterProvider router={router} />
)

// Programmatic navigation using route constants
import { useNavigate } from 'react-router'
import { EnumRoutes } from './routes'

function ModelList({ models }) {
  const navigate = useNavigate()

  return (
    <ul>
      {models.map(model => (
        <li
          key={model.name}
          onClick={() => {
            navigate(`${EnumRoutes.DataCatalogModels}/${model.name}`)
          }}
        >
          {model.name}
        </li>
      ))}
    </ul>
  )
}

// Conditional rendering based on route
function Navigation() {
  const location = useLocation()

  return (
    <nav>
      <NavLink
        to={EnumRoutes.Plan}
        active={location.pathname === EnumRoutes.Plan}
      >
        Plan
      </NavLink>
      <NavLink
        to={EnumRoutes.DataCatalog}
        active={location.pathname.startsWith(EnumRoutes.DataCatalog)}
      >
        Data Catalog
      </NavLink>
    </nav>
  )
}

// Module-based route filtering
const routes = [
  {
    path: '/plan',
    element: <Root content={<Plan />} />,
  },
  {
    path: '/editor',
    element: <Root content={<Editor />} />,
  },
].filter(r => {
  const path = r.path.replace('/', '')
  // Check if module is enabled
  return modules.list.includes(path as Modules)
})

Module Aliases

The routing system supports module aliases to map route paths to backend module names:

const aliases: Record<string, string[]> = {
  plan: [Modules.plans], // '/plan' route requires 'plans' module
}

Lazy Loading

All page components are lazy-loaded using React.lazy and Suspense:

const Plan = lazy(() => import('./library/pages/plan/Plan'))

// Used in route with Suspense fallback
<Suspense
  fallback={
    <div className="flex justify-center items-center w-full h-full">
      <Loading className="inline-block">
        <Spinner className="w-3 h-3 border border-neutral-10 mr-4" />
        <h3 className="text-md">Loading Content...</h3>
      </Loading>
    </div>
  }
>
  <Plan />
</Suspense>

Basename Support

The router supports custom basenames for deployment in subdirectories:

return createBrowserRouter(routes, {
  basename: getUrlWithPrefix() // e.g., '/sqlmesh'
})

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment