merge: opportunity map HTMX data islands + remove dead API endpoint
All checks were successful
CI / test (push) Successful in 1m0s
CI / tag (push) Successful in 3s

# Conflicts:
#	transform/sqlmesh_padelnomics/models/serving/location_opportunity_profile.sql
#	web/src/padelnomics/api.py
#	web/src/padelnomics/public/templates/opportunity_map.html
This commit is contained in:
Deeman
2026-03-07 21:05:52 +01:00
4 changed files with 83 additions and 63 deletions

View File

@@ -82,7 +82,6 @@ async def country_cities(country_slug: str):
@bp.route("/markets/<country_slug>/<city_slug>/venues.json") @bp.route("/markets/<country_slug>/<city_slug>/venues.json")
@login_required
async def city_venues(country_slug: str, city_slug: str): async def city_venues(country_slug: str, city_slug: str):
"""Venue-level dots for the city detail map.""" """Venue-level dots for the city detail map."""
await _require_maps_flag() await _require_maps_flag()
@@ -99,23 +98,3 @@ async def city_venues(country_slug: str, city_slug: str):
) )
return jsonify(rows), 200, _CACHE_HEADERS return jsonify(rows), 200, _CACHE_HEADERS
@bp.route("/opportunity/<country_slug>.json")
async def opportunity(country_slug: str):
"""Location-level opportunity scores for the opportunity map."""
await _require_maps_flag()
assert country_slug, "country_slug required"
rows = await fetch_analytics(
"""
SELECT location_name, location_slug, lat, lon,
opportunity_score, market_score,
nearest_padel_court_km,
padel_venue_count, population
FROM serving.location_profiles
WHERE country_slug = ? AND opportunity_score > 0
ORDER BY opportunity_score DESC
LIMIT 500
""",
[country_slug],
)
return jsonify(rows), 200, _CACHE_HEADERS

View File

@@ -87,6 +87,46 @@ async def opportunity_map():
return await render_template("opportunity_map.html", countries=countries) return await render_template("opportunity_map.html", countries=countries)
@bp.route("/opportunity-map/data")
async def opportunity_map_data():
"""HTMX partial: opportunity + reference data islands for Leaflet map."""
from ..core import is_flag_enabled
if not await is_flag_enabled("maps", default=True):
abort(404)
country_slug = request.args.get("country", "")
if not country_slug:
return ""
opp_points = await fetch_analytics(
"""
SELECT location_name, location_slug, lat, lon,
opportunity_score, market_score,
nearest_padel_court_km, padel_venue_count, population
FROM serving.location_profiles
WHERE country_slug = ? AND opportunity_score > 0
ORDER BY opportunity_score DESC
LIMIT 500
""",
[country_slug],
)
ref_points = await fetch_analytics(
"""
SELECT city_name, city_slug, lat, lon,
city_padel_venue_count AS padel_venue_count,
market_score, population
FROM serving.location_profiles
WHERE country_slug = ? AND city_slug IS NOT NULL
ORDER BY city_padel_venue_count DESC
LIMIT 200
""",
[country_slug],
)
return await render_template(
"partials/opportunity_map_data.html",
opp_points=opp_points,
ref_points=ref_points,
)
@bp.route("/imprint") @bp.route("/imprint")
async def imprint(): async def imprint():
lang = g.get("lang", "en") lang = g.get("lang", "en")

View File

