// Welcome to MotherDuck — onboarding Dive (REMIX: white canvas, tiles-first) // Forked variant: white background, and everything above the 4 colored tab-tiles // (header, connect-LLM banner, Flights/Dives CTAs, dataset heading + hint) removed. // The 4 colored tiles now lead the page; chart/drilldown area and closing CTA retained. // // Dataset: sample_data.kaggle.movies (title, overview, FLOAT[512] embeddings). // - "Movies most like your pick" uses vector cosine similarity over the embeddings. // - "The movie universe by theme" derives genre-like themes from the overview text // via keyword matching (directional, not official genres — called out in the UI). // // Branding: MotherDuck modern brutalism (skills/design/motherduck-design-dive). // Tokens + DIVE_CSS pasted verbatim from references/tokens-in-dive.ts — do not edit hex values. import { useSQLQuery } from "@motherduck/react-sql-query"; import * as React from "react"; import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, ScatterChart, Scatter, ZAxis, CartesianGrid, ReferenceLine, ReferenceArea, ComposedChart, Line } from "recharts"; import { Copy, Check, ZoomIn, MousePointer2, Info } from "lucide-react"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/sample_data/23b0d623-1361-421d-ae77-62d701d471e6', alias: 'sample_data' } ]; /* ---------------------------------------------------------------------------- * Canonical TOKENS + DIVE_CSS (from motherduck-design-dive/references/tokens-in-dive.ts) * -------------------------------------------------------------------------- */ const DIVE_CSS = ` @import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); @font-face { font-family:'Aeonik Mono'; font-weight:400; font-style:normal; font-display:swap; src: local('Aeonik Mono'), local('AeonikMono-Regular'), url('./fonts/AeonikMono-Regular.woff2') format('woff2'), url('/fonts/AeonikMono-Regular.woff2') format('woff2'), url('/AeonikMono-Regular.woff2') format('woff2'); } @font-face { font-family:'Aeonik Mono'; font-weight:700; font-style:normal; font-display:swap; src: local('Aeonik Mono Bold'), local('AeonikMono-Bold'), url('./fonts/AeonikMono-Bold.woff2') format('woff2'), url('/fonts/AeonikMono-Bold.woff2') format('woff2'), url('/AeonikMono-Bold.woff2') format('woff2'); } :root { --sand:#F4EFEA; --sand-grey:#ECE6DF; --dark-sand:#E1D6CB; --ink:#383838; --white:#FFFFFF; --code-header:#ECE5DD; --sky:#6FC2FF; --sky-dark:#2BA5FF; --sun:#FFDE00; --garden:#16AA98; --watermelon:#FF7169; --duck:#FF9538; --muted:#888888; --rule:#D6CDBE; --aeonik:'Aeonik Mono','Cousine',ui-monospace,Menlo,monospace; --inter:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'JetBrains Mono','Cousine',ui-monospace,Menlo,monospace; --radius:2px; --radius-soft:14px; --radius-pill:999px; } * { margin:0; padding:0; box-sizing:border-box; } html, body, #root { background:var(--white); color:var(--ink); font-family:var(--inter); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .eyebrow { font-family:var(--aeonik); font-size:clamp(12px,1.1vw,15px); letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); } .eyebrow--watermelon{color:var(--watermelon);} .eyebrow--garden{color:var(--garden);} .eyebrow--sky{color:var(--sky-dark);} .eyebrow--sun{color:var(--sun);} .headline-lg { font-family:var(--aeonik); font-weight:400; font-size:clamp(28px,4.5vw,64px); letter-spacing:-0.01em; line-height:1.1; text-transform:uppercase; } .headline-md { font-family:var(--aeonik); font-weight:400; font-size:clamp(20px,3vw,34px); letter-spacing:-0.01em; line-height:1.15; text-transform:uppercase; } .body-lg { font-weight:300; font-size:clamp(16px,1.7vw,22px); line-height:1.45; } .body-md { font-weight:300; font-size:clamp(14px,1.3vw,18px); line-height:1.5; } .body-sm { font-weight:300; font-size:clamp(12px,1vw,15px); line-height:1.5; color:var(--muted); } .card { background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-soft); box-shadow:-8px 8px 0 var(--ink); padding:clamp(20px,2vw,32px); display:flex; flex-direction:column; gap:clamp(10px,1vw,16px); } .pill-button { font-family:var(--aeonik); font-size:14px; text-transform:uppercase; letter-spacing:0.08em; padding:10px 20px; background:var(--sky); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-pill); cursor:pointer; text-decoration:none; display:inline-block; transition:transform 120ms ease, box-shadow 120ms ease; box-shadow:-7px 7px 0 var(--ink); } .pill-button:hover { transform:translate(7px,-7px); } .pill-button:active { transform:none; box-shadow:none; } .pill-button--secondary{ background:var(--sand); } .pill-button--affirmative{ background:var(--garden); } .pill-toggle { border:2px solid var(--ink); border-radius:var(--radius-pill); display:inline-flex; overflow:hidden; font-family:var(--aeonik); font-size:13px; text-transform:uppercase; letter-spacing:0.06em; } .pill-toggle button { background:var(--sand); color:var(--ink); border:none; padding:8px 16px; cursor:pointer; } .pill-toggle button + button { border-left:2px solid var(--ink); } .pill-toggle button.active { background:var(--watermelon); color:var(--ink); font-weight:700; } .chrome { background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-soft); box-shadow:-8px 8px 0 var(--ink); overflow:hidden; } .chrome-titlebar { display:flex; align-items:center; gap:12px; min-height:42px; padding:10px 16px; background:var(--sand); border-bottom:2px solid var(--ink); } .chrome-dots { display:flex; gap:8px; } .chrome-dot { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--ink); } .chrome-dot--close{background:var(--watermelon);} .chrome-dot--min{background:var(--sun);} .chrome-dot--max{background:var(--garden);} .chrome-title { font-family:var(--aeonik); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); } .chrome-body--code { padding:clamp(14px,1.6vw,24px); font-family:var(--mono); font-size:clamp(12px,1.1vw,15px); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); } `; /* Supplemental layout classes specific to this Dive (uses only brand tokens). */ const EXTRA_CSS = ` .page { max-width:1120px; margin:0 auto; padding:clamp(20px,3vw,48px); display:flex; flex-direction:column; gap:clamp(20px,2.4vw,36px); } .hero-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .duck { font-size:clamp(36px,5vw,60px); line-height:1; } .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(12px,1.4vw,20px); } .kpi { padding:clamp(16px,1.6vw,24px); } .kpi--sky{background:var(--sky);} .kpi--sun{background:var(--sun);} .kpi--garden{background:var(--garden);} .kpi--watermelon{background:var(--watermelon);} .kpi .big { font-family:var(--aeonik); font-weight:400; font-size:clamp(30px,3.4vw,48px); line-height:1; } /* Prominent "connect your AI tool" callout */ .callout { background:var(--sun); } .connect-row { display:flex; gap:14px; flex-wrap:wrap; } .connect-btn { display:flex; align-items:center; gap:12px; text-decoration:none; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-soft); box-shadow:-7px 7px 0 var(--ink); padding:12px 18px; cursor:pointer; transition:transform 120ms ease, box-shadow 120ms ease; color:var(--ink); } .connect-btn:hover { transform:translate(7px,-7px); } .connect-btn:active { transform:none; box-shadow:none; } .connect-btn .name { font-family:var(--aeonik); font-size:15px; text-transform:uppercase; letter-spacing:0.06em; } .connect-btn svg { display:block; } .inline-link { color:var(--sky-dark); text-decoration:underline; cursor:pointer; } .controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .chip { font-family:var(--inter); font-weight:400; font-size:14px; padding:7px 14px; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-pill); cursor:pointer; } .chip.active { background:var(--sky); font-weight:600; } .search { font-family:var(--inter); font-size:15px; padding:8px 14px; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-pill); min-width:200px; } /* Bars */ .bars { display:grid; grid-template-columns:minmax(120px,max-content) 1fr max-content; column-gap:16px; row-gap:12px; align-items:center; } .bar-label { font-size:14px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; } .bar-track-wrap { position:relative; height:16px; } .bar-track { position:absolute; inset:0; background:var(--rule); border-radius:var(--radius-pill); } .bar-fill { position:absolute; top:0; left:0; bottom:0; border-radius:var(--radius-pill); transition:width 280ms cubic-bezier(0.2,0.8,0.2,1); } .bar-value { font-family:var(--aeonik); font-size:15px; font-weight:700; white-space:nowrap; } .section-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } /* Choose-your-path */ .path-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(14px,1.6vw,24px); } .path-card .prompt { font-family:var(--mono); font-size:13px; background:var(--sand); border:2px solid var(--ink); border-radius:var(--radius); padding:10px 12px; color:var(--ink); } /* ── iteration overrides: readability, compact, charts ── */ .kpi .eyebrow, .kpi .body-sm { color:var(--ink); } /* readable text on colored KPI cards */ .kpi { padding:14px 16px; gap:4px; } .kpi .big { font-size:clamp(26px,3vw,40px); } .kpi .big .body-sm { display:block; white-space:nowrap; font-size:12px; margin-top:2px; } .page { gap:clamp(14px,1.6vw,20px); padding:clamp(10px,1.2vw,18px) clamp(16px,2vw,28px) clamp(16px,2vw,28px); } /* slim "start here" banner: text left, logos right */ .callout { padding:16px 20px; gap:10px; } .callout-text { display:flex; flex-direction:column; gap:2px; } .callout .headline-md { font-size:clamp(16px,2vw,22px); } .connect-row { gap:10px; } .connect-btn { padding:7px 12px; gap:8px; box-shadow:-4px 4px 0 var(--ink); } .connect-btn:hover { transform:translate(4px,-4px); } .connect-btn .name { font-size:13px; } .connect-btn svg { width:22px; height:22px; } .callout-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .path-card { padding:16px 18px; gap:14px; flex-direction:row; align-items:center; justify-content:space-between; } .path-text { display:flex; flex-direction:column; gap:6px; } .path-arrow { flex:0 0 auto; width:46px; height:46px; border-radius:var(--radius-pill); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--aeonik); font-size:24px; line-height:1; color:var(--ink); box-shadow:-4px 4px 0 var(--ink); } .path-card--link { text-decoration:none; color:var(--ink); transition:transform 120ms ease, box-shadow 120ms ease; } .path-card--link:hover { transform:translate(7px,-7px); } .path-card .body-sm { color:#555; } .skeleton { background:var(--sand-grey); border-radius:14px; } /* readable body text on the yellow "start here" banner */ .callout .body-sm { color:var(--ink); } /* no blue focus ring on click; keep a subtle ink ring for keyboard nav only */ button:focus, a:focus, input:focus, .inline-link:focus, .pill-button:focus, .button:focus, .chip:focus, .connect-btn:focus, .path-card--link:focus, .pill-toggle button:focus, .search:focus { outline:none; } .pill-button:focus-visible, .button:focus-visible, .chip:focus-visible, .connect-btn:focus-visible, .path-card--link:focus-visible, .pill-toggle button:focus-visible, .search:focus-visible { outline:2px solid var(--ink); outline-offset:2px; } /* recharts svg parts never show a focus box */ .recharts-wrapper:focus, .recharts-surface:focus, .recharts-surface *:focus, svg:focus, g:focus, path:focus, rect:focus { outline:none; } /* colored tiles act as tabs */ .kpi-tab { cursor:pointer; transition:transform 120ms ease; } .kpi-tab:hover { transform:translate(7px,-7px); } .kpi-tab.active { outline:3px solid var(--ink); outline-offset:3px; } /* selected/active highlight: lavender, not red */ .pill-toggle button.active { background:#C8A9F2; } .chip.active { background:#E5F173; } /* bold + orange eyebrow variants */ .eyebrow--bold { font-weight:700; } .eyebrow--duck { color:var(--duck); } /* themes drilldown table */ .drill { display:flex; flex-direction:column; gap:10px; margin-top:6px; } .dtable-wrap { max-height:300px; overflow-y:auto; border:2px solid var(--ink); border-radius:10px; } .dtable { width:100%; border-collapse:collapse; font-family:var(--inter); font-size:14px; } .dtable th { position:sticky; top:0; text-align:left; font-family:var(--aeonik); text-transform:uppercase; letter-spacing:0.04em; font-size:12px; background:var(--sand); border-bottom:2px solid var(--ink); padding:9px 14px; cursor:pointer; user-select:none; white-space:nowrap; } .dtable td { padding:7px 14px; border-bottom:1px solid var(--rule); } .dtable tr:last-child td { border-bottom:none; } .dtable th:nth-child(2), .dtable td:nth-child(2) { text-align:right; font-family:var(--aeonik); } .dtable tbody tr:hover { background:var(--sand-grey); } /* SQL block: dark mode + 1-click copy */ .chrome-body--dark { background:#23252e; color:#E8E8E8; } .copy-btn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--aeonik); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-pill); padding:3px 10px; cursor:pointer; color:var(--ink); } .copy-btn:hover { background:var(--sand); } /* info tooltip chip */ .infotip { position:relative; display:inline-flex; align-items:center; cursor:help; color:var(--muted); } .infotip-pop { display:none; position:absolute; top:calc(100% + 8px); right:0; width:270px; background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:10px; box-shadow:-4px 4px 0 var(--ink); padding:10px 12px; font-family:var(--inter); font-weight:400; font-size:12px; line-height:1.45; letter-spacing:normal; text-transform:none; white-space:normal; z-index:20; } .infotip:hover .infotip-pop, .infotip:focus .infotip-pop, .infotip:focus-within .infotip-pop { display:block; } /* drag-to-zoom demo affordance (shown until first zoom) */ .zoom-demo { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; } .zoom-demo-inner { display:flex; flex-direction:column; align-items:center; gap:8px; animation: zoomsway 2.2s ease-in-out infinite; } .zoom-demo-cursor { display:flex; flex-direction:column; align-items:center; animation: zoomblink 1s ease-in-out infinite; } .zoom-demo-line { width:2px; height:110px; background:var(--ink); } .zoom-demo-label { background:var(--ink); color:var(--white); font-family:var(--aeonik); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; } @keyframes zoomblink { 0%,100%{opacity:1} 50%{opacity:0.2} } @keyframes zoomsway { 0%,100%{transform:translateX(-26px)} 50%{transform:translateX(26px)} } @media (prefers-reduced-motion: reduce) { .zoom-demo-inner, .zoom-demo-cursor { animation:none; } } /* full-bleed white background behind the centered page */ .dive-bg { background:var(--white); width:100%; min-height:100vh; } `; /* ---------------------------------------------------------------------------- * AI tool logos (verbatim from hatchling get-started/components/icons) + connect links * (the same links the in-product "Connect your tools" onboarding step uses). * -------------------------------------------------------------------------- */ function ClaudeLogo() { return ( ); } function OpenAILogo() { return ( ); } function CursorLogo() { return ( ); } const CONNECTORS = [ { key: "claude", name: "Claude", Logo: ClaudeLogo, href: "https://claude.ai/directory/connectors/0929a5c7-38ce-40ab-8aad-af9ce34553c7" }, { key: "chatgpt", name: "ChatGPT", Logo: OpenAILogo, href: "https://chatgpt.com/apps/motherduck/asdk_app_696a54f1c91c81919002b9153ce0e336" }, { key: "cursor", name: "Cursor", Logo: CursorLogo, href: "cursor://anysphere.cursor-deeplink/mcp/install?name=motherduck&config=eyJ1cmwiOiJodHRwczovL2FwaS5tb3RoZXJkdWNrLmNvbS9tY3AifQ%3D%3D" }, ] as const; const PRESETS = [ "The Mighty Ducks", "Star Wars", "The Matrix", "Inception", "Forrest Gump", "Toy Story", "The Lion King", "Jurassic Park", "Titanic", "Finding Nemo", "The Dark Knight", ]; const THEMES: { theme: string; clauses: string[] }[] = [ { theme: "Family", clauses: ["%family%", "%father%", "%mother%"] }, { theme: "War", clauses: ["%war%", "%soldier%", "%battle%"] }, { theme: "Friendship", clauses: ["%friend%"] }, { theme: "Love / romance", clauses: ["%love%", "%romance%"] }, { theme: "Crime", clauses: ["%murder%", "%killer%", "%crime%", "%detective%"] }, { theme: "Coming-of-age", clauses: ["%school%", "%teenage%", "%high school%"] }, { theme: "Sci-fi", clauses: ["%space%", "%alien%", "%planet%", "%future%"] }, ]; const esc = (s: string) => s.replace(/'/g, "''"); // DuckDB returns BIGINT (e.g. count(*)) as JS BigInt — wrap every numeric value or JSX crashes. const N = (v: unknown): number => (v != null ? Number(v) : 0); const asRows = (d: unknown): any[] => (Array.isArray(d) ? d : []); // Rainbow palette cycles the MotherDuck brand accents for a lively, BI-like chart. const RAINBOW = ["#6FC2FF", "#FFDE00", "#16AA98", "#C8A9F2", "#FF9538", "#E5F173", "#2BA5FF", "#FF7169", "#068475", "#97D4FF", "#50C7B7", "#E23F35", "#BFA800", "#F9EE3E", "#FF9A94"]; // Branded tooltip for the Movie finder — shows title, similarity, and the plot summary. function MovieTooltip({ active, payload }: any) { if (!active || !payload?.length) return null; const row = payload[0].payload || {}; const ov = row.overview ? String(row.overview) : ""; return (

