// Damnlines NYC Restaurants — live wait-time / queue map (Uber-style design). // Single-file React component (default export). Previews locally via the // @motherduck/react-sql-query shim; saves unmodified as a MotherDuck Dive. // // Data (native MotherDuck, populated by the damnlines_ingest Flight every 1 min): // damnlines.main.venues — venues + metadata // damnlines.main.live_events — append-only wait/queue snapshots // damnlines.main.venue_rollups — hour×day aggregates for windows 1/3/7/30 // damnlines.main.frames — rolling base64 JPEG frames (timelapse) // damnlines.main.nyc_geojson — basemap layers (borough/water/park/street) import { useEffect, useMemo, useRef, useState } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import * as d3 from "d3"; import { AreaChart, Area, ComposedChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts"; import { X, Play, Pause, MapPin, ChevronLeft, Maximize2, Minimize2, History, Star, Clock, Users } from "lucide-react"; // Data this Dive needs. The Dive runtime reads this to attach the share for every // viewer, so people who only have the share link (not the source DB) can open it. // Alias is SUFFIXED so it never collides with the owner's real `damnlines` DB — // all queries below are qualified "damnlines_share"."main"...". export const REQUIRED_DATABASES = [ { type: "share", path: "md:_share/damnlines/9678078d-9809-4069-aca1-51cc976104be", alias: "damnlines_share" }, ]; // ─── Helpers ──────────────────────────────────────────────────────── const N = (v: unknown): number => (v != null && v !== "" ? Number(v) : 0); const poll = (tick: number, sql: string) => `-- refresh:${tick}\n${sql}`; // ─── Design tokens (Uber-inspired: clean, light, high-contrast sans) ─ const FONTS = { sans: `-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif`, }; const C = { bg: "#ffffff", ink: "#000000", ink2: "#161616", grey: "#6b6b6b", grey2: "#9a9a9a", line: "#ececec", surface: "#f5f5f6", calm: "#05a357", // green — short wait mid: "#f5a623", // amber busy: "#e11900", // red — long wait noData: "#c2c2c2", shadowSm: "0 1px 2px rgba(0,0,0,0.08)", shadowMd: "0 6px 24px rgba(0,0,0,0.10)", shadowLg: "0 16px 48px rgba(0,0,0,0.18)", }; // Uber-style light basemap (layered like a real street map) const MAP_C = { land: "#eceef0", water: "#b8d4e3", park: "#cfe3c4", road: "#ffffff", roadCasing: "#dde1e6", // arterial casing minorCasing: "#e4e7eb", // residential-grid casing highway: "#ffe0b0", // warm motorway fill (echoes the reference map) highwayCasing: "#f4bd7e", label: "#7c8085", }; // ─── Constants ────────────────────────────────────────────────────── const POLL_MAP_MS = 15_000; const POLL_DRAWER_MS = 5_000; const BLINK_MS = 800; const STALE_AFTER_MS = 5 * 60_000; const MIN_SAMPLES = 1; // pipeline is young; relax to 1 for the MVP const DRAWER_WIDTH = 420; const MAP_W = 960; const MAP_H = 640; type Metric = "wait" | "queue"; type WindowMode = "preset" | "custom"; type PresetDays = 1 | 3 | 7 | 30; const PRESETS: PresetDays[] = [1, 3, 7, 30]; const SCALES: Record = { wait: { quiet: 0, busy: 25 }, // minutes — TUNE after observing real data queue: { quiet: 0, busy: 20 }, // people — TUNE }; function colorFor(value: number | null, metric: Metric): string { if (value == null) return MAP_C.label; const { quiet, busy } = SCALES[metric]; const t = Math.max(0, Math.min(1, (value - quiet) / (busy - quiet))); return d3.interpolateRgbBasis([C.calm, C.mid, C.busy])(t); } function freshnessLabel(capturedAt: string | null): { text: string; isStale: boolean; isMissing: boolean } { if (!capturedAt) return { text: "no recent activity", isStale: false, isMissing: true }; const ageMs = Date.now() - new Date(capturedAt).getTime(); const isStale = ageMs > STALE_AFTER_MS; const sec = Math.max(1, Math.round(ageMs / 1000)); const text = sec < 60 ? `Updated ${sec}s ago` : sec < 3600 ? `Updated ${Math.round(sec / 60)}m ago` : `Updated ${Math.round(sec / 3600)}h ago`; return { text, isStale, isMissing: false }; } // ─── Polling (visibility-aware) ───────────────────────────────────── function usePolling(intervalMs: number, enabled: boolean): number { const [tick, setTick] = useState(0); useEffect(() => { if (!enabled) return; let visible = document.visibilityState === "visible"; let id: ReturnType | null = null; const start = () => { if (id == null) id = setInterval(() => setTick((t) => t + 1), intervalMs); }; const stop = () => { if (id != null) { clearInterval(id); id = null; } }; const onVis = () => { const now = document.visibilityState === "visible"; if (now && !visible) { setTick((t) => t + 1); start(); } else if (!now && visible) stop(); visible = now; }; if (visible) start(); document.addEventListener("visibilitychange", onVis); return () => { stop(); document.removeEventListener("visibilitychange", onVis); }; }, [intervalMs, enabled]); return tick; } // ─── Data ─────────────────────────────────────────────────────────── type Geo = { type: string; features: Array<{ type: string; geometry: any; properties?: any }> }; type Basemap = { boroughs: Geo | null; water: Geo | null; parks: Geo | null; streets: Geo | null }; // d3.geoMercator reads a polygon wound the "wrong" way as covering the whole // globe (flooding the canvas). Overture/GDAL polygons often come that way, so // reverse any polygon whose spherical area exceeds a hemisphere. function fixWinding(geo: Geo | null): Geo | null { if (!geo) return geo; for (const f of geo.features) { const g: any = f.geometry; if (!g || (g.type !== "Polygon" && g.type !== "MultiPolygon")) continue; try { if (d3.geoArea(f as any) > 2 * Math.PI) { if (g.type === "Polygon") g.coordinates.forEach((ring: any[]) => ring.reverse()); else g.coordinates.forEach((poly: any[]) => poly.forEach((ring: any[]) => ring.reverse())); } } catch { /* leave as-is */ } } return geo; } function useBasemap(): { base: Basemap; isError: boolean } { const q = useSQLQuery(`SELECT level, geojson FROM "damnlines_share"."main"."nyc_geojson" WHERE level IN ('borough','water','park','street')`); const base = useMemo(() => { const out: Basemap = { boroughs: null, water: null, parks: null, streets: null }; if (!Array.isArray(q.data)) return out; for (const r of q.data as any[]) { try { const g = JSON.parse(r.geojson as string) as Geo; if (r.level === "borough") out.boroughs = g; else if (r.level === "water") out.water = g; else if (r.level === "park") out.parks = g; else if (r.level === "street") out.streets = g; } catch { /* ignore a bad layer */ } } out.boroughs = fixWinding(out.boroughs); out.water = fixWinding(out.water); out.parks = fixWinding(out.parks); return out; }, [q.data]); return { base, isError: q.isError }; } // Three render tiers so the grid reads like a real street map: thin cased // residential grid → medium arterials → warm, thick highways on top. const ROAD_HIGHWAY = new Set(["motorway", "trunk"]); const ROAD_ARTERIAL = new Set(["primary", "secondary"]); function splitStreets(streets: Geo | null) { const feats = streets?.features ?? []; const fc = (pred: (cls: string) => boolean): Geo => ({ type: "FeatureCollection", features: feats.filter((f) => pred(String(f.properties?.class))) } as Geo); return { highway: fc((c) => ROAD_HIGHWAY.has(c)), arterial: fc((c) => ROAD_ARTERIAL.has(c)), minor: fc((c) => !ROAD_HIGHWAY.has(c) && !ROAD_ARTERIAL.has(c)), }; } const STREET_LABELS: { name: string; lng: number; lat: number }[] = [ { name: "W HOUSTON ST", lng: -74.0025, lat: 40.7283 }, { name: "CANAL ST", lng: -74.0010, lat: 40.7205 }, { name: "E 14TH ST", lng: -73.9835, lat: 40.7345 }, { name: "DELANCEY ST", lng: -73.9870, lat: 40.7178 }, ]; const HOODS: { name: string; lng: number; lat: number }[] = [ { name: "West Village", lng: -74.0050, lat: 40.7360 }, { name: "Greenwich Village", lng: -73.9976, lat: 40.7330 }, { name: "East Village", lng: -73.9836, lat: 40.7265 }, { name: "SoHo", lng: -74.0020, lat: 40.7235 }, { name: "NoHo", lng: -73.9920, lat: 40.7280 }, { name: "Lower East Side", lng: -73.9840, lat: 40.7180 }, { name: "Gramercy", lng: -73.9840, lat: 40.7380 }, { name: "Midtown", lng: -73.9820, lat: 40.7540 }, { name: "Chinatown", lng: -73.9970, lat: 40.7158 }, { name: "TriBeCa", lng: -74.0089, lat: 40.7163 }, { name: "Two Bridges", lng: -73.9905, lat: 40.7120 }, ]; type Venue = { slug: string; display_name: string; neighborhood: string | null; address: string | null; timezone: string | null; hours_json: string | null; lat: number; lng: number; status: string | null; captured_at: string | null; people_count: number | null; wait_minutes: number | null; }; // MotherDuck's NY office (37 W 17th St, 5th Floor) — a map-only landmark pin. // It joins the dots + label-collision layout in CityMap; clicking it toggles // the address inline in its bubble (never the venue drill-down). Excluded from // the list drawer and the open-now count. const MD_SLUG = "motherduck-hq"; const MD_OFFICE: Venue = { slug: MD_SLUG, display_name: "MotherDuck NYC", neighborhood: "Flatiron", address: "37 W 17th St, 5th Floor NY NY 10011", timezone: null, hours_json: null, lat: 40.73855, lng: -73.99365, status: "open", captured_at: null, people_count: null, wait_minutes: null, }; const MD_STATUS = "Always On · No Wait Time"; const MD_STATUS_COMPACT = "Always On"; function useLiveMap(tick: number) { const q = useSQLQuery(poll(tick, ` SELECT v.slug, v.display_name, v.neighborhood, v.address, v.timezone, v.hours_json, v.lat, v.lng, v.status, strftime(e.captured_at AT TIME ZONE 'UTC', '%Y-%m-%dT%H:%M:%SZ') AS captured_at, e.people_count, e.wait_minutes FROM "damnlines_share"."main"."venues" v LEFT JOIN LATERAL ( SELECT captured_at, people_count, wait_minutes FROM "damnlines_share"."main"."live_events" WHERE venue_slug = v.slug AND captured_at > now() - INTERVAL 15 MINUTE ORDER BY captured_at DESC LIMIT 1 ) e ON true`)); const venues = useMemo(() => { if (!Array.isArray(q.data)) return []; return q.data.map((r: any) => ({ slug: r.slug, display_name: r.display_name, neighborhood: r.neighborhood ?? null, address: r.address ?? null, timezone: r.timezone ?? null, hours_json: r.hours_json ?? null, lat: N(r.lat), lng: N(r.lng), status: r.status ?? null, captured_at: r.captured_at ?? null, people_count: r.people_count != null ? N(r.people_count) : null, wait_minutes: r.wait_minutes != null ? N(r.wait_minutes) : null, })); }, [q.data]); return { venues, isFirstLoad: q.isLoading && !q.data, isError: q.isError }; } // ─── Opening hours → open/close marker times ──────────────────────── // hours_json: {"mon":[{"open":"12:00","close":"22:00"}], ...} in venue-local tz. // Convert a local wall-clock time in an IANA tz to a UTC epoch (handles DST via // the offset Intl reports at that instant — one correction is enough away from // the ~1 hr/year transition boundaries). function tzOffsetMs(utcMs: number, tz: string): number { const dtf = new Intl.DateTimeFormat("en-US", { timeZone: tz, hourCycle: "h23", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }); const p: any = {}; for (const part of dtf.formatToParts(new Date(utcMs))) p[part.type] = part.value; return Date.UTC(+p.year, +p.month - 1, +p.day, +p.hour, +p.minute, +p.second) - utcMs; } function zonedWallToUtcMs(y: number, mo: number, d: number, h: number, mi: number, tz: string): number { const guess = Date.UTC(y, mo - 1, d, h, mi); return guess - tzOffsetMs(guess, tz); } function localDayParts(utcMs: number, tz: string): { y: number; mo: number; d: number; dow: string } { const dtf = new Intl.DateTimeFormat("en-US", { timeZone: tz, weekday: "short", year: "numeric", month: "2-digit", day: "2-digit" }); const p: any = {}; for (const part of dtf.formatToParts(new Date(utcMs))) p[part.type] = part.value; return { y: +p.year, mo: +p.month, d: +p.day, dow: String(p.weekday).toLowerCase() }; } function localHour(utcMs: number, tz: string): number { return +new Intl.DateTimeFormat("en-US", { timeZone: tz, hourCycle: "h23", hour: "2-digit" }).format(new Date(utcMs)); } // Today's operating interval (the one containing `now`, else the most recent past // open) as absolute epochs — close may be later today / just after midnight. type Session = { openMs: number; closeMs: number }; function todaySession(hoursJson: string | null, tz: string | null, nowMs: number): Session | null { if (!hoursJson || !tz) return null; let hours: Record; try { hours = JSON.parse(hoursJson); } catch { return null; } const hm = (s: string) => { const [h, m] = s.split(":").map(Number); return { h, m }; }; const cands: Session[] = []; for (const base of [nowMs - 86_400_000, nowMs]) { // yesterday too (post-midnight closes) const lp = localDayParts(base, tz); for (const iv of hours[lp.dow] ?? []) { if (!iv?.open || !iv?.close) continue; const o = hm(iv.open), c = hm(iv.close); const openMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, o.h, o.m, tz); let closeMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, c.h, c.m, tz); if (closeMs <= openMs) closeMs += 86_400_000; cands.push({ openMs, closeMs }); } } if (!cands.length) return null; const containing = cands.find((s) => nowMs >= s.openMs && nowMs <= s.closeMs); if (containing) return containing; const past = cands.filter((s) => s.openMs <= nowMs).sort((a, b) => b.openMs - a.openMs)[0]; return past ?? cands.sort((a, b) => a.openMs - b.openMs)[0]; } type HourMark = { ms: number; kind: "open" | "close" }; function openCloseMarks(hoursJson: string | null, tz: string | null, startMs: number, endMs: number): HourMark[] { if (!hoursJson || !tz) return []; let hours: Record; try { hours = JSON.parse(hoursJson); } catch { return []; } const out: HourMark[] = []; const seen = new Set(); const hm = (s: string) => { const [h, m] = s.split(":").map(Number); return { h, m }; }; for (const anchor of [startMs, endMs]) { // local days touching the window const lp = localDayParts(anchor, tz); for (const iv of hours[lp.dow] ?? []) { if (!iv?.open || !iv?.close) continue; const o = hm(iv.open), c = hm(iv.close); const openMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, o.h, o.m, tz); let closeMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, c.h, c.m, tz); if (closeMs <= openMs) closeMs += 86_400_000; // crosses midnight for (const mk of [{ ms: openMs, kind: "open" as const }, { ms: closeMs, kind: "close" as const }]) { if (mk.ms >= startMs && mk.ms <= endMs && !seen.has(mk.ms)) { seen.add(mk.ms); out.push(mk); } } } } return out; } // Every operating session overlapping [startMs, endMs], as merged absolute // intervals — the complement is the "closed" shading on multi-day trend charts. // Steps in 12h increments so DST-length days can't skip a local date; exact // duplicates and overlaps collapse in the merge. function openSessions(hoursJson: string | null, tz: string | null, startMs: number, endMs: number): Session[] { if (!hoursJson || !tz) return []; let hours: Record; try { hours = JSON.parse(hoursJson); } catch { return []; } const hm = (s: string) => { const [h, m] = s.split(":").map(Number); return { h, m }; }; const raw: Session[] = []; for (let anchor = startMs - 86_400_000; anchor <= endMs + 86_400_000; anchor += 43_200_000) { const lp = localDayParts(anchor, tz); for (const iv of hours[lp.dow] ?? []) { if (!iv?.open || !iv?.close) continue; const o = hm(iv.open), c = hm(iv.close); const openMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, o.h, o.m, tz); let closeMs = zonedWallToUtcMs(lp.y, lp.mo, lp.d, c.h, c.m, tz); if (closeMs <= openMs) closeMs += 86_400_000; // crosses midnight if (closeMs > startMs && openMs < endMs) raw.push({ openMs, closeMs }); } } raw.sort((a, b) => a.openMs - b.openMs); const merged: Session[] = []; for (const s of raw) { const last = merged[merged.length - 1]; if (last && s.openMs <= last.closeMs) last.closeMs = Math.max(last.closeMs, s.closeMs); else merged.push({ ...s }); } return merged; } // Latest frame thumbnail per venue (for the list previews). One small base64 // JPEG each; only enabled while the list drawer is open. function useAllLatestFrames(enabled: boolean, tick: number) { const sql = enabled ? poll(tick, `SELECT venue_slug, b64, mime FROM ( SELECT venue_slug, b64, mime, row_number() OVER (PARTITION BY venue_slug ORDER BY captured_at DESC) AS rn FROM "damnlines_share"."main"."frames" ) WHERE rn = 1`) : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); return useMemo>(() => { const out: Record = {}; if (!enabled || !Array.isArray(q.data)) return out; for (const r of q.data as any[]) if (r.b64) out[r.venue_slug] = `data:${r.mime || "image/jpeg"};base64,${r.b64}`; return out; }, [q.data, enabled]); } // Today's wait-time trend per venue (since local midnight, 30-min buckets) → // sparklines. "Today" is the venue's own calendar day — timezone(tz, now()) // gives the local wall clock, date_trunc finds its midnight, and timezone(tz, // wall) converts that midnight back to an absolute instant to filter on. function useDailyTrends(enabled: boolean, tick: number) { const sql = enabled ? poll(tick, `SELECT e.venue_slug, epoch(time_bucket(INTERVAL 30 MINUTE, e.captured_at)) AS t, AVG(e.wait_minutes) AS value FROM "damnlines_share"."main"."live_events" e JOIN "damnlines_share"."main"."venues" v ON v.slug = e.venue_slug WHERE e.captured_at >= timezone(coalesce(v.timezone, 'America/New_York'), date_trunc('day', timezone(coalesce(v.timezone, 'America/New_York'), now()))) GROUP BY 1, 2 ORDER BY 1, 2`) : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); return useMemo>(() => { const out: Record = {}; if (!enabled || !Array.isArray(q.data)) return out; for (const r of q.data as any[]) { (out[r.venue_slug] ??= []).push({ t: N(r.t), value: N(r.value) }); } return out; }, [q.data, enabled]); } function metricValue(v: Venue, m: Metric): number | null { return m === "wait" ? v.wait_minutes : v.people_count; } function useBlinkSet(venues: Venue[]): Set { const prev = useRef>(new Map()); const [blink, setBlink] = useState>(new Set()); useEffect(() => { const updated = new Set(); for (const v of venues) { if (!v.captured_at) continue; const p = prev.current.get(v.slug); if (p !== undefined && p !== v.captured_at) updated.add(v.slug); prev.current.set(v.slug, v.captured_at); } if (updated.size === 0) return; setBlink(updated); const t = setTimeout(() => setBlink(new Set()), BLINK_MS); return () => clearTimeout(t); }, [venues]); return blink; } function rangeFromPreset(days: PresetDays) { const end = new Date(); const start = new Date(end.getTime() - days * 86_400_000); return { startIso: start.toISOString(), endIso: end.toISOString() }; } // Pick a bucket width that's a "nice" divisor of the hour (5, 10, 15, 30, 60…) // so time_bucket lands on clean :00 / :05 marks instead of arbitrary minutes. // A 1-day window → 5-min buckets; longer windows step up to coarser ones. function binMinutesFor(startIso: string, endIso: string): number { const mins = Math.max(1, (new Date(endIso).getTime() - new Date(startIso).getTime()) / 60_000); const raw = mins / 288; // ~5-min granularity across a 1-day window const nice = [5, 10, 15, 30, 60, 120, 180, 360, 720, 1440]; return nice.find((b) => raw <= b) ?? 1440; } type TsRow = { bucket: string; value: number; samples: number }; function useTimeSeries(slug: string | null, metric: Metric, startIso: string | null, endIso: string | null, tick: number) { const enabled = !!slug && !!startIso && !!endIso; const col = metric === "wait" ? "wait_minutes" : "people_count"; const bin = enabled ? binMinutesFor(startIso!, endIso!) : 5; const sql = enabled ? poll(tick, ` SELECT strftime(time_bucket(INTERVAL ${bin} MINUTE, captured_at) AT TIME ZONE 'UTC', '%Y-%m-%dT%H:%M:%SZ') AS bucket, AVG(${col}) AS value, COUNT(*) AS samples FROM "damnlines_share"."main"."live_events" WHERE venue_slug = '${slug}' AND captured_at >= TIMESTAMPTZ '${startIso}' AND captured_at < TIMESTAMPTZ '${endIso}' GROUP BY 1 ORDER BY 1`) : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); const data = useMemo(() => { if (!enabled || !Array.isArray(q.data)) return []; return q.data.map((r: any) => ({ bucket: r.bucket, value: N(r.value), samples: N(r.samples) })); }, [q.data, enabled]); return { data, isLoading: enabled && q.isLoading }; } type HeatCell = { hour_of_day: number; day_of_week: number; avg_wait: number; avg_people: number; samples: number; value: number; isBest?: boolean }; function rowsToCells(data: any[]): HeatCell[] { return data.map((r: any) => ({ hour_of_day: N(r.hour_of_day), day_of_week: N(r.day_of_week), avg_wait: N(r.avg_wait), avg_people: N(r.avg_people), samples: N(r.sample_count), value: 0, })); } // The "best time to go" heatmap is ALWAYS the fixed past-7-day hour×day rollup, // independent of the window selector (1d/3d/7d/30d/Custom) above it — that selector // controls only the time-series chart. window_days = 7 is precomputed by the ingest // Flight, so this is a single cheap read (no client-side re-aggregation). const HEATMAP_WINDOW_DAYS = 7; function useHeatmap(slug: string | null, tick: number) { const on = !!slug; const sql = on ? poll(tick, `SELECT hour_of_day, day_of_week, avg_wait, avg_people, sample_count FROM "damnlines_share"."main"."venue_rollups" WHERE venue_slug = '${slug}' AND window_days = ${HEATMAP_WINDOW_DAYS}`) : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); const cells = useMemo(() => (on && Array.isArray(q.data) ? rowsToCells(q.data) : []), [q.data, on]); return { cells, isLoading: on && q.isLoading }; } // Typical per-hour curve (avg + p15–p85 band) used to project the rest of the day // past "now" on the 1-day chart. Prefer this weekday's own history; for hours the // weekday hasn't covered yet, fall back to all recent days so a young dataset still // produces a useful forecast. Both computed over the last 30 days. type ForecastHour = { avg: number; lo: number; hi: number; samples: number }; function useDayForecast(slug: string | null, metric: Metric, enabled: boolean, tick: number) { const on = !!slug && enabled; const col = metric === "wait" ? "wait_minutes" : "people_count"; const sql = on ? poll(tick, `WITH base AS ( SELECT hour(e.captured_at AT TIME ZONE v.timezone) AS h, isodow(e.captured_at AT TIME ZONE v.timezone) AS dow, isodow(now() AT TIME ZONE v.timezone) AS today_dow, e.${col} AS val FROM "damnlines_share"."main"."live_events" e JOIN "damnlines_share"."main"."venues" v ON v.slug = e.venue_slug WHERE e.venue_slug = '${slug}' AND e.captured_at >= now() - INTERVAL 30 DAY AND e.${col} IS NOT NULL ), same AS (SELECT h, AVG(val) avg, quantile_cont(val, 0.15) lo, quantile_cont(val, 0.85) hi, COUNT(*) n FROM base WHERE dow = today_dow GROUP BY 1), alld AS (SELECT h, AVG(val) avg, quantile_cont(val, 0.15) lo, quantile_cont(val, 0.85) hi, COUNT(*) n FROM base GROUP BY 1) SELECT a.h AS h, COALESCE(s.avg, a.avg) AS avg, COALESCE(s.lo, a.lo) AS lo, COALESCE(s.hi, a.hi) AS hi, COALESCE(s.n, a.n) AS samples FROM alld a LEFT JOIN same s USING (h) ORDER BY h`) : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); return useMemo(() => { const byHour: Record = {}; if (on && Array.isArray(q.data)) for (const r of q.data as any[]) { byHour[N(r.h)] = { avg: N(r.avg), lo: N(r.lo), hi: N(r.hi), samples: N(r.samples) }; } return { byHour, isLoading: on && q.isLoading }; }, [q.data, on]); } // Star the genuinely quietest slots across the whole week (bottom ~18% by // value). Global (not per-day) so only a handful stand out, and only when // there's real spread — a uniformly-quiet venue stars nothing (go anytime). function markBestTimes(cells: HeatCell[]): HeatCell[] { const sampled = cells.filter((c) => c.samples >= MIN_SAMPLES); if (sampled.length < 3) return cells.map((c) => ({ ...c, isBest: false })); const sorted = sampled.map((c) => c.value).sort((a, b) => a - b); const cutoff = sorted[Math.floor((sorted.length - 1) * 0.18)]; const hasSpread = sorted[sorted.length - 1] - sorted[0] > 0.5; return cells.map((c) => ({ ...c, isBest: hasSpread && c.samples >= MIN_SAMPLES && c.value <= cutoff })); } // A frame with its image already attached (data: URI). The whole rolling // window is fetched in ONE query and animated from memory — no per-frame round // trips. Not polled (fetched once per venue-open); frames are small after the // Flight downscales them, so the single payload stays light. type Frame = { capturedAt: string; people: number | null; wait: number | null; src: string }; function useFrameWindow(slug: string | null) { const sql = slug ? `SELECT strftime(captured_at AT TIME ZONE 'UTC', '%Y-%m-%dT%H:%M:%SZ') AS captured_at, b64, mime, people_count, wait_minutes FROM "damnlines_share"."main"."frames" WHERE venue_slug = '${slug}' ORDER BY captured_at` : `SELECT 1 WHERE FALSE`; const q = useSQLQuery(sql); return useMemo(() => { if (!slug || !Array.isArray(q.data)) return { frames: [] as Frame[], isLoading: !!slug && q.isLoading }; const frames: Frame[] = q.data .filter((r: any) => r.captured_at && r.b64) .map((r: any) => ({ capturedAt: r.captured_at, people: r.people_count != null ? N(r.people_count) : null, wait: r.wait_minutes != null ? N(r.wait_minutes) : null, src: `data:${r.mime || "image/jpeg"};base64,${r.b64}`, })); return { frames, isLoading: q.isLoading && frames.length === 0 }; }, [q.data, slug, q.isLoading]); } // ─── Root ─────────────────────────────────────────────────────────── export default function Dive() { const mapTick = usePolling(POLL_MAP_MS, true); const { venues, isFirstLoad, isError: mapErr } = useLiveMap(mapTick); const blinkSet = useBlinkSet(venues); const [metric, setMetric] = useState("wait"); const [selectedSlug, setSelectedSlug] = useState(null); // → full-screen detail const listOpen = true; // right-side list is always on const [windowMode, setWindowMode] = useState("preset"); const [presetDays, setPresetDays] = useState(1); const [customStart, setCustomStart] = useState(null); const [customEnd, setCustomEnd] = useState(null); const selected = useMemo(() => (selectedSlug ? venues.find((v) => v.slug === selectedSlug) ?? null : null), [selectedSlug, venues]); // List-drawer data (all venues): latest thumbnail + today's wait trend. const listTick = usePolling(POLL_DRAWER_MS, listOpen); const thumbs = useAllLatestFrames(listOpen, listTick); const trends = useDailyTrends(listOpen, listTick); // Detail-overlay data (selected venue). const detailTick = usePolling(POLL_DRAWER_MS, selectedSlug !== null && windowMode === "preset"); // Heatmap is fixed to the past 7 days, so it polls whenever a venue is open — // independent of windowMode (detailTick freezes in Custom mode; this must not). const heatTick = usePolling(POLL_DRAWER_MS, selectedSlug !== null); const range = useMemo(() => { if (windowMode === "preset") return rangeFromPreset(presetDays); if (customStart && customEnd) return { startIso: `${customStart}T00:00:00.000Z`, endIso: `${customEnd}T23:59:59.999Z` }; return { startIso: null as string | null, endIso: null as string | null }; }, [windowMode, presetDays, customStart, customEnd]); const oneDay = windowMode === "preset" && presetDays === 1; const ts = useTimeSeries(selectedSlug, metric, range.startIso, range.endIso, detailTick); const heat = useHeatmap(selectedSlug, heatTick); // always the fixed past-7-day rollup const forecast = useDayForecast(selectedSlug, metric, oneDay, detailTick); // typical rest-of-day curve const frameWin = useFrameWindow(selectedSlug); // whole window, prefetched once const openCount = venues.filter((v) => v.status !== "closed").length; // open per hours, not "has a reading" return (

