npm - datool - Versions diffs - 0.0.6 → 0.0.7 - Mend

datool 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +1 -1
package/client-dist/assets/index-BJjc4NKE.css +1 -0
package/client-dist/assets/{index-CU3ksvkv.js → index-C6-ONVzY.js} +43 -43
package/client-dist/index.html +2 -2
package/package.json +1 -1
package/src/client/components/data-table.tsx +130 -117
package/src/node/server.ts +96 -56
package/client-dist/assets/index-Rn9jSaAz.css +0 -1

package/client-dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>datool</title>
-    <script type="module" crossorigin src="/assets/index-CU3ksvkv.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Rn9jSaAz.css">
+    <script type="module" crossorigin src="/assets/index-C6-ONVzY.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BJjc4NKE.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "datool",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "Local-only config-driven log viewer with SSE streaming and a generic table UI.",
   "bin": {

package/src/client/components/data-table.tsx CHANGED Viewed

@@ -8,7 +8,6 @@ import {
   getSortedRowModel,
   useReactTable,
   type AggregationFnOption,
-  type Column,
   type ColumnDef,
   type ColumnFiltersState,
   type ExpandedState,
@@ -604,14 +603,6 @@ function formatDuration(durationMs: number) {
   return parts.join(" ")
 }
-function getColumnHeaderLabel<TData extends DataTableRow>(
-  column: Column<TData, unknown>
-) {
-  return typeof column.columnDef.header === "string"
-    ? column.columnDef.header
-    : formatHeaderLabel(column.id)
-}
 function resolveGroupedPadding(
   padding: React.CSSProperties["paddingLeft"],
   depth: number
@@ -1294,21 +1285,6 @@ function RowActionButtonGroup<TData extends DataTableRow>({
   )
 }
-function GroupSummaryBadge({
-  label,
-  value,
-}: {
-  label: string
-  value: string
-}) {
-  return (
-    <span className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/80 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
-      <span className="text-foreground">{value}</span>
-      <span>{label}</span>
-    </span>
-  )
-}
 function DataTableView<TData extends DataTableRow>({
   autoScrollToBottom = false,
   autoScrollToBottomThreshold = 96,
@@ -1359,6 +1335,9 @@ function DataTableView<TData extends DataTableRow>({
   const [grouping, setGrouping] = React.useState<GroupingState>(
     () => persistedState.grouping ?? []
   )
+  const [expanded, setExpanded] = React.useState<ExpandedState>(() =>
+    (controlledGrouping ?? persistedState.grouping ?? []).length > 0 ? true : {}
+  )
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
   const [rowActionStatuses, setRowActionStatuses] = React.useState<
     Record<string, RowActionStatus>
@@ -1386,6 +1365,10 @@ function DataTableView<TData extends DataTableRow>({
   const resolvedColumnVisibility =
     controlledColumnVisibility ?? columnVisibility
   const resolvedGrouping = controlledGrouping ?? grouping
+  const groupingKey = React.useMemo(
+    () => resolvedGrouping.join("\u001f"),
+    [resolvedGrouping]
+  )
   const hasSelectionActions = rowActions
     ? hasSelectionScopedAction(rowActions)
     : false
@@ -1526,12 +1509,9 @@ function DataTableView<TData extends DataTableRow>({
     },
     [isGroupingControlled, onGroupingChange, resolvedGrouping]
   )
-  const expandedState = React.useMemo<ExpandedState>(
-    () => (resolvedGrouping.length > 0 ? true : {}),
-    [resolvedGrouping.length]
-  )
   const table = useReactTable({
+    autoResetExpanded: false,
     columnResizeMode: "onChange",
     columns: tableColumns,
     data,
@@ -1550,6 +1530,7 @@ function DataTableView<TData extends DataTableRow>({
     onColumnFiltersChange: handleColumnFiltersChange,
     onColumnSizingChange: handleColumnSizingChange,
     onColumnVisibilityChange: handleColumnVisibilityChange,
+    onExpandedChange: setExpanded,
     onGroupingChange: handleGroupingChange,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
@@ -1557,7 +1538,7 @@ function DataTableView<TData extends DataTableRow>({
       columnFilters: resolvedColumnFilters,
       columnSizing,
       columnVisibility: resolvedColumnVisibility,
-      expanded: expandedState,
+      expanded,
       globalFilter: deferredSearch.trim(),
       grouping: resolvedGrouping,
       rowSelection,
@@ -1618,6 +1599,12 @@ function DataTableView<TData extends DataTableRow>({
     if (!isGroupingControlled) {
       setGrouping(nextState.grouping ?? [])
     }
+    setExpanded(
+      (isGroupingControlled ? controlledGrouping : nextState.grouping ?? [])
+        .length > 0
+        ? true
+        : {}
+    )
     setSearchDraft(nextState.globalFilter ?? "")
     setRowSelection({})
     dragSelectionRef.current = null
@@ -1630,6 +1617,7 @@ function DataTableView<TData extends DataTableRow>({
     rowActionStatusTimersRef.current = {}
     setRowActionStatuses({})
   }, [
+    controlledGrouping,
     id,
     isColumnFiltersControlled,
     isColumnVisibilityControlled,
@@ -1687,6 +1675,12 @@ function DataTableView<TData extends DataTableRow>({
       if (!isGroupingControlled) {
         setGrouping(nextState.grouping ?? [])
       }
+      setExpanded(
+        (isGroupingControlled ? controlledGrouping : nextState.grouping ?? [])
+          .length > 0
+          ? true
+          : {}
+      )
       setSearchDraft(nextState.globalFilter ?? "")
       setRowSelection({})
       dragSelectionRef.current = null
@@ -1698,7 +1692,13 @@ function DataTableView<TData extends DataTableRow>({
     window.addEventListener("popstate", syncFromUrl)
     return () => window.removeEventListener("popstate", syncFromUrl)
-  }, [id, isColumnVisibilityControlled, isGroupingControlled, statePersistence])
+  }, [
+    controlledGrouping,
+    id,
+    isColumnVisibilityControlled,
+    isGroupingControlled,
+    statePersistence,
+  ])
   React.useEffect(() => {
     if (isGlobalFilterControlled || isColumnFiltersControlled) {
@@ -1729,6 +1729,10 @@ function DataTableView<TData extends DataTableRow>({
     statePersistence,
   ])
+  React.useEffect(() => {
+    setExpanded(resolvedGrouping.length > 0 ? true : {})
+  }, [groupingKey, resolvedGrouping.length])
   React.useEffect(() => {
     const container = containerRef.current
@@ -2200,34 +2204,13 @@ function DataTableView<TData extends DataTableRow>({
                       enumOptions: groupingMeta?.enumOptions,
                     })
                   : null
-                const groupSummaries = isGroupRow
-                  ? groupVisibleCells.flatMap((cell) => {
-                      const meta = (cell.column.columnDef.meta ??
-                        {}) as DataTableColumnMeta
-                      const value = cell.getValue()
-                      const label = getColumnHeaderLabel(cell.column)
-                      if (meta.kind === "date" && isDateRangeAggregate(value)) {
-                        return [
-                          {
-                            label: `${label} span`,
-                            value: formatDuration(value.durationMs),
-                          },
-                        ]
-                      }
-                      if (meta.kind === "number" && typeof value === "number") {
-                        return [
-                          {
-                            label: `${label} sum`,
-                            value: formatSummaryNumber(value),
-                          },
-                        ]
-                      }
-                      return []
-                    })
-                  : []
+                const hasVisibleGroupedCell = groupVisibleCells.some((cell) =>
+                  cell.getIsGrouped()
+                )
+                const primaryGroupCellId = groupVisibleCells.find(
+                  (cell) =>
+                    cell.column.id !== "__select" && cell.column.id !== "__actions"
+                )?.id
                 const rowContent = (
                   <tr
                     aria-selected={isSelected}
@@ -2274,65 +2257,95 @@ function DataTableView<TData extends DataTableRow>({
                     }}
                   >
                     {isGroupRow ? (
-                      <td
-                        className="flex shrink-0 items-center border-y border-border/70 px-2 py-2 align-middle text-xs text-muted-foreground"
-                        style={{
-                          background:
-                            "var(--color-table-gap, color-mix(in oklab, var(--color-muted) 84%, transparent))",
-                          paddingLeft: resolveGroupedPadding(
-                            edgeHorizontalPadding,
-                            row.depth
-                          ),
-                          paddingRight: edgeHorizontalPadding,
-                          width: table.getTotalSize(),
-                        }}
-                      >
-                        <div className="flex w-full min-w-0 flex-wrap items-center gap-2">
-                          {row.getCanExpand() ? (
-                            <button
-                              aria-label={
-                                row.getIsExpanded()
-                                  ? "Collapse group"
-                                  : "Expand group"
-                              }
-                              className="inline-flex size-6 items-center justify-center rounded-md border border-border/70 bg-background/80 text-foreground transition-colors hover:bg-background"
-                              onClick={() => row.toggleExpanded()}
-                              type="button"
-                            >
-                              {row.getIsExpanded() ? (
-                                <ChevronDown className="size-3.5" />
-                              ) : (
-                                <ChevronRight className="size-3.5" />
-                              )}
-                            </button>
-                          ) : null}
-                          {groupingColumn ? (
-                            <span className="inline-flex items-center gap-2 text-xs">
-                              <span className="font-medium text-foreground">
-                                {getColumnHeaderLabel(groupingColumn)}
-                              </span>
-                              <span className="min-w-0 truncate text-foreground">
-                                {groupingValue}
-                              </span>
-                            </span>
-                          ) : (
-                            <span className="font-medium text-foreground">
-                              Group
-                            </span>
-                          )}
-                          <GroupSummaryBadge
-                            label="rows"
-                            value={formatSummaryNumber(row.getLeafRows().length)}
-                          />
-                          {groupSummaries.map((summary) => (
-                            <GroupSummaryBadge
-                              key={`${row.id}-${summary.label}`}
-                              label={summary.label}
-                              value={summary.value}
-                            />
-                          ))}
-                        </div>
-                      </td>
+                      groupVisibleCells.map((cell, index, visibleCells) => {
+                        const meta = (cell.column.columnDef.meta ??
+                          {}) as DataTableColumnMeta
+                        const isActionsCell = cell.column.id === "__actions"
+                        const isSelectionCell = meta.kind === "selection"
+                        const shouldRenderGroupLabel =
+                          cell.getIsGrouped() ||
+                          (!hasVisibleGroupedCell && cell.id === primaryGroupCellId)
+                        const value = cell.getValue()
+                        let content: React.ReactNode = null
+                        if (!isActionsCell && !isSelectionCell) {
+                          if (shouldRenderGroupLabel) {
+                            content = (
+                              <div className="flex min-w-0 items-center gap-0.5">
+                                {row.getCanExpand() ? (
+                                  <button
+                                    aria-label={
+                                      row.getIsExpanded()
+                                        ? "Collapse group"
+                                        : "Expand group"
+                                    }
+                                    className="-ml-4"
+                                    onClick={() => row.toggleExpanded()}
+                                    type="button"
+                                  >
+                                    {row.getIsExpanded() ? (
+                                      <ChevronDown className="size-3.5" />
+                                    ) : (
+                                      <ChevronRight className="size-3.5" />
+                                    )}
+                                  </button>
+                                ) : null}
+                                <div className="min-w-0 truncate font-medium text-foreground">
+                                  {groupingColumn ? groupingValue : "Group"}
+                                </div>
+                              </div>
+                            )
+                          } else if (meta.kind === "date" && isDateRangeAggregate(value)) {
+                            content = (
+                              <div className="min-w-0 truncate">
+                                <span className="font-medium text-foreground">
+                                  {formatDuration(value.durationMs)}
+                                </span>
+                                <span className="ml-2 text-[11px] text-muted-foreground">
+                                  span
+                                </span>
+                              </div>
+                            )
+                          } else if (meta.kind === "number" && typeof value === "number") {
+                            content = (
+                              <div className="min-w-0 truncate font-medium text-foreground">
+                                {formatSummaryNumber(value)}
+                              </div>
+                            )
+                          }
+                        }
+                        return (
+                          <td
+                            className={cn(
+                              "flex shrink-0 items-center border-y border-border/70 px-2 py-2 align-middle text-xs text-muted-foreground",
+                              meta.align === "center" && "justify-center text-center",
+                              meta.align === "right" && "justify-end text-right",
+                              meta.sticky === "left" &&
+                                "sticky left-0 z-10 border-r border-r-border"
+                            )}
+                            key={cell.id}
+                            style={{
+                              background:
+                                "var(--color-table-gap, color-mix(in oklab, var(--color-muted) 84%, transparent))",
+                              paddingLeft:
+                                index === 0
+                                  ? resolveGroupedPadding(
+                                      edgeHorizontalPadding,
+                                      row.depth
+                                    )
+                                  : undefined,
+                              paddingRight:
+                                index === visibleCells.length - 1
+                                  ? edgeHorizontalPadding
+                                  : undefined,
+                              width: cell.column.getSize(),
+                            }}
+                          >
+                            <div className="w-full min-w-0">{content}</div>
+                          </td>
+                        )
+                      })
                     ) : (
                       row.getVisibleCells().map((cell, index, visibleCells) => {
                         const meta = (cell.column.columnDef.meta ??

package/src/node/server.ts CHANGED Viewed

@@ -36,6 +36,8 @@ const SSE_HEADERS = {
   "Content-Type": "text/event-stream; charset=utf-8",
 } as const
+const MAX_PORT_ATTEMPTS = 10
 function packageRootFromImportMeta() {
   return path.resolve(import.meta.dir, "..", "..")
 }
@@ -85,6 +87,14 @@ function encodeSseEvent(event: string, data: unknown) {
   return `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`
 }
+function isAddressInUseError(error: unknown) {
+  return (
+    error instanceof Error &&
+    "code" in error &&
+    error.code === "EADDRINUSE"
+  )
+}
 function isRecord(value: unknown): value is Record<string, unknown> {
   return Boolean(value) && typeof value === "object"
 }
@@ -334,78 +344,108 @@ export async function startDatoolServer(
     cwd,
   })
   const host = options.host ?? config.server?.host ?? "127.0.0.1"
-  const port = options.port ?? config.server?.port ?? 3210
+  const requestedPort = options.port ?? config.server?.port ?? 3210
   const indexHtml = await loadClientIndexHtml(packageRoot)
-  const server = Bun.serve({
-    async fetch(request) {
-      const url = new URL(request.url)
+  const fetch = async (request: Request) => {
+    const url = new URL(request.url)
-      if (url.pathname === "/api/config") {
-        return jsonResponse(toClientConfig(config))
-      }
+    if (url.pathname === "/api/config") {
+      return jsonResponse(toClientConfig(config))
+    }
-      if (
-        url.pathname.startsWith("/api/streams/") &&
-        url.pathname.endsWith("/events")
-      ) {
-        const streamId = decodeURIComponent(
-          url.pathname
-            .slice("/api/streams/".length, -"/events".length)
-            .replace(/\/+$/, "")
-        )
-        const query = new URLSearchParams(url.searchParams)
+    if (
+      url.pathname.startsWith("/api/streams/") &&
+      url.pathname.endsWith("/events")
+    ) {
+      const streamId = decodeURIComponent(
+        url.pathname
+          .slice("/api/streams/".length, -"/events".length)
+          .replace(/\/+$/, "")
+      )
+      const query = new URLSearchParams(url.searchParams)
+      query.delete("stream")
-        query.delete("stream")
+      return createSseResponse(config, streamId, query, request.signal)
+    }
+    if (
+      request.method === "POST" &&
+      url.pathname.startsWith("/api/streams/") &&
+      url.pathname.includes("/actions/")
+    ) {
+      const pathMatch = url.pathname.match(
+        /^\/api\/streams\/(.+?)\/actions\/(.+?)\/?$/
+      )
-        return createSseResponse(config, streamId, query, request.signal)
+      if (!pathMatch) {
+        return new Response("Not found", {
+          status: 404,
+        })
       }
-      if (
-        request.method === "POST" &&
-        url.pathname.startsWith("/api/streams/") &&
-        url.pathname.includes("/actions/")
-      ) {
-        const pathMatch = url.pathname.match(
-          /^\/api\/streams\/(.+?)\/actions\/(.+?)\/?$/
-        )
+      const streamId = decodeURIComponent(pathMatch[1] ?? "")
+      const actionId = decodeURIComponent(pathMatch[2] ?? "")
+      const query = new URLSearchParams(url.searchParams)
-        if (!pathMatch) {
-          return new Response("Not found", {
-            status: 404,
-          })
-        }
+      query.delete("stream")
+      return createActionResponse(config, streamId, actionId, query, request)
+    }
+    if (url.pathname === "/" || url.pathname === "/index.html") {
+      return new Response(indexHtml, {
+        headers: {
+          "Content-Type": "text/html; charset=utf-8",
+        },
+      })
+    }
-        const streamId = decodeURIComponent(pathMatch[1] ?? "")
-        const actionId = decodeURIComponent(pathMatch[2] ?? "")
-        const query = new URLSearchParams(url.searchParams)
+    const assetPath = getClientAssetPath(packageRoot, url.pathname)
-        query.delete("stream")
+    if (assetPath && fs.existsSync(assetPath)) {
+      return new Response(Bun.file(assetPath))
+    }
-        return createActionResponse(config, streamId, actionId, query, request)
+    return new Response("Not found", {
+      status: 404,
+    })
+  }
+  const maxPort = requestedPort === 0
+    ? 0
+    : Math.min(requestedPort + MAX_PORT_ATTEMPTS - 1, 65_535)
+  let server: ReturnType<typeof Bun.serve> | null = null
+  for (
+    let port = requestedPort;
+    port <= maxPort && server === null;
+    port += 1
+  ) {
+    try {
+      server = Bun.serve({
+        fetch,
+        hostname: host,
+        port,
+      })
+    } catch (error) {
+      if (isAddressInUseError(error) && port < maxPort) {
+        continue
       }
-      if (url.pathname === "/" || url.pathname === "/index.html") {
-        return new Response(indexHtml, {
-          headers: {
-            "Content-Type": "text/html; charset=utf-8",
-          },
-        })
+      if (isAddressInUseError(error)) {
+        throw new Error(
+          `No available ports from ${requestedPort} to ${maxPort}.`
+        )
       }
-      const assetPath = getClientAssetPath(packageRoot, url.pathname)
-      if (assetPath && fs.existsSync(assetPath)) {
-        return new Response(Bun.file(assetPath))
-      }
+      throw error
+    }
+  }
-      return new Response("Not found", {
-        status: 404,
-      })
-    },
-    hostname: host,
-    port,
-  })
-  const resolvedPort = server.port ?? port
+  if (!server) {
+    throw new Error(`No available ports from ${requestedPort} to ${maxPort}.`)
+  }
+  const resolvedPort = server.port ?? requestedPort
   return {
     config,