import { useState, useEffect, useRef, useMemo } from "react"; import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query"; import { Baby, ToyBrick, Bike, Flame, Drama, Plus, Minus, Maximize2, Minimize2, Layers, Search, X, SlidersHorizontal, List as ListIcon, Map as MapIcon, Loader2, AlertCircle, Ban, Clock, Zap, ChevronDown, ChevronUp, CloudRain, CloudSun, CloudDrizzle, CloudSnow, CloudLightning, Cloud, Sun, Play, Pause, CalendarDays, CalendarPlus, ChevronLeft, ChevronRight, Trash2, Check, Hourglass, Footprints, SquareParking } from "lucide-react"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/disney_orlando/9bbaf6fe-814b-4ea6-ba0f-38966d33e620', alias: 'disney_orlando' } ]; const N = (v) => (v != null ? Number(v) : 0); const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const DIVE_URL = "https://app.motherduck.com/dives/walt-disney-world-orlando-live-ride-planner-11155c76-b2bd-47f1-a218-150997f2f208"; const BASEMAPS = { satellite: { label: "Satellite" }, street: { label: "Street" } }; const TILE_ZS = [13, 14, 15, 16]; // Tile geometry + over-zoom guard. The finest tiles in the DB are z16 (256px // native). Letting tf.k grow without bound upscales a single z16 tile far past // its native size; once the painted exceeds the browser's max raster / // GPU-texture dimension (~8192px on most backends) the browser clamps that // dimension non-proportionally, so the map goes skinny (horizontally squished) // and leaves uncovered/white area. We cap zoom so the finest tile never paints // larger than MAX_TILE_UPSCALE x its native size (and never past MAX_TILE_PX), // which keeps zoom-in natural while staying well under any raster limit. const FINEST_Z = 16; // deepest tile level available in the DB const TILE_PX = 256; // native pixel size of one tile const MAX_TILE_UPSCALE = 2; // allow the finest tile to grow up to 2x native const MAX_TILE_PX = 4096; // hard ceiling on any painted tile dimension (< GPU limit even at DPR 2) const KMIN = 0.35; // lower zoom clamp (unchanged) // Highest safe tf.k for a given projection scale P (px per merc-unit). Caps so a // z16 tile paints at most MAX_TILE_UPSCALE x native AND never exceeds MAX_TILE_PX. const maxKForProj = (P) => { if (!P || !isFinite(P) || P <= 0) return 22; // pre-projection fallback (old default) const nativeFinest = P / Math.pow(2, FINEST_Z); // painted px of a z16 tile at k=1 const kUpscale = (MAX_TILE_UPSCALE * TILE_PX) / nativeFinest; // k where z16 hits 2x native const kHardPx = MAX_TILE_PX / nativeFinest; // k where z16 hits MAX_TILE_PX return Math.max(KMIN, Math.min(kUpscale, kHardPx)); }; // ---- IndexedDB persistent tile cache (survives refreshes; falls back silently // if the sandbox blocks storage). One record per `${style}/${z}` holding the // full array of {x,y,img} for that zoom, mirroring the in-memory cache shape. ---- const IDB_DB = "wdw_tiles_v1"; const IDB_STORE = "tiles"; function idbOpen() { return new Promise((resolve) => { let done = false; const finish = (v) => { if (!done) { done = true; resolve(v); } }; try { if (typeof indexedDB === "undefined" || !indexedDB) return finish(null); const req = indexedDB.open(IDB_DB, 1); req.onupgradeneeded = () => { const db = req.result; if (!db.objectStoreNames.contains(IDB_STORE)) db.createObjectStore(IDB_STORE); }; req.onsuccess = () => finish(req.result); req.onerror = () => finish(null); req.onblocked = () => finish(null); setTimeout(() => finish(null), 1500); } catch (_) { finish(null); } }); } function idbGet(db, key) { return new Promise((resolve) => { if (!db) return resolve(null); try { const r = db.transaction(IDB_STORE, "readonly").objectStore(IDB_STORE).get(key); r.onsuccess = () => resolve(r.result != null ? r.result : null); r.onerror = () => resolve(null); } catch (_) { resolve(null); } }); } function idbPut(db, key, value) { try { if (!db) return; db.transaction(IDB_STORE, "readwrite").objectStore(IDB_STORE).put(value, key); } catch (_) {} } // ---- Weather: RainViewer radar tiles + Open-Meteo forecast, both pulled via // MotherDuck httpfs in the background. Radar tiles share the z13 footprint of the // basemap so they reuse the same Web-Mercator projection math. ---- const RADAR_HOST = "https://mesonet.agron.iastate.edu"; const RADAR_Z = 11; // IEM single-site NEXRAD/TDWR tiles. z11 (~75 m/px) over-samples the ~150-250 m radar data, so it keeps full native detail with a small tile grid; the canvas upscales as the user zooms in. const RADAR_SOURCES = { MCO: { site: "MCO", prod: "TZL", label: "TDWR", res: "~150 m", type: "obs" }, MLB: { site: "MLB", prod: "N0B", label: "NEXRAD", res: "~250 m", type: "obs" }, HRRR: { label: "HRRR", res: "3 km fcst", type: "fcst" }, }; // HRRR forecast frames: latest hourly model run (published ~50 min after init) plus these lead times in minutes. const HRRR_LEADS = [0, 30, 60, 90, 120, 180, 240, 360]; // HRRR is coarse (3 km) forecast data, so we fetch it at a low zoom with a small 2x2 // grid (4 tiles/frame) instead of the obs radar's z11 3x3. This cuts the per-refresh // tile count from ~90 to ~32. Each HRRR run's tiles are cold on IEM and render on // demand, and ~90 cold tiles in one read_blob would blow the query timeout (the // "forecast never loaded / loaded slowly" bug); fewer + coarser tiles stay well under // it. z8 (~600 m/px) still over-samples 3 km data, so no real detail is lost. const HRRR_Z = 8; const HRRR_TILES = [{ x: 69, y: 106 }, { x: 69, y: 107 }, { x: 70, y: 106 }, { x: 70, y: 107 }]; // 3x3 z11 grid (~50 km across) centered on the resort, so approaching storms show too. const RADAR_TILES = [{ x: 558, y: 854 }, { x: 558, y: 855 }, { x: 558, y: 856 }, { x: 559, y: 854 }, { x: 559, y: 855 }, { x: 559, y: 856 }, { x: 560, y: 854 }, { x: 560, y: 855 }, { x: 560, y: 856 }]; // GOES-East (GOES-19) GLM total-lightning group points (RealEarth /api/shapes GeoJSON), fetched only for a box around the resort (databounds is S,W,N,E). Full disk is 12-23 MB, so the bounds are mandatory. const GLM_HOST = "https://realearth.ssec.wisc.edu"; const GLM_BOUNDS = "26.5,-83.5,30.0,-80.0"; // wide box: Tampa–Daytona, Gulf–Atlantic approaches (S,W,N,E) // Fallback when the GLM point feed (glmgrouppoints) is empty: the LIVE gridded GLM Flash // Extent Density raster. We download these Web-Mercator XYZ tiles, split each into // FED_CELLS×FED_CELLS cells, and drop one bolt at the center of every cell that has any // flash pixels (alpha>10). z7 / x34-35 / y52-54 = 6 tiles cover all of Central Florida. const FED_PRODUCT = "GOESEastGLMFEDRadC"; const FED_Z = 7, FED_X0 = 34, FED_X1 = 35, FED_Y0 = 52, FED_Y1 = 54, FED_CELLS = 64; // 64 cells/tile ≈ 4.3 km (z7 ~1km/px is RealEarth's finest; GLM native is ~8 km) // Classic NWS reflectivity color ramp (dBZ -> RGB) that IEM's single-site N0B/TZL // tiles use for actual echoes. Clear-air / clutter is painted a desaturated blue-grey // that is far from EVERY ramp color, so we map a pixel to a ramp dBZ only when it is // close to one; anything farther is treated as "no echo" (-1) and hidden, rather than // being mislabeled ~70 dBZ. Results are cached per color. const REFL_RAMP = [[5,4,233,231],[10,1,159,244],[15,3,0,244],[20,2,253,2],[25,1,197,1],[30,0,142,0],[35,253,248,2],[40,229,188,0],[45,253,149,0],[50,253,0,0],[55,212,0,0],[60,188,0,0],[65,253,0,253],[70,152,84,198],[75,253,253,253]]; const _dbzCache = new Map(); const ECHO_TOL2 = 2500; // squared RGB distance (~50/channel); beyond this a pixel is clear-air clutter, not a real echo function dbzFromRGB(r, g, b) { const key = (r << 16) | (g << 8) | b; const hit = _dbzCache.get(key); if (hit !== undefined) return hit; let bestDist = 1e12, bestDbz = 0; for (let i = 0; i < REFL_RAMP.length; i++) { const a = REFL_RAMP[i]; const dr = r - a[1], dg = g - a[2], db = b - a[3]; const d = dr * dr + dg * dg + db * db; if (d < bestDist) { bestDist = d; bestDbz = a[0]; } } const out = bestDist <= ECHO_TOL2 ? bestDbz : -1; // -1 == clear-air / not a real echo _dbzCache.set(key, out); return out; } const FORECAST_SQL = `SELECT to_json(current) AS current, to_json(hourly) AS hourly, to_json(daily) AS daily FROM read_json('https://api.open-meteo.com/v1/forecast?latitude=28.385&longitude=-81.563¤t=temperature_2m,precipitation,weather_code&hourly=precipitation_probability,precipitation,temperature_2m,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max,precipitation_sum&temperature_unit=fahrenheit&precipitation_unit=inch&timezone=America%2FNew_York&forecast_days=2')`; function wmoInfo(code) { const c = +code; if (c <= 1) return { label: c === 0 ? "Clear" : "Mainly clear", Icon: Sun }; if (c === 2) return { label: "Partly cloudy", Icon: CloudSun }; if (c === 3) return { label: "Overcast", Icon: Cloud }; if (c === 45 || c === 48) return { label: "Fog", Icon: Cloud }; if (c >= 51 && c <= 57) return { label: "Drizzle", Icon: CloudDrizzle }; if (c >= 61 && c <= 67) return { label: "Rain", Icon: CloudRain }; if (c >= 71 && c <= 77) return { label: "Snow", Icon: CloudSnow }; if (c >= 80 && c <= 82) return { label: "Rain showers", Icon: CloudRain }; if (c >= 85 && c <= 86) return { label: "Snow showers", Icon: CloudSnow }; if (c === 95) return { label: "Thunderstorms", Icon: CloudLightning }; if (c >= 96) return { label: "Storms + hail", Icon: CloudLightning }; return { label: "\u2014", Icon: Cloud }; } function relMin(unixSec) { const d = Math.round((unixSec * 1000 - Date.now()) / 60000); if (d === 0) return "now"; const sign = d > 0 ? "+" : "-", a = Math.abs(d); if (a < 60) return sign + a + "m"; const h = Math.floor(a / 60), m = a % 60; return sign + h + "h" + (m ? m + "m" : ""); } function probColor(p) { if (p == null) return "#e6e6e6"; if (p >= 70) return "#0b5d8a"; if (p >= 40) return "#2e9bff"; if (p >= 20) return "#9ccffb"; return "#dfeefb"; } const SQL = ` WITH raw AS ( SELECT unnest(liveData) AS l FROM read_json([ 'https://api.themeparks.wiki/v1/entity/75ea578a-adc8-4116-a54d-dccb60765ef9/live', 'https://api.themeparks.wiki/v1/entity/47f90d2c-e191-4239-a466-5892ef59a88b/live', 'https://api.themeparks.wiki/v1/entity/288747d1-8b4f-4a64-867e-ea7c9b27bad8/live', 'https://api.themeparks.wiki/v1/entity/1c84a229-8862-4648-9c71-378ddd2c7693/live', 'https://api.themeparks.wiki/v1/entity/ead53ea5-22e5-4095-9a83-8c29300d7c63/live', 'https://api.themeparks.wiki/v1/entity/b070cbc5-feaa-4b87-a8c1-f94cca037a18/live' ], columns={liveData:'JSON[]'}) ), live AS ( SELECT (l->>'id') AS id, (l->>'status') AS status, TRY_CAST(l->'queue'->'STANDBY'->>'waitTime' AS INTEGER) AS wait_time, (l->'queue'->'PAID_RETURN_TIME'->>'state') AS ll_state, (l->'queue'->'PAID_RETURN_TIME'->>'returnStart') AS ll_return_start, (l->'queue'->'PAID_RETURN_TIME'->>'returnEnd') AS ll_return_end, (l->'queue'->'PAID_RETURN_TIME'->'price'->>'formatted') AS ll_price, CAST(l->'showtimes' AS VARCHAR) AS showtimes FROM raw ) SELECT a.id::VARCHAR AS id, a.name AS name, a.park AS park, a.lat AS lat, a.lng AS lng, a.age_bucket AS age_bucket, a.kind AS kind, a.duration_min AS duration_min, COALESCE(live.status,'UNKNOWN') AS status, live.wait_time AS wait_time, live.ll_state AS ll_state, live.ll_return_start AS ll_return_start, live.ll_return_end AS ll_return_end, live.ll_price AS ll_price, live.showtimes AS showtimes FROM "disney_orlando"."main"."attractions" a LEFT JOIN live ON live.id = a.id::VARCHAR ORDER BY a.park, a.kind, a.name `; const PARKS = [ { name: "Magic Kingdom", short: "Magic Kingdom", color: "#0777b3" }, { name: "EPCOT", short: "EPCOT", color: "#638CAD" }, { name: "Hollywood Studios", short: "Hollywood", color: "#bd4e35" }, { name: "Animal Kingdom", short: "Animal Kingdom", color: "#2d7a00" }, { name: "Blizzard Beach", short: "Blizzard Beach", color: "#3aa6c2" }, { name: "Typhoon Lagoon", short: "Typhoon Lagoon", color: "#e6a32e" }, ]; const PARK_COLOR = Object.fromEntries(PARKS.map(p => [p.name, p.color])); const AGES = { "0-5": { label: "0–5", color: "#2d7a00", Icon: Baby }, "5-10": { label: "5–10", color: "#0777b3", Icon: ToyBrick }, "10-18": { label: "10–18", color: "#e18727", Icon: Bike }, "18+": { label: "18+", color: "#bc1200", Icon: Flame }, }; const AGE_ORDER = ["0-5", "5-10", "10-18", "18+"]; const SHOW = { color: "#7b4fb5", Icon: Drama, label: "Show" }; const RANKS = { asap: { label: "ASAP", color: "#2d7a00", Icon: Zap }, sometime: { label: "Sometime", color: "#e18727", Icon: Clock }, never: { label: "Never", color: "#bc1200", Icon: Ban }, }; const RANK_SORT = { asap: 0, sometime: 1, unranked: 2, never: 3 }; const STATUS_COLOR = { OPERATING: "#2d7a00", DOWN: "#bc1200", CLOSED: "#9a9a9a", REFURBISHMENT: "#e18727", UNKNOWN: "#9a9a9a" }; function fmtTime(iso) { if (!iso) return null; const m = String(iso).match(/T(\d{2}):(\d{2})/); if (!m) return null; let h = parseInt(m[1], 10); const mm = m[2]; const ap = h >= 12 ? "PM" : "AM"; h = h % 12 || 12; return `${h}:${mm} ${ap}`; } function llInfo(row) { const t = fmtTime(row.ll_return_start); if (t) return { text: `LL ${t}`, price: row.ll_price || null, tone: "#0777b3" }; if (row.ll_state) { const s = String(row.ll_state).toLowerCase(); if (s === "finished") return { text: "LL sold out", price: row.ll_price || null, tone: "#9a9a9a" }; if (s === "available") return { text: "LL available", price: row.ll_price || null, tone: "#0777b3" }; return { text: `LL ${s}`, price: row.ll_price || null, tone: "#9a9a9a" }; } return null; } function nextShow(str) { if (!str) return null; let arr; try { arr = JSON.parse(str); } catch (_) { return null; } if (!Array.isArray(arr) || !arr.length) return null; const now = Date.now(); const times = arr.map(s => Date.parse(s.startTime)).filter(t => !isNaN(t)).sort((a, b) => a - b); if (!times.length) return null; const rawByT = {}; arr.forEach(s => { const t = Date.parse(s.startTime); if (!isNaN(t)) rawByT[t] = s.startTime; }); const up = times.find(t => t >= now - 60000); const pick = up || times[times.length - 1]; return { time: fmtTime(rawByT[pick]), upcoming: !!up, left: times.filter(t => t >= now - 60000).length, total: times.length }; } function allShowtimes(str) { if (!str) return []; let arr; try { arr = JSON.parse(str); } catch (_) { return []; } if (!Array.isArray(arr)) return []; const now = Date.now(); return arr .map(s => ({ start: s.startTime, end: s.endTime, t: Date.parse(s.startTime) })) .filter(x => !isNaN(x.t)) .sort((a, b) => a.t - b.t) .map(x => ({ time: fmtTime(x.start), endTime: fmtTime(x.end), upcoming: x.t >= now - 60000, sameStartEnd: x.start === x.end })); } // ---- Day-planner schedule helpers ---- const SCHED_START_MIN = 8 * 60; // calendar window: 8:00 AM const SCHED_END_MIN = 24 * 60; // ... to midnight const SCHED_PX_PER_MIN = 1; // 60 px per hour on the timeline const DEFAULT_BUFFER = 15; function pad2(n) { return String(n).padStart(2, "0"); } function todayYMD(d) { const x = d || new Date(); return `${x.getFullYear()}-${pad2(x.getMonth() + 1)}-${pad2(x.getDate())}`; } function ymdParts(ymd) { const m = String(ymd || "").match(/(\d{4})-(\d{2})-(\d{2})/); return m ? { y: +m[1], mo: +m[2], d: +m[3] } : null; } function addDaysYMD(ymd, n) { const p = ymdParts(ymd); if (!p) return ymd; return todayYMD(new Date(p.y, p.mo - 1, p.d + n)); } function ymdLabel(ymd) { const p = ymdParts(ymd); if (!p) return ymd; return new Date(p.y, p.mo - 1, p.d).toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }); } function minToLabel(min) { let h = Math.floor(min / 60); const m = min % 60; const ap = h >= 12 ? "PM" : "AM"; h = h % 12 || 12; return `${h}:${pad2(m)} ${ap}`; } function minToHM(min) { return `${pad2(Math.floor(min / 60))}:${pad2(min % 60)}`; } function hmToMin(hm) { const m = String(hm || "").match(/(\d{1,2}):(\d{2})/); return m ? (+m[1]) * 60 + (+m[2]) : null; } function isoToMin(iso) { const m = String(iso || "").match(/T(\d{2}):(\d{2})/); return m ? (+m[1]) * 60 + (+m[2]) : null; } function schedShowtimes(str) { if (!str) return []; let arr; try { arr = JSON.parse(str); } catch (_) { return []; } if (!Array.isArray(arr)) return []; const now = Date.now(); return arr.map(s => ({ startMin: isoToMin(s.startTime), endMin: isoToMin(s.endTime), t: Date.parse(s.startTime), label: fmtTime(s.startTime), endLabel: fmtTime(s.endTime) })) .filter(x => x.startMin != null && !isNaN(x.t)) .sort((a, b) => a.t - b.t) .map(x => ({ ...x, upcoming: x.t >= now - 60000 })); } function layoutDay(entries) { const sorted = entries.slice().sort((a, b) => a.start - b.start || a.dur - b.dur); const laneEnds = []; const placed = sorted.map(e => { const s = e.start - (e.buffer || 0) - (e.wait || 0); let lane = laneEnds.findIndex(end => end <= s); if (lane === -1) { lane = laneEnds.length; laneEnds.push(0); } laneEnds[lane] = e.start + e.dur; return { ...e, lane }; }); return { placed, lanes: Math.max(1, laneEnds.length) }; } function newId() { try { if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID(); } catch (_) {} return "s" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7); } function haversine(aLat, aLng, bLat, bLng) { const R = 6371000, toRad = Math.PI / 180; const dLat = (bLat - aLat) * toRad, dLng = (bLng - aLng) * toRad; const s = Math.sin(dLat / 2) ** 2 + Math.cos(aLat * toRad) * Math.cos(bLat * toRad) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.min(1, Math.sqrt(s))); } // Straight-line distance -> walking minutes: ~80 m/min (4.8 km/h) with a 1.3x // path-detour factor. Rough on-foot estimate (no turn-by-turn routing in the // sandbox); cross-park hops read high, signalling you'd take Disney transport. function walkMinutes(meters) { return Math.max(1, Math.round(meters * 1.3 / 80)); } function cardinal(b) { return ["north", "northeast", "east", "southeast", "south", "southwest", "west", "northwest"][Math.round((((b || 0) % 360) + 360) % 360 / 45) % 8]; } function stepText(st) { const m = st.maneuver || {}; const t = m.type || ""; const mod = m.modifier || ""; const nm = st.name || ""; let s; if (t === "depart") s = "Head " + cardinal(m.bearing_after); else if (t === "arrive") s = "Arrive at your destination"; else if (t === "turn") s = "Turn " + (mod || "ahead"); else if (t === "end of road") s = mod ? "At the end, turn " + mod : "Continue at the end of the road"; else if (t === "fork") s = "Keep " + (mod || "straight") + " at the fork"; else if (t === "merge") s = "Merge " + (mod || ""); else if (t === "roundabout" || t === "rotary") s = "Take the roundabout"; else if (t === "continue" || t === "new name") s = (mod && mod !== "straight") ? "Continue " + mod : "Continue straight"; else s = (t ? t.charAt(0).toUpperCase() + t.slice(1) : "Continue") + (mod ? " " + mod : ""); if (nm) s += " on " + nm; return s; } function buildSteps(stepsStr) { let arr; try { arr = JSON.parse(stepsStr); } catch (_) { return []; } if (!Array.isArray(arr)) return []; return arr.map(st => ({ text: stepText(st), dist: Math.round(N(st.distance)) })).filter(s => s.text); } // Standard Google/OSRM encoded-polyline decoder (precision 5 by default) -> // array of [lat, lng]. Used to turn an OSRM `geometries=polyline` route geometry // into a drawable path for the map's walking lines. function decodePolyline(str, precision) { if (!str || typeof str !== "string") return []; const factor = Math.pow(10, precision == null ? 5 : precision); let index = 0, lat = 0, lng = 0; const coords = []; const len = str.length; while (index < len) { let result = 0, shift = 0, b; do { b = str.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20 && index < len); lat += (result & 1) ? ~(result >> 1) : (result >> 1); result = 0; shift = 0; do { b = str.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20 && index < len); lng += (result & 1) ? ~(result >> 1) : (result >> 1); coords.push([lat / factor, lng / factor]); } return coords; } function entryWalkMode(e) { return (e && e.walk === "manual") ? "manual" : "auto"; } function nthDow(y, m0, dow, n) { if (n > 0) { const f = new Date(y, m0, 1); const off = (dow - f.getDay() + 7) % 7; return new Date(y, m0, 1 + off + (n - 1) * 7); } const last = new Date(y, m0 + 1, 0); const off = (last.getDay() - dow + 7) % 7; return new Date(y, m0, last.getDate() - off); } function obsHol(d) { const w = d.getDay(); if (w === 6) return new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1); if (w === 0) return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1); return d; } function holKey(d) { return d.getFullYear() + "-" + pad2(d.getMonth() + 1) + "-" + pad2(d.getDate()); } const _holCache = {}; function holSet(y) { if (_holCache[y]) return _holCache[y]; const s = new Set(); const add = (d) => s.add(holKey(d)); [[0, 1], [5, 19], [6, 4], [10, 11], [11, 25]].forEach(([m0, day]) => { const d = new Date(y, m0, day); add(d); add(obsHol(d)); }); add(nthDow(y, 0, 1, 3)); add(nthDow(y, 1, 1, 3)); add(nthDow(y, 4, 1, -1)); add(nthDow(y, 8, 1, 1)); add(nthDow(y, 9, 1, 2)); add(nthDow(y, 10, 4, 4)); _holCache[y] = s; return s; } function isHol(d) { const y = d.getFullYear(); const k = holKey(d); return holSet(y).has(k) || holSet(y - 1).has(k) || holSet(y + 1).has(k); } function dowIso(ymd) { const p = ymdParts(ymd); if (!p) return 1; const wd = new Date(p.y, p.mo - 1, p.d).getDay(); return wd === 0 ? 7 : wd; } function dayClassYMD(ymd) { const p = ymdParts(ymd); if (!p) return "normal"; const base = new Date(p.y, p.mo - 1, p.d); if (isHol(base)) return "holiday"; const wd = base.getDay(), DAY = 86400000; if (wd === 6 && (isHol(new Date(base.getTime() - DAY)) || isHol(new Date(base.getTime() + 2 * DAY)))) return "holiday_weekend"; if (wd === 0 && (isHol(new Date(base.getTime() - 2 * DAY)) || isHol(new Date(base.getTime() + DAY)))) return "holiday_weekend"; return "normal"; } function predFor(map, attrId, dow, hour, dc) { const a = map && map[attrId]; if (!a) return null; const v = a[dow + "|" + hour + "|" + dc]; if (v != null) return v; const f = a[dow + "|" + hour + "|normal"]; return f != null ? f : null; } export default function DisneyOrlandoPlanner() { // Live data is gated behind `liveEnabled` so cached tiles/markers paint first. // `staticRows` is attraction metadata hydrated from IndexedDB for instant render; // wait/showtime values stay hidden until the live query resolves (`liveLoaded`). const [staticRows, setStaticRows] = useState([]); const [liveEnabled, setLiveEnabled] = useState(false); const liveQ = useSQLQuery(liveEnabled ? SQL : "", { enabled: liveEnabled }); const liveLoaded = Array.isArray(liveQ.data); const rows = liveLoaded ? liveQ.data : staticRows; const isLoading = liveEnabled && !liveLoaded; const isError = liveQ.isError; const error = liveQ.error; const [fParks, setFParks] = useDiveState("fParks", []); const [fAges, setFAges] = useDiveState("fAges", []); const [fTypes, setFTypes] = useDiveState("fTypes", []); const [fRanks, setFRanks] = useDiveState("fRanks", []); const [fOpen, setFOpen] = useDiveState("fOpen", false); const [fQuery, setFQuery] = useDiveState("fQuery", ""); const [sortKey, setSortKey] = useDiveState("sortKey", "park"); const [ranks, setRanks] = useDiveState("ranks", {}); const [basemap, setBasemap] = useDiveState("basemap", "satellite"); const [splitPct, setSplitPct] = useDiveState("splitPct", 50); const [schedSplitPct, setSchedSplitPct] = useDiveState("schedSplitPct", 50); // schedule view: list ↔ calendar const [schedTopPx, setSchedTopPx] = useDiveState("schedTopPx", null); // schedule view: (list/calendar) ↔ map; null = computed default const [radarSite, setRadarSite] = useDiveState("radarSite", "MCO"); const precipFloor = 25; // dBZ cutoff ("do not show" below this); also hides all clear-air clutter (dbzFromRGB returns -1) const [view, setView] = useDiveState("view", "explore"); const [schedule, setSchedule] = useDiveState("schedule", []); const [schedDate, setSchedDate] = useDiveState("schedDate", todayYMD()); const [savedView, setSavedView] = useDiveState("mapView", null); // persisted map pan/zoom: {lat,lng,gs} const tfRef = useRef({ k: 1, x: 0, y: 0 }); const onWheelRef = useRef(null); // native wheel handler always points at the latest closure (fresh proj/size) const [tf, setTf] = useState({ k: 1, x: 0, y: 0 }); const [selectedId, setSelectedId] = useState(null); const [isNarrow, setIsNarrow] = useState(false); const [showFilters, setShowFilters] = useState(false); const [filtersOpen, setFiltersOpen] = useState(true); const [isMax, setIsMax] = useState(false); const [expanded, setExpanded] = useState(false); const [radarOn, setRadarOn] = useState(false); const [showWeather, setShowWeather] = useState(false); const [radarIdx, setRadarIdx] = useState(0); const [radarPlaying, setRadarPlaying] = useState(true); const radarInitRef = useRef(false); const radarCanvasRef = useRef(null); const radarImgsRef = useRef([]); const [radarDecodeVer, setRadarDecodeVer] = useState(0); const radarFilteredRef = useRef([]); const [filterVer, setFilterVer] = useState(0); const [lightningOn, setLightningOn] = useState(false); const [lightningTick, setLightningTick] = useState(0); const [schedModal, setSchedModal] = useState(null); const [confirmDel, setConfirmDel] = useState(null); const [routeCache, setRouteCache] = useState({}); const [stepCache, setStepCache] = useState({}); const [geomCache, setGeomCache] = useState({}); // per-pairKey decoded route path [[lat,lng],...] (IDB: geom/v1) const [clockTick, setClockTick] = useState(0); // bumped every 30s while the schedule is open, so the "next leg" line advances with the clock const [dirOpen, setDirOpen] = useState(false); const [rankMenu, setRankMenu] = useState(null); const [predLoaded, setPredLoaded] = useState(false); const [boxRows, setBoxRows] = useState(null); // per-(attr_id,hour,day_type) historical wait quantiles; hydrated from IDB, refreshed from DB const [boxLoaded, setBoxLoaded] = useState(false); const calScrollRef = useRef(null); const idbSchedRef = useRef(null); const schedHydratedRef = useRef(false); const schedUserClearedRef = useRef(false); // set true only when a real user action empties the schedule, so an empty [] may clear the IDB backup const routeDataRef = useRef(null); const stepDataRef = useRef(null); const geomDataRef = useRef(null); const wrapRef = useRef(null); const rowRef = useRef(null); const schedRowRef = useRef(null); // list|calendar row — used for both the H split % and the V split top edge const schedSplitDragRef = useRef(false); const schedVDragRef = useRef(false); const splitDragRef = useRef(false); const didFit = useRef(false); const animRef = useRef(0); const ptrs = useRef(new Map()); const pinchRef = useRef(null); const multiRef = useRef(false); const movedRef = useRef(0); const userMovedRef = useRef(false); const fittedSizeRef = useRef(null); const restoredRef = useRef(false); const [size, setSize] = useState({ w: 800, h: 540 }); const [measured, setMeasured] = useState(false); // ---- tile cache + priority-queue background preloading ---- const cacheRef = useRef({}); const loadedRef = useRef(new Set()); const [cacheVer, setCacheVer] = useState(0); const [curGroup, setCurGroup] = useState(null); const lastDataRef = useRef(null); const dbRef = useRef(null); const [idbReady, setIdbReady] = useState(false); // On mount: open IndexedDB and hydrate the in-memory cache from tiles stored // on a previous visit, so a refresh paints instantly and re-fetches nothing. // If storage is unavailable we simply fall through to loading from MotherDuck. useEffect(() => { let cancelled = false; const guard = setTimeout(() => { if (!cancelled) setIdbReady(true); }, 2500); (async () => { const db = await idbOpen(); if (cancelled) return; dbRef.current = db; if (db) { const meta = await idbGet(db, "meta/attractions"); if (cancelled) return; if (Array.isArray(meta) && meta.length) setStaticRows(meta); const sc = await idbGet(db, "schedule/v1"); if (cancelled) return; if (Array.isArray(sc)) idbSchedRef.current = sc; const rcache = await idbGet(db, "routes/v1"); if (cancelled) return; if (rcache && typeof rcache === "object") setRouteCache(rcache); const scache = await idbGet(db, "steps/v1"); if (cancelled) return; if (scache && typeof scache === "object") setStepCache(scache); const gcache = await idbGet(db, "geom/v1"); if (cancelled) return; if (gcache && typeof gcache === "object") setGeomCache(gcache); const bcache = await idbGet(db, "wait_box/v1"); // per-hour wait quantiles by day type (small ~2400 rows) if (cancelled) return; if (Array.isArray(bcache) && bcache.length) setBoxRows(bcache); for (const s of ["satellite", "street"]) { for (const z of TILE_ZS) { const rec = await idbGet(db, s + "/v2/" + z); // v2: widened tile coverage — ignores the old narrow cache if (cancelled) return; if (Array.isArray(rec) && rec.length) { if (!cacheRef.current[s]) cacheRef.current[s] = {}; cacheRef.current[s][z] = rec; loadedRef.current.add(s + ":" + z); } } } } if (cancelled) return; clearTimeout(guard); setCacheVer(v => v + 1); setIdbReady(true); })(); return () => { cancelled = true; clearTimeout(guard); }; }, []); // Persist attraction metadata so markers & list render instantly next visit. useEffect(() => { if (!Array.isArray(liveQ.data) || !liveQ.data.length) return; const meta = liveQ.data.map(d => ({ id: d.id, name: d.name, park: d.park, lat: d.lat, lng: d.lng, age_bucket: d.age_bucket, kind: d.kind, duration_min: d.duration_min })); idbPut(dbRef.current, "meta/attractions", meta); }, [liveQ.data]); // Schedule entries live in BOTH the dive URL state (shareable) and IndexedDB // (per-browser backup). The IDB backup is the safety net for when useDiveState // rehydrates empty across a refresh, so it must never be wiped by the transient // empty [] that React renders before useDiveState/IDB have hydrated. // // Write-through rules (line below): // - Don't touch IDB until both stores have settled (idbReady + hydration done). // - A non-empty schedule always writes through (normal add/edit/remove). // - An EMPTY schedule clears the backup ONLY when the user genuinely emptied it // (schedUserClearedRef), never for the initial/transient empty render — so a // single load with an empty useDiveState can no longer destroy the backup. // idbSchedRef is kept in sync with every committed write so hydration and the // in-memory mirror agree. useEffect(() => { if (!idbReady || !schedHydratedRef.current) return; // wait until both stores have had a chance to hydrate const hasEntries = Array.isArray(schedule) && schedule.length > 0; const backupHasEntries = Array.isArray(idbSchedRef.current) && idbSchedRef.current.length > 0; if (!hasEntries && backupHasEntries && !schedUserClearedRef.current) return; // protect a non-empty backup from a non-user empty render schedUserClearedRef.current = false; idbSchedRef.current = Array.isArray(schedule) ? schedule : []; idbPut(dbRef.current, "schedule/v1", schedule); }, [schedule, idbReady]); useEffect(() => { if (Object.keys(routeCache).length) idbPut(dbRef.current, "routes/v1", routeCache); }, [routeCache]); useEffect(() => { if (Object.keys(stepCache).length) idbPut(dbRef.current, "steps/v1", stepCache); }, [stepCache]); useEffect(() => { if (Object.keys(geomCache).length) idbPut(dbRef.current, "geom/v1", geomCache); }, [geomCache]); // Hydrate once IDB is ready: if useDiveState came up empty but the IDB backup // has entries, restore them (this also re-syncs into useDiveState so the // schedule persists forward and stays shareable). Marking hydration done here // is what unlocks the write-through above. useEffect(() => { if (!idbReady || schedHydratedRef.current) return; const backup = Array.isArray(idbSchedRef.current) ? idbSchedRef.current : []; if ((!schedule || !schedule.length) && backup.length) { setSchedule(backup); } else if (Array.isArray(schedule) && schedule.length) { idbSchedRef.current = schedule; // useDiveState won — make the backup mirror it } schedHydratedRef.current = true; }, [idbReady, schedule]); const proj = useMemo(() => { const pts = rows.filter(r => r.lat != null && r.lng != null); if (!pts.length) return null; const pad = 36; const mxF = (lng) => (lng + 180) / 360; const myF = (lat) => (1 - Math.asinh(Math.tan(lat * Math.PI / 180)) / Math.PI) / 2; const mxs = pts.map(r => mxF(N(r.lng))), mys = pts.map(r => myF(N(r.lat))); const mxMin = Math.min(...mxs), mxMax = Math.max(...mxs); const myMin = Math.min(...mys), myMax = Math.max(...mys); const worldW = Math.max(mxMax - mxMin, 1e-9), worldH = Math.max(myMax - myMin, 1e-9); const P = Math.min((size.w - 2 * pad) / worldW, (size.h - 2 * pad) / worldH); const sx0 = (size.w - worldW * P) / 2 - mxMin * P; const sy0 = (size.h - worldH * P) / 2 - myMin * P; return { P, sx0, sy0, x: (lng) => sx0 + mxF(lng) * P, y: (lat) => sy0 + myF(lat) * P, lngAt: (px) => ((px - sx0) / P) * 360 - 180, latAt: (py) => Math.atan(Math.sinh(Math.PI * (1 - 2 * ((py - sy0) / P)))) * 180 / Math.PI, }; }, [rows, size.w, size.h]); // ---- Weather (background): forecast text + animated precipitation radar ---- const forecastQ = useSQLQuery(liveEnabled ? FORECAST_SQL : "", { enabled: liveEnabled }); const radarWindow = useMemo(() => { if (!liveEnabled) return null; const now = new Date(); const fmt = (d) => d.toISOString().slice(0, 16) + "Z"; // YYYY-MM-DDTHH:MMZ return { start: fmt(new Date(now.getTime() - 70 * 60000)), end: fmt(now) }; }, [liveEnabled]); const radarListSQL = useMemo(() => { if (!radarWindow) return ""; const s = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; if (s.type !== "obs") return ""; // forecast source builds its frames locally, no scan list return `SELECT to_json(scans) AS scans FROM read_json('${RADAR_HOST}/json/radar.py?operation=list&radar=${s.site}&product=${s.prod}&start=${radarWindow.start}&end=${radarWindow.end}') AS j`; }, [radarWindow, radarSite]); const radarListQ = useSQLQuery(radarListSQL, { enabled: !!radarListSQL }); const wx = useMemo(() => { const row = Array.isArray(forecastQ.data) && forecastQ.data[0]; if (!row) return null; try { return { current: JSON.parse(row.current), hourly: JSON.parse(row.hourly), daily: JSON.parse(row.daily) }; } catch (_) { return null; } }, [forecastQ.data]); const radarMeta = useMemo(() => { const src = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; if (src.type === "fcst") { // Anchor to the latest hourly HRRR run (published ~50 min after init); each // frame's key is its 4-char forecast lead in minutes, valid at run + lead. const runMs = Math.floor((Date.now() - 50 * 60000) / 3600000) * 3600000; return HRRR_LEADS.map(L => ({ key: String(L).padStart(4, "0"), time: Math.floor((runMs + L * 60000) / 1000) })); } const row = Array.isArray(radarListQ.data) && radarListQ.data[0]; if (!row) return []; let arr; try { arr = JSON.parse(row.scans); } catch (_) { return []; } if (!Array.isArray(arr)) return []; return arr.slice(-12).map(s => { const key = String(s.ts).replace(/[-:TZ]/g, "").slice(0, 12); const time = Math.floor(Date.UTC(+key.slice(0, 4), +key.slice(4, 6) - 1, +key.slice(6, 8), +key.slice(8, 10), +key.slice(10, 12)) / 1000); return { key, time }; }); }, [radarListQ.data, radarSite]); const radarTilesSQL = useMemo(() => { if (!radarMeta.length) return ""; const src = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; const fcst = src.type === "fcst"; const grid = fcst ? HRRR_TILES : RADAR_TILES; const z = fcst ? HRRR_Z : RADAR_Z; const urls = []; for (const f of radarMeta) for (const t of grid) { const layer = fcst ? `hrrr::REFD-F${f.key}-0` : `ridge::${src.site}-${src.prod}-${f.key}`; urls.push(`'${RADAR_HOST}/cache/tile.py/1.0.0/${layer}/${z}/${t.x}/${t.y}.png'`); } return `SELECT filename, base64(content) AS img FROM read_blob([${urls.join(",")}])`; }, [radarMeta, radarSite]); const radarTilesQ = useSQLQuery(radarTilesSQL, { enabled: !!radarTilesSQL }); const radarFrames = useMemo(() => { if (!Array.isArray(radarTilesQ.data) || !radarMeta.length) return []; const fsrc = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; const fz = fsrc.type === "fcst" ? HRRR_Z : RADAR_Z; const byKey = {}; for (const row of radarTilesQ.data) { const parts = String(row.filename).split("/"); const n = parts.length; const seg = parts[n - 4] || ""; let key = null; if (seg.indexOf("ridge::") === 0) key = seg.slice(-12); else if (seg.indexOf("hrrr::") === 0) key = (seg.split("-")[1] || "").slice(1); // "F0060" -> "0060" if (!key) continue; const x = parseInt(parts[n - 2], 10), y = parseInt(parts[n - 1], 10); (byKey[key] = byKey[key] || []).push({ x, y, img: row.img }); } return radarMeta.map(f => ({ time: f.time, z: fz, tiles: byKey[f.key] || [] })).filter(f => f.tiles.length); }, [radarTilesQ.data, radarMeta, radarSite]); useEffect(() => { if (radarFrames.length && !radarInitRef.current) { radarInitRef.current = true; const now = Date.now() / 1000; let idx = radarFrames.length - 1; for (let i = radarFrames.length - 1; i >= 0; i--) { if (radarFrames[i].time <= now) { idx = i; break; } } setRadarIdx(idx); } }, [radarFrames]); useEffect(() => { if (!radarOn || !radarPlaying || radarFrames.length < 2) return; const id = setInterval(() => setRadarIdx(i => (i + 1) % radarFrames.length), 650); return () => clearInterval(id); }, [radarOn, radarPlaying, radarFrames.length]); useEffect(() => { radarInitRef.current = false; }, [radarSite]); // Decode each frame's radar tiles into off-DOM elements once. useEffect(() => { radarImgsRef.current = radarFrames.map(fr => fr.tiles.map(t => { const el = new Image(); el.onload = () => setRadarDecodeVer(v => v + 1); el.src = `data:image/png;base64,${t.img}`; return { x: t.x, y: t.y, el }; })); }, [radarFrames]); // Build filtered copies of each obs tile: hide clear-air clutter and any echo below // the dBZ cutoff (precipFloor), then scale the survivors' alpha by reflectivity so // weak returns fade and strong cores stay bold — // < 40 dBZ -> very faint · 40-45 -> mid · >= 45 -> full (normal canvas opacity). // Done once per tile (not per pan) into offscreen canvases, reusing already-built // tiles so progressive loads stay cheap. Forecast (HRRR) is left raw. useEffect(() => { const src = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; if (!precipFloor || src.type !== "obs") { radarFilteredRef.current = []; setFilterVer(v => v + 1); return; } const prevFrames = radarFilteredRef.current; radarFilteredRef.current = radarImgsRef.current.map((frame, fi) => { const prev = prevFrames[fi] || []; return frame.map((t, ti) => { const pv = prev[ti]; if (pv && pv.el === t.el && pv.floor === precipFloor) return pv; if (!t.el.complete || !t.el.naturalWidth) return pv && pv.el === t.el ? pv : null; const cv = document.createElement("canvas"); cv.width = t.el.naturalWidth; cv.height = t.el.naturalHeight; const cx = cv.getContext("2d"); cx.drawImage(t.el, 0, 0); try { const img = cx.getImageData(0, 0, cv.width, cv.height); const d = img.data; // Hide clear-air clutter (z === -1) and echoes below the cutoff; for the rest // scale alpha by reflectivity (faint < 40, mid 40-45, full >= 45). for (let p = 0; p < d.length; p += 4) { const a = d[p + 3]; if (a === 0) continue; const z = dbzFromRGB(d[p], d[p + 1], d[p + 2]); if (z < precipFloor) { d[p + 3] = 0; continue; } const f = z >= 45 ? 1 : z >= 40 ? 0.5 : 0.12; d[p + 3] = Math.round(a * f); } cx.putImageData(img, 0, 0); } catch (_) {} return { x: t.x, y: t.y, el: t.el, cv, floor: precipFloor }; }); }); setFilterVer(v => v + 1); }, [radarFrames, radarDecodeVer, precipFloor, radarSite]); // Paint the active frame onto a canvas. A z7 tile is upscaled enormously over // the resort, so we draw via canvas (clips to the viewport) rather than giant // elements, which the browser clamps and smears. useEffect(() => { const cv = radarCanvasRef.current; if (!cv) return; const ctx = cv.getContext("2d"); // Size the bitmap to the canvas's live displayed size (not the possibly-stale // `size` state) so it maps 1:1 to CSS px. A bitmap/display mismatch stretches // tiles non-square and makes them drift relative to the basemap as you zoom. const W = Math.max(1, cv.clientWidth || Math.round(size.w)); const H = Math.max(1, cv.clientHeight || Math.round(size.h)); if (cv.width !== W) cv.width = W; if (cv.height !== H) cv.height = H; ctx.clearRect(0, 0, W, H); if (!radarOn || !proj || !radarFrames.length) return; const fidx = Math.min(radarIdx, radarFrames.length - 1); const fsrc = RADAR_SOURCES[radarSite] || RADAR_SOURCES.MCO; const useFiltered = precipFloor > 0 && fsrc.type === "obs" && radarFilteredRef.current[fidx]; const tiles = (useFiltered ? radarFilteredRef.current[fidx] : radarImgsRef.current[fidx]) || []; const fz = (radarFrames[fidx] && radarFrames[fidx].z) || RADAR_Z; const n = Math.pow(2, fz); const w = (proj.P / n) * tf.k; ctx.imageSmoothingEnabled = true; for (const t of tiles) { if (!t) continue; const im = t.cv || t.el; if (!im) continue; if (t.el && (!t.el.complete || !t.el.naturalWidth)) continue; const left = (proj.sx0 + (t.x / n) * proj.P) * tf.k + tf.x; const top = (proj.sy0 + (t.y / n) * proj.P) * tf.k + tf.y; ctx.drawImage(im, left, top, w, w); } }, [radarOn, radarIdx, tf, size.w, size.h, proj, radarFrames, radarDecodeVer, filterVer, precipFloor, radarSite]); // ---- Lightning (GOES-East/GOES-19 GLM group points via RealEarth /api/shapes GeoJSON) ---- // Refresh the latest frames every minute while the layer is on. useEffect(() => { if (!lightningOn) return; const id = setInterval(() => setLightningTick(t => t + 1), 60000); return () => clearInterval(id); }, [lightningOn]); // glmgrouppoints publishes frames at IRREGULAR times (not every minute) and frequently // emits long stretches of "sentinel-only" frames (a single [-81,-999] no-data feature) // even while real GLM flashes are flowing elsewhere. Guessing 20 consecutive HH:MM:00 // timestamps is wrong twice over: most of those minutes have no frame (RealEarth // back-matches them to the same nearest prior frame, so the fetches are redundant), and // 20 minutes is far too short to bridge a sentinel stretch (these can run 1h+). So we // first ask /api/times for the ACTUAL published frame times, then fetch the most recent // distinct frames of those — each fetch hits a unique real frame and the window reaches // back ~1-2h for a similar fetch count, surfacing the latest burst of real strikes. const lightningTimesSQL = useMemo(() => { if (!liveEnabled || !lightningOn) return ""; return `SELECT content FROM read_text(['${GLM_HOST}/api/times?products=glmgrouppoints']) AS j`; }, [liveEnabled, lightningOn, lightningTick]); const lightningTimesQ = useSQLQuery(lightningTimesSQL, { enabled: !!lightningTimesSQL }); // Most recent ~24 published frame times, as RealEarth /api/shapes time= strings // (YYYY-MM-DD+HH:MM:SS), parsed from the /api/times reply ("YYYYMMDD.HHMMSS" entries). const lightningFrames = useMemo(() => { const row = Array.isArray(lightningTimesQ.data) && lightningTimesQ.data[0]; if (!row) return []; let arr; try { arr = JSON.parse(row.content).glmgrouppoints; } catch (_) { return []; } if (!Array.isArray(arr)) return []; return arr.slice(-24).map((s) => { const m = String(s).match(/^(\d{4})(\d{2})(\d{2})\.(\d{2})(\d{2})(\d{2})$/); if (!m) return null; return `${m[1]}-${m[2]}-${m[3]}+${m[4]}:${m[5]}:${m[6]}`; }).filter(Boolean); }, [lightningTimesQ.data]); const lightningSQL = useMemo(() => { if (!lightningFrames.length) return ""; const urls = lightningFrames.map(t => `'${GLM_HOST}/api/shapes?products=glmgrouppoints&time=${t}&databounds=${GLM_BOUNDS}'`); return `SELECT filename, content FROM read_text([${urls.join(",")}])`; }, [lightningFrames]); const lightningQ = useSQLQuery(lightningSQL, { enabled: !!lightningSQL }); const lightningRaw = useMemo(() => { if (!Array.isArray(lightningQ.data)) return null; const parseT = (fn) => { const i = String(fn).indexOf("time="); if (i < 0) return 0; const s = String(fn).substr(i + 5, 16); // YYYY-MM-DD+HH:MM return Date.UTC(+s.slice(0, 4), +s.slice(5, 7) - 1, +s.slice(8, 10), +s.slice(11, 13), +s.slice(14, 16)); }; const rows = lightningQ.data.map(r => ({ t: parseT(r.filename), content: r.content })).sort((a, b) => b.t - a.t); const out = [], seen = new Set(); let newestT = 0; for (const row of rows) { let fc; try { fc = JSON.parse(row.content); } catch (_) { continue; } const feats = fc && Array.isArray(fc.features) ? fc.features : []; for (const f of feats) { const c = f.geometry && f.geometry.coordinates; if (!c || c.length < 2) continue; const lng = +c[0], lat = +c[1]; if (!isFinite(lng) || !isFinite(lat) || lat < -90 || lat > 90 || lng < -180 || lng > 180) continue; // drops the -999 no-data sentinel const key = lat.toFixed(2) + "," + lng.toFixed(2); // ~1 km cell dedupe to limit clutter if (seen.has(key)) continue; seen.add(key); if (row.t > newestT) newestT = row.t; out.push({ lat, lng, t: row.t }); if (out.length >= 220) break; } if (out.length >= 220) break; } return { strikes: out, newestT }; }, [lightningQ.data]); // ---- Fallback: derive bolts from the LIVE gridded GLM Flash Extent Density raster ---- // The point feed is empty for hours at a time; FED updates every minute. Download the // small FED tile grid, split each tile into cells, and emit a bolt at the center of any // cell containing flash pixels — nothing where a cell is empty. const fedTimesSQL = useMemo(() => { if (!liveEnabled || !lightningOn) return ""; return `SELECT content FROM read_text(['${GLM_HOST}/api/times?products=${FED_PRODUCT}']) AS j`; }, [liveEnabled, lightningOn, lightningTick]); const fedTimesQ = useSQLQuery(fedTimesSQL, { enabled: !!fedTimesSQL }); const fedFrame = useMemo(() => { const row = Array.isArray(fedTimesQ.data) && fedTimesQ.data[0]; if (!row) return null; let arr; try { arr = JSON.parse(row.content)[FED_PRODUCT]; } catch (_) { return null; } if (!Array.isArray(arr) || !arr.length) return null; const s = String(arr[arr.length - 1]); // "YYYYMMDD.HHMMSS" if (s.length < 15) return null; return { date: s.slice(0, 8), time: s.slice(9, 15), t: Date.UTC(+s.slice(0, 4), +s.slice(4, 6) - 1, +s.slice(6, 8), +s.slice(9, 11), +s.slice(11, 13), +s.slice(13, 15)) }; }, [fedTimesQ.data]); const fedTilesSQL = useMemo(() => { if (!fedFrame) return ""; const urls = []; for (let x = FED_X0; x <= FED_X1; x++) for (let y = FED_Y0; y <= FED_Y1; y++) urls.push(`'${GLM_HOST}/tiles/${FED_PRODUCT}/${fedFrame.date}/${fedFrame.time}/${FED_Z}/${x}/${y}.png'`); return `SELECT filename, base64(content) AS img FROM read_blob([${urls.join(",")}])`; }, [fedFrame]); const fedTilesQ = useSQLQuery(fedTilesSQL, { enabled: !!fedTilesSQL }); const [fedBolts, setFedBolts] = useState({ strikes: [], newestT: 0 }); useEffect(() => { if (!Array.isArray(fedTilesQ.data) || !fedFrame) return; let cancelled = false; const n = Math.pow(2, FED_Z), N = FED_CELLS, cell = 256 / N; const tiles = fedTilesQ.data.map(r => { const p = String(r.filename).split("/"); return { tx: parseInt(p[p.length - 2], 10), ty: parseInt(p[p.length - 1], 10), img: r.img }; }); Promise.all(tiles.map(t => new Promise(res => { const im = new Image(); im.onload = () => res({ ...t, el: im }); im.onerror = () => res(null); im.src = "data:image/png;base64," + t.img; }))).then(loaded => { if (cancelled) return; const cv = document.createElement("canvas"); cv.width = 256; cv.height = 256; const cx = cv.getContext("2d"); const out = []; for (const t of loaded) { if (!t || !t.el) continue; cx.clearRect(0, 0, 256, 256); cx.drawImage(t.el, 0, 0); let d; try { d = cx.getImageData(0, 0, 256, 256).data; } catch (_) { continue; } for (let cyi = 0; cyi < N && out.length < 400; cyi++) for (let cxi = 0; cxi < N; cxi++) { const px0 = (cxi * cell) | 0, px1 = ((cxi + 1) * cell) | 0, py0 = (cyi * cell) | 0, py1 = ((cyi + 1) * cell) | 0; let hit = false; for (let py = py0; py < py1 && !hit; py++) { const ro = py * 256; for (let px = px0; px < px1; px++) { if (d[(ro + px) * 4 + 3] > 10) { hit = true; break; } } } if (!hit) continue; // no flashes in this cell -> no bolt const xt = t.tx + (cxi + 0.5) / N, yt = t.ty + (cyi + 0.5) / N; out.push({ lat: Math.atan(Math.sinh(Math.PI * (1 - 2 * yt / n))) * 180 / Math.PI, lng: xt / n * 360 - 180, t: fedFrame.t }); } } setFedBolts({ strikes: out, newestT: fedFrame.t }); }); return () => { cancelled = true; }; }, [fedTilesQ.data, fedFrame]); // Cache the most recent NON-EMPTY dataset (state + IndexedDB) so the bolts persist // through the feed's frequent empty stretches and across reloads. A fresh result // with strikes replaces the cache; an empty/loading result keeps showing the cache // (with a "last pulled" staleness indicator). Cache expires after 60 min. const [lightningCache, setLightningCache] = useState(null); // { strikes, newestT, pulledAt } useEffect(() => { if (!idbReady || !dbRef.current) return; idbGet(dbRef.current, "lightning/v1").then(rec => { if (rec && Array.isArray(rec.strikes) && rec.strikes.length) setLightningCache(rec); }).catch(() => {}); }, [idbReady]); useEffect(() => { const fresh = (lightningRaw && lightningRaw.strikes.length) ? lightningRaw : (fedBolts.strikes.length ? fedBolts : null); if (fresh) { const rec = { strikes: fresh.strikes, newestT: fresh.newestT, pulledAt: Date.now() }; setLightningCache(rec); idbPut(dbRef.current, "lightning/v1", rec); } }, [lightningRaw, fedBolts]); // Prefer the point feed; fall back to FED-derived bolts; then to the cache. Only render // data whose newest strike is < 3h old. Flag as "stale" (with a timestamp chip) once the // newest strike is more than 20 min old, since the point feed often lags behind realtime. const liveStrikes = (lightningRaw && lightningRaw.strikes.length) ? lightningRaw : (fedBolts.strikes.length ? fedBolts : null); const cand = lightningOn ? (liveStrikes || lightningCache) : null; const lightning = (cand && cand.strikes.length && cand.newestT && (Date.now() - cand.newestT) < 3 * 60 * 60 * 1000) ? cand : { strikes: [], newestT: 0 }; const dataAgeMin = lightning.newestT ? Math.round((Date.now() - lightning.newestT) / 60000) : 0; const lightningStale = lightning.strikes.length > 0 && dataAgeMin > 20; // ---- Parking lots: named guest parking polygons (from OSM, stored in MotherDuck) ---- const parkingQ = useSQLQuery(`SELECT park, name, lat, lng, poly FROM "disney_orlando"."main"."parking"`, { enabled: true }); const parking = useMemo(() => { if (!Array.isArray(parkingQ.data)) return []; return parkingQ.data.map(r => { let poly = []; try { poly = JSON.parse(r.poly); } catch (_) {} return { park: r.park, name: r.name, lat: N(r.lat), lng: N(r.lng), poly }; }).filter(p => p.poly.length >= 3); }, [parkingQ.data]); useEffect(() => { const mq = window.matchMedia("(max-width: 760px)"); const f = () => setIsNarrow(mq.matches); f(); if (mq.addEventListener) mq.addEventListener("change", f); else mq.addListener(f); return () => { if (mq.removeEventListener) mq.removeEventListener("change", f); else mq.removeListener(f); }; }, []); const _vh = (typeof window !== "undefined" && window.innerHeight) ? window.innerHeight : 720; const mapH = isMax ? _vh : (view === "schedule" ? Math.max(460, Math.round(_vh * 0.82)) : (isNarrow ? Math.max(320, Math.round(_vh * 0.5)) : 560)); const schedTopH = schedTopPx != null ? clamp(schedTopPx, 240, Math.max(300, _vh - 120)) : Math.max(330, Math.round(_vh * 0.5)); // map width AND height are measured by the ResizeObserver so the Mercator projection stays aspect-correct (prevents tile stretching) useEffect(() => { const measure = () => { const el = wrapRef.current; if (!el) return; const w = el.clientWidth, h = el.clientHeight; if (w > 1 && h > 1) { setSize({ w, h }); setMeasured(true); } }; measure(); // synchronous: don't rely on ResizeObserver firing in the sandbox let ro; if (typeof ResizeObserver !== "undefined" && wrapRef.current) { ro = new ResizeObserver(measure); ro.observe(wrapRef.current); } window.addEventListener("resize", measure); const t1 = setTimeout(measure, 60); const t2 = setTimeout(measure, 250); return () => { if (ro) ro.disconnect(); window.removeEventListener("resize", measure); clearTimeout(t1); clearTimeout(t2); }; }, [isMax, splitPct]); // React attaches onWheel as a passive listener, so preventDefault() there is // ignored and scroll-to-zoom also scrolls the surrounding page (and, when the // dive is embedded in an iframe, the host blog). Register our own native, // non-passive wheel listener that handles the zoom AND preventDefault so the // wheel event never leaks out of the map — in any embedding context. useEffect(() => { const el = wrapRef.current; if (!el) return; const onWheelNative = (e) => { const h = onWheelRef.current; if (h) h(e); }; el.addEventListener("wheel", onWheelNative, { passive: false }); return () => el.removeEventListener("wheel", onWheelNative); }, [isMax]); // Close the per-row priority dropdown on any outside click or scroll. useEffect(() => { if (!rankMenu) return; const close = () => setRankMenu(null); const t = setTimeout(() => { document.addEventListener("click", close); window.addEventListener("scroll", close, true); }, 0); return () => { clearTimeout(t); document.removeEventListener("click", close); window.removeEventListener("scroll", close, true); }; }, [rankMenu]); // Paint tiles/markers from cache first, THEN start the live query, so the map // stays interactive while waits/showtimes download. Cold start (no cached // attractions) enables it immediately since we need coordinates to draw anything. useEffect(() => { if (!idbReady || liveEnabled) return; if (staticRows.length && proj) { let r2; const r1 = requestAnimationFrame(() => { r2 = requestAnimationFrame(() => setLiveEnabled(true)); }); return () => { cancelAnimationFrame(r1); if (r2) cancelAnimationFrame(r2); }; } setLiveEnabled(true); }, [idbReady, staticRows.length, proj, liveEnabled]); // ideal detail zoom for the current view; drives the download priority queue const viewZ = useMemo(() => { if (!proj) return 14; return clamp(Math.round(Math.log2((proj.P * tf.k) / 256)), 13, 16); }, [proj, tf.k]); function pickGroup() { const cur = basemap, other = cur === "satellite" ? "street" : "satellite"; const has = (s, z) => loadedRef.current.has(s + ":" + z); if (!has(cur, viewZ)) return { s: cur, zs: [viewZ] }; // 1. exactly what is on screen now if (!has(cur, 13)) return { s: cur, zs: [13] }; // 2. coarse backdrop const restCur = TILE_ZS.filter(z => !has(cur, z)); if (restCur.length) return { s: cur, zs: restCur }; // 3. rest of current basemap (batched) if (!has(other, viewZ)) return { s: other, zs: [viewZ] }; // 4. other basemap, same priority if (!has(other, 13)) return { s: other, zs: [13] }; const restOther = TILE_ZS.filter(z => !has(other, z)); if (restOther.length) return { s: other, zs: restOther }; return null; } useEffect(() => { if (!idbReady) return; // wait for the persistent cache to hydrate first if (curGroup) return; const g = pickGroup(); if (g) setCurGroup(g); }, [idbReady, curGroup, viewZ, basemap, cacheVer, proj]); const bgSQL = curGroup ? `SELECT z,x,y,img FROM "disney_orlando"."main"."tiles" WHERE style='${curGroup.s}' AND z IN (${curGroup.zs.join(",")})` : ""; const bgQ = useSQLQuery(bgSQL, { enabled: !!bgSQL }); useEffect(() => { if (!curGroup) return; if (bgQ.isLoading) return; // query for this group hasn't resolved yet if (!Array.isArray(bgQ.data)) return; if (bgQ.data === lastDataRef.current) return; // leftover data from the previous group's query lastDataRef.current = bgQ.data; if (!cacheRef.current[curGroup.s]) cacheRef.current[curGroup.s] = {}; const byZ = {}; for (const r of bgQ.data) { const z = +r.z; (byZ[z] = byZ[z] || []).push({ x: +r.x, y: +r.y, img: r.img }); } for (const z of curGroup.zs) { const arr = byZ[z] || []; cacheRef.current[curGroup.s][z] = arr; loadedRef.current.add(curGroup.s + ":" + z); idbPut(dbRef.current, curGroup.s + "/v2/" + z, arr); // persist for future refreshes (v2: widened coverage) } setCacheVer(v => v + 1); setCurGroup(null); }, [bgQ.data, bgQ.isLoading, curGroup]); // Highest zoom allowed right now, derived from the live projection scale so the // finest (z16) tiles never upscale past a safe paint size (see maxKForProj). function maxK() { return maxKForProj(proj ? proj.P : 0); } function commit(n) { const c = { k: clamp(n.k, KMIN, maxK()), x: n.x, y: n.y }; tfRef.current = c; setTf(c); } function animateTo(target) { cancelAnimationFrame(animRef.current); const start = { ...tfRef.current }; const t0 = (typeof performance !== "undefined" ? performance.now() : Date.now()); const dur = 460; const step = (now) => { const p = Math.min(1, (now - t0) / dur); const e = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2; commit({ k: start.k + (target.k - start.k) * e, x: start.x + (target.x - start.x) * e, y: start.y + (target.y - start.y) * e }); if (p < 1) animRef.current = requestAnimationFrame(step); }; animRef.current = requestAnimationFrame(step); } function fitPoints(pts) { if (!proj || !pts.length) return; const xs = pts.map(r => proj.x(N(r.lng))), ys = pts.map(r => proj.y(N(r.lat))); const minX = Math.min(...xs), maxX = Math.max(...xs), minY = Math.min(...ys), maxY = Math.max(...ys); const dx = Math.max(maxX - minX, 40), dy = Math.max(maxY - minY, 40); const k = clamp(0.82 * Math.min(size.w / dx, size.h / dy), 0.4, Math.min(18, maxK())); const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2; animateTo({ k, x: size.w / 2 - k * cx, y: size.h / 2 - k * cy }); } function zoomToPark(name) { fitPoints(rows.filter(r => r.park === name)); } function zoomFull() { fitPoints(rows); } function centerOnRow(d) { if (!proj) return; const k = Math.max(tfRef.current.k, 5); animateTo({ k, x: size.w / 2 - k * proj.x(N(d.lng)), y: size.h / 2 - k * proj.y(N(d.lat)) }); } function zoomBy(f) { userMovedRef.current = true; const t = tfRef.current; const px = size.w / 2, py = size.h / 2; const nk = clamp(t.k * f, KMIN, maxK()); animateTo({ k: nk, x: px - ((px - t.x) / t.k) * nk, y: py - ((py - t.y) / t.k) * nk }); } function startSplit(e) { splitDragRef.current = true; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} } function moveSplit(e) { if (!splitDragRef.current || !rowRef.current) return; const r = rowRef.current.getBoundingClientRect(); setSplitPct(clamp(((e.clientX - r.left) / r.width) * 100, 28, 75)); } function endSplit(e) { splitDragRef.current = false; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} } // Schedule view: horizontal divider (list ↔ calendar) and vertical divider (list/calendar ↔ map). Both persist in Dive state. function startSchedSplit(e) { schedSplitDragRef.current = true; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} } function moveSchedSplit(e) { if (!schedSplitDragRef.current || !schedRowRef.current) return; const r = schedRowRef.current.getBoundingClientRect(); setSchedSplitPct(clamp(((e.clientX - r.left) / r.width) * 100, 25, 75)); } function endSchedSplit(e) { schedSplitDragRef.current = false; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} } function startSchedV(e) { schedVDragRef.current = true; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} } function moveSchedV(e) { if (!schedVDragRef.current || !schedRowRef.current) return; const r = schedRowRef.current.getBoundingClientRect(); const vh = (typeof window !== "undefined" && window.innerHeight) ? window.innerHeight : 720; setSchedTopPx(clamp(Math.round(e.clientY - r.top), 240, Math.max(300, vh - 120))); } function endSchedV(e) { schedVDragRef.current = false; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} } function rectOf(node) { return node.getBoundingClientRect(); } function zoomAround(px, py, f, panx, pany) { const t = tfRef.current; const nk = clamp(t.k * f, KMIN, maxK()); const wx = (px - t.x) / t.k, wy = (py - t.y) / t.k; commit({ k: nk, x: px - wx * nk + (panx || 0), y: py - wy * nk + (pany || 0) }); } function onPointerDown(e) { cancelAnimationFrame(animRef.current); const node = e.currentTarget; try { node.setPointerCapture(e.pointerId); } catch (_) {} ptrs.current.set(e.pointerId, { x: e.clientX, y: e.clientY }); movedRef.current = 0; if (ptrs.current.size === 2) { multiRef.current = true; const v = [...ptrs.current.values()]; const r = rectOf(node); pinchRef.current = { dist: Math.hypot(v[0].x - v[1].x, v[0].y - v[1].y), mx: (v[0].x + v[1].x) / 2 - r.left, my: (v[0].y + v[1].y) / 2 - r.top }; } } function onPointerMove(e) { if (!ptrs.current.has(e.pointerId)) return; const node = e.currentTarget; const prev = ptrs.current.get(e.pointerId); ptrs.current.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (ptrs.current.size === 1) { const dx = e.clientX - prev.x, dy = e.clientY - prev.y; movedRef.current += Math.abs(dx) + Math.abs(dy); if (movedRef.current > 6) userMovedRef.current = true; const t = tfRef.current; commit({ k: t.k, x: t.x + dx, y: t.y + dy }); } else if (ptrs.current.size >= 2) { userMovedRef.current = true; const v = [...ptrs.current.values()]; const r = rectOf(node); const dist = Math.hypot(v[0].x - v[1].x, v[0].y - v[1].y); const mx = (v[0].x + v[1].x) / 2 - r.left, my = (v[0].y + v[1].y) / 2 - r.top; if (pinchRef.current && pinchRef.current.dist > 0) { const f = dist / pinchRef.current.dist; zoomAround(mx, my, f, mx - pinchRef.current.mx, my - pinchRef.current.my); } pinchRef.current = { dist, mx, my }; movedRef.current += 12; } } function onPointerUp(e) { const node = e.currentTarget; const had = ptrs.current.size; ptrs.current.delete(e.pointerId); try { node.releasePointerCapture(e.pointerId); } catch (_) {} if (ptrs.current.size < 2) pinchRef.current = null; if (ptrs.current.size === 0) { const wasTap = had === 1 && !multiRef.current && movedRef.current < 7; multiRef.current = false; if (wasTap) handleTap(e, node); } } function handleTap(e, node) { if (!proj) return; const r = rectOf(node); const x = e.clientX - r.left, y = e.clientY - r.top; const t = tfRef.current; let best = null, bestD = 22; for (const d of filtered) { const sx = proj.x(N(d.lng)) * t.k + t.x, sy = proj.y(N(d.lat)) * t.k + t.y; const dd = Math.hypot(sx - x, sy - y); if (dd < bestD) { bestD = dd; best = d; } } if (best) { setSelectedId(best.id); return; } setSelectedId(null); } function onWheel(e) { // Keep the wheel on the map: stop the host page/iframe from scrolling and // stop the event from bubbling out to a parent document when embedded. e.preventDefault(); e.stopPropagation(); userMovedRef.current = true; const node = wrapRef.current; if (!node) return; const r = rectOf(node); const f = Math.exp(-e.deltaY * 0.0016); zoomAround(e.clientX - r.left, e.clientY - r.top, f); } onWheelRef.current = onWheel; useEffect(() => { if (!proj || !rows.length || !measured || size.w < 2) return; if (userMovedRef.current) return; // don't yank the view after a manual pan/zoom if (savedView && !restoredRef.current && savedView.gs > 0) { // restore the persisted view instead of fitting all parks restoredRef.current = true; userMovedRef.current = true; const k = clamp(savedView.gs / proj.P, KMIN, maxK()); commit({ k, x: size.w / 2 - k * proj.x(savedView.lng), y: size.h / 2 - k * proj.y(savedView.lat) }); return; } const key = Math.round(size.w) + "x" + Math.round(size.h); if (fittedSizeRef.current === key) return; // already fit at this size fittedSizeRef.current = key; didFit.current = true; const id = setTimeout(() => zoomFull(), 30); // re-fits if the measured size changes (e.g. 800 -> real) return () => clearTimeout(id); }, [proj, rows.length, measured, size.w, size.h]); useEffect(() => { if (didFit.current && proj && rows.length) { const id = setTimeout(() => zoomFull(), 60); return () => clearTimeout(id); } }, [isMax]); // Persist the map view (center + ground scale) to dive URL state, debounced, after // the user pans/zooms — so a refresh (or a shared link) reopens the same view. useEffect(() => { if (!proj || !userMovedRef.current || size.w < 2) return; const id = setTimeout(() => { const t = tfRef.current; if (!t.k) return; const cx = (size.w / 2 - t.x) / t.k, cy = (size.h / 2 - t.y) / t.k; setSavedView({ lat: +proj.latAt(cy).toFixed(5), lng: +proj.lngAt(cx).toFixed(5), gs: +(proj.P * t.k).toFixed(2) }); }, 600); return () => clearTimeout(id); }, [tf, proj, size.w, size.h]); useEffect(() => () => { cancelAnimationFrame(animRef.current); }, []); const filtered = useMemo(() => { let r = rows.map(d => ({ ...d, rank: ranks[d.id] || "unranked" })); if (fTypes.length) r = r.filter(d => fTypes.includes(d.kind)); if (fParks.length) r = r.filter(d => fParks.includes(d.park)); if (fAges.length) r = r.filter(d => d.kind === "show" || fAges.includes(d.age_bucket)); if (fRanks.length) r = r.filter(d => fRanks.includes(d.rank)); if (fOpen && liveLoaded) r = r.filter(d => d.status === "OPERATING"); const q = (fQuery || "").trim().toLowerCase(); if (q) r = r.filter(d => String(d.name).toLowerCase().includes(q)); r.sort((a, b) => { if (sortKey === "wait") return N(b.wait_time) - N(a.wait_time) || String(a.name).localeCompare(String(b.name)); if (sortKey === "name") return String(a.name).localeCompare(String(b.name)); if (sortKey === "rank") return (RANK_SORT[a.rank] - RANK_SORT[b.rank]) || String(a.name).localeCompare(String(b.name)); return String(a.park).localeCompare(String(b.park)) || String(a.name).localeCompare(String(b.name)); }); return r; }, [rows, fParks, fAges, fTypes, fRanks, fOpen, fQuery, sortKey, ranks, liveLoaded]); const selected = useMemo(() => rows.find(d => d.id === selectedId) || null, [rows, selectedId]); useEffect(() => { setExpanded(false); }, [selectedId]); const anyFilter = fParks.length || fAges.length || fTypes.length || fRanks.length || fOpen || (fQuery || "").length; function toggle(list, setList, val) { setList(list.includes(val) ? list.filter(v => v !== val) : [...list, val]); } function setRank(id, val) { setRanks(prev => { const n = { ...prev }; if (n[id] === val) delete n[id]; else n[id] = val; return n; }); } // Selecting a park in the filter also frames the map on it (the most recently // selected park wins); deselecting re-fits to whatever parks remain, or all. function onParkFilter(name) { const turningOn = !fParks.includes(name); toggle(fParks, setFParks, name); if (turningOn) { zoomToPark(name); return; } const remaining = fParks.filter(p => p !== name); if (remaining.length) fitPoints(rows.filter(r => remaining.includes(r.park))); else zoomFull(); } function clearFilters() { const hadPark = fParks.length; setFParks([]); setFAges([]); setFTypes([]); setFRanks([]); setFOpen(false); setFQuery(""); if (hadPark) zoomFull(); } function iconFor(d) { return d.kind === "show" ? SHOW : (AGES[d.age_bucket] || AGES["5-10"]); } // ---- Schedule: derived sets + create / edit / delete ---- const scheduledIds = useMemo(() => { const m = {}; for (const s of schedule) m[s.attrId] = (m[s.attrId] || 0) + 1; return m; }, [schedule]); const dayEntries = useMemo(() => schedule.filter(s => s.date === schedDate), [schedule, schedDate]); function topVisibleMin() { const el = calScrollRef.current; if (el && el.scrollTop != null) return clamp(SCHED_START_MIN + Math.round(el.scrollTop / SCHED_PX_PER_MIN / 15) * 15, SCHED_START_MIN, SCHED_END_MIN - 15); if (schedDate === todayYMD()) { const now = new Date(); return clamp(Math.round((now.getHours() * 60 + now.getMinutes()) / 15) * 15, SCHED_START_MIN, SCHED_END_MIN - 15); } return 9 * 60; } function baseDur(d) { return N(d.duration_min) || 10; } function baseWait(d) { return (d.kind !== "show" && liveLoaded && d.wait_time != null) ? N(d.wait_time) : 0; } function openCreate(d) { const today = schedDate === todayYMD(); let source = "custom", start = topVisibleMin(), dur = baseDur(d), wait = baseWait(d); if (today && liveLoaded) { if (d.kind === "show") { const up = schedShowtimes(d.showtimes).find(s => s.upcoming); if (up) { source = "show"; start = up.startMin; dur = (up.endMin != null && up.endMin > up.startMin) ? (up.endMin - up.startMin) : (N(d.duration_min) || dur); wait = 0; } } else { const ls = isoToMin(d.ll_return_start), le = isoToMin(d.ll_return_end); if (ls != null) { source = "ll"; start = ls; dur = (le != null && le > ls) ? (le - ls) : (N(d.duration_min) || dur); wait = 0; } } } setConfirmDel(null); setDirOpen(false); setSchedModal({ mode: "create", attrId: d.id, name: d.name, park: d.park, kind: d.kind, date: schedDate, source, start, dur, wait, buffer: DEFAULT_BUFFER, walk: "auto", d }); } function openEdit(entry) { const d = rows.find(r => r.id === entry.attrId) || null; setConfirmDel(null); setDirOpen(false); setSchedModal({ mode: "edit", id: entry.id, attrId: entry.attrId, name: entry.name, park: entry.park, kind: entry.kind, date: entry.date, source: entry.source || "custom", start: entry.start, dur: entry.dur, wait: entry.wait != null ? entry.wait : 0, buffer: entry.buffer != null ? entry.buffer : DEFAULT_BUFFER, walk: entry.walk === "manual" ? "manual" : "auto", d }); } function setModal(patch) { setSchedModal(m => (m ? { ...m, ...patch } : m)); } function saveModal() { const m = schedModal; if (!m) return; const dd = m.d || rows.find(r => r.id === m.attrId) || {}; const entry = { id: m.mode === "edit" ? m.id : newId(), attrId: m.attrId, name: m.name, park: m.park, kind: m.kind, date: m.date, start: clamp(N(m.start), 0, SCHED_END_MIN), dur: Math.max(5, N(m.dur)), wait: Math.max(0, N(m.wait)), buffer: Math.max(0, N(m.buffer)), source: m.source, walk: m.walk === "manual" ? "manual" : "auto", lat: dd.lat != null ? dd.lat : null, lng: dd.lng != null ? dd.lng : null }; setSchedule(prev => m.mode === "edit" ? prev.map(e => e.id === m.id ? entry : e) : [...prev, entry]); if (m.date && m.date !== schedDate) setSchedDate(m.date); setSchedModal(null); } function removeEntry(id) { schedUserClearedRef.current = true; setSchedule(prev => prev.filter(e => e.id !== id)); setConfirmDel(null); setSchedModal(null); } function entryCoord(e) { if (e && e.lat != null && e.lng != null) return { lat: N(e.lat), lng: N(e.lng) }; const r = e && rows.find(x => x.id === e.attrId); return (r && r.lat != null && r.lng != null) ? { lat: N(r.lat), lng: N(r.lng) } : null; } function pairKey(fromId, toId) { return fromId + "~" + toId; } const OSRM = "https://routing.openstreetmap.de/routed-foot"; // Turn-by-turn steps for ONE leg — fetched lazily, only when directions open. function legUrl(a, b) { return `${OSRM}/route/v1/foot/${a.lng},${a.lat};${b.lng},${b.lat}?overview=false&steps=true&geometries=polyline`; } // Durations + distances for a whole day in ONE matrix call (no per-leg calls). function tableUrl(stops) { return `${OSRM}/table/v1/foot/${stops.map(s => `${s.lng},${s.lat}`).join(";")}?annotations=duration,distance`; } // Full route geometry (encoded polyline) for ONE leg — the drawable walking path. // overview=full returns the complete line; we decode it client-side and cache per pair. function geomUrl(a, b) { return `${OSRM}/route/v1/foot/${a.lng},${a.lat};${b.lng},${b.lat}?overview=full&geometries=polyline&steps=false`; } // Consecutive (from -> to) pairs needing a walking route, for the calendar's day // and any open modal's day. Re-derived from the schedule, so auto times recompute // on every adjustment; routes are cached by attraction pair so most are reused. const routePairs = useMemo(() => { const days = new Set([schedDate]); if (schedModal && schedModal.date) days.add(schedModal.date); const out = [], seen = new Set(); const addPair = (from, to) => { if (!from || !to || from.attrId === to.attrId || entryWalkMode(to) !== "auto") return; const a = entryCoord(from), b = entryCoord(to); if (!a || !b) return; const key = pairKey(from.attrId, to.attrId); if (seen.has(key)) return; seen.add(key); out.push({ key, a, b, fromName: from.name, samePark: from.park === to.park }); }; for (const day of days) { const ents = schedule.filter(s => s.date === day).sort((x, y) => x.start - y.start || x.dur - y.dur); for (let i = 1; i < ents.length; i++) addPair(ents[i - 1], ents[i]); } if (schedModal && schedModal.attrId) { const prev = schedule.filter(s => s.date === schedModal.date && s.id !== schedModal.id && s.start <= N(schedModal.start)).sort((a, b) => b.start - a.start)[0]; if (prev) addPair(prev, { attrId: schedModal.attrId, name: schedModal.name, park: schedModal.park, lat: schedModal.d && schedModal.d.lat, lng: schedModal.d && schedModal.d.lng, walk: schedModal.walk }); } return out; }, [schedule, schedDate, schedModal, rows]); const pendingPairs = useMemo(() => routePairs.filter(p => !routeCache[p.key]), [routePairs, routeCache]); // Distinct stops (with coords) across the calendar day, the modal's day, and the // modal's prospective attraction — the coordinate list fed to the OSRM table call. const routeStops = useMemo(() => { const days = new Set([schedDate]); if (schedModal && schedModal.date) days.add(schedModal.date); const seen = new Set(), stops = []; const add = (e) => { if (!e || seen.has(e.attrId)) return; const c = entryCoord(e); if (!c) return; seen.add(e.attrId); stops.push({ id: e.attrId, lat: c.lat, lng: c.lng }); }; for (const day of days) for (const s of schedule.filter(s => s.date === day).sort((x, y) => x.start - y.start || x.dur - y.dur)) add(s); if (schedModal && schedModal.attrId) add({ attrId: schedModal.attrId, lat: schedModal.d && schedModal.d.lat, lng: schedModal.d && schedModal.d.lng }); return stops; }, [schedule, schedDate, schedModal, rows]); // ONE matrix call covers every pair, so we fetch whenever a consecutive pair is // missing and there are >=2 stops. The result fills routeCache for ALL pairs. const tableSQL = useMemo(() => { if (!idbReady || !pendingPairs.length || routeStops.length < 2 || !(view === "schedule" || schedModal)) return ""; return `SELECT code, CAST(durations AS VARCHAR) AS durations, CAST(distances AS VARCHAR) AS distances FROM read_json('${tableUrl(routeStops)}', columns={code:'VARCHAR', durations:'JSON', distances:'JSON'})`; }, [idbReady, pendingPairs.length, routeStops, view, schedModal]); const routeQ = useSQLQuery(tableSQL, { enabled: !!tableSQL }); useEffect(() => { if (!tableSQL || !Array.isArray(routeQ.data) || routeQ.data === routeDataRef.current) return; routeDataRef.current = routeQ.data; const row = routeQ.data[0]; let dur = null, dist = null; if (row && row.code === "Ok") { try { dur = JSON.parse(row.durations); } catch (_) {} try { dist = JSON.parse(row.distances); } catch (_) {} } const addv = {}; if (Array.isArray(dur)) { for (let i = 0; i < routeStops.length; i++) for (let j = 0; j < routeStops.length; j++) { if (i === j) continue; const v = dur[i] && dur[i][j]; if (v == null) continue; const dm = (Array.isArray(dist) && dist[i]) ? dist[i][j] : null; addv[pairKey(routeStops[i].id, routeStops[j].id)] = { dur: Math.round(N(v)), dist: dm != null ? Math.round(N(dm)) : null, ts: Date.now() }; } } else { for (const p of pendingPairs) addv[p.key] = { failed: true, ts: Date.now() }; } if (Object.keys(addv).length) setRouteCache(prev => ({ ...prev, ...addv })); }, [routeQ.data, tableSQL]); // Lazy turn-by-turn: only fetch a leg's steps when its directions are expanded. const stepPair = useMemo(() => { if (!dirOpen || !schedModal || entryWalkMode(schedModal) !== "auto") return null; const m = schedModal; const prev = schedule.filter(s => s.date === m.date && s.id !== m.id && s.start <= N(m.start)).sort((a, b) => b.start - a.start)[0]; if (!prev || prev.attrId === m.attrId) return null; const a = entryCoord(prev), b = entryCoord({ attrId: m.attrId, lat: m.d && m.d.lat, lng: m.d && m.d.lng }); if (!a || !b) return null; return { key: pairKey(prev.attrId, m.attrId), a, b }; }, [dirOpen, schedModal, schedule, rows]); const stepSQL = useMemo(() => { if (!stepPair || stepCache[stepPair.key]) return ""; return `SELECT code, CAST(routes->0->'legs'->0->'steps' AS VARCHAR) AS steps FROM read_json('${legUrl(stepPair.a, stepPair.b)}', columns={code:'VARCHAR', routes:'JSON'})`; }, [stepPair, stepCache]); const stepQ = useSQLQuery(stepSQL, { enabled: !!stepSQL }); useEffect(() => { if (!stepSQL || !stepPair || !Array.isArray(stepQ.data) || stepQ.data === stepDataRef.current) return; stepDataRef.current = stepQ.data; const row = stepQ.data[0]; const steps = (row && row.code === "Ok") ? buildSteps(row.steps) : []; setStepCache(prev => ({ ...prev, [stepPair.key]: steps })); }, [stepQ.data, stepSQL]); // ---- Walking-path geometry for the map's route lines ---- // Consecutive (prev -> entry) legs of the SELECTED day, in start order, each with // its pair key + endpoints. Drives both the drawn lines and the geometry fetch. const dayLegs = useMemo(() => { const ents = schedule.filter(s => s.date === schedDate).sort((x, y) => x.start - y.start || x.dur - y.dur); const out = []; for (let i = 1; i < ents.length; i++) { const from = ents[i - 1], to = ents[i]; if (from.attrId === to.attrId) continue; const a = entryCoord(from), b = entryCoord(to); if (!a || !b) continue; out.push({ key: pairKey(from.attrId, to.attrId), a, b, toStart: to.start }); } return out; }, [schedule, schedDate, rows]); // Fetch one missing leg's full geometry at a time (overview=full polyline), only // when the schedule map is in view and the day has >=2 stops. Results cache per // pairKey in geomCache (IDB geom/v1), so a pair is fetched at most once ever. const geomPair = useMemo(() => { if (!idbReady || view !== "schedule" || dayLegs.length < 1) return null; return dayLegs.find(l => !geomCache[l.key]) || null; }, [idbReady, view, dayLegs, geomCache]); const geomSQL = useMemo(() => { if (!geomPair) return ""; return `SELECT code, CAST(routes->0->'geometry' AS VARCHAR) AS geometry FROM read_json('${geomUrl(geomPair.a, geomPair.b)}', columns={code:'VARCHAR', routes:'JSON'})`; }, [geomPair]); const geomQ = useSQLQuery(geomSQL, { enabled: !!geomSQL }); useEffect(() => { if (!geomSQL || !geomPair || !Array.isArray(geomQ.data) || geomQ.data === geomDataRef.current) return; geomDataRef.current = geomQ.data; const row = geomQ.data[0]; let path = []; if (row && row.code === "Ok" && row.geometry) { // geometry comes back as a JSON string ("\"\""); strip the quotes. let enc = String(row.geometry); if (enc[0] === '"') { try { enc = JSON.parse(enc); } catch (_) { enc = enc.replace(/^"|"$/g, ""); } } path = decodePolyline(enc, 5).map(p => [p[0], p[1]]); } setGeomCache(prev => ({ ...prev, [geomPair.key]: path })); // empty array marks "fetched, no path" so we don't refetch }, [geomQ.data, geomSQL]); // Which drawn leg is the "next" one (rendered solid): only when the selected day // is today and there is an upcoming event — the leg INTO the first entry that // hasn't started yet. Otherwise none is solid (all legs dotted). Recomputes each // minute via `clockTick` so the solid line advances as the day progresses. const nextLegKey = useMemo(() => { if (schedDate !== todayYMD()) return null; const nd = new Date(); const nowMin = nd.getHours() * 60 + nd.getMinutes(); const leg = dayLegs.find(l => l.toStart > nowMin); return leg ? leg.key : null; }, [dayLegs, schedDate, clockTick]); useEffect(() => { if (view !== "schedule" || schedDate !== todayYMD()) return; const id = setInterval(() => setClockTick(t => t + 1), 30000); return () => clearInterval(id); }, [view, schedDate]); // Predicted (historical-average) standby waits: loaded once from wait_pred and // looked up by attraction + isodow + hour + holiday day-class. Loads when the // schedule is open or an attraction is selected, then stays cached. const needPred = liveEnabled && (view === "schedule" || selectedId != null); const predSQL = (idbReady && (needPred || predLoaded)) ? 'SELECT attr_id::VARCHAR AS attr_id, dow, hour, day_class, avg_wait FROM "disney_orlando"."main"."wait_pred"' : ""; const predQ = useSQLQuery(predSQL, { enabled: !!predSQL }); useEffect(() => { if (!predLoaded && Array.isArray(predQ.data) && predQ.data.length) setPredLoaded(true); }, [predQ.data, predLoaded]); const predMap = useMemo(() => { const m = {}; if (Array.isArray(predQ.data)) for (const r of predQ.data) { (m[r.attr_id] = m[r.attr_id] || {})[r.dow + "|" + r.hour + "|" + r.day_class] = N(r.avg_wait); } return m; }, [predQ.data]); // Historical wait-time quantiles per (attraction, hour, day type). Day type is // weekday / weekend / holiday / holiday_weekend, derived in SQL the same way the // viewed-date helpers derive it in JS so the rendered boxplot matches the date. // p05/q1/med/q3/p95 power a Tufte-minimal boxplot per operating hour. ~2400 small // rows; gated like predSQL so it never blocks first render, runs once in the // background, then is cached in IndexedDB (wait_box/v1) and hydrated next visit. const boxSQL = (idbReady && (needPred || boxLoaded)) ? `SELECT m.attr_id::VARCHAR AS attr_id, w.hour, CASE WHEN w.day_class='holiday' THEN 'holiday' WHEN w.day_class='holiday_weekend' THEN 'holiday_weekend' WHEN w.dow IN (6,7) THEN 'weekend' ELSE 'weekday' END AS dtype, quantile_cont(w.actual, 0.05) AS p05, quantile_cont(w.actual, 0.25) AS q1, quantile_cont(w.actual, 0.50) AS med, quantile_cont(w.actual, 0.75) AS q3, quantile_cont(w.actual, 0.95) AS p95, count(*) AS n FROM "disney_orlando"."main"."wait_times_sorted" w JOIN "disney_orlando"."main"."wait_slug_map" m USING (slug) WHERE w.actual IS NOT NULL AND w.actual >= 0 GROUP BY ALL` : ""; const boxQ = useSQLQuery(boxSQL, { enabled: !!boxSQL }); useEffect(() => { if (Array.isArray(boxQ.data) && boxQ.data.length) { const norm = boxQ.data.map(r => ({ attr_id: r.attr_id, hour: N(r.hour), dtype: r.dtype, p05: N(r.p05), q1: N(r.q1), med: N(r.med), q3: N(r.q3), p95: N(r.p95), n: N(r.n) })); setBoxRows(norm); if (!boxLoaded) setBoxLoaded(true); idbPut(dbRef.current, "wait_box/v1", norm); } }, [boxQ.data, boxLoaded]); // boxMap[attr_id][dtype][hour] = {p05,q1,med,q3,p95,n} const boxMap = useMemo(() => { const m = {}; if (Array.isArray(boxRows)) for (const r of boxRows) { const a = (m[r.attr_id] = m[r.attr_id] || {}); const d = (a[r.dtype] = a[r.dtype] || {}); d[N(r.hour)] = { p05: N(r.p05), q1: N(r.q1), med: N(r.med), q3: N(r.q3), p95: N(r.p95), n: N(r.n) }; } return m; }, [boxRows]); // Walking info for an ordered (prev -> entry) pair, honoring the auto/manual // toggle: routed time when cached, straight-line estimate while loading/failed. function walkBetween(from, to) { if (!from || !to || from.attrId === to.attrId) return null; const rc = routeCache[pairKey(from.attrId, to.attrId)]; const samePark = from.park === to.park; if (rc && !rc.failed && rc.dur != null) return { min: Math.min(30, Math.max(1, Math.round(rc.dur / 60))), dist: rc.dist, samePark, source: "route" }; const a = entryCoord(from), b = entryCoord(to); const est = (a && b) ? Math.min(30, walkMinutes(haversine(a.lat, a.lng, b.lat, b.lng))) : null; return { min: est, dist: null, samePark, source: (rc && rc.failed) ? "est" : "pending" }; } function rankButtons(id, sz) { const cur = ranks[id]; return (

