export const REQUIRED_DATABASES = [{ type: "share", path: "md:_share/genius_music/ae3533c9-6472-4dc1-80e8-3dd97a706d35", alias: "genius_music" }]; import { useDiveState, useSQLQuery } from "@motherduck/react-sql-query"; import { useEffect, useRef, useState } from "react"; import { ArrowLeft, BadgeCheck, Disc3, ExternalLink, Home, Loader2, Music2, Search, } from "lucide-react"; // Genius Music — Artist, Credit & Song Explorer. // Overview (search + top artists/producers/writers/songs) -> artist detail (credit-filtered // songs + collaborators) <-> song detail (credits + sample/cover/remix graph), all with // recursive click-through. Reads analytics.song_credits, analytics.artist_directory, // analytics.song_relationships. const DB = `"genius_music"."analytics"`; const TRANSLATIONS_BOT = 196943; // Genius's official translations account; hidden from ranked lists. const THEME = { canvas: "#121212", panel: "#181818", panelAlt: "#1f1f1f", hover: "#282828", text: "#ffffff", sub: "#b3b3b3", faint: "#7a7a7a", accent: "#1ed760", line: "rgba(255,255,255,0.08)", font: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif', }; const ROLE_META: Record = { primary: { label: "Primary", color: "#1ed760" }, featured: { label: "Featured", color: "#6fc2ff" }, producer: { label: "Producer", color: "#c39bff" }, writer: { label: "Writer", color: "#ffd166" }, }; const ROLE_ORDER = ["primary", "featured", "producer", "writer"]; // Streaming-service brand glyphs (simple-icons single-path logos). Icons render faint and take // their brand color on hover via the .gm-media- CSS rules. `col` maps to the song_credits // column holding that provider's URL. const BRAND: Record = { youtube: { label: "YouTube", color: "#FF0000", col: "youtube_url", path: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z", }, spotify: { label: "Spotify", color: "#1ED760", col: "spotify_url", path: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z", }, apple: { label: "Apple Music", color: "#FA243C", col: "apple_music_url", path: "M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z", }, }; const BRAND_ORDER = ["youtube", "spotify", "apple"] as const; // Song-relationship sections in display order, with human labels. const REL_ORDER = [ "samples", "sampled_in", "interpolates", "interpolated_by", "cover_of", "covered_by", "remix_of", "remixed_by", "live_version_of", "performed_live_as", "translation_of", "translations", ]; const REL_LABELS: Record = { samples: "Samples", sampled_in: "Sampled in", interpolates: "Interpolates", interpolated_by: "Interpolated by", cover_of: "Cover of", covered_by: "Covered by", remix_of: "Remix of", remixed_by: "Remixed by", live_version_of: "Live version of", performed_live_as: "Performed live as", translation_of: "Translation of", translations: "Translations", }; const CSS = ` .gm-shelf { display:flex; gap:16px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; } .gm-shelf::-webkit-scrollbar { height:8px; } .gm-shelf::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:8px; } .gm-shelf::-webkit-scrollbar-track { background:transparent; } .gm-card { scroll-snap-align:start; cursor:pointer; background:${THEME.panel}; border-radius:12px; padding:14px; transition:background .15s ease, transform .15s ease; } .gm-card:hover { background:${THEME.hover}; transform:translateY(-2px); } .gm-row { border-radius:8px; transition:background .12s ease; } .gm-row:hover { background:rgba(255,255,255,0.05); } .gm-link { color:inherit; text-decoration:none; } .gm-link:hover { text-decoration:underline; } .gm-name, .gm-songtitle { cursor:pointer; } .gm-name:hover, .gm-songtitle:hover { text-decoration:underline; } .gm-btn { cursor:pointer; border:none; background:${THEME.panel}; color:${THEME.text}; border-radius:9999px; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-size:13px; transition:background .15s ease; } .gm-btn:hover { background:${THEME.hover}; } .gm-btn[disabled] { opacity:0.35; cursor:default; } .gm-chip { cursor:pointer; border:1px solid ${THEME.line}; background:transparent; color:${THEME.sub}; border-radius:9999px; padding:5px 13px; font-size:13px; transition:all .12s ease; } .gm-chip:hover { color:${THEME.text}; border-color:${THEME.sub}; } .gm-chip-on { background:${THEME.text}; color:#000; border-color:${THEME.text}; } .gm-spin { animation:gm-spin 1s linear infinite; } @keyframes gm-spin { to { transform:rotate(360deg); } } .gm-input::placeholder { color:${THEME.faint}; } /* Resting color is set inline on the (beats the sandbox's a:link rule); hover needs !important to override that inline color. */ .gm-media { display:inline-flex; transition:color .12s ease; } .gm-media-youtube:hover { color:${BRAND.youtube.color} !important; } .gm-media-spotify:hover { color:${BRAND.spotify.color} !important; } .gm-media-apple:hover { color:${BRAND.apple.color} !important; } `; const N = (v: unknown): number => (v != null ? Number(v) : 0); const formatViews = (v: unknown): string => Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(N(v)); const esc = (s: string): string => s.replace(/'/g, "''"); const rowsOf = (res: { data?: unknown }): any[] => (Array.isArray(res.data) ? res.data : []); const splitRoles = (v: unknown): string[] => { const raw = typeof v === "string" ? v.split(",") : Array.isArray(v) ? (v as string[]) : []; return raw.map((r) => String(r).trim()).filter(Boolean).sort( (a, b) => ROLE_ORDER.indexOf(a) - ROLE_ORDER.indexOf(b), ); }; // ── Cached server-side images (read_blob bypasses the sandbox img CSP) ────────── // read_blob fetches bytes server-side via DuckDB; we base64 them into data: URLs and cache per // URL across two layers: a module-level Map (hot, per-session) backed by localStorage (persists // across reloads). Grid thumbnails and detail heroes both key off the 300x300 variant (see // thumbUrl / useThumbImage / HeroArt), so an avatar fetched for the overview grid is reused for // free as a detail hero without a second read_blob. // The Dive sandbox MAY block Web Storage (opaque origin), so every localStorage access is // try/caught: if it throws, persistence disables itself and we fall back to the in-memory Map, // with no regression versus a Map-only cache. localStorage holds ~5MB, so entries are bounded and // the oldest are evicted on a quota error; the persisted set is the recently-viewed working // subset, not all images. const heroCache = new Map(); const mimeFor = (url: string): string => { const l = url.toLowerCase(); return l.includes(".png") ? "image/png" : l.includes(".webp") ? "image/webp" : "image/jpeg"; }; const dataUrlFor = (url: string, b64: string): string => `data:${mimeFor(url)};base64,${b64}`; // localStorage persistence layer, feature-detected once. All access is wrapped so a sandbox that // blocks storage (or a full quota) degrades to the in-memory Map instead of throwing. const LS_PREFIX = "gm_img:"; let lsEnabled: boolean | null = null; const lsOk = (): boolean => { if (lsEnabled === null) { try { const probe = `${LS_PREFIX}__probe__`; localStorage.setItem(probe, "1"); localStorage.removeItem(probe); lsEnabled = true; } catch { lsEnabled = false; } } return lsEnabled; }; const lsOurKeys = (): string[] => { const out: string[] = []; for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k && k.startsWith(LS_PREFIX)) out.push(k); } return out; }; const lsGet = (url: string): string | null => { if (!lsOk()) return null; try { return localStorage.getItem(LS_PREFIX + url); } catch { return null; } }; const lsSet = (url: string, dataUrl: string): void => { if (!lsOk()) return; const write = () => localStorage.setItem(LS_PREFIX + url, dataUrl); try { write(); } catch { // Quota exceeded: drop ~25% of our entries and retry once, then give up for this session. try { const keys = lsOurKeys(); keys.slice(0, Math.max(1, Math.floor(keys.length / 4))).forEach((k) => { try { localStorage.removeItem(k); } catch { /* ignore */ } }); write(); } catch { /* leave it to the in-memory Map for this session */ } } }; // Read order: in-memory Map first, then localStorage. A localStorage hit is promoted into the Map // by useHeroImage's effect on the next commit, so subsequent reads short-circuit on the Map. const imgFromCache = (url?: string | null): string | null => url ? heroCache.get(url) ?? lsGet(url) ?? null : null; // Genius CDN encodes size in the path (e.g. .1000x1000x1.jpg). SQUARE source images have a light // .300x300x1. thumbnail variant we can use; NON-square sources (e.g. .620x380x1.) do not, so we // keep their original URL rather than invent a missing variant (which 404s and errors the query). const thumbUrl = (url: string): string => { const m = url.match(/\.(\d+)x(\d+)x\d+\.(?:jpg|jpeg|png|webp|gif)(?:\?|$)/i); return m && m[1] === m[2] ? url.replace(/\.\d+x\d+x\d+\./, ".300x300x1.") : url; }; // Single-image loader, keyed by the exact URL passed in. Used by useThumbImage (and thus by // grid tiles and HeroArt) — pass the same URL variant everywhere to share one cache entry. function useHeroImage(url?: string | null): string | null { const cached = imgFromCache(url); const need = !!url && !cached; const q = need ? `SELECT base64(content) AS b64 FROM read_blob('${esc(url as string)}')` : `SELECT NULL AS b64 WHERE 1=0`; const rows = rowsOf(useSQLQuery(q)); const b64 = need && rows.length ? (rows[0]?.b64 as string | undefined) : undefined; const fresh = b64 && url ? dataUrlFor(url, b64) : null; // non-null only on a genuine read_blob result const dataUrl = cached || fresh; useEffect(() => { if (!url || !dataUrl) return; if (!heroCache.has(url)) heroCache.set(url, dataUrl); // warm the hot Map (incl. localStorage hits) if (fresh) lsSet(url, dataUrl); // persist only genuinely-fetched bytes, not cache echoes }, [url, dataUrl, fresh]); return dataUrl; } // Home-grid thumbnail: same single-image read_blob as the hero, but on the lighter 300x300 // variant. Per-image (not batched) so one missing variant only drops that thumbnail, not a row. function useThumbImage(url?: string | null): string | null { return useHeroImage(url ? thumbUrl(url) : null); } // Lazy-load gate: returns true once the element has scrolled near the viewport, so a tile only // fetches its image when (about to be) visible. Falls back to eager if IntersectionObserver is absent. function useInView(): [React.RefObject, boolean] { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { if (seen) return; const el = ref.current; if (!el) return; if (typeof IntersectionObserver === "undefined") { setSeen(true); return; } const obs = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) { setSeen(true); obs.disconnect(); } }, { rootMargin: "300px" }); obs.observe(el); return () => obs.disconnect(); }, [seen]); return [ref, seen]; } function Spinner() { return (

); } function Artwork({ src, color, name, shape = "square", size = 56, glyph, }: { src?: string | null; color?: string | null; name?: string | null; shape?: "square" | "circle"; size?: number; glyph?: "music"; }) { const [broken, setBroken] = useState(false); const radius = shape === "circle" ? "9999px" : "10px"; const initial = (name || "?").trim().charAt(0).toUpperCase() || "?"; const bg = color && /^#?[0-9a-fA-F]{3,8}$/.test(color) ? (color.startsWith("#") ? color : `#${color}`) : "linear-gradient(135deg,#3a3a3a,#222)"; const showImg = src && !broken; return (

setBroken(true)} /> ) : glyph === "music" ? ( ) : ( {initial} )}

); } function HeroArt(props: { url?: string | null; color?: string | null; name?: string | null; shape?: "square" | "circle"; size?: number; glyph?: "music" }) { // Use the 300x300 thumbnail variant, not the full-res original: the hero renders at <=150px // (300px on retina), so 300x300 is ample and it reuses the exact cache entry the grid tile // already fetched. Fetching the original here would miss the cache and re-run read_blob. const dataUrl = useThumbImage(props.url); return ; } function Verified({ on }: { on?: boolean }) { if (!on) return null; return ; } function RoleBadge({ role }: { role: string }) { const meta = ROLE_META[role] || { label: role, color: THEME.sub }; return ( {meta.label} ); } // Streaming links for a song. Renders only the providers present on the row; each icon is faint // and picks up its brand color on hover. stopPropagation stops a click from also opening the song. function MediaLinks({ song, size = 14 }: { song: any; size?: number }) { const links = BRAND_ORDER .map((key) => ({ key, url: song?.[BRAND[key].col] as string | undefined })) .filter((l) => typeof l.url === "string" && l.url.length > 0); if (!links.length) return null; return ( = 16 ? 12 : 8 }}> {links.map(({ key, url }) => ( e.stopPropagation()}> ))} ); } function SectionTitle({ children }: { children: React.ReactNode }) { return

{children}

; } function PersonCard({ name, imageUrl, isVerified, subtitle, onClick, useThumb }: { name: string; imageUrl?: string | null; isVerified?: boolean; subtitle: string; onClick: () => void; useThumb?: boolean; }) { const [ref, inView] = useInView(); const thumb = useThumbImage(useThumb && inView ? imageUrl : null); return (

{name}

{subtitle}

); } function TrackRow({ index, song, roles, rightText, useThumb, onOpenSong, onOpenArtist }: { index: number; song: any; roles?: string[]; rightText?: string; useThumb?: boolean; onOpenSong: (id: number) => void; onOpenArtist: (id: number) => void; }) { const artistId = N(song.primary_artist_id); const songId = N(song.song_id); const [ref, inView] = useInView(); const thumb = useThumbImage(useThumb && inView ? song.song_art_image_url : null); return (

{index}

songId && onOpenSong(songId)}>{song.title} {song.url ? ( ) : null} {roles && roles.map((r) => )}

artistId && onOpenArtist(artistId)}>{song.primary_artist_name || "Unknown"}