@@ -24,7 +24,10 @@
<div class="card mb-4" style="padding: 1rem 1.25rem;"> <div class="card mb-4" style="padding: 1rem 1.25rem;">
<label class="form-label" for="opp-country-select" style="margin-bottom: 0.5rem; display:block;">Select a country</label> <label class="form-label" for="opp-country-select" style="margin-bottom: 0.5rem; display:block;">Select a country</label>
<select id="opp-country-select" class="form-input" style="max-width: 280px;"> <select id="opp-country-select" name="country" class="form-input" style="max-width:280px;"
hx-get="{{ url_for('public.opportunity_map_data') }}"
hx-target="#map-data"
hx-trigger="change">
<option value="">— choose country —</option> <option value="">— choose country —</option>
{% for c in countries %} {% for c in countries %}
<option value="{{ c.country_slug }}">{{ c.country_name_en }}</option> <option value="{{ c.country_slug }}">{{ c.country_name_en }}</option>
@@ -33,6 +36,7 @@
</div> </div>
<div id="opportunity-map"></div> <div id="opportunity-map"></div>
<div id="map-data" style="display:none;"></div>
<div class="mt-4 text-sm text-slate"> <div class="mt-4 text-sm text-slate">
<strong>Circle size:</strong> population &nbsp;|&nbsp; <strong>Circle size:</strong> population &nbsp;|&nbsp;
@@ -86,53 +90,48 @@
: (p || ''); : (p || '');
} }
function loadCountry(slug) { function renderMap() {
oppLayer.clearLayers(); oppLayer.clearLayers();
refLayer.clearLayers(); refLayer.clearLayers();
if (!slug) return; var oppEl = document.getElementById('opp-data');
var refEl = document.getElementById('ref-data');
if (!oppEl) return;
var oppData = JSON.parse(oppEl.textContent);
var refData = JSON.parse(refEl.textContent);
fetch('/api/opportunity/' + slug + '.json') refData.forEach(function(c) {
.then(function(r) { return r.json(); }) if (!c.lat || !c.lon || !c.padel_venue_count) return;
.then(function(data) { L.marker([c.lat, c.lon], { icon: REF_ICON })
if (!data.length) return; .bindTooltip(c.city_name + ' — ' + c.padel_venue_count + ' existing venues',
var maxPop = Math.max.apply(null, data.map(function(d) { return d.population || 1; })); { className: 'map-tooltip', direction: 'top', offset: [0, -7] })
var bounds = []; .addTo(refLayer);
data.forEach(function(loc) { });
if (!loc.lat || !loc.lon) return;
var size = 8 + 40 * Math.sqrt((loc.population || 1) / maxPop);
var color = oppColor(loc.opportunity_score);
var dist = loc.nearest_padel_court_km != null
? loc.nearest_padel_court_km.toFixed(1) + ' km to nearest court'
: 'No nearby courts';
var mktColor = loc.market_score >= 60 ? '#16A34A' : (loc.market_score >= 30 ? '#D97706' : '#DC2626');
var tip = '<strong>' + loc.location_name + '</strong><br>'
+ '<span style="color:' + color + ';font-weight:600;">Padelnomics Opportunity Score: ' + loc.opportunity_score + '/100</span><br>'
+ '<span style="color:' + mktColor + ';font-weight:600;">Padelnomics Market Score: ' + (loc.market_score || 0) + '/100</span><br>'
+ dist + ' · Pop. ' + fmtPop(loc.population);
L.marker([loc.lat, loc.lon], { icon: makeIcon(size, color) })
.bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
.addTo(oppLayer);
bounds.push([loc.lat, loc.lon]);
});
if (bounds.length) map.fitBounds(bounds, { padding: [30, 30] });
});
// Existing venues as small gray reference dots (drawn first = behind opp dots) if (!oppData.length) return;
fetch('/api/markets/' + slug + '/cities.json') var maxPop = Math.max.apply(null, oppData.map(function(d) { return d.population || 1; }));
.then(function(r) { return r.json(); }) var bounds = [];
.then(function(data) { oppData.forEach(function(loc) {
data.forEach(function(c) { if (!loc.lat || !loc.lon) return;
if (!c.lat || !c.lon || !c.padel_venue_count) return; var size = 8 + 40 * Math.sqrt((loc.population || 1) / maxPop);
L.marker([c.lat, c.lon], { icon: REF_ICON }) var color = oppColor(loc.opportunity_score);
.bindTooltip(c.city_name + ' — ' + c.padel_venue_count + ' existing venues', var dist = loc.nearest_padel_court_km != null
{ className: 'map-tooltip', direction: 'top', offset: [0, -7] }) ? loc.nearest_padel_court_km.toFixed(1) + ' km to nearest court'
.addTo(refLayer); : 'No nearby courts';
}); var mktColor = loc.market_score >= 60 ? '#16A34A' : (loc.market_score >= 30 ? '#D97706' : '#DC2626');
}); var tip = '<strong>' + loc.location_name + '</strong><br>'
+ '<span style="color:' + color + ';font-weight:600;">Padelnomics Opportunity Score: ' + loc.opportunity_score + '/100</span><br>'
+ '<span style="color:' + mktColor + ';font-weight:600;">Padelnomics Market Score: ' + (loc.market_score || 0) + '/100</span><br>'
+ dist + ' · Pop. ' + fmtPop(loc.population);
L.marker([loc.lat, loc.lon], { icon: makeIcon(size, color) })
.bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
.addTo(oppLayer);
bounds.push([loc.lat, loc.lon]);
});
if (bounds.length) map.fitBounds(bounds, { padding: [30, 30] });
} }
document.getElementById('opp-country-select').addEventListener('change', function() { document.body.addEventListener('htmx:afterSwap', function(e) {
loadCountry(this.value); if (e.detail.target.id === 'map-data') renderMap();
}); });
})(); })();
</script> </script>

View File

@@ -0,0 +1,2 @@
<script id="opp-data" type="application/json">{{ opp_points | tojson }}</script>
<script id="ref-data" type="application/json">{{ ref_points | tojson }}</script>