filters

Author: alrocar

dashboard/ai-analytics/src/app/components/MetricsCards.tsx

@@ -3,29 +3,33 @@
 import SparkChartContainer from '../containers/SparkChartContainer';
 
 interface MetricsCardsProps {
-  filters: Record<string, string>;
+  data: any;
+  isLoading: boolean;
 }
 
-export default function MetricsCards({ filters }: MetricsCardsProps) {
+export default function MetricsCards({ data, isLoading }: MetricsCardsProps) {
   return (
     <div className="h-full grid grid-rows-2">
       <SparkChartContainer 
+        data={data}
+        isLoading={isLoading}
         chartType="line" 
         metric="avg_duration"
         title="Average Duration"
-        filters={filters}
       />
       <SparkChartContainer 
+        data={data}
+        isLoading={isLoading}
         chartType="stacked-bar" 
         metric="total_requests"
         title="Total Requests"
-        filters={filters}
       />
       <SparkChartContainer 
+        data={data}
+        isLoading={isLoading}
         chartType="stacked-area" 
         metric="total_tokens"
         title="Total Tokens"
-        filters={filters}
       />
     </div>
   );

dashboard/ai-analytics/src/app/components/TabbedPane.tsx

@@ -21,14 +21,8 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
   const [barListData, setBarListData] = useState<Array<{ name: string; value: number }>>([]);
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
-  // Get all filters except current tab's filter
-  const queryFilters = useMemo(() => {
-    const filtered = { ...filters };
-    delete filtered[selectedTab];
-    return filtered;
-  }, [filters, selectedTab]);
-
-  const { data, isLoading, error } = useGenericCounter(selectedTab, queryFilters);
+  // Pass all filters to the query
+  const { data, isLoading, error } = useGenericCounter(selectedTab, filters);
 
   // Add effect to sync with URL params
   useEffect(() => {
@@ -44,18 +38,17 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
   const handleSelectionChange = (newSelection: string[]) => {
     setSelectedValues(newSelection);
 
-    // Update URL params
+    // Update URL without scroll
     const params = new URLSearchParams(searchParams.toString());
     if (newSelection.length > 0) {
       params.set(selectedTab, newSelection.join(','));
     } else {
       params.delete(selectedTab);
-      // Also remove the filter from URL when clearing
       if (filters[selectedTab]) {
         delete filters[selectedTab];
       }
     }
-    router.push(`?${params.toString()}`);
+    window.history.replaceState({}, '', `?${params.toString()}`);
 
     // Notify parent to update filters
     onFilterUpdate(selectedTab, tabs.find(t => t.key === selectedTab)?.name || selectedTab, newSelection);
@@ -66,14 +59,14 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
     handleSelectionChange(newSelection);
   };
 
-  const handleTabChange = async (index: number) => {
+  const handleTabChange = (index: number) => {
     const tab = tabs[index];
     const dimension = tab.key;
 
-    // Update URL
-    const params = new URLSearchParams(searchParams);
+    // Update URL without scroll
+    const params = new URLSearchParams(searchParams.toString());
     params.set('dimension', dimension);
-    router.push(`?${params.toString()}`);
+    window.history.replaceState({}, '', `?${params.toString()}`);
 
     setSelectedTab(dimension);
   };
@@ -93,7 +86,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
     <div className="h-full">
       <TabGroup 
         defaultIndex={tabs.findIndex(t => t.key === selectedTab)}
-        onChange={handleTabChange}
+        onIndexChange={handleTabChange}
       >
         <TabList className="flex space-x-2">
           {tabs.map((tab) => (

dashboard/ai-analytics/src/app/components/TimeseriesChart.tsx

@@ -37,9 +37,10 @@ interface TimeseriesChartProps {
     data: TimeseriesData[];
   };
   filters: Record<string, string>;
+  onFiltersChange?: (filters: Record<string, string>) => void;
 }
 
-export default function TimeseriesChart({ data, filters }: TimeseriesChartProps) {
+export default function TimeseriesChart({ data, filters, onFiltersChange }: TimeseriesChartProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -137,8 +138,11 @@ export default function TimeseriesChart({ data, filters }: TimeseriesChartProps)
     const params = new URLSearchParams(searchParams);
     params.set('column_name', tab.key);
     router.push(`?${params.toString()}`);
-    // Update filters which will trigger data refetch
-    filters.column_name = tab.key;
+    
+    // Create new filters object
+    const newFilters = { ...filters, column_name: tab.key };
+    // Pass the new filters up to parent component
+    onFiltersChange?.(newFilters);
   };
 
   return (

dashboard/ai-analytics/src/app/containers/DataTableContainer.tsx

@@ -3,14 +3,12 @@ import DataTable from '../components/DataTable';
 import { useLLMUsage } from '@/hooks/useTinybirdData';
 
 interface DataTableContainerProps {
-  filters: Record<string, string>;
+  data: any;
+  isLoading: boolean;
 }
 
-export default function DataTableContainer({ filters }: DataTableContainerProps) {
-  const { data, isLoading, error } = useLLMUsage(filters);
-
+export default function DataTableContainer({ data, isLoading }: DataTableContainerProps) {
   if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
 
   return (
     <Card className="h-full rounded-none flex flex-col overflow-hidden" style={{ boxShadow: 'none' }}>

dashboard/ai-analytics/src/app/containers/SparkChartContainer.tsx

@@ -5,22 +5,21 @@ import SparkChart from '../components/SparkChart';
 import { type ChartType } from '@tremor/react';
 
 interface SparkChartContainerProps {
+  data: any;
+  isLoading: boolean;
   chartType?: ChartType;
   metric: 'avg_duration' | 'total_requests' | 'total_tokens';
   title: string;
-  filters: Record<string, string>;
 }
 
 export default function SparkChartContainer({ 
+  data,
+  isLoading,
   chartType = 'area',
   metric,
   title,
-  filters
 }: SparkChartContainerProps) {
-  const { data, isLoading, error } = useLLMUsage(filters);
-  
   if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
 
   // Get unique dates and categories
   const dates = [...new Set(data.data.map(d => d.date))].sort();

dashboard/ai-analytics/src/app/containers/TimeseriesChartContainer.tsx

@@ -4,18 +4,27 @@ import TimeseriesChart from '../components/TimeseriesChart';
 import { useLLMUsage } from '@/hooks/useTinybirdData';
 
 interface TimeseriesChartContainerProps {
+  data: any;
+  isLoading: boolean;
   filters: Record<string, string>;
+  onFiltersChange: (filters: Record<string, string>) => void;
 }
 
-export default function TimeseriesChartContainer({ filters }: TimeseriesChartContainerProps) {
-  const { data, isLoading, error } = useLLMUsage(filters);
-  
+export default function TimeseriesChartContainer({ 
+  data, 
+  isLoading, 
+  filters,
+  onFiltersChange 
+}: TimeseriesChartContainerProps) {
   if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
 
   return (
     <div className="h-[60vh] overflow-hidden">
-      <TimeseriesChart data={data} filters={filters} />
+      <TimeseriesChart 
+        data={data} 
+        filters={filters} 
+        onFiltersChange={onFiltersChange}
+      />
     </div>
   );
 } 

dashboard/ai-analytics/src/app/page.tsx

@@ -8,6 +8,7 @@ import TabbedPane from './components/TabbedPane';
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { tabs } from './constants';
+import { useLLMUsage } from '@/hooks/useTinybirdData';
 
 interface Selection {
   dimension: string;
@@ -19,8 +20,11 @@ export default function Dashboard() {
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [selections, setSelections] = useState<Selection[]>([]);
   const searchParams = useSearchParams();
+  
+  // Shared LLM usage data
+  const { data: llmData, isLoading, error } = useLLMUsage(filters);
 
-  // Initialize selections from URL params
+  // Initialize from URL only once
   useEffect(() => {
     const params = new URLSearchParams(searchParams.toString());
     const newSelections: Selection[] = [];
@@ -39,9 +43,15 @@ export default function Dashboard() {
       }
     });
 
+    // Get column_name from URL if present
+    const columnName = params.get('column_name');
+    if (columnName) {
+      newFilters.column_name = columnName;
+    }
+
     setSelections(newSelections);
     setFilters(newFilters);
-  }, [searchParams]);
+  }, []); // Only run once on mount
 
   const handleFilterUpdate = (dimension: string, dimensionName: string, values: string[]) => {
     setSelections(prev => {
@@ -88,6 +98,10 @@ export default function Dashboard() {
     });
   };
 
+  const handleTimeseriesFilterChange = (newFilters: Record<string, string>) => {
+    setFilters(newFilters);
+  };
+
   return (
     <div className="h-screen flex flex-col bg-gray-900 text-white">
       <TopBar
@@ -99,17 +113,25 @@ export default function Dashboard() {
         {/* Main Content - 2/3 width */}
         <div className="w-2/3 flex flex-col min-h-0">
           <div className="h-[60vh] border-b border-r border-gray-700">
-            <TimeseriesChartContainer filters={filters} />
+            <TimeseriesChartContainer 
+              data={llmData} 
+              isLoading={isLoading}
+              filters={filters}
+              onFiltersChange={handleTimeseriesFilterChange}
+            />
           </div>
           <div className="h-[35vh] border-r border-gray-700 overflow-hidden">
-            <DataTableContainer filters={filters} />
+            <DataTableContainer data={llmData} isLoading={isLoading} />
           </div>
         </div>
 
         {/* Sidebar - 1/3 width */}
         <div className="w-1/3 overflow-auto">
           <div className="border-b border-gray-700">
-            <MetricsCards filters={filters} />
+            <MetricsCards 
+              data={llmData} 
+              isLoading={isLoading} 
+            />
           </div>
           <div>
             <TabbedPane 

dashboard/ai-analytics/src/hooks/useTinybirdData.ts

@@ -9,8 +9,13 @@ export function useLLMUsage(filters: Record<string, string>) {
 }
 
 export function useGenericCounter(dimension: string, filters: Record<string, string>) {
+  const allFilters = {
+    ...filters,
+    dimension
+  };
+
   return useQuery({
     queryKey: ['generic-counter', dimension, filters],
-    queryFn: () => fetchGenericCounter({ ...filters, dimension })
+    queryFn: () => fetchGenericCounter(allFilters)
   });
 }