Merge pull request #10 from DebasishDhal/feat/wiki-geosearch

- Disable autoZooming if no nearby pages are found
- Returned randomized results if #available nearby pages > #required pages
- Disable re-autoZooming if search parameters (radius, limit) are chaged
- Add a slider to control duration it takes to zoom in on a nearby location cluster

backend/utils.py

@@ -1,4 +1,6 @@
 import math
+import httpx
+
 def generate_circle_centers(center_lat, center_lon, radius_km, small_radius_km=10):
     """
         Generate a list of centers of small circles (radius=10km) needed to cover a larger circle.
@@ -8,7 +10,7 @@ def generate_circle_centers(center_lat, center_lon, radius_km, small_radius_km=1
         - center_lat: Latitude of the center of the larger circle
         - center_lon: Longitude of the center of the larger circle
         - radius_km: Radius of the larger circle in kilometers
-        - small_radius_km: Radius of the smaller circles in kilometers (default 15km)
+        - small_radius_km: Radius of the smaller circles in kilometers (default 10km, more than that wiki api cannot accomodate)
 
         Output:
         - A list of tuples, each containing the latitude and longitude of a small circle's center. [(lat1, lon1), (lat2, lon2),...]
@@ -40,4 +42,28 @@ def generate_circle_centers(center_lat, center_lon, radius_km, small_radius_km=1
                 lon = center_lon + delta_lon
                 results.append((lat, lon))
     
-    return results
+    return results
+
+
+
+async def fetch_url(client: httpx.AsyncClient, url: str):
+    """
+        Fetch a URL asynchronously using httpx and return the response status and data.
+        This function is asynchrounously used to fetch multiple URLs in parallel when search radius > 10km.
+        Input:
+        - client: httpx.AsyncClient instance
+        - url: URL to fetch
+        Output:
+        - A dictionary with the URL, status code, and data if available.
+            - Data includes the JSON format of wiki geosearch response.
+        If an error occurs, return a dictionary with the URL and the error message.
+    """
+    try:
+        response = await client.get(url, timeout=10.0)
+        return {
+            "url": url,
+            "status": response.status_code,
+            "data": response.json() if response.status_code == 200 else None,
+        }
+    except Exception as e:
+        return {"url": url, "error": str(e)}

frontend/src/components/Map.js

@@ -90,9 +90,10 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
     const [explorationMarkers, setExplorationMarkers] = useState([]);
     const [explorationSidebarOpen, setExplorationSidebarOpen] = useState(false);
     const [shouldZoom, setShouldZoom] = useState(false);
+    const [zoomDelaySeconds, setZoomDelaySeconds] = useState(3); // Default zoom delay in seconds
 
     // Using CenterMap component to handle centering (for summary/full apis) and for zooming (for wiki/nearby api)
-    const CenterMap = ({ position, coordinates, shouldZoom }) => {
+    const CenterMap = ({ position, coordinates, shouldZoom, setShouldZoom, zoomDelaySeconds }) => {
         const map = useMap();
         useEffect(() => {
             if (position && Array.isArray(position) && position.length === 2) {
@@ -102,15 +103,24 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
 
 
         useEffect(() => {
-            if (coordinates && Array.isArray(coordinates) && coordinates.length > 0  && shouldZoom) {
+            if (coordinates && Array.isArray(coordinates) && coordinates.length > 1  && shouldZoom) {
                 const bounds = L.latLngBounds(coordinates);
-                map.flyToBounds(bounds, {
-                    padding: [50, 50],
-                    maxZoom: 16,
-                    duration: 3
-                });
+                console.log("Delay:", zoomDelaySeconds);
+                if (zoomDelaySeconds > 0) {
+                    map.flyToBounds(bounds, {
+                        padding: [50, 50],
+                        maxZoom: 16,
+                        duration: zoomDelaySeconds
+                    });
+                } else {
+                    map.fitBounds(bounds, {
+                        padding: [50, 50],
+                        maxZoom: 16
+                    });
+                }
+                setShouldZoom(false);
             }
-        }, [coordinates, map, shouldZoom]);
+        }, [coordinates, map, shouldZoom, setShouldZoom, zoomDelaySeconds]);
 
         return null;
     };
@@ -247,9 +257,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                 
                 if (res.ok) {
                     const data = await res.json();
-                    const markers = data.pages.filter(
-                                page => typeof page.dist === "number" && page.dist <= explorationRadius * 1000
-                            ).map(page => ({
+                    const markers = data.pages.map(page => ({
                         position: [page.lat, page.lon],
                         title: page.title,
                         distance: page.dist
@@ -616,6 +624,8 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                         position={markerPosition}
                         coordinates={explorationMarkers.map((marker) => marker.position)}
                         shouldZoom={shouldZoom}
+                        setShouldZoom={setShouldZoom}
+                        zoomDelaySeconds={zoomDelaySeconds}
                     />
                     {baseLayer === "satellite" && (
                     <>
@@ -1042,6 +1052,25 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                             </div>
                         </div>
 
+
+                        <div>
+                            <label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
+                                Zoom Delay (seconds):
+                            </label>
+                            <input
+                                type="range"
+                                min="0"
+                                max="5"
+                                step="1"
+                                value={zoomDelaySeconds}
+                                onChange={(e) => setZoomDelaySeconds(parseInt(e.target.value))}
+                                style={{ width: '100%' }}
+                            />
+                            <div style={{ textAlign: 'center', marginTop: 4 }}>
+                                {zoomDelaySeconds} sec. zoom duration
+                            </div>
+                        </div>
+
                         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                             <input
                                 type="checkbox"

main.py

@@ -8,7 +8,8 @@ import geopy.distance
 from cachetools import TTLCache
 import os
 from dotenv import load_dotenv
-from backend.utils import generate_circle_centers
+from random import sample
+from backend.utils import generate_circle_centers, fetch_url
 
 load_dotenv()
 
@@ -161,7 +162,6 @@ def get_geodistance(payload: Geodistance):
             content={"error": str(e)},
             status_code=500
         )
-
     return JSONResponse(
         content={
             "distance": distance,
@@ -175,16 +175,7 @@ def get_geodistance(payload: Geodistance):
     )
 
 
-async def fetch_url(client: httpx.AsyncClient, url: str):
-    try:
-        response = await client.get(url, timeout=10.0)
-        return {
-            "url": url,
-            "status": response.status_code,
-            "data": response.json() if response.status_code == 200 else None,
-        }
-    except Exception as e:
-        return {"url": url, "error": str(e)}
+
     
 @app.post("/wiki/nearby")
 async def get_nearby_wiki_pages(payload: NearbyWikiPage):
@@ -217,7 +208,9 @@ async def get_nearby_wiki_pages(payload: NearbyWikiPage):
     radius = payload.radius
     limit = payload.limit
 
-    if radius <= 10000:
+    wiki_geosearch_radius_limit_meters = 10000 # Wikipedia API limit for geosearch radius in meters
+
+    if radius <= wiki_geosearch_radius_limit_meters:
         url = ("https://en.wikipedia.org/w/api.php"+"?action=query"
                 "&list=geosearch"
                 f"&gscoord={lat_center}|{lon_center}"
@@ -236,6 +229,9 @@ async def get_nearby_wiki_pages(payload: NearbyWikiPage):
 
             pages = data.get("query", {}).get("geosearch", [])
 
+            if len(pages) > limit:
+                pages = sample(pages, limit)
+
             return JSONResponse(
                 content={
                     "pages": pages,
@@ -248,11 +244,13 @@ async def get_nearby_wiki_pages(payload: NearbyWikiPage):
                 content={"error": str(e)},
                 status_code=500
             )
-    elif radius > 10000:
-        small_circle_centers = generate_circle_centers(lat_center, lon_center, radius / 1000, small_radius_km=10)
+        
+    elif radius > wiki_geosearch_radius_limit_meters:
         all_pages = []
+
+        small_circle_centers = generate_circle_centers(lat_center, lon_center, radius / 1000, small_radius_km=10)
         base_url = "https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gscoord={lat}|{lon}&gsradius={small_radius_km}&gslimit={page_limit}&format=json"
-        urls = [base_url.format(lat=center[0], lon=center[1], small_radius_km=10*1000, page_limit=100) for center in small_circle_centers]
+        urls = [base_url.format(lat=center[0], lon=center[1], small_radius_km=wiki_geosearch_radius_limit_meters, page_limit=100) for center in small_circle_centers]
 
         print("URL Counts:", len(urls))
         try:
@@ -262,19 +260,26 @@ async def get_nearby_wiki_pages(payload: NearbyWikiPage):
             
             # print(results)
             for result in results:
+
                 for unit in result.get("data", {}).get("query", {}).get("geosearch", []):
+
                     lat, lon = unit.get("lat"), unit.get("lon")
                     if lat is not None and lon is not None:
                         dist = int(geopy.distance.distance(
                                 (lat_center, lon_center), (lat, lon)
                             ).m)
-                        print(dist)
                     else: 
                         dist = None
 
+                    if (not dist) or (dist and dist > radius):
+                        continue
+
                     unit_with_dist = {**unit, "dist": dist}
                     all_pages.append(unit_with_dist)
 
+            if len(all_pages) > limit:
+                all_pages = sample(all_pages, limit)
+
             return JSONResponse(
                 content={
                     "pages": all_pages,