Add Generative Graphs UI and Data Analysis Tool

app/actions.tsx

@@ -12,7 +12,7 @@ import type { FeatureCollection } from 'geojson'
 import { Spinner } from '@/components/ui/spinner'
 import { Section } from '@/components/section'
 import { FollowupPanel } from '@/components/followup-panel'
-import { inquire, researcher, taskManager, querySuggestor, resolutionSearch, type DrawnFeature } from '@/lib/agents'
+import { inquire, researcher, taskManager, querySuggestor, resolutionSearch } from '@/lib/agents'
 // Removed import of useGeospatialToolMcp as it no longer exists and was incorrectly used here.
 // The geospatialTool (if used by agents like researcher) now manages its own MCP client.
 import { writer } from '@/lib/agents/writer'
@@ -27,6 +27,7 @@ import { CopilotDisplay } from '@/components/copilot-display'
 import RetrieveSection from '@/components/retrieve-section'
 import { VideoSearchSection } from '@/components/video-search-section'
 import { MapQueryHandler } from '@/components/map/map-query-handler' // Add this import
+import { GraphSection } from '@/components/graph-section'
 
 // Define the type for related queries
 type RelatedQueries = {
@@ -46,14 +47,6 @@ async function submit(formData?: FormData, skip?: boolean) {
   if (action === 'resolution_search') {
     const file = formData?.get('file') as File;
     const timezone = (formData?.get('timezone') as string) || 'UTC';
-    const drawnFeaturesString = formData?.get('drawnFeatures') as string;
-    let drawnFeatures: DrawnFeature[] = [];
-    try {
-      drawnFeatures = drawnFeaturesString ? JSON.parse(drawnFeaturesString) : [];
-    } catch (e) {
-      console.error('Failed to parse drawnFeatures:', e);
-    }
-
     if (!file) {
       throw new Error('No file provided for resolution search.');
     }
@@ -95,18 +88,8 @@ async function submit(formData?: FormData, skip?: boolean) {
 
     async function processResolutionSearch() {
       try {
-        // Call the simplified agent, which now returns a stream.
-        const streamResult = await resolutionSearch(messages, timezone, drawnFeatures);
-
-        let fullSummary = '';
-        for await (const partialObject of streamResult.partialObjectStream) {
-          if (partialObject.summary) {
-            fullSummary = partialObject.summary;
-            summaryStream.update(fullSummary);
-          }
-        }
-
-        const analysisResult = await streamResult.object;
+        // Call the simplified agent, which now returns data directly.
+        const analysisResult = await resolutionSearch(messages, timezone) as any;
 
         // Mark the summary stream as done with the result.
         summaryStream.done(analysisResult.summary || 'Analysis complete.');
@@ -315,7 +298,11 @@ async function submit(formData?: FormData, skip?: boolean) {
         image: dataUrl,
         mimeType: file.type
       })
-    } else if (file.type === 'text/plain') {
+    } else if (
+      file.type === 'text/plain' ||
+      file.type === 'text/csv' ||
+      file.type === 'application/json'
+    ) {
       const textContent = Buffer.from(buffer).toString('utf-8')
       const existingTextPart = messageParts.find(p => p.type === 'text')
       if (existingTextPart) {
@@ -762,6 +749,32 @@ export const getUIStateFromAIState = (aiState: AIState): UIState => {
                   ),
                   isCollapsed: isCollapsed.value
                 }
+              case 'dataAnalysis':
+                return {
+                  id,
+                  component: (
+                    <>
+                      <GraphSection result={searchResults.value} />
+                      {toolOutput.geospatial && toolOutput.geospatial.length > 0 && (
+                        <MapQueryHandler
+                          toolOutput={{
+                            type: 'MAP_QUERY_TRIGGER',
+                            originalUserInput: JSON.stringify(toolOutput.geospatial[0]),
+                            timestamp: new Date().toISOString(),
+                            mcp_response: {
+                              location: {
+                                latitude: toolOutput.geospatial[0].latitude,
+                                longitude: toolOutput.geospatial[0].longitude,
+                                place_name: toolOutput.geospatial[0].label
+                              }
+                            }
+                          }}
+                        />
+                      )}
+                    </>
+                  ),
+                  isCollapsed: isCollapsed.value
+                }
               default:
                 console.warn(
                   `Unhandled tool result in getUIStateFromAIState: ${name}`

components/chat-panel.tsx

@@ -214,7 +214,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             ref={fileInputRef}
             onChange={handleFileChange}
             className="hidden"
-            accept="text/plain,image/png,image/jpeg,image/webp"
+            accept="text/plain,image/png,image/jpeg,image/webp,text/csv,application/json"
           />
           {!isMobile && (
             <Button

components/graph-section.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import React from 'react'
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  AreaChart,
+  Area,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell
+} from 'recharts'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Section } from './section'
+import { ToolBadge } from './tool-badge'
+import { DataAnalysisResult } from '@/lib/types'
+import { StreamableValue, useStreamableValue } from 'ai/rsc'
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d']
+
+interface GraphSectionProps {
+  result: DataAnalysisResult | string | StreamableValue<DataAnalysisResult>
+}
+
+export function GraphSection({ result }: GraphSectionProps) {
+  if (!result) return null;
+
+  // Check if result is a static DataAnalysisResult object
+  // A StreamableValue is an opaque object and shouldn't have these properties
+  const isStatic = typeof result === 'object' && result !== null &&
+    ('chartType' in (result as any) || 'title' in (result as any) || 'data' in (result as any));
+  const isString = typeof result === 'string';
+
+  if (isStatic || isString) {
+    return <GraphCard data={result as any} />;
+  }
+
+  // Handle case where it might be a streamable value or something else
+  // We use a safe wrapper to avoid crashing if useStreamableValue throws
+  return <StreamedGraphSection result={result as any} />;
+}
+
+function StreamedGraphSection({ result }: { result: StreamableValue<any> }) {
+  const [data, error, pending] = useStreamableValue(result);
+
+  if (pending && !data) {
+    return (
+      <Section className="py-2">
+        <div className="animate-pulse flex space-y-4 flex-col">
+          <div className="h-4 bg-muted rounded w-3/4"></div>
+          <div className="h-64 bg-muted rounded"></div>
+        </div>
+      </Section>
+    );
+  }
+
+  return <GraphCard data={data} />;
+}
+
+function GraphCard({ data, pending }: { data: any, pending?: boolean }) {
+  const chartData: DataAnalysisResult | undefined = React.useMemo(() => {
+    if (!data) return undefined;
+    if (typeof data === 'string') {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        console.error('Error parsing graph data:', e);
+        return undefined;
+      }
+    }
+    return data as DataAnalysisResult;
+  }, [data]);
+
+  if (!chartData) return null;
+
+  const { title, description, chartType, data: plotData, config } = chartData;
+
+  const renderChart = () => {
+    if (!plotData || !config) return <div className="flex items-center justify-center h-full text-muted-foreground italic">Missing chart data or configuration</div>;
+
+    const themeColors = {
+      text: 'hsl(var(--foreground))',
+      grid: 'hsl(var(--border))',
+      tooltip: {
+        bg: 'hsl(var(--card))',
+        text: 'hsl(var(--card-foreground))',
+        border: 'hsl(var(--border))'
+      }
+    }
+
+    const commonAxisProps = {
+      stroke: themeColors.text,
+      fontSize: 12,
+      tickLine: false,
+      axisLine: false,
+    }
+
+    switch (chartType) {
+      case 'bar':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={plotData} margin={{ top: 10, right: 10, left: -20, bottom: 20 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke={themeColors.grid} vertical={false} />
+              <XAxis 
+                dataKey={config.xAxisKey} 
+                {...commonAxisProps}
+                dy={10}
+              />
+              <YAxis {...commonAxisProps} />
+              <Tooltip 
+                contentStyle={{ 
+                  backgroundColor: themeColors.tooltip.bg, 
+                  color: themeColors.tooltip.text,
+                  borderColor: themeColors.tooltip.border,
+                  borderRadius: '8px'
+                }} 
+              />
+              <Legend wrapperStyle={{ paddingTop: '20px' }} />
+              {config.series?.map((s, i) => (
+                <Bar key={s.key} dataKey={s.key} name={s.name} fill={s.color || COLORS[i % COLORS.length]} radius={[4, 4, 0, 0]} />
+              ))}
+            </BarChart>
+          </ResponsiveContainer>
+        );
+      case 'line':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={plotData} margin={{ top: 10, right: 10, left: -20, bottom: 20 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke={themeColors.grid} vertical={false} />
+              <XAxis 
+                dataKey={config.xAxisKey} 
+                {...commonAxisProps}
+                dy={10}
+              />
+              <YAxis {...commonAxisProps} />
+              <Tooltip 
+                contentStyle={{ 
+                  backgroundColor: themeColors.tooltip.bg, 
+                  color: themeColors.tooltip.text,
+                  borderColor: themeColors.tooltip.border,
+                  borderRadius: '8px'
+                }} 
+              />
+              <Legend wrapperStyle={{ paddingTop: '20px' }} />
+              {config.series?.map((s, i) => (
+                <Line key={s.key} type="monotone" dataKey={s.key} name={s.name} stroke={s.color || COLORS[i % COLORS.length]} strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
+              ))}
+            </LineChart>
+          </ResponsiveContainer>
+        );
+      case 'area':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={plotData} margin={{ top: 10, right: 10, left: -20, bottom: 20 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke={themeColors.grid} vertical={false} />
+              <XAxis 
+                dataKey={config.xAxisKey} 
+                {...commonAxisProps}
+                dy={10}
+              />
+              <YAxis {...commonAxisProps} />
+              <Tooltip 
+                contentStyle={{ 
+                  backgroundColor: themeColors.tooltip.bg, 
+                  color: themeColors.tooltip.text,
+                  borderColor: themeColors.tooltip.border,
+                  borderRadius: '8px'
+                }} 
+              />
+              <Legend wrapperStyle={{ paddingTop: '20px' }} />
+              {config.series?.map((s, i) => (
+                <Area key={s.key} type="monotone" dataKey={s.key} name={s.name} stroke={s.color || COLORS[i % COLORS.length]} fill={s.color || COLORS[i % COLORS.length]} fillOpacity={0.3} />
+              ))}
+            </AreaChart>
+          </ResponsiveContainer>
+        );
+      case 'pie':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={plotData}
+                dataKey={config.series?.[0]?.key}
+                nameKey={config.xAxisKey}
+                cx="50%"
+                cy="50%"
+                outerRadius={80}
+                label={{ fill: themeColors.text, fontSize: 12 }}
+              >
+                {plotData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip 
+                contentStyle={{ 
+                  backgroundColor: themeColors.tooltip.bg, 
+                  color: themeColors.tooltip.text,
+                  borderColor: themeColors.tooltip.border,
+                  borderRadius: '8px'
+                }} 
+              />
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        );
+      case 'scatter':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <ScatterChart margin={{ top: 10, right: 10, left: -20, bottom: 20 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke={themeColors.grid} />
+              <XAxis 
+                type="number" 
+                dataKey={config.xAxisKey} 
+                name={config.xAxisKey} 
+                {...commonAxisProps}
+                dy={10}
+              />
+              <YAxis type="number" dataKey={config.yAxisKey} name={config.yAxisKey} {...commonAxisProps} />
+              <Tooltip 
+                cursor={{ strokeDasharray: '3 3' }} 
+                contentStyle={{ 
+                  backgroundColor: themeColors.tooltip.bg, 
+                  color: themeColors.tooltip.text,
+                  borderColor: themeColors.tooltip.border,
+                  borderRadius: '8px'
+                }} 
+              />
+              <Legend wrapperStyle={{ paddingTop: '20px' }} />
+              {config.series?.map((s, i) => (
+                <Scatter key={s.key} name={s.name} data={plotData} fill={s.color || COLORS[i % COLORS.length]} />
+              ))}
+            </ScatterChart>
+          </ResponsiveContainer>
+        );
+      default:
+        return (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            Unsupported chart type: {chartType || 'None'}
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Section className="py-2">
+      <div className="mb-2">
+        <ToolBadge tool="dataAnalysis">Graph: {title || 'Untitled'}</ToolBadge>
+      </div>
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg font-medium">{title || 'Data Analysis'}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] w-full">
+            {renderChart()}
+          </div>
+        </CardContent>
+      </Card>
+    </Section>
+  );
+}

components/map/mapbox-map.tsx

@@ -467,7 +467,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         geolocationWatchIdRef.current = null
       }
     }
-  }, [setMap, setIsMapLoaded, captureMapCenter, handleUserInteraction, stopRotation])
+  }, [setMap, setIsMapLoaded, captureMapCenter, handleUserInteraction, stopRotation, position?.latitude, position?.longitude, mapData.cameraState])
 
   // Handle map mode changes
   useEffect(() => {