@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/table/CommandField.tsx

@@ -0,0 +1,318 @@
+import { useId, useImperativeHandle, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowDownWideNarrow, ArrowRightToLine, ArrowUp, Code, Filter, Search, X, type LucideIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon, IconButton, Kbd, KEY_SHORTCUTS, Menu, shortcut } from '@adecore/ui';
+import type { Engine } from '../protocol/index.ts';
+import {
+    addChip,
+    filterStartText,
+    removeChipAt,
+    replaceChipAt,
+    suggest,
+    toggleSort,
+    type Chip,
+    type CommandColumn,
+    type FilterChip,
+    type Suggestion
+} from './command-field.ts';
+
+const FOCUS_SHORTCUT = shortcut('Mod+F');
+
+export interface CommandFieldProps {
+    chips: readonly Chip[];
+    columns: readonly CommandColumn[];
+    engine: Engine;
+    /* Every change of the chips applies at once, so this is told the whole list each time. */
+    onChipsChange(next: Chip[]): void;
+    /* "Jump to column" was picked. */
+    onJumpToColumn(name: string): void;
+    /* The text input, for the owner to focus on Mod+F. */
+    inputRef?: Ref<HTMLInputElement>;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+const SUGGESTION_ICON: Record<Suggestion['kind'], LucideIcon> = {
+    condition: Filter,
+    filter: Filter,
+    sort: ArrowDownWideNarrow,
+    jump: ArrowRightToLine,
+    sql: Code
+};
+
+const columnOf = (suggestion: Suggestion): CommandColumn | null => (suggestion.kind === 'sql' || suggestion.kind === 'condition' ? null : suggestion.column);
+
+/*
+ * One field for the conditions and the sorts of a table. They are chips in front of the text; typing
+ * opens suggestions to filter on a column, sort by it or jump to it, and a text that reads as a
+ * condition (`quantity > 1`) becomes a chip on Enter.
+ */
+export function CommandField({ chips, columns, engine, onChipsChange, onJumpToColumn, inputRef, className, ref }: CommandFieldProps) {
+    const { t } = useTranslation('database');
+    const listId = useId();
+    const input = useRef<HTMLInputElement>(null);
+    const [text, setText] = useState('');
+    /* The chip whose text is in the input to be changed; it stays in the list, hidden, until the change is made. */
+    const [editing, setEditing] = useState<number | null>(null);
+    const [focused, setFocused] = useState(false);
+    const [active, setActive] = useState(0);
+    const [dismissed, setDismissed] = useState(false);
+    const suggestions = useMemo(() => suggest(engine, text, columns), [engine, text, columns]);
+    const open = focused && !dismissed && suggestions.length > 0;
+    const optionId = (index: number): string => `${listId}-${index}`;
+
+    useImperativeHandle(inputRef, () => input.current!, []);
+
+    const change = (value: string): void => {
+        setText(value);
+        setActive(0);
+        setDismissed(false);
+    };
+
+    const clear = (): void => {
+        setText('');
+        setEditing(null);
+        setActive(0);
+        setDismissed(false);
+    };
+
+    const commit = (chip: FilterChip): void => {
+        onChipsChange(editing === null ? addChip(chips, chip) : replaceChipAt(chips, editing, chip));
+        clear();
+    };
+
+    const pick = (suggestion: Suggestion): void => {
+        switch (suggestion.kind) {
+            case 'condition':
+            case 'sql':
+                commit(suggestion.chip);
+                break;
+            case 'filter':
+                change(filterStartText(suggestion.column));
+                input.current?.focus();
+                break;
+            case 'sort':
+                onChipsChange(toggleSort(chips, suggestion.column.name));
+                clear();
+                break;
+            case 'jump':
+                clear();
+                onJumpToColumn(suggestion.column.name);
+                break;
+        }
+    };
+
+    const edit = (index: number, chip: FilterChip): void => {
+        setEditing(index);
+        setText(chip.text);
+        setActive(0);
+        setDismissed(true);
+        input.current?.focus();
+    };
+
+    const activate = (index: number, chip: Chip): void => {
+        if (chip.kind === 'filter') {
+            edit(index, chip);
+        } else if (chip.kind === 'sort') {
+            onChipsChange(toggleSort(chips, chip.column));
+        }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (suggestions.length > 0) {
+                event.preventDefault();
+                setDismissed(false);
+                setActive((now) => (now + (event.key === 'ArrowDown' ? 1 : -1) + suggestions.length) % suggestions.length);
+            }
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            const suggestion = suggestions[Math.min(active, suggestions.length - 1)];
+            if (suggestion !== undefined) {
+                pick(suggestion);
+            } else if (editing !== null) {
+                onChipsChange(removeChipAt(chips, editing));
+                clear();
+            }
+        } else if (event.key === 'Escape') {
+            if (open) {
+                event.preventDefault();
+                setDismissed(true);
+            } else if (text !== '' || editing !== null) {
+                event.preventDefault();
+                clear();
+            }
+        } else if (event.key === 'Backspace' && text === '' && editing === null && chips.length > 0) {
+            event.preventDefault();
+            onChipsChange(removeChipAt(chips, chips.length - 1));
+        }
+    };
+
+    const handleBlur = (): void => {
+        setFocused(false);
+        if (editing !== null) {
+            clear();
+        }
+    };
+
+    return (
+        <div
+            ref={ref}
+            className={clsx('field field-sm focus-ring-within relative flex h-auto min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5', className)}
+            onClick={(event) => event.target === event.currentTarget && input.current?.focus()}
+        >
+            <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+            {chips.map((chip, index) =>
+                index === editing ? null : (
+                    <ChipView
+                        key={`${chip.kind}:${chip.kind === 'sort' ? chip.column : chip.text}`}
+                        chip={chip}
+                        onActivate={() => activate(index, chip)}
+                        onRemove={() => onChipsChange(removeChipAt(chips, index))}
+                    />
+                )
+            )}
+            <input
+                ref={input}
+                role="combobox"
+                aria-label={t('table.command.label')}
+                aria-expanded={open}
+                aria-controls={open ? listId : undefined}
+                aria-activedescendant={open ? optionId(active) : undefined}
+                aria-autocomplete="list"
+                value={text}
+                placeholder={chips.length === 0 ? t('table.command.placeholder') : undefined}
+                spellCheck={false}
+                autoComplete="off"
+                className="min-w-24 flex-1 bg-transparent font-mono text-code text-text outline-none placeholder:font-sans placeholder:text-text-faint"
+                onChange={(event) => change(event.target.value)}
+                onKeyDown={handleKeyDown}
+                onFocus={() => setFocused(true)}
+                onBlur={handleBlur}
+            />
+            <Kbd shortcut={FOCUS_SHORTCUT} variant="inline" className="shrink-0" />
+            {open && (
+                <div
+                    id={listId}
+                    role="listbox"
+                    aria-label={t('table.command.suggestions')}
+                    className="menu-popup absolute top-full left-0 z-(--z-popup) mt-1.5 max-h-80 w-full max-w-xl"
+                    // The input keeps the focus, or the popup would close under the pointer.
+                    onPointerDown={(event) => event.preventDefault()}
+                >
+                    {suggestions.map((suggestion, index) => {
+                        const column = columnOf(suggestion);
+                        const previous = suggestions[index - 1];
+                        const startsGroup = column !== null && (previous === undefined || columnOf(previous)?.name !== column.name);
+                        return (
+                            <div key={`${suggestion.kind}:${column?.name ?? ''}`} role="presentation">
+                                {startsGroup && (
+                                    <Menu.Label>
+                                        <span className="font-mono">{column.name}</span>
+                                        {column.type !== '' && <span> · {column.type}</span>}
+                                    </Menu.Label>
+                                )}
+                                {suggestion.kind === 'sql' && index > 0 && <Menu.Separator />}
+                                <div
+                                    id={optionId(index)}
+                                    role="option"
+                                    aria-selected={index === active}
+                                    data-active={index === active}
+                                    className="menu-item cursor-row"
+                                    onPointerMove={() => setActive(index)}
+                                    onClick={() => pick(suggestion)}
+                                >
+                                    <Icon icon={SUGGESTION_ICON[suggestion.kind]} size={14} />
+                                    <SuggestionLabel suggestion={suggestion} />
+                                    {index === active && suggestion.kind !== 'sql' && <Kbd shortcut={KEY_SHORTCUTS.enter} />}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function SuggestionLabel({ suggestion }: { suggestion: Suggestion }) {
+    const { t } = useTranslation('database');
+    switch (suggestion.kind) {
+        case 'condition':
+            return (
+                <>
+                    {t('table.command.addFilter')} <span className="min-w-0 truncate font-mono">{suggestion.chip.text}</span>
+                </>
+            );
+        case 'filter':
+            return (
+                <>
+                    {t('table.command.filterOn')} <span className="font-mono">{suggestion.column.name}</span>
+                </>
+            );
+        case 'sort':
+            return (
+                <>
+                    {t('table.command.sortBy')} <span className="font-mono">{suggestion.column.name}</span>
+                </>
+            );
+        case 'jump':
+            return t('table.command.jumpTo');
+        case 'sql':
+            return (
+                <>
+                    {t('table.command.asSql')}
+                    <Menu.Hint className="font-mono">WHERE …</Menu.Hint>
+                </>
+            );
+    }
+}
+
+interface ChipViewProps {
+    chip: Chip;
+    onActivate(): void;
+    onRemove(): void;
+}
+
+/* A filter opens its text for editing, a sort flips its direction, and a raw ORDER BY is only shown. */
+function ChipView({ chip, onActivate, onRemove }: ChipViewProps) {
+    const { t } = useTranslation('database');
+    return (
+        <span className="inline-flex h-5 max-w-72 min-w-0 shrink-0 items-center rounded-md bg-text/10 font-mono text-code text-text">
+            {chip.kind === 'filter' && (
+                <button
+                    type="button"
+                    aria-label={t('table.command.editFilter', { filter: chip.text })}
+                    className="min-w-0 truncate pl-1.5 text-left"
+                    onClick={onActivate}
+                >
+                    {chip.text}
+                </button>
+            )}
+            {chip.kind === 'sort' && (
+                <button
+                    type="button"
+                    aria-label={t('table.command.flipSort', { column: chip.column })}
+                    className="inline-flex min-w-0 items-center gap-1 pl-1.5 text-left"
+                    onClick={onActivate}
+                >
+                    <Icon icon={chip.direction === 'asc' ? ArrowUp : ArrowDown} size={12} className="shrink-0" />
+                    <span className="truncate">{chip.column}</span>
+                </button>
+            )}
+            {chip.kind === 'order' && <span className="min-w-0 truncate pl-1.5">{chip.text}</span>}
+            <IconButton
+                icon={X}
+                size="2xs"
+                label={t(chip.kind === 'sort' ? 'table.command.removeSort' : 'table.command.removeFilter')}
+                tooltip={false}
+                className="shrink-0"
+                onClick={onRemove}
+            />
+        </span>
+    );
+}

package/src/table/ImportDialog.tsx

@@ -0,0 +1,168 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, FormError, Select, Spinner, Switch } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import type { ColumnInfo } from '../protocol/index.ts';
+import { hasMapping } from './import-mapping.ts';
+
+/* What a file's first lines look like, as the client samples them. */
+export interface ImportSample {
+    readonly columns: readonly string[];
+    readonly rows: readonly (readonly string[])[];
+}
+
+/* How many of the sampled rows the preview shows. */
+const PREVIEW_ROWS = 8;
+const SKIP = '-1';
+
+export interface ImportFormProps {
+    /* The file's path, which the person confirms the import of. */
+    path: string;
+    /* The columns of the table a file column can go to. */
+    tableColumns: readonly ColumnInfo[];
+    /* `null` while a new sample is read. */
+    sample: ImportSample | null;
+    header: boolean;
+    /* The table column each file column goes to, by name; `null` skips the file column. */
+    mapping: readonly (string | null)[];
+    busy: boolean;
+    error: string | null;
+    onHeaderChange(header: boolean): void;
+    onMappingChange(fileColumn: number, tableColumn: string | null): void;
+    onImport(): void;
+    onCancel(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* The body of the import dialog: how the file's columns map onto the table's, and a look at the rows. */
+export function ImportForm({
+    path,
+    tableColumns,
+    sample,
+    header,
+    mapping,
+    busy,
+    error,
+    onHeaderChange,
+    onMappingChange,
+    onImport,
+    onCancel,
+    className,
+    ref
+}: ImportFormProps) {
+    const { t } = useTranslation('database');
+    const items = [{ value: SKIP, label: t('table.import.skip') }, ...tableColumns.map((column, index) => ({ value: String(index), label: column.name }))];
+    const valueOf = (name: string | null): string => {
+        const index = name === null ? -1 : tableColumns.findIndex((column) => column.name === name);
+        return index < 0 ? SKIP : String(index);
+    };
+    const canImport = sample !== null && hasMapping(mapping) && !busy;
+
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 flex-col gap-4', className)}>
+            <p className="truncate font-mono text-code text-text-muted">{path}</p>
+            <div className="flex items-center gap-3 text-sm text-text">
+                <Switch checked={header} label={t('table.import.header')} disabled={busy} onCheckedChange={onHeaderChange} />
+                <span>{t('table.import.header')}</span>
+                {sample === null && <Spinner size={12} label={t('table.import.sampling')} />}
+            </div>
+            {sample !== null && (
+                <>
+                    <div className="grid min-h-0 grid-cols-2 items-center gap-x-3 gap-y-1.5 overflow-auto">
+                        <span className="text-xs text-text-faint">{t('table.import.fileColumn')}</span>
+                        <span className="text-xs text-text-faint">{t('table.import.tableColumn')}</span>
+                        {sample.columns.map((name, index) => (
+                            <MappingRow
+                                key={index}
+                                name={name}
+                                value={valueOf(mapping[index] ?? null)}
+                                items={items}
+                                disabled={busy}
+                                label={t('table.import.mapTo', { column: name })}
+                                onChange={(value) => onMappingChange(index, value === SKIP ? null : (tableColumns[Number(value)]?.name ?? null))}
+                            />
+                        ))}
+                    </div>
+                    <div className="flex flex-col gap-1">
+                        <span className="text-xs text-text-faint">
+                            {t('table.import.preview', { count: formatNumber(Math.min(sample.rows.length, PREVIEW_ROWS)) })}
+                        </span>
+                        <div className="max-h-48 overflow-auto rounded-lg border border-border">
+                            <table className="w-full border-collapse text-left font-mono text-code">
+                                <thead className="sticky top-0 bg-surface-raised">
+                                    <tr>
+                                        {sample.columns.map((name, index) => (
+                                            <th key={index} className="max-w-48 truncate border-b border-border px-2 py-1 font-medium text-text-muted">
+                                                {name}
+                                            </th>
+                                        ))}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {sample.rows.slice(0, PREVIEW_ROWS).map((row, rowIndex) => (
+                                        <tr key={rowIndex} className="border-b border-border-soft last:border-b-0">
+                                            {sample.columns.map((_, index) => (
+                                                <td key={index} className="max-w-48 truncate px-2 py-1 whitespace-nowrap text-text">
+                                                    {row[index] ?? ''}
+                                                </td>
+                                            ))}
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </>
+            )}
+            {error !== null && <FormError>{error}</FormError>}
+            <Dialog.Footer className="mt-0">
+                <Button disabled={busy} onClick={onCancel}>
+                    {t('table.import.cancel')}
+                </Button>
+                <Button variant="primary" disabled={!canImport} onClick={onImport}>
+                    {busy && <Spinner size={12} />}
+                    {t('table.import.confirm')}
+                </Button>
+            </Dialog.Footer>
+        </div>
+    );
+}
+
+interface MappingRowProps {
+    name: string;
+    value: string;
+    items: { value: string; label: string }[];
+    disabled: boolean;
+    label: string;
+    onChange(value: string): void;
+}
+
+function MappingRow({ name, value, items, disabled, label, onChange }: MappingRowProps) {
+    return (
+        <>
+            <span className="truncate font-mono text-code text-text">{name}</span>
+            <Select size="sm" className="w-full" label={label} value={value} items={items} disabled={disabled} onValueChange={onChange} />
+        </>
+    );
+}
+
+export interface ImportDialogProps extends ImportFormProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+}
+
+/* The import of a file into the table: pick how the columns map, look at the rows, confirm. */
+export function ImportDialog({ open, onOpenChange, ...form }: ImportDialogProps) {
+    const { t } = useTranslation('database');
+    return (
+        <Dialog.Root open={open} onOpenChange={(next) => !form.busy && onOpenChange(next)}>
+            <Dialog.Popup className="flex max-h-[calc(100vh-96px)] w-[720px] max-w-[calc(100vw-48px)] flex-col p-5">
+                <Dialog.Title>{t('table.import.title')}</Dialog.Title>
+                <Dialog.Description className="mt-1 mb-4">{t('table.import.description')}</Dialog.Description>
+                <ImportForm {...form} />
+            </Dialog.Popup>
+        </Dialog.Root>
+    );
+}

package/src/table/TableStatusBar.tsx

@@ -0,0 +1,91 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, IconButton, Spinner, Tooltip } from '@adecore/ui';
+import { formatDecimal, formatNumber, formatRounded } from '@adecore/ui/format';
+import { useNumberNotation } from '../client-context.ts';
+import type { Aggregates } from '../grid/aggregates.ts';
+import { numeralText } from '../grid/display.ts';
+import type { PageBounds } from './paging.ts';
+
+/* What the selected cells add up to, and which columns they are in. */
+export interface SelectionFigures {
+    readonly columns: readonly string[];
+    readonly aggregates: Aggregates;
+}
+
+export interface TableStatusBarProps {
+    elapsedMs: number;
+    bounds: PageBounds;
+    counting: boolean;
+    /* Shown on the right; left out when fewer than two cells are selected. */
+    selection?: SelectionFigures | null;
+    onCount(): void;
+    onPrevious(): void;
+    onNext(): void;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+/* Which rows are on the page and how many there are, the way to the other pages, and the figures of the selected cells. */
+export function TableStatusBar({ elapsedMs, bounds, counting, selection, onCount, onPrevious, onNext, className, ref }: TableStatusBarProps) {
+    const { t } = useTranslation('database');
+
+    return (
+        <footer ref={ref} className={clsx('flex h-9 shrink-0 items-center gap-3 border-t border-border px-3 text-xs text-text-muted', className)}>
+            <span className="flex items-center gap-1 tabular-nums">
+                {bounds.to === 0 ? t('table.noRows') : t('table.range', { from: formatNumber(bounds.from), to: formatNumber(bounds.to) })}
+                {bounds.to > 0 &&
+                    (bounds.exact ? (
+                        <span>{t('table.total', { total: formatNumber(bounds.total) })}</span>
+                    ) : (
+                        <>
+                            <span>{t('table.of')}</span>
+                            <Button size="xs" aria-label={t('table.count')} disabled={counting} onClick={onCount}>
+                                {counting && <Spinner size={12} />}
+                                {t('table.atLeast', { total: formatNumber(bounds.total) })}
+                            </Button>
+                        </>
+                    ))}
+            </span>
+            <span className="flex items-center">
+                <IconButton icon={ChevronLeft} size="sm" label={t('table.previousPage')} disabled={!bounds.hasPrevious} onClick={onPrevious} />
+                <IconButton icon={ChevronRight} size="sm" label={t('table.nextPage')} disabled={!bounds.hasNext} onClick={onNext} />
+            </span>
+            <Tooltip label={t('table.queryTime')}>
+                <span className="text-text-faint tabular-nums">{t('table.elapsed', { value: formatDecimal(elapsedMs) })}</span>
+            </Tooltip>
+            {selection != null && <SelectionSummary selection={selection} />}
+        </footer>
+    );
+}
+
+function SelectionSummary({ selection }: { selection: SelectionFigures }) {
+    const { t } = useTranslation('database');
+    const { columns, aggregates } = selection;
+    const { count, numeric } = aggregates;
+    const notation = useNumberNotation();
+    const figure = (label: string, value: string) => (
+        <span className="shrink-0">
+            <span className="text-text-faint">{label}</span> <span className="text-text">{value}</span>
+        </span>
+    );
+
+    return (
+        <span className="ml-auto flex min-w-0 items-center gap-4 tabular-nums" data-selection="">
+            <span className="min-w-0 truncate font-mono text-text">
+                {columns.length === 1 ? columns[0] : t('table.aggregates.columns', { formatted: formatNumber(columns.length) })}
+            </span>
+            <span className="shrink-0 text-text-faint">{t('table.aggregates.cells', { count, cells: formatNumber(count) })}</span>
+            {numeric !== null && (
+                <>
+                    {figure(t('table.aggregates.sum'), formatRounded(numeric.sum, 2))}
+                    {figure(t('table.aggregates.average'), formatRounded(numeric.average, 2))}
+                    {figure(t('table.aggregates.minimum'), numeralText(numeric.minimumText, notation))}
+                    {figure(t('table.aggregates.maximum'), numeralText(numeric.maximumText, notation))}
+                </>
+            )}
+        </span>
+    );
+}