feat(explorer): pause/resume live query

.changeset/fair-rocks-exercise.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+SQL live queries in the Explore view table can now be paused and resumed.

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

@@ -3,7 +3,7 @@
 import { useParams } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
 import { Hex } from "viem";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
 import { usePrevious } from "../../../../hooks/usePrevious";
 import { useTablesQuery } from "../../../../queries/useTablesQuery";
@@ -17,6 +17,7 @@ export function Explorer() {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
+  const [isPaused, setIsPaused] = useState(true);
   const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
   const [selectedTableId] = useQueryState("tableId");
   const prevSelectedTableId = usePrevious(selectedTableId);
@@ -40,8 +41,8 @@ export function Explorer() {
   return (
     <div className="space-y-4">
       <TableSelector tables={tables} />
-      {indexer.type !== "sqlite" && <SQLEditor table={table} />}
-      <TablesViewer table={table} query={query} />
+      {indexer.type !== "sqlite" && <SQLEditor table={table} isPaused={isPaused} setIsPaused={setIsPaused} />}
+      <TablesViewer table={table} query={query} isPaused={isPaused} />
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CommandIcon, CornerDownLeft } from "lucide-react";
+import { CommandIcon, CornerDownLeft, 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";
@@ -16,9 +16,11 @@ import { useQueryValidator } from "./useQueryValidator";
 
 type Props = {
   table?: Table;
+  isPaused: boolean;
+  setIsPaused: (isPaused: boolean) => void;
 };
 
-export function SQLEditor({ table }: Props) {
+export function SQLEditor({ table, isPaused, setIsPaused }: Props) {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -98,7 +100,11 @@ export function SQLEditor({ table }: Props) {
           />
         </div>
 
-        <div className="flex justify-end">
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" size="icon" onClick={() => setIsPaused(!isPaused)}>
+            {isPaused ? <PlayIcon className="h-4 w-4" /> : <PauseIcon className="h-4 w-4" />}
+          </Button>
+
           <Button className="flex gap-2 pl-4 pr-3" type="submit">
             Run
             <span className="flex items-center gap-0.5 text-white/60">

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

@@ -26,8 +26,20 @@ import { typeSortingFn } from "./utils/typeSortingFn";
 const initialSortingState: SortingState = [];
 const initialRows: TData["rows"] = [];
 
-export function TablesViewer({ table, query }: { table?: TableType; query?: string }) {
-  const { data: tableData, isLoading: isTDataLoading, isFetched, isError, error } = useTableDataQuery({ table, query });
+type Props = {
+  table?: TableType;
+  query?: string;
+  isPaused: boolean;
+};
+
+export function TablesViewer({ table, query, isPaused }: Props) {
+  const {
+    data: tableData,
+    isLoading: isTDataLoading,
+    isFetched,
+    isError,
+    error,
+  } = useTableDataQuery({ table, query, isPaused });
   const isLoading = isTDataLoading || !isFetched;
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));

packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts

@@ -9,6 +9,7 @@ import { indexerForChainId } from "../utils/indexerForChainId";
 type Props = {
   table: Table | undefined;
   query: string | undefined;
+  isPaused: boolean;
 };
 
 export type TDataRow = Record<string, unknown>;
@@ -17,7 +18,7 @@ export type TData = {
   rows: TDataRow[];
 };
 
-export function useTableDataQuery({ table, query }: Props) {
+export function useTableDataQuery({ table, query, isPaused }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const decodedQuery = decodeURIComponent(query ?? "");
@@ -83,6 +84,7 @@ export function useTableDataQuery({ table, query }: Props) {
     enabled: !!table && !!query,
     refetchInterval: (query) => {
       if (query.state.error) return false;
+      else if (isPaused) return false;
       return 1000;
     },
   });