ai-zone/line-of-sight
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update application ports to 3051 and enhance frontend/backend configurations

Browse Source
This commit is contained in:
(jenkins)
2026-04-08 16:15:58 +01:00
parent 234ed8ae94
commit c83049aca5
10 changed files with 242 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+151 -85
View File
@@ -12,38 +12,47 @@ const APP = () => {
const cityMarkersRef = useRef([]);
const animationRef = useRef(null);
const popupRef = useRef(null);
// Ref mirrors mapProjection state so stale closures (style.load) read the current value
// Refs mirror state so stale closures (e.g. style.load) always read the current value
const mapProjectionRef = useRef('globe');
const selectedPointRef = useRef({ lat: 51.5074, lon: -0.1278 });
const directionRef = useRef(90);
const lineOfSightDataRef = useRef(null);
const flightProgressRef = useRef(0);
const seekRef = useRef(null);
const currentCityIndexRef = useRef(-1);
const [selectedPoint, setSelectedPoint] = useState({ lat: 51.5074, lon: -0.1278 });
const [direction, setDirection] = useState(45);
const [direction, setDirection] = useState(90);
const [lineOfSightData, setLineOfSightData] = useState(null);
const [loading, setLoading] = useState(false);
const [isPlaying, setIsPlaying] = useState(false);
const [flightSpeed, setFlightSpeed] = useState(1.0);
const [mapStyle, setMapStyle] = useState('light');
const [mapStyle, setMapStyle] = useState('basic');
const [mapProjection, setMapProjection] = useState('globe');
const [tolerance, setTolerance] = useState(50);
const [selectedCity, setSelectedCity] = useState(null);
const [isLocked, setIsLocked] = useState(false);
const [currentCityIndex, setCurrentCityIndex] = useState(-1);
// Keep ref in sync with state
// Keep refs in sync with state so stale closures always have current values
useEffect(() => { mapProjectionRef.current = mapProjection; }, [mapProjection]);
useEffect(() => { selectedPointRef.current = selectedPoint; }, [selectedPoint]);
useEffect(() => { directionRef.current = direction; }, [direction]);
useEffect(() => { lineOfSightDataRef.current = lineOfSightData; }, [lineOfSightData]);
// Auto-scroll sidebar to current city during flight
useEffect(() => {
mapProjectionRef.current = mapProjection;
}, [mapProjection]);
if (isPlaying && currentCityIndex >= 0) {
const row = document.getElementById(`city-row-${currentCityIndex}`);
if (row) row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
}, [currentCityIndex, isPlaying]);
// --- Helpers ---
// Build GeoJSON for the line, splitting at the antimeridian for flat projections
const buildLineGeoJSON = (lineCoords, projection) => {
const buildLineGeoJSON = (lineCoords) => {
const coords = lineCoords.map(c => [c.lon, c.lat]);
if (projection === 'globe') {
return {
type: 'Feature',
properties: {},
geometry: { type: 'LineString', coordinates: coords }
};
}
// Split segments wherever consecutive points cross the antimeridian (±180°)
const segments = [];
let current = [coords[0]];
@@ -80,7 +89,8 @@ const APP = () => {
ctx.lineTo(size * 0.78, size * 0.5);
ctx.lineTo(size * 0.2, size * 0.78);
ctx.stroke();
map.addImage('arrow-icon', canvas);
// MapLibre v5 requires ImageData, not a raw canvas element
map.addImage('arrow-icon', ctx.getImageData(0, 0, size, size));
};
// --- Map initialisation (runs once) ---
@@ -92,7 +102,7 @@ const APP = () => {
center: [-0.1278, 51.5074],
zoom: 2,
pitch: 0,
projection: 'globe'
projection: { type: 'globe' }
});
mapRef.current.on('style.load', () => {
@@ -136,10 +146,15 @@ const APP = () => {
map.setTerrain({ source: 'terrain', exaggeration: 1.5 });
}
// Read current values from refs to avoid stale closure problems
const currentPoint = selectedPointRef.current;
const currentDirection = directionRef.current;
const currentLineData = lineOfSightDataRef.current;
// 3. Start marker
if (startMarkerRef.current) startMarkerRef.current.remove();
startMarkerRef.current = new maplibregl.Marker({ color: '#FF6B6B' })
.setLngLat([selectedPoint.lon, selectedPoint.lat])
.setLngLat([currentPoint.lon, currentPoint.lat])
.addTo(map);
// 4. Preview line source and layer
@@ -157,13 +172,13 @@ const APP = () => {
}
// 5. Restore results line and markers if they existed
if (lineOfSightData) {
renderLineOnMap(lineOfSightData);
if (currentLineData) {
renderLineOnMap(currentLineData);
if (map.getLayer('preview-line')) {
map.setLayoutProperty('preview-line', 'visibility', 'none');
}
} else {
updatePreviewLine(selectedPoint, direction);
updatePreviewLine(currentPoint, currentDirection);
}
};
@@ -173,29 +188,38 @@ const APP = () => {
const map = mapRef.current;
if (!map) return;
map.setProjection(mapProjection);
const applyProjection = () => {
map.setProjection({ type: mapProjection });
if (mapProjection === 'globe') {
map.setSky({
'sky-color': '#199EF3',
'sky-horizon-blend': 0.5,
'horizon-color': '#ffffff',
'horizon-fog-blend': 0.5,
'fog-color': '#add8e6',
'fog-ground-blend': 0.5
});
if (map.getSource('terrain')) {
map.setTerrain({ source: 'terrain', exaggeration: 1.5 });
if (mapProjection === 'globe') {
map.setSky({
'sky-color': '#199EF3',
'sky-horizon-blend': 0.5,
'horizon-color': '#ffffff',
'horizon-fog-blend': 0.5,
'fog-color': '#add8e6',
'fog-ground-blend': 0.5
});
if (map.getSource('terrain')) {
map.setTerrain({ source: 'terrain', exaggeration: 1.5 });
}
} else {
map.setTerrain(null);
}
} else {
map.setTerrain(null);
}
// Re-render line with correct antimeridian handling for this projection
if (lineOfSightData && map.getSource('line-of-sight')) {
map.getSource('line-of-sight').setData(
buildLineGeoJSON(lineOfSightData.line_coordinates, mapProjection)
);
// Re-render line with correct antimeridian handling for this projection
if (lineOfSightData && map.getSource('line-of-sight')) {
map.getSource('line-of-sight').setData(
buildLineGeoJSON(lineOfSightData.line_coordinates)
);
}
};
if (map.isStyleLoaded()) {
applyProjection();
} else {
map.once('style.load', applyProjection);
return () => map.off('style.load', applyProjection);
}
}, [mapProjection]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -207,6 +231,8 @@ const APP = () => {
const handleClick = (e) => {
if (isLocked) return;
const { lng, lat } = e.lngLat;
// Update ref immediately (state update is async)
selectedPointRef.current = { lat, lon: lng };
setSelectedPoint({ lat, lon: lng });
if (startMarkerRef.current) {
startMarkerRef.current.setLngLat([lng, lat]);
@@ -218,6 +244,9 @@ const APP = () => {
map.removeLayer('line-of-sight');
map.removeSource('line-of-sight');
}
if (map.getLayer('preview-line')) {
map.setLayoutProperty('preview-line', 'visibility', 'visible');
}
};
mapRef.current.on('click', handleClick);
@@ -322,20 +351,23 @@ const APP = () => {
if (animationRef.current) cancelAnimationFrame(animationRef.current);
setIsPlaying(false);
setFlightSpeed(1.0);
setCurrentCityIndex(-1);
currentCityIndexRef.current = -1;
return;
}
setIsPlaying(true);
setSelectedCity(null);
setCurrentCityIndex(-1);
currentCityIndexRef.current = -1;
if (popupRef.current) popupRef.current.remove();
const coordinates = lineOfSightData.line_coordinates.map(c => [c.lon, c.lat]);
const route = turf.lineString(coordinates);
const routeDistance = turf.length(route);
let lastNearestCityId = null;
let lastFetchedDist = 0;
let currentProgress = 0;
let lastFetchedDist = flightProgressRef.current;
let currentProgress = flightProgressRef.current;
flightProgressRef.current = 0;
let lastTimestamp = performance.now();
let currentSpeedMultiplier = 1.0;
let frameCount = 0;
@@ -343,18 +375,25 @@ const APP = () => {
async function animate(currentTime) {
if (!mapRef.current) return;
// Apply any pending seek
if (seekRef.current !== null) {
currentProgress = seekRef.current;
lastFetchedDist = currentProgress;
lastTimestamp = currentTime;
seekRef.current = null;
}
const deltaTime = currentTime - lastTimestamp;
lastTimestamp = currentTime;
const baseKmPerMs = 0.1; // 100 km/s
const pathPoints = lineOfSightData.line_coordinates;
const baseKmPerMs = 0.1;
const pathPoints = lineOfSightDataRef.current.line_coordinates;
const pointIndex = Math.min(
Math.floor((currentProgress / routeDistance) * pathPoints.length),
pathPoints.length - 1
);
const isOverWater = pathPoints[pointIndex]?.is_over_water;
// Predictive land detection (look ahead 2000 km)
let futureIsOverWater = true;
const lookAheadDistance = 2000;
const lookAheadSteps = 10;
@@ -387,6 +426,8 @@ const APP = () => {
if (phase >= 1) {
setIsPlaying(false);
setFlightSpeed(1.0);
setCurrentCityIndex(-1);
currentCityIndexRef.current = -1;
return;
}
@@ -396,6 +437,20 @@ const APP = () => {
mapRef.current.jumpTo({ center: eye, zoom: 6, pitch: 65, bearing });
// Find nearest city to current position and update sidebar highlight
const cities = lineOfSightDataRef.current.conurbations;
let nearestIdx = -1;
let nearestDist = Infinity;
cities.forEach((city, idx) => {
const d = Math.abs(city.distance_km - currentProgress);
if (d < nearestDist) { nearestDist = d; nearestIdx = idx; }
});
if (nearestDist < 300 && nearestIdx !== currentCityIndexRef.current) {
currentCityIndexRef.current = nearestIdx;
setCurrentCityIndex(nearestIdx);
showCityPopup(cities[nearestIdx]);
}
if (currentProgress - lastFetchedDist > 2000) {
lastFetchedDist = currentProgress;
try {
@@ -422,15 +477,6 @@ const APP = () => {
}
}
const nearestCity = lineOfSightData.conurbations.find(city =>
Math.abs(city.distance_km - currentProgress) < 100
);
if (nearestCity && nearestCity.id !== lastNearestCityId) {
lastNearestCityId = nearestCity.id;
setSelectedCity(nearestCity);
showCityPopup(nearestCity);
}
animationRef.current = requestAnimationFrame(animate);
}
@@ -477,7 +523,7 @@ const APP = () => {
map.addSource('line-of-sight', {
type: 'geojson',
data: buildLineGeoJSON(data.line_coordinates, projection)
data: buildLineGeoJSON(data.line_coordinates)
});
map.addLayer({
@@ -527,10 +573,9 @@ const APP = () => {
path.push(calculateDestination(point.lat, point.lon, brng, dist));
}
map.getSource('preview-line').setData({
type: 'Feature',
geometry: { type: 'LineString', coordinates: path.map(p => [p.lon, p.lat]) }
});
map.getSource('preview-line').setData(
buildLineGeoJSON(path)
);
};
const calculateDestination = (lat, lon, bearing, distance) => {
@@ -578,6 +623,10 @@ const APP = () => {
}]
};
}
if (style === 'map') {
return 'https://tiles.openfreemap.org/styles/liberty';
}
// 'basic' — clean MapLibre demo tiles, no labels
return 'https://demotiles.maplibre.org/style.json';
};
@@ -607,9 +656,7 @@ const APP = () => {
const PROJECTIONS = [
{ id: 'globe', label: 'Globe' },
{ id: 'mercator', label: 'Mercator' },
{ id: 'equalEarth', label: 'Equal Earth' },
{ id: 'naturalEarth', label: 'Natural Earth' },
{ id: 'winkelTripel', label: 'Winkel Tripel' }
{ id: 'vertical-perspective', label: 'Perspective' }
];
return (
@@ -653,8 +700,8 @@ const APP = () => {
<div className="setting-row">
<label>Map Style:</label>
<button className={mapStyle === 'light' ? 'active-style' : ''} onClick={() => setMapStyle('light')}>Light</button>
<button className={mapStyle === 'dark' ? 'active-style' : ''} onClick={() => setMapStyle('dark')}>Dark</button>
<button className={mapStyle === 'basic' ? 'active-style' : ''} onClick={() => setMapStyle('basic')}>Basic</button>
<button className={mapStyle === 'map' ? 'active-style' : ''} onClick={() => setMapStyle('map')}>Map</button>
<button className={mapStyle === 'satellite' ? 'active-style' : ''} onClick={() => setMapStyle('satellite')}>Satellite</button>
</div>
@@ -695,34 +742,53 @@ const APP = () => {
{lineOfSightData && (
<div className="results-panel">
<h3>Conurbations Found ({lineOfSightData.conurbations.length})</h3>
<p className="hint">Click a city for details</p>
<h3>Cities Along Route ({lineOfSightData.conurbations.length})</h3>
{isPlaying && currentCityIndex >= 0 && (
<div className="now-passing">
Now passing: <strong>{lineOfSightData.conurbations[currentCityIndex]?.name}</strong>
</div>
)}
<p className="hint">{isPlaying ? 'Click a city to jump to it' : 'Click a city for details'}</p>
<table>
<thead>
<tr>
<th>#</th>
<th>City</th>
<th>Population</th>
<th>Pop.</th>
<th>Dist.</th>
</tr>
</thead>
<tbody>
{lineOfSightData.conurbations.map((city, index) => (
<tr
key={city.id}
onClick={() => {
setSelectedCity(city);
showCityPopup(city);
mapRef.current.flyTo({ center: [city.lon, city.lat], zoom: 8 });
}}
className={selectedCity?.id === city.id ? 'selected-row' : ''}
>
<td>{index + 1}</td>
<td>{city.name}</td>
<td>{(city.population / 1000).toFixed(0)}k</td>
<td>{city.distance_km}km</td>
</tr>
))}
{lineOfSightData.conurbations.map((city, index) => {
let rowClass = '';
if (isPlaying && currentCityIndex >= 0) {
if (index === currentCityIndex) rowClass = 'current-row';
else if (index < currentCityIndex) rowClass = 'passed-row';
else if (index <= currentCityIndex + 5) rowClass = 'upcoming-row';
} else if (selectedCity?.id === city.id) {
rowClass = 'selected-row';
}
return (
<tr
id={`city-row-${index}`}
key={city.id}
onClick={() => {
setSelectedCity(city);
showCityPopup(city);
mapRef.current.flyTo({ center: [city.lon, city.lat], zoom: 8 });
if (isPlaying) {
seekRef.current = city.distance_km;
}
}}
className={rowClass}
>
<td>{index + 1}</td>
<td>{city.name}</td>
<td>{(city.population / 1000).toFixed(0)}k</td>
<td>{city.distance_km}km</td>
</tr>
);
})}
</tbody>
</table>
</div>
frontend/src/services/api.js
+1 -1
View File
@@ -1,6 +1,6 @@
import axios from 'axios';
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api';
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3051/api';
const api = axios.create({
baseURL: API_BASE_URL,
frontend/src/styles/App.css
+25 -2
View File
@@ -446,13 +446,13 @@
.app-container {
flex-direction: column;
}
.controls {
width: 100%;
max-height: 40vh;
order: -1;
}
.map-container {
height: 60vh;
}
@@ -465,3 +465,26 @@
top: auto;
}
}
.results-panel tr.passed-row {
opacity: 0.4;
}
.results-panel tr.current-row {
background: #1abc9c !important;
color: white;
font-weight: bold;
}
.results-panel tr.upcoming-row {
background: #eaf4fb !important;
}
.now-passing {
background: #1abc9c;
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 8px;
}