\n \n \n \n \n\n",[19,72],"10309f92-f7d5-11f0-be9d-42dde27851f2","favicon.svg","1030a050-f7d5-11f0-be9d-42dde27851f2",7,["D",1769115492011],"\n",[19,80],"f4aa697a-f7e2-11f0-94ff-42dde27851f2","utils","f4aa6a42-f7e2-11f0-94ff-42dde27851f2",41,["D",1769121458791],"directory",[19,87],"0ff62f6a-f7d5-11f0-9712-42dde27851f2","components","0ff6303c-f7d5-11f0-9712-42dde27851f2",2,["D",1769115491600],[19,94],"0fd734b6-f7d5-11f0-8b85-42dde27851f2",["D",1769115491425],1,[19],{"_39":211,"_13":212,"_42":213,"_44":-5,"_46":47,"_48":214,"_50":51,"_52":215,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":216,"_18":217},{"_39":99,"_13":19,"_42":45,"_44":-5,"_46":47,"_48":101,"_50":51,"_52":165,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":166,"_18":167},{"_39":149,"_13":150,"_42":151,"_44":-5,"_46":47,"_48":152,"_50":51,"_52":153,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":154,"_18":155},{"_39":140,"_13":141,"_42":142,"_44":-5,"_46":47,"_48":143,"_50":51,"_52":144,"_17":145,"_55":24,"_56":146,"_58":59,"_60":-5,"_119":147,"_18":148},{"_39":131,"_13":132,"_42":133,"_44":-5,"_46":47,"_48":134,"_50":51,"_52":135,"_17":136,"_55":24,"_56":137,"_58":59,"_60":-5,"_119":138,"_18":139},{"_39":122,"_13":123,"_42":124,"_44":-5,"_46":47,"_48":125,"_50":51,"_52":126,"_17":101,"_55":127,"_56":128,"_58":59,"_60":-5,"_119":129,"_18":130},{"_39":110,"_13":111,"_42":112,"_44":-5,"_46":47,"_48":113,"_50":51,"_52":114,"_17":115,"_55":116,"_56":117,"_58":59,"_60":118,"_119":120,"_18":121},"82a1340c-f8c4-11f0-9df5-42dde27851f2","index.ts","10367c64-f7d5-11f0-990e-42dde27851f2",135,["D",1769218333698],10,"http","// DC Hotspot Growth Map - Main HTTP Server\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport * as db from \"./backend/db.ts\";\n\nconst app = new Hono();\n\n// Initialize database on startup\ndb.initDatabase().catch(console.error);\n\n// Serve index.html at the root\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// API: Get all hotspots\napp.get(\"/api/hotspots\", async (c) => {\n const hotspots = await db.getAllHotspots();\n return c.json(hotspots);\n});\n\n// API: Get all daily snapshots\napp.get(\"/api/snapshots\", async (c) => {\n const snapshots = await db.getAllSnapshots();\n return c.json(snapshots);\n});\n\n// API: Get hotspot count and latest snapshot\napp.get(\"/api/stats\", async (c) => {\n const count = await db.getHotspotCount();\n const snapshots = await db.getAllSnapshots();\n const latest = snapshots.length > 0 ? snapshots[snapshots.length - 1] : null;\n return c.json({\n total: count,\n latest_snapshot: latest,\n });\n});\n\n// Global error handler - log and return JSON error response\napp.onError((err, c) => {\n console.error(\"API error:\", err);\n return c.json({ error: err.message || \"Internal server error\" }, 500);\n});\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n","dc-hotspot-growth","children",[],[111],"829cf8a6-f8c4-11f0-8349-42dde27851f2","cron.ts","f59bed6e-f7eb-11f0-b3bc-42dde27851f2",134,["D",1769218333688],"interval","// Daily scraper cron job for DC Hotspot Growth Map\n// Runs at 6 AM UTC daily to fetch new hotspots\nimport { runDailyScrape } from \"./backend/scraper.ts\";\n\nexport default async function(): Promise<{ newHotspots: number; updated: number; removed: number }> {\n console.log(\"Starting scheduled daily scrape...\");\n const result = await runDailyScrape();\n console.log(\"Daily scrape completed:\", result);\n return result;\n}\n",[],[123],"a3e95ff0-f8c3-11f0-a18b-42dde27851f2","README.md","10469c52-f7d5-11f0-a6fb-42dde27851f2",133,["D",1769217959979],5,"# DC Helium Mobile Hotspot Growth Map\n\nAn interactive visualization of Helium Mobile hotspot growth in the DC Metro area over time. Watch the network expand from its first hotspot to over 1,000 deployments.\n\n**Live demo**: https://dc-hotspot-growth.val.run/\n\n## Features\n\n- **Interactive Timeline**: Scrub through the entire history of DC-area hotspot deployments\n- **Animated Playback**: Watch hotspots appear over time with play/pause controls\n- **H3 Clustering**: Hotspots grouped by Uber H3 hexagons (resolution 8) for clean visualization at any zoom level\n- **Age-based Coloring**:\n - Green: New hotspots (< 7 days old)\n - Blue: Recent hotspots (< 30 days old)\n - Grey: Established hotspots (30+ days old)\n- **Hotspot Details**: Click any cluster to see individual hotspot names (animal hash format) with links to Helium World\n\n## Tech Stack\n\n- **Platform**: [Val Town](https://val.town) (Deno runtime)\n- **Backend**: [Hono](https://hono.dev) HTTP framework\n- **Database**: Val Town SQLite (Turso)\n- **Frontend**: React 18 + [deck.gl](https://deck.gl) (WebGL)\n- **Clustering**: [Uber H3](https://h3geo.org) hexagonal hierarchical geospatial indexing\n- **Map Tiles**: CartoDB dark-matter basemap\n\n## How It Works\n\n### Data Pipeline\n\n1. **Backfill**: Initial data populated from the Helium Entity API, filtering for mobile hotspots within the DC Metro bounding box\n2. **Daily Cron**: Runs at 6 AM UTC to capture new hotspots and track location changes\n3. **Pre-computed Snapshots**: Daily statistics stored for instant timeline scrubbing\n\n### Visualization\n\nThe map uses deck.gl's ScatterplotLayer for WebGL-accelerated rendering of thousands of hotspots at 60fps. Circles are scaled using a square root easing curve so that cluster growth is visually apparent without large clusters dominating the view.\n\n## Project Structure\n\n```\ndc-hotspot-map/\n├── index.ts # Hono server & API routes\n├── cron.ts # Daily scraper job\n├── backend/\n│ ├── db.ts # SQLite schema & queries\n│ ├── heliumApi.ts # Helium Entity API client\n│ ├── scraper.ts # Backfill & daily scrape logic\n│ └── migrate.ts # Database migration utilities\n├── frontend/\n│ ├── index.html # Entry point\n│ ├── components/\n│ │ └── App.tsx # Main React component\n│ ├── utils/\n│ │ └── animalHash.ts # Hotspot name generator\n│ └── style.css # Helium-inspired dark theme\n└── shared/\n └── types.ts # TypeScript interfaces\n```\n\n## API Endpoints\n\n| Endpoint | Description |\n|----------|-------------|\n| `GET /api/hotspots` | All active hotspots with coordinates and dates |\n| `GET /api/snapshots` | Daily snapshot statistics for timeline |\n| `GET /api/stats` | Current total count and latest snapshot |\n\n## Development\n\nThis project uses the [Val Town CLI](https://docs.val.town/cli/):\n\n```bash\n# Push changes to Val Town\nvt push\n\n# Open in browser\nvt browse\n```\n\n## Coverage Area\n\nThe map covers the DC Metro area with approximately a 50-mile radius:\n\n- **Latitude**: 38.5° to 39.3° N\n- **Longitude**: 77.5° to 76.7° W\n- **Cities**: Washington DC, Arlington, Alexandria, Bethesda, Silver Spring, College Park, and surrounding areas\n\n## Credits\n\n- Data source: [Helium Foundation Entity API](https://docs.helium.com)\n- Hotspot naming: [angry-purple-tiger](https://github.com/helium/angry-purple-tiger) algorithm\n- Design inspiration: [Helium World](https://world.helium.com)\n\n## License\n\nMIT\n",[],[132],"a3da89da-f8c3-11f0-847f-42dde27851f2","CLAUDE.md","5d98d982-f7eb-11f0-ae1a-42dde27851f2",131,["D",1769217959968],9,"# DC Hotspot Growth Map\n\n## Project Overview\nA Val Town app that visualizes Helium Mobile hotspot growth in the DC Metro area over time, featuring an interactive deck.gl map with H3-based clustering (rendered as scaled circles) and timeline scrubbing.\n\n## Deployment\n- **Live URL**: https://dc-hotspot-growth.val.run/\n\n## Tech Stack\n- **Platform**: Val Town (Deno runtime)\n- **Backend**: Hono HTTP framework\n- **Database**: Val Town SQLite (Turso) - `import sqlite from \"https://esm.town/v/std/sqlite@14-main/main.ts\"`\n- **Frontend**: React + deck.gl (WebGL)\n- **Clustering**: Uber H3 (resolution 8) for grouping\n- **Map Tiles**: CartoDB dark-matter (via TileLayer)\n- **Styling**: Helium-inspired dark theme\n\n## Key Files\n- `index.ts` - Main Hono server with API routes\n- `backend/db.ts` - SQLite schema and queries\n- `backend/heliumApi.ts` - Helium Entity API client\n- `backend/scraper.ts` - Backfill and daily scrape logic\n- `backend/migrate.ts` - Migration script between SQLite versions\n- `cron.ts` - Daily scraper cron job (6 AM UTC)\n- `frontend/components/App.tsx` - Main React component with map, timeline, and clustering\n- `frontend/utils/animalHash.ts` - Animal name generator (angry-purple-tiger algorithm)\n- `frontend/style.css` - Helium-inspired dark theme styles\n\n## Val Town CLI\n- Push changes: `~/.deno/bin/vt push`\n- Open in browser: `~/.deno/bin/vt browse`\n- Configure cron schedule in Val Town web interface\n\n## Design Decisions\n\n### deck.gl Visualization\n- Load via CDN: ``\n- Access as global `deck` object (esm.sh imports have luma.gl compatibility issues)\n- Using ScatterplotLayer with `radiusUnits: \"pixels\"`, `stroked: false`\n- Circles scaled by count using **sqrt easing curve**: `radius = 8 + 27 * (sqrt(count-1) / sqrt(69))`\n- Min radius: 8px (count=1), Max radius: 35px (count=70)\n- Easing makes 1→2 dramatic but 67→70 nearly imperceptible\n- Transitions enabled only when NOT playing: `transitions: { getRadius: { duration: 150 }, getFillColor: { duration: 150 } }`\n- TextLayer for count labels: `fontFamily: \"Figtree, sans-serif\"`, `fontWeight: 300`\n- TileLayer for CartoDB dark basemap: `https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png`\n\n### deck.gl Playback Bug Fix (Critical)\n- **Problem**: During timeline playback, circles would disappear while text labels remained visible\n- **Root cause**: deck.gl's transition interpolation system conflicts with rapid data updates - when clusters appear/disappear, the interpolation can produce invalid intermediate states (e.g., radius interpolating toward 0)\n- **Solution**: Use **dynamic layer IDs** during playback to force complete layer recreation:\n ```typescript\n id: isPlaying ? `hotspot-clusters-${selectedIdx}` : \"hotspot-clusters\"\n ```\n- This bypasses deck.gl's transition system entirely during playback by making each frame a \"new\" layer\n- Also set `transitions: undefined` during playback (not `{ duration: 0 }` - that still triggers interpolation)\n- Disable picking during playback for performance: `pickable: !isPlaying`\n- When playback stops, layers revert to static IDs and smooth transitions are re-enabled\n\n### Animal Names (animalHash.ts)\n- Uses exact angry-purple-tiger algorithm with blueimp-md5\n- Critical: ADJECTIVES array must include duplicate \"skinny\" at index 85 (after \"shallow\")\n- Display names in Title Case (e.g., \"Angry Purple Tiger\"), not kebab-case\n\n### Timeline/Histogram\n- **Interactive scrubber**: Click or drag anywhere on histogram (no separate slider)\n- Histogram bars: `flex: 1 1 0`, `min-width: 0` (allows fractional pixel widths)\n- Critical: `min-width: 0` prevents overflow on narrow viewports with many bars\n- Histogram height: 50px desktop, 40px mobile\n- Histogram capped at 10 new hotspots to prevent outliers from flattening\n- When at end of timeline and user presses play, reset to beginning\n- **Playhead positioning**: Center on each bar using `calc(12px + (100% - 24px) * ${(currentIdx + 0.5) / snapshots.length})`\n- Playhead has `transform: translateX(-50%)` to center the 2px line on calculated position\n- Touch support: `onTouchStart`, `onTouchMove`, `onTouchEnd` handlers mirror mouse events\n\n### Playback Performance Optimizations\n- **requestAnimationFrame** instead of setInterval for smoother animation\n- **Index-based state** (`selectedIdx`) instead of date string to avoid linear searches\n- **Pre-computed clusters**: `clustersByDate` Map computed once on data load for O(1) lookup\n- **33ms frame interval** (~30fps) balances smoothness with performance\n- **Dynamic layer IDs during playback**: Forces complete layer recreation to avoid transition bugs\n- **Disabled transitions during playback**: Set `transitions: undefined` (not duration: 0)\n- **Disabled picking during playback**: `pickable: !isPlaying` for minor performance gain\n- Transitions and static layer IDs re-enabled when playback stops for smooth manual scrubbing\n\n### iOS Safari Viewport Fix\n- Use `height: 100dvh` (dynamic viewport height) instead of `100vh`\n- Add `viewport-fit=cover` to viewport meta tag\n- Use `env(safe-area-inset-bottom)` for timeline padding\n\n### Visual Design (Helium-inspired)\n- Dark theme with `--bg-primary: #04081b`\n- Accent colors: cyan (#4FC3F7), green (#00d97d), purple (#5e25fd)\n- Avoid bold fonts - use font-weight 400-500\n- Circle fill opacity: 0.5 for established (grey), 0.7 for new/recent\n- **Glass pane effect**: `background: var(--bg-card)`, `backdrop-filter: blur(15px)`, `border: 1px solid var(--border-color)`, `border-radius: 12px`\n- Two floating panels only: stats panel (top-left with integrated legend) and timeline (bottom)\n- Play button: white background, optical alignment with `padding-left: 3px` for triangle (reset to 0 for pause icon)\n\n### Color Coding (Hotspot Age)\n- Green (#2ecc71): New (< 7 days)\n- Blue (#3498db): Recent (< 30 days)\n- Grey (#a0a0a0): Established (30+ days)\n\n### Mobile Responsive (max-width: 768px)\n- Timeline: 10px margins, 12px padding\n- Histogram height: 40px with 6px 10px padding\n- Play button: 36x36px\n- Legend integrated into stats panel (always visible)\n\n## API Endpoints\n- `GET /api/hotspots` - All active hotspots\n- `GET /api/snapshots` - Daily snapshot stats\n- `GET /api/stats` - Current count and latest snapshot\n\n## Cron Job\n- `cron.ts` runs daily at 6 AM UTC via Val Town's cron scheduler\n- Fetches new hotspots from Helium Entity API\n- Updates daily_snapshots table with new counts\n\n## Database Schema\n- **hotspots** - Main hotspot records (entity_key_str, lat/long, created_at, first_seen_at, is_active)\n- **daily_snapshots** - Pre-computed daily stats (snapshot_date, total_count, new_count)\n- **hotspot_locations** - Location change history (tracks when hotspots move >11 meters between daily scrapes)\n\n### SQLite Migration Notes\n- Different versioned imports (`@14-main` vs unversioned) use **isolated database instances**\n- Always use consistent import path across all files\n- Migration script (`backend/migrate.ts`) copies data between database instances\n- Test thoroughly after any import path changes\n\n## DC Metro Bounding Box\n```typescript\nconst DC_BOUNDS = {\n minLat: 38.5, maxLat: 39.3,\n minLong: -77.5, maxLong: -76.7\n};\n```\n",[],[141],"e7310914-f7d5-11f0-8149-42dde27851f2","shared","e73109f0-f7d5-11f0-8149-42dde27851f2",12,["D",1769115852719],[156],[150],{"_39":157,"_13":158,"_42":159,"_44":151,"_46":47,"_48":160,"_50":51,"_52":161,"_17":67,"_55":68,"_56":162,"_58":59,"_60":-5,"_119":163,"_18":164},"e75fb62e-f7d5-11f0-900b-42dde27851f2","types.ts","e75fb6ec-f7d5-11f0-900b-42dde27851f2",14,["D",1769115853001],"// Shared TypeScript interfaces for DC Hotspot Growth Map\n\nexport interface Hotspot {\n entity_key_str: string;\n key_to_asset_key: string;\n lat: number;\n long: number;\n created_at: string; // ISO date string\n first_seen_at: string;\n is_active: boolean;\n}\n\nexport interface DailySnapshot {\n snapshot_date: string; // YYYY-MM-DD\n total_count: number;\n new_count: number;\n}\n\nexport interface HeliumHotspotListItem {\n key_to_asset_key: string;\n entity_key_str: string;\n is_active: boolean;\n lat: number | null;\n long: number | null;\n}\n\nexport interface HeliumApiResponse {\n cursor: string | null;\n items: HeliumHotspotListItem[];\n}\n\n// DC Metro bounding box (~50 mile radius from center)\nexport const DC_BOUNDS = {\n minLat: 38.5,\n maxLat: 39.3,\n minLong: -77.5,\n maxLong: -76.7,\n};\n\nexport const DC_CENTER = {\n lat: 38.9072,\n long: -77.0369,\n};\n\nexport const HELIUM_API_BASE = \"https://entities.nft.helium.io/v2\";\n",[],[150,158],["D",1769115491425],[168,169,170,171,172,173],[19],{"_39":93,"_13":94,"_42":95,"_44":45,"_46":47,"_48":96,"_50":51,"_52":198,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":199,"_18":200},{"_39":86,"_13":87,"_42":88,"_44":45,"_46":47,"_48":89,"_50":51,"_52":186,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":187,"_18":188},{"_39":79,"_13":80,"_42":81,"_44":45,"_46":47,"_48":82,"_50":51,"_52":183,"_17":67,"_55":24,"_56":84,"_58":59,"_60":-5,"_119":184,"_18":185},{"_39":71,"_13":72,"_42":73,"_44":45,"_46":47,"_48":74,"_50":51,"_52":180,"_17":76,"_55":24,"_56":77,"_58":59,"_60":-5,"_119":181,"_18":182},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":177,"_17":67,"_55":68,"_56":69,"_58":59,"_60":-5,"_119":178,"_18":179},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":174,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_119":175,"_18":176},["D",1769145726858],[],[19,41],["D",1769115491804],[],[19,63],["D",1769144037644],[],[19,72],["D",1769115492011],[],[19,80],["D",1769121458791],[189],[19,87],{"_39":190,"_13":191,"_42":192,"_44":88,"_46":47,"_48":193,"_50":51,"_52":194,"_17":76,"_55":68,"_56":195,"_58":59,"_60":-5,"_119":196,"_18":197},"34515420-f7e4-11f0-a6f6-42dde27851f2","animalHash.ts","f4ca8372-f7e2-11f0-b095-42dde27851f2",49,["D",1769121995073],"// Exact implementation of angry-purple-tiger\n// https://github.com/helium/angry-purple-tiger\n// Using blueimp-md5 for correct MD5 hashing\n\nimport md5 from \"https://esm.sh/blueimp-md5@2.19.0\";\n\n// Word lists from the original library (exact order matters!)\nconst ADJECTIVES = [\n \"attractive\", \"bald\", \"beautiful\", \"rare\", \"clean\", \"dazzling\", \"lucky\", \"elegant\",\n \"fancy\", \"fit\", \"fantastic\", \"glamorous\", \"gorgeous\", \"handsome\", \"long\", \"magnificent\",\n \"muscular\", \"plain\", \"able\", \"quaint\", \"scruffy\", \"innocent\", \"short\", \"skinny\",\n \"acrobatic\", \"tall\", \"proper\", \"alert\", \"lone\", \"agreeable\", \"ambitious\", \"brave\",\n \"calm\", \"delightful\", \"eager\", \"faithful\", \"gentle\", \"happy\", \"jolly\", \"kind\",\n \"lively\", \"nice\", \"obedient\", \"polite\", \"proud\", \"silly\", \"thankful\", \"winning\",\n \"witty\", \"wonderful\", \"zealous\", \"expert\", \"amateur\", \"clumsy\", \"amusing\", \"vast\",\n \"fierce\", \"real\", \"helpful\", \"itchy\", \"atomic\", \"basic\", \"mysterious\", \"blurry\",\n \"perfect\", \"best\", \"powerful\", \"interesting\", \"decent\", \"wild\", \"jovial\", \"genuine\",\n \"broad\", \"brisk\", \"brilliant\", \"curved\", \"deep\", \"flat\", \"high\", \"hollow\", \"low\",\n \"narrow\", \"refined\", \"round\", \"shallow\", \"skinny\", \"square\", \"steep\", \"straight\", \"wide\",\n \"big\", \"colossal\", \"clever\", \"gigantic\", \"great\", \"huge\", \"immense\", \"large\",\n \"little\", \"mammoth\", \"massive\", \"micro\", \"mini\", \"petite\", \"puny\", \"scrawny\",\n \"small\", \"polished\", \"teeny\", \"tiny\", \"crazy\", \"dancing\", \"custom\", \"faint\",\n \"harsh\", \"formal\", \"howling\", \"loud\", \"melodic\", \"noisy\", \"upbeat\", \"quiet\",\n \"dandy\", \"raspy\", \"rhythmic\", \"daring\", \"zany\", \"digital\", \"dizzy\", \"exotic\",\n \"fun\", \"furry\", \"hidden\", \"ancient\", \"brief\", \"early\", \"fast\", \"future\", \"late\",\n \"modern\", \"old\", \"prehistoric\", \"zesty\", \"rapid\", \"slow\", \"swift\", \"young\",\n \"acidic\", \"bitter\", \"cool\", \"creamy\", \"keen\", \"tricky\", \"fresh\", \"special\",\n \"unique\", \"hot\", \"magic\", \"main\", \"nutty\", \"pet\", \"mythical\", \"ripe\", \"wobbly\",\n \"salty\", \"savory\", \"sour\", \"spicy\", \"bright\", \"stale\", \"sweet\", \"tangy\", \"tart\",\n \"rich\", \"rural\", \"urban\", \"breezy\", \"bumpy\", \"chilly\", \"cold\", \"cuddly\", \"damaged\",\n \"damp\", \"restless\", \"dry\", \"flaky\", \"fluffy\", \"virtual\", \"merry\", \"icy\", \"shiny\",\n \"melted\", \"joyous\", \"rough\", \"shaggy\", \"sharp\", \"radiant\", \"sticky\", \"strong\",\n \"soft\", \"uneven\", \"warm\", \"feisty\", \"cheery\", \"energetic\", \"abundant\", \"macho\",\n \"glorious\", \"mean\", \"quick\", \"precise\", \"stable\", \"spare\", \"sunny\", \"trendy\",\n \"shambolic\", \"striped\", \"boxy\", \"generous\", \"tame\", \"joyful\", \"festive\", \"bubbly\",\n \"soaring\", \"orbiting\", \"sparkly\", \"smooth\", \"docile\", \"original\", \"electric\",\n \"funny\", \"passive\", \"active\", \"cheesy\", \"blunt\", \"dapper\", \"bent\", \"curly\",\n \"oblong\", \"sneaky\", \"overt\", \"careful\", \"jumpy\", \"bouncy\", \"recumbent\", \"cheerful\",\n \"droll\", \"odd\", \"suave\", \"sleepy\",\n];\n\nconst COLORS = [\n \"white\", \"pearl\", \"alabaster\", \"snowy\", \"ivory\", \"cream\", \"cotton\", \"chiffon\",\n \"lace\", \"coconut\", \"linen\", \"bone\", \"daisy\", \"powder\", \"frost\", \"porcelain\",\n \"parchment\", \"velvet\", \"tan\", \"beige\", \"macaroon\", \"hazel\", \"felt\", \"metal\",\n \"gingham\", \"sand\", \"sepia\", \"latte\", \"vinyl\", \"glass\", \"hazelnut\", \"canvas\",\n \"wool\", \"yellow\", \"golden\", \"daffodil\", \"flaxen\", \"butter\", \"lemon\", \"mustard\",\n \"tartan\", \"blue\", \"cloth\", \"fiery\", \"banana\", \"plastic\", \"dijon\", \"honey\",\n \"blonde\", \"pineapple\", \"orange\", \"tangerine\", \"marigold\", \"cider\", \"rusty\",\n \"ginger\", \"tiger\", \"bronze\", \"fuzzy\", \"opaque\", \"clay\", \"carrot\", \"corduroy\",\n \"ceramic\", \"marmalade\", \"amber\", \"sandstone\", \"concrete\", \"red\", \"cherry\",\n \"hemp\", \"merlot\", \"garnet\", \"crimson\", \"ruby\", \"scarlet\", \"burlap\", \"brick\",\n \"bamboo\", \"mahogany\", \"blood\", \"sangria\", \"berry\", \"currant\", \"blush\", \"candy\",\n \"lipstick\", \"pink\", \"rose\", \"fuchsia\", \"punch\", \"watermelon\", \"rouge\", \"coral\",\n \"peach\", \"strawberry\", \"rosewood\", \"lemonade\", \"taffy\", \"bubblegum\", \"crepe\",\n \"hotpink\", \"purple\", \"mauve\", \"violet\", \"boysenberry\", \"lavender\", \"plum\",\n \"magenta\", \"lilac\", \"grape\", \"eggplant\", \"eggshell\", \"iris\", \"heather\", \"amethyst\",\n \"raisin\", \"orchid\", \"mulberry\", \"carbon\", \"slate\", \"sky\", \"navy\", \"indigo\",\n \"cobalt\", \"cedar\", \"ocean\", \"azure\", \"cerulean\", \"spruce\", \"stone\", \"aegean\",\n \"denim\", \"admiral\", \"sapphire\", \"arctic\", \"green\", \"chartreuse\", \"juniper\",\n \"sage\", \"lime\", \"fern\", \"olive\", \"emerald\", \"pear\", \"mossy\", \"shamrock\",\n \"seafoam\", \"pine\", \"mint\", \"seaweed\", \"pickle\", \"pistachio\", \"basil\", \"brown\",\n \"coffee\", \"chrome\", \"peanut\", \"carob\", \"hickory\", \"wooden\", \"pecan\", \"walnut\",\n \"caramel\", \"gingerbread\", \"syrup\", \"chocolate\", \"tortilla\", \"umber\", \"tawny\",\n \"brunette\", \"cinnamon\", \"glossy\", \"teal\", \"grey\", \"shadow\", \"graphite\", \"iron\",\n \"pewter\", \"cloud\", \"silver\", \"smoke\", \"gauze\", \"ash\", \"foggy\", \"flint\",\n \"charcoal\", \"pebble\", \"lead\", \"tin\", \"fossilized\", \"black\", \"ebony\", \"midnight\",\n \"inky\", \"oily\", \"satin\", \"onyx\", \"nylon\", \"fleece\", \"sable\", \"jetblack\", \"coal\",\n \"mocha\", \"obsidian\", \"jade\", \"cyan\", \"leather\", \"maroon\", \"carmine\", \"aqua\",\n \"chambray\", \"holographic\", \"laurel\", \"licorice\", \"khaki\", \"goldenrod\", \"malachite\",\n \"mandarin\", \"mango\", \"taupe\", \"aquamarine\", \"turquoise\", \"vermilion\", \"saffron\",\n \"cinnabar\", \"myrtle\", \"neon\", \"burgundy\", \"tangelo\", \"topaz\", \"wintergreen\",\n \"viridian\", \"vanilla\", \"paisley\", \"raspberry\", \"tweed\", \"pastel\", \"opal\",\n \"menthol\", \"champagne\", \"gunmetal\", \"infrared\", \"ultraviolet\", \"rainbow\",\n \"mercurial\", \"clear\", \"misty\", \"steel\", \"zinc\", \"citron\", \"cornflower\", \"lava\",\n \"quartz\", \"honeysuckle\", \"chili\",\n];\n\nconst ANIMALS = [\n \"alligator\", \"bee\", \"bird\", \"camel\", \"cat\", \"cheetah\", \"chicken\", \"cow\", \"dog\",\n \"corgi\", \"eagle\", \"elephant\", \"fish\", \"fox\", \"toad\", \"giraffe\", \"hippo\",\n \"kangaroo\", \"kitten\", \"lobster\", \"monkey\", \"octopus\", \"pig\", \"puppy\", \"rabbit\",\n \"rat\", \"scorpion\", \"seal\", \"sheep\", \"snail\", \"spider\", \"tiger\", \"turtle\", \"newt\",\n \"tadpole\", \"frog\", \"tarantula\", \"albatross\", \"blackbird\", \"canary\", \"crow\",\n \"cuckoo\", \"dove\", \"pigeon\", \"falcon\", \"finch\", \"flamingo\", \"goose\", \"seagull\",\n \"hawk\", \"jay\", \"mockingbird\", \"kestrel\", \"kookaburra\", \"mallard\", \"nightingale\",\n \"nuthatch\", \"ostrich\", \"owl\", \"parakeet\", \"parrot\", \"peacock\", \"pelican\",\n \"penguin\", \"pheasant\", \"piranha\", \"raven\", \"robin\", \"rooster\", \"sparrow\",\n \"stork\", \"swallow\", \"swan\", \"swift\", \"turkey\", \"vulture\", \"woodpecker\", \"wren\",\n \"butterfly\", \"barbel\", \"carp\", \"cod\", \"crab\", \"eel\", \"goldfish\", \"haddock\",\n \"halibut\", \"jellyfish\", \"perch\", \"pike\", \"mantaray\", \"salmon\", \"sawfish\",\n \"scallop\", \"shark\", \"shell\", \"shrimp\", \"trout\", \"ant\", \"aphid\", \"beetle\",\n \"caterpillar\", \"dragonfly\", \"cricket\", \"fly\", \"grasshopper\", \"ladybug\",\n \"millipede\", \"moth\", \"wasp\", \"anteater\", \"antelope\", \"armadillo\", \"badger\",\n \"bat\", \"beaver\", \"bull\", \"chimpanzee\", \"dachshund\", \"deer\", \"dolphin\", \"elk\",\n \"moose\", \"gazelle\", \"gerbil\", \"goat\", \"bear\", \"hamster\", \"hare\", \"hedgehog\",\n \"horse\", \"hyena\", \"lion\", \"llama\", \"lynx\", \"mammoth\", \"marmot\", \"mink\", \"mole\",\n \"mongoose\", \"mouse\", \"mule\", \"otter\", \"panda\", \"platypus\", \"pony\", \"porcupine\",\n \"puma\", \"raccoon\", \"reindeer\", \"rhino\", \"skunk\", \"sloth\", \"squirrel\", \"weasel\",\n \"snake\", \"wolf\", \"zebra\", \"boa\", \"chameleon\", \"copperhead\", \"cottonmouth\",\n \"crocodile\", \"rattlesnake\", \"gecko\", \"iguana\", \"lizard\", \"python\", \"salamander\",\n \"sidewinder\", \"whale\", \"tortoise\", \"lemur\", \"rook\", \"koala\", \"donkey\", \"ferret\",\n \"tardigrade\", \"orca\", \"okapi\", \"liger\", \"unicorn\", \"dragon\", \"squid\", \"ape\",\n \"gorilla\", \"baboon\", \"cormorant\", \"mantis\", \"tapir\", \"capybara\", \"pangolin\",\n \"opossum\", \"wombat\", \"aardvark\", \"starfish\", \"shetland\", \"narwhal\", \"worm\",\n \"hornet\", \"viper\", \"stallion\", \"jaguar\", \"panther\", \"bobcat\", \"leopard\",\n \"osprey\", \"cougar\", \"dalmatian\", \"terrier\", \"duck\", \"sealion\", \"chipmunk\",\n \"loris\", \"poodle\", \"orangutan\", \"gibbon\", \"meerkat\", \"huskie\", \"barracuda\",\n \"bison\", \"caribou\", \"chinchilla\", \"coyote\", \"crane\", \"dinosaur\", \"lark\",\n \"griffin\", \"yeti\", \"troll\", \"seahorse\", \"walrus\", \"yak\", \"wolverine\", \"boar\",\n \"alpaca\", \"porpoise\", \"manatee\", \"guppy\", \"condor\", \"cyborg\", \"cobra\", \"locust\",\n \"mandrill\", \"oyster\", \"urchin\", \"quail\", \"sardine\", \"ram\", \"starling\", \"wallaby\",\n \"buffalo\", \"goblin\", \"tuna\", \"mustang\",\n];\n\n// Compress bytes to target length using XOR (exact algorithm from library)\nfunction compress(bytes: number[], target: number): number[] {\n const length = bytes.length;\n const segSize = Math.floor(length / target);\n const segments: number[][] = [];\n\n for (let i = 0; i < segSize * target; i += segSize) {\n segments.push(bytes.slice(i, i + segSize));\n }\n\n // Add remaining bytes to last segment\n const lastSeg = segments[segments.length - 1];\n segments[segments.length - 1] = lastSeg.concat(bytes.slice(target * segSize));\n\n // XOR each segment to get checksums\n return segments.map(seg => seg.reduce((acc, curr) => acc ^ curr, 0));\n}\n\n// Convert hex string to byte array\nfunction hexToBytes(hex: string): number[] {\n const bytes: number[] = [];\n for (let i = 0; i < hex.length; i += 2) {\n bytes.push(parseInt(hex.substring(i, i + 2), 16));\n }\n return bytes;\n}\n\n// Generate animal name from input string (exact angry-purple-tiger algorithm)\nexport function animalHash(input: string): string {\n const hexDigest = md5(input);\n const bytes = hexToBytes(hexDigest);\n const compressed = compress(bytes, 3);\n\n const adjective = ADJECTIVES[compressed[0] % ADJECTIVES.length];\n const color = COLORS[compressed[1] % COLORS.length];\n const animal = ANIMALS[compressed[2] % ANIMALS.length];\n\n return `${adjective}-${color}-${animal}`;\n}\n",[],[19,87,191],["D",1769115491600],[201],[19,94],{"_39":202,"_13":203,"_42":204,"_44":95,"_46":47,"_48":205,"_50":51,"_52":206,"_17":207,"_55":68,"_56":208,"_58":59,"_60":-5,"_119":209,"_18":210},"0b2471bc-f8bc-11f0-920b-42dde27851f2","App.tsx","102e094e-f7d5-11f0-88c4-42dde27851f2",124,["D",1769214697281],44,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useMemo, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport * as h3 from \"https://esm.sh/h3-js@4.1.0\";\nimport { animalHash } from \"../utils/animalHash.ts\";\n\n// deck.gl types (loaded from CDN script)\ndeclare const deck: any;\n\n// Types\ninterface Hotspot {\n entity_key_str: string;\n lat: number;\n long: number;\n created_at: string;\n first_seen_at: string;\n}\n\ninterface DailySnapshot {\n snapshot_date: string;\n total_count: number;\n new_count: number;\n}\n\ninterface H3Cluster {\n h3Index: string;\n hotspots: Hotspot[];\n center: [number, number];\n newestDate: string;\n count: number;\n}\n\nconst DC_CENTER = { lat: 38.9072, lng: -77.0369 };\nconst H3_RESOLUTION = 8;\n\n// Calculate days between two dates\nfunction daysBetween(date1: string, date2: string): number {\n const d1 = new Date(date1);\n const d2 = new Date(date2);\n return Math.floor((d2.getTime() - d1.getTime()) / (1000 * 60 * 60 * 24));\n}\n\n// Convert kebab-case to Title Case\nfunction toTitleCase(str: string): string {\n return str.split(\"-\").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(\" \");\n}\n\n// Get color based on hotspot age [R, G, B, A]\nfunction getHotspotColor(createdAt: string, selectedDate: string, isEstablished: boolean): [number, number, number, number] {\n const age = daysBetween(createdAt, selectedDate);\n const alpha = isEstablished ? 128 : 179; // 0.5 or 0.7 * 255\n if (age < 7) return [46, 204, 113, alpha]; // Green - new\n if (age < 30) return [52, 152, 219, alpha]; // Blue - recent\n return [160, 160, 160, alpha]; // Grey - established\n}\n\n// Group hotspots into H3 clusters\nfunction clusterHotspots(hotspots: Hotspot[]): H3Cluster[] {\n const clusters = new Map();\n\n for (const hotspot of hotspots) {\n const h3Index = h3.latLngToCell(hotspot.lat, hotspot.long, H3_RESOLUTION);\n if (!clusters.has(h3Index)) {\n clusters.set(h3Index, []);\n }\n clusters.get(h3Index)!.push(hotspot);\n }\n\n const result: H3Cluster[] = [];\n for (const [h3Index, clusterHotspots] of clusters) {\n const center = h3.cellToLatLng(h3Index) as [number, number];\n const newestDate = clusterHotspots.reduce((newest, h) =>\n h.created_at > newest ? h.created_at : newest,\n clusterHotspots[0].created_at\n );\n\n result.push({\n h3Index,\n hotspots: clusterHotspots,\n center,\n newestDate,\n count: clusterHotspots.length,\n });\n }\n\n return result;\n}\n\n// Calculate circle radius with sqrt easing\nfunction getClusterRadius(count: number): number {\n const minRadius = 8;\n const maxRadius = 35;\n const maxCount = 70;\n\n if (count <= 1) return minRadius;\n if (count >= maxCount) return maxRadius;\n\n const normalizedCount = Math.sqrt(count - 1) / Math.sqrt(maxCount - 1);\n return minRadius + (maxRadius - minRadius) * normalizedCount;\n}\n\nexport function App() {\n const [hotspots, setHotspots] = useState([]);\n const [snapshots, setSnapshots] = useState([]);\n // Use index instead of date string for faster playback\n const [selectedIdx, setSelectedIdx] = useState(-1);\n const [isPlaying, setIsPlaying] = useState(false);\n const [loading, setLoading] = useState(true);\n const [backfilling, setBackfilling] = useState(false);\n const [error, setError] = useState(null);\n const [tooltip, setTooltip] = useState<{ x: number; y: number; cluster: H3Cluster } | null>(null);\n\n const mapContainerRef = useRef(null);\n const deckRef = useRef(null);\n const canvasRef = useRef(null);\n const histogramRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n const animationRef = useRef(null);\n const lastFrameTimeRef = useRef(0);\n\n // Load data on mount\n useEffect(() => {\n async function loadData() {\n try {\n const [hotspotsRes, snapshotsRes] = await Promise.all([\n fetch(\"/api/hotspots\"),\n fetch(\"/api/snapshots\"),\n ]);\n\n if (!hotspotsRes.ok || !snapshotsRes.ok) {\n throw new Error(\"Failed to fetch data\");\n }\n\n const hotspotsData = await hotspotsRes.json();\n const snapshotsData = await snapshotsRes.json();\n\n setHotspots(hotspotsData);\n setSnapshots(snapshotsData);\n\n if (snapshotsData.length > 0) {\n setSelectedIdx(snapshotsData.length - 1);\n }\n } catch (e) {\n console.error(\"Error loading data:\", e);\n setError(String(e));\n } finally {\n setLoading(false);\n }\n }\n loadData();\n }, []);\n\n // Derive selectedDate from index\n const selectedDate = useMemo(() => {\n if (selectedIdx >= 0 && selectedIdx < snapshots.length) {\n return snapshots[selectedIdx].snapshot_date;\n }\n return new Date().toISOString().split(\"T\")[0];\n }, [selectedIdx, snapshots]);\n\n // Pre-compute clusters for all dates (memoized once when data loads)\n // This avoids expensive H3 clustering on every playback frame\n const clustersByDate = useMemo(() => {\n if (hotspots.length === 0 || snapshots.length === 0) return new Map();\n\n const result = new Map();\n\n // Sort hotspots by created_at for efficient incremental building\n const sortedHotspots = [...hotspots].sort((a, b) => a.created_at.localeCompare(b.created_at));\n\n let currentHotspots: Hotspot[] = [];\n let hotspotIdx = 0;\n\n for (const snapshot of snapshots) {\n const date = snapshot.snapshot_date;\n\n // Add hotspots created on or before this date\n while (hotspotIdx < sortedHotspots.length && sortedHotspots[hotspotIdx].created_at <= date) {\n currentHotspots.push(sortedHotspots[hotspotIdx]);\n hotspotIdx++;\n }\n\n // Cluster the current set of hotspots\n result.set(date, clusterHotspots([...currentHotspots]));\n }\n\n return result;\n }, [hotspots, snapshots]);\n\n // Get clusters for current date (O(1) lookup instead of O(n) computation)\n const clusters = useMemo(() => {\n return clustersByDate.get(selectedDate) || [];\n }, [clustersByDate, selectedDate]);\n\n // Filter hotspots for selected date (only needed for stats, not rendering)\n const visibleHotspots = useMemo(() => {\n return hotspots.filter(h => h.created_at <= selectedDate);\n }, [hotspots, selectedDate]);\n\n // Initialize deck.gl\n useEffect(() => {\n if (!mapContainerRef.current || deckRef.current) return;\n\n // Create canvas for deck.gl\n const canvas = document.createElement(\"canvas\");\n canvas.style.position = \"absolute\";\n canvas.style.top = \"0\";\n canvas.style.left = \"0\";\n canvas.style.width = \"100%\";\n canvas.style.height = \"100%\";\n mapContainerRef.current.appendChild(canvas);\n canvasRef.current = canvas;\n\n const deckInstance = new deck.Deck({\n canvas,\n initialViewState: {\n longitude: DC_CENTER.lng,\n latitude: DC_CENTER.lat,\n zoom: 11,\n pitch: 0,\n bearing: 0,\n },\n controller: true,\n layers: [],\n getTooltip: null,\n });\n\n deckRef.current = deckInstance;\n\n // Handle resize\n const resizeObserver = new ResizeObserver(() => {\n if (deckRef.current && mapContainerRef.current) {\n const { width, height } = mapContainerRef.current.getBoundingClientRect();\n canvas.width = width * window.devicePixelRatio;\n canvas.height = height * window.devicePixelRatio;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n deckRef.current.setProps({ width, height });\n }\n });\n resizeObserver.observe(mapContainerRef.current);\n\n return () => {\n resizeObserver.disconnect();\n if (deckRef.current) {\n deckRef.current.finalize();\n deckRef.current = null;\n }\n if (canvasRef.current) {\n canvasRef.current.remove();\n canvasRef.current = null;\n }\n };\n }, [loading]);\n\n // Update deck.gl layers when clusters change\n useEffect(() => {\n if (!deckRef.current) return;\n\n // Base map tile layer (CartoDB dark)\n const tileLayer = new deck.TileLayer({\n id: \"base-map\",\n data: \"https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png\",\n minZoom: 0,\n maxZoom: 19,\n tileSize: 256,\n renderSubLayers: (props: any) => {\n const { boundingBox } = props.tile;\n return new deck.BitmapLayer(props, {\n data: null,\n image: props.data,\n bounds: [boundingBox[0][0], boundingBox[0][1], boundingBox[1][0], boundingBox[1][1]],\n });\n },\n });\n\n // During playback, completely disable transitions to prevent interpolation bugs\n // that cause circles to disappear when data changes rapidly\n const scatterLayer = new deck.ScatterplotLayer({\n // Use dynamic id during playback to force complete layer recreation,\n // avoiding any lingering transition state that causes circles to disappear\n id: isPlaying ? `hotspot-clusters-${selectedIdx}` : \"hotspot-clusters\",\n data: clusters,\n pickable: !isPlaying, // Disable picking during playback for performance\n stroked: false,\n filled: true,\n radiusUnits: \"pixels\",\n getPosition: (d: H3Cluster) => [d.center[1], d.center[0]],\n getRadius: (d: H3Cluster) => getClusterRadius(d.count),\n getFillColor: (d: H3Cluster) => {\n const age = daysBetween(d.newestDate, selectedDate);\n const isEstablished = age >= 30;\n return getHotspotColor(d.newestDate, selectedDate, isEstablished);\n },\n // Only enable smooth transitions when NOT playing\n // During playback, no transitions = instant updates without interpolation bugs\n transitions: isPlaying ? undefined : {\n getRadius: { duration: 150, easing: (t: number) => t },\n getFillColor: { duration: 150 },\n },\n onClick: ({ object, x, y }: { object: H3Cluster; x: number; y: number }) => {\n if (object) {\n setTooltip({ x, y, cluster: object });\n }\n },\n updateTriggers: {\n getRadius: [selectedDate],\n getFillColor: [selectedDate],\n },\n });\n\n // Text layer for cluster count labels\n const textLayer = new deck.TextLayer({\n // Use dynamic id during playback to match scatterplot layer behavior\n id: isPlaying ? `cluster-labels-${selectedIdx}` : \"cluster-labels\",\n data: clusters.filter((c: H3Cluster) => c.count > 1), // Only show labels for count > 1\n pickable: false,\n getPosition: (d: H3Cluster) => [d.center[1], d.center[0]],\n getText: (d: H3Cluster) => String(d.count),\n getSize: 12,\n getColor: [255, 255, 255, 230],\n getTextAnchor: \"middle\",\n getAlignmentBaseline: \"center\",\n fontFamily: \"Figtree, sans-serif\",\n fontWeight: 300,\n outlineWidth: 0,\n outlineColor: [0, 0, 0, 150],\n billboard: false,\n sizeUnits: \"pixels\",\n updateTriggers: {\n getText: [selectedDate],\n },\n });\n\n deckRef.current.setProps({ layers: [tileLayer, scatterLayer, textLayer] });\n }, [clusters, selectedDate, selectedIdx, isPlaying]);\n\n // Get stats for selected date\n const currentStats = useMemo(() => {\n const snapshot = snapshots.find(s => s.snapshot_date === selectedDate);\n return snapshot || { total_count: visibleHotspots.length, new_count: 0 };\n }, [snapshots, selectedDate, visibleHotspots]);\n\n // Timeline playback using requestAnimationFrame for smooth animation\n useEffect(() => {\n if (!isPlaying || snapshots.length === 0) return;\n\n const FRAME_INTERVAL = 33; // ~30fps for smooth playback (faster than this looks rushed)\n\n const animate = (timestamp: number) => {\n if (timestamp - lastFrameTimeRef.current >= FRAME_INTERVAL) {\n lastFrameTimeRef.current = timestamp;\n\n setSelectedIdx(prev => {\n if (prev >= snapshots.length - 1) {\n setIsPlaying(false);\n return prev;\n }\n return prev + 1;\n });\n }\n\n animationRef.current = requestAnimationFrame(animate);\n };\n\n lastFrameTimeRef.current = performance.now();\n animationRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (animationRef.current !== null) {\n cancelAnimationFrame(animationRef.current);\n animationRef.current = null;\n }\n };\n }, [isPlaying, snapshots.length]);\n\n // Handle histogram scrub/click - calculate which snapshot index based on mouse position\n const getSnapshotIdxFromMouseEvent = useCallback((clientX: number): number => {\n if (!histogramRef.current || snapshots.length === 0) return -1;\n\n const rect = histogramRef.current.getBoundingClientRect();\n const padding = 12; // Match CSS padding\n const x = clientX - rect.left - padding;\n const contentWidth = rect.width - (padding * 2);\n const percentage = Math.max(0, Math.min(1, x / contentWidth));\n return Math.round(percentage * (snapshots.length - 1));\n }, [snapshots.length]);\n\n const handleHistogramMouseDown = useCallback((e: React.MouseEvent) => {\n setIsDragging(true);\n const idx = getSnapshotIdxFromMouseEvent(e.clientX);\n if (idx >= 0) {\n setSelectedIdx(idx);\n setIsPlaying(false);\n }\n }, [getSnapshotIdxFromMouseEvent]);\n\n const handleHistogramMouseMove = useCallback((e: React.MouseEvent) => {\n if (!isDragging) return;\n const idx = getSnapshotIdxFromMouseEvent(e.clientX);\n if (idx >= 0) {\n setSelectedIdx(idx);\n }\n }, [isDragging, getSnapshotIdxFromMouseEvent]);\n\n const handleHistogramMouseUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleHistogramMouseLeave = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n // Touch support for mobile\n const handleHistogramTouchStart = useCallback((e: React.TouchEvent) => {\n setIsDragging(true);\n const idx = getSnapshotIdxFromMouseEvent(e.touches[0].clientX);\n if (idx >= 0) {\n setSelectedIdx(idx);\n setIsPlaying(false);\n }\n }, [getSnapshotIdxFromMouseEvent]);\n\n const handleHistogramTouchMove = useCallback((e: React.TouchEvent) => {\n if (!isDragging) return;\n const idx = getSnapshotIdxFromMouseEvent(e.touches[0].clientX);\n if (idx >= 0) {\n setSelectedIdx(idx);\n }\n }, [isDragging, getSnapshotIdxFromMouseEvent]);\n\n const handleHistogramTouchEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n // Handle play button\n const handlePlayClick = useCallback(() => {\n if (isPlaying) {\n setIsPlaying(false);\n } else {\n // Reset to beginning if at end\n if (selectedIdx >= snapshots.length - 1 && snapshots.length > 0) {\n setSelectedIdx(0);\n }\n setIsPlaying(true);\n }\n }, [isPlaying, snapshots.length, selectedIdx]);\n\n // Handle backfill\n const handleBackfill = async () => {\n setBackfilling(true);\n try {\n const res = await fetch(\"/api/admin/backfill\", { method: \"POST\" });\n if (!res.ok) throw new Error(\"Backfill failed\");\n window.location.reload();\n } catch (e) {\n setError(String(e));\n } finally {\n setBackfilling(false);\n }\n };\n\n // Close tooltip when clicking outside\n const handleMapClick = useCallback((e: React.MouseEvent) => {\n if ((e.target as HTMLElement).closest(\".cluster-popup\")) return;\n setTooltip(null);\n }, []);\n\n if (loading) {\n return (\n