{Object.entries(RANKS).map(([key, cfg]) => { const RIcon = cfg.Icon; const active = cur === key; return ( ); })}

); } // Single touch-friendly priority selector for a list row: a compact icon // trigger that opens an icon-only menu. Rendered position:fixed so it is not // clipped by the scrolling list. function rankPicker(id) { const cur = ranks[id]; const cfg = cur ? RANKS[cur] : null; const Trig = cfg ? cfg.Icon : SlidersHorizontal; const open = rankMenu && rankMenu.id === id; return (

{open ? (

e.stopPropagation()} style={{ position: "fixed", right: rankMenu.right, top: rankMenu.top, zIndex: 9999, background: "#fff", border: "1px solid #d9d9d9", borderRadius: 9, boxShadow: "0 6px 20px rgba(0,0,0,.18)", padding: 4, display: "flex", flexDirection: "column", gap: 3 }}> {Object.entries(RANKS).map(([key, c]) => { const RI = c.Icon; const on = cur === key; return ( ); })} {cur ? ( ) : null}

) : null}

); } function legend() { return (

Rides: {AGE_ORDER.map(b => { const A = AGES[b]; const I = A.Icon; return ( {A.label} ); })} Show You

); } function filterPanel() { return (

setFQuery(e.target.value)} placeholder="Search rides & shows…" style={{ width: "100%", padding: "7px 9px 7px 28px", borderRadius: 8, border: "1px solid #d9d9d9", fontSize: 13, outline: "none", boxSizing: "border-box" }} /> {fQuery ? : null}

Type

{[["attraction", "Rides", "#231f20"], ["show", "Shows", SHOW.color]].map(([k, lbl, col]) => { const on = fTypes.includes(k); return ( ); })}

Park

{PARKS.map(p => { const on = fParks.includes(p.name); return ( ); })}

Ride age (shows always shown)

{AGE_ORDER.map(b => { const A = AGES[b]; const I = A.Icon; const on = fAges.includes(b); return ( ); })}

My ranking

{Object.entries(RANKS).map(([key, cfg]) => { const I = cfg.Icon; const on = fRanks.includes(key); return ( ); })} {(() => { const on = fRanks.includes("unranked"); return ( ); })()}

setFOpen(e.target.checked)} /> Operating only
Sort
{anyFilter ? : null}

); } function ctrlBtn(onClick, child, title, active) { return ( ); } function tileImgs() { if (!proj) return null; const store = cacheRef.current[basemap] || {}; const t = tf; const out = []; const detailZ = clamp(Math.round(Math.log2((proj.P * t.k) / 256)), 13, 16); // Draw only the two zoom levels nearest the current scale (coarse -> fine). // z13-15 each fully cover the resort, so detailZ-1 is a complete backdrop // with minimal upscaling while detailZ adds crispness on top. This avoids // blowing a single coarse tile up to ~10k px, which the browser clamps and // renders smeared/stretched. const z0 = Math.max(13, detailZ - 1); for (let z = z0; z <= detailZ; z++) { const arr = store[z]; if (!arr || !arr.length) continue; const n = Math.pow(2, z); const wpx = (proj.P / n) * t.k; const w = Math.ceil(wpx) + 1; for (const tl of arr) { const left = (proj.sx0 + (tl.x / n) * proj.P) * t.k + t.x; const top = (proj.sy0 + (tl.y / n) * proj.P) * t.k + t.y; const mx = size.w, my = size.h; if (left > size.w + mx || top > size.h + my || left + wpx < -mx || top + wpx < -my) continue; out.push(); } } return out; } function mapArea() { const maxStyle = isMax ? { position: "fixed", left: 0, top: 0, width: "100%", height: "100%", borderRadius: 0, zIndex: 1000 } : { position: "relative", width: "100%", height: mapH, borderRadius: 12 }; const radarLoading = radarOn && (radarTilesQ.isLoading || radarListQ.isLoading); const lightningLoading = lightningOn && (lightningQ.isLoading || fedTimesQ.isLoading || fedTilesQ.isLoading); return (

{tileImgs()}

{ctrlBtn(() => setIsMax(m => !m), isMax ? : , isMax ? "Exit full screen" : "Full screen")} {ctrlBtn(() => zoomBy(1.5), , "Zoom in")} {ctrlBtn(() => zoomBy(1 / 1.5), , "Zoom out")} {ctrlBtn(zoomFull, , "Fit all parks")} {ctrlBtn(() => setShowWeather(s => !s), , "Weather forecast", showWeather)} {lightningStale ? (() => { const pa = new Date(lightning.newestT); let hh = pa.getHours(); const ap = hh >= 12 ? "p" : "a"; hh = hh % 12 || 12; const tlabel = `${hh}:${String(pa.getMinutes()).padStart(2, "0")}${ap}`; const ageTxt = dataAgeMin >= 60 ? `${Math.floor(dataAgeMin / 60)}h${String(dataAgeMin % 60).padStart(2, "0")}m` : `${dataAgeMin}m`; return (
{tlabel}
); })() : null}

Imagery © Esri
{radarOn ? (

{Object.entries(RADAR_SOURCES).map(([key, s]) => { const on = radarSite === key; return ; })}
{radarFrames.length ? (

{radarFrames.map((f, i) => { const active = i === Math.min(radarIdx, radarFrames.length - 1); return
{relMin(radarFrames[Math.min(radarIdx, radarFrames.length - 1)].time)}
) : ( {Array.isArray(radarListQ.data) && !radarMeta.length ? "no recent scans" : (<> loading radar…)} )}
) : null} {showWeather ? (

Weather · Walt Disney World
{!wx ? (
Loading forecast…
) : (() => { const rnd = (v) => (v == null ? "\u2014" : Math.round(v)); const cur = wx.current, h = wx.hourly, dl = wx.daily; const ci = wmoInfo(cur.weather_code); const CI = ci.Icon; const i0 = (() => { const idx = (h.time || []).findIndex(t => t > cur.time); return idx < 0 ? 0 : idx; })(); const nhInfo = wmoInfo(h.weather_code[i0]); const strip = []; for (let i = i0; i < Math.min(i0 + 9, (h.time || []).length); i++) strip.push({ t: h.time[i], prob: h.precipitation_probability[i] }); const day = (k) => ({ code: dl.weather_code[k], hi: dl.temperature_2m_max[k], lo: dl.temperature_2m_min[k], prob: dl.precipitation_probability_max[k], sum: dl.precipitation_sum[k] }); const d0 = day(0), d1 = day(1); const line = (label, body, Icon) => (

{label}

{body}

); return (

{rnd(cur.temperature_2m)}°F

{ci.label} now

{line("Next hour", `${nhInfo.label}, ${rnd(h.temperature_2m[i0])}\u00b0F \u00b7 ${h.precipitation_probability[i0] ?? 0}% chance of rain`, nhInfo.Icon)} {line("Rest of today", `${wmoInfo(d0.code).label}, high ${rnd(d0.hi)}\u00b0 / low ${rnd(d0.lo)}\u00b0 \u00b7 ${d0.prob ?? 0}% chance${d0.sum > 0 ? ` \u00b7 ${d0.sum}" expected` : ""}`, wmoInfo(d0.code).Icon)} {line("Tomorrow", `${wmoInfo(d1.code).label}, high ${rnd(d1.hi)}\u00b0 / low ${rnd(d1.lo)}\u00b0 \u00b7 ${d1.prob ?? 0}% chance${d1.sum > 0 ? ` \u00b7 ${d1.sum}" expected` : ""}`, wmoInfo(d1.code).Icon)}

Rain chance · next hours

{strip.map((s, i) => (

{s.prob ?? 0}

{(fmtTime(s.t) || "").replace(":00", "")}

))}

Forecast: Open-Meteo · Radar/HRRR: NWS / Iowa Env. Mesonet · Lightning: GOES GLM / SSEC RealEarth

); })()}
) : null} {selected ? (() => { const isShow = selected.kind === "show"; const ns = isShow ? nextShow(selected.showtimes) : null; const ll = isShow ? null : llInfo(selected); const A = iconFor(selected); const I = A.Icon; const otherDay = view === "schedule" && schedDate !== todayYMD(); const twNow = (!isShow && selected.status === "OPERATING") ? predFor(predMap, selected.id, dowIso(todayYMD()), new Date().getHours(), dayClassYMD(todayYMD())) : null; return (

{selected.name}

{selected.park}{isShow ? " · Show" : ""}

{!liveLoaded ? (
Updating live info…
) : isShow ? ( otherDay ? (

{allShowtimes(selected.showtimes).length ? `${allShowtimes(selected.showtimes).length} showtimes` : "Showtimes"}

posted times · all below

) : (

{ns ? (ns.upcoming ? ns.time : "Done today") : (selected.status === "OPERATING" ? "See times" : "Closed")}

{ns && ns.upcoming ? `next show · ${ns.left} left today` : "next show"}

) ) : ( <>

{selected.status === "OPERATING" ? (selected.wait_time != null ? `${N(selected.wait_time)}m` : "Open") : (selected.status === "DOWN" ? "Down" : selected.status === "REFURBISHMENT" ? "Refurb" : "Closed")}

standby

{ll ? (

{ll.text}{ll.price ? · {ll.price} : null}

lightning lane

) :
No Lightning Lane
} {twNow != null ? (

~{twNow}m

typical now

) : null} )}
{(!isShow && boxMap[selected.id]) ? (() => { // Wait bucket -> color (reuses the bar-chart ramp). A value's color is // the bucket it falls in: 0–15 green, 15–45 amber, 45–75 orange, 75+ red. const BUCKETS = [[15, "#2d7a00"], [45, "#e6a32e"], [75, "#e18727"], [Infinity, "#bc1200"]]; const buckColor = (v) => { for (const [hi, c] of BUCKETS) if (v < hi) return c; return "#bc1200"; }; // Day type for the VIEWED date — derived exactly like the SQL `dtype`. const dc = dayClassYMD(schedDate), dw = dowIso(schedDate); const wantType = dc === "holiday" ? "holiday" : dc === "holiday_weekend" ? "holiday_weekend" : (dw >= 6 ? "weekend" : "weekday"); const TLABEL = { weekday: "Weekday", weekend: "Weekend", holiday: "Holiday", holiday_weekend: "Holiday weekend" }; const byType = boxMap[selected.id]; // Pick the requested day type; if it has no hours, fall back to the // dtype with the most data (and flag the substitution to the user). const hasHours = (t) => byType[t] && Object.keys(byType[t]).length; let useType = wantType, fellBack = false; if (!hasHours(useType)) { const order = ["weekday", "weekend", "holiday_weekend", "holiday"].filter(hasHours); if (!order.length) return null; useType = order.map(t => [t, Object.values(byType[t]).reduce((s, d) => s + d.n, 0)]).sort((a, b) => b[1] - a[1])[0][0]; fellBack = true; } const byHour = byType[useType]; const hrs = Object.keys(byHour).map(Number).filter(h => byHour[h].n > 0).sort((a, b) => a - b); if (!hrs.length) return null; // Shared x-axis: 0 -> max shown p95 (rounded up to a tidy step, min 30). const xmaxRaw = Math.max(...hrs.map(h => byHour[h].p95), 30); const step = xmaxRaw <= 60 ? 15 : xmaxRaw <= 120 ? 30 : 60; const XMAX = Math.ceil(xmaxRaw / step) * step; const pct = (v) => clamp((v / XMAX) * 100, 0, 100); const hourLabel = (h) => { const ap = h >= 12 ? "p" : "a"; const hh = h % 12 || 12; return hh + ap; }; // Faint bucket reference bands behind the axis (Tufte low-ink context). const bandEdges = [0, 15, 45, 75].filter(e => e < XMAX).concat(XMAX); const bandCols = ["#2d7a0010", "#e6a32e12", "#e1872712", "#bc120012"]; const ticks = []; for (let t = 0; t <= XMAX; t += step) ticks.push(t); return (

Wait by hour {TLABEL[useType]}{fellBack ? " *" : ""}

{hrs.map(h => { const d = byHour[h]; const faint = d.n < 8; // de-emphasize noisy hours with few observations const op = faint ? 0.5 : 1; const cQ1 = buckColor(d.q1), cMed = buckColor(d.med), cQ3 = buckColor(d.q3); const lo = pct(d.p05), hi = pct(d.p95), q1 = pct(d.q1), q3 = pct(d.q3), me = pct(d.med); return (
{hourLabel(h)} {/* bucket reference bands */} {bandEdges.slice(0, -1).map((e, i) => { const l = pct(e), r = pct(bandEdges[i + 1]); return ; })} {/* whisker p05 -> p95 (thin line) */} {/* IQR box Q1 -> Q3 (colored ends) */} {/* median marker */}
); })}
{/* shared x-axis ticks (minutes) */}
{ticks.map(t => ( {t === XMAX ? t + "m" : t} ))}

); })() : null} {liveLoaded ? (() => { const shows = isShow ? allShowtimes(selected.showtimes) : []; const st = String(selected.ll_state || "").toUpperCase(); const llOpen = !isShow && (selected.ll_return_start || (st && st !== "FINISHED" && st !== "UNAVAILABLE")); if (isShow ? shows.length === 0 : !llOpen) return null; const start = fmtTime(selected.ll_return_start), end = fmtTime(selected.ll_return_end); return (
{(expanded || otherDay) ? (
{isShow ? (
{shows.map((s, i) => ( {s.sameStartEnd ? s.time : `${s.time}\u2013${s.endTime}`} ))}
) : (start || end) ? (
{start || "\u2014"}{end ? ` \u2013 ${end}` : ""} {selected.ll_price ? · {selected.ll_price} : null}
next available return window{selected.ll_price ? " \u00b7 per guest" : ""}

) : (
Sold out for today
)}
) : null}
); })() : null}
{rankButtons(selected.id)}

); })() : null}
); } function listArea(height) { const otherDay = view === "schedule" && schedDate !== todayYMD(); return (

{filtered.length} of {rows.length} · rides & shows

{filtered.map(d => { const A = iconFor(d); const I = A.Icon; const isShow = d.kind === "show"; const ns = isShow ? nextShow(d.showtimes) : null; const ll = isShow ? null : llInfo(d); const sel = d.id === selectedId; const operating = !liveLoaded || d.status === "OPERATING"; return (
{ setSelectedId(d.id); centerOnRow(d); }} style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: 10, cursor: "pointer", background: sel ? "#eef6fb" : "#fff", border: sel ? "1px solid #aacfe6" : "1px solid #ededed" }}>

{d.name}

{!liveLoaded ? ( Updating… ) : isShow ? ( {otherDay ? (allShowtimes(d.showtimes).length ? `${allShowtimes(d.showtimes).length} showtimes` : "Showtimes") : (ns ? (ns.upcoming ? `Next ${ns.time}` : "Done today") : (operating ? "Showtimes vary" : "Closed"))} ) : ( {operating ? (d.wait_time != null ? `${N(d.wait_time)} min` : "Open") : (d.status === "DOWN" ? "Down" : d.status === "REFURBISHMENT" ? "Refurb" : "Closed")} )} {liveLoaded && ll ? {ll.text}{ll.price ? ` · ${ll.price}` : ""} : null}

{rankPicker(d.id)}

); })} {!filtered.length && !isLoading ?
Nothing matches your filters.
: null}

); } function calendarArea(height) { const today = todayYMD(); const contentH = (SCHED_END_MIN - SCHED_START_MIN) * SCHED_PX_PER_MIN; const { placed, lanes } = layoutDay(dayEntries); const nd = new Date(); const nowMin = nd.getHours() * 60 + nd.getMinutes(); const sortedDay = dayEntries.slice().sort((a, b) => a.start - b.start || a.dur - b.dur); const walkOf = {}; for (let i = 1; i < sortedDay.length; i++) { if (entryWalkMode(sortedDay[i]) !== "auto") continue; const info = walkBetween(sortedDay[i - 1], sortedDay[i]); if (info && info.min != null) walkOf[sortedDay[i].id] = { ...info, fromName: sortedDay[i - 1].name }; } const hours = []; for (let mn = SCHED_START_MIN; mn <= SCHED_END_MIN; mn += 60) hours.push(mn); return (

{ymdLabel(schedDate)}{schedDate === today ? " · Today" : ""}
e.target.value && setSchedDate(e.target.value)} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", border: "none", padding: 0 }} />
{schedDate !== today ? ( ) : null}

{hours.map(mn => (
{minToLabel(mn).replace(":00", "")}
))} {schedDate === today && nowMin >= SCHED_START_MIN && nowMin <= SCHED_END_MIN ? (

) : null}
{placed.map(e => { const rr = rows.find(x => x.id === e.attrId); const col = PARK_COLOR[e.park] || (e.kind === "show" ? SHOW.color : (rr ? iconFor(rr).color : "#0777b3")); const top = (e.start - SCHED_START_MIN) * SCHED_PX_PER_MIN; const h = Math.max(16, e.dur * SCHED_PX_PER_MIN); const w = `calc(${100 / lanes}% - 3px)`; const left = `calc(${(100 / lanes) * e.lane}% + ${e.lane ? 3 : 0}px)`; const emode = entryWalkMode(e); const wk = emode === "auto" ? walkOf[e.id] : null; const bufH = (emode === "manual" ? (e.buffer || 0) : 0) * SCHED_PX_PER_MIN; const travelH = Math.max(bufH, wk ? Math.max(wk.min * SCHED_PX_PER_MIN, 14) : 0); const waitMin = N(e.wait) || 0; const waitH = waitMin > 0 ? Math.max(waitMin * SCHED_PX_PER_MIN, 13) : 0; return (
{travelH > 0 ? (
{wk ? {wk.source === "pending" ? "…" : `~${wk.min}m`}{wk.samePark ? "" : "+"} : null}
) : null} {waitH > 0 ? (
0 ? 0 : "6px 6px 0 0", background: "#f3a81e22", borderLeft: "3px solid #e18727", overflow: "hidden", display: "flex", alignItems: "flex-start", padding: "1px 4px", boxSizing: "border-box" }}> ~{waitMin}m wait
) : null}
); })}