{/* Map and the always-on list sit side by side; each column scrolls on its own. */}

{mapErr && Live data unavailable}

setSelectedSlug(s)} selectedSlug={selectedSlug} />

setSelectedSlug(null)} metric={metric} onMetric={setMetric} windowMode={windowMode} presetDays={presetDays} onWindow={(d) => { setPresetDays(d); setWindowMode("preset"); }} onCustomClick={() => setWindowMode("custom")} customStart={customStart} customEnd={customEnd} onCustomChange={(s, e) => { setCustomStart(s); setCustomEnd(e); }} ts={ts} heat={heat} forecast={forecast} frames={frameWin.frames} framesLoading={frameWin.isLoading} />

); } // ─── Top bar ──────────────────────────────────────────────────────── // MotherDuck "duckprint" mark for the "in Dive" lockup (official logo, inline // SVG — CSP-safe). Two webbed footprints in brand orange #FF9538. const DUCK_ORANGE = "#FF9538"; // Raw duckprint paths (172×127 coordinate space) — shared by the top-bar // lockup (DuckFoot) and the MotherDuck office marker on the map. function DuckFootPaths({ color = DUCK_ORANGE }: { color?: string }) { return ( <> ); } function DuckFoot({ height = 13, color = DUCK_ORANGE }: { height?: number; color?: string }) { return ( ); } function TopBar({ liveCount, total }: { liveCount: number; total: number }) { return (

