Implementation:TobikoData Sqlmesh EditorTab

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

Overview

A React component that renders an individual editor tab with close functionality and change indicators.

Description

EditorTab is a React component that displays a single tab in the editor's tab bar, representing an open file or custom SQL query. The component shows the tab title, provides a close button with confirmation for unsaved changes, and displays a visual indicator (colored dot) when the file has unsaved changes. The tab highlights itself when active and provides smooth scrolling behavior to keep the active tab visible.

The component implements confirmation dialogs before closing tabs with unsaved changes, preventing accidental data loss. On hover, the change indicator dot is replaced with an X close icon, providing an intuitive interface for tab management. The tab automatically stores a reference to its DOM element for programmatic scrolling operations.

Usage

Use this component as part of the editor tab bar to represent individual open files. It's typically rendered within the EditorTabs component and handles user interactions for selecting and closing tabs.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/editor/EditorTab.tsx

Signature

export default function Tab({
  tab,
  title,
}: {
  tab: EditorTab
  title: string
}): JSX.Element

Import

import Tab from '@components/editor/EditorTab'

I/O Contract

Inputs

Name	Type	Required	Description
tab	EditorTab	Yes	The editor tab object containing file and state information
title	string	Yes	The display title for the tab

Outputs

Name	Type	Description
JSX.Element	JSX.Element	The rendered tab element with interactive controls

Behavior

Tab Selection

Clicking the tab selects it and displays its content in the editor:

function handleSelectTab(e: MouseEvent): void {
  e.stopPropagation()
  setSelectedFile(tab.file)
}

Tab Closing with Confirmation

The component prompts for confirmation when closing tabs with unsaved changes:

function closeEditorTabWithConfirmation(): void {
  if (tab.file.isChanged) {
    addConfirmation({
      headline: 'Closing Tab',
      description: 'All unsaved changes will be lost. Do you want to close the tab anyway?',
      yesText: 'Yes, Close Tab',
      noText: 'No, Cancel',
      action: () => closeTab(tab.file),
    })
  } else {
    closeTab(tab.file)
  }
}

Auto-Scroll Behavior

The active tab automatically scrolls into view with smooth animation:

useEffect(() => {
  if (isNil(activeTab)) return

  setTimeout(() => {
    activeTab.el?.scrollIntoView({
      behavior: 'smooth',
      inline: 'center',
    })
  }, 300)
}, [activeTab])

Visual States

The tab displays different visual states:

Active: Highlighted background with primary color text
Inactive: Transparent background with hover effect
Changed: Orange dot indicator when file has unsaved changes
Hover: Close icon replaces change indicator on hover

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment