From 8f06167bd9cb8acd7b1c241820d675f12a1a636e Mon Sep 17 00:00:00 2001 From: karooolis Date: Mon, 21 Oct 2024 10:06:17 +0300 Subject: [PATCH 01/13] use query columns from ast --- .../src/app/(explorer)/queries/useTableDataQuery.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts index c4f42886fa..9ce5d6496c 100644 --- a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts +++ b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts @@ -1,4 +1,5 @@ import { useParams } from "next/navigation"; +import { Parser } from "node-sql-parser"; import { Hex } from "viem"; import { Table } from "@latticexyz/config"; import { useQuery } from "@tanstack/react-query"; @@ -11,6 +12,8 @@ type Props = { query: string | undefined; }; +const parser = new Parser(); + export type TableData = { columns: string[]; rows: Record[]; @@ -47,14 +50,9 @@ export function useTableDataQuery({ table, query }: Props) { select: (data: DozerResponse) => { if (!table || !data?.result?.[0]) return; - const schemaKeys = Object.keys(table.schema); + const parsedQuery = parser.astify(query); + const columnKeys = parsedQuery.columns.map((column) => column.expr.column); const result = data.result[0]; - const columnKeys = result[0] - .map((columnKey) => { - const schemaKey = schemaKeys.find((schemaKey) => schemaKey.toLowerCase() === columnKey); - return schemaKey || columnKey; - }) - .filter((key) => schemaKeys.includes(key)); const rows = result.slice(1).map((row) => Object.fromEntries(columnKeys.map((key, index) => [key, row[index]]))); return { From c2e7109095ce03f18652aceef8a7ed66e1cc86d0 Mon Sep 17 00:00:00 2001 From: karooolis Date: Mon, 21 Oct 2024 10:26:30 +0300 Subject: [PATCH 02/13] do not show data if error --- .../[worldAddress]/explore/TablesViewer.tsx | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx index 3d558c0539..504f930ce4 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx @@ -99,6 +99,8 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri }, }); + console.log("error:", error); + return ( <>
@@ -125,22 +127,23 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
- {reactTable.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - - ); - })} - - ))} + {!isError && + reactTable.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} - {reactTable.getRowModel().rows?.length ? ( + {!isError && reactTable.getRowModel().rows?.length ? ( reactTable.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( From fe03549b9655fae2143b3cfc212a671073d2d7a9 Mon Sep 17 00:00:00 2001 From: karooolis Date: Mon, 21 Oct 2024 10:34:19 +0300 Subject: [PATCH 03/13] add total rows count --- .../worlds/[worldAddress]/explore/TablesViewer.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx index 504f930ce4..e61d1c92e3 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx @@ -99,8 +99,6 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri }, }); - console.log("error:", error); - return ( <>
@@ -176,6 +174,10 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
+
+ {tableData && `Total rows: ${tableData.rows.length.toLocaleString()}`} +
+
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/consts.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/consts.ts index cca942027f..acbc6a9f10 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/consts.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/consts.ts @@ -3,7 +3,8 @@ import { editor } from "monaco-editor/esm/vs/editor/editor.api"; export const monacoOptions: editor.IStandaloneEditorConstructionOptions = { fontSize: 14, fontWeight: "normal", - wordWrap: "off", + wordWrap: "on", + wrappingStrategy: "advanced", lineNumbers: "off", lineNumbersMinChars: 0, overviewRulerLanes: 0, @@ -13,6 +14,7 @@ export const monacoOptions: editor.IStandaloneEditorConstructionOptions = { glyphMargin: false, folding: false, scrollBeyondLastColumn: 0, + scrollBeyondLastLine: false, scrollbar: { horizontal: "hidden", vertical: "hidden", diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index 3603419860..ebb5337d4c 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -20,16 +20,17 @@ export function useQueryValidator(table?: Table) { (value: string) => { if (!monaco || !table) return true; + const decodedValue = decodeURIComponent(value); try { - const ast = sqlParser.astify(value); + const ast = sqlParser.astify(decodedValue); if ("columns" in ast && Array.isArray(ast.columns)) { for (const column of ast.columns) { const columnName = column.expr.column; if (!Object.keys(table.schema).includes(columnName)) { setErrorMarker({ message: `Column '${columnName}' does not exist in the table schema.`, - startColumn: value.indexOf(columnName) + 1, - endColumn: value.indexOf(columnName) + columnName.length + 1, + startColumn: decodedValue.indexOf(columnName) + 1, + endColumn: decodedValue.indexOf(columnName) + columnName.length + 1, }); return false; } @@ -45,8 +46,8 @@ export function useQueryValidator(table?: Table) { if (selectedTableName !== tableName) { setErrorMarker({ message: `Only '${tableName}' is available for this query.`, - startColumn: value.indexOf(selectedTableName) + 1, - endColumn: value.indexOf(selectedTableName) + selectedTableName.length + 1, + startColumn: decodedValue.indexOf(selectedTableName) + 1, + endColumn: decodedValue.indexOf(selectedTableName) + selectedTableName.length + 1, }); return false; } @@ -61,7 +62,7 @@ export function useQueryValidator(table?: Table) { setErrorMarker({ message: error.message, startColumn: 1, - endColumn: value.length + 1, + endColumn: decodedValue.length + 1, }); } return false; diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts index 9ce5d6496c..b78ee8024b 100644 --- a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts +++ b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts @@ -22,9 +22,10 @@ export type TableData = { export function useTableDataQuery({ table, query }: Props) { const { chainName, worldAddress } = useParams(); const { id: chainId } = useChain(); + const decodedQuery = decodeURIComponent(query); return useQuery({ - queryKey: ["tableData", chainName, worldAddress, query], + queryKey: ["tableData", chainName, worldAddress, decodedQuery], queryFn: async () => { const indexer = indexerForChainId(chainId); const response = await fetch(indexer.url, { @@ -35,7 +36,7 @@ export function useTableDataQuery({ table, query }: Props) { body: JSON.stringify([ { address: worldAddress as Hex, - query, + query: decodedQuery, }, ]), }); @@ -50,7 +51,7 @@ export function useTableDataQuery({ table, query }: Props) { select: (data: DozerResponse) => { if (!table || !data?.result?.[0]) return; - const parsedQuery = parser.astify(query); + const parsedQuery = parser.astify(decodedQuery); const columnKeys = parsedQuery.columns.map((column) => column.expr.column); const result = data.result[0]; const rows = result.slice(1).map((row) => Object.fromEntries(columnKeys.map((key, index) => [key, row[index]]))); From 255eecb85e99ac619fa98e462c8c6453afa3acd1 Mon Sep 17 00:00:00 2001 From: karooolis Date: Mon, 21 Oct 2024 12:13:00 +0300 Subject: [PATCH 05/13] add multiline sql editor support --- .../[worldAddress]/explore/SQLEditor.tsx | 29 +++++++------------ .../explore/useQueryValidator.ts | 16 +++++----- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx index 2a802ee427..f179d693df 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx @@ -18,6 +18,8 @@ type Props = { }; export function SQLEditor({ table }: Props) { + const editorRef = useRef(null); + const containerRef = useRef(null); const [isFocused, setIsFocused] = useState(false); const [query, setQuery] = useQueryState("query", { defaultValue: "" }); const validateQuery = useQueryValidator(table); @@ -31,7 +33,7 @@ export function SQLEditor({ table }: Props) { const handleSubmit = form.handleSubmit((data) => { if (validateQuery(data.query)) { - setQuery(query); + setQuery(data.query); } }); @@ -39,13 +41,8 @@ export function SQLEditor({ table }: Props) { form.reset({ query }); }, [query, form]); - const editorRef = useRef(null); - const containerRef = useRef(null); - const updateHeight = () => { if (editorRef.current) { - console.log("UPDATE HEIGHT"); - const contentHeight = Math.min(200, editorRef.current.getContentHeight()); if (containerRef.current) { containerRef.current.style.height = `${contentHeight}px`; @@ -61,19 +58,15 @@ export function SQLEditor({ table }: Props) { return (
( -
+
{ - field.onChange(encodeURIComponent(value)); - updateHeight(); - }} + onChange={(value) => field.onChange(encodeURIComponent(value))} onMount={(editor) => { editorRef.current = editor; + updateHeight(); + editor.onDidContentSizeChange(updateHeight); editor.onDidFocusEditorText(() => { setIsFocused(true); }); - editor.onDidBlurEditorText(() => { setIsFocused(false); }); diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index ebb5337d4c..cdb4a6c03f 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -17,20 +17,20 @@ export function useQueryValidator(table?: Table) { const setErrorMarker = useMonacoErrorMarker(); return useCallback( - (value: string) => { + (query: string) => { if (!monaco || !table) return true; - const decodedValue = decodeURIComponent(value); + const decodedQuery = decodeURIComponent(query); try { - const ast = sqlParser.astify(decodedValue); + const ast = sqlParser.astify(decodedQuery); if ("columns" in ast && Array.isArray(ast.columns)) { for (const column of ast.columns) { const columnName = column.expr.column; if (!Object.keys(table.schema).includes(columnName)) { setErrorMarker({ message: `Column '${columnName}' does not exist in the table schema.`, - startColumn: decodedValue.indexOf(columnName) + 1, - endColumn: decodedValue.indexOf(columnName) + columnName.length + 1, + startColumn: decodedQuery.indexOf(columnName) + 1, + endColumn: decodedQuery.indexOf(columnName) + columnName.length + 1, }); return false; } @@ -46,8 +46,8 @@ export function useQueryValidator(table?: Table) { if (selectedTableName !== tableName) { setErrorMarker({ message: `Only '${tableName}' is available for this query.`, - startColumn: decodedValue.indexOf(selectedTableName) + 1, - endColumn: decodedValue.indexOf(selectedTableName) + selectedTableName.length + 1, + startColumn: decodedQuery.indexOf(selectedTableName) + 1, + endColumn: decodedQuery.indexOf(selectedTableName) + selectedTableName.length + 1, }); return false; } @@ -62,7 +62,7 @@ export function useQueryValidator(table?: Table) { setErrorMarker({ message: error.message, startColumn: 1, - endColumn: decodedValue.length + 1, + endColumn: decodedQuery.length + 1, }); } return false; From d10ff00f4a8dd2b547eaada48fc2e0fe630ab83f Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:23:24 +0300 Subject: [PATCH 06/13] find error line --- .../explore/useMonacoErrorMarker.ts | 18 +++++++-- .../explore/useQueryValidator.ts | 37 ++++++++++++++++--- .../(explorer)/queries/useTableDataQuery.ts | 12 +++--- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useMonacoErrorMarker.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useMonacoErrorMarker.ts index 27134fc3dd..03aebc2698 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useMonacoErrorMarker.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useMonacoErrorMarker.ts @@ -4,15 +4,27 @@ import { useMonaco } from "@monaco-editor/react"; export function useMonacoErrorMarker() { const monaco = useMonaco(); return useCallback( - ({ message, startColumn, endColumn }: { message: string; startColumn: number; endColumn: number }) => { + ({ + message, + startLineNumber, + endLineNumber, + startColumn, + endColumn, + }: { + message: string; + startLineNumber: number; + endLineNumber: number; + startColumn: number; + endColumn: number; + }) => { if (monaco) { monaco.editor.setModelMarkers(monaco.editor.getModels()[0], "sql", [ { severity: monaco.MarkerSeverity.Error, message, - startLineNumber: 1, + startLineNumber, + endLineNumber, startColumn, - endLineNumber: 1, endColumn, }, ]); diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index cdb4a6c03f..b8c9fa2c7a 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -10,6 +10,29 @@ import { useMonacoErrorMarker } from "./useMonacoErrorMarker"; const sqlParser = new Parser(); +function findErrorPosition(query: string, erroredQueryStr: string) { + const lines = query.split("\n"); + let startLineNumber = 1; + let startColumn = 1; + let currentPosition = 0; + + for (let i = 0; i < lines.length; i++) { + if (currentPosition + lines[i].length >= query.indexOf(erroredQueryStr)) { + startLineNumber = i + 1; + startColumn = query.indexOf(erroredQueryStr) - currentPosition + 1; + break; + } + currentPosition += lines[i].length + 1; // +1 for newline character + } + + return { + startLineNumber, + endLineNumber: startLineNumber, + startColumn, + endColumn: startColumn + erroredQueryStr.length, + }; +} + export function useQueryValidator(table?: Table) { const monaco = useMonaco(); const { worldAddress } = useParams(); @@ -27,10 +50,10 @@ export function useQueryValidator(table?: Table) { for (const column of ast.columns) { const columnName = column.expr.column; if (!Object.keys(table.schema).includes(columnName)) { + const position = findErrorPosition(decodedQuery, columnName); setErrorMarker({ message: `Column '${columnName}' does not exist in the table schema.`, - startColumn: decodedQuery.indexOf(columnName) + 1, - endColumn: decodedQuery.indexOf(columnName) + columnName.length + 1, + ...position, }); return false; } @@ -44,10 +67,10 @@ export function useQueryValidator(table?: Table) { const tableName = constructTableName(table, worldAddress as Address, chainId); if (selectedTableName !== tableName) { + const position = findErrorPosition(decodedQuery, selectedTableName); setErrorMarker({ message: `Only '${tableName}' is available for this query.`, - startColumn: decodedQuery.indexOf(selectedTableName) + 1, - endColumn: decodedQuery.indexOf(selectedTableName) + selectedTableName.length + 1, + ...position, }); return false; } @@ -59,10 +82,14 @@ export function useQueryValidator(table?: Table) { return true; } catch (error) { if (error instanceof Error) { + // For general errors, set the error for the entire query + const lines = decodedQuery.split("\n"); setErrorMarker({ message: error.message, + startLineNumber: 1, + endLineNumber: lines.length, startColumn: 1, - endColumn: decodedQuery.length + 1, + endColumn: lines[lines.length - 1].length + 1, }); } return false; diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts index b78ee8024b..b5e4da0b91 100644 --- a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts +++ b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts @@ -1,5 +1,4 @@ import { useParams } from "next/navigation"; -import { Parser } from "node-sql-parser"; import { Hex } from "viem"; import { Table } from "@latticexyz/config"; import { useQuery } from "@tanstack/react-query"; @@ -12,8 +11,6 @@ type Props = { query: string | undefined; }; -const parser = new Parser(); - export type TableData = { columns: string[]; rows: Record[]; @@ -51,9 +48,14 @@ export function useTableDataQuery({ table, query }: Props) { select: (data: DozerResponse) => { if (!table || !data?.result?.[0]) return; - const parsedQuery = parser.astify(decodedQuery); - const columnKeys = parsedQuery.columns.map((column) => column.expr.column); + const schemaKeys = Object.keys(table.schema); const result = data.result[0]; + const columnKeys = result[0] + .map((columnKey) => { + const schemaKey = schemaKeys.find((schemaKey) => schemaKey.toLowerCase() === columnKey); + return schemaKey || columnKey; + }) + .filter((key) => schemaKeys.includes(key)); const rows = result.slice(1).map((row) => Object.fromEntries(columnKeys.map((key, index) => [key, row[index]]))); return { From be5feba7275d552ac4b4498c9831f74a81ae1147 Mon Sep 17 00:00:00 2001 From: Karolis Ramanauskas Date: Wed, 23 Oct 2024 10:26:58 +0300 Subject: [PATCH 07/13] Create good-donuts-deliver.md --- .changeset/good-donuts-deliver.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/good-donuts-deliver.md diff --git a/.changeset/good-donuts-deliver.md b/.changeset/good-donuts-deliver.md new file mode 100644 index 0000000000..ebbf9ebe74 --- /dev/null +++ b/.changeset/good-donuts-deliver.md @@ -0,0 +1,5 @@ +--- +"@latticexyz/explorer": patch +--- + +The SQL query editor now supports multi-line input. From 8a5273918a3cf9ed5612ea7cb48264e0bf72b4af Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:28:57 +0300 Subject: [PATCH 08/13] undo tablesviewer change --- .../[worldAddress]/explore/SQLEditor.tsx | 1 - .../[worldAddress]/explore/TablesViewer.tsx | 29 +++++++++---------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx index f179d693df..31d691138c 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx @@ -68,7 +68,6 @@ export function SQLEditor({ table }: Props) { render={({ field }) => (
- {!isError && - reactTable.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - - ); - })} - - ))} + {reactTable.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} + + ))} - {!isError && reactTable.getRowModel().rows?.length ? ( + {reactTable.getRowModel().rows?.length ? ( reactTable.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( From b47b3c8ce3a926950dc0ea77ba864be07283e6f4 Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:29:44 +0300 Subject: [PATCH 09/13] remove comment --- .../worlds/[worldAddress]/explore/useQueryValidator.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index b8c9fa2c7a..2b02201464 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -82,7 +82,6 @@ export function useQueryValidator(table?: Table) { return true; } catch (error) { if (error instanceof Error) { - // For general errors, set the error for the entire query const lines = decodedQuery.split("\n"); setErrorMarker({ message: error.message, From 056937cbfe778ee7186c7aa85d9dadfccc089257 Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:31:07 +0300 Subject: [PATCH 10/13] refactor findErrorPosition --- .../worlds/[worldAddress]/explore/useQueryValidator.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index 2b02201464..b4a3fc2117 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -50,10 +50,9 @@ export function useQueryValidator(table?: Table) { for (const column of ast.columns) { const columnName = column.expr.column; if (!Object.keys(table.schema).includes(columnName)) { - const position = findErrorPosition(decodedQuery, columnName); setErrorMarker({ message: `Column '${columnName}' does not exist in the table schema.`, - ...position, + ...findErrorPosition(decodedQuery, columnName), }); return false; } @@ -67,10 +66,9 @@ export function useQueryValidator(table?: Table) { const tableName = constructTableName(table, worldAddress as Address, chainId); if (selectedTableName !== tableName) { - const position = findErrorPosition(decodedQuery, selectedTableName); setErrorMarker({ message: `Only '${tableName}' is available for this query.`, - ...position, + ...findErrorPosition(decodedQuery, selectedTableName), }); return false; } From bc325210cd148b2d7f2b61b5737962a5e5cf1435 Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:33:17 +0300 Subject: [PATCH 11/13] inline fn --- .../worlds/[worldAddress]/explore/SQLEditor.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx index 31d691138c..a289cdaa20 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx @@ -79,13 +79,8 @@ export function SQLEditor({ table }: Props) { updateHeight(); editor.onDidContentSizeChange(updateHeight); - - editor.onDidFocusEditorText(() => { - setIsFocused(true); - }); - editor.onDidBlurEditorText(() => { - setIsFocused(false); - }); + editor.onDidFocusEditorText(() => setIsFocused(true)); + editor.onDidBlurEditorText(() => setIsFocused(false)); }} loading={null} /> From 86a475375312a2dc4caea7cfea6fc20b25ca8e1a Mon Sep 17 00:00:00 2001 From: karooolis Date: Wed, 23 Oct 2024 10:43:10 +0300 Subject: [PATCH 12/13] fix editorRef type --- .../[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx index a289cdaa20..e619ac0800 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx @@ -1,6 +1,7 @@ "use client"; import { PlayIcon } from "lucide-react"; +import { editor } from "monaco-editor/esm/vs/editor/editor.api"; import { useQueryState } from "nuqs"; import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; @@ -18,7 +19,7 @@ type Props = { }; export function SQLEditor({ table }: Props) { - const editorRef = useRef(null); + const editorRef = useRef(null); const containerRef = useRef(null); const [isFocused, setIsFocused] = useState(false); const [query, setQuery] = useQueryState("query", { defaultValue: "" }); @@ -73,7 +74,7 @@ export function SQLEditor({ table }: Props) { value={decodeURIComponent(field.value)} options={monacoOptions} language="sql" - onChange={(value) => field.onChange(encodeURIComponent(value))} + onChange={(value) => field.onChange(encodeURIComponent(value ?? ""))} onMount={(editor) => { editorRef.current = editor; From e5c3ea7f20a7546abe9a898470bf6f196260737e Mon Sep 17 00:00:00 2001 From: Karolis Ramanauskas Date: Wed, 23 Oct 2024 17:40:37 +0300 Subject: [PATCH 13/13] Update packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts Co-authored-by: Kevin Ingersoll --- .../worlds/[worldAddress]/explore/useQueryValidator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts index b4a3fc2117..131246840b 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts @@ -10,7 +10,7 @@ import { useMonacoErrorMarker } from "./useMonacoErrorMarker"; const sqlParser = new Parser(); -function findErrorPosition(query: string, erroredQueryStr: string) { +function findErrorPosition(query: string, target: string) { const lines = query.split("\n"); let startLineNumber = 1; let startColumn = 1;