import { useSQLQuery } from "@motherduck/react-sql-query"; import { Loader2 } from "lucide-react"; import { useState, useRef, useEffect, useCallback, useMemo } from "react"; import * as d3 from "d3"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/my_sample_data/8476c365-d7ca-469d-8999-2dde9f77fa74', alias: 'my_sample_data' } ]; const N = (v: unknown): number => (v != null ? Number(v) : 0); interface VisibleStar { x: number; y: number; mag: number; bp_rp: number; altDeg: number; azDeg: number; distLy: number } interface City { name: string; cc: string; lat: number; lon: number; tz: string } interface ConstellationSegment { name: string; abbr: string; ra1: number; dec1: number; ra2: number; dec2: number } interface ProjectedSegment { name: string; x1: number; y1: number; x2: number; y2: number } const ALPHA_NGP = 192.85948, DELTA_NGP = 27.12825, L_NCP = 122.93192; const MONTH_NAMES = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // ── Astronomy ────────────────────────────────────────────────────── function lstDeg(y: number, m: number, d: number, h: number, lon: number): number { const dd = (Date.UTC(y, m-1, d, Math.floor(h), (h%1)*60, 0) - Date.UTC(2000,0,1,12,0,0)) / 86_400_000; let gmst = (280.46061837 + 360.98564736629 * dd) % 360; if (gmst < 0) gmst += 360; let lst = (gmst + lon) % 360; if (lst < 0) lst += 360; return lst; } function starColor(bp_rp: number): string { const t = Math.max(0, Math.min(1, (bp_rp + 0.5) / 4.5)); if (t < 0.25) { const s = t/0.25; return `rgb(${Math.round(140+115*s)},${Math.round(160+95*s)},255)`; } if (t < 0.5) { const s = (t-0.25)/0.25; return `rgb(255,${Math.round(255-15*s)},${Math.round(255-60*s)})`; } const s = (t-0.5)/0.5; return `rgb(255,${Math.round(240-140*s)},${Math.round(195-155*s)})`; } function starRadius(mag: number): number { return Math.max(0.2, 3.2 * Math.pow(10, -(mag-4)/7)); } function buildEquatorialQuery(): string { return ` SELECT degrees(asin(sin(radians(b))*sin(radians(${DELTA_NGP}))+cos(radians(b))*cos(radians(${DELTA_NGP}))*sin(radians(l)-radians(${L_NCP})))) AS dec_deg, ((degrees(radians(${ALPHA_NGP})+atan2(cos(radians(b))*cos(radians(l)-radians(${L_NCP})),sin(radians(b))*cos(radians(${DELTA_NGP}))-cos(radians(b))*sin(radians(${DELTA_NGP}))*sin(radians(l)-radians(${L_NCP}))))%360)+360)%360 AS ra_deg, phot_g_mean_mag AS mag, bp_rp, parallax FROM "my_sample_data"."sky_atlas"."gaia_stars" WHERE phot_g_mean_mag<16 AND parallax BETWEEN -5 AND 20 AND bp_rp IS NOT NULL ORDER BY mag ASC`; } interface StarCatalog { sinDec: Float64Array; cosDec: Float64Array; raRad: Float64Array; mag: Float32Array; bp_rp: Float32Array; parallax: Float32Array; count: number; } function buildCatalog(data: Record[]): StarCatalog { const n = data.length; const sinDec = new Float64Array(n); const cosDec = new Float64Array(n); const raRad = new Float64Array(n); const mag = new Float32Array(n); const bp_rp = new Float32Array(n); const parallax = new Float32Array(n); const deg2rad = Math.PI / 180; for (let i = 0; i < n; i++) { const d = N(data[i].dec_deg) * deg2rad; sinDec[i] = Math.sin(d); cosDec[i] = Math.cos(d); raRad[i] = N(data[i].ra_deg) * deg2rad; mag[i] = N(data[i].mag); bp_rp[i] = N(data[i].bp_rp); parallax[i] = N(data[i].parallax); } return { sinDec, cosDec, raRad, mag, bp_rp, parallax, count: n }; } function projectStars(catalog: StarCatalog, latDeg: number, lstDeg: number): VisibleStar[] { const { sinDec, cosDec, raRad, mag, bp_rp, parallax, count } = catalog; const latRad = latDeg * Math.PI / 180; const lstRad = lstDeg * Math.PI / 180; const sinLat = Math.sin(latRad); const cosLat = Math.cos(latRad); const rad2deg = 180 / Math.PI; const result: VisibleStar[] = []; for (let i = 0; i < count; i++) { const ha = lstRad - raRad[i]; const sinHa = Math.sin(ha); const cosHa = Math.cos(ha); const altSin = sinLat * sinDec[i] + cosLat * cosDec[i] * cosHa; if (altSin <= 0) continue; const altRad = Math.asin(altSin); const azRad = Math.atan2(sinHa, cosHa * sinLat - (sinDec[i] / cosDec[i]) * cosLat); const r = Math.tan((Math.PI / 2 - altRad) / 2); const distLy = parallax[i] > 0.1 ? (1000 / parallax[i]) * 3.2616 : -1; result.push({ x: r * Math.sin(azRad), y: -r * Math.cos(azRad), mag: mag[i], bp_rp: bp_rp[i], altDeg: altRad * rad2deg, azDeg: ((azRad * rad2deg) + 360) % 360, distLy, }); } return result; } function countVisible(catalog: StarCatalog, latDeg: number, lstDeg: number): number { const { sinDec, cosDec, raRad, count } = catalog; const sinLat = Math.sin(latDeg * Math.PI / 180); const cosLat = Math.cos(latDeg * Math.PI / 180); const lstRad = lstDeg * Math.PI / 180; let n = 0; for (let i = 0; i < count; i++) { if (sinLat * sinDec[i] + cosLat * cosDec[i] * Math.cos(lstRad - raRad[i]) > 0) n++; } return n; } // ── Hooks ────────────────────────────────────────────────────────── function useYearlyCounts(catalog: StarCatalog | null, lat: number, lon: number, year: number, hour: number) { return useMemo(() => { if (!catalog) return []; const points: { doy: number; count: number }[] = []; for (let doy = 1; doy <= 365; doy += 5) { const { m, d } = dayOfYearToDate(doy, year); const lst = lstDeg(year, m, d, hour, lon); points.push({ doy, count: countVisible(catalog, lat, lst) }); } return points; }, [catalog, lat, lon, year, hour]); } function useStarData(lat: number, lon: number, y: number, m: number, d: number, h: number) { const sql = useMemo(() => buildEquatorialQuery(), []); const { data, isLoading: isFetching } = useSQLQuery(sql); const catalog = useMemo(() => { if (!data || !Array.isArray(data) || data.length === 0) return null; return buildCatalog(data); }, [data]); const lst = useMemo(() => lstDeg(y, m, d, h, lon), [y, m, d, h, lon]); const stars = useMemo(() => { if (!catalog) return []; return projectStars(catalog, lat, lst); }, [catalog, lat, lst]); return { stars, isLoading: isFetching, lst, starCount: stars.length, catalog }; } function useCities(): City[] { const { data } = useSQLQuery(`SELECT name, cc, lat, lon, tz FROM "my_sample_data"."sky_atlas"."cities"`); return useMemo(() => { if (!data || !Array.isArray(data)) return []; return data.map(r => ({ name: String(r.name), cc: String(r.cc), lat: N(r.lat), lon: N(r.lon), tz: String(r.tz), })); }, [data]); } function useLandGeo(): any[] { const { data } = useSQLQuery(`SELECT geojson FROM "my_sample_data"."sky_atlas"."land_geojson" WHERE id = 1`); return useMemo(() => { const rows = Array.isArray(data) ? data : []; if (rows.length === 0) return []; try { return (JSON.parse(rows[0].geojson as string) as any).features as any[]; } catch { return []; } }, [data]); } function useConstellations(): ConstellationSegment[] { const { data } = useSQLQuery(`SELECT name, abbr, star1_ra AS ra1, star1_dec AS dec1, star2_ra AS ra2, star2_dec AS dec2 FROM "my_sample_data"."sky_atlas"."constellations"`); return useMemo(() => { if (!data || !Array.isArray(data)) return []; return data.map(r => ({ name: String(r.name), abbr: String(r.abbr), ra1: N(r.ra1), dec1: N(r.dec1), ra2: N(r.ra2), dec2: N(r.dec2), })); }, [data]); } function projectPoint(raDeg: number, decDeg: number, latDeg: number, lstDeg: number): { x: number; y: number } | null { const deg2rad = Math.PI / 180; const latRad = latDeg * deg2rad, lstRad = lstDeg * deg2rad; const decRad = decDeg * deg2rad, raRad = raDeg * deg2rad; const sinLat = Math.sin(latRad), cosLat = Math.cos(latRad); const ha = lstRad - raRad; const altSin = sinLat * Math.sin(decRad) + cosLat * Math.cos(decRad) * Math.cos(ha); if (altSin <= 0) return null; const altRad = Math.asin(altSin); const azRad = Math.atan2(Math.sin(ha), Math.cos(ha) * sinLat - Math.tan(decRad) * cosLat); const r = Math.tan((Math.PI / 2 - altRad) / 2); return { x: r * Math.sin(azRad), y: -r * Math.cos(azRad) }; } function projectConstellations(segments: ConstellationSegment[], latDeg: number, lst: number): ProjectedSegment[] { const result: ProjectedSegment[] = []; for (const seg of segments) { const p1 = projectPoint(seg.ra1, seg.dec1, latDeg, lst); const p2 = projectPoint(seg.ra2, seg.dec2, latDeg, lst); if (p1 && p2) result.push({ name: seg.name, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }); } return result; } // ── Globe ────────────────────────────────────────────────────────── function GlobePanel({ selectedCity, onCityClick, size, landFeatures, cities }: { selectedCity: City; onCityClick: (i: number) => void; size: number; landFeatures: any[]; cities: City[]; }) { const canvasRef = useRef(null); const projRef = useRef(null); const rotRef = useRef<[number,number,number]>([-selectedCity.lon, -selectedCity.lat, 0]); const [tooltip, setTooltip] = useState<{x:number;y:number;name:string}|null>(null); useEffect(() => { rotRef.current=[-selectedCity.lon,-selectedCity.lat,0]; if(projRef.current){projRef.current.rotate(rotRef.current);draw();} }, [selectedCity]); useEffect(() => { const s=size/2-6; projRef.current=d3.geoOrthographic().scale(s).translate([size/2,size/2]).clipAngle(90).rotate(rotRef.current); draw(); }, [size, landFeatures]); const draw = useCallback(() => { const cv=canvasRef.current, proj=projRef.current; if(!cv||!proj) return; const ctx=cv.getContext("2d")!; const dpr=window.devicePixelRatio||1; if(cv.width!==size*dpr){cv.width=size*dpr;cv.height=size*dpr;} ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,size,size); const sc=proj.scale(), path=d3.geoPath(proj,ctx); const ag=ctx.createRadialGradient(size/2,size/2,sc*0.85,size/2,size/2,sc*1.12); ag.addColorStop(0,"rgba(60,120,200,0)"); ag.addColorStop(0.5,"rgba(60,120,200,0.08)"); ag.addColorStop(1,"rgba(60,120,200,0)"); ctx.fillStyle=ag; ctx.fillRect(0,0,size,size); ctx.beginPath(); path({type:"Sphere"}); const og=ctx.createRadialGradient(size*0.4,size*0.35,0,size/2,size/2,sc); og.addColorStop(0,"#0e1e38"); og.addColorStop(1,"#081428"); ctx.fillStyle=og; ctx.fill(); ctx.strokeStyle="rgba(80,130,200,0.4)"; ctx.lineWidth=1.5; ctx.stroke(); for(const f of landFeatures){ctx.beginPath();path(f);ctx.fillStyle="rgba(45,80,120,0.4)";ctx.fill();ctx.strokeStyle="rgba(90,140,210,0.2)";ctx.lineWidth=0.4;ctx.stroke();} ctx.beginPath(); path(d3.geoGraticule10()); ctx.strokeStyle="rgba(80,130,200,0.06)"; ctx.lineWidth=0.3; ctx.stroke(); const center=proj.invert!([size/2,size/2]) as [number,number]; for(let i=0;iMath.PI/2) continue; if(c.name===selectedCity.name){ const mg=ctx.createRadialGradient(pt[0],pt[1],0,pt[0],pt[1],10); mg.addColorStop(0,"rgba(255,180,60,0.35)");mg.addColorStop(1,"rgba(255,180,60,0)"); ctx.fillStyle=mg;ctx.fillRect(pt[0]-10,pt[1]-10,20,20); ctx.beginPath();ctx.arc(pt[0],pt[1],4,0,Math.PI*2);ctx.strokeStyle="rgba(255,180,60,0.8)";ctx.lineWidth=1.2;ctx.stroke(); ctx.beginPath();ctx.arc(pt[0],pt[1],2,0,Math.PI*2);ctx.fillStyle="#ffb43c";ctx.fill(); } else { ctx.beginPath();ctx.arc(pt[0],pt[1],1.5,0,Math.PI*2);ctx.fillStyle="rgba(140,180,230,0.45)";ctx.fill(); } } }, [size, landFeatures, selectedCity, cities]); useEffect(() => { const cv=canvasRef.current, proj=projRef.current; if(!cv||!proj) return; let r0:[number,number,number]=[0,0,0],x0=0,y0=0,raf=0; const drag=d3.drag() .on("start",e=>{r0=proj.rotate()as[number,number,number];x0=e.x;y0=e.y;}) .on("drag",e=>{const rot:[number,number,number]=[r0[0]+(e.x-x0)*0.4,Math.max(-90,Math.min(90,r0[1]-(e.y-y0)*0.4)),r0[2]];rotRef.current=rot;proj.rotate(rot);cancelAnimationFrame(raf);raf=requestAnimationFrame(draw);}); d3.select(cv).call(drag); return ()=>{d3.select(cv).on(".drag",null);}; }, [size, draw]); const handleClick = useCallback((e: React.MouseEvent) => { const proj=projRef.current; if(!proj) return; const rect=canvasRef.current!.getBoundingClientRect(); const zf=rect.width/size; const mx=(e.clientX-rect.left)/zf, my=(e.clientY-rect.top)/zf; const center=proj.invert!([size/2,size/2])as[number,number]; let best=-1,bestD=15; for(let i=0;iMath.PI/2)continue;const d=Math.sqrt((pt[0]-mx)**2+(pt[1]-my)**2);if(d=0)onCityClick(best); }, [size, onCityClick, cities]); const handleMove = useCallback((e: React.MouseEvent) => { const proj=projRef.current, cv=canvasRef.current; if(!proj||!cv) return; const rect=cv.getBoundingClientRect(); const zf=rect.width/size; const mx=(e.clientX-rect.left)/zf, my=(e.clientY-rect.top)/zf; const center=proj.invert!([size/2,size/2])as[number,number]; let name="",bestD=15; for(const c of cities){const pt=proj([c.lon,c.lat]);if(!pt||d3.geoDistance([c.lon,c.lat],center)>Math.PI/2)continue;const d=Math.sqrt((pt[0]-mx)**2+(pt[1]-my)**2);if(d

Night Sky Atlas

Night Sky Atlas

Comments