damnlines in Dive

No one likes waiting in a damn line.

{/* Live status — informational, not a control (the list is always open). */}

0 ? "live-dot" : undefined} style={{ width: 8, height: 8, borderRadius: 999, background: liveCount > 0 ? C.calm : C.noData, display: "inline-block" }} /> {liveCount}/{total} open now

); } // ─── Footer (credit) ──────────────────────────────────────────────── function Footer() { return ( ); } function Banner({ children }: { children: React.ReactNode }) { return (

{children}

); } // ─── Map ──────────────────────────────────────────────────────────── const ZOOM_MIN = 0.55; // zoom out to reveal the whole island const ZOOM_MAX = 9; // zoom in to street level const DEFAULT_ZOOM = 1.28; // initial framing: tighter than fit-all (some venues sit just off-screen, found by panning) const LOD_FULL_K = 1.2; // at/above this zoom, labels show full wait + queue (default view is full) // Rough on-screen width (≈px, since the map renders near its 960px viewBox) of // a label bubble, used for greedy collision placement. function labelEstWidth(v: Venue, compact: boolean, mdExpanded = false): number { const nameW = 12 + (v.display_name?.length ?? 0) * 6.6; // status dot + gap + chars if (v.slug === MD_SLUG) { const addrW = mdExpanded ? (MD_OFFICE.address?.length ?? 0) * 5.8 : 0; if (compact) return Math.max(nameW + (MD_STATUS_COMPACT.length + 3) * 6, addrW) + 20; return Math.max(nameW, MD_STATUS.length * 5.8, addrW) + 20; } const inactive = v.status === "closed" || !v.captured_at; if (compact) { const suf = inactive ? (v.status === "closed" ? " · Closed" : " · —") : ` · ${v.wait_minutes != null ? Math.round(v.wait_minutes) + "m" : "—"}`; return nameW + suf.length * 6 + 20; } const metrics = inactive ? (v.status === "closed" ? "Closed" : "No recent data") : `${v.wait_minutes != null ? Math.round(v.wait_minutes) : "—"} min · ${v.people_count != null ? v.people_count : "—"} in line`; return Math.max(nameW, metrics.length * 5.8) + 20; } function CityMap({ venues, metric, blinkSet, isFirstLoad, onSelect, selectedSlug }: { venues: Venue[]; metric: Metric; blinkSet: Set; isFirstLoad: boolean; onSelect: (s: string) => void; selectedSlug: string | null; }) { const { base, isError } = useBasemap(); const svgRef = useRef(null); const zoomRef = useRef | null>(null); const [t, setT] = useState(d3.zoomIdentity); const [hoverSlug, setHoverSlug] = useState(null); const [mdOpen, setMdOpen] = useState(false); // MD office bubble: address shown inline const projection = useMemo(() => { const pts = venues.filter((v) => v.lat && v.lng).map((v) => ({ type: "Feature", geometry: { type: "Point", coordinates: [v.lng, v.lat] } })); const fitTo = pts.length >= 2 ? { type: "FeatureCollection", features: pts } : base.boroughs; if (!fitTo) return null; return d3.geoMercator().fitExtent([[120, 90], [MAP_W - 120, MAP_H - 90]], fitTo as any); }, [venues, base.boroughs]); const pathGen = useMemo(() => (projection ? d3.geoPath(projection) : null), [projection]); const streets = useMemo(() => splitStreets(base.streets), [base.streets]); // d3.zoom drives a single transform; basemap lives inside a scaled , // while dots + labels are placed in screen space (t.apply*) so they keep a // constant size at every zoom level — real map behavior. useEffect(() => { const svg = svgRef.current; if (!svg) return; const sel = d3.select(svg); const zoom = d3.zoom() .scaleExtent([ZOOM_MIN, ZOOM_MAX]) .translateExtent([[-MAP_W * 0.5, -MAP_H * 0.5], [MAP_W * 1.5, MAP_H * 1.5]]) .filter((e: any) => !e.ctrlKey && e.type !== "dblclick") // allow wheel + drag, ignore page-zoom gesture .on("zoom", (e: any) => setT(e.transform)); zoomRef.current = zoom; sel.call(zoom); sel.on("dblclick.zoom", null); return () => { sel.on(".zoom", null); }; }, []); const dots = useMemo(() => { if (!projection) return [] as Array; // MD_OFFICE rides along for dots + label layout only; the projection fit, // list drawer, and open-now count all stay on the real venues. const withOffice = venues.length ? [...venues, MD_OFFICE] : venues; return withOffice.flatMap((v) => { const p = projection([v.lng, v.lat]); return p ? [{ ...v, px: p[0], py: p[1] }] : []; }); }, [venues, projection]); // Default view: centre on the venue centroid and zoom in past the fit-all // baseline (k=1), so the map opens at a street-level frame like a real map app. const defaultTransform = useMemo(() => { if (!dots.length) return null; const xs = dots.map((d) => d.px), ys = dots.map((d) => d.py); const cx = (Math.min(...xs) + Math.max(...xs)) / 2; const cy = (Math.min(...ys) + Math.max(...ys)) / 2; const kk = DEFAULT_ZOOM; return d3.zoomIdentity.translate(MAP_W / 2 - kk * cx, MAP_H / 2 - kk * cy).scale(kk); }, [dots]); const zoomBy = (k: number) => { const svg = svgRef.current; const zoom = zoomRef.current; if (svg && zoom) d3.select(svg).transition().duration(260).call(zoom.scaleBy as any, k); }; const resetZoom = () => { const svg = svgRef.current; const zoom = zoomRef.current; const tr = defaultTransform ?? d3.zoomIdentity; if (svg && zoom) d3.select(svg).transition().duration(360).call(zoom.transform as any, tr); }; // Apply the default framing once, as soon as the projection/venues are ready. const didInit = useRef(false); useEffect(() => { if (didInit.current || !defaultTransform) return; const svg = svgRef.current, zoom = zoomRef.current; if (!svg || !zoom) return; didInit.current = true; d3.select(svg).call(zoom.transform as any, defaultTransform); }, [defaultTransform]); const k = t.k; const labelScale = Math.min(1.35, Math.max(0.85, 1 / Math.sqrt(k))); // gently grow labels when zoomed out // Label placement: EVERY dot keeps a bubble. Each bubble prefers sitting just // above its dot; a deterministic relaxation pass pulls it toward that spot // while pushing apart any overlapping pair, so a cluster fans out instead of // stacking. A leader line (drawn in the SVG) ties each displaced bubble back // to its dot. `compact` collapses to one line when zoomed out (smaller boxes // → less displacement needed). const labels = useMemo(() => { const compact = k < LOD_FULL_K; const PAD = 5, GAP = 13, H = compact ? 24 : 42; const nodes = dots .map((v) => ({ ...v, x: t.applyX(v.px), y: t.applyY(v.py) })) .filter((d) => d.x >= -10 && d.x <= MAP_W + 10 && d.y >= -10 && d.y <= MAP_H + 10) .map((d) => { const mdExpanded = d.slug === MD_SLUG && mdOpen; const w = labelEstWidth(d, compact, mdExpanded); const h = mdExpanded ? H + 13 : H; // the inline address adds a line const px0 = Math.max(w / 2, Math.min(MAP_W - w / 2, d.x)); const py0 = Math.max(h / 2 + 2, d.y - GAP - h / 2); return { ...d, w, h, compact, px0, py0, cx: px0, cy: py0 }; }); for (let it = 0; it < 90; it++) { for (const n of nodes) { n.cx += (n.px0 - n.cx) * 0.06; n.cy += (n.py0 - n.cy) * 0.06; } for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) { const a = nodes[i], b = nodes[j]; const ox = (a.w + b.w) / 2 + PAD - Math.abs(a.cx - b.cx); const oy = (a.h + b.h) / 2 + PAD - Math.abs(a.cy - b.cy); if (ox > 0 && oy > 0) { if (ox < oy) { const s = ((a.cx <= b.cx ? -1 : 1) * ox) / 2; a.cx += s; b.cx -= s; } else { const s = ((a.cy <= b.cy ? -1 : 1) * oy) / 2; a.cy += s; b.cy -= s; } } } for (const n of nodes) { n.cx = Math.max(n.w / 2, Math.min(MAP_W - n.w / 2, n.cx)); n.cy = Math.max(n.h / 2 + 2, Math.min(MAP_H - n.h / 2, n.cy)); } } return nodes; }, [dots, t, k, mdOpen]); return (