{row.label} · {N(row.value).toFixed(2)} cosine similarity

{ov &&

{ov}

}

); } // Recharts horizontal bar chart — rainbow cells with ink strokes, animated on update. function ChartBars({ rows, kind, summaries, onBarClick, highlight }: { rows: { label: string; value: number; display: string; overview?: string }[]; kind: "sim" | "count"; summaries?: boolean; onBarClick?: (label: string) => void; highlight?: string }) { if (rows.length === 0) return

; const height = Math.max(150, rows.length * 34); const selIdx = highlight ? rows.findIndex((r) => r.label === highlight) : -1; return ( {summaries ? } /> : [kind === "sim" ? Number(v).toFixed(3) : Number(v).toLocaleString(), kind === "sim" ? "similarity" : "movies"]} />} = 0 ? (p: any) => (p.index === selIdx ? : ) : undefined} onClick={onBarClick ? (d: any) => onBarClick(String(d?.payload?.label ?? d?.label ?? "")) : undefined} label={{ position: "right", fontSize: 12, fill: "#383838", formatter: (v: any) => (kind === "sim" ? Number(v).toFixed(2) : Number(v).toLocaleString()) }}> {rows.map((r, i) => )} ); } // Tooltip for the word scatter. function WordTooltip({ active, payload }: any) { if (!active || !payload?.length) return null; const d = payload[0].payload || {}; return (

