SQL syntax highlighting doesn't work in the SQLMesh UI

[petrikoro]

The UI doesn't highlight SQL syntax for some reason. I'm using sqlmesh==0.149.0 on macOS. I can reproduce the problem on two different browsers: Yandex Browser and Safari.

[erindru]

@mykalmax do you know what might cause this?

[georgesittas]

I can't reproduce this using the current main branch. Tested on safari, firefox and chrome on a macos sonoma v14.2.1.

[petrikoro]

I'm still able to reproduce the issue on the 0.152.0 release. For the context - I use devcontainer to spin up sqlmesh ui.

Dockerfile:

FROM python:3.12-slim-bullseye

ENV SQLMESH_USER=sqlmesh \
    SQLMESH_HOME=/workspaces/sqlmesh

# Setting Python-related environment variables to ensure consistent behavior
# and improve performance (disabling bytecode writing).
ENV PYTHONHASHSEED=random \
    PYTHONUNBUFFERED=1 \
    PYTHONDONTWRITEBYTECODE=1 \
    PYTHONPATH=${SQLMESH_HOME}:${PYTHONPATH}

ENV PIP_VERSION=24.3.1 \
    PIP_DISABLE_PIP_VERSION_CHECK=1 \
    PIP_NO_CACHE_DIR=1 \
    PIP_USER=0

ENV POETRY_VERSION=1.8.5 \
    POETRY_REQUESTS_TIMEOUT=120 \
    POETRY_NO_INTERACTION=1 \
    POETRY_VIRTUALENVS_CREATE=0 \
    POETRY_CACHE_DIR=${SQLMESH_HOME}/.cache/pypoetry \
    POETRY_HOME=/opt/poetry \
    PATH=/opt/poetry/bin:${PATH} \
    ZSH_THEME=bureau

# Set the working directory
WORKDIR ${SQLMESH_HOME}