{/* Label pills (HTML overlay). Container is non-interactive; each bubble opts back in so it's clickable while map gaps still pan/zoom. */}

{labels.map((v) => { if (v.slug === MD_SLUG) { return ( setMdOpen((o) => !o)} /> ); } const closed = v.status === "closed"; const inactive = closed || !v.captured_at; const dotColor = inactive ? MAP_C.label : colorFor(metricValue(v, metric), metric); const isSel = v.slug === selectedSlug; return ( onSelect(v.slug)} onEnter={() => setHoverSlug(v.slug)} onLeave={() => setHoverSlug((s) => (s === v.slug ? null : s))} /> ); })}

{/* Zoom controls — fit on top (only when zoomed), so +/− never shift */}

{(() => { const d = defaultTransform; const atDefault = d ? Math.abs(t.k - d.k) < 0.02 && Math.abs(t.x - d.x) < 2 && Math.abs(t.y - d.y) < 2 : Math.abs(k - 1) < 0.02; return !atDefault ? ⤢ : null; })()} zoomBy(1.6)}>+ zoomBy(1 / 1.6)}>−

); } // Bubble above each dot: name + wait + queue, visible without clicking, and // clickable to open the venue. `compact` collapses to a single line (zoomed out). function MapLabel({ left, top, z, selected, dotColor, name, inactive, closed, wait, people, compact, mdOffice, mdExpanded, onClick, onEnter, onLeave }: { left: number; top: number; z: number; selected: boolean; dotColor: string; name: string; inactive: boolean; closed: boolean; wait: number | null; people: number | null; compact: boolean; mdOffice?: boolean; mdExpanded?: boolean; onClick?: () => void; onEnter?: () => void; onLeave?: () => void; }) { const compactSuffix = mdOffice ? MD_STATUS_COMPACT : inactive ? (closed ? "Closed" : "—") : wait != null ? `${Math.round(wait)}m` : "—"; return (