{d.word}

{N(d.freq).toLocaleString()} occurrences

avg plot length {N(d.avg_len)} chars

); } // CHM-style bubble scatter: x = word frequency, y = avg plot length of movies using it, size = frequency. function WordScatter({ rows, selected, onSelect, avg }: { rows: { word: string; freq: number; avg_len: number }[]; selected: string; onSelect: (w: string) => void; avg: number }) { if (rows.length === 0) return

; const maxLen = Math.max(...rows.map((r) => r.avg_len), avg); return ( (v >= 1000 ? v / 1000 + "k" : String(v))} label={{ value: "How common the word is (occurrences)", position: "insideBottom", offset: -8, fontSize: 13, fontWeight: 700, fill: "#383838", textAnchor: "middle" }} /> } cursor={{ strokeDasharray: "3 3" }} /> onSelect(String(d?.word ?? d?.payload?.word ?? ""))}> {rows.map((r, i) => ( ))} ); } // Movie-descriptions tab: fine-grained histogram (20-char bins) on a numeric axis with click-drag zoom (like the Duckling Overview). function LengthHistogram({ rows, selected, onPick }: { rows: { lo: number; count: number }[]; selected: number | null; onPick: (lo: number) => void }) { const [left, setLeft] = useState("dataMin"); const [right, setRight] = useState("dataMax"); const [refL, setRefL] = useState(null); const [refR, setRefR] = useState(null); if (rows.length === 0) return

