Merge pull request #38 from tinybirdco/fixes

Fixes

Author: alrocar

dashboard/ai-analytics/src/app/api/extract-cost-parameters/route.ts

@@ -74,7 +74,7 @@ export async function POST(req: Request) {
       model: z.enum((availableDimensions?.data?.[0]?.model || ['gpt-4']) as [string, ...string[]]).optional(),
       provider: z.enum((availableDimensions?.data?.[0]?.provider || ['openai']) as [string, ...string[]]).optional(),
       environment: z.enum((availableDimensions?.data?.[0]?.environment || ['production']) as [string, ...string[]]).optional(),
-      organization: z.enum((availableDimensions?.data?.[0]?.organization || ['']) as [string, ...string[]]).optional(),
+      organization: z.enum((availableDimensions?.data?.[0]?.organizations || ['']) as [string, ...string[]]).optional(),
       project: z.enum((availableDimensions?.data?.[0]?.project || ['']) as [string, ...string[]]).optional(),
       user: z.string().optional()
     });

dashboard/ai-analytics/src/app/api/search/route.ts

@@ -33,7 +33,7 @@ export async function POST(req: Request) {
       model: z.enum((availableDimensions?.data?.[0]?.model || ['gpt-4']) as [string, ...string[]]).optional(),
       provider: z.enum((availableDimensions?.data?.[0]?.provider || ['openai']) as [string, ...string[]]).optional(),
       environment: z.enum((availableDimensions?.data?.[0]?.environment || ['production']) as [string, ...string[]]).optional(),
-      organization: z.enum((availableDimensions?.data?.[0]?.organization || ['']) as [string, ...string[]]).optional(),
+      organization: z.enum((availableDimensions?.data?.[0]?.organizations || ['']) as [string, ...string[]]).optional(),
       project: z.enum((availableDimensions?.data?.[0]?.project || ['']) as [string, ...string[]]).optional(),
       date_range: z.enum(['last month', 'last week'] as [string, ...string[]]).optional(),
     });
@@ -43,6 +43,7 @@ export async function POST(req: Request) {
     Common values: ${JSON.stringify(availableDimensions?.data?.[0] || {}, null, 2)}.
     Return only valid values from the provided dimensions, fix typos when necessary.`;
     console.log(systemPromptText);
+    
 
     const result = await generateObject({
       model: wrappedOpenAI,

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

@@ -323,11 +323,20 @@ export default function CostPredictionModal({
     }
   };
 
+  const calculateButtonRef = useRef<HTMLButtonElement>(null);
+
   const handleExampleClick = (example: string) => {
     setQuery(example);
     if (inputRef.current) {
       inputRef.current.focus();
     }
+    
+    // Use setTimeout to ensure the query state is updated before clicking the button
+    setTimeout(() => {
+      if (calculateButtonRef.current) {
+        calculateButtonRef.current.click();
+      }
+    }, 0);
   };
 
   const calculateCosts = (usageData: UsageDataItem[], params: CostParameters) => {
@@ -1055,6 +1064,7 @@ export default function CostPredictionModal({
 
                   <div className="-mx-4 mt-4"> {/* Changed pt-4 to mt-4 */}
                     <button
+                      ref={calculateButtonRef}
                       type="submit"
                       disabled={isLoading || !query.trim()}
                       className={`w-full py-4 transition-colors ${

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

@@ -0,0 +1,110 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface ResizableSplitViewProps {
+  topComponent: React.ReactNode;
+  bottomComponent: React.ReactNode;
+  initialTopHeight?: string;
+  minTopHeight?: string;
+  minBottomHeight?: string;
+}
+
+export default function ResizableSplitView({
+  topComponent,
+  bottomComponent,
+  initialTopHeight = '60vh',
+  minTopHeight = '30vh',
+  minBottomHeight = '20vh'
+}: ResizableSplitViewProps) {
+  const [topHeight, setTopHeight] = useState(initialTopHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
+
+  // Convert vh to pixels
+  const vhToPixels = (vh: string) => {
+    const vhValue = parseFloat(vh);
+    return (window.innerHeight * vhValue) / 100;
+  };
+
+  // Convert pixels to vh
+  const pixelsToVh = (pixels: number) => {
+    return `${(pixels / window.innerHeight) * 100}vh`;
+  };
+
+  // Handle mouse down on the drag handle
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    e.preventDefault();
+  };
+
+  // Handle mouse move during dragging
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging || !containerRef.current) return;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const containerHeight = containerRect.height;
+    const mouseY = e.clientY - containerRect.top;
+    
+    // Calculate new height in pixels
+    let newHeightPixels = mouseY;
+    
+    // Apply min/max constraints
+    const minTopPixels = vhToPixels(minTopHeight);
+    const minBottomPixels = vhToPixels(minBottomHeight);
+    
+    if (newHeightPixels < minTopPixels) {
+      newHeightPixels = minTopPixels;
+    } else if (containerHeight - newHeightPixels < minBottomPixels) {
+      newHeightPixels = containerHeight - minBottomPixels;
+    }
+    
+    // Convert back to vh and update state
+    setTopHeight(pixelsToVh(newHeightPixels));
+  };
+
+  // Handle mouse up to stop dragging
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Add and remove event listeners
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div 
+      ref={containerRef} 
+      className="flex flex-col w-full h-full relative bg-[#262626] rounded-lg overflow-hidden"
+    >
+      {/* Top component */}
+      <div style={{ height: topHeight }} className="w-full overflow-hidden">
+        {topComponent}
+      </div>
+      
+      {/* Drag handle */}
+      <div
+        ref={dragHandleRef}
+        className={`h-2 bg-[rgb(53, 53, 53)] hover:bg-[var(--accent)] cursor-row-resize flex items-center justify-center transition-colors ${
+          isDragging ? 'bg-[var(--accent)]' : ''
+        }`}
+        onMouseDown={handleMouseDown}
+      >
+        <div className="w-8 h-1 bg-gray-500 rounded-full"></div>
+      </div>
+      
+      {/* Bottom component */}
+      <div className="flex-1 w-full overflow-hidden">
+        {bottomComponent}
+      </div>
+    </div>
+  );
+} 

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

@@ -97,8 +97,8 @@ const getEnvironmentIcon = (env: string) => {
 };
 
 interface TabbedPaneProps {
-  filters: Record<string, string>;
-  onFilterUpdate: (dimension: string, name: string, values: string[]) => void;
+  filters: Record<string, string | undefined>;
+  onFilterUpdate: (dimension: string, dimensionName: string, values: string[]) => void;
 }
 
 export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps) {
@@ -112,7 +112,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
   // Pass all filters to the query
-  const { data, isLoading, error } = useGenericCounter(selectedTab, filters);
+  const { data, isLoading, error } = useGenericCounter(selectedTab, filters as Record<string, string>);
 
   // Add effect to sync with URL params
   useEffect(() => {