{dayEntries.length ? `${dayEntries.length} planned · tap to edit` : "Tap a calendar icon in the list to add"} travel wait

); } function scheduleModalUI() { if (!schedModal) return null; const m = schedModal; const d = m.d || rows.find(r => r.id === m.attrId) || null; const isShow = m.kind === "show"; const today = m.date === todayYMD(); const showOpts = (isShow && d && today && liveLoaded) ? schedShowtimes(d.showtimes) : []; const llStart = d ? isoToMin(d.ll_return_start) : null, llEnd = d ? isoToMin(d.ll_return_end) : null; const hasLL = !isShow && today && liveLoaded && llStart != null; const A = isShow ? SHOW : (d ? iconFor(d) : SHOW); const col = PARK_COLOR[m.park] || "#0777b3"; const prevEntry = schedule.filter(s => s.date === m.date && s.id !== m.id && s.start <= N(m.start)).sort((a, b) => b.start - a.start)[0] || null; const walkPrevInfo = (entryWalkMode(m) === "auto" && prevEntry) ? walkBetween(prevEntry, { attrId: m.attrId, name: m.name, park: m.park, lat: d && d.lat, lng: d && d.lng }) : null; const predWait = (!isShow && m.source !== "ll") ? predFor(predMap, m.attrId, dowIso(m.date), Math.floor(N(m.start) / 60), dayClassYMD(m.date)) : null; const pickShow = (s) => setModal({ source: "show", start: s.startMin, dur: (s.endMin != null && s.endMin > s.startMin) ? s.endMin - s.startMin : (N(d && d.duration_min) || N(m.dur)), wait: 0 }); const pickLL = () => setModal({ source: "ll", start: llStart, dur: (llEnd != null && llEnd > llStart) ? llEnd - llStart : (N(d && d.duration_min) || N(m.dur)), wait: 0 }); const pickCustom = () => setModal({ source: "custom", dur: d ? baseDur(d) : N(m.dur), wait: d ? baseWait(d) : N(m.wait) }); const tab = (label, onClick, on) => ( ); const fieldLbl = { fontSize: 10, fontWeight: 700, color: "#9a9a9a", textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 4 }; const inputStyle = { width: "100%", padding: "7px 9px", borderRadius: 8, border: "1px solid #d9d9d9", fontSize: 14, outline: "none", boxSizing: "border-box", background: "#fff", color: "#231f20" }; return (
{ setSchedModal(null); setConfirmDel(null); }} style={{ position: "fixed", inset: 0, zIndex: 1200, background: "rgba(10,12,24,.45)", display: "flex", alignItems: "center", justifyContent: "center", padding: 14 }}>
e.stopPropagation()} style={{ width: "min(420px, 100%)", maxHeight: "calc(100% - 28px)", overflowY: "auto", background: "#fff", borderRadius: 16, boxShadow: "0 12px 40px rgba(0,0,0,.45)", padding: 16 }}>

