11# Trino Query UI
22
3- A reusable React component for executing queries against Trino. It can be
4- embedded into any React application and configured to proxy requests to a local
5- or remote Trino cluster.
3+ A reusable React component as a query interface for the SQL query engine
4+ [ Trino] ( https://trino.io/ ) . Browse connected catalogs, write SQL queries,
5+ execute the queries and inspect result data all in a web application connected
6+ to your Trino cluster.
7+
8+ The component can be embedded into any React application and configured to proxy
9+ requests to a local or remote Trino cluster.
610
711> [ !WARNING]
812> This package is under heavy development and is not yet recommended for
@@ -12,13 +16,14 @@ or remote Trino cluster.
1216![ Trino Query UI] ( screenshot.png " Trino Query UI ")
1317
1418Implementation details:
19+
1520* React TypeScript project with Vite
1621* Uses Node.js v20+
1722* Monaco editor + ANTLR parser using the Trino language
1823
1924## Installation
2025
21- ```
26+ ``` shell
2227npm install trino-query-ui
2328```
2429
@@ -38,20 +43,22 @@ export default MyTrinoApp
3843## Building and shipping in Trino
3944
4045The Query UI builds just like the existing UI in Trino.
41- 1 . First you build the TypeScript into Javascript and CSS
42- 2 . Then copy the distributable path into Trino.
43- 3 . Then modify Trino to respond to the query ui path.
46+
47+ 1 . Build the TypeScript into Javascript and CSS
48+ 2 . Copy the distributable path into Trino.
49+ 3 . Modify Trino to respond to the query ui path.
4450
4551### Building for integration
4652
47- ```
53+ ``` shell
4854cd precise
55+ npm install
4956npm run build
5057```
5158
5259### Copying into Trino
5360
54- ```
61+ ``` shell
5562mkdir -p $TRINO_HOME /core/trino-main/src/main/resources/query_ui_webapp/
5663cp -r dist/* $TRINO_HOME /core/trino-main/src/main/resources/query_ui_webapp/
5764```
@@ -119,8 +126,10 @@ Add `/query/` path. Note any path can be used:
119126### Build and run
120127
1211281 . Install Node.js (v20 or newer) from < https://nodejs.org/en/download/ >
122- 2 . Install the dependencies and run the dev server:
123- ```
129+ 2 . Ensure Trino is running at the configured URL. Defaults to http://localhost:8080
130+ 3 . Install the dependencies and run the dev server:
131+
132+ ``` shell
124133cd precise
125134npm install
126135npm run dev
@@ -130,9 +139,9 @@ The local URL is displayed, and you can open it in your browser.
130139
131140### Set up proxying to a local Trino instance
132141
133- Update ` vite.config.ts ` with the following so that queries can be
134- proxied to Trino's query endpoint running on ` http://localhost:8080 ` (or any
135- other path you require).
142+ By default ` vite.config.ts ` is configured so that queries can be proxied to
143+ Trino's query endpoint running on ` http://localhost:8080 ` . Modify the setting to
144+ suit your needs with another URL and updated configuration:
136145
137146``` tsx
138147import { defineConfig } from ' vite'
@@ -157,23 +166,27 @@ export default defineConfig({
157166
158167### Building the parser
159168
160- Run ` npm run antlr4ng ` to build the parser, as configured in ** package.json** .
169+ Build the parser, as configured in ** package.json** .
170+
171+ ``` shell
172+ npm run antlr4ng
173+ ```
161174
162175### Linting and code formatting
163176
164- To check code quality and formatting:
177+ To check code quality and formatting with ESLint and Prettier, as defined in
178+ ** package.json** :
165179
166180``` shell
167- npm run check
181+ npm run check
168182```
169183
170- This command runs both ESLint and Prettier, as defined in ** package.json** .
171-
172184## Philosophy
173185
174186This UI's purpose is to provide an environment where, once the cluster is up,
175187you can immediately execute queries and explore data sets. The intended use
176188cases are:
189+
177190* Initial proof-of-concept queries.
178191* Exploration of data sets.
179192* Performance analysis.
@@ -183,6 +196,7 @@ cases are:
183196* Early demos.
184197
185198The approach:
199+
1862001 . Direct integration into the Trino UI
187201 - No need for an additional authentication hop (although it could be added
188202 in the future)
0 commit comments