fix(explorer): type-based sorting (#3340)

Author: karooolis

.changeset/dirty-lemons-complain.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The columns in the Explore tab table are now sorted correctly according to their types.

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

@@ -18,30 +18,26 @@ import { Button } from "../../../../../../components/ui/Button";
 import { Input } from "../../../../../../components/ui/Input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table";
 import { cn } from "../../../../../../utils";
-import { TableData, useTableDataQuery } from "../../../../queries/useTableDataQuery";
+import { TData, TDataRow, useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { EditableTableCell } from "./EditableTableCell";
+import { typeSortingFn } from "./utils/typeSortingFn";
 
 const initialSortingState: SortingState = [];
-const initialRows: TableData["rows"] = [];
+const initialRows: TData["rows"] = [];
 
 export function TablesViewer({ table, query }: { table?: TableType; query?: string }) {
-  const {
-    data: tableData,
-    isLoading: isTableDataLoading,
-    isFetched,
-    isError,
-    error,
-  } = useTableDataQuery({ table, query });
-  const isLoading = isTableDataLoading || !isFetched;
-
+  const { data: tableData, isLoading: isTDataLoading, isFetched, isError, error } = useTableDataQuery({ table, query });
+  const isLoading = isTDataLoading || !isFetched;
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
 
-  const tableColumns: ColumnDef<Record<string, unknown>>[] = useMemo(() => {
+  const tableColumns: ColumnDef<TDataRow>[] = useMemo(() => {
     if (!table || !tableData) return [];
 
     return tableData.columns.map((name) => {
-      const type = table?.schema[name]?.type;
+      const schema = table?.schema[name];
+      const type = schema?.type;
+
       return {
         accessorKey: name,
         header: ({ column }) => {
@@ -57,6 +53,7 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
             </Button>
           );
         },
+        sortingFn: (rowA, rowB, columnId) => typeSortingFn(rowA, rowB, columnId, type),
         cell: ({ row }) => {
           const namespace = table?.namespace;
           const keySchema = getKeySchema(table);

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/utils/typeSortingFn.ts

@@ -0,0 +1,26 @@
+import { bigIntSort } from "@latticexyz/common/utils";
+import { AbiType } from "@latticexyz/config";
+import { Row } from "@tanstack/react-table";
+import { TDataRow } from "../../../../../queries/useTableDataQuery";
+
+export function typeSortingFn(rowA: Row<TDataRow>, rowB: Row<TDataRow>, columnId: string, type?: AbiType) {
+  const a = rowA.getValue(columnId);
+  const b = rowB.getValue(columnId);
+
+  if (type?.startsWith("uint") || type?.startsWith("int")) {
+    const aBig = BigInt(a?.toString() || "0");
+    const bBig = BigInt(b?.toString() || "0");
+    return bigIntSort(aBig, bBig);
+  }
+
+  if (typeof a === "bigint" || typeof b === "bigint") {
+    const aBig = BigInt(a?.toString() || "0");
+    const bBig = BigInt(b?.toString() || "0");
+    return bigIntSort(aBig, bBig);
+  }
+
+  if (a == null) return 1;
+  if (b == null) return -1;
+
+  return a < b ? -1 : a > b ? 1 : 0;
+}

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

@@ -11,17 +11,18 @@ type Props = {
   query: string | undefined;
 };
 
-export type TableData = {
+export type TDataRow = Record<string, unknown>;
+export type TData = {
   columns: string[];
-  rows: Record<string, unknown>[];
+  rows: TDataRow[];
 };
 
 export function useTableDataQuery({ table, query }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const decodedQuery = decodeURIComponent(query ?? "");
 
-  return useQuery<DozerResponse, Error, TableData | undefined>({
+  return useQuery<DozerResponse, Error, TData | undefined>({
     queryKey: ["tableData", chainName, worldAddress, decodedQuery],
     queryFn: async () => {
       const indexer = indexerForChainId(chainId);
@@ -45,7 +46,7 @@ export function useTableDataQuery({ table, query }: Props) {
 
       return data;
     },
-    select: (data: DozerResponse): TableData | undefined => {
+    select: (data: DozerResponse): TData | undefined => {
       if (!table || !data?.result?.[0]) return undefined;
 
       const result = data.result[0];