/* global React */ const { useState, useEffect, useRef, useCallback } = React; // ============================================================ // Optimizer Lab — pick stops on a map, run GraphHopper VRP // Endpoint: https://geooptimizer.sensordata.com.uy // ============================================================ const DEFAULT_ENDPOINT = "https://geooptimizer.sensordata.com.uy"; const MVD_CENTER = [-34.9011, -56.1645]; // pleasant palette for stop markers const STOP_COLORS = [ "#2F6FE8", "#A8E640", "#E8742F", "#7B5BE8", "#0EA5A5", "#E84B7B", "#E8C72F", "#5BA8E8", "#7BE85B", "#E85B5B", "#5BE8C7", "#B85BE8", ]; function uid() { return Math.random().toString(36).slice(2, 9); } function haversine(a, b) { const R = 6371; const toRad = (x) => (x * Math.PI) / 180; const dLat = toRad(b[0] - a[0]); const dLon = toRad(b[1] - a[1]); const lat1 = toRad(a[0]); const lat2 = toRad(b[0]); const h = Math.sin(dLat / 2) ** 2 + Math.sin(dLon / 2) ** 2 * Math.cos(lat1) * Math.cos(lat2); return 2 * R * Math.asin(Math.sqrt(h)); } // Local nearest-neighbor TSP fallback (used when the endpoint is unreachable) function localOptimize(depot, stops, returnToDepot) { if (!stops.length) return { order: [], distance_km: 0, duration_min: 0, source: "local" }; const remaining = [...stops]; const order = []; let cur = depot.coords; let total = 0; while (remaining.length) { let best = 0; let bestD = Infinity; for (let i = 0; i < remaining.length; i++) { const d = haversine(cur, remaining[i].coords); if (d < bestD) { bestD = d; best = i; } } total += bestD; cur = remaining[best].coords; order.push(remaining[best]); remaining.splice(best, 1); } if (returnToDepot) total += haversine(cur, depot.coords); // assume 28 km/h average urban speed const duration_min = (total / 28) * 60; return { order, distance_km: total, duration_min, source: "local" }; } // Build a GraphHopper /vrp request body from our state function buildVrpRequest(depot, stops, options) { return { vehicles: [ { vehicle_id: "veh-1", start_address: { location_id: "depot", lon: depot.coords[1], lat: depot.coords[0] }, ...(options.returnToDepot ? { end_address: { location_id: "depot", lon: depot.coords[1], lat: depot.coords[0] } } : { return_to_depot: false }), type_id: "type-1", }, ], vehicle_types: [ { type_id: "type-1", profile: options.profile, }, ], services: stops.map((s, i) => ({ id: s.id, name: s.name || `Stop ${i + 1}`, address: { location_id: s.id, lon: s.coords[1], lat: s.coords[0] }, duration: options.serviceTimeSec, })), objectives: [ { type: "min", value: options.objective }, ], configuration: { routing: { calc_points: true } }, }; } function OptimizerPage({ lang, onBack }) { const isEs = lang === "es"; // state const [endpoint, setEndpoint] = useState(DEFAULT_ENDPOINT); const [apiKey, setApiKey] = useState(""); const [depot, setDepot] = useState({ coords: MVD_CENTER, name: isEs ? "Depósito" : "Depot" }); const [stops, setStops] = useState([]); // [{id, coords, name}] const [picking, setPicking] = useState("stop"); // "stop" | "depot" const [options, setOptions] = useState({ profile: "small_truck", objective: "completion_time", returnToDepot: true, serviceTimeSec: 120, maxDistance: 0, // 0 = unlimited considerTraffic: true, }); const [busy, setBusy] = useState(false); const [result, setResult] = useState(null); const [error, setError] = useState(null); const [logs, setLogs] = useState([]); const log = useCallback((msg, kind = "info") => { setLogs((l) => [...l.slice(-30), { t: new Date().toLocaleTimeString(), msg, kind }]); }, []); // Map refs const mapEl = useRef(null); const mapRef = useRef(null); const layersRef = useRef({ stops: [], depot: null, route: null }); // Init Leaflet map useEffect(() => { let cancelled = false; function ensureLeaflet() { return new Promise((resolve) => { if (window.L) return resolve(window.L); const css = document.createElement("link"); css.rel = "stylesheet"; css.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; css.integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="; css.crossOrigin = ""; document.head.appendChild(css); const s = document.createElement("script"); s.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; s.integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="; s.crossOrigin = ""; s.onload = () => resolve(window.L); document.head.appendChild(s); }); } ensureLeaflet().then((L) => { if (cancelled || !mapEl.current || mapRef.current) return; const map = L.map(mapEl.current, { center: MVD_CENTER, zoom: 12, zoomControl: true, attributionControl: true, }); // Carto dark-matter for a lab feel L.tileLayer( "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "© OpenStreetMap · © CARTO", } ).addTo(map); mapRef.current = map; // Pickup mode click map.on("click", (e) => { const coords = [e.latlng.lat, e.latlng.lng]; if (pickingRef.current === "depot") { setDepot((d) => ({ ...d, coords })); } else { setStops((arr) => [ ...arr, { id: uid(), coords, name: `${isEs ? "Parada" : "Stop"} ${arr.length + 1}` }, ]); } }); // expose marker icon helper L._roundIcon = (color, label) => L.divIcon({ className: "opt-marker", html: `${label}`, iconSize: [26, 26], iconAnchor: [13, 13], }); L._depotIcon = () => L.divIcon({ className: "opt-marker opt-marker-depot", html: `★`, iconSize: [30, 30], iconAnchor: [15, 15], }); }); return () => { cancelled = true; }; }, []); // keep picking ref so map handler reads latest const pickingRef = useRef(picking); useEffect(() => { pickingRef.current = picking; }, [picking]); // Render markers when stops/depot change useEffect(() => { const L = window.L; const map = mapRef.current; if (!L || !map) return; // depot if (layersRef.current.depot) map.removeLayer(layersRef.current.depot); layersRef.current.depot = L.marker(depot.coords, { icon: L._depotIcon(), draggable: true }) .addTo(map) .bindTooltip(depot.name, { permanent: false, direction: "top" }); layersRef.current.depot.on("dragend", (e) => { const ll = e.target.getLatLng(); setDepot((d) => ({ ...d, coords: [ll.lat, ll.lng] })); }); // stops layersRef.current.stops.forEach((m) => map.removeLayer(m)); layersRef.current.stops = stops.map((s, i) => { const m = L.marker(s.coords, { icon: L._roundIcon(STOP_COLORS[i % STOP_COLORS.length], i + 1), draggable: true, }) .addTo(map) .bindTooltip(s.name, { permanent: false, direction: "top" }); m.on("dragend", (e) => { const ll = e.target.getLatLng(); setStops((arr) => arr.map((x) => (x.id === s.id ? { ...x, coords: [ll.lat, ll.lng] } : x))); }); return m; }); }, [stops, depot]); // Render optimized route polyline useEffect(() => { const L = window.L; const map = mapRef.current; if (!L || !map) return; if (layersRef.current.route) { map.removeLayer(layersRef.current.route); layersRef.current.route = null; } if (!result || !result.order.length) return; const path = [depot.coords, ...result.order.map((s) => s.coords)]; if (options.returnToDepot) path.push(depot.coords); layersRef.current.route = L.polyline(path, { color: "#2F6FE8", weight: 4, opacity: 0.85, dashArray: result.source === "local" ? "8 6" : null, }).addTo(map); }, [result, depot, options.returnToDepot]); // Run optimization const runOptimize = async () => { if (!stops.length) { setError(isEs ? "Agregá al menos una parada haciendo clic en el mapa." : "Add at least one stop by clicking the map."); return; } setBusy(true); setError(null); setResult(null); log(`POST ${endpoint}/api/1/vrp · ${stops.length} ${isEs ? "paradas" : "stops"}`); const body = buildVrpRequest(depot, stops, options); try { const url = `${endpoint.replace(/\/$/, "")}/api/1/vrp${apiKey ? `?key=${encodeURIComponent(apiKey)}` : ""}`; const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); if (!res.ok) throw new Error(`${res.status} ${res.statusText}`); const data = await res.json(); log(`✓ ${isEs ? "respuesta recibida" : "response received"} · ${res.status}`, "ok"); // Parse GraphHopper VRP response const sol = data.solution || data; const route = (sol.routes && sol.routes[0]) || null; if (!route) throw new Error("Empty solution"); const ordered = route.activities .filter((a) => a.type === "service") .map((a) => stops.find((s) => s.id === a.id)) .filter(Boolean); const distance_km = (route.distance || sol.distance || 0) / 1000; const duration_min = (route.transport_time || sol.time || 0) / 60; setResult({ order: ordered, distance_km, duration_min, source: "graphhopper", raw: data }); } catch (e) { log(`✗ ${e.message} — ${isEs ? "usando fallback local" : "falling back local"}`, "warn"); const r = localOptimize(depot, stops, options.returnToDepot); setResult(r); setError( (isEs ? "No se pudo contactar el servidor de optimización (CORS / red). Mostrando una solución local de demostración." : "Could not reach the optimization server (CORS / network). Showing a local demo solution.") + ` · ${e.message}` ); } finally { setBusy(false); } }; const removeStop = (id) => setStops((arr) => arr.filter((s) => s.id !== id)); const renameStop = (id, name) => setStops((arr) => arr.map((s) => (s.id === id ? { ...s, name } : s))); const moveStop = (i, dir) => setStops((arr) => { const j = i + dir; if (j < 0 || j >= arr.length) return arr; const c = [...arr]; [c[i], c[j]] = [c[j], c[i]]; return c; }); const clearAll = () => { setStops([]); setResult(null); setError(null); }; const seedExample = () => { setStops([ { id: uid(), coords: [-34.8835, -56.1819], name: "Pocitos" }, { id: uid(), coords: [-34.9056, -56.1986], name: "Punta Carretas" }, { id: uid(), coords: [-34.9211, -56.1691], name: "Centro" }, { id: uid(), coords: [-34.8722, -56.1582], name: "Buceo" }, { id: uid(), coords: [-34.8546, -56.2089], name: "Carrasco" }, { id: uid(), coords: [-34.8967, -56.0846], name: "Aeropuerto" }, ]); setResult(null); }; return (
{/* ====================== LEFT: stops list ====================== */} {/* ====================== CENTER: map ====================== */}
{picking === "depot" ? (isEs ? "MODO · COLOCAR DEPÓSITO" : "MODE · PLACE DEPOT") : (isEs ? "MODO · AGREGAR PARADAS" : "MODE · ADD STOPS")}
{/* ====================== RIGHT: options + results ====================== */}
); } function RightPanel({ isEs, options, setOptions, endpoint, setEndpoint, apiKey, setApiKey, result, error, logs, depot, stops }) { const [tab, setTab] = useState("options"); // "options" | "result" | "log" return ( ); } window.OptimizerPage = OptimizerPage;