Web SQL UI

Web SQL UI (Play)

Web SQL UI(Play)는 ClickHouse의 내장 브라우저 내 쿼리 인터페이스예요. ClickHouse HTTP 포트의 /play 경로(예: http://localhost:8123/play)에서 제공돼요. 쿼리를 작성하고 실행하며, 결과를 표나 차트로 보고, URL 복사로 쿼리를 공유할 수 있어요.

출처: 문서

본문

Web SQL UI(Play)는 ClickHouse의 내장 브라우저 내 쿼리 인터페이스예요. ClickHouse HTTP 포트의 /play 경로(예: http://localhost:8123/play)에서 제공돼요. 쿼리를 작성하고 실행하며, 결과를 표나 차트로 보고, URL을 복사해 쿼리를 공유할 수 있게 해줘요.

전체 인터페이스는 ClickHouse 바이너리에서 직접 제공되는 단일 자체 포함 페이지인 programs/server/play.html에 들어 있으며, 프레임워크나 빌드 단계가 없어요. 한 가지 예외는 차트 렌더링이에요. uPlot 차트 라이브러리는 결과가 차트로 처음 표시될 때 서드파티 CDN에서 지연 로드되므로, 오프라인 또는 아웃바운드가 제한된 배포에서는 차트를 사용할 수 없어요.

쿼리 탭 (Query tabs)

탭을 사용하면 단일 편집기에서 쿼리를 맞바꾸거나 브라우저 기록에 의존하지 않고 여러 쿼리를 나란히 유지할 수 있어요.

각 탭은 자신의 쿼리 텍스트, 제목, 쿼리 파라미터, 마지막 결과를 가져요. 연결 설정(URL, user, password)은 전역으로 유지되며 모든 탭이 공유해요.

탭 바가 나타나는 시점 (When the tab bar appears)

탭 바는 쿼리가 한 번 실행된 후, 또는 탭이 둘 이상일 때 나타나요. 결과가 없는 단일 탭은 탭이 생기기 전의 페이지와 똑같이 보이므로, 필요할 때까지 보이는 탭 바가 없어요.

활성 탭은 페이지에 시각적으로 합쳐져요. 그 배경은 쿼리별 해시 색(페이지 배경이 이미 사용하는 같은 색)을 따라가며, 밝은 테마에서는 위쪽이 더 포화되고 어두운 테마에서는 위쪽이 더 밝은 그라데이션을 가져요. 비활성 탭은 자신의 쿼리 텍스트 해시로 색을 입히므로, 서로 다른 탭이 색으로 자동 구분돼요.

탭 만들기, 닫기, 이름 바꾸기 (Creating, closing, and renaming tabs)

  • 탭 오른쪽의 [+] 버튼으로 새 탭을 만들어요.
  • 탭의 x 아이콘으로 탭을 닫아요.
  • 새 탭은 Query A, Query B 같은 기본 이름을 받아요.
  • 활성 탭의 제목을 클릭하면 인라인으로 편집할 수 있고, 편집 필드는 텍스트에 맞게 커져요.

탭 전환 (Switching tabs)

  • 비활성 탭을 클릭해 전환해요.
  • 탭 패널 위에서 마우스 휠을 스크롤해 탭을 전환할 수 있어요. 위로 스크롤하면 왼쪽 탭으로, 아래로 스크롤하면 오른쪽 탭으로 이동해요(존재하는 것들). 세로 및 가로 휠 스크롤 모두 동작해요.

탭 바는 가로로 고정돼 있어요 — 페이지의 가로 스크롤 동안 왼쪽에 유지되고(아래쪽에 있는 ClickHouse 로고처럼) 세로로는 페이지와 함께 스크롤되어 사라져요.

지속성과 브라우저 기록 (Persistence and browser history)

워크스페이스 — 탭, 그 제목, 활성 탭, 순서, 작은 결과 스냅샷 — 는 IndexedDB에 저장되고 리로드 시 복원돼요. 지속성은 최선 노력이에요. IndexedDB를 사용할 수 없으면 워크스페이스는 현재 세션의 인메모리 상태로 저하돼요.

탭은 브라우저의 History API와 URL에도 통합돼요:

  • 기록 상태는 활성 탭을 담고 있어서, 브라우저의 뒤로/앞으로 버튼이 탭을 전환해요.
  • URL에 tab=<name> 파라미터가 추가돼요. 로드 시 URL의 query와 tab 파라미터는 저장된 탭과 조정돼요. 그 이름을 가진 기존 탭이 있으면 재사용되고(그리고 쿼리가 대체되고), 이름을 찾을 수 없거나 이름이 없으면 새 탭이 만들어져요. 이렇게 하면 자신의 저장된 탭을 유지하면서 새 쿼리로 URL을 열 수 있어요.

제한 사항 (Limitations)

쿼리가 실행되는 동안 탭을 전환하면 그 쿼리의 실행 상태가 버려져요.

복원을 위해 스냅샷되는 것은 작은 결과뿐이에요. 큰 결과(스냅샷 크기 제한 이상)나 이미지 결과는 지속되지 않아요. 탭 전환 또는 리로드 후 탭은 쿼리를 유지하지만 렌더링된 결과는 유지하지 않으며, 쿼리를 다시 실행하면 결과가 재현돼요. 이는 단일 쿼리 결과와 "Run all"(다중 쿼리) 실행의 결합 출력 모두에 적용돼요.

더 알아보기 (Learn more)