[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_341":342,"_343":344},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":59,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",106,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","1010cadc-f7d5-11f0-913f-42dde27851f2","name","style.css","fileType","content","/* DC Hotspot Growth Map - Helium-inspired dark theme */\n\n:root {\n --bg-primary: #04081b;\n --bg-secondary: rgba(255, 255, 255, 0.05);\n --bg-card: rgba(255, 255, 255, 0.08);\n --text-primary: #f7f7f7;\n --text-secondary: #7d7d7d;\n --accent-cyan: #4FC3F7;\n --accent-green: #00d97d;\n --accent-purple: #5e25fd;\n --border-color: rgba(255, 255, 255, 0.1);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body, #root {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\nbody {\n font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n}\n\n.app {\n display: flex;\n flex-direction: column;\n height: 100vh;\n height: 100dvh;\n width: 100vw;\n position: relative;\n}\n\n/* Stats Panel */\n.stats-panel {\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: 1000;\n background: var(--bg-card);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 16px;\n}\n\n.stats-panel h1 {\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 2px;\n color: var(--accent-cyan);\n}\n\n.stats-panel .tagline {\n font-size: 11px;\n color: var(--text-secondary);\n margin-bottom: 12px;\n}\n\n.stat-card {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.stat-label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-secondary);\n font-weight: 400;\n}\n\n.stat-value {\n font-size: 28px;\n font-weight: 500;\n line-height: 1;\n color: var(--text-primary);\n}\n\n.stat-delta {\n font-size: 12px;\n font-weight: 400;\n color: var(--accent-green);\n transition: opacity 0.2s;\n}\n\n.stat-delta.hidden {\n display: none;\n}\n\n.stat-delta.negative {\n color: #e74c3c;\n}\n\n.current-date {\n font-size: 11px;\n color: var(--text-secondary);\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid var(--border-color);\n}\n\n.current-date strong {\n color: var(--text-primary);\n font-weight: 500;\n}\n\n/* Timeline Histogram */\n.timeline-histogram {\n display: flex;\n align-items: flex-end;\n gap: 0;\n height: 40px;\n margin-bottom: 6px;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.histogram-bar {\n flex: 1;\n min-width: 1px;\n background: var(--accent-purple);\n border-radius: 2px 2px 0 0;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n opacity: 0.5;\n}\n\n.histogram-bar:hover {\n opacity: 1;\n background: var(--accent-cyan);\n}\n\n.histogram-bar.selected {\n background: var(--accent-cyan);\n opacity: 1;\n box-shadow: 0 0 6px rgba(79, 195, 247, 0.6);\n}\n\n.histogram-bar.capped {\n background: linear-gradient(to top, var(--accent-purple), var(--accent-green));\n opacity: 0.8;\n}\n\n/* Map Container */\n.map-container {\n flex: 1;\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n/* Timeline */\n.timeline {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n background: rgba(4, 8, 27, 0.95);\n padding: 12px 20px 20px 20px;\n padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));\n box-sizing: border-box;\n overflow: visible;\n}\n\n.timeline-inner {\n display: flex;\n align-items: center;\n gap: 16px;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.play-button {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--accent-cyan);\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n color: var(--bg-primary);\n transition: transform 0.2s, background 0.2s;\n flex-shrink: 0;\n}\n\n.play-button:hover {\n transform: scale(1.05);\n background: #6dd5fa;\n}\n\n.timeline-slider-container {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n overflow: hidden;\n}\n\n.timeline-slider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 6px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n cursor: pointer;\n}\n\n.timeline-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--accent-cyan);\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(79, 195, 247, 0.4);\n transition: transform 0.2s;\n}\n\n.timeline-slider::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n}\n\n.timeline-labels {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n/* Loading State */\n.loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n gap: 16px;\n}\n\n.loading-spinner {\n width: 48px;\n height: 48px;\n border: 3px solid var(--border-color);\n border-top-color: var(--accent-cyan);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-text {\n font-size: 16px;\n color: var(--text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n text-align: center;\n padding: 20px;\n}\n\n.empty-state h2 {\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.empty-state p {\n color: var(--text-secondary);\n margin-bottom: 24px;\n max-width: 400px;\n}\n\n.backfill-button {\n background: var(--accent-purple);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 400;\n cursor: pointer;\n transition: background 0.2s;\n}\n\n.backfill-button:hover {\n background: #7b3ff2;\n}\n\n.backfill-button:disabled {\n background: var(--text-secondary);\n cursor: not-allowed;\n}\n\n/* Popup Container */\n.cluster-popup-container {\n pointer-events: auto;\n}\n\n/* Legend */\n.legend {\n position: absolute;\n bottom: 160px;\n right: 20px;\n z-index: 1000;\n background: var(--bg-card);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 16px;\n}\n\n.legend-title {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--text-secondary);\n margin-bottom: 12px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n margin-bottom: 8px;\n}\n\n.legend-item:last-child {\n margin-bottom: 0;\n}\n\n.legend-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.legend-dot.new {\n background: #2ecc71;\n}\n\n.legend-dot.recent {\n background: #3498db;\n}\n\n.legend-dot.established {\n background: #a0a0a0;\n}\n\n/* Cluster Popup Styling */\n.cluster-popup {\n font-size: 13px;\n line-height: 1.5;\n max-width: 280px;\n background: rgba(4, 8, 27, 0.95);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 12px;\n color: var(--text-primary);\n font-family: 'Figtree', sans-serif;\n}\n\n.cluster-popup .cluster-count {\n font-size: 14px;\n font-weight: 500;\n color: var(--accent-cyan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.cluster-popup .hotspot-list {\n list-style: none;\n padding: 0;\n margin: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.cluster-popup .hotspot-list li {\n padding: 4px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.cluster-popup .hotspot-list li:last-child {\n border-bottom: none;\n}\n\n.cluster-popup .hotspot-list a {\n color: var(--accent-cyan);\n text-decoration: none;\n font-weight: 500;\n}\n\n.cluster-popup .hotspot-list a:hover {\n text-decoration: underline;\n}\n\n.cluster-popup .popup-more {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--border-color);\n color: var(--text-secondary);\n font-size: 12px;\n font-style: italic;\n}\n\n.cluster-popup .created-date {\n color: var(--text-secondary);\n font-size: 12px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .stats-panel {\n top: 10px;\n left: 10px;\n right: 10px;\n min-width: auto;\n padding: 12px;\n }\n\n .stat-value {\n font-size: 28px;\n }\n\n .legend {\n display: none;\n }\n\n .timeline {\n padding: 10px 12px 16px 12px;\n padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n }\n\n .timeline-inner {\n gap: 10px;\n }\n\n .timeline-histogram {\n height: 30px;\n margin-bottom: 6px;\n }\n\n .play-button {\n width: 36px;\n height: 36px;\n font-size: 16px;\n }\n\n .timeline-slider-container {\n gap: 4px;\n }\n\n .timeline-slider {\n height: 4px;\n }\n\n .timeline-slider::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n }\n\n .timeline-labels {\n font-size: 10px;\n }\n}\n","/* DC Hotspot Growth Map - Helium-inspired dark theme */\n\n:root {\n --bg-primary: #04081b;\n --bg-secondary: rgba(255, 255, 255, 0.05);\n --bg-card: rgba(255, 255, 255, 0.08);\n --text-primary: #f7f7f7;\n --text-secondary: #7d7d7d;\n --accent-cyan: #4FC3F7;\n --accent-green: #00d97d;\n --accent-purple: #5e25fd;\n --border-color: rgba(255, 255, 255, 0.1);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body, #root {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\nbody {\n font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n}\n\n.app {\n display: flex;\n flex-direction: column;\n height: 100vh;\n height: 100dvh;\n width: 100vw;\n position: relative;\n}\n\n/* Stats Panel */\n.stats-panel {\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: 1000;\n background: var(--bg-card);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 16px;\n}\n\n.stats-panel h1 {\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 2px;\n color: var(--accent-cyan);\n}\n\n.stats-panel .tagline {\n font-size: 11px;\n color: var(--text-secondary);\n margin-bottom: 12px;\n}\n\n.stat-card {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.stat-label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-secondary);\n font-weight: 400;\n}\n\n.stat-value {\n font-size: 28px;\n font-weight: 500;\n line-height: 1;\n color: var(--text-primary);\n}\n\n.stat-delta {\n font-size: 12px;\n font-weight: 400;\n color: var(--accent-green);\n transition: opacity 0.2s;\n}\n\n.stat-delta.hidden {\n display: none;\n}\n\n.stat-delta.negative {\n color: #e74c3c;\n}\n\n.current-date {\n font-size: 11px;\n color: var(--text-secondary);\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid var(--border-color);\n}\n\n.current-date strong {\n color: var(--text-primary);\n font-weight: 500;\n}\n\n/* Timeline Histogram - Interactive Scrubber */\n.timeline-histogram {\n display: flex;\n align-items: flex-end;\n gap: 0;\n height: 50px;\n margin-bottom: 8px;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n cursor: ew-resize;\n user-select: none;\n -webkit-user-select: none;\n touch-action: none;\n position: relative;\n}\n\n.histogram-bar {\n flex: 1;\n min-width: 1px;\n background: var(--accent-purple);\n border-radius: 1px 1px 0 0;\n pointer-events: none;\n transition: opacity 0.1s;\n opacity: 0.4;\n}\n\n.timeline-histogram:hover .histogram-bar {\n opacity: 0.6;\n}\n\n.histogram-bar.selected {\n background: var(--accent-cyan);\n opacity: 1;\n box-shadow: 0 0 8px rgba(79, 195, 247, 0.5);\n}\n\n.histogram-bar.capped {\n background: linear-gradient(to top, var(--accent-purple), var(--accent-green));\n}\n\n.histogram-bar.capped.selected {\n background: linear-gradient(to top, var(--accent-cyan), var(--accent-green));\n}\n\n/* Map Container */\n.map-container {\n flex: 1;\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n/* Timeline */\n.timeline {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n background: rgba(4, 8, 27, 0.95);\n padding: 12px 20px 20px 20px;\n padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));\n box-sizing: border-box;\n overflow: visible;\n}\n\n.timeline-inner {\n display: flex;\n align-items: center;\n gap: 16px;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.play-button {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--accent-cyan);\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n color: var(--bg-primary);\n transition: transform 0.2s, background 0.2s;\n flex-shrink: 0;\n}\n\n.play-button:hover {\n transform: scale(1.05);\n background: #6dd5fa;\n}\n\n.timeline-slider-container {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n overflow: hidden;\n}\n\n.timeline-labels {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n/* Loading State */\n.loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n gap: 16px;\n}\n\n.loading-spinner {\n width: 48px;\n height: 48px;\n border: 3px solid var(--border-color);\n border-top-color: var(--accent-cyan);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-text {\n font-size: 16px;\n color: var(--text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n text-align: center;\n padding: 20px;\n}\n\n.empty-state h2 {\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.empty-state p {\n color: var(--text-secondary);\n margin-bottom: 24px;\n max-width: 400px;\n}\n\n.backfill-button {\n background: var(--accent-purple);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 400;\n cursor: pointer;\n transition: background 0.2s;\n}\n\n.backfill-button:hover {\n background: #7b3ff2;\n}\n\n.backfill-button:disabled {\n background: var(--text-secondary);\n cursor: not-allowed;\n}\n\n/* Popup Container */\n.cluster-popup-container {\n pointer-events: auto;\n}\n\n/* Legend */\n.legend {\n position: absolute;\n bottom: 140px;\n right: 20px;\n z-index: 1000;\n background: var(--bg-card);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 16px;\n}\n\n.legend-title {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--text-secondary);\n margin-bottom: 12px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n margin-bottom: 8px;\n}\n\n.legend-item:last-child {\n margin-bottom: 0;\n}\n\n.legend-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.legend-dot.new {\n background: #2ecc71;\n}\n\n.legend-dot.recent {\n background: #3498db;\n}\n\n.legend-dot.established {\n background: #a0a0a0;\n}\n\n/* Cluster Popup Styling */\n.cluster-popup {\n font-size: 13px;\n line-height: 1.5;\n max-width: 280px;\n background: rgba(4, 8, 27, 0.95);\n backdrop-filter: blur(15px);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 12px;\n color: var(--text-primary);\n font-family: 'Figtree', sans-serif;\n}\n\n.cluster-popup .cluster-count {\n font-size: 14px;\n font-weight: 500;\n color: var(--accent-cyan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.cluster-popup .hotspot-list {\n list-style: none;\n padding: 0;\n margin: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.cluster-popup .hotspot-list li {\n padding: 4px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.cluster-popup .hotspot-list li:last-child {\n border-bottom: none;\n}\n\n.cluster-popup .hotspot-list a {\n color: var(--accent-cyan);\n text-decoration: none;\n font-weight: 500;\n}\n\n.cluster-popup .hotspot-list a:hover {\n text-decoration: underline;\n}\n\n.cluster-popup .popup-more {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--border-color);\n color: var(--text-secondary);\n font-size: 12px;\n font-style: italic;\n}\n\n.cluster-popup .created-date {\n color: var(--text-secondary);\n font-size: 12px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .stats-panel {\n top: 10px;\n left: 10px;\n right: 10px;\n min-width: auto;\n padding: 12px;\n }\n\n .stat-value {\n font-size: 28px;\n }\n\n .legend {\n display: none;\n }\n\n .timeline {\n padding: 10px 12px 16px 12px;\n padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n }\n\n .timeline-inner {\n gap: 10px;\n }\n\n .timeline-histogram {\n height: 40px;\n margin-bottom: 6px;\n }\n\n .play-button {\n width: 36px;\n height: 36px;\n font-size: 16px;\n }\n\n .timeline-slider-container {\n gap: 4px;\n }\n\n .timeline-labels {\n font-size: 10px;\n }\n}\n","createdAt",["D",1769144662900],"branchVersion","branchId","0f63dbe2-f7d5-11f0-81ce-42dde27851f2","id","0f63583e-f7d5-11f0-81ce-42dde27851f2","dc-hotspot-map",["D",1769115490645],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Map tracking Helium Hotspot growth around Washington DC","imageUrl","d251f9a0-ef29-11ef-b0ef-a9e402d41f57","pinnedFileId","10367c64-f7d5-11f0-990e-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"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",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",135,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jhiller","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEhoSjBDdW5lY3JwdWh5SVdiN0Z6dFRLcXIifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":336,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":337,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":338,"_84":339,"_86":340,"_88":25},"tree",[201,205,214,216,217,218,219],"files",[201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219],"counts",{"_191":154,"_192":63,"_193":154,"_194":195,"_196":197},"contents",[130,131,132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":185,"_32":186,"_30":187,"_139":-5,"_41":42,"_40":188,"_141":59,"_38":189,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_27":190},{"_43":180,"_32":181,"_30":182,"_139":-5,"_41":42,"_40":63,"_141":59,"_38":183,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_27":184},{"_43":173,"_32":174,"_30":175,"_139":-5,"_41":42,"_40":176,"_141":59,"_38":177,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_27":179},{"_43":165,"_32":166,"_30":167,"_139":-5,"_41":42,"_40":168,"_141":25,"_38":169,"_13":170,"_34":20,"_35":171,"_24":25,"_146":-5,"_27":172},{"_43":158,"_32":159,"_30":160,"_139":-5,"_41":42,"_40":161,"_141":25,"_38":162,"_13":154,"_34":20,"_35":163,"_24":25,"_146":-5,"_27":164},{"_43":149,"_32":150,"_30":151,"_139":-5,"_41":42,"_40":152,"_141":25,"_38":153,"_13":154,"_34":155,"_35":156,"_24":25,"_146":-5,"_27":157},{"_43":137,"_32":138,"_30":57,"_139":-5,"_41":42,"_40":140,"_141":25,"_38":142,"_13":143,"_34":144,"_35":145,"_24":25,"_146":147,"_27":148},"8baaeede-f7e4-11f0-9366-42dde27851f2","index.ts","parentId",50,"latest",["D",1769122141623],6,"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\";\nimport { runBackfill, runDailyScrape } from \"./backend/scraper.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 try {\n const hotspots = await db.getAllHotspots();\n return c.json(hotspots);\n } catch (e) {\n console.error(\"Error fetching Hotspots:\", e);\n return c.json({ error: \"Failed to fetch Hotspots\" }, 500);\n }\n});\n\n// API: Get all daily snapshots\napp.get(\"/api/snapshots\", async (c) => {\n try {\n const snapshots = await db.getAllSnapshots();\n return c.json(snapshots);\n } catch (e) {\n console.error(\"Error fetching snapshots:\", e);\n return c.json({ error: \"Failed to fetch snapshots\" }, 500);\n }\n});\n\n// API: Get hotspot count\napp.get(\"/api/stats\", async (c) => {\n try {\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 } catch (e) {\n console.error(\"Error fetching stats:\", e);\n return c.json({ error: \"Failed to fetch stats\" }, 500);\n }\n});\n\n// Admin API: Trigger backfill (protected - check for API key in production)\napp.post(\"/api/admin/backfill\", async (c) => {\n try {\n console.log(\"Starting backfill...\");\n const result = await runBackfill();\n return c.json(result);\n } catch (e) {\n console.error(\"Backfill error:\", e);\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Admin API: Trigger daily scrape\napp.post(\"/api/admin/scrape\", async (c) => {\n try {\n console.log(\"Starting daily scrape...\");\n const result = await runDailyScrape();\n return c.json(result);\n } catch (e) {\n console.error(\"Scrape error:\", e);\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Admin API: Compute historical snapshots from created_at dates\napp.post(\"/api/admin/compute-snapshots\", async (c) => {\n try {\n console.log(\"Computing historical snapshots...\");\n await db.computeHistoricalSnapshots();\n const snapshots = await db.getAllSnapshots();\n return c.json({ success: true, count: snapshots.length });\n } catch (e) {\n console.error(\"Compute snapshots error:\", e);\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Admin API: Clear all data and re-backfill\napp.post(\"/api/admin/clear-and-backfill\", async (c) => {\n try {\n console.log(\"Clearing database...\");\n await db.clearDatabase();\n console.log(\"Starting fresh backfill...\");\n const result = await runBackfill();\n return c.json(result);\n } catch (e) {\n console.error(\"Clear and backfill error:\", e);\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n\n","label","dc-hotspot-growth",[138],"f59bec9c-f7eb-11f0-b3bc-42dde27851f2","cron.ts","f59bed6e-f7eb-11f0-b3bc-42dde27851f2",77,["D",1769125325840],0,"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() {\n console.log(\"Starting scheduled daily scrape...\");\n\n try {\n const result = await runDailyScrape();\n console.log(\"Daily scrape completed:\", result);\n return result;\n } catch (error) {\n console.error(\"Daily scrape failed:\", error);\n throw error;\n }\n}\n",[150],"10469b94-f7d5-11f0-a6fb-42dde27851f2","README.md","10469c52-f7d5-11f0-a6fb-42dde27851f2",9,["D",1769115491998],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[159],"3c24381a-f817-11f0-968e-42dde27851f2","CLAUDE.md","5d98d982-f7eb-11f0-ae1a-42dde27851f2",97,["D",1769143912532],5,"# 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 Leaflet map with H3-based clustering (rendered as scaled circles) and timeline scrubbing.\n\n## Deployment\n- **Live URL**: https://jhiller--10367c64f7d511f0990e42dde27851f2.web.val.run\n\n## Tech Stack\n- **Platform**: Val Town (Deno runtime)\n- **Backend**: Hono HTTP framework\n- **Database**: Val Town SQLite\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- `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- Using ScatterplotLayer with `radiusUnits: \"pixels\"`\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- Built-in transitions: `transitions: { getRadius: { duration: 150 }, getFillColor: { duration: 150 } }`\n- TileLayer for CartoDB dark basemap tiles\n- Stroke: 1px width, 0.15 opacity (white)\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- Histogram bars must have `gap: 0` to align with slider (gaps accumulate across ~1000 bars)\n- Histogram height: 40px desktop, 30px mobile\n- Histogram capped at 10 new hotspots to prevent outliers from flattening\n- Playback at 15ms interval (~67 fps)\n- When at end of timeline and user presses play, reset to beginning\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- Map zoom control hidden (`zoomControl: false`)\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 padding: 10px 12px with safe-area-inset-bottom\n- Histogram height: 30px\n- Play button: 36x36px\n- Legend hidden on mobile\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- `POST /api/admin/backfill` - Trigger data backfill\n- `POST /api/admin/scrape` - Trigger daily scrape\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",[166],"e7310914-f7d5-11f0-8149-42dde27851f2","shared","e73109f0-f7d5-11f0-8149-42dde27851f2",12,["D",1769115852719],"directory",[174],"0fd734b6-f7d5-11f0-8b85-42dde27851f2","frontend","0fd73556-f7d5-11f0-8b85-42dde27851f2",["D",1769115491425],[181],"e70fa13e-f7d5-11f0-8269-42dde27851f2","backend","e70fa206-f7d5-11f0-8269-42dde27851f2",11,["D",1769115852504],[186],"pulls","branches","forks","envVars",{"_198":154,"_200":154},"connections",{"_198":154,"_199":154},"count","unfilledCount","emptyCount",{"_43":185,"_32":186,"_30":187,"_139":-5,"_41":42,"_40":188,"_141":59,"_38":333,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_221":334,"_27":335},{"_43":325,"_32":326,"_30":327,"_139":187,"_41":42,"_40":328,"_141":25,"_38":329,"_13":170,"_34":238,"_35":330,"_24":25,"_146":-5,"_221":331,"_27":332},{"_43":317,"_32":318,"_30":319,"_139":187,"_41":42,"_40":320,"_141":59,"_38":321,"_13":63,"_34":238,"_35":322,"_24":25,"_146":-5,"_221":323,"_27":324},{"_43":309,"_32":310,"_30":311,"_139":187,"_41":42,"_40":312,"_141":59,"_38":313,"_13":263,"_34":238,"_35":314,"_24":25,"_146":-5,"_221":315,"_27":316},{"_43":180,"_32":181,"_30":182,"_139":-5,"_41":42,"_40":63,"_141":59,"_38":306,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_221":307,"_27":308},{"_43":301,"_32":300,"_30":293,"_139":182,"_41":42,"_40":302,"_141":59,"_38":303,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_221":304,"_27":305},{"_43":290,"_32":291,"_30":292,"_139":293,"_41":42,"_40":294,"_141":25,"_38":295,"_13":296,"_34":238,"_35":297,"_24":25,"_146":-5,"_221":298,"_27":299},{"_43":285,"_32":284,"_30":278,"_139":182,"_41":42,"_40":286,"_141":59,"_38":287,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_221":288,"_27":289},{"_43":275,"_32":276,"_30":277,"_139":278,"_41":42,"_40":279,"_141":59,"_38":280,"_13":263,"_34":238,"_35":281,"_24":25,"_146":-5,"_221":282,"_27":283},{"_43":267,"_32":268,"_30":269,"_139":182,"_41":42,"_40":270,"_141":59,"_38":271,"_13":154,"_34":20,"_35":272,"_24":25,"_146":-5,"_221":273,"_27":274},{"_43":258,"_32":259,"_30":260,"_139":182,"_41":42,"_40":261,"_141":59,"_38":262,"_13":263,"_34":20,"_35":264,"_24":25,"_146":-5,"_221":265,"_27":266},{"_43":250,"_32":251,"_30":252,"_139":182,"_41":42,"_40":253,"_141":59,"_38":254,"_13":154,"_34":238,"_35":255,"_24":25,"_146":-5,"_221":256,"_27":257},{"_43":245,"_32":33,"_30":31,"_139":182,"_41":42,"_40":14,"_141":25,"_38":246,"_13":247,"_34":20,"_35":37,"_24":25,"_146":-5,"_221":248,"_27":249},{"_43":173,"_32":174,"_30":175,"_139":-5,"_41":42,"_40":176,"_141":59,"_38":242,"_13":154,"_34":178,"_35":-5,"_24":25,"_146":-5,"_221":243,"_27":244},{"_43":233,"_32":234,"_30":235,"_139":175,"_41":42,"_40":236,"_141":59,"_38":237,"_13":154,"_34":238,"_35":239,"_24":25,"_146":-5,"_221":240,"_27":241},{"_43":165,"_32":166,"_30":167,"_139":-5,"_41":42,"_40":168,"_141":25,"_38":230,"_13":170,"_34":20,"_35":171,"_24":25,"_146":-5,"_221":231,"_27":232},{"_43":158,"_32":159,"_30":160,"_139":-5,"_41":42,"_40":161,"_141":25,"_38":227,"_13":154,"_34":20,"_35":163,"_24":25,"_146":-5,"_221":228,"_27":229},{"_43":149,"_32":150,"_30":151,"_139":-5,"_41":42,"_40":152,"_141":25,"_38":224,"_13":154,"_34":155,"_35":156,"_24":25,"_146":-5,"_221":225,"_27":226},{"_43":137,"_32":138,"_30":57,"_139":-5,"_41":42,"_40":140,"_141":25,"_38":220,"_13":143,"_34":144,"_35":145,"_24":25,"_146":147,"_221":222,"_27":223},["D",1769122141623],"children",[],[138],["D",1769125325840],[],[150],["D",1769115491998],[],[159],["D",1769143912532],[],[166],"e75fb62e-f7d5-11f0-900b-42dde27851f2","types.ts","e75fb6ec-f7d5-11f0-900b-42dde27851f2",14,["D",1769115853001],"script","// 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",[],[174,234],["D",1769115852719],[215],[174],"fb655eec-f818-11f0-917d-42dde27851f2",["D",1769144662900],24,[],[181,33],"101773a0-f7d5-11f0-800a-42dde27851f2","index.tsx","1017744a-f7d5-11f0-800a-42dde27851f2",4,["D",1769115491804],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[181,251],"86b66d62-f817-11f0-ac3d-42dde27851f2","index.html","10239040-f7d5-11f0-b4d4-42dde27851f2",98,["D",1769144037644],3,"\n\n \n \n \n DC Helium Mobile Hotspot Growth\n \n \n \n \n \n \n \n