{mdOffice ? : } {name} {compact && · {compactSuffix}}

{mdOffice && mdExpanded && (

{MD_OFFICE.address}

)} {!compact && (

{mdOffice ? ( <> {MD_STATUS_COMPACT} {" · No Wait Time"} ) : inactive ? ( {closed ? "Closed" : "No recent data"} ) : ( <> {wait != null ? `${Math.round(wait)} min` : "—"} {" · "}{people != null ? `${people} in line` : "—"} )}

)}

); } function ZoomBtn({ children, onClick, label, small, disabled }: { children: React.ReactNode; onClick: () => void; label: string; small?: boolean; disabled?: boolean }) { return ( ); } function Legend({ metric }: { metric: Metric }) { return (

SHORT {metric === "wait" ? "LONG WAIT" : "LONG QUEUE"}

CLOSED / NO DATA

); } function Segmented({ value, onChange, options }: { value: T; onChange: (v: T) => void; options: { v: T; label: string }[] }) { return (

{options.map((o) => ( ))}

); } function Pill({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) { return ( ); } // ─── List drawer (all venues, right side) ─────────────────────────── const LIST_WIDTH = 408; function venueRank(v: Venue): number { const inactive = v.status === "closed" || !v.captured_at; if (inactive) return -1e9 + (v.status === "closed" ? -1 : 0); return v.wait_minutes ?? 0; // busiest first } function ListDrawer({ venues, thumbs, trends, onSelect, selectedSlug }: { venues: Venue[]; thumbs: Record; trends: Record; onSelect: (slug: string) => void; selectedSlug: string | null; }) { const sorted = useMemo(() => [...venues].sort((a, b) => venueRank(b) - venueRank(a)), [venues]); const openCount = venues.filter((v) => v.status !== "closed").length; return ( ); } function VenuePreviewCard({ venue, thumb, trend, selected, onClick }: { venue: Venue; thumb?: string; trend?: { t: number; value: number }[]; selected: boolean; onClick: () => void; }) { const closed = venue.status === "closed"; const stale = !venue.captured_at; const inactive = closed || stale; const waitColor = inactive ? C.grey2 : colorFor(venue.wait_minutes, "wait"); return ( ); } // Tiny inline wait-trend sparkline (no chart lib needed at preview size). // One continuous line from today's first reading to the latest one. function Sparkline({ data, color }: { data?: { t: number; value: number }[]; color: string }) { const W = 240, H = 30; if (!data || data.length < 2) { return

no activity yet today

; } const xs = data.map((d) => d.t), ys = data.map((d) => d.value); const minX = Math.min(...xs), maxX = Math.max(...xs), minY = Math.min(...ys), maxY = Math.max(...ys); const nx = (v: number) => (maxX > minX ? ((v - minX) / (maxX - minX)) * (W - 2) + 1 : W / 2); const ny = (v: number) => H - 3 - (maxY > minY ? (v - minY) / (maxY - minY) : 0.5) * (H - 6); const line = data.map((p, i) => `${i ? "L" : "M"}${nx(p.t).toFixed(1)} ${ny(p.value).toFixed(1)}`).join(" "); const area = `${line} L${nx(maxX).toFixed(1)} ${H} L${nx(minX).toFixed(1)} ${H} Z`; return ( ); } // ─── Detail overlay (full screen, single venue) ───────────────────── function DetailOverlay(props: { venue: Venue | null; onClose: () => void; metric: Metric; onMetric: (m: Metric) => void; windowMode: WindowMode; presetDays: PresetDays; onWindow: (d: PresetDays) => void; onCustomClick: () => void; customStart: string | null; customEnd: string | null; onCustomChange: (s: string | null, e: string | null) => void; ts: { data: TsRow[]; isLoading: boolean }; heat: { cells: HeatCell[]; isLoading: boolean }; forecast: { byHour: Record; isLoading: boolean }; frames: Frame[]; framesLoading: boolean; }) { const { venue, onClose, metric, onMetric, windowMode, presetDays, onWindow, onCustomClick, customStart, customEnd, onCustomChange, ts, heat, forecast, frames, framesLoading } = props; const open = !!venue; const scrollRef = useRef(null); useEffect(() => { if (open && scrollRef.current) scrollRef.current.scrollTop = 0; }, [venue?.slug, open]); // 1-day view: mark today's open/close on the trend chart. const oneDay = windowMode === "preset" && presetDays === 1; const dayRange = useMemo<[number, number] | undefined>(() => (oneDay ? [Date.now() - 86_400_000, Date.now()] : undefined), [oneDay, venue?.slug]); const hourMarks = useMemo(() => (oneDay && venue && dayRange ? openCloseMarks(venue.hours_json, venue.timezone, dayRange[0], dayRange[1]) : undefined), [oneDay, venue, dayRange]); // Today's operating interval (open→close), for the fixed-axis day view. const session = useMemo(() => (oneDay && venue ? todaySession(venue.hours_json, venue.timezone, Date.now()) : null), [oneDay, venue]); return ( ); } // Trailing timelapse window. Frames are only captured while a venue is open, so // the most recent contiguous run (broken at a closure-sized gap) == "since today's // open". Cap it at the last 3 hours so a mid-day view shows only recent footage; // early in the day the run is naturally short (~1h) and grows toward the 3h cap. const TL_WINDOW_MS = 3 * 3_600_000; const TL_GAP_MS = 25 * 60_000; // a gap this large marks a new (post-closure) session function clipRecent(frames: Frame[]): Frame[] { if (frames.length <= 1) return frames; const t = frames.map((f) => Date.parse(f.capturedAt)); const newest = t[t.length - 1]; let start = frames.length - 1; for (let i = frames.length - 1; i > 0; i--) { if (newest - t[i - 1] <= TL_WINDOW_MS && t[i] - t[i - 1] <= TL_GAP_MS) start = i - 1; else break; } return frames.slice(start); } // Enlarged timelapse player. Normal: clean video + controls below. Full screen // (via the button): the video fills the screen and goes immersive — venue name, // address and live stats overlaid on a gradient scrim. function VideoPlayer({ venue, frames: allFrames, loading }: { venue: Venue; frames: Frame[]; loading: boolean }) { const frames = useMemo(() => clipRecent(allFrames), [allFrames]); const [idx, setIdx] = useState(0); const [playing, setPlaying] = useState(true); const [fs, setFs] = useState(false); const wrapRef = useRef(null); const n = frames.length; const clamped = n ? Math.min(idx, n - 1) : 0; const cur = n ? frames[clamped] : null; useEffect(() => { setIdx(0); setPlaying(true); }, [venue.slug]); useEffect(() => { if (!playing || n < 2) return; const id = setInterval(() => setIdx((i) => (i + 1) % n), 700); return () => clearInterval(id); }, [playing, n]); useEffect(() => { const onFs = () => setFs(document.fullscreenElement === wrapRef.current); document.addEventListener("fullscreenchange", onFs); return () => document.removeEventListener("fullscreenchange", onFs); }, []); const closed = venue.status === "closed"; const fresh = freshnessLabel(venue.captured_at); const clock = cur ? new Date(cur.capturedAt).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", timeZone: venue.timezone || "America/New_York" }) : ""; const spanH = n >= 2 ? Math.max(1, Math.round((Date.parse(frames[n - 1].capturedAt) - Date.parse(frames[0].capturedAt)) / 3_600_000)) : null; const toggleFs = () => { if (!document.fullscreenElement) wrapRef.current?.requestFullscreen?.().catch(() => {}); else document.exitFullscreen?.().catch(() => {}); }; const onSeek = (i: number) => { setPlaying(false); setIdx(i); }; if (n === 0) { return