{rightText ?? formatViews(song.pageviews)}

); } function Shelf({ title, res, countKey, scoreLabel, onOpen }: { title: string; res: any; countKey: string; scoreLabel: string; onOpen: (id: number) => void; }) { const rows = rowsOf(res); return (

{title} {res.isLoading ? : (

{rows.map((r) => ( onOpen(N(r.artist_id))} /> ))}

)}

); } function SearchBar({ onOpenArtist, onOpenSong }: { onOpenArtist: (id: number) => void; onOpenSong: (id: number) => void }) { const [text, setText] = useState(""); const [term, setTerm] = useState(""); const [open, setOpen] = useState(false); useEffect(() => { const t = setTimeout(() => setTerm(text.trim()), 220); return () => clearTimeout(t); }, [text]); const active = term.length >= 2; const like = `'%${esc(term)}%'`; const artistCols = "artist_id, name, image_url, is_verified, total_distinct_songs, primary_song_count, producer_song_count, writer_song_count"; // Artists: keep the translations bot and apply no rank floor — any name is findable. const artistRes = useSQLQuery( active ? `SELECT ${artistCols} FROM ${DB}."artist_directory" WHERE name ILIKE ${like} ORDER BY headline_score DESC, total_distinct_songs DESC LIMIT 6` : `SELECT ${artistCols} FROM ${DB}."artist_directory" WHERE 1=0`, ); // Songs: one row per primary-credit song matching the title, most-played first. const songCols = "song_id, any_value(title) AS title, any_value(primary_artist_name) AS primary_artist_name, max(pageviews) AS pageviews, any_value(song_art_image_url) AS song_art_image_url, any_value(song_art_primary_color) AS song_art_primary_color"; const songRes = useSQLQuery( active ? `SELECT ${songCols} FROM ${DB}."song_credits" WHERE role = 'primary' AND title ILIKE ${like} GROUP BY song_id ORDER BY pageviews DESC LIMIT 6` : `SELECT ${songCols} FROM ${DB}."song_credits" WHERE 1=0 GROUP BY song_id`, ); const artists = rowsOf(artistRes); const songs = rowsOf(songRes); const topRole = (r: any): string => { const pairs: [string, number][] = [ ["primary songs", N(r.primary_song_count)], ["produced", N(r.producer_song_count)], ["written", N(r.writer_song_count)], ]; pairs.sort((a, b) => b[1] - a[1]); return pairs[0][1] > 0 ? `${pairs[0][1]} ${pairs[0][0]}` : `${N(r.total_distinct_songs)} songs`; }; const pick = (fn: () => void) => { fn(); setText(""); setTerm(""); setOpen(false); }; const showMenu = open && active && (artists.length > 0 || songs.length > 0); const GroupLabel = ({ children }: { children: React.ReactNode }) => (

{children}

); return (

{ setText(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} placeholder="Search artists and songs" style={{ background: "transparent", border: "none", outline: "none", color: THEME.text, fontSize: 14, width: "100%" }} />

{showMenu && (

{artists.length > 0 && Artists} {artists.map((r) => (

pick(() => onOpenArtist(N(r.artist_id)))}>

{r.name}

{topRole(r)}

))} {songs.length > 0 && Songs} {songs.map((r) => (

pick(() => onOpenSong(N(r.song_id)))}>

{r.title}

{r.primary_artist_name || "Unknown"}

))}

)}

); } function Kpi({ value, label, loading }: { value: unknown; label: string; loading: boolean }) { return (

{loading ?

{formatViews(value)}

}

{label}

); } function Overview({ onOpenArtist, onOpenSong }: { onOpenArtist: (id: number) => void; onOpenSong: (id: number) => void }) { const kpi = useSQLQuery(`SELECT (SELECT count(*) FROM ${DB}."artist_directory") AS people, (SELECT count(DISTINCT song_id) FROM ${DB}."song_credits") AS songs, (SELECT count(*) FROM ${DB}."song_credits") AS credits`); const songCols = "song_id, title, primary_artist_name, primary_artist_id, pageviews, url, song_art_image_url, song_art_primary_color, youtube_url, spotify_url, apple_music_url"; const dirCols = "artist_id, name, image_url, is_verified"; // Ranked lists exclude the translations bot; producers/writers ordered by total reach. const artists = useSQLQuery(`SELECT ${dirCols}, primary_song_count FROM ${DB}."artist_directory" WHERE primary_song_count >= 3 AND artist_id <> ${TRANSLATIONS_BOT} ORDER BY primary_rank_score DESC LIMIT 12`); const producers = useSQLQuery(`SELECT ${dirCols}, producer_song_count FROM ${DB}."artist_directory" WHERE producer_song_count >= 3 AND artist_id <> ${TRANSLATIONS_BOT} ORDER BY producer_rank_score DESC LIMIT 12`); const writers = useSQLQuery(`SELECT ${dirCols}, writer_song_count FROM ${DB}."artist_directory" WHERE writer_song_count >= 3 AND artist_id <> ${TRANSLATIONS_BOT} ORDER BY writer_rank_score DESC LIMIT 12`); const songs = useSQLQuery(`SELECT ${songCols} FROM ${DB}."song_credits" WHERE role = 'primary' ORDER BY pageviews DESC LIMIT 12`); // Songs richest in sampling/cover/remix connections — these lead to the fullest song pages. const connected = useSQLQuery(`SELECT sc.song_id, any_value(sc.title) AS title, any_value(sc.primary_artist_name) AS primary_artist_name, any_value(sc.primary_artist_id) AS primary_artist_id, max(sc.pageviews) AS pageviews, any_value(sc.url) AS url, any_value(sc.song_art_image_url) AS song_art_image_url, any_value(sc.song_art_primary_color) AS song_art_primary_color, any_value(sc.youtube_url) AS youtube_url, any_value(sc.spotify_url) AS spotify_url, any_value(sc.apple_music_url) AS apple_music_url, count(sr.related_song_id) AS connections FROM ${DB}."song_credits" sc JOIN ${DB}."song_relationships" sr ON sr.song_id = sc.song_id WHERE sc.role = 'primary' GROUP BY sc.song_id ORDER BY connections DESC LIMIT 12`); const k = rowsOf(kpi)[0] || {}; const songRows = rowsOf(songs); const connectedRows = rowsOf(connected); return (

Top Songs {songs.isLoading ? : (

{songRows.map((s, i) => )}

)}

Most Connected Songs {connected.isLoading ? : (

{connectedRows.map((s, i) => )}

)}

); } function ArtistDetail({ artistId, onOpenArtist, onOpenSong }: { artistId: number; onOpenArtist: (id: number) => void; onOpenSong: (id: number) => void }) { const [roleFilter, setRoleFilter] = useState("all"); const header = useSQLQuery(`SELECT * FROM ${DB}."artist_directory" WHERE artist_id = ${artistId}`); const songCols = "song_id, any_value(title) AS title, any_value(primary_artist_name) AS primary_artist_name, any_value(primary_artist_id) AS primary_artist_id, max(pageviews) AS pageviews, any_value(url) AS url, any_value(song_art_image_url) AS song_art_image_url, any_value(song_art_primary_color) AS song_art_primary_color, any_value(youtube_url) AS youtube_url, any_value(spotify_url) AS spotify_url, any_value(apple_music_url) AS apple_music_url"; const songsQuery = roleFilter === "all" ? `SELECT ${songCols}, string_agg(DISTINCT role, ',') AS roles FROM ${DB}."song_credits" WHERE artist_id = ${artistId} GROUP BY song_id ORDER BY pageviews DESC LIMIT 30` : `SELECT ${songCols}, '${roleFilter}' AS roles FROM ${DB}."song_credits" WHERE artist_id = ${artistId} AND role = '${roleFilter}' GROUP BY song_id ORDER BY pageviews DESC LIMIT 30`; const songs = useSQLQuery(songsQuery); const collabs = useSQLQuery( `WITH my_songs AS (SELECT DISTINCT song_id, pageviews FROM ${DB}."song_credits" WHERE artist_id = ${artistId}), collab AS (SELECT DISTINCT sc.artist_id AS collaborator_id, sc.song_id, m.pageviews FROM ${DB}."song_credits" sc JOIN my_songs m ON m.song_id = sc.song_id WHERE sc.artist_id <> ${artistId}), roles AS (SELECT sc.artist_id AS collaborator_id, string_agg(DISTINCT sc.role, ',') AS roles FROM ${DB}."song_credits" sc JOIN my_songs m ON m.song_id = sc.song_id WHERE sc.artist_id <> ${artistId} GROUP BY sc.artist_id) SELECT c.collaborator_id, any_value(coalesce(d.name, 'Unknown')) AS name, any_value(d.image_url) AS image_url, coalesce(any_value(d.is_verified), false) AS is_verified, count(*) AS shared_songs, sum(c.pageviews) AS combined_pageviews, any_value(r.roles) AS roles FROM collab c LEFT JOIN ${DB}."artist_directory" d ON d.artist_id = c.collaborator_id LEFT JOIN roles r ON r.collaborator_id = c.collaborator_id GROUP BY c.collaborator_id ORDER BY shared_songs DESC, combined_pageviews DESC LIMIT 18`, ); const a = rowsOf(header)[0]; const songRows = rowsOf(songs); const collabRows = rowsOf(collabs); if (header.isLoading) return ; if (!a) return

Artist not found.

; const allChips = ROLE_ORDER.map((r) => ({ role: r, count: N(a[`${r}_song_count`]) })).filter((c) => c.count > 0); return (

{N(a.total_distinct_songs)} songs · {formatViews(a.total_reach)} total plays

{a.name}

{allChips.map((c) => ( {ROLE_META[c.role].label} {c.count} ))} {a.url ? ( Genius profile ) : null}

Songs

{allChips.map((c) => ( ))}

{songs.isLoading ? : songRows.length === 0 ? (

No songs for this credit.

) : (

{songRows.map((s, i) => )}

)}

Collaborators {collabs.isLoading ? : collabRows.length === 0 ? (

No collaborators found.

) : (

{collabRows.map((c) => { const roleStr = splitRoles(c.roles).map((r) => ROLE_META[r]?.label || r).join(" / "); return ( onOpenArtist(N(c.collaborator_id))} /> ); })}

)}

); } function RelatedSongRow({ row, onOpenSong }: { row: any; onOpenSong: (id: number) => void }) { const inCatalog = !!row.in_catalog; const relId = N(row.related_song_id); return (

{inCatalog ? ( relId && onOpenSong(relId)}>{row.related_title} ) : ( {row.related_title} )} {row.related_url ? ( ) : null}

{row.related_artist_names || "Unknown"}

{inCatalog ? {formatViews(row.related_pageviews)} : null}

); } function SongDetail({ songId, onOpenArtist, onOpenSong }: { songId: number; onOpenArtist: (id: number) => void; onOpenSong: (id: number) => void }) { const header = useSQLQuery( `SELECT song_id, any_value(title) AS title, any_value(primary_artist_name) AS primary_artist_name, any_value(primary_artist_id) AS primary_artist_id, max(pageviews) AS pageviews, any_value(url) AS url, any_value(song_art_image_url) AS art, any_value(song_art_primary_color) AS color, any_value(release_year) AS release_year, any_value(youtube_url) AS youtube_url, any_value(spotify_url) AS spotify_url, any_value(apple_music_url) AS apple_music_url FROM ${DB}."song_credits" WHERE song_id = ${songId} GROUP BY song_id`, ); const credits = useSQLQuery( `SELECT sc.artist_id, any_value(coalesce(d.name, sc.credited_name)) AS name, any_value(d.image_url) AS image_url, coalesce(any_value(d.is_verified), false) AS is_verified, string_agg(DISTINCT sc.role, ',') AS roles FROM ${DB}."song_credits" sc LEFT JOIN ${DB}."artist_directory" d ON d.artist_id = sc.artist_id WHERE sc.song_id = ${songId} GROUP BY sc.artist_id`, ); const rels = useSQLQuery( `WITH r AS (SELECT sr.rel_type, sr.related_song_id, sr.related_title, sr.related_artist_names, sr.related_url, sr.related_thumb, c.pageviews AS related_pageviews, (c.song_id IS NOT NULL) AS in_catalog FROM ${DB}."song_relationships" sr LEFT JOIN (SELECT DISTINCT song_id, pageviews FROM ${DB}."song_credits" WHERE role='primary') c ON c.song_id = sr.related_song_id WHERE sr.song_id = ${songId}), ranked AS (SELECT *, row_number() OVER (PARTITION BY rel_type ORDER BY in_catalog DESC, coalesce(related_pageviews,0) DESC) AS rn FROM r) SELECT rel_type, related_song_id, related_title, related_artist_names, related_url, related_thumb, related_pageviews, in_catalog FROM ranked WHERE rn <= 10 ORDER BY rel_type, rn`, ); const s = rowsOf(header)[0]; if (header.isLoading) return ; if (!s) return

Song not found.

; const creditRows = rowsOf(credits).map((c) => ({ ...c, roleList: splitRoles(c.roles) })) .sort((a, b) => ROLE_ORDER.indexOf(a.roleList[0] || "writer") - ROLE_ORDER.indexOf(b.roleList[0] || "writer")); const relRows = rowsOf(rels); const relGroups = REL_ORDER.map((t) => ({ type: t, rows: relRows.filter((r) => r.rel_type === t) })).filter((g) => g.rows.length > 0); const artistId = N(s.primary_artist_id); return (

Song{s.release_year ? ` · ${N(s.release_year)}` : ""} · {formatViews(s.pageviews)} plays

{s.title}

artistId && onOpenArtist(artistId)}>{s.primary_artist_name} {s.url ? ( Lyrics on Genius ) : null}

Credits {credits.isLoading ? : creditRows.length === 0 ?

No credits found.

: (

{creditRows.map((c) => ( ROLE_META[r]?.label || r).join(" / ")} onClick={() => onOpenArtist(N(c.artist_id))} /> ))}

)}

Connections {rels.isLoading ? : relGroups.length === 0 ? (

No sampling, cover, or remix connections found.

) : (

{relGroups.map((g) => (

{REL_LABELS[g.type] || g.type}

{g.rows.map((r) => )}

))}

)}

); } type NavNode = { t: "a" | "s"; id: number }; export default function GeniusMusicExplorer() { const [stack, setStack] = useDiveState("nav", []); const s: NavNode[] = Array.isArray(stack) ? stack : []; const current = s.length ? s[s.length - 1] : null; const openArtist = (id: number) => { if (id != null && !Number.isNaN(id)) setStack([...s, { t: "a", id: Number(id) }]); }; const openSong = (id: number) => { if (id != null && !Number.isNaN(id)) setStack([...s, { t: "s", id: Number(id) }]); }; const back = () => setStack(s.slice(0, -1)); const home = () => setStack([]); const key = current ? `${current.t}-${current.id}` : "home"; return (

{current == null ? ( ) : current.t === "a" ? ( ) : ( )}

); }

Genius Music Explorer

Comments