{m.name}

{m.park}{isShow ? " · Show" : ""}{m.mode === "edit" ? " · editing" : ""}

{(showOpts.length || hasLL) ? (
{tab("Custom time", pickCustom, m.source === "custom")} {showOpts.length ? tab("Showtimes", () => pickShow(showOpts.find(s => s.upcoming) || showOpts[0]), m.source === "show") : null} {hasLL ? tab("Lightning Lane", pickLL, m.source === "ll") : null}
) : null} {m.source === "show" && showOpts.length ? (

Pick a showtime

{showOpts.map((s, i) => { const on = s.startMin === N(m.start); return ( ); })}

) : m.source === "ll" && hasLL ? (

Lightning Lane return window

{minToLabel(llStart)}{llEnd != null ? ` – ${minToLabel(llEnd)}` : ""}{d && d.ll_price ? · {d.ll_price} : null}

Block defaults to the full return window.

) : null}

Date
e.target.value && setModal({ date: e.target.value })} style={inputStyle} />

Start
{ const v = hmToMin(e.target.value); if (v != null) setModal({ start: v, source: "custom" }); }} style={inputStyle} />

{/* Times in real-world order: travel → wait → ride, all on one row. */}

Travel
{entryWalkMode(m) === "auto" ? ( ) : ( setModal({ buffer: e.target.value })} style={inputStyle} /> )}