\n \n \n \n \n\n",[],[181,259],"10309f92-f7d5-11f0-be9d-42dde27851f2","favicon.svg","1030a050-f7d5-11f0-be9d-42dde27851f2",7,["D",1769115492011],"\n",[],[181,268],"34515420-f7e4-11f0-a6f6-42dde27851f2","animalHash.ts","f4ca8372-f7e2-11f0-b095-42dde27851f2","f4aa6a42-f7e2-11f0-94ff-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",[],[181,284,276],"utils","f4aa697a-f7e2-11f0-94ff-42dde27851f2",41,["D",1769121458791],[209],[181,284],"fb56d1ba-f818-11f0-8315-42dde27851f2","App.tsx","102e094e-f7d5-11f0-88c4-42dde27851f2","0ff6303c-f7d5-11f0-9712-42dde27851f2",105,["D",1769144662798],37,"/** @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 const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split(\"T\")[0]);\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\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 setSelectedDate(snapshotsData[snapshotsData.length - 1].snapshot_date);\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 // Filter hotspots for selected date\n const visibleHotspots = useMemo(() => {\n return hotspots.filter(h => h.created_at <= selectedDate);\n }, [hotspots, selectedDate]);\n\n // Cluster hotspots by H3 hexagon\n const clusters = useMemo(() => {\n return clusterHotspots(visibleHotspots);\n }, [visibleHotspots]);\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 const scatterLayer = new deck.ScatterplotLayer({\n id: \"hotspot-clusters\",\n data: clusters,\n pickable: true,\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 // Transitions for smooth animation\n transitions: {\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 id: \"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]);\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\n useEffect(() => {\n if (!isPlaying || snapshots.length === 0) return;\n\n const interval = setInterval(() => {\n setSelectedDate(prev => {\n const currentIdx = snapshots.findIndex(s => s.snapshot_date === prev);\n if (currentIdx === -1 || currentIdx >= snapshots.length - 1) {\n setIsPlaying(false);\n return prev;\n }\n return snapshots[currentIdx + 1].snapshot_date;\n });\n }, 15);\n\n return () => clearInterval(interval);\n }, [isPlaying, snapshots]);\n\n // Handle histogram scrub/click - calculate which snapshot based on mouse position\n const getSnapshotFromMouseEvent = useCallback((clientX: number): string | null => {\n if (!histogramRef.current || snapshots.length === 0) return null;\n\n const rect = histogramRef.current.getBoundingClientRect();\n const x = clientX - rect.left;\n const percentage = Math.max(0, Math.min(1, x / rect.width));\n const idx = Math.round(percentage * (snapshots.length - 1));\n\n return snapshots[idx]?.snapshot_date || null;\n }, [snapshots]);\n\n const handleHistogramMouseDown = useCallback((e: React.MouseEvent) => {\n setIsDragging(true);\n const date = getSnapshotFromMouseEvent(e.clientX);\n if (date) {\n setSelectedDate(date);\n setIsPlaying(false);\n }\n }, [getSnapshotFromMouseEvent]);\n\n const handleHistogramMouseMove = useCallback((e: React.MouseEvent) => {\n if (!isDragging) return;\n const date = getSnapshotFromMouseEvent(e.clientX);\n if (date) {\n setSelectedDate(date);\n }\n }, [isDragging, getSnapshotFromMouseEvent]);\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 date = getSnapshotFromMouseEvent(e.touches[0].clientX);\n if (date) {\n setSelectedDate(date);\n setIsPlaying(false);\n }\n }, [getSnapshotFromMouseEvent]);\n\n const handleHistogramTouchMove = useCallback((e: React.TouchEvent) => {\n if (!isDragging) return;\n const date = getSnapshotFromMouseEvent(e.touches[0].clientX);\n if (date) {\n setSelectedDate(date);\n }\n }, [isDragging, getSnapshotFromMouseEvent]);\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 const currentIdx = snapshots.findIndex(s => s.snapshot_date === selectedDate);\n if (currentIdx >= snapshots.length - 1 && snapshots.length > 0) {\n setSelectedDate(snapshots[0].snapshot_date);\n }\n setIsPlaying(true);\n }\n }, [isPlaying, snapshots, selectedDate]);\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 = snapshots.findIndex(s => s.snapshot_date === selectedDate);\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 */}\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 {/* Legend */}\n

