@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/value/ValuePanel.tsx

@@ -0,0 +1,254 @@
+import { useMemo, useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
+import clsx from 'clsx';
+import { Copy, Ellipsis, MousePointerClick, WrapText, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+    Button,
+    copyText,
+    EmptyState,
+    FormError,
+    IconButton,
+    isApplePlatform,
+    KEY_SHORTCUTS,
+    matchesShortcut,
+    Menu,
+    PanelHeader,
+    Segmented,
+    TextArea,
+    Tooltip
+} from '@adecore/ui';
+import { formatBytes, formatNumber } from '@adecore/ui/format';
+import type { GridColumn } from '../grid/types.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+import { editValueOf, sameDraft, sameSource, sourceOf, type Draft, type DraftProblem } from './draft.ts';
+import { hexDumpLines, parseHex } from './hex.ts';
+import { renderView, sizeOf, viewsOf, type Rendered, type ViewId } from './views.ts';
+
+export interface ValuePanelProps {
+    /* The column of the focused cell; `null` when no cell has focus, which draws an empty state. */
+    column: GridColumn | null;
+    /* The whole value of the cell. `undefined` while it loads, or when it cannot be had. */
+    value: Value | undefined;
+    loading: boolean;
+    /* Whether this cell can be changed; a read only panel still shows, formats and copies. */
+    editable: boolean;
+    /* The panel's draft, applied as a pending edit like an edit in the grid. */
+    onCommit?(value: EditValue): void;
+    onClose(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+const WRAPPING_VIEWS: ReadonlySet<ViewId> = new Set(['text', 'formatted', 'utf8']);
+
+const READING = 'min-h-0 flex-1 overflow-auto rounded-lg border border-border bg-surface p-2 font-mono text-code text-text';
+
+/* The whole value of the focused cell beside the grid, to read and edit what a cell is too small for. */
+export function ValuePanel({ column, value, loading, editable, onCommit, onClose, className, ref }: ValuePanelProps) {
+    const { t } = useTranslation('database');
+    const ready = column !== null && !loading && value !== undefined;
+
+    return (
+        <div ref={ref} className={clsx('flex h-full min-h-0 min-w-0 flex-col', className)}>
+            <PanelHeader title={column === null ? t('value.title') : undefined}>
+                {column !== null && (
+                    <>
+                        <span className="min-w-0 truncate text-sm font-medium text-text">{column.name}</span>
+                        {column.type !== '' && <span className="min-w-0 shrink-0 truncate text-xs text-text-faint">{column.type}</span>}
+                    </>
+                )}
+                <IconButton icon={X} size="sm" label={t('value.close')} className="ml-auto" onClick={onClose} />
+            </PanelHeader>
+            {ready ? (
+                <ValueEditor column={column} value={value} editable={editable} onCommit={onCommit} />
+            ) : (
+                <div className="grid min-h-0 grow place-items-center">
+                    <EmptyState icon={column === null ? MousePointerClick : undefined} busy={column !== null && loading}>
+                        {column === null ? t('value.selectCell') : loading ? t('value.loading') : t('value.notLoaded')}
+                    </EmptyState>
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ValueEditorProps {
+    column: GridColumn;
+    value: Value;
+    editable: boolean;
+    onCommit?(value: EditValue): void;
+}
+
+function ValueEditor({ column, value, editable, onCommit }: ValueEditorProps) {
+    const { t } = useTranslation('database');
+    const { name, type, kind } = column;
+    const source = useMemo(() => sourceOf({ name, type, kind }, value), [name, type, kind, value]);
+    const [seen, setSeen] = useState(source);
+    const [draft, setDraft] = useState<Draft>(source.original);
+    const [choice, setChoice] = useState<ViewId | null>(null);
+    const [problem, setProblem] = useState<DraftProblem | null>(null);
+    const [wrap, setWrap] = useState(true);
+
+    // A new cell, or the same cell with a new value, starts over from that value.
+    if (!sameSource(seen, source)) {
+        setSeen(source);
+        setDraft(source.original);
+        setChoice(null);
+        setProblem(null);
+    }
+
+    const views = viewsOf(source, draft);
+    const view = choice !== null && views.includes(choice) ? choice : views[0]!;
+    const dirty = !sameDraft(draft, source.original);
+    const rendered = useMemo(() => (view === 'text' ? null : renderView(view, draft)), [view, draft]);
+    const hex = source.binary && draft.mode === 'value' ? parseHex(draft.text) : null;
+    const shownProblem: DraftProblem | null = problem ?? (hex !== null && !hex.ok ? { kind: 'hex', problem: hex.problem } : null);
+    const size = sizeOf(source, draft);
+    const placeholder = draft.mode === 'null' ? 'NULL' : draft.mode === 'default' ? 'DEFAULT' : undefined;
+
+    const change = (next: Draft): void => {
+        setDraft(next);
+        setProblem(null);
+    };
+
+    const apply = (): void => {
+        if (!editable || onCommit === undefined || !dirty) {
+            return;
+        }
+        const conversion = editValueOf(draft, source);
+        if (conversion.ok) {
+            onCommit(conversion.value);
+        } else {
+            setProblem(conversion.problem);
+        }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+        if (!event.nativeEvent.isComposing && matchesShortcut(KEY_SHORTCUTS.modEnter, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            apply();
+        }
+    };
+
+    const copy = (): void => {
+        if (view === 'hex' && hex !== null && hex.ok) {
+            copyText(hexDumpLines(hex.hex).join('\n'));
+        } else if (rendered !== null && rendered.kind === 'text') {
+            copyText(rendered.text);
+        } else {
+            copyText(draft.mode === 'value' ? draft.text : draft.mode === 'null' ? 'NULL' : 'DEFAULT');
+        }
+    };
+
+    const editor = (extra?: string): ReactNode => (
+        <TextArea
+            mono
+            aria-label={t(source.binary ? 'value.hexEditor' : 'value.editor', { column: column.name })}
+            wrap={wrap || source.binary ? 'soft' : 'off'}
+            spellCheck={false}
+            readOnly={!editable}
+            placeholder={placeholder}
+            value={draft.mode === 'value' ? draft.text : ''}
+            className={extra}
+            onChange={(event) => change({ text: event.target.value, mode: 'value' })}
+            onKeyDown={handleKeyDown}
+        />
+    );
+
+    const problemText = (found: DraftProblem): string =>
+        found.kind === 'json'
+            ? t('value.invalidJson', { reason: found.reason })
+            : t(found.problem === 'odd' ? 'value.invalidHexOdd' : 'value.invalidHexCharacters');
+
+    const reading = (content: Rendered, wrapped: boolean): ReactNode => {
+        if (content.kind === 'empty') {
+            return <Faint>{placeholder}</Faint>;
+        }
+        if (content.kind === 'problem') {
+            return <Faint>{problemText(content.problem)}</Faint>;
+        }
+        return (
+            <>
+                <pre className={clsx(READING, wrapped ? 'break-words whitespace-pre-wrap' : 'whitespace-pre')}>{content.text}</pre>
+                {content.truncated && (
+                    <p className="shrink-0 text-xs text-text-faint">
+                        {t('value.dumpTruncated', { shown: formatNumber(content.truncated.shown), total: formatNumber(content.truncated.total) })}
+                    </p>
+                )}
+            </>
+        );
+    };
+
+    const body = (): ReactNode => {
+        if (view === 'text') {
+            return editor('min-h-0 flex-1');
+        }
+        if (view === 'hex' && editable) {
+            return (
+                <>
+                    {draft.mode === 'value' && rendered !== null && reading(rendered, false)}
+                    {editor(draft.mode === 'value' ? 'flex-none' : 'min-h-0 flex-1')}
+                </>
+            );
+        }
+        return rendered === null ? null : reading(rendered, wrap && WRAPPING_VIEWS.has(view));
+    };
+
+    return (
+        <>
+            <div className="flex h-10 shrink-0 items-center gap-2 px-2">
+                {views.length > 1 && (
+                    <Segmented<ViewId>
+                        value={view}
+                        onValueChange={(id) => setChoice(id)}
+                        label={t('value.views')}
+                        options={views.map((id) => ({ id, label: t(`value.view.${id}`) }))}
+                    />
+                )}
+                <div className="ml-auto flex items-center gap-1">
+                    {WRAPPING_VIEWS.has(view) && (
+                        <IconButton icon={WrapText} size="sm" label={t('value.wrap')} aria-pressed={wrap} active={wrap} onClick={() => setWrap(!wrap)} />
+                    )}
+                    <IconButton icon={Copy} size="sm" label={t('value.copy')} onClick={copy} />
+                </div>
+            </div>
+            <div className="flex min-h-0 flex-1 flex-col gap-2 px-2 pb-2">{body()}</div>
+            {shownProblem !== null && <FormError className="shrink-0 px-3 pb-2 text-xs">{problemText(shownProblem)}</FormError>}
+            {editable && (
+                <div className="flex shrink-0 items-center gap-1.5 border-t border-border p-2">
+                    <Menu.Root>
+                        <IconButton icon={Ellipsis} size="sm" label={t('value.more')} render={<Menu.Trigger />} />
+                        <Menu.Popup>
+                            {column.nullable !== false && (
+                                <Menu.Item disabled={draft.mode === 'null'} onClick={() => change({ text: '', mode: 'null' })}>
+                                    {t('value.setNull')}
+                                </Menu.Item>
+                            )}
+                            <Menu.Item disabled={draft.mode === 'default'} onClick={() => change({ text: '', mode: 'default' })}>
+                                {t('value.setDefault')}
+                            </Menu.Item>
+                        </Menu.Popup>
+                    </Menu.Root>
+                    <span className="ml-auto flex items-center gap-1.5">
+                        <Button size="xs" disabled={!dirty} onClick={() => change(source.original)}>
+                            {t('value.revert')}
+                        </Button>
+                        <Tooltip label={t('value.applyHint')} kbd={KEY_SHORTCUTS.modEnter}>
+                            <Button size="xs" variant="primary" disabled={!dirty || onCommit === undefined} onClick={apply}>
+                                {t('value.apply')}
+                            </Button>
+                        </Tooltip>
+                    </span>
+                </div>
+            )}
+            <footer className="flex h-8 shrink-0 items-center border-t border-border px-3 text-xs text-text-muted tabular-nums">
+                {size !== null &&
+                    (size.unit === 'bytes' ? formatBytes(size.count) : t('value.characters', { count: size.count, formatted: formatNumber(size.count) }))}
+            </footer>
+        </>
+    );
+}
+
+function Faint({ children }: { children?: ReactNode }) {
+    return <div className="grid min-h-0 flex-1 place-items-center font-mono text-code text-text-faint">{children}</div>;
+}

package/src/value/draft.ts

@@ -0,0 +1,72 @@
+import { parseDraft } from '../grid/edit-value.ts';
+import type { GridColumn } from '../grid/types.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+import { parseHex, type HexProblem } from './hex.ts';
+import { checkJson, isJsonDocument } from './json.ts';
+
+/* What the editor holds: the text of a value, or a NULL or a DEFAULT that has no text. */
+export interface Draft {
+    readonly text: string;
+    readonly mode: 'value' | 'null' | 'default';
+}
+
+/* What a draft starts from, and what tells a new cell from the same one. */
+export interface Source {
+    readonly name: string;
+    readonly type: string;
+    readonly kind: GridColumn['kind'];
+    readonly binary: boolean;
+    readonly json: boolean;
+    readonly original: Draft;
+}
+
+export type DraftProblem = { readonly kind: 'json'; readonly reason: string } | { readonly kind: 'hex'; readonly problem: HexProblem };
+
+export type Conversion = { readonly ok: true; readonly value: EditValue } | { readonly ok: false; readonly problem: DraftProblem };
+
+/* The text a value is edited as: a binary value as its hex, everything else as it is written. */
+const textOf = (value: Exclude<Value, null>): string => {
+    if (typeof value === 'object') {
+        return value.hex;
+    }
+    return String(value);
+};
+
+export const sourceOf = (column: Pick<GridColumn, 'name' | 'type' | 'kind'>, value: Value): Source => {
+    const binary = column.kind === 'binary' || (value !== null && typeof value === 'object');
+    const original: Draft = value === null ? { text: '', mode: 'null' } : { text: textOf(value), mode: 'value' };
+    return {
+        name: column.name,
+        type: column.type,
+        kind: column.kind,
+        binary,
+        json: !binary && (column.kind === 'json' ? value !== null : typeof value === 'string' && isJsonDocument(value)),
+        original
+    };
+};
+
+export const sameSource = (a: Source, b: Source): boolean =>
+    a.name === b.name && a.type === b.type && a.kind === b.kind && a.binary === b.binary && a.json === b.json && sameDraft(a.original, b.original);
+
+export const sameDraft = (a: Draft, b: Draft): boolean => a.mode === b.mode && (a.mode !== 'value' || a.text === b.text);
+
+/* A draft becomes the value to send. Text goes as text, and a number only where the column holds numbers and the text spells one. */
+export const editValueOf = (draft: Draft, source: Source): Conversion => {
+    if (draft.mode === 'null') {
+        return { ok: true, value: null };
+    }
+    if (draft.mode === 'default') {
+        return { ok: true, value: { kind: 'default' } };
+    }
+    if (source.binary) {
+        const parsed = parseHex(draft.text);
+        return parsed.ok ? { ok: true, value: { kind: 'binary', hex: parsed.hex } } : { ok: false, problem: { kind: 'hex', problem: parsed.problem } };
+    }
+    if (source.json) {
+        const checked = checkJson(draft.text);
+        if (!checked.ok) {
+            return { ok: false, problem: { kind: 'json', reason: checked.reason } };
+        }
+    }
+    return { ok: true, value: parseDraft(draft.text, source.kind) };
+};

package/src/value/hex.ts

@@ -0,0 +1,62 @@
+/* Binary values cross as lowercase hex; these turn it into what a person reads and back. */
+
+export type HexProblem = 'characters' | 'odd';
+
+export type ParsedHex = { readonly ok: true; readonly hex: string } | { readonly ok: false; readonly problem: HexProblem };
+
+export const BYTES_PER_LINE = 16;
+
+const GROUP = 8;
+const GROUP_WIDTH = GROUP * 3 - 1;
+const NOT_HEX = /[^0-9a-f]/;
+const UUID_BYTES = 16;
+
+/* Spaces and newlines may separate the digits, and a leading `0x` is the way the grid writes a binary value. */
+export const parseHex = (text: string): ParsedHex => {
+    const stripped = text.replace(/\s+/g, '').toLowerCase();
+    const hex = stripped.startsWith('0x') ? stripped.slice(2) : stripped;
+    if (NOT_HEX.test(hex)) {
+        return { ok: false, problem: 'characters' };
+    }
+    return hex.length % 2 === 0 ? { ok: true, hex } : { ok: false, problem: 'odd' };
+};
+
+export const bytesOf = (hex: string): Uint8Array => {
+    const bytes = new Uint8Array(hex.length / 2);
+    for (let i = 0; i < bytes.length; i++) {
+        bytes[i] = Number.parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+    }
+    return bytes;
+};
+
+/* Bytes that are not valid UTF-8 become replacement characters rather than an error. */
+export const decodeUtf8 = (hex: string): string => new TextDecoder('utf-8').decode(bytesOf(hex));
+
+/* A UUID is exactly 16 bytes; anything else has no UUID form. */
+export const formatUuid = (hex: string): string | null => {
+    if (hex.length !== UUID_BYTES * 2) {
+        return null;
+    }
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+};
+
+const isPrintable = (byte: number): boolean => byte >= 0x20 && byte <= 0x7e;
+
+const slotsOf = (bytes: Uint8Array, from: number, to: number): string =>
+    Array.from(bytes.subarray(from, to), (byte) => byte.toString(16).padStart(2, '0'))
+        .join(' ')
+        .padEnd(GROUP_WIDTH);
+
+/* One line per 16 bytes: the offset, the bytes in two groups of eight, and the same bytes as ASCII with `.` for what does not print. */
+export const hexDumpLines = (hex: string, maxBytes = Number.POSITIVE_INFINITY): string[] => {
+    const bytes = bytesOf(hex.slice(0, Math.min(hex.length, maxBytes * 2)));
+    const lines: string[] = [];
+    for (let offset = 0; offset < bytes.length; offset += BYTES_PER_LINE) {
+        const line = bytes.subarray(offset, offset + BYTES_PER_LINE);
+        const ascii = Array.from(line, (byte) => (isPrintable(byte) ? String.fromCharCode(byte) : '.')).join('');
+        lines.push(
+            `${offset.toString(16).padStart(8, '0')}  ${slotsOf(bytes, offset, offset + GROUP)}  ${slotsOf(bytes, offset + GROUP, offset + BYTES_PER_LINE)}  |${ascii}|`
+        );
+    }
+    return lines;
+};

package/src/value/json.ts

@@ -0,0 +1,74 @@
+/* JSON detection and layout. Numbers stay as the text the server wrote, so a 64-bit integer is not rounded by a parse. */
+
+const INDENT = '  ';
+
+export type JsonCheck = { readonly ok: true } | { readonly ok: false; readonly reason: string };
+
+export const checkJson = (text: string): JsonCheck => {
+    try {
+        JSON.parse(text);
+        return { ok: true };
+    } catch (error) {
+        return { ok: false, reason: error instanceof Error ? error.message : String(error) };
+    }
+};
+
+/* Whether a string is a JSON object or array. A scalar such as `42` or `"x"` is a plain value, not a document. */
+export const isJsonDocument = (text: string): boolean => {
+    const start = text.trimStart()[0];
+    return (start === '{' || start === '[') && checkJson(text).ok;
+};
+
+/* The text laid out with two spaces per level, or `null` when it is not JSON. */
+export const prettyJson = (text: string): string | null => {
+    if (!checkJson(text).ok) {
+        return null;
+    }
+
+    let output = '';
+    let depth = 0;
+    let i = 0;
+    const lineBreak = () => `\n${INDENT.repeat(depth)}`;
+    const nextToken = (from: number): string => {
+        let at = from;
+        while (/\s/.test(text[at] ?? '')) {
+            at++;
+        }
+        return text[at] ?? '';
+    };
+
+    while (i < text.length) {
+        const char = text[i]!;
+        if (char === '"') {
+            let end = i + 1;
+            while (text[end] !== '"') {
+                end += text[end] === '\\' ? 2 : 1;
+            }
+            output += text.slice(i, end + 1);
+            i = end + 1;
+            continue;
+        }
+        if (char === '{' || char === '[') {
+            const empty = nextToken(i + 1) === (char === '{' ? '}' : ']');
+            output += char;
+            if (empty) {
+                output += char === '{' ? '}' : ']';
+                i = text.indexOf(char === '{' ? '}' : ']', i + 1) + 1;
+                continue;
+            }
+            depth++;
+            output += lineBreak();
+        } else if (char === '}' || char === ']') {
+            depth--;
+            output += `${lineBreak()}${char}`;
+        } else if (char === ',') {
+            output += `,${lineBreak()}`;
+        } else if (char === ':') {
+            output += ': ';
+        } else if (!/\s/.test(char)) {
+            output += char;
+        }
+        i++;
+    }
+    return output.trim();
+};

package/src/value/views.ts

@@ -0,0 +1,68 @@
+import type { Draft, DraftProblem, Source } from './draft.ts';
+import { decodeUtf8, formatUuid, hexDumpLines, parseHex } from './hex.ts';
+import { checkJson, prettyJson } from './json.ts';
+
+export type ViewId = 'text' | 'formatted' | 'hex' | 'utf8' | 'uuid';
+
+/* The views that make sense for this value, the first being the one it opens in. */
+export const viewsOf = (source: Source, draft: Draft): ViewId[] => {
+    if (source.binary) {
+        const parsed = parseHex(draft.text);
+        const hex = parsed.ok ? parsed.hex : source.original.text;
+        return formatUuid(hex) === null ? ['hex', 'utf8'] : ['hex', 'utf8', 'uuid'];
+    }
+    return source.json ? ['formatted', 'text'] : ['text'];
+};
+
+/* What a draft is, in bytes for a binary value and in characters for the rest; `null` when there is nothing to measure. */
+export const sizeOf = (source: Source, draft: Draft): { unit: 'bytes' | 'characters'; count: number } | null => {
+    if (draft.mode !== 'value') {
+        return null;
+    }
+    if (!source.binary) {
+        return { unit: 'characters', count: draft.text.length };
+    }
+    const parsed = parseHex(draft.text);
+    return parsed.ok ? { unit: 'bytes', count: parsed.hex.length / 2 } : null;
+};
+
+/* A read only view stops its dump here; the text view and a copy are not limited. */
+export const DUMP_LIMIT_BYTES = 16 * 1024;
+
+export type Rendered =
+    /* A NULL or a DEFAULT, which has nothing to lay out. */
+    | { readonly kind: 'empty' }
+    | { readonly kind: 'text'; readonly text: string; readonly truncated?: { readonly shown: number; readonly total: number } }
+    | { readonly kind: 'problem'; readonly problem: DraftProblem };
+
+/* What a read only view shows for the draft. The text view is not here, since it is the editor itself. */
+export const renderView = (view: Exclude<ViewId, 'text'>, draft: Draft): Rendered => {
+    if (draft.mode !== 'value') {
+        return { kind: 'empty' };
+    }
+    if (view === 'formatted') {
+        const pretty = prettyJson(draft.text);
+        if (pretty !== null) {
+            return { kind: 'text', text: pretty };
+        }
+        const checked = checkJson(draft.text);
+        return { kind: 'problem', problem: { kind: 'json', reason: checked.ok ? '' : checked.reason } };
+    }
+
+    const parsed = parseHex(draft.text);
+    if (!parsed.ok) {
+        return { kind: 'problem', problem: { kind: 'hex', problem: parsed.problem } };
+    }
+    if (view === 'utf8') {
+        return { kind: 'text', text: decodeUtf8(parsed.hex) };
+    }
+    if (view === 'uuid') {
+        return { kind: 'text', text: formatUuid(parsed.hex) ?? '' };
+    }
+    const total = parsed.hex.length / 2;
+    return {
+        kind: 'text',
+        text: hexDumpLines(parsed.hex, DUMP_LIMIT_BYTES).join('\n'),
+        truncated: total > DUMP_LIMIT_BYTES ? { shown: DUMP_LIMIT_BYTES, total } : undefined
+    };
+};