rastack 0.0.44 → 0.0.45

package/admin/adapters.ts

@@ -28,6 +28,8 @@ export interface AdminField {
   primaryKey: boolean;
   maxLength?: number;
   nullable: boolean;
+  /** Unique constraint — such fields are identifiers, not filter facets. */
+  unique?: boolean;
   /** `{ app, model }` for a foreign key (`type === "fk"`). */
   relation?: { app: string; model: string };
 }
@@ -53,6 +55,7 @@ interface RawField {
   primaryKey?: boolean;
   maxLength?: number;
   null?: boolean;
+  unique?: boolean;
   relation?: { app: string; model: string };
 }
 interface RawResource {
@@ -81,6 +84,7 @@ export function parseManifest(manifest: object | string): AdminResource[] {
       primaryKey: f.primaryKey === true,
       maxLength: f.maxLength,
       nullable: f.null === true,
+      unique: f.unique === true,
       relation: f.relation,
     })),
     search: r.search ?? [],
@@ -237,6 +241,101 @@ export function buildWriteBody(
   return body;
 }
 
+// -- filters (Linear-style changelist filter bar) ---------------------------
+
+/** How a filter's values are sourced/rendered. */
+export type FilterKind = "fk" | "bool" | "choice";
+
+/** A single selectable filter value. */
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+/** A field the changelist can filter on, and how to build its value list. */
+export interface FilterableField {
+  name: string;
+  label: string;
+  kind: FilterKind;
+  /** FK target table (`kind === "fk"`). */
+  relation?: { app: string; model: string };
+}
+
+/** Distinct-value cap: above this a `string` field is an identifier, not a facet. */
+export const DISTINCT_CAP = 40;
+
+/**
+ * The fields a changelist offers as filters, mirroring what makes sense as a
+ * Django `list_filter`: every foreign key (filter by related row), every boolean
+ * (true/false), and every non-unique plain-string field (filter by one of its
+ * observed values). Unique strings, numbers, ids and timestamps are excluded —
+ * they identify a row rather than group many, so they belong in search, not a
+ * facet.
+ */
+export function filterableFields(resource: AdminResource): FilterableField[] {
+  const out: FilterableField[] = [];
+  for (const f of resource.fields) {
+    if (f.primaryKey) continue;
+    if (f.type === "fk" && f.relation) {
+      out.push({ name: f.name, label: humanizeKey(f.name), kind: "fk", relation: f.relation });
+    } else if (f.type === "bool") {
+      out.push({ name: f.name, label: humanizeKey(f.name), kind: "bool" });
+    } else if (f.type === "string" && !f.unique) {
+      out.push({ name: f.name, label: humanizeKey(f.name), kind: "choice" });
+    }
+  }
+  return out;
+}
+
+/** The fixed True/False options a boolean filter offers. */
+export function boolFilterOptions(): FilterOption[] {
+  return [
+    { value: "true", label: "True" },
+    { value: "false", label: "False" },
+  ];
+}
+
+/**
+ * Distinct non-empty values of `field` across `rows`, sorted, as filter options.
+ * Returns `[]` when the field has more than `cap` distinct values (too
+ * high-cardinality to be a useful facet — it should be searched, not filtered).
+ */
+export function distinctValueOptions(
+  rows: Record<string, unknown>[],
+  field: string,
+  cap = DISTINCT_CAP,
+): FilterOption[] {
+  const seen = new Set<string>();
+  for (const row of rows) {
+    const v = row[field];
+    if (v === null || v === undefined || v === "") continue;
+    seen.add(String(v));
+    if (seen.size > cap) return [];
+  }
+  return [...seen].sort().map((value) => ({ value, label: value }));
+}
+
+/**
+ * The label for an FK filter value: reuse the `<select>` option label heuristic
+ * (first non-id string field, else `#id`) against the target table's rows.
+ */
+export function fkFilterOptions(rows: Record<string, unknown>[]): FilterOption[] {
+  return rows.map((row) => ({
+    value: String(row.id ?? ""),
+    label: optionLabel(row),
+  }));
+}
+
+/** Merge active filters into an engine list-query object (field → value). */
+export function withFilters(
+  query: Record<string, string>,
+  filters: Record<string, string>,
+): Record<string, string> {
+  // Filters first, then reserved keys, so a field named `page`/`search` can
+  // never shadow pagination — the reserved keys always win.
+  return { ...filters, ...query };
+}
+
 /** Extract a `{detail}` error message from a non-2xx `handle` body. */
 export function errorDetail(body: unknown): string {
   if (body && typeof body === "object" && "detail" in body) {

package/admin/httpEngine.ts

@@ -0,0 +1,56 @@
+/**
+ * An HTTP-backed `RastackEngine` — the same `handle(method, path, query, body)`
+ * seam the WASM engine exposes, implemented over `fetch` against a live
+ * `rastack-server`. This is what lets the *identical* admin UI run two ways:
+ * over WebAssembly in `rastack dev` (`client.engine`), or over the real Rust
+ * API + Iceberg store in `rastack admin` (this adapter) — the components,
+ * hooks and adapters above it never learn which.
+ */
+
+import type { RastackEngine } from "../provider/types";
+
+/** Build a same-origin (or `baseUrl`-rooted) HTTP engine. */
+export function createHttpEngine(baseUrl = ""): RastackEngine {
+  const base = baseUrl.replace(/\/+$/, "");
+
+  async function handle(
+    method: string,
+    path: string,
+    query: Record<string, string> | undefined,
+    body: unknown,
+  ): Promise<{ status: number; body: any }> {
+    const qs =
+      query && Object.keys(query).length
+        ? "?" + new URLSearchParams(query).toString()
+        : "";
+    const hasBody = body !== undefined && body !== null;
+    const res = await fetch(base + path + qs, {
+      method,
+      headers: hasBody ? { "Content-Type": "application/json" } : undefined,
+      body: hasBody ? JSON.stringify(body) : undefined,
+      credentials: "same-origin",
+    });
+    // 204 (delete) and errors may carry no body; parse defensively.
+    const text = await res.text();
+    let parsed: any = null;
+    if (text) {
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        parsed = text;
+      }
+    }
+    return { status: res.status, body: parsed };
+  }
+
+  const unavailable = (op: string) => async (): Promise<never> => {
+    throw new Error(`${op} is only available over the local WASM engine.`);
+  };
+
+  return {
+    handle,
+    seedFile: unavailable("seedFile"),
+    importWarehouse: unavailable("importWarehouse"),
+    exportWarehouse: unavailable("exportWarehouse") as RastackEngine["exportWarehouse"],
+  };
+}

package/admin/index.tsx

@@ -1,25 +1,50 @@
 /**
- * Entry point for the `rastack dev` in-browser admin, bundled by esbuild into
- * `dist/admin.js` and served at `/dev/admin.js`. It fetches the compiled
- * schema/openapi, boots the WASM engine via `<RAStackProvider mode="local">`
- * (seeding from the served `/data/warehouse/`), themes everything with
- * `<ThemeProvider>`, and renders the manifest-driven `<AdminApp>`.
+ * Entry point for the admin bundle (`dist/admin.js`). It runs two ways from the
+ * *same* build, chosen by a `window.__RASTACK_ADMIN__` config the host page
+ * injects (defaulting to local):
+ *
+ *  • `rastack dev`   → `mode: "local"`  — boots the WASM engine via
+ *    `<RAStackProvider mode="local">`, seeding from the served `/data/warehouse/`.
+ *  • `rastack admin` → `mode: "remote"` — talks to the live `rastack-server`
+ *    over HTTP through an `httpEngine`, against the real Iceberg warehouse.
+ *
+ * Either way it fetches the compiled schema, themes everything with
+ * `<ThemeProvider>` and the design tokens, and renders the manifest-driven
+ * `<AdminApp>` — which never learns which engine it got.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { RAStackProvider } from "../provider";
+import { RAStackProvider, useRastackClient } from "../provider";
 import type { RastackWasmModule } from "../provider/types";
+import { Spinner } from "../components";
 import { ThemeProvider } from "../theme";
 import { defineTheme } from "../tokens";
 import { AdminApp } from "./AdminApp";
+import { parseManifest, type AdminResource } from "./adapters";
+import { createHttpEngine } from "./httpEngine";
 
-/**
- * Load the wasm engine from the URL `rastack dev` serves it at (`/wasm/…`).
- * The dynamic `import()` is hidden behind `new Function` so esbuild leaves it
- * for the browser to resolve at runtime (the same trick `defaultEngineLoader`
- * uses) rather than trying to bundle the `.wasm` at build time.
- */
+interface AdminConfig {
+  mode: "local" | "remote";
+  /** Remote: base URL the `/api/...` paths are joined onto (default same origin). */
+  apiBase?: string;
+  /** Where to fetch the compiled `schema.rastack.json`. */
+  schemaUrl?: string;
+  /** Local: base URL of the committed Iceberg warehouse to seed from. */
+  warehouseBaseUrl?: string;
+}
+
+const cfg: AdminConfig =
+  (typeof window !== "undefined" && (window as any).__RASTACK_ADMIN__) || {
+    mode: "local",
+    schemaUrl: "/schema.rastack.json",
+    warehouseBaseUrl: "/data/warehouse/",
+  };
+
+// The framework's own design system paints the whole console.
+const theme = defineTheme({ brand: "#4F6BFF", radius: "rounded" });
+
+/** Load the WASM engine from the URL `rastack dev` serves it at (`/wasm/…`). */
 const loadEngine = async (): Promise<RastackWasmModule> => {
   const runtimeImport = new Function("s", "return import(s)") as (
     s: string,
@@ -30,55 +55,82 @@ const loadEngine = async (): Promise<RastackWasmModule> => {
   return mod;
 };
 
-const theme = defineTheme({ brand: "#2f6feb", radius: "rounded" });
+function Loading({ label }: { label: string }): React.JSX.Element {
+  return (
+    <div className="ras-boot">
+      <Spinner /> {label}
+    </div>
+  );
+}
 
-interface Compiled {
-  manifest: object;
-  openapi?: object;
+/** Local (WASM) admin: wait for the provider's engine, then render. */
+function LocalAdmin({ resources }: { resources: AdminResource[] }): React.JSX.Element {
+  const client = useRastackClient();
+  if (client.status === "error")
+    return <Loading label="The WASM engine failed to start — check the console." />;
+  if (!client.engine || client.status !== "ready")
+    return (
+      <Loading
+        label={
+          client.status === "seeding"
+            ? "Seeding the local warehouse…"
+            : "Starting the WASM engine…"
+        }
+      />
+    );
+  return <AdminApp engine={client.engine} resources={resources} />;
 }
 
 function Boot(): React.JSX.Element {
-  const [compiled, setCompiled] = useState<Compiled | null>(null);
-  const [error, setError] = useState<string | undefined>();
+  const [resources, setResources] = useState<AdminResource[] | null>(null);
+  const [manifest, setManifest] = useState<object | null>(null);
+  const [openapi, setOpenapi] = useState<object | undefined>();
+  const [error, setError] = useState<string>();
+  const httpEngine = useMemo(() => createHttpEngine(cfg.apiBase ?? ""), []);
 
   useEffect(() => {
     (async () => {
-      const manifestRes = await fetch("/schema.rastack.json");
-      if (!manifestRes.ok)
-        throw new Error(`schema.rastack.json (${manifestRes.status})`);
-      const manifest = await manifestRes.json();
-      let openapi: object | undefined;
-      try {
-        const openapiRes = await fetch("/openapi.json");
-        if (openapiRes.ok) openapi = await openapiRes.json();
-      } catch {
-        /* openapi is optional */
+      const schemaUrl = cfg.schemaUrl || "/schema.rastack.json";
+      const res = await fetch(schemaUrl);
+      if (!res.ok) throw new Error(`${schemaUrl} (${res.status})`);
+      const doc = await res.json();
+      setManifest(doc);
+      setResources(parseManifest(doc));
+      if (cfg.mode === "local") {
+        try {
+          const o = await fetch("/openapi.json");
+          if (o.ok) setOpenapi(await o.json());
+        } catch {
+          /* openapi is optional */
+        }
       }
-      setCompiled({ manifest, openapi });
     })().catch((e) => setError(String(e)));
   }, []);
 
   if (error)
+    return <div className="ras-boot">Failed to load the schema: {error}</div>;
+  if (!resources || !manifest) return <Loading label="Loading the schema…" />;
+
+  if (cfg.mode === "remote") {
     return (
-      <div className="rastack-boot">
-        Failed to load the compiled schema: {error}
-      </div>
+      <ThemeProvider tokens={theme}>
+        <AdminApp engine={httpEngine} resources={resources} />
+      </ThemeProvider>
     );
-  if (!compiled)
-    return <div className="rastack-boot">Compiling the schema…</div>;
+  }
 
   return (
     <RAStackProvider
       mode="local"
-      manifest={compiled.manifest}
-      openapi={compiled.openapi}
+      manifest={manifest}
+      openapi={openapi}
       loadEngine={loadEngine}
-      warehouseBaseUrl="/data/warehouse/"
+      warehouseBaseUrl={cfg.warehouseBaseUrl ?? "/data/warehouse/"}
       persist={false}
       cache={false}
     >
       <ThemeProvider tokens={theme}>
-        <AdminApp manifest={compiled.manifest} />
+        <LocalAdmin resources={resources} />
       </ThemeProvider>
     </RAStackProvider>
   );

package/admin/ui/FilterBar.tsx

@@ -0,0 +1,231 @@
+/**
+ * The Linear-style changelist filter bar: active filters render as pill "chips"
+ * (`Field  is  Value  ×`) whose value opens a switcher popover and whose × drops
+ * the filter; a dashed "＋ Filter" button opens a two-level menu (pick a field →
+ * pick a value). Search sits at the right. Every value is served from the
+ * `FilterFieldModel`s discovered by `useFilterModel` (FK target rows, distinct
+ * strings, booleans), so the bar reflects the data, and each pick drives an
+ * equality filter through the engine.
+ */
+import React, { useState } from "react";
+import type { FilterOption } from "../adapters";
+import type { FilterFieldModel } from "../useAdmin";
+import { Popover } from "./Popover";
+import {
+  IconChevronRight,
+  IconClose,
+  IconFilter,
+  IconLink,
+  IconPlus,
+  IconSearch,
+} from "./icons";
+
+function facetIcon(kind: FilterFieldModel["kind"]): React.JSX.Element {
+  return kind === "fk" ? (
+    <IconLink size={15} className="ras-ico" />
+  ) : (
+    <IconFilter size={15} className="ras-ico" />
+  );
+}
+
+function labelFor(facet: FilterFieldModel | undefined, value: string): string {
+  return facet?.options.find((o) => o.value === value)?.label ?? value;
+}
+
+/** A searchable list of value options (used by the add-menu and chip switcher). */
+function OptionList(props: {
+  options: FilterOption[];
+  selected?: string;
+  onPick: (value: string) => void;
+}): React.JSX.Element {
+  const [q, setQ] = useState("");
+  const shown = q
+    ? props.options.filter((o) => o.label.toLowerCase().includes(q.toLowerCase()))
+    : props.options;
+  return (
+    <>
+      {props.options.length > 8 ? (
+        <input
+          className="ras-pop-search"
+          placeholder="Search…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          autoFocus
+        />
+      ) : null}
+      <div className="ras-pop-list">
+        {shown.length === 0 ? (
+          <div className="ras-pop-empty">No matches</div>
+        ) : (
+          shown.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              className={"ras-pop-item" + (o.value === props.selected ? " is-selected" : "")}
+              onClick={() => props.onPick(o.value)}
+            >
+              {o.label}
+            </button>
+          ))
+        )}
+      </div>
+    </>
+  );
+}
+
+/** The two-level "add filter" menu: fields → values. */
+function AddFilterMenu(props: {
+  facets: FilterFieldModel[];
+  activeFields: string[];
+  onPick: (field: string, value: string) => void;
+  close: () => void;
+}): React.JSX.Element {
+  const [view, setView] = useState<string | null>(null);
+  const available = props.facets.filter((f) => !props.activeFields.includes(f.name));
+
+  if (view) {
+    const facet = props.facets.find((f) => f.name === view);
+    if (!facet) return <div className="ras-pop-empty">—</div>;
+    return (
+      <>
+        <div className="ras-pop-head" onClick={() => setView(null)}>
+          <IconChevronRight size={14} style={{ transform: "rotate(180deg)" }} />
+          {facet.label}
+        </div>
+        <OptionList
+          options={facet.options}
+          onPick={(v) => {
+            props.onPick(facet.name, v);
+            props.close();
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="ras-pop-list">
+      {available.length === 0 ? (
+        <div className="ras-pop-empty">No more filters</div>
+      ) : (
+        available.map((f) => (
+          <button
+            key={f.name}
+            type="button"
+            className="ras-pop-item"
+            onClick={() => setView(f.name)}
+          >
+            {facetIcon(f.kind)}
+            {f.label}
+            <IconChevronRight size={14} className="ras-pop-item-chev" />
+          </button>
+        ))
+      )}
+    </div>
+  );
+}
+
+export function FilterBar(props: {
+  facets: FilterFieldModel[];
+  filters: Record<string, string>;
+  setFilter: (field: string, value: string) => void;
+  removeFilter: (field: string) => void;
+  clearFilters: () => void;
+  search: string | undefined;
+  setSearch: (value: string | undefined) => void;
+  searchable: boolean;
+}): React.JSX.Element {
+  const active = Object.keys(props.filters);
+  const facetOf = (name: string) => props.facets.find((f) => f.name === name);
+
+  return (
+    <div className="ras-filterbar">
+      {active.map((field) => {
+        const facet = facetOf(field);
+        const value = props.filters[field];
+        return (
+          <span className="ras-chip" key={field}>
+            <span className="ras-chip-key">
+              {facet ? facetIcon(facet.kind) : null}
+              {facet?.label ?? field}
+            </span>
+            <span className="ras-chip-op">is</span>
+            {facet && facet.options.length ? (
+              <Popover
+                trigger={({ toggle }) => (
+                  <span className="ras-chip-val" onClick={toggle} role="button" tabIndex={0}>
+                    {labelFor(facet, value)}
+                  </span>
+                )}
+              >
+                {({ close }) => (
+                  <OptionList
+                    options={facet.options}
+                    selected={value}
+                    onPick={(v) => {
+                      props.setFilter(field, v);
+                      close();
+                    }}
+                  />
+                )}
+              </Popover>
+            ) : (
+              <span className="ras-chip-val" style={{ cursor: "default" }}>
+                {labelFor(facet, value)}
+              </span>
+            )}
+            <span
+              className="ras-chip-x"
+              role="button"
+              tabIndex={0}
+              aria-label={`Remove ${facet?.label ?? field} filter`}
+              onClick={() => props.removeFilter(field)}
+            >
+              <IconClose size={13} />
+            </span>
+          </span>
+        );
+      })}
+
+      {props.facets.length ? (
+        <Popover
+          trigger={({ toggle }) => (
+            <button type="button" className="ras-addfilter" onClick={toggle}>
+              <IconPlus size={14} />
+              Filter
+            </button>
+          )}
+        >
+          {({ close }) => (
+            <AddFilterMenu
+              facets={props.facets}
+              activeFields={active}
+              onPick={props.setFilter}
+              close={close}
+            />
+          )}
+        </Popover>
+      ) : null}
+
+      {active.length > 1 ? (
+        <button type="button" className="ras-clearfilter" onClick={props.clearFilters}>
+          Clear all
+        </button>
+      ) : null}
+
+      <span className="ras-grow" />
+
+      {props.searchable ? (
+        <span className="ras-search">
+          <IconSearch size={15} className="ras-search-ico" />
+          <input
+            type="search"
+            placeholder="Search…"
+            value={props.search ?? ""}
+            onChange={(e) => props.setSearch(e.target.value || undefined)}
+          />
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/admin/ui/Popover.tsx

@@ -0,0 +1,54 @@
+/**
+ * A tiny controlled popover: a trigger + a floating panel that closes on
+ * outside-click or Escape. Used by the Linear-style filter bar (the "add
+ * filter" menu and each chip's value switcher). Deliberately dependency-free —
+ * no portal, no positioning lib — the panel is absolutely positioned under its
+ * trigger and styled by `ui/styles.ts`.
+ */
+import React, { useEffect, useRef, useState } from "react";
+
+export interface PopoverRenderProps {
+  open: boolean;
+  toggle: () => void;
+  close: () => void;
+}
+
+export function Popover(props: {
+  align?: "left" | "right";
+  trigger: (p: PopoverRenderProps) => React.ReactNode;
+  children: (p: { close: () => void }) => React.ReactNode;
+}): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const close = () => setOpen(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="ras-pop-wrap" ref={ref}>
+      {props.trigger({ open, toggle: () => setOpen((o) => !o), close })}
+      {open ? (
+        <div
+          className={"ras-pop" + (props.align === "right" ? " align-right" : "")}
+          role="menu"
+        >
+          {props.children({ close })}
+        </div>
+      ) : null}
+    </div>
+  );
+}