- {/* This is the new div for scrolling */}
-
- {/* TODO: Add EmptyScreen for desktop if needed */}
-
-
-
-
- {activeView ? : }
-
+
+ {/* This is the new div for scrolling */}
+
+ {/* TODO: Add EmptyScreen for desktop if needed */}
+
+
+
+
+ {activeView ? : }
-
+
);
}
From 3e1129cca21f390cebba03b801ca981408e78547 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 15 Aug 2025 09:37:25 +0000
Subject: [PATCH 3/3] Feat: Add extensive logging to debug map update issue
This commit adds extensive logging to the application to help diagnose an issue where the Mapbox preview is not updating when a user searches for a location.
Logging has been added to the following files:
- `lib/agents/tools/geospatial.tsx`
- `app/actions.tsx`
- `components/map/map-query-handler.tsx`
- `components/map/mapbox-map.tsx`
This logging will trace the data flow from the initial search query all the way to the map component, allowing us to pinpoint exactly where the process is failing.
---
app/actions.tsx | 2 ++
components/map/map-query-handler.tsx | 41 ++++++++++++----------------
components/map/mapbox-map.tsx | 16 ++++-------
lib/agents/tools/geospatial.tsx | 37 +++++++++++++++----------
4 files changed, 47 insertions(+), 49 deletions(-)
diff --git a/app/actions.tsx b/app/actions.tsx
index f3b3c44f..2f477a13 100644
--- a/app/actions.tsx
+++ b/app/actions.tsx
@@ -422,6 +422,8 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
// Check if this is our map query trigger
if (toolOutput.type === "MAP_QUERY_TRIGGER" && name === "geospatialQueryTool") {
+ console.log('[getUIStateFromAIState] Matched geospatialQueryTool, rendering MapQueryHandler.');
+ console.log('[getUIStateFromAIState] toolOutput:', JSON.stringify(toolOutput, null, 2));
// The MapQueryHandler now expects the entire toolOutput object
return {
id, // message id
diff --git a/components/map/map-query-handler.tsx b/components/map/map-query-handler.tsx
index f3e36bbb..8e6d6472 100644
--- a/components/map/map-query-handler.tsx
+++ b/components/map/map-query-handler.tsx
@@ -31,46 +31,39 @@ export const MapQueryHandler: React.FC
= ({ toolOutput })
const { setMapData } = useMapData();
useEffect(() => {
+ console.log('[MapQueryHandler] useEffect triggered. toolOutput:', JSON.stringify(toolOutput, null, 2));
+
if (toolOutput && toolOutput.mcp_response && toolOutput.mcp_response.location) {
const { latitude, longitude, place_name } = toolOutput.mcp_response.location;
if (typeof latitude === 'number' && typeof longitude === 'number') {
- console.log(`MapQueryHandler: Received data from geospatialTool. Place: ${place_name}, Lat: ${latitude}, Lng: ${longitude}`);
+ const newMapData = {
+ targetPosition: [longitude, latitude] as [number, number],
+ mapFeature: {
+ place_name,
+ mapUrl: toolOutput.mcp_response?.mapUrl,
+ },
+ };
+ console.log('[MapQueryHandler] Calling setMapData with:', JSON.stringify(newMapData, null, 2));
setMapData(prevData => ({
...prevData,
- // Ensure coordinates are in [lng, lat] format for MapboxGL
- targetPosition: [longitude, latitude],
- // Optionally store more info from mcp_response if needed by MapboxMap component later
- mapFeature: {
- place_name,
- // Potentially add mapUrl or other details from toolOutput.mcp_response
- mapUrl: toolOutput.mcp_response?.mapUrl
- }
+ ...newMapData,
}));
} else {
- console.warn("MapQueryHandler: Invalid latitude/longitude in toolOutput.mcp_response:", toolOutput.mcp_response.location);
- // Clear target position if data is invalid
+ console.warn('[MapQueryHandler] Invalid latitude/longitude in toolOutput.mcp_response:', toolOutput.mcp_response.location);
setMapData(prevData => ({
...prevData,
targetPosition: null,
- mapFeature: null
+ mapFeature: null,
}));
}
} else {
- // This case handles when toolOutput or its critical parts are missing.
- // Depending on requirements, could fall back to originalUserInput and useMCPMapClient,
- // or simply log that no valid data was provided from the tool.
- // For this subtask, we primarily focus on using the new toolOutput.
- if (toolOutput) { // It exists, but data is not as expected
- console.warn("MapQueryHandler: toolOutput provided, but mcp_response or location data is missing.", toolOutput);
+ if (toolOutput) {
+ console.warn('[MapQueryHandler] toolOutput provided, but mcp_response or location data is missing.', toolOutput);
+ } else {
+ console.log('[MapQueryHandler] toolOutput is null or undefined.');
}
- // If toolOutput is null/undefined, this component might not need to do anything,
- // or it's an indication that it shouldn't have been rendered/triggered.
- // For now, if no valid toolOutput, we clear map data or leave it as is.
- // setMapData(prevData => ({ ...prevData, targetPosition: null, mapFeature: null }));
}
- // The dependencies for this useEffect should be based on the props that trigger its logic.
- // If originalUserInput and the old MCP client were still used as a fallback, they'd be dependencies.
}, [toolOutput, setMapData]);
// This component is a handler and does not render any visible UI itself.
diff --git a/components/map/mapbox-map.tsx b/components/map/mapbox-map.tsx
index ee438f92..f006844a 100644
--- a/components/map/mapbox-map.tsx
+++ b/components/map/mapbox-map.tsx
@@ -505,24 +505,18 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
// Effect to handle map updates from MapDataContext
useEffect(() => {
+ console.log('[Mapbox] useEffect for mapData triggered. mapData:', JSON.stringify(mapData, null, 2));
if (mapData.targetPosition && map.current) {
stopRotation();
- // console.log("Mapbox.tsx: Received new targetPosition from context:", mapData.targetPosition);
- // targetPosition is LngLatLike, which can be [number, number]
- // updateMapPosition expects (latitude, longitude)
- const [lng, lat] = mapData.targetPosition as [number, number]; // Assuming LngLatLike is [lng, lat]
+ const [lng, lat] = mapData.targetPosition as [number, number];
if (typeof lat === 'number' && typeof lng === 'number') {
+ console.log(`[Mapbox] Calling updateMapPosition with lat: ${lat}, lng: ${lng}`);
updateMapPosition(lat, lng);
} else {
- // console.error("Mapbox.tsx: Invalid targetPosition format in mapData", mapData.targetPosition);
+ console.error("[Mapbox] Invalid targetPosition format in mapData", mapData.targetPosition);
}
}
- // TODO: Handle mapData.mapFeature for drawing routes, polygons, etc. in a future step.
- // For example:
- // if (mapData.mapFeature && mapData.mapFeature.route_geometry && typeof drawRoute === 'function') {
- // drawRoute(mapData.mapFeature.route_geometry); // Implement drawRoute function if needed
- // }
- }, [mapData.targetPosition, mapData.mapFeature, updateMapPosition, stopRotation]);
+ }, [mapData, updateMapPosition, stopRotation]);
// Long-press handlers
const handleMouseDown = useCallback(() => {
diff --git a/lib/agents/tools/geospatial.tsx b/lib/agents/tools/geospatial.tsx
index cb1ff07c..f03c3f51 100644
--- a/lib/agents/tools/geospatial.tsx
+++ b/lib/agents/tools/geospatial.tsx
@@ -151,8 +151,9 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType) => {
+ console.log('[GeospatialTool] Execute called with:', JSON.stringify(params, null, 2));
+
const { queryType, includeMap = true } = params;
- console.log('[GeospatialTool] Execute called with:', params);
const uiFeedbackStream = createStreamableValue();
uiStream.append();
@@ -162,11 +163,14 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType);
- return { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), timestamp: new Date().toISOString(), mcp_response: null, error: 'MCP client initialization failed' };
+ const result = { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), timestamp: new Date().toISOString(), mcp_response: null, error: 'MCP client initialization failed' };
+ console.log('[GeospatialTool] Returning error:', JSON.stringify(result, null, 2));
+ return result;
}
let mcpData: McpResponse | null = null;
@@ -176,7 +180,6 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType {
const { tools } = await mcpClient.listTools().catch(() => ({ tools: [] }));
const names = new Set(tools?.map((t: any) => t.name) || []);
@@ -191,7 +194,6 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType {
switch (queryType) {
case 'directions':
@@ -203,9 +205,8 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType };
const blocks = serviceResponse?.content || [];
const textBlocks = blocks.map(b => (typeof b.text === 'string' ? b.text : null)).filter((t): t is string => !!t && t.trim().length > 0);
@@ -235,10 +237,13 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType 0) {
@@ -249,7 +254,9 @@ export const geospatialTool = ({ uiStream }: { uiStream: ReturnType);
}
- return { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), queryType, timestamp: new Date().toISOString(), mcp_response: mcpData, error: toolError };
+ const result = { type: 'MAP_QUERY_TRIGGER', originalUserInput: JSON.stringify(params), queryType, timestamp: new Date().toISOString(), mcp_response: mcpData, error: toolError };
+ console.log('[GeospatialTool] Returning result:', JSON.stringify(result, null, 2));
+ return result;
},
});