[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","test_account_001","name","discovery-radar","path","frontend/components/ConstellationView.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/test_account_001/discovery-radar/code/frontend/components/ConstellationView.tsx","extension","id","4f1407fe-6747-4b36-94d1-3b9f1a97a4a0","ConstellationView.tsx","fileId","9ade0de6-9e51-11f1-b8c2-1607ee4eb77e","parentId","01a02a62-92f6-771d-907a-a213fe10e164","branchId","dc1f9fe4-aa8c-400d-87f3-9d22e6847153","branchVersion",84,"latest",true,"createdAt",["D",1787421406310],"version",7,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { RadarChart } from \"./RadarChart.tsx\";\n\ninterface Axis {\n label: string;\n value: number;\n}\n\ninterface TrackInfo {\n name: string;\n uri: string;\n previewUrl: string | null;\n}\n\ninterface Pick {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n previewUrl: string | null;\n match: number;\n radar: Axis[];\n tracks: TrackInfo[];\n}\n\nconst PALETTE = [\n \"#60a5fa\", \"#34d399\", \"#f472b6\", \"#fbbf24\",\n \"#a78bfa\", \"#f87171\", \"#22d3ee\", \"#fb923c\",\n];\n\nconst GENRE_RING = 430; // world radius where genre labels live\nconst MIN_SCALE = 0.12;\nconst MAX_SCALE = 6;\n\nfunction trackUrl(uri: string): string {\n const id = uri.split(\":\")[2] ?? uri;\n return `https://open.spotify.com/track/${id}`;\n}\n\nexport function ConstellationView({\n profile,\n picks,\n height = 580,\n}: {\n profile: Axis[];\n picks: Pick[];\n height?: number;\n}) {\n const wrapRef = useRef(null);\n const canvasRef = useRef(null);\n const cam = useRef({ scale: 1, vx: 0, vy: 0 });\n const drag = useRef<{ x: number; y: number; moved: boolean } | null>(null);\n const [hover, setHover] = useState<{ x: number; y: number; name: string } | null>(null);\n const [selected, setSelected] = useState(null);\n\n // Emergent layout: each artist sits at the vector-sum of its genres'\n // directions, so artists who share genres cluster together — proximity in the\n // sky actually means similarity in sound (not a re-painted radar).\n const nodes = useMemo(() => {\n const n = Math.max(1, profile.length);\n const dirs = profile.map((_, gi) => {\n const an = (gi / n) * Math.PI * 2 - Math.PI / 2;\n return { x: Math.cos(an), y: Math.sin(an) };\n });\n const placed = picks.map((pick) => {\n let x = 0, y = 0, count = 0, domGi = 0, domVal = -1;\n for (const g of pick.genres ?? []) {\n const gi = profile.findIndex((a) => a.label === g);\n if (gi < 0) continue;\n x += dirs[gi].x;\n y += dirs[gi].y;\n count++;\n if (profile[gi].value > domVal) { domVal = profile[gi].value; domGi = gi; }\n }\n if (count === 0) {\n const best = pick.radar.reduce((m, a, j) => (a.value > m.val ? { j, val: a.value } : m), { j: -1, val: 0 });\n domGi = best.j >= 0 ? best.j : 0;\n x = dirs[domGi].x;\n y = dirs[domGi].y;\n count = 1;\n }\n return { x, y, domGi, pick };\n });\n const SCALE = 84;\n return placed.map((p) => ({\n x: p.x * SCALE + ((p.pick.id.charCodeAt(0) % 21) - 10),\n y: p.y * SCALE + ((p.pick.id.charCodeAt(1) % 21) - 10),\n r: 4 + (p.pick.popularity ?? 0) / 100 * 8,\n gi: p.domGi,\n pick: p.pick,\n }));\n }, [picks, profile]);\n\n const draw = () => {\n const canvas = canvasRef.current;\n const wrap = wrapRef.current;\n if (!canvas || !wrap) return;\n const dpr = window.devicePixelRatio || 1;\n const W = wrap.clientWidth;\n const H = height;\n if (canvas.width !== Math.round(W * dpr) || canvas.height !== Math.round(H * dpr)) {\n canvas.width = Math.round(W * dpr);\n canvas.height = Math.round(H * dpr);\n }\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const { scale, vx, vy } = cam.current;\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n // background\n ctx.fillStyle = \"#0b0f14\";\n ctx.fillRect(0, 0, W, H);\n\n const cx = W / 2;\n const cy = H / 2;\n ctx.translate(cx, cy);\n ctx.scale(scale, scale);\n ctx.translate(-vx, -vy);\n\n // soft glow around the center\n const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 120 / scale);\n grad.addColorStop(0, \"rgba(52,211,153,0.12)\");\n grad.addColorStop(1, \"rgba(52,211,153,0)\");\n ctx.fillStyle = grad;\n ctx.fillRect(-200 / scale, -200 / scale, 400 / scale, 400 / scale);\n\n // edges from you to each artist\n ctx.lineWidth = 1 / scale;\n for (const node of nodes) {\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.lineTo(node.x, node.y);\n ctx.strokeStyle = `hsla(${(node.gi / Math.max(1, profile.length)) * 360}, 80%, 60%, 0.12)`;\n ctx.stroke();\n }\n\n // \"you\" at the center\n ctx.beginPath();\n ctx.arc(0, 0, 22, 0, Math.PI * 2);\n ctx.fillStyle = \"#34d399\";\n ctx.fill();\n ctx.strokeStyle = \"rgba(52,211,153,0.5)\";\n ctx.lineWidth = 3 / scale;\n ctx.stroke();\n if (scale > 1.2) {\n ctx.fillStyle = \"#a7f3d0\";\n ctx.font = `${12 / scale}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"bottom\";\n ctx.fillText(\"you\", 0, -26 / scale);\n }\n\n // artists as stars; labels appear once zoomed in enough\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n for (const node of nodes) {\n const color = PALETTE[node.gi % PALETTE.length];\n const glow = 1 + 0.6 * node.pick.match;\n ctx.beginPath();\n ctx.arc(node.x, node.y, node.r * glow, 0, Math.PI * 2);\n ctx.fillStyle = color;\n ctx.fill();\n if (scale > 1.15) {\n ctx.fillStyle = \"rgba(226,232,240,0.92)\";\n ctx.font = `${11 / scale}px sans-serif`;\n ctx.fillText(node.pick.name, node.x, node.y - node.r - (8 / scale));\n }\n }\n };\n\n // fit the whole constellation on mount and on data change\n const fitIn = (W: number, H: number, maxR: number) => {\n cam.current.scale = Math.max(MIN_SCALE, Math.min((Math.min(W, H) / 2 - 70) / maxR, 1.5));\n cam.current.vx = 0;\n cam.current.vy = 0;\n };\n useEffect(() => {\n const wrap = wrapRef.current;\n if (!wrap) return;\n const maxR = Math.max(80, ...nodes.map((n) => Math.hypot(n.x, n.y)));\n fitIn(wrap.clientWidth, height, maxR);\n draw();\n }, [nodes, height]);\n\n useEffect(() => {\n window.addEventListener(\"resize\", draw);\n return () => window.removeEventListener(\"resize\", draw);\n }, []);\n\n const screenToWorld = (px: number, py: number) => {\n const wrap = wrapRef.current;\n if (!wrap) return { x: 0, y: 0 };\n const { scale, vx, vy } = cam.current;\n return {\n x: vx + (px - wrap.clientWidth / 2) / scale,\n y: vy + (py - height / 2) / scale,\n };\n };\n\n const hit = (px: number, py: number) => {\n const w = screenToWorld(px, py);\n let best: { dist: number; node: typeof nodes[number] } | null = null;\n for (const node of nodes) {\n const d = Math.hypot(node.x - w.x, node.y - w.y);\n const hitR = node.r + 6 / cam.current.scale;\n if (d <= hitR && (!best || d < best.dist)) best = { dist: d, node };\n }\n return best?.node ?? null;\n };\n\n const onPointerDown = (e: React.PointerEvent) => {\n canvasRef.current?.setPointerCapture(e.pointerId);\n drag.current = { x: e.clientX, y: e.clientY, moved: false };\n };\n const onPointerMove = (e: React.PointerEvent) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const px = e.clientX - rect.left;\n const py = e.clientY - rect.top;\n if (drag.current) {\n const dx = e.clientX - drag.current.x;\n const dy = e.clientY - drag.current.y;\n if (Math.abs(dx) + Math.abs(dy) > 3) drag.current.moved = true;\n cam.current.vx -= dx / cam.current.scale;\n cam.current.vy -= dy / cam.current.scale;\n drag.current.x = e.clientX;\n drag.current.y = e.clientY;\n draw();\n return;\n }\n const node = hit(px, py);\n setHover(node ? { x: px, y: py, name: node.pick.name } : null);\n if (node) canvas.style.cursor = \"pointer\";\n else canvas.style.cursor = \"grab\";\n };\n const onPointerUp = (e: React.PointerEvent) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n if (drag.current && !drag.current.moved) {\n const rect = canvas.getBoundingClientRect();\n const node = hit(e.clientX - rect.left, e.clientY - rect.top);\n setSelected(node ? node.pick : null);\n }\n drag.current = null;\n canvas.releasePointerCapture(e.pointerId);\n };\n const onWheel = (e: React.WheelEvent) => {\n e.preventDefault();\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const px = e.clientX - rect.left;\n const py = e.clientY - rect.top;\n const factor = Math.exp(-e.deltaY * 0.0012);\n const next = Math.max(MIN_SCALE, Math.min(MAX_SCALE, cam.current.scale * factor));\n const g = next / cam.current.scale;\n const w = screenToWorld(px, py);\n cam.current.scale = next;\n cam.current.vx = w.x - (px - canvas.clientWidth / 2) / next;\n cam.current.vy = w.y - (py - height / 2) / next;\n draw();\n };\n\n const zoomBy = (f: number) => {\n cam.current.scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, cam.current.scale * f));\n draw();\n };\n\n const resetView = () => {\n const wrap = wrapRef.current;\n if (!wrap) return;\n const maxR = Math.max(80, ...nodes.map((n) => Math.hypot(n.x, n.y)));\n fitIn(wrap.clientWidth, height, maxR);\n draw();\n };\n\n const img = selected?.images?.[0]?.url;\n\n return (\n

\n \n \n

\n \n \n \n

drag to pan · scroll to zoom · click a star

\n {hover && (\n \n {hover.name}\n

\n )}\n \n\n

\n \n \n you\n \n {profile.map((a, gi) => (\n \n \n {a.label}\n \n ))}\n

\n\n {selected && (\n

\n {img && $\"\"$ }\n

{selected.name}

\n {Math.round(selected.match * 100)}% match · Popularity {selected.popularity}\n

\n \n ♪ {t.name}\n \n

\n \n

\n )}\n \n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","f8c773d7-7a4a-4d5b-84e7-ccf2b3929d80",["D",1787417498284],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Spotify discovery with taste radar + weekly playlist refresh","imageUrl","userId","e6d51557-2988-4ce3-bf61-63d827903a6c","pinnedFileId","01a02a62-92f6-771d-907a-be2483e744c9","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","3ebf4d50-fe40-465b-915c-bd543c8a8608","tursoName","f8c773d77a4a4d5b84e7ccf2b3929d80","tursoHostname","f8c773d77a4a4d5b84e7ccf2b3929d80-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789502486629],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_103":-5,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",90,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJabHpKOGNWSmhqcWduM3VVV0xTUGlicVprayJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":94,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]