import { useState, useMemo } from "react";
import * as d3 from "d3";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'share', path: 'md:_share/my_db/272d16fb-2b68-42d6-88f3-faad5869cb54', alias: 'my_db' }
];
const N = (v) => (v != null ? Number(v) : 0);
const W = 760, H = 560, PAD = 36;

export default function FlavorPairingEngine() {
  const { data, isLoading, isError, error } = useSQLQuery(`
    SELECT ingredient, x, y, category, compound_count
    FROM "my_db"."main"."divemaxxing_flavor_universe"
  `);

  const points = useMemo(() => {
    const rows = Array.isArray(data) ? data : [];
    return rows.map((r) => ({ ingredient: r.ingredient, x: N(r.x), y: N(r.y), category: r.category, compound_count: N(r.compound_count) }));
  }, [data]);

  const categories = useMemo(() => {
    const counts = {};
    points.forEach((p) => { counts[p.category] = (counts[p.category] || 0) + 1; });
    return Object.entries(counts).sort((a, b) => b[1] - a[1]);
  }, [points]);

  const colorMap = useMemo(() => {
    const m = {}; const n = categories.length || 1;
    categories.forEach(([c], i) => { m[c] = d3.interpolateSinebow(i / n); });
    return m;
  }, [categories]);

  const project = useMemo(() => {
    if (!points.length) return null;
    const xs = points.map((p) => p.x), ys = points.map((p) => p.y);
    return {
      sx: d3.scaleLinear().domain([Math.min(...xs), Math.max(...xs)]).range([PAD, W - PAD]),
      sy: d3.scaleLinear().domain([Math.min(...ys), Math.max(...ys)]).range([H - PAD, PAD]),
    };
  }, [points]);

  const screen = useMemo(() => project ? points.map((p) => ({ ...p, X: project.sx(p.x), Y: project.sy(p.y) })) : [], [points, project]);

  const sizeScale = useMemo(() => {
    const v = points.map((p) => p.compound_count);
    return d3.scaleSqrt().domain([Math.min(...v) || 0, Math.max(...v) || 1]).range([2.2, 7]);
  }, [points]);

  const rankMap = useMemo(() => {
    const sorted = [...points].sort((a, b) => b.compound_count - a.compound_count);
    const m = {}; sorted.forEach((p, i) => { m[p.ingredient] = i + 1; }); return m;
  }, [points]);

  const centroids = useMemo(() => {
    const g = {}; points.forEach((p) => { (g[p.category] = g[p.category] || []).push(p); });
    const m = {};
    Object.entries(g).forEach(([c, arr]) => {
      m[c] = { x: arr.reduce((s, p) => s + p.x, 0) / arr.length, y: arr.reduce((s, p) => s + p.y, 0) / arr.length, n: arr.length };
    });
    return m;
  }, [points]);

  // Bridge list: ingredients closer to a foreign family than their own kin,
  // with the specific foreign neighbor + family they bridge toward.
  const bridgeList = useMemo(() => {
    if (screen.length < 3) return [];
    const out = [];
    for (const p of screen) {
      let dS = Infinity, dD = Infinity, cross = null, crossFam = null;
      for (const o of screen) {
        if (o === p) continue;
        const d = Math.hypot(p.x - o.x, p.y - o.y);
        if (o.category === p.category) { if (d < dS) dS = d; }
        else if (d < dD) { dD = d; cross = o.ingredient; crossFam = o.category; }
      }
      if (isFinite(dS) && isFinite(dD) && cross) out.push({ ing: p.ingredient, fam: p.category, cross, crossFam, ratio: dS / dD });
    }
    return out.sort((a, b) => b.ratio - a.ratio);
  }, [screen]);

  const richest = useMemo(() => points.length ? points.reduce((a, b) => b.compound_count > a.compound_count ? b : a) : null, [points]);

  const [selected, setSelected] = useDiveState("ingredient", "");
  const [search, setSearch] = useState("");
  const [pair, setPair] = useState(null);

  const defaultSel = richest ? richest.ingredient : "";
  const activeName = selected || defaultSel;

  const dossier = useMemo(() => {
    if (!screen.length || !activeName) return null;
    const self = screen.find((p) => p.ingredient === activeName);
    if (!self) return null;
    const scored = screen.filter((p) => p.ingredient !== activeName).map((p) => ({
      ingredient: p.ingredient, category: p.category, compound_count: p.compound_count,
      X: p.X, Y: p.Y, d: Math.hypot(p.x - self.x, p.y - self.y),
    })).sort((a, b) => a.d - b.d);
    const similar = scored.slice(0, 5);
    const cross = scored.filter((s) => s.category !== self.category).slice(0, 4);
    const fam = screen.filter((p) => p.category === self.category);
    const cen = centroids[self.category];
    const dCen = Math.hypot(self.x - cen.x, self.y - cen.y);
    const famDists = fam.map((p) => Math.hypot(p.x - cen.x, p.y - cen.y)).sort((a, b) => a - b);
    const pct = famDists.length > 1 ? famDists.filter((x) => x < dCen).length / (famDists.length - 1) : 0;
    const role = fam.length < 3 ? "a rare type" : (pct < 0.34 ? "a core member" : pct > 0.66 ? "an outlier" : "a typical member");
    return { self, similar, cross, role };
  }, [screen, activeName, centroids]);

  const pickPoint = (name) => { setSelected(name); setSearch(""); setPair(null); };
  const surprise = () => {
    const pool = bridgeList.slice(0, 25);
    if (!pool.length) return;
    const b = pool[Math.floor(Math.random() * pool.length)];
    setSelected(b.ing); setSearch(""); setPair({ a: b.ing, b: b.cross, famA: b.fam, famB: b.crossFam });
  };

  const q = search.trim().toLowerCase();
  const searchHits = q ? screen.filter((p) => p.ingredient.toLowerCase().includes(q)).slice(0, 6) : [];
  const fmtPct = (rank, total) => { const p = Math.round((rank / total) * 100); return p <= 1 ? "top 1%" : `top ${p}%`; };
  const topCross = dossier && dossier.cross.length ? dossier.cross[0] : null;
  const showPair = pair && activeName === pair.a;

  const StatBox = ({ big, label }) => (
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 19, fontWeight: 700, color: "#ffffff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{big}</div>
      <div style={{ fontSize: 10.5, color: "#6e7681", letterSpacing: 0.4, textTransform: "uppercase" }}>{label}</div>
    </div>
  );

  return (
    <div style={{ background: "#0b0e14", color: "#e6edf3", padding: "18px 20px", fontFamily: "Georgia, 'Times New Roman', serif" }}>
      <h1 style={{ fontSize: 25, fontWeight: 700, margin: "0 0 2px" }}>The Flavor Pairing Engine</h1>
      <p style={{ margin: "0 0 12px", color: "#8b949e", fontSize: 13.5, fontFamily: "system-ui,sans-serif" }}>
        450 ingredients positioned by molecular similarity — click any point to interrogate its chemistry and find its pairings.
      </p>

      {/* stat strip */}
      {!isLoading && !isError ? (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, padding: "10px 0 14px", borderTop: "1px solid #1b2230", borderBottom: "1px solid #1b2230", marginBottom: 14, fontFamily: "system-ui,sans-serif" }}>
          <StatBox big={points.length} label="ingredients" />
          <StatBox big={categories.length} label="flavor families" />
          <StatBox big={richest ? richest.ingredient : "—"} label={richest ? `richest · ${richest.compound_count} compounds` : "richest"} />
          <StatBox big={bridgeList.length ? bridgeList[0].ing : "—"} label={bridgeList.length ? `top bridge → ${bridgeList[0].crossFam}` : "top bridge"} />
        </div>
      ) : null}

      <div style={{ display: "flex", gap: 9, alignItems: "center", marginBottom: 10, flexWrap: "wrap", fontFamily: "system-ui,sans-serif" }}>
        <div style={{ position: "relative" }}>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search an ingredient…"
            style={{ background: "#11161f", border: "1px solid #2a3140", borderRadius: 6, padding: "7px 11px", color: "#e6edf3", fontSize: 13, width: 210, outline: "none" }} />
          {searchHits.length ? (
            <div style={{ position: "absolute", top: "110%", left: 0, zIndex: 5, background: "#11161f", border: "1px solid #2a3140", borderRadius: 6, width: 230, maxHeight: 180, overflowY: "auto" }}>
              {searchHits.map((h) => (
                <div key={h.ingredient} onClick={() => pickPoint(h.ingredient)}
                  style={{ padding: "6px 10px", cursor: "pointer", fontSize: 12.5, display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[h.category] }} />{h.ingredient}
                </div>
              ))}
            </div>
          ) : null}
        </div>
        <button onClick={surprise} style={{ background: "#1f6feb", border: "none", color: "#fff", borderRadius: 6, padding: "7px 13px", fontSize: 13, cursor: "pointer", fontWeight: 600 }}>✦ Surprise me</button>
      </div>

      {/* surprise pair readout */}
      {showPair ? (
        <div style={{ background: "#1a1605", border: "1px solid #4a4326", borderRadius: 8, padding: "9px 13px", marginBottom: 12, fontFamily: "system-ui,sans-serif", fontSize: 13.5, color: "#f6e7b8" }}>
          ✦ Try <b style={{ color: "#fff" }}>{pair.a}</b> × <b style={{ color: "#fff" }}>{pair.b}</b> — unusual molecular kinship across <span style={{ color: "#caa23a" }}>{pair.famA}</span> / <span style={{ color: "#caa23a" }}>{pair.famB}</span>.
        </div>
      ) : null}

      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "1 1 440px", minWidth: 320, borderRadius: 10, overflow: "hidden", border: "1px solid #1b2230" }}>
          {isError ? <div style={{ color: "#ff7b72", padding: 20 }}>Failed to load: {String(error)}</div>
            : isLoading ? <div className="animate-pulse" style={{ height: H, background: "#0e131c" }} />
              : (
                <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block", background: "#080b11" }}>
                  {topCross && dossier ? (
                    <line x1={dossier.self.X} y1={dossier.self.Y} x2={topCross.X} y2={topCross.Y} stroke="#ffe08a" strokeWidth={1} opacity={0.7} strokeDasharray="3 4" />
                  ) : null}
                  {screen.map((p) => {
                    const r = sizeScale(p.compound_count);
                    const isSel = p.ingredient === activeName;
                    const isSim = dossier && dossier.similar.some((s) => s.ingredient === p.ingredient);
                    const isCross = dossier && dossier.cross.some((s) => s.ingredient === p.ingredient);
                    const op = isSel || isSim || isCross ? 1 : (dossier ? 0.3 : 0.9);
                    return (
                      <circle key={p.ingredient} cx={p.X} cy={p.Y} r={isSel ? r + 2 : r}
                        fill={colorMap[p.category]} fillOpacity={op}
                        stroke={isSel ? "#ffffff" : isCross ? "#ffe08a" : isSim ? "#cdd6e6" : "none"}
                        strokeWidth={isSel ? 1.6 : (isCross || isSim) ? 1.1 : 0}
                        style={{ cursor: "pointer" }} onClick={() => pickPoint(p.ingredient)} />
                    );
                  })}
                </svg>
              )}
        </div>

        <div style={{ flex: "1 1 280px", minWidth: 260, fontFamily: "system-ui,sans-serif" }}>
          {dossier ? (
            <div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "#ffffff", fontFamily: "Georgia, serif" }}>{dossier.self.ingredient}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 7, margin: "4px 0 12px", fontSize: 13, color: "#8b949e", flexWrap: "wrap" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: colorMap[dossier.self.category] }} />{dossier.self.category}</span>
                <span>·</span>
                <span>{dossier.role} of its family</span>
              </div>
              <div style={{ display: "flex", gap: 20, marginBottom: 14 }}>
                <div><div style={{ fontSize: 26, fontWeight: 700, color: "#ffffff" }}>{dossier.self.compound_count}</div><div style={{ fontSize: 11, color: "#6e7681" }}>aroma compounds</div></div>
                <div><div style={{ fontSize: 26, fontWeight: 700, color: "#ffffff" }}>#{rankMap[dossier.self.ingredient]}</div><div style={{ fontSize: 11, color: "#6e7681" }}>{fmtPct(rankMap[dossier.self.ingredient], points.length)} of {points.length}</div></div>
              </div>

              <div style={{ fontSize: 11, letterSpacing: 1, color: "#6e7681", textTransform: "uppercase", marginBottom: 4 }}>Most molecularly similar</div>
              {dossier.similar.map((s) => (
                <div key={s.ingredient} onClick={() => pickPoint(s.ingredient)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", cursor: "pointer", fontSize: 13, borderBottom: "1px solid #161c26" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[s.category] }} />{s.ingredient}</span>
                  <span style={{ color: "#6e7681", fontSize: 11 }}>{s.category}</span>
                </div>
              ))}

              <div style={{ fontSize: 11, letterSpacing: 1, color: "#caa23a", textTransform: "uppercase", margin: "13px 0 4px" }}>Cross-family surprises</div>
              {dossier.cross.length ? dossier.cross.map((s) => (
                <div key={s.ingredient} onClick={() => pickPoint(s.ingredient)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", cursor: "pointer", fontSize: 13, borderBottom: "1px solid #161c26" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[s.category] }} />{s.ingredient}</span>
                  <span style={{ color: "#caa23a", fontSize: 11 }}>{s.category}</span>
                </div>
              )) : <div style={{ fontSize: 12, color: "#6e7681" }}>—</div>}
            </div>
          ) : <div style={{ color: "#6e7681", fontSize: 13, padding: 20 }}>Click a point to begin.</div>}
        </div>
      </div>

      {/* biggest bridges leaderboard */}
      {!isLoading && !isError && bridgeList.length ? (
        <div style={{ marginTop: 14, fontFamily: "system-ui,sans-serif" }}>
          <div style={{ fontSize: 11, letterSpacing: 1, color: "#6e7681", textTransform: "uppercase", marginBottom: 6 }}>Biggest cross-family bridges — click to inspect</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {bridgeList.slice(0, 8).map((b) => (
              <button key={b.ing} onClick={() => pickPoint(b.ing)}
                style={{ display: "flex", alignItems: "center", gap: 5, background: "transparent", border: "1px solid #2a3140", borderRadius: 20, padding: "3px 10px", cursor: "pointer", color: "#c9d1d9", fontSize: 12 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: colorMap[b.fam] }} />
                {b.ing} <span style={{ color: "#6e7681" }}>→ {b.crossFam}</span>
              </button>
            ))}
          </div>
        </div>
      ) : null}

      <p style={{ marginTop: 14, color: "#8b949e", fontSize: 12.5, lineHeight: 1.5, maxWidth: 780, fontFamily: "system-ui,sans-serif" }}>
        Proximity = chemical kinship: ingredients near each other share aroma compounds. The "cross-family surprises" are pairings that bridge flavor families — the unexpected matches molecular gastronomy chases. ✦ compkitchen.com
      </p>
    </div>
  );
}

An interactive instrument over 450 ingredients positioned by molecular similarity. Click any ingredient for a dossier — its aroma-compound count and rank, its most molecularly similar ingredients, its cross-family "surprises" that bridge flavor families, and whether it's a core member or outlier. Hit "Surprise me" for a bold cross-category pairing. Built on peer-reviewed volatile-compound data via CompKitchen's flavor-pairing engine. → compkitchen.com

The Flavor Pairing Engine: 450 Ingredients by Molecular Kinship

build the molecular-similarity scatter from the flavor_universe table

add a click-to-dossier with compound rank, nearest-similar ingredients, and cross-family surprises

add a "Surprise me" button that picks a bold cross-category pairing

The Flavor Pairing Engine by Molecular Kinship

AI Prompts Used

Comments