feat(webui): Add support for building queries from guided SQL input boxes. (#1304)

Author: hoophalab

components/webui/client/src/pages/SearchPage/SearchControls/Presto/BuildSqlTestingInputs.tsx

@@ -0,0 +1,75 @@
+import {FormEvent} from "react";
+
+import {
+    Static,
+    Type,
+} from "@sinclair/typebox";
+import {Value} from "@sinclair/typebox/value";
+
+import {buildSearchQuery} from "../../../../sql-parser";
+import {handlePrestoQuerySubmit} from "./presto-search-requests";
+
+
+// eslint-disable-next-line no-warning-comments
+// TODO: Replace this file with actual SQL inputs
+
+const TransformEmptyStringSchema = Type.Transform(
+    Type.Optional(Type.Union([
+        Type.String(),
+        Type.Undefined(),
+    ]))
+)
+    .Decode((value) => (
+        ("undefined" === typeof value || "" === value.trim()) ?
+        // eslint-disable-next-line no-undefined
+            undefined :
+            value))
+    .Encode((value) => value);
+
+const BuildSearchQueryPropsSchema = Type.Object({
+    /* eslint-disable sort-keys */
+    selectItemList: Type.String(),
+    relationList: Type.String(),
+    booleanExpression: TransformEmptyStringSchema,
+    sortItemList: TransformEmptyStringSchema,
+    limitValue: TransformEmptyStringSchema,
+    /* eslint-enable sort-keys */
+});
+
+/**
+ * Returns input boxes to test `buildSearchQuery`.
+ *
+ * @return
+ */
+const BuildSqlTestingInputs = () => {
+    return (
+        <form
+            onSubmit={(ev: FormEvent<HTMLFormElement>) => {
+                ev.preventDefault();
+                const formData = new FormData(ev.target as HTMLFormElement);
+                const props: Static<typeof BuildSearchQueryPropsSchema> = Value.Parse(
+                    BuildSearchQueryPropsSchema,
+                    Object.fromEntries(formData),
+                );
+
+                const sqlString = buildSearchQuery(props);
+                console.log(`SQL: ${sqlString}`);
+                handlePrestoQuerySubmit({queryString: sqlString});
+            }}
+        >
+            <label>select:</label>
+            <input name={"selectItemList"}/>
+            <label>from:</label>
+            <input name={"relationList"}/>
+            <label>where:</label>
+            <input name={"booleanExpression"}/>
+            <label>order:</label>
+            <input name={"sortItemList"}/>
+            <label>limit:</label>
+            <input name={"limitValue"}/>
+            <button type={"submit"}>Run</button>
+        </form>
+    );
+};
+
+export {BuildSqlTestingInputs};

components/webui/client/src/pages/SearchPage/SearchControls/index.tsx

@@ -5,6 +5,7 @@ import {
 import usePrestoSearchState from "../SearchState/Presto";
 import {PRESTO_SQL_INTERFACE} from "../SearchState/Presto/typings";
 import NativeControls from "./NativeControls";
+import {BuildSqlTestingInputs} from "./Presto/BuildSqlTestingInputs";
 import FreeformControls from "./Presto/FreeformControls";
 import GuidedControls from "./Presto/GuidedControls";
 
@@ -37,9 +38,12 @@ const SearchControls = () => {
     }
 
     return (
-        <form onSubmit={handleSubmit}>
-            {controls}
-        </form>
+        <>
+            <form onSubmit={handleSubmit}>
+                {controls}
+            </form>
+            {isPrestoGuided && <BuildSqlTestingInputs/>}
+        </>
     );
 };
 

components/webui/client/src/sql-parser/index.ts

@@ -20,7 +20,7 @@ class SyntaxErrorListener<TSymbol> extends ErrorListener<TSymbol> {
         _offendingSymbol: TSymbol,
         line: number,
         column: number,
-        msg: string
+        msg: string,
     ) {
         throw new SyntaxError(`line ${line}:${column}: ${msg}`);
     }
@@ -46,24 +46,85 @@ class UpperCaseCharStream extends CharStream {
     }
 }
 
-
 /**
- * Validate a SQL string for syntax errors.
+ * Creates a SQL parser for a given input string.
  *
- * @param sqlString
- * @throws {SyntaxError} with line, column, and message details if a syntax error is found.
+ * @param input The SQL query string to be parsed.
+ * @return The configured SQL parser instance ready to parse the input.
  */
-const validate = (sqlString: string) => {
+const buildParser = (input: string): SqlBaseParser => {
     const syntaxErrorListener = new SyntaxErrorListener();
-    const lexer = new SqlBaseLexer(new UpperCaseCharStream(sqlString));
+    const lexer = new SqlBaseLexer(new UpperCaseCharStream(input));
     lexer.removeErrorListeners();
     lexer.addErrorListener(syntaxErrorListener);
     const parser = new SqlBaseParser(new CommonTokenStream(lexer));
     parser.removeErrorListeners();
     parser.addErrorListener(syntaxErrorListener);
-    parser.singleStatement();
+
+    return parser;
+};
+
+/**
+ * Validate a SQL string for syntax errors.
+ *
+ * @param sqlString
+ * @throws {SyntaxError} with line, column, and message details if a syntax error is found.
+ */
+const validate = (sqlString: string) => {
+    buildParser(sqlString).singleStatement();
+};
+
+interface BuildSearchQueryProps {
+    selectItemList: string;
+    relationList: string;
+    booleanExpression?: string | undefined;
+    sortItemList?: string | undefined;
+    limitValue?: string | undefined;
+}
+
+/**
+ * Constructs a SQL search query string from a set of structured components.
+ *
+ * @param props
+ * @param props.selectItemList
+ * @param props.relationList
+ * @param props.booleanExpression
+ * @param props.sortItemList
+ * @param props.limitValue
+ * @return
+ * @throws {Error} if the constructed SQL string is not valid.
+ */
+const buildSearchQuery = ({
+    selectItemList,
+    relationList,
+    booleanExpression,
+    sortItemList,
+    limitValue,
+}: BuildSearchQueryProps): string => {
+    let sqlString = `SELECT ${selectItemList} FROM ${relationList}`;
+    if ("undefined" !== typeof booleanExpression) {
+        sqlString += ` WHERE ${booleanExpression}`;
+    }
+    if ("undefined" !== typeof sortItemList) {
+        sqlString += ` ORDER BY ${sortItemList}`;
+    }
+    if ("undefined" !== typeof limitValue) {
+        sqlString += ` LIMIT ${limitValue}`;
+    }
+
+    try {
+        validate(sqlString);
+    } catch (err: unknown) {
+        throw new Error(`The constructed SQL is not valid: ${sqlString}`, {cause: err});
+    }
+
+    return sqlString;
 };
 
 export {
-    SyntaxError, validate,
+    buildSearchQuery,
+    SyntaxError,
+    validate,
 };
+
+export type {BuildSearchQueryProps};