Implementation:TobikoData Sqlmesh Model Environment

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

Overview

A TypeScript class model representing SQLMesh virtual environments with local storage persistence.

Description

ModelEnvironment encapsulates all environment-related state and behavior in the SQLMesh web UI, including environment type (local vs remote), plan ID tracking, pinned status, default environment designation, and parent environment references (createFrom). The model manages localStorage serialization for environment persistence across browser sessions and provides static methods for bulk operations on environment collections.

The class distinguishes between local environments (created in the browser, not yet synchronized with backend) and remote environments (synchronized with SQLMesh server state). It handles special cases like the prod environment (always pinned), initial environments (without plan IDs), and default target environments configured in the backend.

Usage

Use ModelEnvironment to represent environment instances throughout the SQLMesh web UI. The model is used in the context store, environment selectors, plan pages, and anywhere environment state needs to be tracked or persisted.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/models/environment.ts

Signature

export class ModelEnvironment {
  constructor(
    initial: InitialEnvironmemt,
    type: RelativeLocation,
    createFrom?: EnvironmentName,
    isPinned?: boolean,
    isDefault?: boolean,
  )

  // Instance properties
  get id(): string
  get name(): string
  get type(): RelativeLocation
  get createFrom(): string
  get isProd(): boolean
  get isDefault(): boolean
  get isPinned(): boolean
  get isInitial(): boolean
  get isLocal(): boolean
  get isRemote(): boolean
  get isSyncronized(): boolean
  get isInitialProd(): boolean

  // Instance methods
  setType(type: RelativeLocation): void
  setCreatedFrom(createFrom: EnvironmentName): void
  update(initial: InitialEnvironmemt): void

  // Static methods
  static save({ environment, environments }): void
  static getOnlyLocal(envs: ModelEnvironment[]): ModelEnvironment[]
  static getOnlyRemote(envs: ModelEnvironment[]): ModelEnvironment[]
  static getEnvironment(): Optional<ModelEnvironment>
  static getEnvironments(): ModelEnvironment[]
  static sort(environments: ModelEnvironment[]): ModelEnvironment[]
}

// Enums
export const EnumDefaultEnvironment = {
  Empty: '',
  Prod: 'prod',
} as const

export const EnumRelativeLocation = {
  Local: 'local',
  Remote: 'remote',
} as const

Import

import { ModelEnvironment } from '@models/environment'

I/O Contract

Constructor Inputs

Name	Type	Required	Description
initial	InitialEnvironmemt	Yes	Environment data with name and optional plan_id
type	RelativeLocation	Yes	'local' or 'remote'
createFrom	EnvironmentName	No	Parent environment name (default: 'prod')
isPinned	boolean	No	Whether environment is pinned in UI (default: false)
isDefault	boolean	No	Whether this is the default target environment (default: false)

Properties

Name	Type	Description
id	string	Plan ID from backend (empty string if initial)
name	string	Environment name
type	RelativeLocation	'local' or 'remote'
createFrom	string	Parent environment name
isProd	boolean	True if name === 'prod'
isDefault	boolean	True if default target environment
isPinned	boolean	True if pinned, default, or prod
isInitial	boolean	True if no plan_id (not yet synchronized)
isLocal	boolean	True if type === 'local'
isRemote	boolean	True if type === 'remote'
isSyncronized	boolean	True if remote and has plan_id
isInitialProd	boolean	True if initial and name === 'prod'

Usage Examples

// Create a local environment
const devEnv = new ModelEnvironment(
  { name: 'dev' },
  EnumRelativeLocation.Local,
  'prod'
)

console.log(devEnv.isLocal) // true
console.log(devEnv.isInitial) // true (no plan_id)
console.log(devEnv.createFrom) // 'prod'

// Create a remote environment from backend data
const remoteEnv = new ModelEnvironment(
  { name: 'staging', plan_id: 'abc123' },
  EnumRelativeLocation.Remote,
  'prod',
  false,
  true // This is the default environment
)

console.log(remoteEnv.isRemote) // true
console.log(remoteEnv.isSyncronized) // true
console.log(remoteEnv.isDefault) // true
console.log(remoteEnv.isPinned) // true (because isDefault)

// Update environment after plan creation
devEnv.update({ name: 'dev', plan_id: 'def456' })
console.log(devEnv.isInitial) // false (now has plan_id)

// Save to localStorage
ModelEnvironment.save({
  environment: devEnv,
  environments: [devEnv, remoteEnv],
})

// Load from localStorage
const savedEnv = ModelEnvironment.getEnvironment()
const savedEnvs = ModelEnvironment.getEnvironments()

// Filter environments
const localEnvs = ModelEnvironment.getOnlyLocal([devEnv, remoteEnv])
const remoteEnvs = ModelEnvironment.getOnlyRemote([devEnv, remoteEnv])

// Sort environments (remote first)
const sorted = ModelEnvironment.sort([devEnv, remoteEnv])

// Check special environment types
if (devEnv.isProd) {
  console.log('Cannot modify prod')
}

if (devEnv.isInitialProd) {
  console.log('Initial prod environment, needs first plan')
}

LocalStorage Schema

The model persists data in localStorage under the key profile:

{
  "environment": {
    "name": "dev",
    "plan_id": "abc123",
    "type": "local",
    "createFrom": "prod",
    "isPinned": false,
    "isDefault": false
  },
  "environments": [
    {
      "name": "dev",
      "plan_id": "abc123",
      "type": "local",
      "createFrom": "prod",
      "isPinned": false,
      "isDefault": false
    },
    {
      "name": "staging",
      "plan_id": "def456",
      "type": "remote",
      "createFrom": "prod",
      "isPinned": true,
      "isDefault": true
    }
  ]
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment