play.html, доступный по пути /play на любом HTTP-порту ClickHouse) позволяет превратить вкладку в блокнот — упорядоченную последовательность ячеек, каждая из которых содержит либо запрос с собственным результатом, либо блок текста в формате Markdown. По структуре такой документ устроен так же, как в Jupyter, Observable, Hex или Deepnote, и служит той же цели: хранить на одной странице цепочку запросов вместе с рассуждениями, которые их связывают.
Режим блокнота включается для каждой вкладки отдельно. Одна вкладка может быть блокнотом, а другая — оставаться обычным редактором для одного запроса. Каждая вкладка сохраняет свой блокнот и после перезагрузки страницы.
Добавление ячеек
Изначально вкладка содержит ровно одну ячейку запроса и выглядит точно так же, как обычный редактор: никаких заголовков, никакого оформления ячеек, никаких видимых признаков блокнота. Как только запрос вернёт результат, под ним появляется большая кнопка[+]. Она намеренно приглушена, чтобы не отвлекать внимание от результата. При нажатии кнопка раскрывается и предлагает два типа ячеек, которые можно добавить:
- Query — новая ячейка запроса. Фокус редактора сразу переходит в неё, так что можно сразу начинать ввод.
- Text — новая ячейка Markdown, которая открывается в режиме редактирования.
Заголовки ячеек
Если ячеек две или больше, у каждой из них появляется заголовок с её номером и типом, например1. Query или 2. Text. Пока запрос выполняется, в заголовке ячейки запроса отображается индикатор состояния, а при ошибке он становится красным; у завершённой ячейки нет никакой отметки, поскольку её результат выводится прямо под ней.
Действия заголовка становятся доступны, когда на ячейку наведён курсор или она находится в фокусе:
Во вкладке всегда остаётся хотя бы одна ячейка запроса, так как именно в ней находится общий редактор, поэтому для последней оставшейся ячейки запроса кнопка
✕ недоступна.
Ячейки запросов
На странице всегда только один редактор запросов — полноценный редактор с подсветкой синтаксиса, автодополнением и полями ввода параметров запроса. В режиме блокнота он встраивается в активную ячейку запроса и отображается, только пока находится в фокусе: как только фокус уходит из редактора, ячейка тоже сворачивается, поэтому в блокноте, который вы читаете, нет ни одного открытого текстового поля. Щелчок по свёрнутому запросу возвращает ему редактор (если редактор находился в другой ячейке, он перемещается сюда). Перемещение фокуса внутри редактора — в поле ввода параметра запроса или на вариант автодополнения — не сворачивает его. Свёрнутая ячейка запроса показывает запрос в одну строку: с подсветкой синтаксиса, с последовательностями пробельных символов (включая отступы и переводы строк), заменёнными одним пробелом, и с плавно затухающим справа окончанием, если запрос не помещается. Собственного фона у неё нет, поэтому свёрнутая ячейка воспринимается как текст на странице, а не как ещё одно поле ввода. КнопкаRun, строка прогресса и действия копирования и скачивания переносятся из заголовка страницы и закрепляются под редактируемым запросом, между ним и его результатом — там, где находится описываемый ими запуск и где сразу понятно, как запустить эту ячейку. Они принадлежат редактору, поэтому появляются и исчезают вместе с ним, когда ячейка получает или теряет фокус.
В режиме блокнота результаты отображаются компактнее: более мелким шрифтом, с соответственно уменьшенным дополнением ячеек и в таблице высотой не более четверти области просмотра. Чтобы выделить результату больше или меньше места, перетащите его нижний край — точно так же, как меняется размер редактора запросов; такой же маркер есть у редактора Markdown в текстовой ячейке. Прокручивается сама таблица — и по вертикали, и по горизонтали, — поэтому её тонкие полосы прокрутки расположены по её собственным краям, длинный или широкий результат не сдвигает остальную часть блокнота вниз и не расширяет её, а заголовки столбцов при прокрутке остаются закреплёнными вверху таблицы. Поскольку заголовок в этом случае находится в самом верху таблицы, тип столбца отображается сразу под ним, поверх первых строк, а не над ним, как в таблице, прокручиваемой вместе со страницей.
Запуск работает как и прежде: Ctrl/Cmd+Enter (или кнопка Run) запускает запрос в редакторе, то есть в активной ячейке. На одной вкладке одновременно выполняется только один запрос; запуск в другой ячейке той же вкладки или нажатие Stop завершает предыдущий.
Представления Logs и Metrics, а также индикаторы ресурсов в строке прогресса относятся к ячейке, результат которой они описывают: каждая ячейка хранит собственный выбор и собственные индикаторы, а общие переключатели показывают то, что получено в активной ячейке. При переключении на другую ячейку возвращаются её журналы, метрики и индикаторы. Пока запрос выполняется, строка остаётся привязанной к ячейке, в которой он запущен, — если перенести редактор в другую ячейку, чтобы написать следующий запрос, текущий прогресс не обнулится, а переключатели не переключатся на результат другой ячейки.
Цветовое кодирование столбцов, закреплённые столбцы и форма результата — сортировка, фильтры и страница — также относятся к ячейке: они задаются для результата и поэтому следуют за ним. Сортировка или фильтрация результата ячейки перезапускает эту ячейку, предварительно перемещая в неё редактор, если он находился в другой. Если Run all в ячейке сформировал несколько таблиц, для них действует один общий выбор, при этом у каждой ячейки он свой; общая ссылка и история браузера содержат выбор активной ячейки, а выбор остальных хранится вместе с соответствующими ячейками.
Текстовые ячейки
Текстовая ячейка содержит Markdown. Во время редактирования в текстовом поле отображается исходный текст с подсвеченной разметкой: заголовки, выделение, фрагменты кода, ссылки, маркеры списков и цитаты выделяются цветом, но не преобразуются при отображении, поэтому вы всегда редактируете исходный текст. Текстовое поле растягивается по мере добавления содержимого. Выход из текстового поля (щелчок в другом месте,Escape или Ctrl/Cmd+Enter) завершает редактирование, и вместо поля отображается отрисованный Markdown. Щелчок по отрисованному тексту снова переключает ячейку в режим редактирования.
В обоих состояниях текстовые ячейки набраны тем же моноширинным шрифтом, что и запросы, поэтому блокнот читается как единый документ, а шрифт не «прыгает» при переключении ячейки между исходным текстом и отрисованным результатом.
Поддерживаются заголовки, выделение, встроенный код и блоки кода, ссылки и изображения, автоматически распознаваемые URL, нумерованные и маркированные списки, цитаты, горизонтальные линии и таблицы с разделителями |. Необработанный HTML в текстовой ячейке экранируется, а не отрисовывается, а URL ссылок и изображений ограничены схемами http, https, mailto и относительными адресами: обычная относительная ссылка, например [guide](guide.md) или , работает, тогда как схемы вроде javascript: или data:, а также адреса без протокола вида //host/... (они указывают на другой источник и не являются относительными) остаются простым текстом.
Сохранение состояния
Весь блокнот вкладки — все ячейки, их содержимое и небольшие снимки результатов — хранится в IndexedDB вместе с остальным рабочим пространством и восстанавливается при перезагрузке страницы. Сохранение также выполняется по принципу «по мере возможности» и с теми же ограничениями на размер результатов, что описаны в разделе веб-интерфейс SQL. URL и история браузера следуют за АКТИВНОЙ ячейкой: во фрагменте после# передаётся запрос этой ячейки, а кнопки «Назад» и «Вперёд» переключают между ячейками (и вкладками), которые вы открывали. Если поделиться URL блокнота, будет передан только запрос активной ячейки, а не весь блокнот.
При дублировании вкладки копируется весь блокнот, но без результатов.
При сохранении вкладок в формате Markdown (кнопка сохранения на панели вкладок) все ячейки блокнота записываются по порядку: каждая ячейка запроса — в виде огороженного блока кода, за которым следуют её параметры и таблицы результатов, а каждая текстовая ячейка — в виде огороженного блока кода с информационной строкой markdown. При загрузке такого документа восстанавливаются все вкладки со всеми ячейками; результаты не восстанавливаются, поэтому загруженные ячейки запросов изначально не выполнены.