{loading ? "Loading footage…" : "No footage yet"}

; } return (

{cur?.src &&

} {/* Immersive overlay — full screen only */} {fs && ( <>

{venue.neighborhood || "NYC"}

{venue.display_name}

{venue.address && (

{venue.address}

)}

{closed ?

Closed right now

: <> } {fresh.isMissing ? "No recent activity" : fresh.text}

setPlaying((p) => !p)} n={n} clamped={clamped} onSeek={onSeek} light />

)} {/* timelapse label (top-left) — not a live stream */}

TIMELAPSE{clock ? ` · ${clock}` : ""}

{/* full screen toggle (top-right) */} {/* in-line badge (normal only) */} {!fs && cur?.people != null && (

{cur.people} in line

)}

{/* controls below the video (normal mode) */} {!fs && (

setPlaying((p) => !p)} n={n} clamped={clamped} onSeek={onSeek} />

Storefront timelapse · last ~{spanH ?? 3}h, newest last. The wait and queue counts above are live.

)}

); } function PlaybackControls({ playing, onToggle, n, clamped, onSeek, light }: { playing: boolean; onToggle: () => void; n: number; clamped: number; onSeek: (i: number) => void; light?: boolean; }) { return (

onSeek(Number(e.target.value))} className={light ? "hslider" : "uslider"} style={{ flex: 1 }} />

); } function StatChip({ color, value, unit }: { color: string; value: number | string; unit: string }) { return (

{value} {unit}

); } function SectionLabel({ children }: { children: React.ReactNode }) { return

{children}

; } function LiveKPIs({ venue, metric }: { venue: Venue; metric: Metric }) { const fresh = freshnessLabel(venue.captured_at); const waitColor = colorFor(venue.wait_minutes, "wait"); return (

{fresh.isMissing ? "No recent activity" : fresh.isStale ? `Stale · ${fresh.text.toLowerCase()}` : fresh.text}

); } function KPICard({ value, unit, label, accent }: { value: string; unit: string; label: string; accent?: string }) { return (

{value} {unit && {unit}}

{label}

); } function CalendarPicker({ start, end, onChange }: { start: string | null; end: string | null; onChange: (s: string | null, e: string | null) => void }) { const today = new Date().toISOString().slice(0, 10); const st: React.CSSProperties = { fontFamily: FONTS.sans, fontSize: 13, fontWeight: 500, padding: "9px 12px", border: `1px solid ${C.line}`, borderRadius: 12, background: C.bg, color: C.ink }; return (

onChange(e.target.value || null, end)} style={st} /> → onChange(start, e.target.value || null)} style={st} />

); } // ─── Charts ───────────────────────────────────────────────────────── // 1-day chart with a fixed Open→Close x-axis. Solid line = today's actual up to // "Now"; past Now a shaded p15–p85 band + dashed line projects the typical curve // for this weekday (from the last 30 days) through closing. function DayForecastChart({ rows, isLoading, metric, session, byHour, tz }: { rows: TsRow[]; isLoading: boolean; metric: Metric; session: Session; byHour: Record; tz?: string | null; }) { const zone = tz || "America/New_York"; const unit = metric === "wait" ? "m" : ""; const nowMs = Date.now(); const { openMs, closeMs } = session; const STEP = 30 * 60_000; const { data, yMax, hasForecast } = useMemo(() => { const acts = rows .map((r) => ({ ms: Date.parse(r.bucket), v: r.value })) .filter((a) => a.ms >= openMs - 60_000 && a.ms <= nowMs + 60_000); const lastA = acts.length ? acts[acts.length - 1] : null; const fcPts: { ms: number; lo: number; hi: number; fc: number }[] = []; for (let ms = Math.ceil(nowMs / STEP) * STEP; ms <= closeMs; ms += STEP) { const f = byHour[localHour(ms, zone)]; if (f && f.samples >= MIN_SAMPLES) fcPts.push({ ms, lo: f.lo, hi: f.hi, fc: f.avg }); } const byMs = new Map(); const put = (ms: number, patch: any) => byMs.set(ms, { ...(byMs.get(ms) || { ms }), ...patch }); for (const a of acts) put(a.ms, { actual: a.v }); if (lastA && fcPts.length) put(lastA.ms, { fc: lastA.v, band: [lastA.v, lastA.v] }); // bridge solid→dashed for (const p of fcPts) put(p.ms, { fc: p.fc, band: [p.lo, p.hi] }); const data = [...byMs.values()].sort((a, b) => a.ms - b.ms); const yMax = Math.max(2, ...acts.map((a) => a.v), ...fcPts.map((p) => p.hi)); return { data, yMax: Math.ceil((yMax * 1.12) / 2) * 2, hasForecast: fcPts.length > 0 }; }, [rows, byHour, openMs, closeMs, nowMs, zone]); if (isLoading) return

