Implementation:TobikoData Sqlmesh Model Directory

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

Overview

Directory model class for the SQLMesh web UI file explorer, managing hierarchical folder structures with expandable/collapsible state.

Description

ModelDirectory extends ModelArtifact to represent directories in the file system hierarchy. It manages collections of subdirectories and files, providing methods for tree traversal, state management (open/closed), and artifact manipulation. The class supports nested directory structures with unlimited depth through recursive operations like expand() and collapse().

Key features include change detection across the entire directory tree, special path detection for models and tests directories, artifact filtering by visibility state, and comprehensive CRUD operations for managing child files and directories.

Usage

Use this class to implement the file explorer sidebar in the web UI, enabling users to navigate project directories and manage file hierarchies with proper state persistence.

Code Reference

Source Location

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

Signature

export class ModelDirectory extends ModelArtifact<InitialDirectory> {
  private _isOpen: boolean = false
  directories: ModelDirectory[] = []
  files: ModelFile[] = []
  syncStateOpen?: (state: boolean) => void

  constructor(initial?: Directory | ModelDirectory, parent?: ModelDirectory)

  get level(): number
  get isChanged(): boolean
  get isEmpty(): boolean
  get withFiles(): boolean
  get withDirectories(): boolean
  get isNotEmpty(): boolean
  get artifacts(): ModelArtifact[]
  get allDirectories(): ModelDirectory[]
  get allFiles(): ModelFile[]
  get allVisibleArtifacts(): ModelArtifact[]
  get allArtifacts(): ModelArtifact[]
  get isOpened(): boolean
  get isClosed(): boolean
  get isModels(): boolean
  get isTests(): boolean

  open(): void
  close(): void
  toggle(): void
  expand(): void
  collapse(): void
  containsName(name: string): boolean
  hasFile(file: ModelFile): boolean
  hasDirectory(directory: ModelDirectory): boolean
  addFile(file: ModelFile): void
  addDirectory(directory: ModelDirectory): void
  removeFile(file: ModelFile): void
  removeDirectory(directory: ModelDirectory): void
  update(params: { files: File[] | ModelFile[], directories: Directory[] | ModelDirectory[] }): void
}

Import

import { ModelDirectory } from '@models/directory'

I/O Contract

Inputs

Name	Type	Required	Description
initial	ModelDirectory	No	Initial directory data with files and subdirectories
parent	ModelDirectory	No	Parent directory for hierarchy

Outputs

Property	Type	Description
level	number	Depth level in directory tree (0 for root)
isChanged	boolean	True if any file/directory has unsaved changes
artifacts	ModelArtifact[]	Combined list of files and directories
allDirectories	ModelDirectory[]	Recursive list of all subdirectories
allFiles	ModelFile[]	Recursive list of all files
allVisibleArtifacts	ModelArtifact[]	Only currently visible (expanded) artifacts
isOpened	boolean	Expansion state
isModels	boolean	True if path starts with 'models'
isTests	boolean	True if path starts with 'tests'

Usage Examples

// Create a directory structure
const modelsDir = new ModelDirectory({
  name: 'models',
  path: 'models',
  files: [],
  directories: []
})

// Add files and subdirectories
const modelFile = new ModelFile({ name: 'my_model.sql', path: 'models/my_model.sql' })
modelsDir.addFile(modelFile)

// Expand entire tree
modelsDir.expand()

// Check for changes recursively
if (modelsDir.isChanged) {
  console.log('Directory has unsaved changes')
}

// Get all files recursively
const allFiles = modelsDir.allFiles
console.log(`Total files: ${allFiles.length}`)

// Check if directory contains a name
if (modelsDir.containsName('my_model.sql')) {
  console.log('File already exists')
}

// Toggle expansion state with optional sync callback
modelsDir.syncStateOpen = (isOpen) => {
  console.log(`Directory is now ${isOpen ? 'open' : 'closed'}`)
}
modelsDir.toggle()

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment