vastgrid 0.1.1 → 0.2.0

package/src/components/find-bar.tsx

@@ -1,104 +0,0 @@
-import { type KeyboardEvent, useEffect, useRef, useState } from "react";
-import { isAbortError } from "vastgrid-core";
-import type { Messages } from "../messages.js";
-
-/** Find in the table (⌘F / Ctrl+F): moves the active cell to each match, wrapping at the ends. */
-export function FindBar({
-  messages,
-  initial,
-  onFind,
-  onClose,
-}: {
-  messages: Messages;
-  initial: string;
-  onFind: (text: string, direction: 1 | -1, caseSensitive: boolean, signal: AbortSignal) => Promise<boolean>;
-  onClose: () => void;
-}) {
-  const [text, setText] = useState(initial);
-  const [caseSensitive, setCaseSensitive] = useState(false);
-  const [status, setStatus] = useState<"idle" | "searching" | "notFound">("idle");
-  const input = useRef<HTMLInputElement>(null);
-  const pending = useRef<AbortController | null>(null);
-
-  useEffect(() => {
-    input.current?.focus();
-    input.current?.select();
-    return () => pending.current?.abort();
-  }, []);
-
-  async function find(direction: 1 | -1) {
-    pending.current?.abort();
-    const controller = new AbortController();
-    pending.current = controller;
-    setStatus("searching");
-    try {
-      const found = await onFind(text, direction, caseSensitive, controller.signal);
-      if (!controller.signal.aborted) setStatus(found || !text ? "idle" : "notFound");
-    } catch (error) {
-      if (!controller.signal.aborted && !isAbortError(error)) setStatus("notFound");
-    }
-  }
-
-  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      void find(event.shiftKey ? -1 : 1);
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      onClose();
-    }
-  }
-
-  return (
-    <search className="vg-find" aria-label={messages.find}>
-      <input
-        ref={input}
-        type="search"
-        className="vg-input"
-        placeholder={messages.findPlaceholder}
-        aria-label={messages.findPlaceholder}
-        value={text}
-        onChange={(event) => {
-          setText(event.target.value);
-          setStatus("idle");
-        }}
-        onKeyDown={onKeyDown}
-      />
-      <span className="vg-find__status" role="status">
-        {status === "searching" ? messages.searching : status === "notFound" ? messages.notFound : ""}
-      </span>
-      <button
-        type="button"
-        className="vg-icon-button"
-        aria-label={messages.findPrevious}
-        title={`${messages.findPrevious} (Shift+Enter)`}
-        onClick={() => void find(-1)}
-      >
-        ↑
-      </button>
-      <button
-        type="button"
-        className="vg-icon-button"
-        aria-label={messages.findNext}
-        title={`${messages.findNext} (Enter)`}
-        onClick={() => void find(1)}
-      >
-        ↓
-      </button>
-      <label className="vg-find__case" title={messages.matchCase}>
-        <input type="checkbox" checked={caseSensitive} onChange={(event) => setCaseSensitive(event.target.checked)} />
-        <span aria-hidden="true">Aa</span>
-        <span className="vg-sr-only">{messages.matchCase}</span>
-      </label>
-      <button
-        type="button"
-        className="vg-icon-button"
-        aria-label={messages.close}
-        title={`${messages.close} (Esc)`}
-        onClick={onClose}
-      >
-        ×
-      </button>
-    </search>
-  );
-}

package/src/components/popover.tsx

@@ -1,194 +0,0 @@
-import {
-  type KeyboardEvent,
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-
-export interface Anchor {
-  /** Position relative to the grid's root element. */
-  x: number;
-  y: number;
-  /** Height of the anchor, so that the popover can open above it when there is no room below. */
-  height?: number;
-}
-
-/**
- * A panel positioned inside the grid's root. Closes on Escape and on pointer presses outside, and
- * returns focus to `returnFocus` when it closes.
- */
-export function Popover({
-  anchor,
-  container,
-  onClose,
-  returnFocus,
-  label,
-  role = "dialog",
-  className,
-  children,
-  initialFocus = true,
-}: {
-  anchor: Anchor;
-  container: RefObject<HTMLElement | null>;
-  onClose: () => void;
-  returnFocus?: RefObject<HTMLElement | null>;
-  label: string;
-  role?: "dialog" | "menu";
-  className?: string;
-  children: ReactNode;
-  initialFocus?: boolean;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
-  const close = useRef(onClose);
-  close.current = onClose;
-
-  useLayoutEffect(() => {
-    const element = ref.current;
-    const root = container.current;
-    if (!element || !root) return;
-    const width = element.offsetWidth;
-    const height = element.offsetHeight;
-    const maxLeft = Math.max(4, root.clientWidth - width - 4);
-    const below = anchor.y + (anchor.height ?? 0) + 2;
-    const above = anchor.y - height - 2;
-    const top = below + height <= root.clientHeight - 4 || above < 4 ? below : above;
-    setPosition({ left: Math.min(Math.max(4, anchor.x), maxLeft), top: Math.max(4, top) });
-  }, [anchor, container]);
-
-  useEffect(() => {
-    if (initialFocus) {
-      const target = ref.current?.querySelector<HTMLElement>(
-        "[data-autofocus], input, button, [tabindex='0'], [role='menuitem']",
-      );
-      target?.focus({ preventScroll: true });
-    }
-    const returnTo = returnFocus?.current;
-    const element = ref.current;
-    function onPointerDown(event: PointerEvent) {
-      if (element && !element.contains(event.target as Node)) close.current();
-    }
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-      // Return focus when it was inside the panel (it falls back to the body when the panel is removed),
-      // but not when the user moved it elsewhere, for example by clicking outside.
-      const active = document.activeElement;
-      if (returnTo && (!active || active === document.body || element?.contains(active))) {
-        returnTo.focus({ preventScroll: true });
-      }
-    };
-  }, [initialFocus, returnFocus]);
-
-  function onKeyDown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      returnFocus?.current?.focus({ preventScroll: true });
-      onClose();
-    }
-  }
-
-  const props = {
-    ref,
-    className: `vg-popover${className ? ` ${className}` : ""}`,
-    "aria-label": label,
-    // The first render uses the anchor; the layout effect corrects the position before the browser paints.
-    // (A hidden first render would make the panel unfocusable when the focus effect runs.)
-    style: position ? { left: position.left, top: position.top } : { left: anchor.x, top: anchor.y },
-    onKeyDown,
-  };
-  return role === "menu" ? (
-    <div role="menu" {...props}>
-      {children}
-    </div>
-  ) : (
-    <div role="dialog" {...props}>
-      {children}
-    </div>
-  );
-}
-
-export interface MenuItem {
-  label: string;
-  onSelect: () => void;
-  disabled?: boolean;
-  /** Draws a separator above the item. */
-  separator?: boolean;
-  checked?: boolean;
-  shortcut?: string;
-}
-
-/** A menu list with arrow-key navigation. Selecting an item closes the menu. */
-export function MenuList({ items, onClose }: { items: MenuItem[]; onClose: () => void }) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  function move(event: KeyboardEvent, step: number) {
-    const buttons = [...(ref.current?.querySelectorAll<HTMLButtonElement>("[role^='menuitem']:not(:disabled)") ?? [])];
-    if (buttons.length === 0) return;
-    event.preventDefault();
-    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);
-    const next =
-      step === Number.POSITIVE_INFINITY
-        ? buttons.length - 1
-        : step === Number.NEGATIVE_INFINITY
-          ? 0
-          : (index + step + buttons.length) % buttons.length;
-    buttons[next]?.focus();
-  }
-
-  function onKeyDown(event: KeyboardEvent) {
-    if (event.key === "ArrowDown") move(event, 1);
-    else if (event.key === "ArrowUp") move(event, -1);
-    else if (event.key === "Home") move(event, Number.NEGATIVE_INFINITY);
-    else if (event.key === "End") move(event, Number.POSITIVE_INFINITY);
-    else if (event.key === "Tab") {
-      event.preventDefault();
-      onClose();
-    }
-  }
-
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: the menu items inside are the interactive elements; this handles their arrow keys.
-    <div ref={ref} className="vg-menu" onKeyDown={onKeyDown}>
-      {items.map((item) => (
-        <div key={item.label}>
-          {item.separator && <hr className="vg-menu__separator" />}
-          {item.checked === undefined ? (
-            <button
-              type="button"
-              role="menuitem"
-              className="vg-menu__item"
-              disabled={item.disabled}
-              onClick={() => {
-                onClose();
-                item.onSelect();
-              }}
-            >
-              <span>{item.label}</span>
-              {item.shortcut && <kbd>{item.shortcut}</kbd>}
-            </button>
-          ) : (
-            <button
-              type="button"
-              role="menuitemcheckbox"
-              aria-checked={item.checked}
-              className="vg-menu__item"
-              disabled={item.disabled}
-              onClick={() => {
-                onClose();
-                item.onSelect();
-              }}
-            >
-              <span>{item.label}</span>
-              {item.shortcut && <kbd>{item.shortcut}</kbd>}
-            </button>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/stats-panel.tsx

@@ -1,153 +0,0 @@
-import { useEffect, useState } from "react";
-import { type ColumnSchema, type ColumnStats, isAbortError, isTemporalType, type ValueFormatter } from "vastgrid-core";
-import type { Messages } from "../messages.js";
-
-function temporalLabel(seconds: number, type: ColumnSchema["type"]) {
-  const date = new Date(seconds * 1000);
-  if (Number.isNaN(date.getTime())) return String(seconds);
-  const iso = date.toISOString();
-  return type === "date" ? iso.slice(0, 10) : iso.slice(0, 16).replace("T", " ");
-}
-
-/** Statistics of one column: counts, range, distribution and the most common values. */
-export function StatsPanel({
-  schema,
-  messages,
-  formatter,
-  count,
-  number,
-  load,
-}: {
-  schema: ColumnSchema;
-  messages: Messages;
-  formatter: ValueFormatter;
-  count: (value: number) => string;
-  number: (value: number) => string;
-  load: (signal: AbortSignal) => Promise<ColumnStats> | null;
-}) {
-  const [stats, setStats] = useState<ColumnStats | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const controller = new AbortController();
-    load(controller.signal)
-      ?.then((result) => {
-        if (!controller.signal.aborted) setStats(result);
-      })
-      .catch((cause: unknown) => {
-        if (controller.signal.aborted || isAbortError(cause)) return;
-        setError(cause instanceof Error ? cause.message : String(cause));
-      });
-    return () => controller.abort();
-  }, [load]);
-
-  const s = messages.stats;
-  const value = (item: ColumnStats["min"]) =>
-    item === undefined || item === null ? "—" : formatter.format(item, schema.type);
-  const percent = (part: number, whole: number) =>
-    whole === 0 ? "0%" : `${((part / whole) * 100).toFixed(part === 0 || part === whole ? 0 : 1)}%`;
-  const histogram = stats?.histogram ?? null;
-  const peak = histogram ? Math.max(1, ...histogram.map((bin) => bin.count)) : 1;
-  const topPeak = stats?.top?.length ? Math.max(1, ...stats.top.map((item) => item.count)) : 1;
-  const edge = (point: number) => (isTemporalType(schema.type) ? temporalLabel(point, schema.type) : number(point));
-
-  return (
-    <div className="vg-stats">
-      <p className="vg-panel__title">
-        {schema.name}
-        <span className="vg-panel__muted">
-          {" "}
-          · {messages.types[schema.type] ?? schema.type}
-          {schema.sourceType ? ` (${schema.sourceType})` : ""}
-        </span>
-      </p>
-      {error && <p className="vg-panel__error">{error}</p>}
-      {!stats && !error && <p className="vg-panel__muted">{messages.loading}</p>}
-      {stats && (
-        <>
-          <dl className="vg-stats__list">
-            <dt>{s.rows}</dt>
-            <dd>{count(stats.rows)}</dd>
-            <dt>{s.nulls}</dt>
-            <dd>
-              {count(stats.nulls)} ({percent(stats.nulls, stats.rows)})
-            </dd>
-            <dt>{s.distinct}</dt>
-            <dd>
-              {stats.distinct === null ? "—" : `${stats.distinctApproximate ? "≈ " : ""}${count(stats.distinct)}`}
-            </dd>
-            <dt>{s.min}</dt>
-            <dd>{value(stats.min)}</dd>
-            <dt>{s.max}</dt>
-            <dd>{value(stats.max)}</dd>
-            {stats.mean !== undefined && stats.mean !== null && !isTemporalType(schema.type) && (
-              <>
-                <dt>{s.mean}</dt>
-                <dd>{number(stats.mean)}</dd>
-              </>
-            )}
-            {stats.stddev !== undefined && stats.stddev !== null && !isTemporalType(schema.type) && (
-              <>
-                <dt>{s.stddev}</dt>
-                <dd>{number(stats.stddev)}</dd>
-              </>
-            )}
-            {stats.quantiles && (
-              <>
-                <dt>{s.quartiles}</dt>
-                <dd>
-                  {stats.quantiles.map((item) => (typeof item === "number" ? number(item) : value(item))).join(" / ")}
-                </dd>
-              </>
-            )}
-            {stats.minLength !== undefined && stats.minLength !== null && (
-              <>
-                <dt>{s.length}</dt>
-                <dd>
-                  {count(stats.minLength)} – {count(stats.maxLength ?? stats.minLength)}
-                </dd>
-              </>
-            )}
-          </dl>
-          {histogram && histogram.length > 1 && (
-            <figure className="vg-stats__histogram">
-              <figcaption>{s.histogram}</figcaption>
-              <div className="vg-stats__bars">
-                {histogram.map((bin) => (
-                  <span
-                    key={bin.start}
-                    className="vg-stats__bar"
-                    style={{ height: `${Math.max(bin.count > 0 ? 3 : 0, (bin.count / peak) * 100)}%` }}
-                    title={`${edge(bin.start)} – ${edge(bin.end)}: ${count(bin.count)}`}
-                  />
-                ))}
-              </div>
-              <div className="vg-stats__axis">
-                <span>{edge(histogram[0].start)}</span>
-                <span>{edge(histogram[histogram.length - 1].end)}</span>
-              </div>
-            </figure>
-          )}
-          {stats.top && stats.top.length > 0 && (
-            <figure className="vg-stats__top">
-              <figcaption>{s.top}</figcaption>
-              <ul>
-                {stats.top.map((item) => (
-                  <li key={`${typeof item.value}:${String(item.value)}`}>
-                    <span className="vg-stats__top-bar" style={{ width: `${(item.count / topPeak) * 100}%` }} />
-                    <span className="vg-stats__top-label">
-                      {item.value === null || item.value === ""
-                        ? messages.blank
-                        : formatter.format(item.value, schema.type)}
-                    </span>
-                    <span className="vg-stats__top-count">{count(item.count)}</span>
-                  </li>
-                ))}
-              </ul>
-            </figure>
-          )}
-        </>
-      )}
-    </div>
-  );
-}