import React, { useState, useMemo, useEffect, useRef } from "react"; import { useFireproof } from "use-vibes"; /* ---------- palette (bespoke dark instrument-panel look) ---------- */ const P = { bg: "#0b0e14", panel: "#131721", panel2: "#0f131c", border: "#2a3040", ink: "#e6e9f0", muted: "#8b93a7", accent: "#fbbf24", accentDim: "#3a3320", zebra: "#10141d", chip: "#1b2130", }; /* ---------- sample dataset (embedded CSV, parsed on mount to exercise the parser) ---------- */ const SAMPLE_CSV = `name,year,paradigm,creator,typing Fortran,1957,Imperative,John Backus,Static Lisp,1958,Functional,John McCarthy,Dynamic COBOL,1959,Imperative,Grace Hopper,Static ALGOL,1960,Imperative,Committee,Static BASIC,1964,Imperative,Kemeny & Kurtz,Dynamic Logo,1967,Functional,Seymour Papert,Dynamic Pascal,1970,Imperative,Niklaus Wirth,Static Forth,1970,Stack,Chuck Moore,Dynamic C,1972,Imperative,Dennis Ritchie,Static Smalltalk,1972,Object-oriented,Alan Kay,Dynamic Prolog,1972,Logic,Alain Colmerauer,Dynamic ML,1973,Functional,Robin Milner,Static SQL,1974,Declarative,"Chamberlin, Boyce",Static Scheme,1975,Functional,Sussman & Steele,Dynamic Ada,1980,Imperative,Jean Ichbiah,Static Objective-C,1984,Object-oriented,Brad Cox,Dynamic C++,1985,Object-oriented,Bjarne Stroustrup,Static Eiffel,1986,Object-oriented,Bertrand Meyer,Static Erlang,1986,Functional,Joe Armstrong,Dynamic Perl,1987,Scripting,Larry Wall,Dynamic Tcl,1988,Scripting,John Ousterhout,Dynamic Bash,1989,Scripting,Brian Fox,Dynamic Haskell,1990,Functional,Committee,Static Python,1991,Multi-paradigm,Guido van Rossum,Dynamic Visual Basic,1991,Imperative,Microsoft,Dynamic Lua,1993,Scripting,Roberto Ierusalimschy,Dynamic R,1993,Functional,Ihaka & Gentleman,Dynamic Ruby,1995,Object-oriented,Yukihiro Matsumoto,Dynamic Java,1995,Object-oriented,James Gosling,Static JavaScript,1995,Multi-paradigm,Brendan Eich,Dynamic PHP,1995,Scripting,Rasmus Lerdorf,Dynamic Delphi,1995,Object-oriented,Anders Hejlsberg,Static Racket,1995,Functional,PLT Group,Dynamic OCaml,1996,Functional,INRIA,Static ActionScript,1998,Scripting,Gary Grossman,Dynamic C#,2000,Object-oriented,Anders Hejlsberg,Static D,2001,Multi-paradigm,Walter Bright,Static Groovy,2003,Object-oriented,James Strachan,Dynamic Scala,2004,Multi-paradigm,Martin Odersky,Static F#,2005,Functional,Don Syme,Static PowerShell,2006,Scripting,Jeffrey Snover,Dynamic Clojure,2007,Functional,Rich Hickey,Dynamic Nim,2008,Multi-paradigm,Andreas Rumpf,Static Go,2009,Imperative,Robert Griesemer,Static CoffeeScript,2009,Scripting,Jeremy Ashkenas,Dynamic Rust,2010,Multi-paradigm,Graydon Hoare,Static Kotlin,2011,Multi-paradigm,JetBrains,Static Elixir,2011,Functional,Jose Valim,Dynamic Dart,2011,Object-oriented,Google,Static Julia,2012,Multi-paradigm,Jeff Bezanson,Dynamic TypeScript,2012,Multi-paradigm,Microsoft,Static Elm,2012,Functional,Evan Czaplicki,Static PureScript,2013,Functional,Phil Freeman,Static Swift,2014,Multi-paradigm,Chris Lattner,Static Crystal,2014,Object-oriented,Ary Borenszweig,Static Hack,2014,Object-oriented,Facebook,Static Solidity,2014,Object-oriented,Gavin Wood,Static Reason,2016,Functional,Jordan Walke,Static Zig,2016,Imperative,Andrew Kelley,Static V,2019,Imperative,Alexander Medvednikov,Static`; const MAX_SAVE_ROWS = 5000; /* ---------- hand-rolled CSV parser: quoted fields, commas, escaped quotes, CRLF ---------- */ function parseCSV(text) { const rows = []; let row = []; let field = ""; let inQuotes = false; let i = 0; const n = text.length; while (i < n) { const ch = text[i]; if (inQuotes) { if (ch === '"') { if (text[i + 1] === '"') { field += '"'; i += 2; continue; } inQuotes = false; i++; continue; } field += ch; i++; continue; } if (ch === '"') { inQuotes = true; i++; continue; } if (ch === ",") { row.push(field); field = ""; i++; continue; } if (ch === "\r") { i++; continue; } if (ch === "\n") { row.push(field); rows.push(row); row = []; field = ""; i++; continue; } field += ch; i++; } // flush trailing field/row if (field.length > 0 || row.length > 0) { row.push(field); rows.push(row); } if (rows.length === 0) return { columns: [], data: [] }; const header = rows[0].map((h, idx) => (h.trim() === "" ? `col${idx + 1}` : h.trim())); const data = []; for (let r = 1; r < rows.length; r++) { const rr = rows[r]; if (rr.length === 1 && rr[0].trim() === "") continue; // skip blank line const obj = {}; for (let c = 0; c < header.length; c++) obj[header[c]] = rr[c] !== undefined ? rr[c] : ""; data.push(obj); } return { columns: header, data }; } /* ---------- flatten one level of nesting with dot keys ---------- */ function flattenRow(obj, out = {}, prefix = "") { for (const k of Object.keys(obj)) { const v = obj[k]; const key = prefix ? `${prefix}.${k}` : k; if (v && typeof v === "object" && !Array.isArray(v)) { // flatten exactly one level for (const k2 of Object.keys(v)) { const v2 = v[k2]; out[`${key}.${k2}`] = v2 && typeof v2 === "object" ? JSON.stringify(v2) : v2; } } else if (Array.isArray(v)) { out[key] = JSON.stringify(v); } else { out[key] = v; } } return out; } function parseJSON(text) { const parsed = JSON.parse(text); const arr = Array.isArray(parsed) ? parsed : parsed && Array.isArray(parsed.data) ? parsed.data : [parsed]; const data = arr.map((r) => (r && typeof r === "object" ? flattenRow(r) : { value: r })); const cols = []; const seen = new Set(); for (const row of data) for (const k of Object.keys(row)) if (!seen.has(k)) { seen.add(k); cols.push(k); } return { columns: cols, data }; } /* ---------- type inference (majority vote) ---------- */ const DATE_RE = /^\d{4}-\d{2}-\d{2}([ T]\d{2}:\d{2}(:\d{2})?)?|^\d{1,2}\/\d{1,2}\/\d{2,4}$/; function inferType(value) { if (value === null || value === undefined || value === "") return null; if (typeof value === "boolean") return "boolean"; if (typeof value === "number") return "number"; const s = String(value).trim(); if (s === "") return null; if (/^(true|false)$/i.test(s)) return "boolean"; if (/^-?\d+(\.\d+)?$/.test(s) && s.length < 16) return "number"; if (DATE_RE.test(s) && !isNaN(Date.parse(s))) return "date"; return "string"; } function inferColumnTypes(columns, data) { const types = {}; for (const col of columns) { const tally = { number: 0, string: 0, boolean: 0, date: 0 }; let count = 0; for (const row of data) { const t = inferType(row[col]); if (t) { tally[t]++; count++; } } if (count === 0) { types[col] = "string"; continue; } let best = "string"; let max = -1; for (const t of Object.keys(tally)) if (tally[t] > max) { max = tally[t]; best = t; } types[col] = best; } return types; } function coerceNum(v) { const n = Number(v); return isNaN(n) ? null : n; } /* ---------- CSV serializer for export ---------- */ function toCSV(columns, rows) { const esc = (v) => { const s = v === null || v === undefined ? "" : String(v); return /[",\r\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; }; const lines = [columns.map(esc).join(",")]; for (const r of rows) lines.push(columns.map((c) => esc(r[c])).join(",")); return lines.join("\r\n"); } function download(filename, text, mime) { const blob = new Blob([text], { type: mime }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1000); } /* ---------- inline icons ---------- */ const Icon = { x: (p) => ( ), up: (p) => ( ), down: (p) => ( ), search: (p) => ( ), }; /* ---------- style tag: fonts + scrollbar + hover ---------- */ function StyleTag() { return ( ); } /* ---------- Facet sidebar ---------- */ function FacetSidebar({ columns, types, facetData, filters, toggleFilter }) { return (

Facets

{columns.map((col) => { const info = facetData[col]; if (!info) return null; if (info.kind === "numeric") { return (

{col}

min {info.min} max {info.max}

); } // categorical const active = filters[col]; return (

{col} · {info.distinct}

{info.values.map(([val, count]) => { const on = active && active.has(val); return ( ); })} {info.truncated &&

+ more…

}

); })} {columns.every((c) => !facetData[c]) &&

No low-cardinality columns to facet.

}

); } /* ---------- Data table ---------- */ function DataTable({ columns, types, rows, sort, onSort, onRowClick }) { return (

{columns.map((col) => { const isSorted = sort.col === col; return ( ); })} {rows.map((r, ri) => ( onRowClick(r)} style={{ background: ri % 2 ? P.zebra : "transparent", cursor: "pointer" }} > {columns.map((col) => { const num = types[col] === "number"; const v = r[col]; const s = v === null || v === undefined ? "" : String(v); return ( ); })} ))} {rows.length === 0 && ( )}

onSort(col)} style={{ position: "sticky", top: 0, background: P.panel2, color: isSorted ? P.accent : P.muted, textAlign: types[col] === "number" ? "right" : "left", padding: "8px 12px", borderBottom: `2px solid ${P.border}`, fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", userSelect: "none", zIndex: 1, }} > {col} {isSorted && (sort.dir === "asc" ? : )}
{s}
No rows match the current filters.

onSort(col)} style={{ position: "sticky", top: 0, background: P.panel2, color: isSorted ? P.accent : P.muted, textAlign: types[col] === "number" ? "right" : "left", padding: "8px 12px", borderBottom: `2px solid ${P.border}`, fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", userSelect: "none", zIndex: 1, }} > {col} {isSorted && (sort.dir === "asc" ? : )}

{s}

No rows match the current filters.

); } /* ---------- Row detail drawer ---------- */ function RowDrawer({ row, columns, onClose }) { if (!row) return null; return (

Row detail

{columns.map((col) => (

{col}

{row[col] === null || row[col] === undefined || row[col] === "" ? "—" : String(row[col])}

))}

); } /* ---------- shared style objects ---------- */ const mono = "'IBM Plex Mono', ui-monospace, monospace"; const panelBox = { background: P.panel, border: `1px solid ${P.border}`, borderRadius: 12, padding: "10px 12px" }; const facetTitle = { fontSize: 11, color: P.ink, fontWeight: 600, marginBottom: 6, letterSpacing: "0.03em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }; const btnStyle = { background: P.panel, border: `1px solid ${P.border}`, color: P.ink, borderRadius: 8, padding: "7px 12px", fontFamily: mono, fontSize: 12, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, }; export default function App() { const { database, useLiveQuery } = useFireproof("data-facets"); const { docs: saved } = useLiveQuery("type", { key: "dataset", descending: true }); const [dataset, setDataset] = useState({ name: "", columns: [], data: [] }); const [filters, setFilters] = useState({}); // { col: Set(values) } const [sort, setSort] = useState({ col: null, dir: "asc" }); const [search, setSearch] = useState(""); const [drawerRow, setDrawerRow] = useState(null); const [dragging, setDragging] = useState(false); const [paste, setPaste] = useState(""); const [notice, setNotice] = useState(""); const fileRef = useRef(null); // load sample on mount so the idle screenshot shows the full experience useEffect(() => { const { columns, data } = parseCSV(SAMPLE_CSV); setDataset({ name: "Programming Languages (sample)", columns, data }); }, []); const types = useMemo(() => inferColumnTypes(dataset.columns, dataset.data), [dataset]); // index rows once const indexed = useMemo(() => dataset.data.map((r, i) => ({ ...r, __i: i })), [dataset]); // filtered rows (facets AND across columns, OR within; plus text search) const filtered = useMemo(() => { const q = search.trim().toLowerCase(); const activeCols = Object.keys(filters).filter((c) => filters[c] && filters[c].size); return indexed.filter((row) => { for (const col of activeCols) { const set = filters[col]; if (!set.has(row[col] === null || row[col] === undefined ? "" : String(row[col]))) return false; } if (q) { let hit = false; for (const col of dataset.columns) { const v = row[col]; if (v !== null && v !== undefined && String(v).toLowerCase().includes(q)) { hit = true; break; } } if (!hit) return false; } return true; }); }, [indexed, filters, search, dataset.columns]); // sorted view const sorted = useMemo(() => { if (!sort.col) return filtered; const col = sort.col; const isNum = types[col] === "number"; const dir = sort.dir === "asc" ? 1 : -1; const arr = filtered.slice(); arr.sort((a, b) => { let av = a[col], bv = b[col]; if (isNum) { av = coerceNum(av); bv = coerceNum(bv); if (av === null) return 1; if (bv === null) return -1; return (av - bv) * dir; } av = av === null || av === undefined ? "" : String(av).toLowerCase(); bv = bv === null || bv === undefined ? "" : String(bv).toLowerCase(); if (av < bv) return -1 * dir; if (av > bv) return 1 * dir; return 0; }); return arr; }, [filtered, sort, types]); // facet data computed over the CURRENT filtered set (Datasette-style, minus each col's own filter would be ideal; // we compute over rows filtered by OTHER facets for accurate counts) const facetData = useMemo(() => { const out = {}; const q = search.trim().toLowerCase(); for (const col of dataset.columns) { // rows filtered by every OTHER active facet + search const otherCols = Object.keys(filters).filter((c) => c !== col && filters[c] && filters[c].size); const scoped = indexed.filter((row) => { for (const oc of otherCols) if (!filters[oc].has(String(row[oc] ?? ""))) return false; if (q) { let hit = false; for (const cc of dataset.columns) if (row[cc] != null && String(row[cc]).toLowerCase().includes(q)) { hit = true; break; } if (!hit) return false; } return true; }); if (types[col] === "number") { let mn = Infinity, mx = -Infinity, any = false; for (const row of scoped) { const n = coerceNum(row[col]); if (n !== null) { any = true; if (n < mn) mn = n; if (n > mx) mx = n; } } if (any) out[col] = { kind: "numeric", min: mn, max: mx }; continue; } const counts = new Map(); for (const row of scoped) { const v = row[col] === null || row[col] === undefined ? "" : String(row[col]); counts.set(v, (counts.get(v) || 0) + 1); } const distinct = counts.size; if (distinct === 0 || distinct > 40) continue; // skip high-cardinality const values = [...counts.entries()].sort((a, b) => b[1] - a[1]); out[col] = { kind: "cat", distinct, values: values.slice(0, 30), truncated: values.length > 30 }; } return out; }, [indexed, filters, search, types, dataset.columns]); /* ---------- handlers ---------- */ function toggleFilter(col, val) { setFilters((prev) => { const next = { ...prev }; const set = new Set(next[col] || []); if (set.has(val)) set.delete(val); else set.add(val); if (set.size === 0) delete next[col]; else next[col] = set; return next; }); } function clearFilter(col, val) { setFilters((prev) => { const next = { ...prev }; if (!next[col]) return prev; const set = new Set(next[col]); set.delete(val); if (set.size === 0) delete next[col]; else next[col] = set; return next; }); } function onSort(col) { setSort((prev) => { if (prev.col !== col) return { col, dir: "asc" }; if (prev.dir === "asc") return { col, dir: "desc" }; return { col: null, dir: "asc" }; // third click clears }); } function loadFromText(name, text) { try { const trimmed = text.trim(); let parsed; if (trimmed.startsWith("[") || trimmed.startsWith("{")) parsed = parseJSON(trimmed); else parsed = parseCSV(trimmed); if (!parsed.columns.length) { setNotice("Could not detect any columns."); return; } setDataset({ name, columns: parsed.columns, data: parsed.data }); setFilters({}); setSort({ col: null, dir: "asc" }); setSearch(""); setNotice(`Loaded ${parsed.data.length} rows · ${parsed.columns.length} cols`); } catch (e) { setNotice("Parse error: " + e.message); } } function onFile(file) { if (!file) return; const reader = new FileReader(); reader.onload = () => loadFromText(file.name.replace(/\.[^.]+$/, ""), String(reader.result)); reader.readAsText(file); } function onDrop(e) { e.preventDefault(); setDragging(false); const f = e.dataTransfer.files[0]; if (f) onFile(f); } function loadSample() { const { columns, data } = parseCSV(SAMPLE_CSV); setDataset({ name: "Programming Languages (sample)", columns, data }); setFilters({}); setSort({ col: null, dir: "asc" }); setSearch(""); setNotice(""); } async function saveDataset() { if (!dataset.data.length) return; let rows = dataset.data; let capped = false; if (rows.length > MAX_SAVE_ROWS) { rows = rows.slice(0, MAX_SAVE_ROWS); capped = true; } await database.put({ type: "dataset", name: dataset.name || "Untitled", columns: dataset.columns, rows, rowCount: rows.length, savedAt: Date.now(), }); setNotice(capped ? `Saved (capped at ${MAX_SAVE_ROWS} rows)` : `Saved "${dataset.name}"`); } function loadSaved(doc) { setDataset({ name: doc.name, columns: doc.columns, data: doc.rows }); setFilters({}); setSort({ col: null, dir: "asc" }); setSearch(""); setNotice(`Loaded saved "${doc.name}"`); } function exportCSV() { download((dataset.name || "export") + ".csv", toCSV(dataset.columns, sorted.map((r) => r)), "text/csv"); } function exportJSON() { const clean = sorted.map((r) => { const o = {}; for (const c of dataset.columns) o[c] = r[c]; return o; }); download((dataset.name || "export") + ".json", JSON.stringify(clean, null, 2), "application/json"); } const activeChips = []; for (const col of Object.keys(filters)) for (const val of filters[col]) activeChips.push({ col, val }); return (

{/* header */}

WEB-UTILS

Data Facets

Datasette-style facet browsing for any CSV or JSON

{/* input controls */}

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={onDrop} onClick={() => fileRef.current && fileRef.current.click()} style={{ ...panelBox, flex: "1 1 220px", minWidth: 200, display: "flex", flexDirection: "column", justifyContent: "center", cursor: "pointer", borderStyle: "dashed", textAlign: "center" }} >

Drop a .csv / .json file

or click to browse

onFile(e.target.files[0])} style={{ display: "none" }} />

setPaste(e.target.value)}
            placeholder="…or paste CSV / JSON here"
            spellCheck={false}
            style={{ flex: 1, minHeight: 54, resize: "vertical", background: P.panel2, border: `1px solid ${P.border}`, borderRadius: 8, color: P.ink, fontFamily: mono, fontSize: 12, padding: 8 }}
          />
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <button className="df-btn" style={btnStyle} onClick={() => paste.trim() && loadFromText("Pasted data", paste)}>
              Parse pasted
            </button>
            <button className="df-btn" style={{ ...btnStyle, borderColor: P.accent, color: P.accent }} onClick={loadSample}>
              Sample dataset
            </button>
          </div>
        </div>
      </div>

{/* action bar */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center", marginBottom: 14 }}>
        <div style={{ position: "relative", flex: "1 1 220px", minWidth: 180 }}>
          <span style={{ position: "absolute", left: 10, top: 9, color: P.muted }}>
            <Icon.search />
          </span>
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search all columns…"
            style={{ width: "100%", background: P.panel, border: `1px solid ${P.border}`, borderRadius: 8, color: P.ink, fontFamily: mono, fontSize: 12.5, padding: "8px 8px 8px 32px" }}
          />
        </div>
        <button className="df-btn" style={btnStyle} onClick={saveDataset}>
          Save dataset
        </button>
        <button className="df-btn" style={btnStyle} onClick={exportCSV}>
          Export CSV
        </button>
        <button className="df-btn" style={btnStyle} onClick={exportJSON}>
          Export JSON
        </button>
      </div>

{/* saved datasets */}
      {saved.length > 0 && (
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", marginBottom: 14 }}>
          <span style={{ fontSize: 10, letterSpacing: "0.12em", color: P.muted, textTransform: "uppercase" }}>Saved</span>
          {saved.map((d) => (
            <button key={d._id} className="df-chip" onClick={() => loadSaved(d)} style={{ ...btnStyle, background: P.chip, padding: "5px 10px" }}>
              {d.name} <span style={{ color: P.muted }}>· {d.rowCount}</span>
            </button>
          ))}
        </div>
      )}

{/* active filter chips */}
      {activeChips.length > 0 && (
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
          {activeChips.map(({ col, val }) => (
            <button
              key={col + "::" + val}
              className="df-chip"
              onClick={() => clearFilter(col, val)}
              style={{ ...btnStyle, background: P.accentDim, borderColor: P.accent, color: P.accent, padding: "4px 8px" }}
            >
              <span style={{ color: P.muted, marginRight: 2 }}>{col}:</span>
              {val === "" ? "∅" : val}
              <Icon.x />
            </button>
          ))}
          <button className="df-btn" style={{ ...btnStyle, padding: "4px 10px" }} onClick={() => setFilters({})}>
            Clear all
          </button>
        </div>
      )}

{/* main grid */}
      <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
        <FacetSidebar columns={dataset.columns} types={types} facetData={facetData} filters={filters} toggleFilter={toggleFilter} />
        <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }}>
          <DataTable columns={dataset.columns} types={types} rows={sorted} sort={sort} onSort={onSort} onRowClick={setDrawerRow} />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: mono, fontSize: 12, color: P.muted }}>
            <span>
              <span style={{ color: P.accent }}>{sorted.length}</span> of {dataset.data.length} rows
              {dataset.name ? <span> · {dataset.name}</span> : null}
            </span>
            {notice && <span style={{ color: P.muted }}>{notice}</span>}
          </div>
        </div>
      </div>

<RowDrawer row={drawerRow} columns={dataset.columns} onClose={() => setDrawerRow(null)} />
    </div>
  );
}
</article></body></html>