# Installing required packages for building and running the application
# and cleaning up apt caches to reduce image size.
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
        jq \
        gcc \
        curl \
        git \
        openssh-client \
        libaio-dev \
        libffi-dev \
        libpq-dev \
        libssl-dev \
        python3-dev \
        zsh && \
    rm -rf /var/lib/apt/lists/* && \
    apt-get clean

# Upgrade pip and install Poetry
RUN python3 -m pip install --upgrade pip==${PIP_VERSION} && \
    curl -sSL https://install.python-poetry.org | python3 -

# Create the SQLMesh user
RUN useradd -m -s /bin/zsh ${SQLMESH_USER}

# Only copying these files here in order to take advantage of Docker cache. We only want the
# next stage (poetry install) to run if these files change, but not the rest of the app.
COPY --chown=${SQLMESH_USER}:${SQLMESH_USER} pyproject.toml poetry.lock ${SQLMESH_HOME}

# Installing dependencies with Poetry. The --no-root flag ensures we do not install the current project itself,
# and --no-directory and --no-ansci options are used to speed up the process by skipping unnecessary steps.
RUN poetry lock --no-update && \
    poetry install --no-root --no-directory --no-ansi

# Switch to the SQLMesh user
USER ${SQLMESH_USER}

# Configure Git for SQLMesh user
RUN git config --global --add safe.directory ${SQLMESH_HOME}

# Install Oh My Zsh for better shell experience
RUN sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" "" --unattended && \
    sed -i 's/^ZSH_THEME=".*"/ZSH_THEME="${ZSH_THEME}"/' ~/.zshrc

# Copy the rest of the application files
COPY --chown=${SQLMESH_USER}:${SQLMESH_USER} . ${SQLMESH_HOME}

devcontainer.json:

{
  "build": {
    "context": "..",
    "dockerfile": "../Dockerfile"
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "GitLab.gitlab-workflow@5.18.1",
        "eamodio.gitlens@16.0.5",
        "redhat.vscode-yaml@1.15.0",
        "wayou.vscode-todo-highlight@1.0.5",
        "DavidAnson.vscode-markdownlint@0.57.0",
        "ms-azuretools.vscode-docker@1.29.3",
        "ms-python.vscode-pylance@2024.12.1"
      ],
      "settings": {
        "terminal.integrated.shell.linux": "/bin/zsh"
      }
    }
  },
  "forwardPorts": [
    8000
  ],
  "name": "sqlmesh",
  "portsAttributes": {
    "8000": {
      "label": "sqlmesh docs",
      "onAutoForward": "notify",
      "requireLocalPort": true
    }
  },
  "postAttachCommand": "nohup bash -c 'sqlmesh --gateway=local ui --mode docs & sleep 15' > /dev/null 2>&1",
  "postStartCommand": "pre-commit install && .scripts/setup-env.sh"
}

[petrikoro]

My config.py:

import os

import dotenv

from sqlmesh.core.config import (
    Config,
    DuckDBConnectionConfig,
    GatewayConfig,
    ModelDefaultsConfig,
    PostgresConnectionConfig,
    YCAirflowSchedulerConfig,
)
from sqlmesh.core.config.format import FormatConfig
from sqlmesh.core.config.ui import UIConfig

dotenv.load_dotenv(override=True)

config = Config(
    default_target_environment=os.environ.get(
        "SQLMESH_DEFAULT_TARGET_ENVIRONMENT", "dev"
    ),
    default_gateway=os.environ.get("SQLMESH_DEFAULT_GATEWAY", "local"),
    model_defaults=ModelDefaultsConfig(
        dialect="postgres",
        owner="some_email@gmail.com",
        on_destructive_change="ERROR",
    ),
    gateways={
        "prod": GatewayConfig(
            connection=PostgresConnectionConfig(
                host=os.environ.get("SQLMESH_QUERY_ENGINE_HOST_PROD", ""),
                port=os.environ.get("SQLMESH_QUERY_ENGINE_PORT_PROD", 5432),
                user=os.environ.get("SQLMESH_QUERY_ENGINE_USER_PROD", ""),
                password=os.environ.get("SQLMESH_QUERY_ENGINE_PASSWORD_PROD", ""),
                database=os.environ.get("SQLMESH_QUERY_ENGINE_DATABASE_PROD", ""),
                concurrent_tasks=os.environ.get(
                    "SQLMESH_QUERY_ENGINE_CONCURRENCY_PROD", 16
                ),
                pre_ping=True,
            ),
            state_connection=PostgresConnectionConfig(
                host=os.environ.get("SQLMESH_STATE_DB_HOST_PROD", ""),
                port=os.environ.get("SQLMESH_STATE_DB_PORT_PROD", 5432),
                user=os.environ.get("SQLMESH_STATE_DB_USER_PROD", ""),
                password=os.environ.get("SQLMESH_STATE_DB_PASSWORD_PROD", ""),
                database=os.environ.get("SQLMESH_STATE_DB_DATABASE_PROD", ""),
                pre_ping=True,
            ),
            scheduler=YCAirflowSchedulerConfig(
                airflow_url=os.environ.get("SQLMESH_AIRFLOW_URL_PROD", ""),
                username=os.environ.get("SQLMESH_AIRFLOW_USER_PROD", ""),
                password=os.environ.get("SQLMESH_AIRFLOW_PASSWORD_PROD", ""),
                token=os.environ.get("SQLMESH_AIRFLOW_IAM_TOKEN_PROD", ""),
                use_state_connection=True,
            ),
        ),
        "ci": GatewayConfig(
            connection=PostgresConnectionConfig(
                host=os.environ.get("SQLMESH_QUERY_ENGINE_HOST_CI", ""),
                port=os.environ.get("SQLMESH_QUERY_ENGINE_PORT_CI", 5432),
                user=os.environ.get("SQLMESH_QUERY_ENGINE_USER_CI", ""),
                password=os.environ.get("SQLMESH_QUERY_ENGINE_PASSWORD_CI", ""),
                database=os.environ.get("SQLMESH_QUERY_ENGINE_DATABASE_CI", ""),
                concurrent_tasks=os.environ.get(
                    "SQLMESH_QUERY_ENGINE_CONCURRENCY_CI", 16
                ),
                pre_ping=True,
            ),
            state_connection=PostgresConnectionConfig(
                host=os.environ.get("SQLMESH_STATE_DB_HOST_CI", ""),
                port=os.environ.get("SQLMESH_STATE_DB_PORT_CI", 5432),
                user=os.environ.get("SQLMESH_STATE_DB_USER_CI", ""),
                password=os.environ.get("SQLMESH_STATE_DB_PASSWORD_CI", ""),
                database=os.environ.get("SQLMESH_STATE_DB_DATABASE_CI", ""),
                pre_ping=True,
            ),
        ),
        "dev": GatewayConfig(
            connection=PostgresConnectionConfig(
                host=os.environ.get("SQLMESH_QUERY_ENGINE_HOST_DEV", ""),
                port=os.environ.get("SQLMESH_QUERY_ENGINE_PORT_DEV", 5432),
                user=os.environ.get("SQLMESH_QUERY_ENGINE_USER_DEV", ""),
                password=os.environ.get("SQLMESH_QUERY_ENGINE_PASSWORD_DEV", ""),
                database=os.environ.get("SQLMESH_QUERY_ENGINE_DATABASE_DEV", ""),
                concurrent_tasks=os.environ.get(
                    "SQLMESH_QUERY_ENGINE_CONCURRENCY_DEV", 1
                ),
                pre_ping=True,
            ),
        ),
        "local": GatewayConfig(
            connection=DuckDBConnectionConfig(),
        ),
    },
    format=FormatConfig(
        pad=4,
        indent=4,
        normalize=True,
        max_text_width=80,
        leading_comma=False,
        append_newline=True,
        normalize_functions="lower",
    ),
    ui=UIConfig(format_on_save=False),
)

My pyproject.toml:

[tool.poetry]
package-mode = false

[tool.poetry.dependencies]
python = "~3.12.0"
sqlmesh = { version = "0.145.0", extras = ["postgres", "web"] }
cryptography = "44.0.0"
python-dotenv = "1.0.1"
pyjwt = "2.8.0"

[tool.poetry.group.dev.dependencies]
bandit = "1.7.10"
black = "24.10.0"
flake8 = "7.1.1"
flake8-pyproject = "1.2.3"
flake8-bugbear = "24.12.12"
isort = "5.13.2"
pre-commit = "3.8.0"

[tool.isort]
profile = "black"

[tool.flake8]
max-line-length = 80
extend-select = ["B950"]
extend-ignore = ["E203", "E501", "E701"]

[erindru]

Can you check the browser developer tools for errors loading resources?

It's possible that sandboxing this in a devcontainer is causing some URLs to be generated incorrectly

[petrikoro]

Can you check the browser developer tools for errors loading resources?

It's possible that sandboxing this in a devcontainer is causing some URLs to be generated incorrectly

I do get an error on http://localhost:8000/api/files/models/example/top_waiters.sql, I attached har file in the slack thread if it helps

[petrikoro]

I can reproduce it with a clean project, standard sqlmesh ui works just fine, but when I run sqlmesh ui --mode docs it doesn't highlight sql syntax

Steps to reproduce:

1. sqlmesh init postgres
2. sqlmesh ui --mode docs