; const zoomed = left !== "dataMin" || right !== "dataMax"; const selIdx = selected != null ? rows.findIndex((r) => r.lo === selected) : -1; const doZoom = () => { if (refL != null && refR != null && refL !== refR) { const a = Math.min(refL, refR), b = Math.max(refL, refR); setLeft(a); setRight(b); // drag → zoom // auto-select the tallest bar in the window so the drilldown appears and clicking is discoverable const win = rows.filter((r) => r.lo >= a && r.lo <= b); if (win.length) onPick(win.reduce((m, r) => (r.count > m.count ? r : m), win[0]).lo); } else if (refL != null) { onPick(refL); // click (no drag) → drill into that bin } setRefL(null); setRefR(null); }; const reset = () => { setLeft("dataMin"); setRight("dataMax"); setRefL(null); setRefR(null); }; return (

{zoomed ? "Drag to zoom in further, or reset →" : "Click & drag across the chart to zoom in"}

{ if (e && e.activeLabel != null) setRefL(Number(e.activeLabel)); }} onMouseMove={(e: any) => { if (refL != null && e && e.activeLabel != null) setRefR(Number(e.activeLabel)); }} onMouseUp={doZoom}> (v >= 1000 ? v / 1000 + "k" : String(v))} label={{ value: "Plot length (chars) — drag to zoom", position: "insideBottom", offset: -4, fontSize: 13, fontWeight: 700, fill: "#383838", textAnchor: "middle" }} /> (v >= 1000 ? v / 1000 + "k" : String(v))} label={{ value: "Movies", angle: -90, position: "insideLeft", fontSize: 13, fontWeight: 700, fill: "#383838", textAnchor: "middle" }} /> `${v}–${Number(v) + 19} characters`} formatter={(v: any) => [Number(v).toLocaleString(), "movies"]} /> = 0 ? (p: any) => (p.index === selIdx ? : ) : undefined}> {rows.map((r, i) => )} {refL != null && refR != null && } {!zoomed && selected == null && (

Click and drag to zoom...

)}

); } // Lightweight SQL syntax highlighter (no external lib) for the dark code block. const SQL_KW = new Set("SELECT FROM WHERE AND OR NOT NULL AS ORDER BY GROUP LIMIT WITH CASE WHEN THEN ELSE END ILIKE LIKE IN IS DISTINCT UNION ALL DESC ASC ON JOIN LEFT INNER BETWEEN".split(" ")); const SQL_FN = new Set("count round avg sum min max length lower upper unnest regexp_split_to_array array_cosine_similarity coalesce".split(" ")); function highlightSql(sql: string) { const re = /(--[^\n]*|\/\*[\s\S]*?\*\/)|('(?:[^']|'')*')|(\d+(?:\.\d+)?)|([A-Za-z_][A-Za-z0-9_]*)|(\s+)|([^\sA-Za-z0-9_]+)/g; const out: any[] = []; let m: RegExpExecArray | null; let i = 0; while ((m = re.exec(sql))) { const [full, comment, str, num, word, ws] = m; if (comment) out.push({comment}); else if (str) out.push({str}); else if (num) out.push({num}); else if (word) { if (SQL_KW.has(word.toUpperCase())) out.push({word}); else if (SQL_FN.has(word.toLowerCase())) out.push({word}); else out.push({word}); } else out.push({ws ?? full}); i++; } return out; } // Dark, syntax-highlighted SQL block with a 1-click copy button. function SqlBlock({ sql, file }: { sql: string; file: string }) { const [copied, setCopied] = useState(false); const copy = () => { try { navigator.clipboard?.writeText(sql); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (e) { /* clipboard unavailable */ } }; return (