Loading Hotspot data...

\n );\n }\n\n if (hotspots.length === 0) {\n return (\n

No Hotspot Data

\n No Hotspots have been loaded yet. Click the button below to fetch\n DC area Hotspots from the Helium API.\n

\n \n {backfilling ? \"Loading Hotspots...\" : \"Load DC Hotspots\"}\n \n {error &&

{error}

}\n

\n );\n }\n\n const currentIdx = selectedIdx >= 0 ? selectedIdx : 0;\n const minDate = snapshots.length > 0 ? snapshots[0].snapshot_date : selectedDate;\n const maxDate = snapshots.length > 0 ? snapshots[snapshots.length - 1].snapshot_date : selectedDate;\n\n return (\n

\n {/* Stats Panel with Legend */}\n

DC Hotspot Growth

Helium Mobile Hotspots in the DC Metro area

\n\n

Total Hotspots

{currentStats.total_count.toLocaleString()}

\n +{currentStats.new_count} new\n

\n\n

\n Showing: {selectedDate}\n

\n\n {/* Integrated Legend */}\n

\n < 7d\n

\n < 30d\n

\n 30d+\n

\n\n {/* Map Container */}\n \n {/* Tooltip/Popup */}\n {tooltip && (\n \n

\n {tooltip.cluster.count} Hotspot{tooltip.cluster.count !== 1 ? \"s\" : \"\"}\n

\n {name}\n ({h.created_at})\n

\n {tooltip.cluster.count > 10 && (\n

...and {tooltip.cluster.count - 10} more

\n )}\n

\n )}\n \n\n {/* Timeline with Histogram */}\n {snapshots.length > 0 && (\n

\n \n {isPlaying ? \"⏸\" : \"▶\"}\n \n\n

\n {/* Interactive Histogram */}\n \n {(() => {\n const cappedMax = 10;\n return snapshots.map((snapshot) => {\n const cappedCount = Math.min(snapshot.new_count, cappedMax);\n const height = (cappedCount / cappedMax) * 100;\n const isCapped = snapshot.new_count > cappedMax;\n return (\n \n );\n });\n })()}\n {/* Playhead indicator - centered on each bar, accounting for padding */}\n \n

\n {minDate}\n {maxDate}\n

\n \n )}\n \n );\n}\n",[],[19,94,203],"e70fa13e-f7d5-11f0-8269-42dde27851f2","backend","e70fa206-f7d5-11f0-8269-42dde27851f2",11,["D",1769115852504],[218,219,220,221],[212],{"_39":245,"_13":246,"_42":247,"_44":213,"_46":47,"_48":248,"_50":51,"_52":249,"_17":250,"_55":68,"_56":251,"_58":59,"_60":-5,"_119":252,"_18":253},{"_39":238,"_13":239,"_42":240,"_44":213,"_46":47,"_48":54,"_50":51,"_52":241,"_17":101,"_55":68,"_56":242,"_58":59,"_60":-5,"_119":243,"_18":244},{"_39":230,"_13":231,"_42":232,"_44":213,"_46":47,"_48":233,"_50":51,"_52":234,"_17":67,"_55":68,"_56":235,"_58":59,"_60":-5,"_119":236,"_18":237},{"_39":222,"_13":223,"_42":224,"_44":213,"_46":47,"_48":225,"_50":51,"_52":226,"_17":76,"_55":68,"_56":227,"_58":59,"_60":-5,"_119":228,"_18":229},"f4c69ab4-f7e2-11f0-94ff-42dde27851f2","scraper.ts","e78c46bc-f7d5-11f0-858d-42dde27851f2",42,["D",1769121458973],"// Backfill and daily scraper for DC Hotspot Growth Map\nimport * as db from \"./db.ts\";\nimport * as helium from \"./heliumApi.ts\";\n\ninterface BackfillResult {\n processed: number;\n dcHotspots: number;\n newHotspots: number;\n skipped: number;\n errors: number;\n}\n\n// Run incremental backfill - only adds hotspots not already in database\nexport async function runBackfill(): Promise {\n await db.initDatabase();\n\n const result: BackfillResult = {\n processed: 0,\n dcHotspots: 0,\n newHotspots: 0,\n skipped: 0,\n errors: 0,\n };\n\n const today = new Date().toISOString().split(\"T\")[0];\n\n console.log(\"Starting incremental backfill of DC area Hotspots...\");\n\n // Get existing hotspots to skip\n const existing = await db.getAllHotspots();\n const existingKeys = new Set(existing.map(h => h.entity_key_str));\n console.log(`Found ${existingKeys.size} existing Hotspots in database`);\n\n // Fetch all DC hotspots\n const dcHotspots = await helium.fetchAllDCHotspots((processed, dcCount, cursor) => {\n if (processed % 1000 === 0) {\n console.log(`Processed ${processed} Hotspots, found ${dcCount} in DC area`);\n }\n result.processed = processed;\n });\n\n result.dcHotspots = dcHotspots.length;\n console.log(`Found ${dcHotspots.length} Hotspots in DC area. Fetching details for new ones...`);\n\n // Insert each new DC hotspot\n for (const hotspot of dcHotspots) {\n // Skip if already exists\n if (existingKeys.has(hotspot.entity_key_str)) {\n result.skipped++;\n continue;\n }\n\n try {\n // Try to get created_at from individual endpoint\n let created_at = today;\n try {\n const details = await helium.fetchHotspotDetails(hotspot.key_to_asset_key);\n if (details.created_at) {\n created_at = details.created_at.split(\"T\")[0]; // Extract date part\n }\n } catch (e) {\n // Use today as fallback\n }\n\n await db.upsertHotspot({\n entity_key_str: hotspot.entity_key_str,\n key_to_asset_key: hotspot.key_to_asset_key,\n lat: hotspot.lat!,\n long: hotspot.long!,\n created_at,\n first_seen_at: today,\n is_active: true,\n });\n\n result.newHotspots++;\n\n // Reduced rate limit for faster processing\n await helium.sleep(25);\n\n if (result.newHotspots % 50 === 0) {\n console.log(`Inserted ${result.newHotspots} new DC Hotspots`);\n }\n } catch (e) {\n console.error(`Error processing Hotspot ${hotspot.entity_key_str}:`, e);\n result.errors++;\n }\n }\n\n // Compute historical snapshots if we added new hotspots\n if (result.newHotspots > 0) {\n console.log(\"Computing historical snapshots...\");\n await db.computeHistoricalSnapshots();\n }\n\n console.log(`Backfill complete: ${result.newHotspots} new Hotspots, ${result.skipped} skipped, ${result.errors} errors`);\n return result;\n}\n\n// Run daily incremental scrape\nexport async function runDailyScrape(): Promise<{\n newHotspots: number;\n updated: number;\n removed: number;\n}> {\n await db.initDatabase();\n\n const today = new Date().toISOString().split(\"T\")[0];\n const stats = { newHotspots: 0, updated: 0, removed: 0 };\n\n console.log(`Starting daily scrape for ${today}...`);\n\n // Get existing hotspots for comparison\n const existing = await db.getAllHotspots();\n const existingMap = new Map(existing.map(h => [h.entity_key_str, h]));\n const seenKeys = new Set();\n\n // Fetch all DC hotspots\n const dcHotspots = await helium.fetchAllDCHotspots();\n\n for (const hotspot of dcHotspots) {\n if (!hotspot.lat || !hotspot.long) continue;\n\n seenKeys.add(hotspot.entity_key_str);\n const existingHotspot = existingMap.get(hotspot.entity_key_str);\n\n if (!existingHotspot) {\n // New hotspot\n let created_at = today;\n try {\n const details = await helium.fetchHotspotDetails(hotspot.key_to_asset_key);\n if (details.created_at) {\n created_at = details.created_at.split(\"T\")[0];\n }\n } catch (e) {\n // Use today as fallback\n }\n\n await db.upsertHotspot({\n entity_key_str: hotspot.entity_key_str,\n key_to_asset_key: hotspot.key_to_asset_key,\n lat: hotspot.lat,\n long: hotspot.long,\n created_at,\n first_seen_at: today,\n is_active: true,\n });\n\n stats.newHotspots++;\n await helium.sleep(25);\n } else {\n // Check for location change\n const threshold = 0.0001; // ~11 meters\n if (\n Math.abs(existingHotspot.lat - hotspot.lat) > threshold ||\n Math.abs(existingHotspot.long - hotspot.long) > threshold\n ) {\n await db.recordLocationChange(hotspot.entity_key_str, hotspot.lat, hotspot.long, today);\n await db.upsertHotspot({\n ...existingHotspot,\n lat: hotspot.lat,\n long: hotspot.long,\n });\n stats.updated++;\n }\n }\n }\n\n // Compute historical snapshots to update with any new dates\n await db.computeHistoricalSnapshots();\n\n // Create daily snapshot\n const totalCount = await db.getHotspotCount();\n await db.upsertSnapshot({\n snapshot_date: today,\n total_count: totalCount,\n new_count: stats.newHotspots,\n });\n\n console.log(`Daily scrape complete: ${stats.newHotspots} new, ${stats.updated} updated`);\n return stats;\n}\n",[],[212,223],"19c58cea-f8b9-11f0-801d-42dde27851f2","migrate.ts","19c58d8a-f8b9-11f0-801d-42dde27851f2",119,["D",1769213433340],"// Migration script to copy data from old sqlite to new Turso sqlite\nimport { sqlite as oldSqlite } from \"https://esm.town/v/std/sqlite\";\nimport newSqlite from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\nimport type { Hotspot, DailySnapshot } from \"../shared/types.ts\";\n\n// Read all hotspots from old database\nasync function getOldHotspots(): Promise {\n const result = await oldSqlite.execute(`\n SELECT entity_key_str, key_to_asset_key, lat, long, created_at, first_seen_at, is_active\n FROM hotspots\n ORDER BY created_at ASC\n LIMIT 10000\n `);\n\n const columns = result.columns || [];\n return result.rows.map((row: any) => {\n if (Array.isArray(row)) {\n const obj: any = {};\n columns.forEach((col: string, i: number) => {\n obj[col] = row[i];\n });\n return {\n entity_key_str: obj.entity_key_str as string,\n key_to_asset_key: obj.key_to_asset_key as string,\n lat: obj.lat as number,\n long: obj.long as number,\n created_at: obj.created_at as string,\n first_seen_at: obj.first_seen_at as string,\n is_active: Boolean(obj.is_active),\n };\n }\n return {\n entity_key_str: row.entity_key_str as string,\n key_to_asset_key: row.key_to_asset_key as string,\n lat: row.lat as number,\n long: row.long as number,\n created_at: row.created_at as string,\n first_seen_at: row.first_seen_at as string,\n is_active: Boolean(row.is_active),\n };\n });\n}\n\n// Read all snapshots from old database\nasync function getOldSnapshots(): Promise {\n const result = await oldSqlite.execute(`\n SELECT snapshot_date, total_count, new_count\n FROM daily_snapshots\n ORDER BY snapshot_date ASC\n `);\n\n const columns = result.columns || [];\n return result.rows.map((row: any) => {\n if (Array.isArray(row)) {\n const obj: any = {};\n columns.forEach((col: string, i: number) => {\n obj[col] = row[i];\n });\n return {\n snapshot_date: obj.snapshot_date as string,\n total_count: obj.total_count as number,\n new_count: obj.new_count as number,\n };\n }\n return {\n snapshot_date: row.snapshot_date as string,\n total_count: row.total_count as number,\n new_count: row.new_count as number,\n };\n });\n}\n\n// Initialize new database schema\nasync function initNewDatabase() {\n await newSqlite.execute(`\n CREATE TABLE IF NOT EXISTS hotspots (\n id INTEGER PRIMARY KEY,\n entity_key_str TEXT UNIQUE NOT NULL,\n key_to_asset_key TEXT NOT NULL,\n lat REAL NOT NULL,\n long REAL NOT NULL,\n created_at TEXT NOT NULL,\n first_seen_at TEXT NOT NULL,\n is_active INTEGER DEFAULT 1\n )\n `);\n\n await newSqlite.execute(`\n CREATE TABLE IF NOT EXISTS hotspot_locations (\n id INTEGER PRIMARY KEY,\n entity_key_str TEXT NOT NULL,\n lat REAL NOT NULL,\n long REAL NOT NULL,\n observed_at TEXT NOT NULL\n )\n `);\n\n await newSqlite.execute(`\n CREATE TABLE IF NOT EXISTS daily_snapshots (\n snapshot_date TEXT PRIMARY KEY,\n total_count INTEGER NOT NULL,\n new_count INTEGER NOT NULL\n )\n `);\n\n await newSqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_hotspots_created ON hotspots(created_at)\n `);\n await newSqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_snapshots_date ON daily_snapshots(snapshot_date)\n `);\n}\n\n// Insert hotspots into new database\nasync function insertHotspotsToNew(hotspots: Hotspot[]) {\n for (const hotspot of hotspots) {\n await newSqlite.execute({\n sql: `\n INSERT INTO hotspots (entity_key_str, key_to_asset_key, lat, long, created_at, first_seen_at, is_active)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(entity_key_str) DO UPDATE SET\n lat = excluded.lat,\n long = excluded.long,\n is_active = excluded.is_active\n `,\n args: [\n hotspot.entity_key_str,\n hotspot.key_to_asset_key,\n hotspot.lat,\n hotspot.long,\n hotspot.created_at,\n hotspot.first_seen_at,\n hotspot.is_active ? 1 : 0,\n ],\n });\n }\n}\n\n// Insert snapshots into new database\nasync function insertSnapshotsToNew(snapshots: DailySnapshot[]) {\n for (const snapshot of snapshots) {\n await newSqlite.execute({\n sql: `\n INSERT INTO daily_snapshots (snapshot_date, total_count, new_count)\n VALUES (?, ?, ?)\n ON CONFLICT(snapshot_date) DO UPDATE SET\n total_count = excluded.total_count,\n new_count = excluded.new_count\n `,\n args: [snapshot.snapshot_date, snapshot.total_count, snapshot.new_count],\n });\n }\n}\n\n// Get counts from new database to verify\nasync function getNewCounts(): Promise<{ hotspots: number; snapshots: number }> {\n const hotspotsResult = await newSqlite.execute(`SELECT COUNT(*) as count FROM hotspots`);\n const snapshotsResult = await newSqlite.execute(`SELECT COUNT(*) as count FROM daily_snapshots`);\n\n const hotspotRow = hotspotsResult.rows[0];\n const snapshotRow = snapshotsResult.rows[0];\n\n return {\n hotspots: (Array.isArray(hotspotRow) ? hotspotRow[0] : hotspotRow.count) as number,\n snapshots: (Array.isArray(snapshotRow) ? snapshotRow[0] : snapshotRow.count) as number,\n };\n}\n\n// Run the full migration\nexport async function runMigration() {\n console.log(\"Starting migration from old sqlite to new Turso sqlite...\");\n\n // Step 1: Read from old database\n console.log(\"Reading hotspots from old database...\");\n const hotspots = await getOldHotspots();\n console.log(`Found ${hotspots.length} hotspots in old database`);\n\n console.log(\"Reading snapshots from old database...\");\n const snapshots = await getOldSnapshots();\n console.log(`Found ${snapshots.length} snapshots in old database`);\n\n // Step 2: Initialize new database schema\n console.log(\"Initializing new database schema...\");\n await initNewDatabase();\n\n // Step 3: Insert data into new database\n console.log(\"Inserting hotspots into new database...\");\n await insertHotspotsToNew(hotspots);\n\n console.log(\"Inserting snapshots into new database...\");\n await insertSnapshotsToNew(snapshots);\n\n // Step 4: Verify counts\n console.log(\"Verifying migration...\");\n const newCounts = await getNewCounts();\n\n console.log(\"Migration complete!\");\n return {\n success: true,\n old: {\n hotspots: hotspots.length,\n snapshots: snapshots.length,\n },\n new: newCounts,\n verified: newCounts.hotspots === hotspots.length && newCounts.snapshots === snapshots.length,\n };\n}\n",[],[212,231],"0ff3587c-f7d9-11f0-b918-42dde27851f2","heliumApi.ts","e7738db6-f7d5-11f0-b958-42dde27851f2",["D",1769117209587],"// Helium Entity API client\nimport { HELIUM_API_BASE, DC_BOUNDS, type HeliumApiResponse, type HeliumHotspotListItem } from \"../shared/types.ts\";\n\nconst RATE_LIMIT_MS = 100; // 10 requests per second max\n\n// Fetch paginated mobile hotspots\nexport async function fetchMobileHotspots(cursor?: string | null): Promise {\n const url = new URL(`${HELIUM_API_BASE}/hotspots`);\n url.searchParams.set(\"subnetwork\", \"mobile\");\n if (cursor) {\n url.searchParams.set(\"cursor\", cursor);\n }\n\n const response = await fetch(url.toString());\n if (!response.ok) {\n throw new Error(`Helium API error: ${response.status} ${response.statusText}`);\n }\n\n return response.json();\n}\n\n// Fetch individual hotspot details\nexport async function fetchHotspotDetails(keyToAssetKey: string): Promise<{ created_at?: string; info?: any }> {\n const url = `${HELIUM_API_BASE}/hotspot/${keyToAssetKey}`;\n\n const response = await fetch(url);\n if (!response.ok) {\n if (response.status === 404) {\n return {}; // Hotspot details not available\n }\n throw new Error(`Helium API error: ${response.status}`);\n }\n\n const data = await response.json();\n\n // Extract created_at from hotspot_infos.mobile if available\n const mobileInfo = data.hotspot_infos?.mobile;\n if (mobileInfo?.created_at) {\n return { created_at: mobileInfo.created_at, info: data };\n }\n\n return { info: data };\n}\n\n// Check if coordinates are within DC Metro area\nexport function isInDCArea(lat: number | null, long: number | null): boolean {\n if (lat === null || long === null) return false;\n return (\n lat >= DC_BOUNDS.minLat &&\n lat <= DC_BOUNDS.maxLat &&\n long >= DC_BOUNDS.minLong &&\n long <= DC_BOUNDS.maxLong\n );\n}\n\n// Filter hotspots to DC area\nexport function filterDCHotspots(hotspots: HeliumHotspotListItem[]): HeliumHotspotListItem[] {\n return hotspots.filter(h => isInDCArea(h.lat, h.long));\n}\n\n// Sleep utility for rate limiting\nexport function sleep(ms: number): Promise {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\n// Fetch all DC area hotspots with pagination\nexport async function fetchAllDCHotspots(\n onProgress?: (processed: number, dcCount: number, cursor: string | null) => void\n): Promise {\n const dcHotspots: HeliumHotspotListItem[] = [];\n let cursor: string | null = null;\n let processed = 0;\n\n while (true) {\n const response = await fetchMobileHotspots(cursor);\n\n for (const hotspot of response.items) {\n processed++;\n if (isInDCArea(hotspot.lat, hotspot.long)) {\n dcHotspots.push(hotspot);\n }\n }\n\n if (onProgress) {\n onProgress(processed, dcHotspots.length, response.cursor);\n }\n\n if (!response.cursor) break;\n cursor = response.cursor;\n\n // Rate limiting\n await sleep(RATE_LIMIT_MS);\n }\n\n return dcHotspots;\n}\n",[],[212,239],"59aad018-f8b9-11f0-ae34-42dde27851f2","db.ts","e75c8c60-f7d5-11f0-84f8-42dde27851f2",121,["D",1769213540536],8,"// Database schema and query functions for DC Hotspot Growth Map\nimport sqlite from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\nimport type { Hotspot, DailySnapshot } from \"../shared/types.ts\";\n\n// Clear all data from database\nexport async function clearDatabase() {\n await sqlite.execute(`DELETE FROM hotspots`);\n await sqlite.execute(`DELETE FROM hotspot_locations`);\n await sqlite.execute(`DELETE FROM daily_snapshots`);\n}\n\n// Initialize database schema\nexport async function initDatabase() {\n // Hotspot records\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS hotspots (\n id INTEGER PRIMARY KEY,\n entity_key_str TEXT UNIQUE NOT NULL,\n key_to_asset_key TEXT NOT NULL,\n lat REAL NOT NULL,\n long REAL NOT NULL,\n created_at TEXT NOT NULL,\n first_seen_at TEXT NOT NULL,\n is_active INTEGER DEFAULT 1\n )\n `);\n\n // Location change history\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS hotspot_locations (\n id INTEGER PRIMARY KEY,\n entity_key_str TEXT NOT NULL,\n lat REAL NOT NULL,\n long REAL NOT NULL,\n observed_at TEXT NOT NULL\n )\n `);\n\n // Pre-computed daily stats\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS daily_snapshots (\n snapshot_date TEXT PRIMARY KEY,\n total_count INTEGER NOT NULL,\n new_count INTEGER NOT NULL\n )\n `);\n\n // Create indexes\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_hotspots_created ON hotspots(created_at)\n `);\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_snapshots_date ON daily_snapshots(snapshot_date)\n `);\n}\n\n// Get all active hotspots\nexport async function getAllHotspots(): Promise {\n const result = await sqlite.execute(`\n SELECT entity_key_str, key_to_asset_key, lat, long, created_at, first_seen_at, is_active\n FROM hotspots\n ORDER BY created_at ASC\n LIMIT 10000\n `);\n\n // Val Town SQLite returns rows as arrays, access by column index\n const columns = result.columns || [];\n return result.rows.map((row: any) => {\n // If row is an array, convert to object using column names\n if (Array.isArray(row)) {\n const obj: any = {};\n columns.forEach((col: string, i: number) => {\n obj[col] = row[i];\n });\n return {\n entity_key_str: obj.entity_key_str as string,\n key_to_asset_key: obj.key_to_asset_key as string,\n lat: obj.lat as number,\n long: obj.long as number,\n created_at: obj.created_at as string,\n first_seen_at: obj.first_seen_at as string,\n is_active: Boolean(obj.is_active),\n };\n }\n // Otherwise assume it's already an object\n return {\n entity_key_str: row.entity_key_str as string,\n key_to_asset_key: row.key_to_asset_key as string,\n lat: row.lat as number,\n long: row.long as number,\n created_at: row.created_at as string,\n first_seen_at: row.first_seen_at as string,\n is_active: Boolean(row.is_active),\n };\n });\n}\n\n// Get all daily snapshots\nexport async function getAllSnapshots(): Promise {\n const result = await sqlite.execute(`\n SELECT snapshot_date, total_count, new_count\n FROM daily_snapshots\n ORDER BY snapshot_date ASC\n `);\n\n // Val Town SQLite returns rows as arrays\n const columns = result.columns || [];\n return result.rows.map((row: any) => {\n if (Array.isArray(row)) {\n const obj: any = {};\n columns.forEach((col: string, i: number) => {\n obj[col] = row[i];\n });\n return {\n snapshot_date: obj.snapshot_date as string,\n total_count: obj.total_count as number,\n new_count: obj.new_count as number,\n };\n }\n return {\n snapshot_date: row.snapshot_date as string,\n total_count: row.total_count as number,\n new_count: row.new_count as number,\n };\n });\n}\n\n// Insert or update a hotspot\nexport async function upsertHotspot(hotspot: {\n entity_key_str: string;\n key_to_asset_key: string;\n lat: number;\n long: number;\n created_at: string;\n first_seen_at: string;\n is_active: boolean;\n}) {\n await sqlite.execute({\n sql: `\n INSERT INTO hotspots (entity_key_str, key_to_asset_key, lat, long, created_at, first_seen_at, is_active)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(entity_key_str) DO UPDATE SET\n lat = excluded.lat,\n long = excluded.long,\n is_active = excluded.is_active\n `,\n args: [\n hotspot.entity_key_str,\n hotspot.key_to_asset_key,\n hotspot.lat,\n hotspot.long,\n hotspot.created_at,\n hotspot.first_seen_at,\n hotspot.is_active ? 1 : 0,\n ],\n });\n}\n\n// Insert a daily snapshot\nexport async function upsertSnapshot(snapshot: DailySnapshot) {\n await sqlite.execute({\n sql: `\n INSERT INTO daily_snapshots (snapshot_date, total_count, new_count)\n VALUES (?, ?, ?)\n ON CONFLICT(snapshot_date) DO UPDATE SET\n total_count = excluded.total_count,\n new_count = excluded.new_count\n `,\n args: [snapshot.snapshot_date, snapshot.total_count, snapshot.new_count],\n });\n}\n\n// Get hotspot count\nexport async function getHotspotCount(): Promise {\n const result = await sqlite.execute(`SELECT COUNT(*) as count FROM hotspots WHERE is_active = 1`);\n const row = result.rows[0];\n return (Array.isArray(row) ? row[0] : row.count) as number;\n}\n\n// Check if a hotspot exists\nexport async function getHotspot(entity_key_str: string): Promise {\n const result = await sqlite.execute({\n sql: `SELECT * FROM hotspots WHERE entity_key_str = ?`,\n args: [entity_key_str],\n });\n\n if (result.rows.length === 0) return null;\n\n const row = result.rows[0];\n return {\n entity_key_str: row.entity_key_str as string,\n key_to_asset_key: row.key_to_asset_key as string,\n lat: row.lat as number,\n long: row.long as number,\n created_at: row.created_at as string,\n first_seen_at: row.first_seen_at as string,\n is_active: Boolean(row.is_active),\n };\n}\n\n// Record location change\nexport async function recordLocationChange(entity_key_str: string, lat: number, long: number, observed_at: string) {\n await sqlite.execute({\n sql: `INSERT INTO hotspot_locations (entity_key_str, lat, long, observed_at) VALUES (?, ?, ?, ?)`,\n args: [entity_key_str, lat, long, observed_at],\n });\n}\n\n// Compute historical snapshots from hotspot created_at dates\nexport async function computeHistoricalSnapshots() {\n // Get date range - Val Town SQLite returns arrays, so access by index\n const dateRange = await sqlite.execute(`\n SELECT MIN(DATE(created_at)) as min_date, MAX(DATE(created_at)) as max_date\n FROM hotspots\n `);\n\n // Access by index (0 = min_date, 1 = max_date)\n const row = dateRange.rows[0];\n const minDateStr = Array.isArray(row) ? row[0] : row.min_date;\n const maxDateStr = Array.isArray(row) ? row[1] : row.max_date;\n\n if (!minDateStr) return;\n\n const minDate = new Date(minDateStr as string);\n const maxDate = new Date(maxDateStr as string);\n\n // Compute snapshot for each day\n for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {\n const dateStr = d.toISOString().split('T')[0];\n\n const totalResult = await sqlite.execute({\n sql: `SELECT COUNT(*) as total FROM hotspots WHERE DATE(created_at) <= ?`,\n args: [dateStr],\n });\n\n const newResult = await sqlite.execute({\n sql: `SELECT COUNT(*) as new_count FROM hotspots WHERE DATE(created_at) = ?`,\n args: [dateStr],\n });\n\n // Access counts by index as well\n const totalRow = totalResult.rows[0];\n const newRow = newResult.rows[0];\n const total = Array.isArray(totalRow) ? totalRow[0] : totalRow.total;\n const newCount = Array.isArray(newRow) ? newRow[0] : newRow.new_count;\n\n await upsertSnapshot({\n snapshot_date: dateStr,\n total_count: total as number,\n new_count: newCount as number,\n });\n }\n}\n",[],[212,246],"0f63583e-f7d5-11f0-81ce-42dde27851f2",["D",1769115490645],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Map tracking Helium Hotspot growth around Washington DC","imageUrl","userId","d251f9a0-ef29-11ef-b0ef-a9e402d41f57","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","7dc0a550-a6a9-426f-8cc0-c1e24f3e9522","tursoName","0f63583ef7d511f081ce42dde27851f2","tursoHostname","0f63583ef7d511f081ce42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789542098478],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_310":306},"org",{"_11":12,"_304":-5,"_305":306,"_264":265,"_307":308,"_309":59},"branch",{"_17":113,"_13":16,"_39":47,"_296":254,"_297":-5,"_298":-5,"_299":-5,"_300":-5,"_301":-5,"_302":14,"_303":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEhoSjBDdW5lY3JwdWh5SVdiN0Z6dFRLcXIifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_39":254,"_13":14,"_52":413,"_256":-5,"_257":59,"_258":259,"_260":259,"_261":262,"_263":-5,"_264":265,"_266":112,"_267":51,"_268":-5,"_269":-5,"_270":101,"_271":272,"_273":274,"_275":276,"_277":414,"_279":-5,"_280":281,"_282":281,"_283":284,"_285":284,"_286":284,"_287":281,"_288":281,"_289":415,"_291":416,"_293":417,"_295":59},[353,358,367,369,370,371,372],"files",[353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372],"counts",{"_344":67,"_345":101,"_346":67,"_32":347,"_348":349},[332,333,334,335,336,337],{"_39":99,"_46":47,"_42":45,"_13":19,"_56":-5,"_55":91,"_17":67,"_44":-5,"_52":330,"_48":101,"_60":-5,"_18":331},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1769115491425],[19],{"_39":93,"_13":94,"_42":95,"_44":45,"_46":47,"_48":96,"_50":51,"_52":97,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_18":343},{"_39":86,"_13":87,"_42":88,"_44":45,"_46":47,"_48":89,"_50":51,"_52":90,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_18":342},{"_39":79,"_13":80,"_42":81,"_44":45,"_46":47,"_48":82,"_50":51,"_52":83,"_17":67,"_55":24,"_56":84,"_58":59,"_60":-5,"_18":341},{"_39":71,"_13":72,"_42":73,"_44":45,"_46":47,"_48":74,"_50":51,"_52":75,"_17":76,"_55":24,"_56":77,"_58":59,"_60":-5,"_18":340},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":66,"_17":67,"_55":68,"_56":69,"_58":59,"_60":-5,"_18":339},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_18":338},[19,41],[19,63],[19,72],[19,80],[19,87],[19,94],"pulls","branches","forks",{"_350":67,"_352":67},"connections",{"_350":67,"_351":67},"count","unfilledCount","emptyCount",{"_39":211,"_13":212,"_42":213,"_44":-5,"_46":47,"_48":214,"_50":51,"_52":215,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":411,"_18":412},{"_39":245,"_13":246,"_42":247,"_44":213,"_46":47,"_48":248,"_50":51,"_52":249,"_17":250,"_55":68,"_56":251,"_58":59,"_60":-5,"_119":409,"_18":410},{"_39":238,"_13":239,"_42":240,"_44":213,"_46":47,"_48":54,"_50":51,"_52":241,"_17":101,"_55":68,"_56":242,"_58":59,"_60":-5,"_119":407,"_18":408},{"_39":230,"_13":231,"_42":232,"_44":213,"_46":47,"_48":233,"_50":51,"_52":234,"_17":67,"_55":68,"_56":235,"_58":59,"_60":-5,"_119":405,"_18":406},{"_39":222,"_13":223,"_42":224,"_44":213,"_46":47,"_48":225,"_50":51,"_52":226,"_17":76,"_55":68,"_56":227,"_58":59,"_60":-5,"_119":403,"_18":404},{"_39":99,"_13":19,"_42":45,"_44":-5,"_46":47,"_48":101,"_50":51,"_52":165,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":401,"_18":402},{"_39":93,"_13":94,"_42":95,"_44":45,"_46":47,"_48":96,"_50":51,"_52":198,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":399,"_18":400},{"_39":202,"_13":203,"_42":204,"_44":95,"_46":47,"_48":205,"_50":51,"_52":206,"_17":207,"_55":68,"_56":208,"_58":59,"_60":-5,"_119":397,"_18":398},{"_39":86,"_13":87,"_42":88,"_44":45,"_46":47,"_48":89,"_50":51,"_52":186,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":395,"_18":396},{"_39":190,"_13":191,"_42":192,"_44":88,"_46":47,"_48":193,"_50":51,"_52":194,"_17":76,"_55":68,"_56":195,"_58":59,"_60":-5,"_119":393,"_18":394},{"_39":79,"_13":80,"_42":81,"_44":45,"_46":47,"_48":82,"_50":51,"_52":183,"_17":67,"_55":24,"_56":84,"_58":59,"_60":-5,"_119":391,"_18":392},{"_39":71,"_13":72,"_42":73,"_44":45,"_46":47,"_48":74,"_50":51,"_52":180,"_17":76,"_55":24,"_56":77,"_58":59,"_60":-5,"_119":389,"_18":390},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":177,"_17":67,"_55":68,"_56":69,"_58":59,"_60":-5,"_119":387,"_18":388},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":174,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_119":385,"_18":386},{"_39":149,"_13":150,"_42":151,"_44":-5,"_46":47,"_48":152,"_50":51,"_52":153,"_17":67,"_55":91,"_56":-5,"_58":59,"_60":-5,"_119":383,"_18":384},{"_39":157,"_13":158,"_42":159,"_44":151,"_46":47,"_48":160,"_50":51,"_52":161,"_17":67,"_55":68,"_56":162,"_58":59,"_60":-5,"_119":381,"_18":382},{"_39":140,"_13":141,"_42":142,"_44":-5,"_46":47,"_48":143,"_50":51,"_52":144,"_17":145,"_55":24,"_56":146,"_58":59,"_60":-5,"_119":379,"_18":380},{"_39":131,"_13":132,"_42":133,"_44":-5,"_46":47,"_48":134,"_50":51,"_52":135,"_17":136,"_55":24,"_56":137,"_58":59,"_60":-5,"_119":377,"_18":378},{"_39":122,"_13":123,"_42":124,"_44":-5,"_46":47,"_48":125,"_50":51,"_52":126,"_17":101,"_55":127,"_56":128,"_58":59,"_60":-5,"_119":375,"_18":376},{"_39":110,"_13":111,"_42":112,"_44":-5,"_46":47,"_48":113,"_50":51,"_52":114,"_17":115,"_55":116,"_56":117,"_58":59,"_60":118,"_119":373,"_18":374},[],[111],[],[123],[],[132],[],[141],[],[150,158],[368],[150],[],[19,41],[],[19,63],[],[19,72],[],[19,80],[],[19,87,191],[362],[19,87],[],[19,94,203],[360],[19,94],[359,361,363,364,365,366],[19],[],[212,223],[],[212,231],[],[212,239],[],[212,246],[354,355,356,357],[212],["D",1769115490645],["D",1789542098478],{"_11":12,"_310":306},{"_11":12,"_304":-5,"_305":306,"_264":265,"_307":308,"_309":59},{"_17":113,"_13":16,"_39":47,"_296":254,"_297":-5,"_298":-5,"_299":-5,"_300":-5,"_301":-5,"_302":14,"_303":12},"ctx",{"_289":-5,"_327":451,"_452":453,"_454":455,"_456":59,"_457":59,"_458":59,"_459":51,"_460":-5,"_461":-7,"_462":-7,"_463":67,"_464":59,"_465":59,"_466":-5,"_467":59,"_468":59,"_469":59,"_470":-5},"ENV",{"_422":423,"_424":425,"_426":16,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436,"_437":438,"_439":440,"_441":442,"_443":444,"_445":446,"_447":448,"_449":450},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]