diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9baeb35..5f876f0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,11 +22,8 @@ jobs:
with:
node-version: '22'
- # Temporarily disabling this step due to formatting issues.
- # Linter and prettier) currently throws numerous warnings.
- # Code style checks will be re-enabled in a future PR that includes a codebase reformat.
- # - name: Check code style
- # run: npm run check:clean
+ - name: Check code style
+ run: npm run check:clean
- name: Build package
run: npm run package:clean
diff --git a/README.md b/README.md
index c258ec3..9f3fc3f 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,16 @@ The local URL will be be displayed which you can open in your browser.
To build parser: `npm run antlr4ng`, as configured in **package.json**
+### Linting and code formatting
+
+To check code quality and formatting:
+
+```shell
+ npm run check
+```
+
+This command runs both eslint and prettier, as defined in **package.json**
+
## Philosophy
This UI's purpose is to provide an environment where once the cluster is stood up, executing queries and exploring data sets can be done right away. The idended use cases are:
diff --git a/precise/.eslintignore b/precise/.eslintignore
new file mode 100644
index 0000000..4150114
--- /dev/null
+++ b/precise/.eslintignore
@@ -0,0 +1 @@
+src/generated/**
diff --git a/precise/.eslintrc.cjs b/precise/.eslintrc.cjs
index d6c9537..b172919 100644
--- a/precise/.eslintrc.cjs
+++ b/precise/.eslintrc.cjs
@@ -14,5 +14,10 @@ module.exports = {
'warn',
{ allowConstantExport: true },
],
+ // ❗ Temporarily disabled due to widespread use of `any` an `unused vars` in the codebase.
+ // Defining proper types will require significant effort.
+ // We will address this incrementally in future pull requests.
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
},
}
diff --git a/precise/.prettierignore b/precise/.prettierignore
new file mode 100644
index 0000000..4150114
--- /dev/null
+++ b/precise/.prettierignore
@@ -0,0 +1 @@
+src/generated/**
diff --git a/precise/.prettierrc b/precise/.prettierrc
new file mode 100644
index 0000000..4e534aa
--- /dev/null
+++ b/precise/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 4,
+ "semi": false,
+ "singleQuote": true,
+ "printWidth": 120
+}
diff --git a/precise/src/App.tsx b/precise/src/App.tsx
index e67deb2..29fecdf 100644
--- a/precise/src/App.tsx
+++ b/precise/src/App.tsx
@@ -1,17 +1,12 @@
-import { useState, useEffect } from 'react';
-import QueryApp from './QueryApp';
-
-const defaultQuery = "-- enter your query here\n\nselect * from tpch.sf1.lineitem limit 2";
+import QueryApp from './QueryApp'
// for now this is a defacto Tab, but we will treat this tab more as a page in the future
function App() {
-
-
- return (
-
-
-
- );
+ return (
+
+
+
+ )
}
-export default App;
\ No newline at end of file
+export default App
diff --git a/precise/src/AsyncTrinoClient.tsx b/precise/src/AsyncTrinoClient.tsx
index 3b6db36..944edfb 100644
--- a/precise/src/AsyncTrinoClient.tsx
+++ b/precise/src/AsyncTrinoClient.tsx
@@ -1,256 +1,254 @@
// class to execute Trino queries
class TrinoQueryRunner {
-
- private state : any = {};
- private query : string = "";
- private rowsRead : number = 0;
- isRunning : boolean = false;
- private cancellationToken : string | null = null;
- SetResults = (newResults : any[]) => void {};
+ private state: any = {}
+ private query: string = ''
+ private rowsRead: number = 0
+ isRunning: boolean = false
+ private cancellationToken: string | null = null
+ SetResults = (newResults: any[]) => void {}
// make this return the TrinoQueryRunner object
- private setAllResults = (allResults : any[], error: boolean) => void {};
- SetColumns = (newColumns : any[]) => {};
- private setStatus = (newStatus : any) => {};
- SetScanStats = (newScanStats : any) => {};
- private setErrorMessage = (newErrorMessage : string) => {};
- SetCancelling = () => {};
- SetStopped = () => {};
- SetStarted = () => {};
- pages : any[] = [];
- columns : any[] = [];
- backoff_delay_msec = 0;
- previous_progress = 0;
- cancellationReason : string = "";
-
+ private setAllResults = (allResults: any[], error: boolean) => void {}
+ SetColumns = (newColumns: any[]) => {}
+ private setStatus = (newStatus: any) => {}
+ SetScanStats = (newScanStats: any) => {}
+ private setErrorMessage = (newErrorMessage: string) => {}
+ SetCancelling = () => {}
+ SetStopped = () => {}
+ SetStarted = () => {}
+ pages: any[] = []
+ columns: any[] = []
+ backoff_delay_msec = 0
+ previous_progress = 0
+ cancellationReason: string = ''
+
// Add properties to store catalog and schema headers
- private trinoCatalog : string | null = null;
- private trinoSchema : string | null = null;
- private setHeadersCallback: (catalog: string | null, schema: string | null) => void = () => {};
+ private trinoCatalog: string | null = null
+ private trinoSchema: string | null = null
+ private setHeadersCallback: (catalog: string | null, schema: string | null) => void = () => {}
- SetAllResultsCallback(setAllResults: ((n: any[], error : boolean) => any)) : TrinoQueryRunner {
- this.setAllResults = setAllResults;
- return this;
+ SetAllResultsCallback(setAllResults: (n: any[], error: boolean) => any): TrinoQueryRunner {
+ this.setAllResults = setAllResults
+ return this
}
- SetErrorMessageCallback(setErrorMessage: ((n: string) => any)) : TrinoQueryRunner {
- this.setErrorMessage = setErrorMessage;
- return this;
+ SetErrorMessageCallback(setErrorMessage: (n: string) => any): TrinoQueryRunner {
+ this.setErrorMessage = setErrorMessage
+ return this
}
- SetStatusCallback(setStatus: ((n: any) => any)) : TrinoQueryRunner {
- this.setStatus = setStatus;
- return this;
+ SetStatusCallback(setStatus: (n: any) => any): TrinoQueryRunner {
+ this.setStatus = setStatus
+ return this
}
-
+
// Add method to set the headers callback
- SetHeadersCallback(callback: ((catalog: string | null, schema: string | null) => void)) : TrinoQueryRunner {
- this.setHeadersCallback = callback;
- return this;
+ SetHeadersCallback(callback: (catalog: string | null, schema: string | null) => void): TrinoQueryRunner {
+ this.setHeadersCallback = callback
+ return this
}
-
+
// Add getters for catalog and schema
- GetCatalog() : string | null {
- return this.trinoCatalog;
+ GetCatalog(): string | null {
+ return this.trinoCatalog
}
-
- GetSchema() : string | null {
- return this.trinoSchema;
+
+ GetSchema(): string | null {
+ return this.trinoSchema
}
- FirstColumn() : string[] {
- return this.pages.map(page => page.map((row: any[]) => row[0]))[0];
+ FirstColumn(): string[] {
+ return this.pages.map((page) => page.map((row: any[]) => row[0]))[0]
}
- UpdateStatus(state : any)
- {
+ UpdateStatus(state: any) {
// If cancelled, handle here because we need state in order to cancel
if (this.cancellationToken) {
- state.stats.state = "CANCELLING";
- this.state = state;
- this.setStatus(state);
+ state.stats.state = 'CANCELLING'
+ this.state = state
+ this.setStatus(state)
const nextUri = state.nextUri.replace('http://localhost:8080', '')
// cancel query
fetch(nextUri, {
method: 'DELETE',
headers: {
- 'X-Trino-User': 'system',
+ 'X-Trino-User': 'system',
},
})
- .then(response => response)
- .then(data => {
- state.stats.state = "CANCELLED";
- this.state = state;
- this.setStatus(state);
- this.cancellationToken = null;
- this.setErrorMessage(this.cancellationReason ? this.cancellationReason : 'Query was cancelled');
- this.HandleStopped();
- })
- .catch(error =>
- {
- console.error('Error:', error);
- this.setErrorMessage(error.toString());
- this.HandleStopped();
- });
- return;
+ .then((response) => response)
+ .then((data) => {
+ state.stats.state = 'CANCELLED'
+ this.state = state
+ this.setStatus(state)
+ this.cancellationToken = null
+ this.setErrorMessage(this.cancellationReason ? this.cancellationReason : 'Query was cancelled')
+ this.HandleStopped()
+ })
+ .catch((error) => {
+ console.error('Error:', error)
+ this.setErrorMessage(error.toString())
+ this.HandleStopped()
+ })
+ return
}
- this.state = state;
- this.setStatus(state);
+ this.state = state
+ this.setStatus(state)
if (state.error) {
- this.setErrorMessage(state.error.message);
+ this.setErrorMessage(state.error.message)
}
}
ClearState() {
- this.pages = [];
- this.columns = [];
- this.rowsRead = 0;
+ this.pages = []
+ this.columns = []
+ this.rowsRead = 0
}
HandleStopped() {
- this.isRunning = false;
- this.SetStopped();
+ this.isRunning = false
+ this.SetStopped()
}
- HandleSetAllResults (error : boolean) {
+ HandleSetAllResults(error: boolean) {
// combines all pages into one array
- const rows: any[] = [];
- this.pages.forEach(page => {
+ const rows: any[] = []
+ this.pages.forEach((page) => {
page.forEach((row: any) => {
- rows.push(row);
- });
- });
+ rows.push(row)
+ })
+ })
- this.setAllResults(rows, error);
+ this.setAllResults(rows, error)
}
- CancelQuery(cancellationReason : string) {
+ CancelQuery(cancellationReason: string) {
if (this.isRunning && !this.cancellationToken) {
- this.cancellationToken = "cancelling";
- this.cancellationReason = cancellationReason;
+ this.cancellationToken = 'cancelling'
+ this.cancellationReason = cancellationReason
}
}
- StartQuery(statement : string, catalog?: string, schema?: string) : TrinoQueryRunner {
+ StartQuery(statement: string, catalog?: string, schema?: string): TrinoQueryRunner {
// if running cancel before starting another
if (this.isRunning) {
- this.CancelQuery("");
- return this;
+ this.CancelQuery('')
+ return this
}
// Set the catalog and schema if provided
if (catalog) {
- this.trinoCatalog = catalog;
+ this.trinoCatalog = catalog
}
-
+
if (schema) {
- this.trinoSchema = schema;
+ this.trinoSchema = schema
}
- this.backoff_delay_msec = 0;
+ this.backoff_delay_msec = 0
- this.isRunning = true;
- this.SetStarted();
- this.query = statement;
- console.log('Starting query: ' + statement);
- this.rowsRead = 0;
+ this.isRunning = true
+ this.SetStarted()
+ this.query = statement
+ console.log('Starting query: ' + statement)
+ this.rowsRead = 0
this.ClearState()
const controller = new AbortController()
- const timeoutId = setTimeout(() => controller.abort("Timeout: Trino is not responding"), 15000)
+ const timeoutId = setTimeout(() => controller.abort('Timeout: Trino is not responding'), 15000)
// Prepare headers for the request
const headers: Record = {
'X-Trino-User': 'system',
- };
-
+ }
+
// Add catalog and schema headers if they exist
if (this.trinoCatalog) {
- headers['X-Trino-Catalog'] = this.trinoCatalog;
+ headers['X-Trino-Catalog'] = this.trinoCatalog
}
-
+
if (this.trinoSchema) {
- headers['X-Trino-Schema'] = this.trinoSchema;
+ headers['X-Trino-Schema'] = this.trinoSchema
}
-
+
fetch('/v1/statement', {
- method: 'POST',
- headers: headers,
- body: statement,
- signal: controller.signal
+ method: 'POST',
+ headers: headers,
+ body: statement,
+ signal: controller.signal,
})
- .then(response => {
- if (!response.ok) {
- throw new Error(response.statusText + ' (' + response.status + ')');
- }
-
- // Extract headers before parsing the JSON response
- this.extractHeaders(response.headers);
-
- return response.json()
- })
- .then(data => {
- this.HandleResults(data)
- this.UpdateStatus(data)
- this.NextPage(data)
- })
- .catch(error => {
- clearTimeout(timeoutId);
-
- let errorMessage = 'An unexpected error occurred';
-
- if (error instanceof DOMException && error.name === 'AbortError') {
- errorMessage = 'Query timed out - Trino server took too long to respond';
- } else if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
- if (navigator.onLine === false) {
- errorMessage = 'You appear to be offline. Please check your internet connection.';
- } else {
- errorMessage = 'Failed to connect to Trino server - the server may be down, unreachable, or incorrectly configured';
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(response.statusText + ' (' + response.status + ')')
}
- } else if (error instanceof Error) {
- errorMessage = error.message;
- }
-
- console.error('Error starting query:', errorMessage);
- this.setErrorMessage(errorMessage);
- this.HandleStopped();
- });
- return this;
+ // Extract headers before parsing the JSON response
+ this.extractHeaders(response.headers)
+
+ return response.json()
+ })
+ .then((data) => {
+ this.HandleResults(data)
+ this.UpdateStatus(data)
+ this.NextPage(data)
+ })
+ .catch((error) => {
+ clearTimeout(timeoutId)
+
+ let errorMessage = 'An unexpected error occurred'
+
+ if (error instanceof DOMException && error.name === 'AbortError') {
+ errorMessage = 'Query timed out - Trino server took too long to respond'
+ } else if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
+ if (navigator.onLine === false) {
+ errorMessage = 'You appear to be offline. Please check your internet connection.'
+ } else {
+ errorMessage =
+ 'Failed to connect to Trino server - the server may be down, unreachable, or incorrectly configured'
+ }
+ } else if (error instanceof Error) {
+ errorMessage = error.message
+ }
+
+ console.error('Error starting query:', errorMessage)
+ this.setErrorMessage(errorMessage)
+ this.HandleStopped()
+ })
+
+ return this
}
-
+
// Extract and store Trino headers
private extractHeaders(headers: Headers) {
- const headerEntries: [string, string][] = [];
-
+ const headerEntries: [string, string][] = []
+
// Iterate through all headers and log them
headers.forEach((value, key) => {
- headerEntries.push([key.toLowerCase(), value]);
- });
-
+ headerEntries.push([key.toLowerCase(), value])
+ })
+
// Create a map of lowercase header names for case-insensitive lookup
- const headerMap = new Map(headerEntries);
-
+ const headerMap = new Map(headerEntries)
+
// Get SET catalog and schema headers if present (case-insensitive)
- const setCatalog = headerMap.get('x-trino-set-catalog');
- const setSchema = headerMap.get('x-trino-set-schema');
-
- console.log(`Found SET headers - Catalog: ${setCatalog}, Schema: ${setSchema}`);
-
+ const setCatalog = headerMap.get('x-trino-set-catalog')
+ const setSchema = headerMap.get('x-trino-set-schema')
+
+ console.log(`Found SET headers - Catalog: ${setCatalog}, Schema: ${setSchema}`)
+
// Update our stored values when SET headers are present
if (setCatalog) {
- this.trinoCatalog = setCatalog;
- console.log(`Updated catalog to: ${this.trinoCatalog}`);
+ this.trinoCatalog = setCatalog
+ console.log(`Updated catalog to: ${this.trinoCatalog}`)
}
-
+
if (setSchema) {
- this.trinoSchema = setSchema;
- console.log(`Updated schema to: ${this.trinoSchema}`);
+ this.trinoSchema = setSchema
+ console.log(`Updated schema to: ${this.trinoSchema}`)
}
-
+
// Call the callback with the extracted headers
if ((setCatalog || setSchema) && this.setHeadersCallback) {
- this.setHeadersCallback(this.trinoCatalog, this.trinoSchema);
+ this.setHeadersCallback(this.trinoCatalog, this.trinoSchema)
}
}
@@ -263,88 +261,84 @@ class TrinoQueryRunner {
headers: {
'X-Trino-User': 'system',
},
- });
-
+ })
+
if (!response.ok) {
- throw new Error(response.statusText);
+ throw new Error(response.statusText)
}
-
+
// Extract headers from each page response
- this.extractHeaders(response.headers);
-
- const data = await response.json();
+ this.extractHeaders(response.headers)
+
+ const data = await response.json()
+
+ this.HandleResults(data)
+ this.UpdateStatus(data)
- this.HandleResults(data);
- this.UpdateStatus(data);
-
if (data.nextUri) {
// We want to cancel just after the status is updated, otherwise if the queue is QUEUED we will not be able to cancel
if (this.cancellationToken) {
- return;
+ return
}
// backoff delay add 20ms up to 1000ms
- this.backoff_delay_msec = Math.min(this.backoff_delay_msec + 20, 1000);
- setTimeout(() => this.NextPage(data), this.backoff_delay_msec);
- }
- else
- {
- this.HandleSetAllResults(data["stats"]["state"] == "FAILED");
- this.HandleStopped();
+ this.backoff_delay_msec = Math.min(this.backoff_delay_msec + 20, 1000)
+ setTimeout(() => this.NextPage(data), this.backoff_delay_msec)
+ } else {
+ this.HandleSetAllResults(data['stats']['state'] == 'FAILED')
+ this.HandleStopped()
console.log('Query finished')
}
} catch (error) {
if (error instanceof Error) {
// handle errors of time net::ERR_CONNECTION_REFUSED
if (error.message === 'Failed to fetch') {
- console.error('Error:', error.message + " - Trino is not running or not reachable");
- this.setErrorMessage(error.message);
- }
- else {
- console.error('Error:', error.message);
- this.setErrorMessage(error.message);
+ console.error('Error:', error.message + ' - Trino is not running or not reachable')
+ this.setErrorMessage(error.message)
+ } else {
+ console.error('Error:', error.message)
+ this.setErrorMessage(error.message)
}
} else {
// Handle cases where the thrown error is not an Error instance
- console.error('An unexpected error occurred:', error);
- this.setErrorMessage('An unexpected error occurred');
+ console.error('An unexpected error occurred:', error)
+ this.setErrorMessage('An unexpected error occurred')
}
- this.HandleStopped();
+ this.HandleStopped()
}
}
- HandleResults(data : any) : boolean {
+ HandleResults(data: any): boolean {
if (data.columns && this.columns !== data.columns) {
- this.columns = data.columns;
- this.SetColumns(data.columns);
+ this.columns = data.columns
+ this.SetColumns(data.columns)
}
- const maxRows = 10000;
+ const maxRows = 10000
if (data.data) {
if (data.data.length + this.rowsRead > maxRows) {
// modify this page so we hit maxRows rows exactly
- const trim = maxRows - this.rowsRead;
- this.rowsRead += trim;
- const page : any[] = data.data.slice(0, trim);
- this.pages.push(page);
+ const trim = maxRows - this.rowsRead
+ this.rowsRead += trim
+ const page: any[] = data.data.slice(0, trim)
+ this.pages.push(page)
// set error indicating rows were trimmed formatted using maxRows with commas
- this.setErrorMessage('Results were trimmed to ' + maxRows.toLocaleString() + ' rows');
- this.SetResults(this.pages);
+ this.setErrorMessage('Results were trimmed to ' + maxRows.toLocaleString() + ' rows')
+ this.SetResults(this.pages)
// cancel
- this.CancelQuery('Results were trimmed to ' + maxRows.toLocaleString() + ' rows');
- return false;
- }
- else {
- this.pages.push(data.data);
- this.rowsRead += data.data.length;
+ this.CancelQuery('Results were trimmed to ' + maxRows.toLocaleString() + ' rows')
+ return false
+ } else {
+ this.pages.push(data.data)
+ this.rowsRead += data.data.length
}
- this.SetResults(this.pages);
+ this.SetResults(this.pages)
}
- return true;
+ return true
}
}
-export default TrinoQueryRunner;
\ No newline at end of file
+export default TrinoQueryRunner
diff --git a/precise/src/QueryApp.tsx b/precise/src/QueryApp.tsx
index 78622ae..5a58314 100644
--- a/precise/src/QueryApp.tsx
+++ b/precise/src/QueryApp.tsx
@@ -1,96 +1,104 @@
-import React from "react";
-import QueryCell from "./QueryCell";
-import Queries from './schema/Queries';
-import CatalogViewer from './controls/catalog_viewer/CatalogViewer';
-import './style/layout.css';
-import './style/components.css';
+import React from 'react'
+import QueryCell from './QueryCell'
+import Queries from './schema/Queries'
+import CatalogViewer from './controls/catalog_viewer/CatalogViewer'
+import './style/layout.css'
+import './style/components.css'
interface QueryAppProps {}
interface QueryAppState {
- queries: Queries;
+ queries: Queries
}
class QueryApp extends React.Component {
constructor(props: QueryAppProps) {
- super(props);
+ super(props)
this.state = {
- queries: new Queries()
+ queries: new Queries(),
}
}
setQueryContent = (query: string, catalog?: string, schema?: string) => {
- const currentQuery = this.state.queries.getCurrentQuery();
- const updates: any = {};
-
+ const currentQuery = this.state.queries.getCurrentQuery()
+ const updates: any = {}
+
if (query) {
- updates.query = query;
+ updates.query = query
}
-
+
if (catalog) {
- updates.catalog = catalog;
+ updates.catalog = catalog
}
-
+
if (schema) {
- updates.schema = schema;
+ updates.schema = schema
}
-
- this.state.queries.updateQuery(currentQuery.id, updates);
+
+ this.state.queries.updateQuery(currentQuery.id, updates)
}
-
+
appendQueryContent = (query: string, catalog?: string, schema?: string) => {
- const currentQuery = this.state.queries.getCurrentQuery();
- const updates: any = {};
-
+ const currentQuery = this.state.queries.getCurrentQuery()
+ const updates: any = {}
+
if (query) {
// Append to existing query, adding newlines as needed
- const existingQuery = currentQuery.query || '';
- const separator = existingQuery.trim() === '' ? '' : '\n\n';
- updates.query = existingQuery + separator + query;
+ const existingQuery = currentQuery.query || ''
+ const separator = existingQuery.trim() === '' ? '' : '\n\n'
+ updates.query = existingQuery + separator + query
}
-
+
if (catalog) {
- updates.catalog = catalog;
+ updates.catalog = catalog
}
-
+
if (schema) {
- updates.schema = schema;
+ updates.schema = schema
}
-
- this.state.queries.updateQuery(currentQuery.id, updates);
+
+ this.state.queries.updateQuery(currentQuery.id, updates)
}
render() {
return (
-
-
+
+
-
-
+
@@ -99,8 +107,8 @@ class QueryApp extends React.Component {