dbdiff-app 0.1.0

package/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,262 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useRef } from "react";
+import type { DataGridProps } from "./types";
+import { getCellRangeInfo, ROW_HEIGHT, virtualToStoreIndex } from "./utils";
+import { DataGridHeader } from "./DataGridHeader";
+import { DataGridCell } from "./DataGridCell";
+import { useColumnResize } from "./useColumnResize";
+import { useDataGridSelection } from "./useDataGridSelection";
+
+export function DataGrid({
+  columns,
+  rows,
+  extraRows,
+  sortColumns,
+  onSortChange,
+  selection: controlledSelection,
+  onSelectionChange,
+  renderCell,
+  onKeyDown,
+  className,
+  scrollRef: externalScrollRef,
+  tableRef: externalTableRef,
+  onHeaderContextMenu,
+  fkPreviewActiveColumns,
+}: DataGridProps) {
+  const internalScrollRef = useRef<HTMLDivElement>(null);
+  const internalTableRef = useRef<HTMLTableElement>(null);
+  const scrollRef = externalScrollRef ?? internalScrollRef;
+  const tableRef = externalTableRef ?? internalTableRef;
+
+  const totalVirtualRowCount = rows.length + (extraRows?.length ?? 0);
+
+  const virtualizer = useVirtualizer({
+    count: totalVirtualRowCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 15,
+  });
+
+  const { columnWidths, resizingColumn, justResizedRef, handleResizeStart } =
+    useColumnResize({
+      columns,
+      scrollRef,
+      tableRef,
+    });
+
+  const scrollToIndex = useCallback(
+    (index: number) => {
+      virtualizer.scrollToIndex(index);
+    },
+    [virtualizer],
+  );
+
+  const {
+    selection,
+    handleCellClick,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+  } = useDataGridSelection({
+    columns,
+    rows,
+    extraRows,
+    selection: controlledSelection,
+    onSelectionChange,
+    onKeyDown,
+    scrollToIndex,
+  });
+
+  const handleColumnClick = useCallback(
+    (columnName: string, e: React.MouseEvent) => {
+      e.preventDefault();
+      if (justResizedRef.current) return;
+      const addToExisting = e.ctrlKey || e.metaKey;
+      onSortChange?.(columnName, addToExisting);
+    },
+    [onSortChange, justResizedRef],
+  );
+
+  const columnNames = columns.map((c) => c.name);
+
+  return (
+    <div
+      ref={scrollRef}
+      className={`flex-1 overflow-auto pb-8 pr-4 ${className ?? ""}`}
+    >
+      <table
+        ref={tableRef}
+        className={`w-full text-[13px] border-collapse ${
+          selection.isDragging || resizingColumn ? "select-none" : ""
+        }`}
+        style={{ tableLayout: "fixed" }}
+      >
+        <colgroup>
+          {columns.map((col) => (
+            <col
+              key={col.name}
+              style={{ width: columnWidths[col.name] ?? 150 }}
+            />
+          ))}
+        </colgroup>
+        <thead className="sticky top-0 z-10 bg-stone-100 dark:bg-neutral-900">
+          <tr>
+            {columns.map((col, i) => (
+              <DataGridHeader
+                key={i}
+                columnName={col.name}
+                sortColumns={sortColumns}
+                onClick={onSortChange ? handleColumnClick : undefined}
+                onResizeStart={handleResizeStart}
+                onContextMenu={onHeaderContextMenu}
+                fkPreviewActive={fkPreviewActiveColumns?.has(col.name)}
+              />
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {(() => {
+            const virtualItems = virtualizer.getVirtualItems();
+            const paddingTop = virtualItems[0]?.start ?? 0;
+            const paddingBottom =
+              virtualItems.length > 0
+                ? virtualizer.getTotalSize() -
+                  virtualItems[virtualItems.length - 1].end
+                : 0;
+            return (
+              <>
+                {paddingTop > 0 && (
+                  <tr>
+                    <td
+                      style={{ height: paddingTop, padding: 0 }}
+                      colSpan={columns.length}
+                    />
+                  </tr>
+                )}
+                {virtualItems.map((virtualItem) => {
+                  const isExtraRow = virtualItem.index >= rows.length;
+                  const storeIndex = virtualToStoreIndex(
+                    virtualItem.index,
+                    rows.length,
+                  );
+
+                  if (isExtraRow) {
+                    const extraRowIdx = virtualItem.index - rows.length;
+                    const extraRow = extraRows?.[extraRowIdx];
+                    if (!extraRow) return null;
+
+                    return (
+                      <tr key={`extra-${extraRow.key}`}>
+                        {columns.map((col, colIndex) => {
+                          const value = extraRow.data[col.name] ?? null;
+                          const rangeInfo = getCellRangeInfo(
+                            { rowIndex: storeIndex, columnName: col.name },
+                            selection.selectedRange,
+                            columnNames,
+                            rows.length,
+                          );
+                          const isSelected =
+                            selection.selectedCell?.rowIndex === storeIndex &&
+                            selection.selectedCell?.columnName === col.name;
+
+                          if (renderCell) {
+                            return renderCell({
+                              rowIndex: storeIndex,
+                              columnIndex: colIndex,
+                              columnName: col.name,
+                              value,
+                              isSelected,
+                              isInRange: rangeInfo.isInRange,
+                              rangeEdges: rangeInfo.edges,
+                              onClick: handleCellClick,
+                              onMouseDown: handleCellMouseDown,
+                              onMouseEnter: handleCellMouseEnter,
+                            });
+                          }
+
+                          return (
+                            <DataGridCell
+                              key={colIndex}
+                              rowIndex={storeIndex}
+                              columnName={col.name}
+                              value={value}
+                              isSelected={isSelected}
+                              isInRange={rangeInfo.isInRange}
+                              rangeEdges={rangeInfo.edges}
+                              onClick={handleCellClick}
+                              onMouseDown={handleCellMouseDown}
+                              onMouseEnter={handleCellMouseEnter}
+                            />
+                          );
+                        })}
+                      </tr>
+                    );
+                  }
+
+                  const row = rows[storeIndex];
+                  if (!row) return null;
+
+                  return (
+                    <tr
+                      key={storeIndex}
+                      className="hover:bg-stone-50 dark:hover:bg-white/[0.02]"
+                    >
+                      {columns.map((col, colIndex) => {
+                        const rangeInfo = getCellRangeInfo(
+                          { rowIndex: storeIndex, columnName: col.name },
+                          selection.selectedRange,
+                          columnNames,
+                          rows.length,
+                        );
+                        const isSelected =
+                          selection.selectedCell?.rowIndex === storeIndex &&
+                          selection.selectedCell?.columnName === col.name;
+
+                        if (renderCell) {
+                          return renderCell({
+                            rowIndex: storeIndex,
+                            columnIndex: colIndex,
+                            columnName: col.name,
+                            value: row[col.name],
+                            isSelected,
+                            isInRange: rangeInfo.isInRange,
+                            rangeEdges: rangeInfo.edges,
+                            onClick: handleCellClick,
+                            onMouseDown: handleCellMouseDown,
+                            onMouseEnter: handleCellMouseEnter,
+                          });
+                        }
+
+                        return (
+                          <DataGridCell
+                            key={colIndex}
+                            rowIndex={storeIndex}
+                            columnName={col.name}
+                            value={row[col.name]}
+                            isSelected={isSelected}
+                            isInRange={rangeInfo.isInRange}
+                            rangeEdges={rangeInfo.edges}
+                            onClick={handleCellClick}
+                            onMouseDown={handleCellMouseDown}
+                            onMouseEnter={handleCellMouseEnter}
+                          />
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+                {paddingBottom > 0 && (
+                  <tr>
+                    <td
+                      style={{ height: paddingBottom, padding: 0 }}
+                      colSpan={columns.length}
+                    />
+                  </tr>
+                )}
+              </>
+            );
+          })()}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/DataGrid/DataGridCell.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import type { RangeEdges } from "./types";
+import { formatCellValue } from "./utils";
+
+interface DataGridCellInternalProps {
+  rowIndex: number;
+  columnName: string;
+  value: unknown;
+  isSelected: boolean;
+  isInRange: boolean;
+  rangeEdges: RangeEdges | null;
+  onClick: (rowIndex: number, columnName: string, e: React.MouseEvent) => void;
+  onMouseDown: (
+    rowIndex: number,
+    columnName: string,
+    e: React.MouseEvent,
+  ) => void;
+  onMouseEnter: (rowIndex: number, columnName: string) => void;
+}
+
+export const DataGridCell = React.memo(function DataGridCell({
+  rowIndex,
+  columnName,
+  value,
+  isSelected,
+  isInRange,
+  rangeEdges,
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+}: DataGridCellInternalProps) {
+  let cellClassName =
+    "px-3 py-2 text-secondary border-b border-r border-stone-200 dark:border-white/[0.06] font-mono max-w-[300px] cursor-pointer";
+
+  if (isSelected) {
+    cellClassName += " bg-blue-100 dark:bg-blue-800/40";
+  }
+
+  if (isInRange && rangeEdges && !isSelected) {
+    cellClassName += " bg-blue-50 dark:bg-blue-900/20";
+  }
+
+  const rangeBorderStyle: React.CSSProperties = {};
+  if (isInRange && rangeEdges) {
+    const borderColor = "rgb(59, 130, 246)";
+    const shadows: string[] = [];
+    if (rangeEdges.top) shadows.push(`inset 0 2px 0 0 ${borderColor}`);
+    if (rangeEdges.bottom) shadows.push(`inset 0 -2px 0 0 ${borderColor}`);
+    if (rangeEdges.left) shadows.push(`inset 2px 0 0 0 ${borderColor}`);
+    if (rangeEdges.right) shadows.push(`inset -2px 0 0 0 ${borderColor}`);
+    if (shadows.length > 0) {
+      rangeBorderStyle.boxShadow = shadows.join(", ");
+    }
+  }
+
+  return (
+    <td
+      className={cellClassName}
+      style={rangeBorderStyle}
+      onClick={(e) => onClick(rowIndex, columnName, e)}
+      onMouseDown={(e) => onMouseDown(rowIndex, columnName, e)}
+      onMouseEnter={() => onMouseEnter(rowIndex, columnName)}
+    >
+      <div className="truncate">
+        {value === null ? (
+          <span className="text-tertiary italic">NULL</span>
+        ) : (
+          formatCellValue(value)
+        )}
+      </div>
+    </td>
+  );
+});

package/src/components/DataGrid/DataGridHeader.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import type { SortColumn } from "../../types";
+
+interface DataGridHeaderProps {
+  columnName: string;
+  sortColumns?: SortColumn[];
+  onClick?: (columnName: string, e: React.MouseEvent) => void;
+  onResizeStart: (columnName: string, clientX: number) => void;
+  onContextMenu?: (columnName: string, e: React.MouseEvent) => void;
+  fkPreviewActive?: boolean;
+}
+
+export const DataGridHeader = React.memo(function DataGridHeader({
+  columnName,
+  sortColumns,
+  onClick,
+  onResizeStart,
+  onContextMenu,
+  fkPreviewActive,
+}: DataGridHeaderProps) {
+  const sortIndex = sortColumns?.findIndex((s) => s.column === columnName);
+  const sortInfo =
+    sortIndex != null && sortIndex !== -1 ? sortColumns![sortIndex] : null;
+  const showPriority =
+    sortColumns != null && sortColumns.length > 1 && sortInfo;
+
+  return (
+    <th
+      onClick={onClick ? (e) => onClick(columnName, e) : undefined}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onContextMenu?.(columnName, e);
+      }}
+      className={`text-left px-3 py-2 font-medium text-primary border-b border-r border-stone-200 dark:border-white/[0.06] ${onClick ? "cursor-pointer" : ""} hover:bg-stone-200 bg-stone-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 select-none transition-colors relative`}
+    >
+      <div className="flex items-center gap-1.5 overflow-hidden">
+        <span className="truncate">{columnName}</span>
+        {fkPreviewActive && (
+          <span
+            className="w-1.5 h-1.5 rounded-full bg-violet-500 dark:bg-violet-400 flex-shrink-0"
+            title="FK preview active"
+          />
+        )}
+        {sortInfo && (
+          <span className="flex items-center gap-0.5 text-blue-600 dark:text-blue-400 flex-shrink-0">
+            {sortInfo.direction === "ASC" ? (
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <polyline points="18 15 12 9 6 15" />
+              </svg>
+            ) : (
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            )}
+            {showPriority && (
+              <span className="text-[10px] font-bold">{sortIndex! + 1}</span>
+            )}
+          </span>
+        )}
+      </div>
+      {/* Resize handle */}
+      <div
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          onResizeStart(columnName, e.clientX);
+        }}
+        className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize bg-transparent hover:bg-blue-500/50 active:bg-blue-500/50 transition-colors"
+        style={{
+          marginLeft: -4,
+          marginRight: -4,
+          paddingLeft: 4,
+          paddingRight: 4,
+        }}
+      />
+    </th>
+  );
+});

package/src/components/DataGrid/index.ts

@@ -0,0 +1,20 @@
+export { DataGrid } from "./DataGrid";
+export type {
+  DataGridColumn,
+  DataGridSelection,
+  DataGridCellProps,
+  DataGridProps,
+  ExtraRow,
+  RangeEdges,
+} from "./types";
+export {
+  ROW_HEIGHT,
+  storeToVirtualIndex,
+  virtualToStoreIndex,
+  getSelectedRowIndices,
+  getCellRangeInfo,
+  formatCellValue,
+  getInternalClipboardValue,
+  parseTSV,
+  isInternalRangeCopy,
+} from "./utils";

package/src/components/DataGrid/types.ts

@@ -0,0 +1,63 @@
+import type { CellPosition, CellRange, SortColumn } from "../../types";
+
+export interface RangeEdges {
+  top: boolean;
+  bottom: boolean;
+  left: boolean;
+  right: boolean;
+}
+
+export interface DataGridColumn {
+  name: string;
+  dataTypeID?: number;
+}
+
+export interface DataGridSelection {
+  selectedCell: CellPosition | null;
+  selectedRange: CellRange | null;
+  isDragging: boolean;
+}
+
+export interface DataGridCellProps {
+  rowIndex: number;
+  columnIndex: number;
+  columnName: string;
+  value: unknown;
+  isSelected: boolean;
+  isInRange: boolean;
+  rangeEdges: RangeEdges | null;
+  onClick: (rowIndex: number, columnName: string, e: React.MouseEvent) => void;
+  onMouseDown: (
+    rowIndex: number,
+    columnName: string,
+    e: React.MouseEvent,
+  ) => void;
+  onMouseEnter: (rowIndex: number, columnName: string) => void;
+}
+
+export interface ExtraRow {
+  key: string;
+  data: Record<string, unknown>;
+}
+
+export interface DataGridProps {
+  columns: DataGridColumn[];
+  rows: Record<string, unknown>[];
+  extraRows?: ExtraRow[];
+  sortColumns?: SortColumn[];
+  onSortChange?: (column: string, addToExisting: boolean) => void;
+  selection?: DataGridSelection;
+  onSelectionChange?: (selection: DataGridSelection) => void;
+  renderCell?: (props: DataGridCellProps) => React.ReactNode;
+  /** Return true if the key was handled (prevents DataGrid's default handling) */
+  onKeyDown?: (e: KeyboardEvent) => boolean;
+  className?: string;
+  /** Ref to the scroll container element */
+  scrollRef?: React.RefObject<HTMLDivElement | null>;
+  /** Ref to the table element */
+  tableRef?: React.RefObject<HTMLTableElement | null>;
+  /** Called when user right-clicks a column header */
+  onHeaderContextMenu?: (columnName: string, e: React.MouseEvent) => void;
+  /** Set of column names that have active FK preview */
+  fkPreviewActiveColumns?: Set<string>;
+}

package/src/components/DataGrid/useColumnResize.ts

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { DataGridColumn } from "./types";
+
+interface UseColumnResizeOptions {
+  columns: DataGridColumn[];
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  tableRef: React.RefObject<HTMLTableElement | null>;
+}
+
+export function useColumnResize({
+  columns,
+  scrollRef,
+  tableRef,
+}: UseColumnResizeOptions) {
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const [resizingColumn, setResizingColumn] = useState<{
+    name: string;
+    startX: number;
+    startWidth: number;
+    startScrollLeft: number;
+  } | null>(null);
+  const justResizedRef = useRef(false);
+  const lastClientXRef = useRef(0);
+
+  // Reset column widths when columns change
+  const fieldKey = useMemo(
+    () => columns.map((f) => f.name).join(","),
+    [columns],
+  );
+  useEffect(() => {
+    if (columns.length > 0) {
+      const widths: Record<string, number> = {};
+      for (const col of columns) {
+        widths[col.name] = 150;
+      }
+      setColumnWidths(widths);
+    }
+  }, [fieldKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleResizeStart = useCallback(
+    (columnName: string, clientX: number) => {
+      lastClientXRef.current = clientX;
+
+      // Read actual rendered widths from the DOM so that all columns have
+      // accurate state before the drag begins.  Without this, columns whose
+      // state width (150px) differs from their visual width (wider due to
+      // table-layout:fixed + w-full proportional distribution) would appear
+      // to compress when a sibling column is resized.
+      let startWidth = columnWidths[columnName] ?? 150;
+      if (tableRef.current) {
+        const ths = tableRef.current.querySelectorAll("thead > tr > th");
+        const actualWidths: Record<string, number> = {};
+        columns.forEach((col, i) => {
+          if (ths[i]) {
+            actualWidths[col.name] = Math.round(
+              ths[i].getBoundingClientRect().width,
+            );
+          } else {
+            actualWidths[col.name] = columnWidths[col.name] ?? 150;
+          }
+        });
+        startWidth = actualWidths[columnName] ?? startWidth;
+        setColumnWidths(actualWidths);
+      }
+
+      setResizingColumn({
+        name: columnName,
+        startX: clientX,
+        startWidth,
+        startScrollLeft: scrollRef.current?.scrollLeft ?? 0,
+      });
+    },
+    [columnWidths, scrollRef, columns, tableRef],
+  );
+
+  useEffect(() => {
+    if (!resizingColumn) return;
+
+    const colIndex = columns.findIndex((f) => f.name === resizingColumn.name);
+    const colEl =
+      colIndex >= 0
+        ? tableRef.current?.querySelector<HTMLElement>(
+            `colgroup > col:nth-child(${colIndex + 1})`,
+          )
+        : null;
+
+    const scrollEl = scrollRef.current;
+    const EDGE_ZONE = 40;
+    const SCROLL_SPEED = 12;
+    let rafId = 0;
+    let alive = true;
+
+    const computeWidth = () =>
+      Math.max(
+        50,
+        resizingColumn.startWidth +
+          (lastClientXRef.current - resizingColumn.startX) +
+          ((scrollEl?.scrollLeft ?? 0) - resizingColumn.startScrollLeft),
+      );
+
+    const tick = () => {
+      if (!alive) return;
+      if (scrollEl) {
+        const rect = scrollEl.getBoundingClientRect();
+        const x = lastClientXRef.current;
+        if (x > rect.right - EDGE_ZONE) {
+          scrollEl.scrollLeft += SCROLL_SPEED;
+        } else if (x < rect.left + EDGE_ZONE) {
+          scrollEl.scrollLeft -= SCROLL_SPEED;
+        }
+      }
+      if (colEl) {
+        colEl.style.width = `${computeWidth()}px`;
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+
+    const handleMouseMove = (e: MouseEvent) => {
+      lastClientXRef.current = e.clientX;
+    };
+
+    const handleMouseUp = () => {
+      alive = false;
+      cancelAnimationFrame(rafId);
+      setColumnWidths((prev) => ({
+        ...prev,
+        [resizingColumn.name]: computeWidth(),
+      }));
+      justResizedRef.current = true;
+      requestAnimationFrame(() => {
+        justResizedRef.current = false;
+      });
+      setResizingColumn(null);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      alive = false;
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingColumn, columns, scrollRef, tableRef]);
+
+  return {
+    columnWidths,
+    resizingColumn,
+    justResizedRef,
+    handleResizeStart,
+  };
+}