feat(explorer): tables viewer pagination (#3426)

Author: karooolis

.changeset/metal-years-raise.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The Explore tab's table viewer now supports pagination through limit/offset clauses in SQL queries.

examples/local-explorer/.gitignore

@@ -5,3 +5,6 @@ node_modules
 # sqlite indexer data
 *.db
 *.db-journal
+
+# worlds configuration
+worlds.json

examples/local-explorer/packages/contracts/worlds.json

@@ -1,7 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import { parseAsString, useQueryState } from "nuqs";
+import { useQueryState } from "nuqs";
 import { Hex } from "viem";
 import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
@@ -12,39 +12,55 @@ import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { SQLEditor } from "./SQLEditor";
 import { TableSelector } from "./TableSelector";
 import { TablesViewer } from "./TablesViewer";
+import { usePaginationState } from "./hooks/usePaginationState";
+import { useSQLQueryState } from "./hooks/useSQLQueryState";
 
 export function Explorer() {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
   const [isLiveQuery, setIsLiveQuery] = useState(false);
-  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
+  const [{ pageSize }, setPagination] = usePaginationState();
+  const [query, setQuery] = useSQLQueryState();
   const [selectedTableId] = useQueryState("tableId");
   const prevSelectedTableId = usePrevious(selectedTableId);
-
   const { data: tables } = useTablesQuery();
   const table = tables?.find(({ tableId }) => tableId === selectedTableId);
 
   useEffect(() => {
     if (table && (!query || prevSelectedTableId !== selectedTableId)) {
       const tableName = constructTableName(table, worldAddress as Hex, chainId);
-
       if (indexer.type === "sqlite") {
         setQuery(`SELECT * FROM "${tableName}";`);
       } else {
         const columns = Object.keys(table.schema).map((column) => `"${column}"`);
-        setQuery(`SELECT ${columns.join(", ")} FROM "${tableName}";`);
+        setQuery(`SELECT ${columns.join(", ")} FROM "${tableName}" LIMIT ${pageSize} OFFSET 0;`);
+        setPagination({
+          pageIndex: 0,
+          pageSize,
+        });
       }
     }
-  }, [chainId, setQuery, selectedTableId, table, worldAddress, prevSelectedTableId, query, indexer.type]);
+  }, [
+    chainId,
+    setQuery,
+    selectedTableId,
+    table,
+    worldAddress,
+    prevSelectedTableId,
+    query,
+    indexer.type,
+    pageSize,
+    setPagination,
+  ]);
 
   return (
     <div className="space-y-4">
       <TableSelector tables={tables} />
       {indexer.type !== "sqlite" && (
         <SQLEditor table={table} isLiveQuery={isLiveQuery} setIsLiveQuery={setIsLiveQuery} />
       )}
-      <TablesViewer table={table} query={query} isLiveQuery={isLiveQuery} />
+      <TablesViewer table={table} isLiveQuery={isLiveQuery} />
     </div>
   );
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx

@@ -2,7 +2,6 @@
 
 import { CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, 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";
 import { Table } from "@latticexyz/config";
@@ -12,9 +11,12 @@ import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormField } from "../../../../../../components/ui/Form";
 import { cn } from "../../../../../../utils";
 import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
-import { monacoOptions } from "./consts";
+import { PAGE_SIZE_OPTIONS, monacoOptions } from "./consts";
+import { usePaginationState } from "./hooks/usePaginationState";
+import { useSQLQueryState } from "./hooks/useSQLQueryState";
 import { useMonacoSuggestions } from "./useMonacoSuggestions";
 import { useQueryValidator } from "./useQueryValidator";
+import { getLimitOffset } from "./utils/getLimitOffset";
 
 type Props = {
   table?: Table;
@@ -27,7 +29,9 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
   const [isUserTriggeredRefetch, setIsUserTriggeredRefetch] = useState(false);
-  const [query, setQuery] = useQueryState("query", { defaultValue: "" });
+  const [pagination, setPagination] = usePaginationState();
+  const [query, setQuery] = useSQLQueryState();
+
   const validateQuery = useQueryValidator(table);
   const {
     data: tableData,
@@ -48,9 +52,28 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   });
   const currentQuery = form.watch("query");
 
-  const handleSubmit = form.handleSubmit((data) => {
-    if (validateQuery(data.query)) {
-      setQuery(data.query);
+  const handleSubmit = form.handleSubmit(({ query }) => {
+    if (validateQuery(query)) {
+      setQuery(query);
+
+      // Set the page based on the query
+      const { limit, offset } = getLimitOffset(query);
+      if (limit == null || offset == null) {
+        setPagination({
+          ...pagination,
+          pageIndex: 0,
+        });
+      } else if (PAGE_SIZE_OPTIONS.includes(limit) && (offset === 0 || offset % limit === 0)) {
+        setPagination({
+          pageSize: limit,
+          pageIndex: offset / limit,
+        });
+      } else {
+        setPagination({
+          ...pagination,
+          pageIndex: 0,
+        });
+      }
 
       setIsUserTriggeredRefetch(true);
       refetch().finally(() => setIsUserTriggeredRefetch(false));
@@ -100,10 +123,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
                       id: "executeSQL",
                       label: "Execute SQL command",
                       keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
-                      run: () => {
-                        console.log("EXECUTING SQL COMMAND");
-                        handleSubmit();
-                      },
+                      run: () => handleSubmit(),
                     });
 
                     updateHeight();