latticexyz · karooolis · Oct 23, 2024 · Oct 21, 2024 · Oct 21, 2024 · Oct 21, 2024
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The SQL query editor now supports multi-line input.
@@ -1,8 +1,9 @@
 "use client";
 
 import { PlayIcon } from "lucide-react";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { useQueryState } from "nuqs";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Table } from "@latticexyz/config";
 import Editor from "@monaco-editor/react";
@@ -18,6 +19,8 @@ type Props = {
 };
 
 export function SQLEditor({ table }: Props) {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
   const [query, setQuery] = useQueryState("query", { defaultValue: "" });
   const validateQuery = useQueryValidator(table);
@@ -39,44 +42,54 @@ export function SQLEditor({ table }: Props) {
     form.reset({ query });
   }, [query, form]);
 
+  const updateHeight = () => {
+    if (editorRef.current) {
+      const contentHeight = Math.min(200, editorRef.current.getContentHeight());
+      if (containerRef.current) {
+        containerRef.current.style.height = `${contentHeight}px`;
+      }
+
+      editorRef.current.layout({
+        width: editorRef.current.getLayoutInfo().width,
+        height: contentHeight,
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
-        className={cn(
-          "relative flex w-full flex-grow items-center justify-center bg-black align-middle",
-          "h-10 max-h-10 rounded-md border px-3 py-2 ring-offset-background",
-          {
-            "outline-none ring-2 ring-ring ring-offset-2": isFocused,
-          },
-        )}
+        className={cn("relative w-full rounded-md border bg-black px-3 py-2 ring-offset-background", {
+          "outline-none ring-2 ring-ring ring-offset-2": isFocused,
+        })}
         onSubmit={handleSubmit}
       >
         <FormField
           name="query"
           render={({ field }) => (
-            <Editor
-              width="100%"
-              height="21px"
-              theme="hc-black"
-              value={field.value}
-              options={monacoOptions}
-              language="sql"
-              onChange={(value) => field.onChange(value)}
-              onMount={(editor) => {
-                editor.onDidFocusEditorText(() => {
-                  setIsFocused(true);
-                });
+            <div ref={containerRef} className="min-h-[21px] w-full">
+              <Editor
+                width="100%"
+                theme="hc-black"
+                value={decodeURIComponent(field.value)}
+                options={monacoOptions}
+                language="sql"
+                onChange={(value) => field.onChange(encodeURIComponent(value ?? ""))}
+                onMount={(editor) => {
+                  editorRef.current = editor;
 
-                editor.onDidBlurEditorText(() => {
-                  setIsFocused(false);
-                });
-              }}
-              loading={null}
-            />
+                  updateHeight();
+                  editor.onDidContentSizeChange(updateHeight);
+                  editor.onDidFocusEditorText(() => setIsFocused(true));
+                  editor.onDidBlurEditorText(() => setIsFocused(false));
+                }}
+                loading={null}
+              />
+            </div>
           )}
         />
 
-        <Button className="absolute right-1 top-1 h-8 px-4" type="submit">
+        <Button className="absolute bottom-1 right-1 h-8 px-4" type="submit">
           <PlayIcon className="mr-1.5 h-3 w-3" /> Run
         </Button>
       </form>

@@ -173,6 +173,10 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
       </div>
 
       <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {tableData && `Total rows: ${tableData.rows.length.toLocaleString()}`}
+        </div>
+
         <div className="space-x-2">
           <Button
             variant="outline"

@@ -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",

@@ -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,
           },
         ]);

@@ -10,26 +10,49 @@ import { useMonacoErrorMarker } from "./useMonacoErrorMarker";
 
 const sqlParser = new Parser();
 
+function findErrorPosition(query: string, target: 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(target)) {
+      startLineNumber = i + 1;
+      startColumn = query.indexOf(target) - currentPosition + 1;
+      break;
+    }
+    currentPosition += lines[i].length + 1;
+  }
+
+  return {
+    startLineNumber,
+    endLineNumber: startLineNumber,
+    startColumn,
+    endColumn: startColumn + target.length,
+  };
+}
+
 export function useQueryValidator(table?: Table) {
   const monaco = useMonaco();
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const setErrorMarker = useMonacoErrorMarker();
 
   return useCallback(
-    (value: string) => {
+    (query: string) => {
       if (!monaco || !table) return true;
 
+      const decodedQuery = decodeURIComponent(query);
       try {
-        const ast = sqlParser.astify(value);
+        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: value.indexOf(columnName) + 1,
-                endColumn: value.indexOf(columnName) + columnName.length + 1,
+                ...findErrorPosition(decodedQuery, columnName),
               });
               return false;
             }
@@ -45,8 +68,7 @@ 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,
+                  ...findErrorPosition(decodedQuery, selectedTableName),
                 });
                 return false;
               }
@@ -58,10 +80,13 @@ export function useQueryValidator(table?: Table) {
         return true;
       } catch (error) {
         if (error instanceof Error) {
+          const lines = decodedQuery.split("\n");
           setErrorMarker({
             message: error.message,
+            startLineNumber: 1,
+            endLineNumber: lines.length,
             startColumn: 1,
-            endColumn: value.length + 1,
+            endColumn: lines[lines.length - 1].length + 1,
           });
         }
         return false;

@@ -19,9 +19,10 @@ export type TableData = {
 export function useTableDataQuery({ table, query }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
+  const decodedQuery = decodeURIComponent(query ?? "");
 
   return useQuery<DozerResponse, Error, TableData | undefined>({
-    queryKey: ["tableData", chainName, worldAddress, query],
+    queryKey: ["tableData", chainName, worldAddress, decodedQuery],
     queryFn: async () => {
       const indexer = indexerForChainId(chainId);
       const response = await fetch(indexer.url, {
@@ -32,7 +33,7 @@ export function useTableDataQuery({ table, query }: Props) {
         body: JSON.stringify([
           {
             address: worldAddress as Hex,
-            query,
+            query: decodedQuery,
           },
         ]),
       });