From fc70e995246f6855687949d8e47ca9d1526d228c Mon Sep 17 00:00:00 2001 From: karooolis Date: Mon, 13 Jan 2025 17:16:29 +0200 Subject: [PATCH 1/6] display query time --- .../packages/contracts/worlds.json | 2 +- .../[worldAddress]/explore/Explorer.tsx | 2 +- .../[worldAddress]/explore/SQLEditor.tsx | 43 ++++++++++++---- .../[worldAddress]/explore/TablesViewer.tsx | 10 +++- .../(explorer)/queries/useTableDataQuery.ts | 13 +++-- packages/explorer/src/components/Tooltip.tsx | 19 +++++++ .../explorer/src/components/ui/Tooltip.tsx | 50 +++++++++++++++++++ 7 files changed, 123 insertions(+), 16 deletions(-) create mode 100644 packages/explorer/src/components/Tooltip.tsx create mode 100644 packages/explorer/src/components/ui/Tooltip.tsx diff --git a/examples/local-explorer/packages/contracts/worlds.json b/examples/local-explorer/packages/contracts/worlds.json index 6fed600155..5c28f34f27 100644 --- a/examples/local-explorer/packages/contracts/worlds.json +++ b/examples/local-explorer/packages/contracts/worlds.json @@ -1,5 +1,5 @@ { "31337": { - "address": "0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b" + "address": "0xfdf868ea710ffd8cd33b829c5aff79edd15ecd5f" } } \ No newline at end of file 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}