Table scrubber map

"use client"

import * as React from "react"
import { TableScrubberMap } from "@/components/candor/table-scrubber-map"
import { DataTable, type DataTableColumn, type DataTableQuery } from "@/components/candor/data-table"

type Run = { id: string; name: string; status: "passed" | "failed" | "slow"; seconds: number }

// 120 runs held in memory. The table and the map share one page: each one's `page` and `onPageChange` are the same state.
const runs: Run[] = Array.from({ length: 120 }, (_, i) => ({
  id: `run-${i + 1}`,
  name: `Nightly import #${i + 1}`,
  status: [4, 37, 41, 86].includes(i) ? "failed" : [38, 103].includes(i) ? "slow" : "passed",
  seconds: 40 + ((i * 7) % 30),
}))
const byId = new Map(runs.map((r) => [r.id, r]))
/** The flagged runs, by their position in the order the table shows the rows. */
const marksIn = (order: string[]) =>
  order.flatMap((id, index) => {
    const status = byId.get(id)?.status
    return status === undefined || status === "passed" ? [] : [{ index, kind: status }]
  })
const marks = marksIn(runs.map((r) => r.id))
const columns: DataTableColumn<Run>[] = [
  { id: "name", label: "Run", value: (r) => r.name },
  { id: "status", label: "Status", value: (r) => r.status },
  { id: "seconds", label: "Seconds", value: (r) => r.seconds, numeric: true },
]

export default function Example() {
  return (
    <div className="flex flex-col gap-8">
      <InMemory />
      <ServerMode />
    </div>
  )
}

/**
 * In memory: the table pages, searches and sorts the rows it holds, and turns to the page the map picks. The map's
 * marks are positions in the table's current order, which `onOrderChange` gives, so they stay true after a sort.
 */
function InMemory() {
  const [page, setPage] = React.useState(0)
  const [order, setOrder] = React.useState(() => runs.map((r) => r.id))
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
      <TableScrubberMap
        label="Flagged runs"
        total={order.length}
        pageSize={10}
        page={page}
        onPageChange={setPage}
        marks={marksIn(order)}
        kinds={{ failed: { label: "failed", tone: "destructive" }, slow: { label: "slow", tone: "warning" } }}
      />
      <DataTable<Run> title="Nightly imports" columns={columns} rows={runs} rowId={(r) => r.id} pageSize={10} page={page} onPageChange={setPage} onOrderChange={setOrder} className="min-w-0 flex-1" />
    </div>
  )
}

/** Server mode: the page goes to your server through `onQueryChange`; the map's `onPageChange` asks for it the same way. */
function ServerMode() {
  const [query, setQuery] = React.useState<DataTableQuery>({ search: "", sort: null, page: 0, pageSize: 10 })
  // Stands in for your server: one page of the runs, and how many there are.
  const shown = runs.slice(query.page * query.pageSize, (query.page + 1) * query.pageSize)
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
      <TableScrubberMap label="Flagged runs, from the server" total={runs.length} pageSize={query.pageSize} page={query.page} onPageChange={(p) => setQuery((q) => ({ ...q, page: p }))} marks={marks} />
      <DataTable<Run> title="Nightly imports (server)" columns={columns} rows={shown} rowId={(r) => r.id} pageSize={query.pageSize} total={runs.length} searchable={false} page={query.page} onQueryChange={setQuery} className="min-w-0 flex-1" />
    </div>
  )
}