; if (data.length === 0) return No observations yet today; const fmtX = (ms: number) => new Date(ms).toLocaleTimeString("en-US", { hour: "numeric", timeZone: zone }); const refLabel = (text: string, fill: string, position: any) => ({ value: text, position, fontSize: 9.5, fontWeight: 700, fill, fontFamily: FONTS.sans }); // Clean ticks on whole hours (every 1–2h) so labels don't repeat. const HR = 3_600_000; const stepH = closeMs - openMs > 11 * HR ? 2 : 1; const ticks: number[] = []; for (let ms = Math.ceil(openMs / HR) * HR; ms <= closeMs; ms += stepH * HR) ticks.push(ms); return (

`${Math.round(Number(v))}${unit}`} /> } /> {/* typical band (under everything) */} {/* typical centerline (dashed) */} {/* today's actual (solid, up to now) */} {nowMs > openMs && nowMs < closeMs && hasForecast && ( )} {hasForecast && (

Today Typical · rest of day

)}

); } function DayTooltip({ active, payload, label, metric, zone }: any) { if (!active || !payload?.length) return null; const get = (k: string) => payload.find((p: any) => p.dataKey === k)?.value; const actual = get("actual"), fc = get("fc"); const fmt = (v: number) => (metric === "wait" ? `${Math.round(v)} min` : `${Math.round(v)} in line`); const when = new Date(label as number).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZone: zone }); return (

{when}

{actual != null &&

Today · {fmt(actual)}

} {actual == null && fc != null &&

Typical · ~{fmt(fc)}

}

); } // Multi-day trend. Closed time is compressed out of the x-axis (the way market // charts skip non-trading hours): each service day renders edge-to-edge as its // own arc — the arc's span IS open→close — and each skipped night collapses to // a narrow gap bridged by a dotted baseline stub. Single-day windows keep a // plain linear clock with dashed open/close marks. function TimeSeriesChart({ rows, isLoading, metric, marks, rangeMs, tz, hoursJson }: { rows: TsRow[]; isLoading: boolean; metric: Metric; marks?: HourMark[]; rangeMs?: [number, number]; tz?: string | null; hoursJson?: string | null; }) { if (isLoading) return