Wait
setModal({ wait: e.target.value })} style={inputStyle} />

{isShow ? "Show" : "Ride"}
setModal({ dur: e.target.value })} style={inputStyle} />

{isShow ? "show" : "ride"} {minToLabel(N(m.start))} – {minToLabel(N(m.start) + N(m.dur))} · leave by {minToLabel(Math.max(0, N(m.start) - N(m.wait || 0) - (entryWalkMode(m) === "auto" ? (walkPrevInfo && walkPrevInfo.min ? walkPrevInfo.min : 0) : N(m.buffer))))}
{predWait != null ? ( ) : null} {walkPrevInfo && walkPrevInfo.min != null ? (() => { const stKey = prevEntry ? pairKey(prevEntry.attrId, m.attrId) : null; const steps = stKey ? stepCache[stKey] : null; const loadingSteps = dirOpen && !!stepSQL && !steps; return (

setDirOpen(o => !o)} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6, cursor: "pointer" }}> ~{walkPrevInfo.min} min walk from {prevEntry.name}{walkPrevInfo.dist != null ? ` · ${walkPrevInfo.dist} m` : ""} {dirOpen ? "Hide" : "Directions"}{dirOpen ? : }
{walkPrevInfo.source === "pending" ?
finding fastest route…
: null} {!walkPrevInfo.samePark ?
Different park — allow Disney transport time.
: null} {dirOpen ? ( loadingSteps ? (
Loading turn-by-turn…
) : (steps && steps.length) ? (
{steps.map((s, i) => (
{s.text}{s.dist ? · {s.dist} m : null}
))}
) : (steps && !steps.length) ? (
No turn-by-turn detail for this leg.
) : null ) : null}
); })() : null} {confirmDel === m.id ? (
Remove this from your schedule?

) : (
{m.mode === "edit" ? ( ) : null}
)}

); } function scheduleLayout() { return (
{!isNarrow && filtersOpen ?
{filterPanel()}
: null} {pendingPairs.length ?
routing {pendingPairs.length}…
: null}

{listArea(schedTopH)}

{calendarArea(schedTopH)}

{mapArea()}

{legend()}

); } return (

Walt Disney World — Live Ride & Show Planner

{isNarrow ? ( ) : null} LIVE {!isNarrow ? ( ) : null}

{isError ? (
Couldn't load live data{error ? `: ${String(error).slice(0, 120)}` : "."}
) : null} {isNarrow && showFilters ?
{filterPanel()}
: null} {isLoading ? (
Pulling live waits, Lightning Lane & showtimes…
) : null} {view === "schedule" ? scheduleLayout() : isNarrow ? (
{mapArea()}
{listArea(Math.round((window.innerHeight || 720) * 0.62))}

{legend()}

) : (
{filtersOpen ?
{filterPanel()}
: null}

{mapArea()}

{listArea(mapH - 4)}

{legend()}

)}
Satellite/Street tiles (© Esri) are cached for instant pan/zoom. Drag to pan, pinch or +/− to zoom, full-screen to expand. Purple theatre markers are live shows with the next performance time; ride markers are colored by audience age. Tap any marker or list row to focus it.

Walking directions via OSRM · OpenStreetMap
{scheduleModalUI()}
); }

Walt Disney World Orlando — Live Ride Planner

Comments