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 = 1000, H = 640, PAD = 46;
const NOUNS = ["CLUSTER", "BELT", "CLOUD", "CHAIN", "FIELD", "STREAM", "REACH", "VEIL", "DRIFT", "EXPANSE"];

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

  const [selectedCategory, setSelectedCategory] = useDiveState("category", "");
  const [showBridges, setShowBridges] = useDiveState("bridges", false);
  const [search, setSearch] = useState("");
  const [hover, setHover] = useState(null);

  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(([cat], i) => { m[cat] = d3.interpolateSinebow(i / n); });
    return m;
  }, [categories]);
  const brightMap = useMemo(() => {
    const m = {};
    Object.entries(colorMap).forEach(([c, hex]) => {
      const col = d3.color(hex); m[c] = col ? col.brighter(0.9).formatHex() : hex;
    });
    return m;
  }, [colorMap]);
  const nameMap = useMemo(() => {
    const m = {};
    categories.forEach(([cat], i) => { m[cat] = "THE " + cat.toUpperCase() + " " + NOUNS[i % NOUNS.length]; });
    return m;
  }, [categories]);

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

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

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

  const twinkleSet = useMemo(() => {
    if (!points.length) return new Set();
    const sorted = [...points].sort((a, b) => b.compound_count - a.compound_count);
    return new Set(sorted.slice(0, Math.ceil(points.length * 0.16)).map((p) => p.ingredient));
  }, [points]);

  // Constellation edges: each star links to its 2 nearest same-family neighbors.
  const edges = useMemo(() => {
    const byCat = {};
    screen.forEach((p) => { (byCat[p.category] = byCat[p.category] || []).push(p); });
    const seen = new Set(); const out = [];
    Object.values(byCat).forEach((group) => {
      group.forEach((p) => {
        group.filter((o) => o !== p)
          .map((o) => ({ o, d: (p.X - o.X) ** 2 + (p.Y - o.Y) ** 2 }))
          .sort((a, b) => a.d - b.d).slice(0, 2)
          .forEach(({ o }) => {
            const key = [p.ingredient, o.ingredient].sort().join("|");
            if (!seen.has(key)) { seen.add(key); out.push({ key, x1: p.X, y1: p.Y, x2: o.X, y2: o.Y, category: p.category }); }
          });
      });
    });
    return out;
  }, [screen]);

  // Bridges: stars sitting closer to a foreign family than their own kin.
  const bridges = useMemo(() => {
    if (screen.length < 3) return { set: new Map(), list: [] };
    const scored = screen.map((p, i) => {
      let dSame = Infinity, dDiff = Infinity, diffCat = null, fx = null, fy = null;
      for (let j = 0; j < screen.length; j++) {
        if (j === i) continue; const o = screen[j];
        const d = (p.x - o.x) ** 2 + (p.y - o.y) ** 2;
        if (o.category === p.category) { if (d < dSame) dSame = d; }
        else if (d < dDiff) { dDiff = d; diffCat = o.category; fx = o.X; fy = o.Y; }
      }
      const ratio = dDiff > 0 ? dSame / dDiff : 0;
      return { ingredient: p.ingredient, category: p.category, X: p.X, Y: p.Y, diffCat, fx, fy, ratio, dSame, dDiff };
    });
    const list = scored.filter((s) => isFinite(s.dSame) && isFinite(s.dDiff) && s.diffCat)
      .sort((a, b) => b.ratio - a.ratio).slice(0, 12);
    return { set: new Map(list.map((b) => [b.ingredient, b])), list };
  }, [screen]);

  const labels = useMemo(() => {
    const top = categories.filter(([, n]) => n >= 14).map(([c]) => c);
    return top.map((cat) => {
      const g = screen.filter((p) => p.category === cat);
      if (!g.length) return null;
      return { cat, X: g.reduce((s, p) => s + p.X, 0) / g.length, Y: g.reduce((s, p) => s + p.Y, 0) / g.length };
    }).filter(Boolean);
  }, [screen, categories]);

  const dust = useMemo(() => {
    let s = 42; const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
    return Array.from({ length: 150 }, () => ({ x: rnd() * W, y: rnd() * H, r: rnd() * 0.9 + 0.2, o: rnd() * 0.5 + 0.12 }));
  }, []);

  const q = search.trim().toLowerCase();
  const anyFilter = showBridges || !!q || !!selectedCategory;
  const isActive = (p) => {
    if (showBridges) return bridges.set.has(p.ingredient);
    if (q) return p.ingredient.toLowerCase().includes(q);
    if (selectedCategory) return p.category === selectedCategory;
    return true;
  };
  const dimOf = (p) => (anyFilter ? (isActive(p) ? 1 : 0.1) : 1);
  const edgeOpacity = (e) => {
    if (showBridges) return 0.04;
    if (selectedCategory) return e.category === selectedCategory ? 0.6 : 0.035;
    if (q) return 0.06;
    return 0.22;
  };

  const clampX = (x) => Math.max(8, Math.min(W - 130, x));

  return (
    <div style={{ background: "#05070d", color: "#e6edf3", padding: "20px 22px", fontFamily: "Georgia, 'Times New Roman', serif" }}>
      <style>{`@keyframes tw{0%,100%{opacity:1}50%{opacity:.4}}@keyframes dash{to{stroke-dashoffset:-24}}@keyframes pulseb{0%,100%{box-shadow:0 0 0 0 rgba(202,162,58,0)}50%{box-shadow:0 0 0 4px rgba(202,162,58,.20)}}`}</style>

      <h1 style={{ fontSize: 27, fontWeight: 700, margin: "0 0 2px", letterSpacing: "-0.01em" }}>The Flavor Universe</h1>
      <p style={{ margin: "0 0 14px", color: "#8b949e", fontSize: 14, fontFamily: "system-ui, sans-serif" }}>
        450 ingredients as a night sky — stars are ingredients, constellations are flavor families
        {hover ? <span style={{ color: "#e6edf3" }}> · <b>{hover.ingredient}</b> <span style={{ color: colorMap[hover.category] }}>●</span> {hover.category}, {N(hover.compound_count)} compounds</span> : null}
      </p>

      <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 12, flexWrap: "wrap", fontFamily: "system-ui,sans-serif" }}>
        <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search an ingredient…"
          style={{ background: "#10141d", border: "1px solid #2a3140", borderRadius: 6, padding: "7px 11px", color: "#e6edf3", fontSize: 13, width: 210, outline: "none" }} />
        <button onClick={() => setShowBridges(!showBridges)}
          style={{ background: showBridges ? "#caa23a" : "transparent", border: "1px solid " + (showBridges ? "#caa23a" : "#4a4326"), color: showBridges ? "#1a1300" : "#e3c977", borderRadius: 6, padding: "7px 13px", fontSize: 13, cursor: "pointer", fontWeight: 600, animation: showBridges ? undefined : "pulseb 2.4s ease-in-out infinite" }}>
          {showBridges ? "✦ Bridges on" : "✦ Show the bridges"}
        </button>
        {selectedCategory && !showBridges ? (
          <button onClick={() => setSelectedCategory("")} style={{ background: "transparent", border: "1px solid #2a3140", color: "#8b949e", borderRadius: 6, padding: "6px 10px", fontSize: 12, cursor: "pointer" }}>
            ✕ {selectedCategory}
          </button>
        ) : null}
      </div>

      {isError ? (
        <div style={{ color: "#ff7b72", padding: 20 }}>Failed to load data: {String(error)}</div>
      ) : isLoading ? (
        <div className="animate-pulse" style={{ height: 460, background: "#0c1018", borderRadius: 10 }} />
      ) : (
        <div style={{ borderRadius: 10, overflow: "hidden", border: "1px solid #1b2230" }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }} preserveAspectRatio="xMidYMid meet">
            <defs>
              <radialGradient id="space" cx="38%" cy="32%" r="85%">
                <stop offset="0%" stopColor="#111a2e" />
                <stop offset="55%" stopColor="#080b15" />
                <stop offset="100%" stopColor="#04060c" />
              </radialGradient>
              <radialGradient id="vig" cx="50%" cy="47%" r="72%">
                <stop offset="58%" stopColor="#000000" stopOpacity="0" />
                <stop offset="100%" stopColor="#000000" stopOpacity="0.55" />
              </radialGradient>
            </defs>
            <rect x="0" y="0" width={W} height={H} fill="url(#space)" />
            {dust.map((d, i) => (
              <circle key={"d" + i} cx={d.x} cy={d.y} r={d.r} fill="#cdd6e6" opacity={d.o} />
            ))}

            {/* constellation lines */}
            {edges.map((e) => (
              <line key={e.key} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
                stroke={colorMap[e.category]} strokeWidth={0.6} opacity={edgeOpacity(e)} />
            ))}

            {/* bridge comets */}
            {showBridges && bridges.list.map((b) => (
              <line key={"b" + b.ingredient} x1={b.X} y1={b.Y} x2={b.fx} y2={b.fy}
                stroke="#ffe08a" strokeWidth={1.1} opacity={0.85}
                strokeDasharray="3 4" style={{ animation: "dash 1.1s linear infinite" }} />
            ))}

            {/* stars */}
            {screen.map((p) => {
              const r = sizeScale(p.compound_count);
              const dim = dimOf(p);
              const isBridge = showBridges && bridges.set.has(p.ingredient);
              const isHover = hover && hover.ingredient === p.ingredient;
              const tw = twinkleSet.has(p.ingredient) && !anyFilter;
              return (
                <g key={p.ingredient} style={{ cursor: "pointer" }}
                  onMouseEnter={() => setHover(p)} onMouseLeave={() => setHover(null)}>
                  <circle cx={p.X} cy={p.Y} r={r * 2.4} fill={colorMap[p.category]} opacity={0.16 * dim}
                    style={tw ? { animation: `tw ${2.4 + (r % 1.6)}s ease-in-out infinite` } : undefined} />
                  {r > 3.6 ? <circle cx={p.X} cy={p.Y} r={r * 1.5} fill={brightMap[p.category]} opacity={0.12 * dim} /> : null}
                  <circle cx={p.X} cy={p.Y} r={isHover ? r + 1.6 : r} fill={brightMap[p.category]}
                    opacity={Math.min(1, 0.92 * dim + (isHover ? 0.2 : 0))}
                    stroke={isHover || isBridge ? "#ffffff" : "none"} strokeWidth={isHover || isBridge ? 1.2 : 0} />
                  {r > 4.4 && dim > 0.5 ? <circle cx={p.X} cy={p.Y} r={1} fill="#ffffff" opacity={0.9 * dim} /> : null}
                </g>
              );
            })}

            {/* cinematic vignette */}
            <rect x="0" y="0" width={W} height={H} fill="url(#vig)" style={{ pointerEvents: "none" }} />

            {/* bridge labels */}
            {showBridges && bridges.list.map((b) => (
              <text key={"bl" + b.ingredient} x={clampX(b.X + 7)} y={b.Y + 3.5} fontSize={10.5}
                fontFamily="system-ui, sans-serif" fill="#f6e7b8" style={{ paintOrder: "stroke", pointerEvents: "none" }}
                stroke="#05070d" strokeWidth={3} strokeLinejoin="round">
                {b.ingredient}<tspan fill="#9a8f6a"> → {b.diffCat}</tspan>
              </text>
            ))}

            {/* constellation names */}
            {!showBridges && labels.map((l) => (
              <text key={"l" + l.cat} x={l.X} y={l.Y} textAnchor="middle" fontSize={11}
                fontFamily="system-ui, sans-serif" fill="#e6edf3"
                opacity={selectedCategory ? (l.cat === selectedCategory ? 0.95 : 0.14) : 0.6}
                letterSpacing="2" style={{ pointerEvents: "none", paintOrder: "stroke" }}
                stroke="#05070d" strokeWidth={2.6} strokeLinejoin="round">
                {nameMap[l.cat]}
              </text>
            ))}

            {/* hover name */}
            {hover ? (
              <text x={clampX(hover.X + 8)} y={hover.Y - 8} fontSize={12} fontFamily="system-ui, sans-serif"
                fill="#ffffff" style={{ paintOrder: "stroke", pointerEvents: "none" }}
                stroke="#05070d" strokeWidth={3.5} strokeLinejoin="round">
                {hover.ingredient}
              </text>
            ) : null}

            {/* signature */}
            <text x={W - 14} y={H - 14} textAnchor="end" fontSize={11} fontFamily="system-ui, sans-serif"
              fill="#6a7585" opacity={0.85} letterSpacing="0.5" style={{ pointerEvents: "none" }}>
              ✦ compkitchen.com
            </text>
          </svg>
        </div>
      )}

      {/* clickable family legend */}
      {!showBridges ? (
        <div style={{ marginTop: 12, fontFamily: "system-ui,sans-serif" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, maxHeight: 80, overflowY: "auto", paddingRight: 4 }}>
            {categories.map(([cat, n]) => {
              const active = selectedCategory === cat;
              return (
                <button key={cat} onClick={() => setSelectedCategory(active ? "" : cat)}
                  style={{ display: "flex", alignItems: "center", gap: 5, background: active ? "#161c28" : "transparent",
                    border: "1px solid " + (active ? colorMap[cat] : "#2a3140"), borderRadius: 20, padding: "3px 9px",
                    cursor: "pointer", color: "#c9d1d9", fontSize: 11.5, lineHeight: 1.4,
                    opacity: selectedCategory && !active ? 0.4 : 1 }}>
                  <span style={{ width: 9, height: 9, borderRadius: "50%", background: colorMap[cat], display: "inline-block" }} />
                  {cat} <span style={{ color: "#6e7681" }}>{n}</span>
                </button>
              );
            })}
          </div>
        </div>
      ) : null}

      <p style={{ marginTop: 14, color: showBridges ? "#d8cfa8" : "#8b949e", fontSize: 13, lineHeight: 1.5, maxWidth: 780, fontFamily: "system-ui, sans-serif" }}>
        {showBridges
          ? `${bridges.list.length} stars sit closer to another constellation than to their own — ingredients chemically drifting between flavor families. These cross-category bridges are the surprising pairings molecular gastronomy chases.`
          : "Each star is an ingredient; brightness is the number of aroma compounds it carries. Lines trace each flavor family into a constellation. ✦ Hit “Show the bridges” to reveal the ingredients defecting to other families."}
      </p>
    </div>
  );
}