{file}

{highlightSql(sql)}

); } // Hover/focus info chip — explains a term in plain language. function InfoTip({ text }: { text: string }) { return ( {text} ); } export default function WelcomeDive() { const [movie, setMovie] = useState("The Mighty Ducks"); const [draft, setDraft] = useState(""); const [count, setCount] = useState(15); const [field, setField] = useState<"overview" | "title">("overview"); const [showSql, setShowSql] = useState(false); const [tab, setTab] = useState<"words" | "themes" | "length" | "similar">("similar"); const [drillTheme, setDrillTheme] = useState("Family"); const [drillWord, setDrillWord] = useState("life"); const [lenBin, setLenBin] = useState(null); const [sortCol, setSortCol] = useState<"title" | "len">("len"); const [sortDir, setSortDir] = useState<"asc" | "desc">("desc"); const [remixOpen, setRemixOpen] = useState(false); // Lock the visualization card to the height of the Movie-finder (blue tile) view so it never jumps when switching tabs. const chartCardRef = useRef(null); const [lockedH, setLockedH] = useState(null); // Leaving the Movie-descriptions tab clears its selection, so returning starts fresh (demo overlay + cues reappear). useEffect(() => { if (tab !== "length") setLenBin(null); }, [tab]); // Vector similarity: movies closest to the selected one. const similarSql = useMemo(() => ` WITH target AS ( SELECT title AS matched, ${field}_embeddings AS emb FROM sample_data.kaggle.movies WHERE title ILIKE '%${esc(movie)}%' AND ${field}_embeddings IS NOT NULL ORDER BY (lower(title) = lower('${esc(movie)}')) DESC, (title ILIKE '${esc(movie)}%') DESC, length(title) ASC LIMIT 1 ) SELECT m.title AS title, round(array_cosine_similarity(m.${field}_embeddings, target.emb), 3) AS sim, m.overview AS overview, target.matched AS matched FROM sample_data.kaggle.movies m, target WHERE m.title <> target.matched ORDER BY sim DESC LIMIT ${count};`.trim(), [movie, field, count]); // Theme breakdown derived from overview text (genre-like; directional, not official). const themeSql = useMemo(() => THEMES.map((t) => { const cond = t.clauses.map((c) => `overview ILIKE '${c}'`).join(" OR "); return `SELECT '${t.theme}' AS theme, count(*) AS n FROM sample_data.kaggle.movies WHERE ${cond}`; }).join("\nUNION ALL\n") + "\nORDER BY n DESC", []); // Distribution of overview length in fine 20-char bins (numeric axis, drag-to-zoom). const lengthSql = `SELECT (length(overview) / 20) * 20 AS lo, count(*) AS n FROM sample_data.kaggle.movies WHERE overview IS NOT NULL GROUP BY lo ORDER BY lo`; // Word scatter: frequency + avg plot length of movies using each word (short / stop-words removed). const wordsSql = `WITH toks AS ( SELECT length(overview) AS len, lower(unnest(regexp_split_to_array(overview, '[^a-z]+'))) AS word FROM sample_data.kaggle.movies WHERE overview IS NOT NULL ) SELECT word, count(*) AS freq, round(avg(len)) AS avg_len FROM toks WHERE length(word) >= 4 AND word NOT IN ('this','that','with','from','they','their','them','have','when','will','what','your','into','then','than','been','were','about','after','which','while','where','there','these','those','would','could','should','because','being','only','also','over','some','more','most','other','must','very','much','such','even','just','find') GROUP BY word ORDER BY freq DESC LIMIT 40`; const kpiSql = `SELECT count(*) AS movies, round(avg(length(overview))) AS avg_chars, max(length(overview)) AS max_chars FROM sample_data.kaggle.movies`; // similar + kpi always run (they power the picker + tile numbers); the rest run only when their tab is active. const similar = useSQLQuery(similarSql); const kpi = useSQLQuery(kpiSql); const themes = useSQLQuery(themeSql, { enabled: tab === "themes" }); const lengths = useSQLQuery(lengthSql, { enabled: tab === "length" }); const words = useSQLQuery(wordsSql, { enabled: tab === "words" }); // Capture the card's natural height while the blue (Movie finder) tile is active; reuse it as a floor for the other tabs. useLayoutEffect(() => { if (tab === "similar" && chartCardRef.current) setLockedH(chartCardRef.current.offsetHeight); }, [tab, similar.data, similar.isLoading, count, field, movie]); const simRows = asRows(similar.data).map((r) => ({ label: String(r.title), value: N(r.sim), display: N(r.sim).toFixed(3), overview: r.overview ? String(r.overview) : "" })); const themeRows = asRows(themes.data).map((r) => ({ label: String(r.theme), value: N(r.n), display: N(r.n).toLocaleString() })); const lengthRows = asRows(lengths.data).map((r) => ({ lo: N(r.lo), count: N(r.n) })); const wordScatterRows = asRows(words.data).map((r) => ({ word: String(r.word), freq: N(r.freq), avg_len: N(r.avg_len) })); const matched = asRows(similar.data)[0]?.matched ?? movie; const movieCount = N(asRows(kpi.data)[0]?.movies) || 41371; const avgChars = N(asRows(kpi.data)[0]?.avg_chars) || 323; const maxChars = N(asRows(kpi.data)[0]?.max_chars) || 1000; // Drilldown into the actual movies behind the selected bar — Themes, Commonly-used-words, and Movie-descriptions // (Sheila's signature click-a-bar → sortable table pattern). Sorted in SQL. let drillWhere = "TRUE"; let drillHeading = ""; if (tab === "themes") { const cl = THEMES.find((t) => t.theme === drillTheme)?.clauses ?? ["%%"]; drillWhere = "(" + cl.map((c) => `overview ILIKE '${c}'`).join(" OR ") + ")"; drillHeading = `movies about “${drillTheme}”`; } else if (tab === "words") { drillWhere = `overview ILIKE '%${esc(drillWord)}%'`; drillHeading = `Movies mentioning “${drillWord}”`; } else if (tab === "length" && lenBin != null) { drillWhere = `length(overview) BETWEEN ${lenBin} AND ${lenBin + 19}`; drillHeading = `Movies with ${lenBin}–${lenBin + 19}-char plots`; } const drillSql = `SELECT title, length(overview) AS len FROM sample_data.kaggle.movies WHERE ${drillWhere} AND overview IS NOT NULL ORDER BY ${sortCol === "title" ? "title" : "len"} ${sortDir === "asc" ? "ASC" : "DESC"}`; const drill = useSQLQuery(drillSql, { enabled: tab === "themes" || tab === "words" || (tab === "length" && lenBin != null) }); const drillRows = asRows(drill.data).map((r) => ({ title: String(r.title), len: N(r.len) })); const onBarSelect = tab === "themes" ? setDrillTheme : tab === "words" ? setDrillWord : undefined; const barHighlight = tab === "themes" ? drillTheme : tab === "words" ? drillWord : undefined; const sortBy = (col: "title" | "len") => { if (col === sortCol) setSortDir((d) => (d === "asc" ? "desc" : "asc")); else { setSortCol(col); setSortDir(col === "title" ? "asc" : "desc"); } }; const sortArrow = (col: "title" | "len") => col === sortCol ? {sortDir === "asc" ? "▲" : "▼"} : ↕; // The 4 colored tiles double as tabs; each opens a different visualization. const TILES = [ { key: "similar" as const, label: ["Movie", "finder"], value: "6-15", unit: " matches / search", accent: "sky" }, { key: "length" as const, label: ["Plot description", "lengths"], value: maxChars.toLocaleString(), unit: " characters max", accent: "sun" }, { key: "words" as const, label: ["Commonly used", "words"], value: movieCount.toLocaleString(), unit: " movies", accent: "garden" }, { key: "themes" as const, label: ["Plot", "Themes"], value: String(THEMES.length), unit: " categories", accent: "watermelon" }, ]; const VIEW = { similar: { title: `Movies most like “${matched}”`, unit: "cosine similarity", rows: simRows, kind: "sim" as const, sql: similarSql, err: similar.error, file: "vector_search.sql", caption: (matched && movie && matched.toLowerCase() !== movie.toLowerCase()) ? `Closest title to your search “${movie}”.` : "" }, themes: { title: "The movie universe by theme", unit: "movies", rows: themeRows, kind: "count" as const, sql: themeSql, err: themes.error, file: "themes.sql", caption: "Themes are inferred from each movie’s description (keyword match), so a war-romance counts in both — directional, not official genres." }, length: { title: "How long are movie descriptions?", unit: "movies", rows: [], kind: "count" as const, sql: lengthSql, err: lengths.error, file: "length_histogram.sql", caption: `Distribution of plot length across all ${movieCount.toLocaleString()} movies (20-char bins). Drag across the chart to zoom into a range; Reset zoom to go back.` }, words: { title: "Most common words in movie plots", unit: "words", rows: [], kind: "count" as const, sql: wordsSql, err: words.error, file: "word_scatter.sql", caption: "Each dot is a word — x: how common it is, y: the average plot length of movies that use it, size: frequency. Hover for counts; click a dot to drill in." }, }[tab]; return (

