> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> Документация по Web SQL UI (Play), встроенному интерфейсу запросов в браузере, доступному по пути `/play`

# Web SQL UI (Play)

Web SQL UI (Play) — это встроенный интерфейс запросов для ClickHouse, работающий в браузере. Он доступен на любом HTTP-порту ClickHouse по пути `/play` (например, `http://localhost:8123/play`). С его помощью можно писать и выполнять запросы, просматривать результаты в виде таблицы или графика, а также делиться запросом, копируя его URL.

Весь интерфейс содержится в `programs/server/play.html`: это одна автономная страница, которая напрямую отдается из бинарного файла ClickHouse, без фреймворков и этапа сборки. Единственное исключение — отрисовка графиков: библиотека `uPlot` загружается отложенно со стороннего CDN при первом отображении результата в виде графика, поэтому графики недоступны в автономных развертываниях или развертываниях с ограничениями на исходящий трафик.

<div id="query-tabs">
  ## Вкладки запросов
</div>

Вкладки позволяют держать несколько запросов открытыми рядом, не переключаясь между ними в одном редакторе и не полагаясь на историю браузера.

У каждой вкладки есть собственный текст запроса, заголовок, параметры запроса и последний результат. Настройки подключения (URL, пользователь, пароль) остаются общими для всех вкладок.

<div id="when-the-tab-bar-appears">
  ### Когда появляется панель вкладок
</div>

Панель вкладок появляется после выполнения запроса или когда вкладок становится больше одной. Одиночная вкладка без результатов выглядит в точности так же, как страница до появления вкладок, поэтому, пока она не понадобится, панель вкладок не показывается.

Активная вкладка визуально сливается со страницей: её фон повторяет цвет хэша данного запроса (тот же цвет, который уже используется для фона страницы), с градиентом, который в светлой теме более насыщен сверху, а в тёмной — более яркий сверху. Неактивные вкладки тонируются в соответствии с хэшем текста своего запроса, поэтому разные вкладки автоматически различаются по цвету.

<div id="creating-closing-and-renaming-tabs">
  ### Создание, закрытие и переименование вкладок
</div>

* Создайте новую вкладку с помощью кнопки `[+]` справа от вкладок.
* Закройте вкладку с помощью значка `x` на самой вкладке.
* Новые вкладки получают имена по умолчанию: `Query A`, `Query B` и так далее.
* Щелкните по заголовку активной вкладки, чтобы отредактировать его прямо там; поле редактирования автоматически расширяется по размеру текста.

<div id="switching-tabs">
  ### Переключение вкладок
</div>

* Нажмите на неактивную вкладку, чтобы перейти на неё.
* Прокрутите колёсико мыши над панелью вкладок, чтобы переключаться между вкладками: прокрутка вверх переключает на вкладку слева, прокрутка вниз — на вкладку справа (если они есть). Работает и вертикальная, и горизонтальная прокрутка колёсиком.

Панель вкладок фиксируется по горизонтали — при горизонтальной прокрутке страницы она остаётся слева, как и логотип ClickHouse внизу, — а по вертикали прокручивается вместе с остальной частью страницы.

<div id="persistence-and-browser-history">
  ### Сохранение и история браузера
</div>

Рабочее пространство — вкладки, их заголовки, активная вкладка, их порядок и небольшие снимки результатов — сохраняется в IndexedDB и восстанавливается после перезагрузки. Сохранение выполняется по мере возможности: если IndexedDB недоступна, рабочее пространство для текущего сеанса ограничивается состоянием в памяти.

Вкладки также интегрируются с History API браузера и URL:

* Состояние истории хранит активную вкладку, поэтому кнопки браузера «Назад» и «Вперёд» переключают вкладки.
* В URL добавляется параметр `tab=<name>`. При загрузке запрос URL и параметр `tab` сопоставляются с сохранёнными вкладками: если вкладка с таким именем уже существует, она используется повторно (и её запрос подставляется); если имя не найдено или вкладка была безымянной, создаётся новая. Это позволяет открывать URL с новым запросом, сохраняя при этом собственные сохранённые вкладки.

<div id="limitations">
  ### Ограничения
</div>

При переключении вкладок во время выполнения запроса состояние его выполнения теряется.

Для восстановления сохраняются снимки только небольших результатов. Большой результат (превышающий ограничение на размер снимка) или результат в виде изображения не сохраняется: после переключения вкладки или перезагрузки вкладка сохраняет запрос, но не отрисованный результат, и повторный запуск запроса воспроизводит его. Это относится как к результатам одного запроса, так и к объединённому выводу при выполнении "Run all" (нескольких запросов).