diff --git a/.changeset/swift-poets-tan.md b/.changeset/swift-poets-tan.md new file mode 100644 index 0000000000..82d0122065 --- /dev/null +++ b/.changeset/swift-poets-tan.md @@ -0,0 +1,5 @@ +--- +"@latticexyz/explorer": patch +--- + +SQL query execution time in Explore table is now measured and displayed. diff --git a/packages/explorer/package.json b/packages/explorer/package.json index 0577642d9d..a3dc540f02 100644 --- a/packages/explorer/package.json +++ b/packages/explorer/package.json @@ -54,6 +54,7 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.6", "@radix-ui/themes": "^3.0.5", "@rainbow-me/rainbowkit": "^2.1.5", "@tanstack/react-query": "^5.51.3", diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx index 3e6cc5275d..fcded2dd56 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx @@ -17,7 +17,7 @@ export function Explorer() { const { worldAddress } = useParams(); const { id: chainId } = useChain(); const indexer = indexerForChainId(chainId); - const [isLiveQuery, setIsLiveQuery] = useState(true); + const [isLiveQuery, setIsLiveQuery] = useState(false); const [query, setQuery] = useQueryState("query", parseAsString.withDefault("")); const [selectedTableId] = useQueryState("tableId"); const prevSelectedTableId = usePrevious(selectedTableId); 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 5409dec4d4..249327a804 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 @@ -7,9 +7,11 @@ import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { Table } from "@latticexyz/config"; import Editor from "@monaco-editor/react"; +import { Tooltip } from "../../../../../../components/Tooltip"; 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 { useMonacoSuggestions } from "./useMonacoSuggestions"; import { useQueryValidator } from "./useQueryValidator"; @@ -26,6 +28,11 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) { const [isFocused, setIsFocused] = useState(false); const [query, setQuery] = useQueryState("query", { defaultValue: "" }); const validateQuery = useQueryValidator(table); + const { data: tableData } = useTableDataQuery({ + table, + query, + isLiveQuery, + }); useMonacoSuggestions(table); const form = useForm({ @@ -107,15 +114,33 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) { ) : null} -
- +
+ {tableData ? ( + <> + + + + + {tableData ? Math.round(tableData.queryDuration) : 0}ms + + + ยท + + {tableData?.rows.length ?? 0} row{tableData?.rows.length !== 1 ? "s" : ""} + + + + + + + + ) : null}