{/* Section heading above the 4 colored tiles */}

Sample Dive: Movies sample_data.kaggle.movies

click a tile to switch charts ↓

{/* The 4 colored tiles double as tabs — each opens a different visualization */}

{TILES.map((t) => (

setTab(t.key)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setTab(t.key); }}>

{t.label[0]}
{t.label[1]}

{t.value}{t.unit}

))}

{/* Visualization area — switches with the selected tile */}

{/* Movie picker controls only for the vector-search view */} {tab === "similar" && (

Find movies like…

{PRESETS.map((p) => ( ))}

)}

{tab === "similar" ? {VIEW.title} :

{VIEW.title}

} {tab === "similar" ? {VIEW.unit} : {VIEW.unit}}

{VIEW.err ?

Couldn’t load that — try another.

: tab === "words" ? : tab === "length" ? : (tab === "similar" && !similar.isLoading && simRows.length === 0 && !similar.error) ?

No movie matching “{movie}” found in the dataset — try another title or pick one above.

: } {VIEW.caption &&

{VIEW.caption}

} {/* Drilldown into the movies behind the selected bar — Themes, Words, and (after a click) Movie descriptions */} {(tab === "themes" || tab === "words" || (tab === "length" && lenBin != null)) && (

{drillHeading} {drillRows.length.toLocaleString()} movies · click the chart to drill in

{drillRows.length === 0 ? : drillRows.map((m, i) => ( ))}

sortBy("title")}>Title{sortArrow("title")}	sortBy("len")}>Plot length{sortArrow("len")}
Loading…
{m.title}	{m.len.toLocaleString()}

)} setShowSql((s) => !s)}>{showSql ? "▾ Hide the SQL" : "▸ How this works (show the SQL)"} {showSql && }

{/* Remix popup — opens from the "Explore data with Dives" card */} {remixOpen && ( )}

); }

Welcome to MotherDuck: Movies Dataset

Comments