; if (rows.length === 0) return No observations in this range; const zone = tz || "America/New_York"; // venues are NYC — render in venue-local time, not the viewer's const data = rows.map((r) => ({ ...r, ms: Date.parse(r.bucket) })); const domain: [number, number] = rangeMs ?? [data[0].ms, data[data.length - 1].ms]; const multiDay = domain[1] - domain[0] > 36 * 3_600_000; const unit = metric === "wait" ? "m" : ""; // Bucket width = smallest spacing between samples; a gap over 2.5 buckets // means sampling stopped (closure/outage) and the line must break there. let binMs = Infinity; for (let i = 1; i < data.length; i++) { const d = data[i].ms - data[i - 1].ms; if (d > 0 && d < binMs) binMs = d; } if (!isFinite(binMs)) binMs = 30 * 60_000; // Active intervals: the venue's operating sessions ∪ observed sample runs // (so readings outside declared hours still get axis space), merged. const runs: Session[] = []; for (const d of data) { const last = runs[runs.length - 1]; if (last && d.ms - last.closeMs <= binMs * 2.5) last.closeMs = d.ms; else runs.push({ openMs: d.ms, closeMs: d.ms + binMs }); } const sessions = openSessions(hoursJson ?? null, tz ?? null, domain[0], domain[1]) .map((s) => ({ openMs: Math.max(s.openMs, domain[0]), closeMs: Math.min(s.closeMs, domain[1]) })); const active: Session[] = []; for (const s of [...sessions, ...runs].sort((a, b) => a.openMs - b.openMs)) { const last = active[active.length - 1]; if (last && s.openMs <= last.closeMs + binMs) last.closeMs = Math.max(last.closeMs, s.closeMs); else active.push({ ...s }); } // Piecewise-linear x: active intervals keep true scale; every gap between // them renders at one fixed narrow width. const activeTotal = active.reduce((a, s) => a + (s.closeMs - s.openMs), 0) || 1; const GAP = multiDay ? Math.max(activeTotal * 0.028, binMs) : 0; const offsets: number[] = []; let acc = 0; for (const s of active) { offsets.push(acc); acc += s.closeMs - s.openMs + GAP; } const totalX = Math.max(1, acc - GAP); const idxOf = (ms: number) => { for (let i = active.length - 1; i >= 0; i--) if (ms >= active[i].openMs) return i; return 0; }; const mapX = multiDay ? (ms: number) => { const i = idxOf(ms); return offsets[i] + Math.min(Math.max(ms - active[i].openMs, 0), active[i].closeMs - active[i].openMs); } : (ms: number) => ms; const plotted: Array<{ x: number; ms: number; value: number | null }> = []; data.forEach((d, i) => { if (i > 0 && d.ms - data[i - 1].ms > binMs * 2.5) { const px = mapX(data[i - 1].ms), cx = mapX(d.ms); plotted.push({ x: (px + cx) / 2, ms: d.ms, value: null }); // break the line inside the gap } plotted.push({ x: mapX(d.ms), ms: d.ms, value: d.value }); }); // One date label centered under each day's arc (a day's lunch+dinner // sessions share one label); thinned so 30d doesn't crowd. let ticks: number[] | undefined; const tickLabel = new Map(); if (multiDay) { const byDate = new Map(); active.forEach((s, i) => { const label = new Date((s.openMs + s.closeMs) / 2).toLocaleDateString("en-US", { month: "numeric", day: "numeric", timeZone: zone }); const x0 = offsets[i], x1 = offsets[i] + (s.closeMs - s.openMs); const cur = byDate.get(label); if (cur) { cur.min = Math.min(cur.min, x0); cur.max = Math.max(cur.max, x1); } else byDate.set(label, { min: x0, max: x1 }); }); const days = [...byDate.entries()].sort((a, b) => a[1].min - b[1].min); const step = Math.max(1, Math.ceil(days.length / 9)); days.forEach(([label, d], i) => { if (i % step === 0) tickLabel.set((d.min + d.max) / 2, label); }); ticks = [...tickLabel.keys()]; } const fmtX = (x: number) => multiDay ? tickLabel.get(x) ?? "" : new Date(x).toLocaleTimeString("en-US", { hour: "numeric", timeZone: zone }); // Dotted baseline stubs across each compressed night — the "⋯" of skipped time. const gapStubs = multiDay ? active.slice(0, -1).map((s, i) => ({ x1: offsets[i] + (s.closeMs - s.openMs) + GAP * 0.18, x2: offsets[i + 1] - GAP * 0.18 })) : []; const xDomain: [number, number] = multiDay ? [0, totalX] : domain; return (

`${Math.round(Number(v))}${unit}`} /> { const ms = payload?.[0]?.payload?.ms; return ms ? new Date(ms).toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", timeZone: zone, timeZoneName: "short" }) : ""; }} formatter={(v: any) => [v == null ? "closed" : metric === "wait" ? `${Number(v).toFixed(1)} min` : `${Number(v).toFixed(0)} people`, ""]} /> {gapStubs.map((g, i) => ( ))} {!multiDay && marks?.map((m, i) => ( ))} {gapStubs.length > 0 && (

··· CLOSED HOURS, COMPRESSED

)}

); } const DAY_NAMES = ["", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const DAY_FULL = ["", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; const HEAT_EMPTY = "#eef1f3"; function hourShort(h: number): string { const ap = h < 12 || h === 24 ? "a" : "p"; const h12 = h % 12 === 0 ? 12 : h % 12; return `${h12}${ap}`; } function hourClock(h: number): string { const x = ((h % 24) + 24) % 24; const ap = x < 12 ? "am" : "pm"; const h12 = x % 12 === 0 ? 12 : x % 12; return `${h12}${ap}`; } type HeatHover = { d: number; h: number; cell: HeatCell; x: number; y: number }; function Heatmap({ cells, isLoading, metric }: { cells: HeatCell[]; isLoading: boolean; metric: Metric }) { const [hover, setHover] = useState(null); const cardRef = useRef(null); if (isLoading) return

; const projected = cells.map((c) => ({ ...c, value: metric === "wait" ? c.avg_wait : c.avg_people })); const annotated = markBestTimes(projected); const present = annotated.filter((c) => c.samples >= MIN_SAMPLES).map((c) => c.hour_of_day); if (present.length === 0) return Not enough history yet — check back soon; // contiguous hour range so the grid reads left→right without gaps const minH = Math.min(...present), maxH = Math.max(...present); const hours: number[] = []; for (let h = minH; h <= maxH; h++) hours.push(h); const days = [1, 2, 3, 4, 5, 6, 7]; const map = new Map(); for (const c of annotated) map.set(`${c.day_of_week}-${c.hour_of_day}`, c); const labelEvery = hours.length > 16 ? 3 : 2; return (

{hours.map((h) => (

{(h - minH) % labelEvery === 0 ? hourShort(h) : ""}

))} {days.map((d) => )}

BEST TIME TO GO

QUIET BUSY

{hover && }

); } function HeatTooltip({ hover }: { hover: HeatHover }) { const { cell } = hover; return (

{DAY_FULL[hover.d]} {hourClock(hover.h)} – {hourClock(hover.h + 1)}

~{Math.round(cell.avg_people)} in line ~{Math.round(cell.avg_wait)} min

); } function HeatRow({ d, hours, map, metric, cardRef, onHover, hoverKey }: { d: number; hours: number[]; map: Map; metric: Metric; cardRef: React.RefObject; onHover: (h: HeatHover | null) => void; hoverKey: string | null; }) { const enter = (d: number, h: number, c: HeatCell, e: React.MouseEvent) => { const card = cardRef.current; if (!card) return; const cr = e.currentTarget.getBoundingClientRect(); const br = card.getBoundingClientRect(); onHover({ d, h, cell: c, x: cr.left + cr.width / 2 - br.left, y: cr.top - br.top }); }; return ( <>

{DAY_NAMES[d]}

{hours.map((h) => { const c = map.get(`${d}-${h}`); const enough = c && c.samples >= MIN_SAMPLES; const bg = enough ? colorFor(c!.value, metric) : HEAT_EMPTY; const active = hoverKey === `${d}-${h}`; return (

enter(d, h, c!, e) : undefined} onMouseMove={enough ? (e) => enter(d, h, c!, e) : undefined} onMouseLeave={enough ? () => onHover(null) : undefined} style={{ background: bg, borderRadius: 6, height: 26, display: "flex", alignItems: "center", justifyContent: "center", cursor: enough ? "pointer" : "default", boxShadow: active ? `inset 0 0 0 2px ${C.ink}` : enough ? "inset 0 0 0 0.5px rgba(0,0,0,0.05)" : `inset 0 0 0 1px ${C.line}`, }}> {c?.isBest && }

); })} ); } function Empty({ children }: { children: React.ReactNode }) { return

{children}

; } const CSS = ` * { box-sizing: border-box; } @keyframes fadein { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } @keyframes pulse-ring { 0% { r: 8; opacity: 0.6; } 100% { r: 30; opacity: 0; } } @keyframes pulse-skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .pulse-dot { animation: fadein 0.4s ease-out, scale-bump 0.7s ease-out; transform-origin: center; transform-box: fill-box; } @keyframes scale-bump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .pulse-ring { animation: pulse-ring 0.8s ease-out forwards; } .pulse-skeleton { animation: pulse-skel 1.4s ease-in-out infinite; } .live-dot { animation: live-dot 2s ease-in-out infinite; } .vlabel { background: #fff; border-radius: 11px; padding: 6px 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.16); border: 1px solid rgba(0,0,0,0.05); animation: fadein 0.4s cubic-bezier(.2,.8,.2,1) both; transition: box-shadow 0.15s ease; } .vcard { transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .vcard:hover { border-color: #d4d4d4; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .vcard:active { transform: scale(0.992); } .hslider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.35); outline: none; } .hslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 999px; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.45); } .hslider::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 999px; background: #fff; cursor: pointer; } .uslider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: #e3e3e3; outline: none; } .uslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; background: #000; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .uslider::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 999px; background: #000; cursor: pointer; } `;

damnlines · NYC restaurant lines

Comments