Hotspot Age

\n New (< 7 days)\n

\n Recent (< 30 days)\n

\n Established (30+ days)\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 isSelected = snapshot.snapshot_date === selectedDate;\n const isCapped = snapshot.new_count > cappedMax;\n return (\n \n );\n });\n })()}\n

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

\n \n )}\n \n );\n}\n",[],[181,300,291],"components","0ff62f6a-f7d5-11f0-9712-42dde27851f2",2,["D",1769115491600],[207],[181,300],["D",1769115491425],[206,208,210,211,212,213],[181],"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",[],[186,310],"0ff3587c-f7d9-11f0-b918-42dde27851f2","heliumApi.ts","e7738db6-f7d5-11f0-b958-42dde27851f2",28,["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",[],[186,318],"0389740a-f7dd-11f0-9b45-42dde27851f2","db.ts","e75c8c60-f7d5-11f0-84f8-42dde27851f2",33,["D",1769118906735],"// Database schema and query functions for DC Hotspot Growth Map\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\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",[],[186,326],["D",1769115852504],[202,203,204],[186],["D",1769115490645],["D",1789542098478],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"ctx",{"_82":-5,"_127":374,"_375":376,"_377":378,"_379":25,"_380":25,"_381":25,"_382":59,"_383":-5,"_384":-7,"_385":-7,"_386":154,"_387":25,"_388":25,"_389":-5,"_390":25,"_391":25,"_392":25,"_393":-5},"ENV",{"_345":346,"_347":348,"_349":90,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373},"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"]

Diff · v106