\n \n \n \n \n\n",[],[153,181],"10309f92-f7d5-11f0-be9d-42dde27851f2","favicon.svg","1030a050-f7d5-11f0-be9d-42dde27851f2",7,["D",1769115492011],"\n",[],[153,189],"f4aa697a-f7e2-11f0-94ff-42dde27851f2","utils","f4aa6a42-f7e2-11f0-94ff-42dde27851f2",41,["D",1769121458791],[203],[153,197],{"_37":204,"_13":205,"_40":206,"_42":198,"_44":45,"_46":207,"_48":49,"_50":208,"_17":52,"_53":54,"_55":209,"_57":58,"_59":-5,"_106":210,"_18":211},"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",[],[153,197,205],"0ff62f6a-f7d5-11f0-9712-42dde27851f2","components","0ff6303c-f7d5-11f0-9712-42dde27851f2",2,["D",1769115491600],[219],[153,213],{"_37":220,"_13":221,"_40":222,"_42":214,"_44":45,"_46":223,"_48":49,"_50":224,"_17":225,"_53":54,"_55":226,"_57":58,"_59":-5,"_106":227,"_18":228},"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",[],[153,213,221],["D",1769115852504],[232,233,234,235],[19],{"_37":77,"_13":78,"_40":79,"_42":43,"_44":45,"_46":80,"_48":49,"_50":245,"_17":82,"_53":54,"_55":83,"_57":58,"_59":-5,"_106":246,"_18":247},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":242,"_17":74,"_53":54,"_55":75,"_57":58,"_59":-5,"_106":243,"_18":244},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":239,"_17":66,"_53":54,"_55":67,"_57":58,"_59":-5,"_106":240,"_18":241},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":236,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_106":237,"_18":238},["D",1769121458973],[],[19,39],["D",1769213433340],[],[19,62],["D",1769117209587],[],[19,70],["D",1769213540536],[],[19,78],"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",1789455078571],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_304":300},"org",{"_11":12,"_298":-5,"_299":300,"_258":259,"_301":302,"_303":58},"branch",{"_17":100,"_13":16,"_37":45,"_290":248,"_291":-5,"_292":-5,"_293":-5,"_294":-5,"_295":-5,"_296":14,"_297":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEhoSjBDdW5lY3JwdWh5SVdiN0Z6dFRLcXIifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":248,"_13":14,"_50":403,"_250":-5,"_251":58,"_252":253,"_254":253,"_255":256,"_257":-5,"_258":259,"_260":99,"_261":49,"_262":-5,"_263":-5,"_264":74,"_265":266,"_267":268,"_269":270,"_271":404,"_273":-5,"_274":275,"_276":275,"_277":278,"_279":278,"_280":278,"_281":275,"_282":275,"_283":405,"_285":406,"_287":407,"_289":58},[343,348,357,359,360,361,362],"files",[343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362],"counts",{"_334":66,"_335":74,"_336":66,"_32":337,"_338":339},[326,327,328,329],{"_37":85,"_44":45,"_40":43,"_13":19,"_55":-5,"_53":86,"_17":66,"_42":-5,"_50":324,"_46":88,"_59":-5,"_18":325},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1769115852504],[19],{"_37":77,"_13":78,"_40":79,"_42":43,"_44":45,"_46":80,"_48":49,"_50":81,"_17":82,"_53":54,"_55":83,"_57":58,"_59":-5,"_18":333},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":73,"_17":74,"_53":54,"_55":75,"_57":58,"_59":-5,"_18":332},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":54,"_55":67,"_57":58,"_59":-5,"_18":331},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":330},[19,39],[19,62],[19,70],[19,78],"pulls","branches","forks",{"_340":66,"_342":66},"connections",{"_340":66,"_341":66},"count","unfilledCount","emptyCount",{"_37":85,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":88,"_48":49,"_50":229,"_17":66,"_53":86,"_55":-5,"_57":58,"_59":-5,"_106":401,"_18":402},{"_37":77,"_13":78,"_40":79,"_42":43,"_44":45,"_46":80,"_48":49,"_50":245,"_17":82,"_53":54,"_55":83,"_57":58,"_59":-5,"_106":399,"_18":400},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":242,"_17":74,"_53":54,"_55":75,"_57":58,"_59":-5,"_106":397,"_18":398},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":239,"_17":66,"_53":54,"_55":67,"_57":58,"_59":-5,"_106":395,"_18":396},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":236,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_106":393,"_18":394},{"_37":152,"_13":153,"_40":154,"_42":-5,"_44":45,"_46":74,"_48":49,"_50":155,"_17":66,"_53":86,"_55":-5,"_57":58,"_59":-5,"_106":391,"_18":392},{"_37":212,"_13":213,"_40":214,"_42":154,"_44":45,"_46":215,"_48":49,"_50":216,"_17":66,"_53":86,"_55":-5,"_57":58,"_59":-5,"_106":389,"_18":390},{"_37":220,"_13":221,"_40":222,"_42":214,"_44":45,"_46":223,"_48":49,"_50":224,"_17":225,"_53":54,"_55":226,"_57":58,"_59":-5,"_106":387,"_18":388},{"_37":196,"_13":197,"_40":198,"_42":154,"_44":45,"_46":199,"_48":49,"_50":200,"_17":66,"_53":86,"_55":-5,"_57":58,"_59":-5,"_106":385,"_18":386},{"_37":204,"_13":205,"_40":206,"_42":198,"_44":45,"_46":207,"_48":49,"_50":208,"_17":52,"_53":54,"_55":209,"_57":58,"_59":-5,"_106":383,"_18":384},{"_37":188,"_13":189,"_40":190,"_42":154,"_44":45,"_46":191,"_48":49,"_50":192,"_17":66,"_53":24,"_55":193,"_57":58,"_59":-5,"_106":381,"_18":382},{"_37":180,"_13":181,"_40":182,"_42":154,"_44":45,"_46":183,"_48":49,"_50":184,"_17":52,"_53":24,"_55":185,"_57":58,"_59":-5,"_106":379,"_18":380},{"_37":172,"_13":173,"_40":174,"_42":154,"_44":45,"_46":175,"_48":49,"_50":176,"_17":66,"_53":54,"_55":177,"_57":58,"_59":-5,"_106":377,"_18":378},{"_37":164,"_13":165,"_40":166,"_42":154,"_44":45,"_46":167,"_48":49,"_50":168,"_17":72,"_53":24,"_55":169,"_57":58,"_59":-5,"_106":375,"_18":376},{"_37":136,"_13":137,"_40":138,"_42":-5,"_44":45,"_46":139,"_48":49,"_50":140,"_17":66,"_53":86,"_55":-5,"_57":58,"_59":-5,"_106":373,"_18":374},{"_37":144,"_13":145,"_40":146,"_42":138,"_44":45,"_46":147,"_48":49,"_50":148,"_17":66,"_53":54,"_55":149,"_57":58,"_59":-5,"_106":371,"_18":372},{"_37":127,"_13":128,"_40":129,"_42":-5,"_44":45,"_46":130,"_48":49,"_50":131,"_17":132,"_53":24,"_55":133,"_57":58,"_59":-5,"_106":369,"_18":370},{"_37":118,"_13":119,"_40":120,"_42":-5,"_44":45,"_46":121,"_48":49,"_50":122,"_17":123,"_53":24,"_55":124,"_57":58,"_59":-5,"_106":367,"_18":368},{"_37":109,"_13":110,"_40":111,"_42":-5,"_44":45,"_46":112,"_48":49,"_50":113,"_17":74,"_53":114,"_55":115,"_57":58,"_59":-5,"_106":365,"_18":366},{"_37":97,"_13":98,"_40":99,"_42":-5,"_44":45,"_46":100,"_48":49,"_50":101,"_17":102,"_53":103,"_55":104,"_57":58,"_59":105,"_106":363,"_18":364},[],[98],[],[110],[],[119],[],[128],[],[137,145],[358],[137],[],[153,165],[],[153,173],[],[153,181],[],[153,189],[],[153,197,205],[352],[153,197],[],[153,213,221],[350],[153,213],[349,351,353,354,355,356],[153],[],[19,39],[],[19,62],[],[19,70],[],[19,78],[344,345,346,347],[19],["D",1769115490645],["D",1789455078571],{"_11":12,"_304":300},{"_11":12,"_298":-5,"_299":300,"_258":259,"_301":302,"_303":58},{"_17":100,"_13":16,"_37":45,"_290":248,"_291":-5,"_292":-5,"_293":-5,"_294":-5,"_295":-5,"_296":14,"_297":12},"ctx",{"_283":-5,"_321":441,"_442":443,"_444":445,"_446":58,"_447":58,"_448":58,"_449":49,"_450":-5,"_451":-7,"_452":-7,"_453":66,"_454":58,"_455":58,"_456":-5,"_457":58,"_458":58,"_459":58,"_460":-5},"ENV",{"_412":413,"_414":415,"_416":16,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436,"_437":438,"_439":440},"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"]