datool 0.0.4 → 0.0.6

package/src/client/components/viewer-settings.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import {
   DownloadIcon,
   EllipsisIcon,
+  LayoutGridIcon,
   MoonIcon,
   Settings2Icon,
   SunIcon,
@@ -38,9 +39,12 @@ type ViewerSettingsColumn = {
 
 type ViewerSettingsProps = {
   columns: ViewerSettingsColumn[]
+  groupedColumnIds: string[]
   isDisabled?: boolean
   onExportCsv: () => void
   onExportMarkdown: () => void
+  onClearGrouping: () => void
+  onToggleGrouping: (columnId: string, grouped: boolean) => void
   onToggleColumn: (columnId: string, visible: boolean) => void
   className?: string
 }
@@ -69,14 +73,26 @@ const THEME_OPTIONS: Array<{
 
 export function ViewerSettings({
   columns,
+  groupedColumnIds,
   isDisabled = false,
   onExportCsv,
   onExportMarkdown,
+  onClearGrouping,
+  onToggleGrouping,
   onToggleColumn,
   className,
 }: ViewerSettingsProps) {
   const { theme, setTheme } = useTheme()
   const canExport = !isDisabled && columns.length > 0
+  const groupedLabels = React.useMemo(
+    () =>
+      groupedColumnIds.flatMap((columnId) => {
+        const column = columns.find((candidate) => candidate.id === columnId)
+
+        return column ? [column.label] : []
+      }),
+    [columns, groupedColumnIds]
+  )
 
   return (
     <DropdownMenu>
@@ -131,6 +147,57 @@ export function ViewerSettings({
             ))}
           </DropdownMenuSubContent>
         </DropdownMenuSub>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger
+            className="min-h-9 text-sm"
+            disabled={isDisabled || columns.length === 0}
+          >
+            <LayoutGridIcon className="size-4 text-muted-foreground" />
+            Group rows
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="max-h-80 w-64 overflow-y-auto">
+            <DropdownMenuLabel>
+              {groupedLabels.length > 0
+                ? `Grouped by ${groupedLabels.join(", ")}`
+                : "Group rows by field"}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="min-h-9 text-sm"
+              disabled={groupedColumnIds.length === 0}
+              onSelect={(event) => {
+                event.preventDefault()
+                onClearGrouping()
+              }}
+            >
+              Clear grouping
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {columns.map((column) => (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={groupedColumnIds.includes(column.id)}
+                className="min-h-9 text-sm"
+                onSelect={(event) => {
+                  event.preventDefault()
+                }}
+                onCheckedChange={(checked) =>
+                  onToggleGrouping(column.id, checked === true)
+                }
+              >
+                <span className="flex min-w-0 items-center gap-2 pr-4">
+                  {column.kind ? (
+                    <DataTableColIcon
+                      kind={column.kind}
+                      className="size-4 shrink-0 text-muted-foreground"
+                    />
+                  ) : null}
+                  <span className="truncate">{column.label}</span>
+                </span>
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
         <DropdownMenuSub>
           <DropdownMenuSubTrigger className="min-h-9 text-sm">
             <SunIcon className="size-4 text-muted-foreground dark:hidden" />

package/src/client/index.css

@@ -17,6 +17,7 @@
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
+  --table-gap: oklch(0.967 0.001 286.375);
   --muted-foreground: oklch(0.552 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
@@ -52,6 +53,7 @@
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.274 0.006 286.033);
+  --table-gap: oklch(0.180 0.005 285.823);
   --muted-foreground: oklch(0.705 0.015 286.067);
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
@@ -97,6 +99,7 @@
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
   --color-muted: var(--muted);
+  --color-table-gap: var(--table-gap);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-secondary: var(--secondary);
   --color-primary-foreground: var(--primary-foreground);

package/src/client/lib/datool-url-state.ts

@@ -5,6 +5,7 @@ type PersistedTableState = {
   columnSizing?: Record<string, number>
   columnVisibility?: VisibilityState
   globalFilter?: string
+  groupBy?: string[]
   highlightedColumns?: Record<string, boolean>
   sorting?: unknown[]
 }
@@ -23,7 +24,9 @@ function getTableUrlParam(tableId: string) {
 
 function isDatoolUrlParam(key: string) {
   return (
-    key.startsWith(`${DATA_TABLE_URL_PARAM_PREFIX}${LOG_VIEWER_TABLE_ID_PREFIX}`) ||
+    key.startsWith(
+      `${DATA_TABLE_URL_PARAM_PREFIX}${LOG_VIEWER_TABLE_ID_PREFIX}`
+    ) ||
     (key.startsWith(`${LOG_VIEWER_TABLE_ID_PREFIX}-`) && key.endsWith("-search"))
   )
 }
@@ -57,6 +60,14 @@ function sanitizeColumnVisibility(
   )
 }
 
+function sanitizeGroupBy(groupBy: string[] | undefined, columnIds: string[]) {
+  const validIds = new Set(columnIds)
+
+  return (groupBy ?? []).filter((columnId, index, values) => {
+    return validIds.has(columnId) && values.indexOf(columnId) === index
+  })
+}
+
 function cleanUpDatoolParams(url: URL, tableId: string) {
   const activeSearchParam = getSearchUrlParam(tableId)
   const activeTableParam = getTableUrlParam(tableId)
@@ -89,7 +100,10 @@ export function readDatoolSearch(tableId: string) {
     return ""
   }
 
-  return new URL(window.location.href).searchParams.get(getSearchUrlParam(tableId)) ?? ""
+  return (
+    new URL(window.location.href).searchParams.get(getSearchUrlParam(tableId)) ??
+    ""
+  )
 }
 
 export function readDatoolColumnVisibility(
@@ -102,15 +116,21 @@ export function readDatoolColumnVisibility(
   )
 }
 
+export function readDatoolGrouping(tableId: string, columnIds: string[]) {
+  return sanitizeGroupBy(readPersistedTableState(tableId)?.groupBy, columnIds)
+}
+
 export function writeDatoolUrlState({
   columnIds,
   columnVisibility,
+  groupBy,
   search,
   selectedStreamId,
   tableId,
 }: {
   columnIds: string[]
   columnVisibility: VisibilityState
+  groupBy: string[]
   search: string
   selectedStreamId: string | null
   tableId: string
@@ -125,6 +145,7 @@ export function writeDatoolUrlState({
     columnVisibility,
     columnIds
   )
+  const nextGroupBy = sanitizeGroupBy(groupBy, columnIds)
   const nextTableState = {
     ...readPersistedTableState(tableId),
   } satisfies PersistedTableState
@@ -149,6 +170,12 @@ export function writeDatoolUrlState({
     delete nextTableState.columnVisibility
   }
 
+  if (nextGroupBy.length > 0) {
+    nextTableState.groupBy = nextGroupBy
+  } else {
+    delete nextTableState.groupBy
+  }
+
   if (Object.keys(nextTableState).length > 0) {
     url.searchParams.set(getTableUrlParam(tableId), JSON.stringify(nextTableState))
   } else {

package/src/node/config.ts

@@ -124,6 +124,25 @@ function assertActionShape(
   assertActionButtonShape(streamId, actionId, value.button)
 }
 
+function assertDateFormatShape(value: unknown) {
+  if (value === undefined) {
+    return
+  }
+
+  if (!isRecord(value) || Array.isArray(value)) {
+    throw new Error("datool.config.ts dateFormat must be an object.")
+  }
+
+  try {
+    new Intl.DateTimeFormat(
+      undefined,
+      value as Intl.DateTimeFormatOptions
+    )
+  } catch {
+    throw new Error("datool.config.ts defines an invalid dateFormat.")
+  }
+}
+
 function assertStreamShape(streamId: string, value: unknown) {
   if (!isRecord(value)) {
     throw new Error(`Stream "${streamId}" must be an object.`)
@@ -198,6 +217,8 @@ export function validateDatoolConfig(
     throw new Error("datool.config.ts must export an object.")
   }
 
+  assertDateFormatShape(config.dateFormat)
+
   if (!isRecord(config.streams) || Object.keys(config.streams).length === 0) {
     throw new Error("datool.config.ts must define at least one stream.")
   }
@@ -209,6 +230,7 @@ export function validateDatoolConfig(
 
 export function toClientConfig(config: DatoolConfig): DatoolClientConfig {
   return {
+    dateFormat: config.dateFormat,
     streams: Object.entries(config.streams).map(([id, stream]) => ({
       actions: Object.entries(stream.actions ?? {}).map(([actionId, action]) => ({
         button: action.button,

package/src/shared/types.ts

@@ -89,6 +89,8 @@ export type DatoolActionButtonConfig =
       variant?: DatoolActionButtonVariant
     }
 
+export type DatoolDateFormat = Intl.DateTimeFormatOptions
+
 export type DatoolColumn = {
   accessorKey: string
   align?: "left" | "center" | "right"
@@ -168,6 +170,7 @@ export type DatoolStream<Row extends Record<string, unknown>> = {
 }
 
 export type DatoolConfig = {
+  dateFormat?: DatoolDateFormat
   server?: {
     host?: string
     port?: number
@@ -195,6 +198,7 @@ export type DatoolClientAction = {
 }
 
 export type DatoolClientConfig = {
+  dateFormat?: DatoolDateFormat
   streams: DatoolClientStream[]
 }