The Flavor Universe maps 450 ingredients as a night sky. Each star is an ingredient, its brightness the number of aroma compounds it carries; each flavor family is traced into its own constellation. Positions come from a 2D UMAP of the volatile compounds ingredients share, so proximity = molecular kinship. Hit "Show the bridges" to reveal the ingredients sitting closer to a foreign family than their own — the cross-category pairings molecular gastronomy chases. Built on peer-reviewed volatile-compound data through CompKitchen's flavor-pairing engine. → compkitchen.com

The Flavor Universe (Constellation): 450 Ingredients by Molecular Similarity

Build an interactive star map from my flavor_universe table — 450 ingredients placed by 2D UMAP coordinates of the aroma compounds they share, so proximity = molecular similarity. Stars sized/brightened by compound_count, colored by category, with each flavor family traced into a constellation. Dark editorial night-sky background.

Add a derived "bridges" metric: for each ingredient, find its nearest neighbor in a different flavor family vs. its own, and surface the dozen that sit closer to a foreign family — drawn as comet-streaks with a "Show the bridges" toggle. These are the cross-category pairings.

Polish it: name each constellation like a star atlas, add a vignette and extra glow on the brightest stars, make the bridges toggle pulse, and sign it compkitchen.com in the corner.

The Flavor Universe: A Star Map of 450 Ingredients

AI Prompts Used

Comments