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

- click on a location (with exploration mode on), a number of wikipages which are close to the clicked location will pop up
- added doc string to backend routes
- Both a small and significant merge. It has the first core functionality that I had wanted this project to have.
Next target

- Add auto zoom, i.e. after every click, a no. of markers will pop up, i want the map to zoom to an adequate level so that the markers would be properly usable (and not just visible).

frontend/src/components/Map.js

@@ -82,6 +82,12 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
     
     const [countryBorders, setCountryBorders] = useState(null);
 
+    const [explorationMode, setExplorationMode] = useState(false);
+    const [explorationRadius, setExplorationRadius] = useState(10000);
+    const [explorationLimit, setExplorationLimit] = useState(10);
+    const [explorationMarkers, setExplorationMarkers] = useState([]);
+    const [explorationSidebarOpen, setExplorationSidebarOpen] = useState(false);
+
     const CenterMap = ({ position }) => {
         const map = useMap();
         useEffect(() => {
@@ -208,7 +214,46 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
     };
 
     const handleMapClick = useCallback(async (lat, lon) => {
-        if (geoToolMode === "distance") {
+        if (explorationMode) {
+            // Handle exploration mode click
+            try {
+                const res = await fetch(`${BACKEND_URL}/wiki/nearby`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        lat: lat,
+                        lon: lon,
+                        radius: explorationRadius,
+                        limit: explorationLimit
+                    }),
+                });
+                
+                if (res.ok) {
+                    const data = await res.json();
+                    const markers = data.pages.map(page => ({
+                        position: [page.lat, page.lon],
+                        title: page.title,
+                        distance: page.dist
+                    }));
+                    // setExplorationMarkers(markers);
+                    // Now adding the main clicked point
+                    setExplorationMarkers([
+                        {
+                            position: [lat, lon],
+                            title: 'Clicked Location',
+                            distance: 0,
+                            isClickedPoint: true
+                        },
+                        ...markers
+                    ]);
+                    console.log(`Found ${markers.length} nearby pages`);
+                } else {
+                    console.error('Failed to fetch nearby pages');
+                }
+            } catch (err) {
+                console.error('Error fetching nearby pages:', err);
+            }
+        } else if (geoToolMode === "distance") {
             const updatedPoints = [...geoPoints, { lat, lon }];
             if (updatedPoints.length > 2) {
               updatedPoints.shift(); // keep only two
@@ -249,7 +294,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
             console.log("Invalid tool mode:", geoToolMode);
         }
 
-    }, [geoToolMode, geoPoints, geoUnit, areaPoints]);
+    }, [explorationMode, explorationRadius, explorationLimit, geoToolMode, geoPoints, geoUnit, areaPoints]);
 
     useEffect(() => {
         if (geoPoints.length === 2) {
@@ -655,6 +700,41 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                         </Marker>
                     )}
 
+                    {/* Exploration Mode Markers */}
+                    {explorationMode && explorationMarkers.map((marker, index) => (
+                        <Marker 
+                            key={`exploration-${index}`}
+                            position={marker.position}
+                            icon={marker.isClickedPoint ? new L.Icon({
+                                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
+                                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+                                iconSize: [25, 41],
+                                iconAnchor: [12, 41],
+                                popupAnchor: [1, -34],
+                                shadowSize: [41, 41]
+                            }) : new L.Icon({
+                                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
+                                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+                                iconSize: [25, 41],
+                                iconAnchor: [12, 41],
+                                popupAnchor: [1, -34],
+                                shadowSize: [41, 41]
+                            })}
+                        >
+                            <Popup>
+                                <div>
+                                    <strong>{marker.title}</strong><br />
+                                    {!marker.isClickedPoint && (
+                                        <small>Distance: {marker.distance.toFixed(1)}m</small>
+                                    )}
+                                    {marker.isClickedPoint && (
+                                        <small>Pos: {marker.position[0].toFixed(4)}, {marker.position[1].toFixed(4)}</small>
+                                    )}
+                                </div>
+                            </Popup>
+                        </Marker>
+                    ))}
+
                     {/* Only show geodistance markers/polyline if sidebar is open */}
                     {geoSidebarOpen && geoToolMode === "distance" && geoPoints.map((pt, index) => (
                         <Marker key={`geo-${index}`}
@@ -799,7 +879,176 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                     </button>
                 )}
 
-                {/* Geo Sidebar */}
+                {/* Exploration Mode Button */}
+                {!explorationSidebarOpen && !geoSidebarOpen && (
+                    <button
+                        onClick={() => setExplorationSidebarOpen(true)}
+                        style={{
+                            position: 'absolute',
+                            top: 50, // Position below Geo Tools button
+                            right: 12,
+                            zIndex: 1000,
+                            padding: '6px 12px',
+                            backgroundColor: '#4caf50',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: 4,
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Exploration
+                    </button>
+                )}
+
+                {/* Exploration Mode Button - when Geo Tools sidebar is open */}
+                {!explorationSidebarOpen && geoSidebarOpen && (
+                    <button
+                        onClick={() => setExplorationSidebarOpen(true)}
+                        style={{
+                            position: 'fixed',
+                            top: 320, // Position below Geo Tools sidebar
+                            right: 24,
+                            zIndex: 2000,
+                            padding: '6px 12px',
+                            backgroundColor: '#4caf50',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: 4,
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Exploration
+                    </button>
+                )}
+
+                {/* Exploration Sidebar */}
+                {explorationSidebarOpen && (
+                    <div style={{
+                        position: 'fixed',
+                        top: geoSidebarOpen ? 320 : 24, // Position below Geo Tools sidebar if open
+                        right: 24,
+                        width: 280,
+                        background: 'white',
+                        borderRadius: 10,
+                        boxShadow: '0 2px 12px rgba(0,0,0,0.12)',
+                        zIndex: 2000,
+                        padding: 20,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 16,
+                        border: '1px solid #eee'
+                    }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <strong>Exploration Mode</strong>
+                            <button
+                                onClick={() => {
+                                    setExplorationSidebarOpen(false);
+                                    setExplorationMode(false);
+                                    setExplorationMarkers([]);
+                                }}
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    fontSize: 18,
+                                    cursor: 'pointer',
+                                    color: '#888'
+                                }}
+                                title="Close"
+                            >×</button>
+                        </div>
+
+                        <div>
+                            <label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
+                                Search Radius (meters):
+                            </label>
+                            <input
+                                type="range"
+                                min="10"
+                                max="10000"
+                                step="1000"
+                                value={explorationRadius}
+                                onChange={(e) => setExplorationRadius(parseInt(e.target.value))}
+                                style={{ width: '100%' }}
+                            />
+                            <div style={{ textAlign: 'center', marginTop: 4 }}>
+                                {explorationRadius.toLocaleString()}m
+                            </div>
+                        </div>
+
+                        <div>
+                            <label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
+                                Number of Results:
+                            </label>
+                            <input
+                                type="range"
+                                min="1"
+                                max="50"
+                                step="1"
+                                value={explorationLimit}
+                                onChange={(e) => setExplorationLimit(parseInt(e.target.value))}
+                                style={{ width: '100%' }}
+                            />
+                            <div style={{ textAlign: 'center', marginTop: 4 }}>
+                                {explorationLimit} results
+                            </div>
+                        </div>
+
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                            <input
+                                type="checkbox"
+                                id="explorationMode"
+                                checked={explorationMode}
+                                onChange={(e) => setExplorationMode(e.target.checked)}
+                            />
+                            <label htmlFor="explorationMode" style={{ fontWeight: 500 }}>
+                                Enable Exploration Mode
+                            </label>
+                        </div>
+
+                        {explorationMode && (
+                            <div style={{ 
+                                padding: '8px 12px', 
+                                backgroundColor: '#e8f5e8', 
+                                borderRadius: 4,
+                                fontSize: '14px',
+                                color: '#2e7d32'
+                            }}>
+                                ✓ Click anywhere on the map to find nearby Wikipedia pages
+                            </div>
+                        )}
+
+                        {explorationMarkers.length > 0 && (
+                            <div style={{ 
+                                padding: '8px 12px', 
+                                backgroundColor: '#e3f2fd', 
+                                borderRadius: 4,
+                                fontSize: '14px',
+                                color: '#1976d2'
+                            }}>
+                                Found {explorationMarkers.length} nearby pages
+                            </div>
+                        )}
+
+                        <button
+                            onClick={() => {
+                                setExplorationMarkers([]);
+                            }}
+                            style={{
+                                padding: '6px 0',
+                                borderRadius: 4,
+                                border: '1px solid #f44336',
+                                background: '#f44336',
+                                color: 'white',
+                                fontWeight: 500,
+                                cursor: 'pointer'
+                            }}
+                        >
+                            Clear Markers
+                        </button>
+                    </div>
+                )}
+
+                {/* Geo Sidebar - Keep as is */}
                 {geoSidebarOpen && (
                     <div style={{
                         position: 'fixed',

main.py

@@ -22,6 +22,12 @@ class Geodistance(BaseModel):
     lon2: float = Field(..., ge=-180, le=180)
     unit: str = "km"
 
+class NearbyWikiPage(BaseModel):
+    lat: float = Field(default=54.163337, ge=-90, le=90)
+    lon: float = Field(default=37.561109, ge=-180, le=180)
+    radius: int = Field(default=1000, ge=10, le=10000,description="Distance in meters from the reference point")
+    limit: int = Field(10, ge=1, description="Number of pages to return")
+
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],  # Replace with your frontend domain in prod
@@ -40,6 +46,12 @@ def health_check():
 
 @app.get("/wiki/search/summary/{summary_page_name}")
 async def get_wiki_summary(summary_page_name: str, background_tasks: BackgroundTasks):
+    """
+        This function fetches the summary of a Wikipedia page along with its geographical coordinates.
+        It also caches the result in ephemeral in-memory cache in the background.
+        Input: summary_page_name: str - Name of the Wikipedia page to fetch summary for.
+        Output: {"title": "Page Title", "content": "Summary content here", "latitude": float, "longitude": float9}
+    """
     if summary_page_name in summary_cache:
         # print("Cache hit for summary:", page_name) #Working
         return JSONResponse(content=summary_cache[summary_page_name], status_code=200)
@@ -77,7 +89,13 @@ async def get_wiki_summary(summary_page_name: str, background_tasks: BackgroundT
         )
 
 @app.get("/wiki/search/full/{full_page}")
-def search_wiki_full_page(full_page: str, background_tasks: BackgroundTasks):
+async def search_wiki_full_page(full_page: str, background_tasks: BackgroundTasks):
+    """
+        This function fetches the full content of a Wikipedia page along with its geographical coordinates. 
+        It also caches the result in ephemeral in-memory cache in the background.
+        Input: full_page: str - Name of the Wikipedia page to fetch full content for.
+        Output: {"title": "Page Title", "content": "Full content here", "latitude": float, "longitude": float}
+    """
     if full_page in full_page_cache:
         # print("Cache hit for full_page:", full_page) #Working
         return JSONResponse(content=full_page_cache[full_page], status_code=200)
@@ -117,6 +135,10 @@ def search_wiki_full_page(full_page: str, background_tasks: BackgroundTasks):
 
 @app.post("/geodistance")
 def get_geodistance(payload: Geodistance):
+    """
+        Input: "lat1", "lon1", "lat2", "lon2", "unit (km/mi)"
+        Output: {"distance": float, "unit": str, "lat1": float, "lon1": float, "lat2": float, "lon2": float}
+    """
     lat1, lon1 = payload.lat1, payload.lon1
     lat2, lon2 = payload.lat2, payload.lon2
     unit = payload.unit
@@ -151,11 +173,92 @@ def get_geodistance(payload: Geodistance):
         status_code=200
     )
 
+@app.post("/wiki/nearby")
+async def get_nearby_wiki_pages(payload: NearbyWikiPage):
+    """
+    Returns a list of wikipedia pages whose geographical coordinates are within a specified radius from a given location.
+    Input:
+    - lat: Latitude of the reference point
+    - lon: Longitude of the reference point
+    - radius: Radius in meters within which to search for pages
+    - limit: Maximum number of pages to return
+
+    Output:
+        {
+            "pages": [
+                {
+                    "pageid": 123456,
+                    "title": "Page Title",
+                    "lat": 54.163337,
+                    "lon": 37.561109,
+                    "dist": 123.45  # Dist. in meters from the reference point
+                    ...
+                },
+                ...
+            ],
+            "count": 10 #Total no. of such pages
+        }
+    """
+    lat, lon = payload.lat, payload.lon
+    radius = payload.radius
+    limit = payload.limit
+
+    url = ("https://en.wikipedia.org/w/api.php"+"?action=query"
+            "&list=geosearch"
+            f"&gscoord={lat}|{lon}"
+            f"&gsradius={radius}"
+            f"&gslimit={limit}"
+            "&format=json")
+    print(url)
+    try:
+        response = requests.get(url, timeout=10)
+        if response.status_code != 200:
+            return JSONResponse(
+                content={"error": "Failed to fetch nearby pages"},
+                status_code=500
+            )
+        data = response.json()
+
+        pages = data.get("query", {}).get("geosearch", [])
+
+        return JSONResponse(
+            content={
+                "pages": pages,
+                "count": len(pages)
+            },
+            status_code=200
+        )
+    except Exception as e:
+        return JSONResponse(
+            content={"error": str(e)},
+            status_code=500
+        )
+    
+
+
+
 @app.get("/random")
 def random():
+    url = "https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gscoord=54.163337|37.561109&gsradius=10000&gslimit=10&format=json"
+    response = requests.get(url, timeout=10)
+
+    if response.status_code != 200:
+        return JSONResponse(
+            content={"error": "Failed to fetch random page"},
+            status_code=500
+        )
+    data = response.json()
+    pages = data.get("query", {}).get("geosearch", [])
+    if not pages:
+        return JSONResponse(
+            content={"error": "No pages found"},
+            status_code=404
+        )
+     
     return JSONResponse(
         content={
-            "message": "Spare endpoint to test."
+            "pages": pages,
+            "count": len(pages)
         },
         status_code=200
     )