SQL syntax highlighting doesn't work in the SQLMesh UI
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.
@mykalmax do you know what might cause this?
I can't reproduce this using the current main branch. Tested on safari, firefox and chrome on a macos sonoma v14.2.1.
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": [
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]"
],
"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"
}
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="[email protected]",
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"]
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
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
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:
- sqlmesh init postgres
- sqlmesh ui --mode docs