@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/lib/esm/features/agent/chat/VegaLiteChart.js

@@ -1,793 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Check, Copy, Download, Loader2, Maximize2, Minimize2, X } from 'lucide-react';
-import Papa from 'papaparse';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { VegaEmbed } from 'react-vega';
-import { cn } from '../../../core/components/libs/utils';
-import { useUITranslation } from '../../../i18n/index.js';
-import { useUserSession } from '@vertesia/ui/session';
-import { getArtifactCacheKey, getFileCacheKey, useArtifactUrlCache } from './useArtifactUrlCache';
-// Constants
-const DEFAULT_CHART_HEIGHT = 280;
-const DEFAULT_DASHBOARD_HEIGHT = 500;
-// Error display component
-function VegaErrorDisplay({ error, chartTitle }) {
-    return (_jsx("div", { className: "flex items-center justify-center h-full bg-red-50 dark:bg-red-950 rounded-md p-4", children: _jsxs("div", { className: "text-center", children: [_jsxs("p", { className: "text-sm font-medium text-red-600 dark:text-red-400", children: ["Cannot render ", chartTitle || 'Vega-Lite', " chart"] }), _jsx("p", { className: "text-xs text-red-500 dark:text-red-500 mt-1 max-w-xs truncate", children: error })] }) }));
-}
-// Fullscreen dialog component with smooth animations
-function FullscreenDialog({ isOpen, onClose, title, description, children, }) {
-    const { t } = useUITranslation();
-    return (_jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-all duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { className: "fixed inset-2 sm:inset-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-xl shadow-2xl transition-all duration-300 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 data-[state=closed]:slide-out-to-bottom-2 data-[state=open]:slide-in-from-bottom-2", onEscapeKeyDown: onClose, children: [_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { onClick: onClose, className: "absolute top-3 right-3 z-10 p-2 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 shadow-sm", "aria-label": t('agent.closeFullscreen'), children: _jsx(X, { className: "w-5 h-5 text-gray-600 dark:text-gray-300" }) }) }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6 animate-in fade-in-0 duration-500 delay-150", children: children }), _jsx("div", { className: "flex items-center justify-between px-4 sm:px-6 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 rounded-b-xl", children: _jsxs("div", { className: "flex flex-col", children: [_jsx(DialogPrimitive.Title, { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title || t('agent.dashboard') }), description && (_jsx(DialogPrimitive.Description, { className: "text-sm text-gray-500 dark:text-gray-400 mt-0.5", children: description }))] }) })] })] }) }));
-}
-// Calculate height based on spec complexity
-function calculateAutoHeight(spec, mode) {
-    if (mode === 'chart') {
-        return DEFAULT_CHART_HEIGHT;
-    }
-    // For dashboard mode, try to calculate based on spec structure
-    let rowCount = 1;
-    if (spec.vconcat) {
-        rowCount = Array.isArray(spec.vconcat) ? spec.vconcat.length : 1;
-    }
-    else if (spec.concat) {
-        const columns = spec.columns || 2;
-        const items = Array.isArray(spec.concat) ? spec.concat.length : 1;
-        rowCount = Math.ceil(items / columns);
-    }
-    else if (spec.facet) {
-        // Faceted charts - estimate based on data
-        rowCount = 2; // Default estimate
-    }
-    // Base height per row + padding
-    return Math.max(DEFAULT_DASHBOARD_HEIGHT, rowCount * 280 + 40);
-}
-// Modern color palette - vibrant but professional
-const CHART_COLORS = {
-    // Primary palette - vibrant gradients
-    categorical: [
-        '#6366f1', // indigo
-        '#8b5cf6', // violet
-        '#ec4899', // pink
-        '#f43f5e', // rose
-        '#f97316', // orange
-        '#eab308', // yellow
-        '#22c55e', // green
-        '#14b8a6', // teal
-        '#06b6d4', // cyan
-        '#3b82f6', // blue
-    ],
-    // Sequential schemes
-    blues: ['#dbeafe', '#93c5fd', '#3b82f6', '#1d4ed8', '#1e3a8a'],
-    purples: ['#f3e8ff', '#c4b5fd', '#8b5cf6', '#6d28d9', '#4c1d95'],
-    greens: ['#dcfce7', '#86efac', '#22c55e', '#15803d', '#14532d'],
-    // Diverging
-    diverging: ['#ef4444', '#fca5a5', '#fef3c7', '#86efac', '#22c55e'],
-};
-/**
- * Preprocess a Vega-Lite spec to fix duplicate signal names that occur
- * when params with selections are used in vconcat/hconcat layouts.
- *
- * The issue: Vega-Lite creates internal signals like `paramName_tuple` for
- * point selections. When a param is defined at the root level of a vconcat/hconcat
- * spec, Vega-Lite's compiler creates duplicate signals when propagating the
- * selection to sub-views.
- *
- * Solution: Move selection params from the root level to the first sub-view
- * (where selections typically originate). Cross-view references are preserved
- * so that clicking in one view filters other views.
- */
-function fixVegaLiteSelectionParams(spec) {
-    // Deep clone the spec to avoid mutations
-    const result = JSON.parse(JSON.stringify(spec));
-    // Check if this is a concatenated spec with root-level selection params
-    const concatKeys = ['vconcat', 'hconcat', 'concat'];
-    const hasConcatViews = concatKeys.some(key => Array.isArray(result[key]));
-    if (!hasConcatViews) {
-        // Not a concatenated spec, no special handling needed
-        return result;
-    }
-    // Check for selection params at the root level
-    const rootSelectionParams = [];
-    if (Array.isArray(result.params)) {
-        for (const param of result.params) {
-            if (param && typeof param === 'object' && param.name && param.select) {
-                rootSelectionParams.push({ name: param.name, param });
-            }
-        }
-    }
-    if (rootSelectionParams.length === 0) {
-        // No selection params at root level, no special handling needed
-        return result;
-    }
-    // Strategy: Move the selection param to the first sub-view that has an
-    // encoding field matching the selection. Keep cross-view references intact
-    // so filtering works across views.
-    for (const { name: paramName, param } of rootSelectionParams) {
-        const selectFields = param.select?.fields || [];
-        const hasLegendBinding = param.select?.bind === 'legend';
-        // Find the concat array
-        let concatArray = null;
-        for (const key of concatKeys) {
-            if (Array.isArray(result[key])) {
-                concatArray = result[key];
-                break;
-            }
-        }
-        if (!concatArray || concatArray.length === 0)
-            continue;
-        // Find the first view that has the selection field in its encoding
-        // This is typically where users click to make selections
-        let targetViewIndex = 0;
-        for (let i = 0; i < concatArray.length; i++) {
-            const view = concatArray[i];
-            if (viewHasField(view, selectFields) || (hasLegendBinding && viewHasColorEncoding(view, selectFields))) {
-                targetViewIndex = i;
-                break;
-            }
-        }
-        // Move the param to the target view
-        const targetView = concatArray[targetViewIndex];
-        if (!targetView.params) {
-            targetView.params = [];
-        }
-        targetView.params.push(param);
-        // Remove the param from root level
-        result.params = result.params.filter((p) => p.name !== paramName);
-        // Cross-view references are kept intact - Vega-Lite handles signal
-        // propagation from the view where the selection is defined to other views
-    }
-    // Clean up empty params array at root
-    if (Array.isArray(result.params) && result.params.length === 0) {
-        delete result.params;
-    }
-    return result;
-}
-/**
- * Apply parameter values to a Vega-Lite spec.
- * Updates the 'value' field of named params, allowing models to set
- * initial values for interactive controls (sliders, dropdowns, etc.).
- * @exported for testing
- */
-export function applyParameterValues(spec, parameterValues) {
-    if (!parameterValues || Object.keys(parameterValues).length === 0) {
-        return spec;
-    }
-    const result = JSON.parse(JSON.stringify(spec));
-    // Helper to update params in a view
-    const updateParams = (params) => {
-        for (const param of params) {
-            if (param && typeof param === 'object' && param.name && param.name in parameterValues) {
-                param.value = parameterValues[param.name];
-            }
-        }
-    };
-    // Update root-level params
-    if (Array.isArray(result.params)) {
-        updateParams(result.params);
-    }
-    // Update params in nested views (vconcat, hconcat, concat)
-    const updateNestedViews = (views) => {
-        if (!Array.isArray(views))
-            return;
-        for (const view of views) {
-            if (view && Array.isArray(view.params)) {
-                updateParams(view.params);
-            }
-            // Recursively handle nested concatenations
-            if (view.vconcat)
-                updateNestedViews(view.vconcat);
-            if (view.hconcat)
-                updateNestedViews(view.hconcat);
-            if (view.concat)
-                updateNestedViews(view.concat);
-            // Handle layers
-            if (Array.isArray(view.layer)) {
-                for (const layer of view.layer) {
-                    if (layer && Array.isArray(layer.params)) {
-                        updateParams(layer.params);
-                    }
-                }
-            }
-        }
-    };
-    if (result.vconcat)
-        updateNestedViews(result.vconcat);
-    if (result.hconcat)
-        updateNestedViews(result.hconcat);
-    if (result.concat)
-        updateNestedViews(result.concat);
-    if (Array.isArray(result.layer)) {
-        for (const layer of result.layer) {
-            if (layer && Array.isArray(layer.params)) {
-                updateParams(layer.params);
-            }
-        }
-    }
-    return result;
-}
-/**
- * Check if a view has encoding using any of the specified fields.
- */
-function viewHasField(view, fields) {
-    if (!view || !view.encoding)
-        return false;
-    for (const field of fields) {
-        for (const channel of Object.values(view.encoding)) {
-            if (channel && typeof channel === 'object' && channel.field === field) {
-                return true;
-            }
-        }
-    }
-    // Also check nested layers
-    if (Array.isArray(view.layer)) {
-        for (const layer of view.layer) {
-            if (viewHasField(layer, fields))
-                return true;
-        }
-    }
-    return false;
-}
-/**
- * Check if a view has color encoding using any of the specified fields.
- */
-function viewHasColorEncoding(view, fields) {
-    if (!view)
-        return false;
-    const checkEncoding = (encoding) => {
-        if (!encoding)
-            return false;
-        const colorField = encoding.color?.field;
-        return colorField && fields.includes(colorField);
-    };
-    if (checkEncoding(view.encoding))
-        return true;
-    // Check nested layers
-    if (Array.isArray(view.layer)) {
-        for (const layer of view.layer) {
-            if (checkEncoding(layer.encoding))
-                return true;
-        }
-    }
-    return false;
-}
-/**
- * Walk the Vega-Lite spec and find all artifact: URL references in data.url fields.
- * Returns an array of references with their paths in the spec tree.
- */
-function findArtifactReferences(spec, currentPath = []) {
-    const references = [];
-    if (!spec || typeof spec !== 'object') {
-        return references;
-    }
-    // Check if this object has a data.url that's an artifact reference
-    if (spec.data && typeof spec.data === 'object') {
-        const url = spec.data.url;
-        if (typeof url === 'string' && url.startsWith('artifact:')) {
-            references.push({
-                path: [...currentPath, 'data'],
-                artifactPath: url.replace(/^artifact:/, '').trim(),
-            });
-        }
-    }
-    // Recursively check nested objects (layer, vconcat, hconcat, concat, spec, etc.)
-    const nestedKeys = ['layer', 'vconcat', 'hconcat', 'concat', 'spec', 'repeat', 'facet'];
-    for (const key of nestedKeys) {
-        if (key in spec) {
-            const value = spec[key];
-            if (Array.isArray(value)) {
-                value.forEach((item, index) => {
-                    references.push(...findArtifactReferences(item, [...currentPath, key, String(index)]));
-                });
-            }
-            else if (typeof value === 'object' && value !== null) {
-                references.push(...findArtifactReferences(value, [...currentPath, key]));
-            }
-        }
-    }
-    return references;
-}
-/**
- * Deep clone and update the spec by replacing artifact URLs with resolved data values.
- */
-function replaceArtifactData(spec, resolvedData) {
-    const result = JSON.parse(JSON.stringify(spec));
-    for (const [pathKey, data] of resolvedData) {
-        const path = pathKey.split('.');
-        let current = result;
-        // Navigate to the parent of the data object
-        for (let i = 0; i < path.length - 1; i++) {
-            if (current[path[i]] === undefined) {
-                break;
-            }
-            current = current[path[i]];
-        }
-        // Replace data.url with data.values
-        const lastKey = path[path.length - 1];
-        if (current[lastKey] && typeof current[lastKey] === 'object') {
-            delete current[lastKey].url;
-            current[lastKey].values = data;
-        }
-    }
-    return result;
-}
-// Get dark mode config for Vega with enhanced styling
-function getDarkModeConfig(isDark) {
-    const baseConfig = {
-        background: 'transparent',
-        view: { stroke: 'transparent' },
-        // Modern color range
-        range: {
-            category: CHART_COLORS.categorical,
-            diverging: CHART_COLORS.diverging,
-            heatmap: CHART_COLORS.purples,
-            ramp: CHART_COLORS.blues,
-        },
-        // Enable tooltips by default for all mark types with enhanced styling
-        mark: { tooltip: true },
-        bar: {
-            tooltip: true,
-            cornerRadiusTopLeft: 4,
-            cornerRadiusTopRight: 4,
-        },
-        line: {
-            tooltip: true,
-            strokeWidth: 2.5,
-            strokeCap: 'round',
-        },
-        point: {
-            tooltip: true,
-            size: 60,
-            filled: true,
-        },
-        area: {
-            tooltip: true,
-            fillOpacity: 0.7,
-            line: true,
-        },
-        rect: {
-            tooltip: true,
-            cornerRadius: 2,
-        },
-        arc: {
-            tooltip: true,
-            cornerRadius: 4,
-        },
-        circle: {
-            tooltip: true,
-            size: 80,
-        },
-    };
-    if (isDark) {
-        return {
-            ...baseConfig,
-            axis: {
-                labelColor: '#a1a1aa',
-                titleColor: '#e4e4e7',
-                gridColor: '#3f3f46',
-                domainColor: '#52525b',
-                tickColor: '#52525b',
-                labelFont: 'Inter, system-ui, sans-serif',
-                titleFont: 'Inter, system-ui, sans-serif',
-                labelFontSize: 11,
-                titleFontSize: 12,
-                titleFontWeight: 500,
-            },
-            legend: {
-                labelColor: '#a1a1aa',
-                titleColor: '#e4e4e7',
-                labelFont: 'Inter, system-ui, sans-serif',
-                titleFont: 'Inter, system-ui, sans-serif',
-                labelFontSize: 11,
-                titleFontSize: 12,
-                symbolSize: 100,
-            },
-            title: {
-                color: '#fafafa',
-                font: 'Inter, system-ui, sans-serif',
-                fontSize: 14,
-                fontWeight: 600,
-            },
-        };
-    }
-    return {
-        ...baseConfig,
-        axis: {
-            labelColor: '#71717a',
-            titleColor: '#3f3f46',
-            gridColor: '#e4e4e7',
-            domainColor: '#d4d4d8',
-            tickColor: '#d4d4d8',
-            labelFont: 'Inter, system-ui, sans-serif',
-            titleFont: 'Inter, system-ui, sans-serif',
-            labelFontSize: 11,
-            titleFontSize: 12,
-            titleFontWeight: 500,
-        },
-        legend: {
-            labelColor: '#71717a',
-            titleColor: '#3f3f46',
-            labelFont: 'Inter, system-ui, sans-serif',
-            titleFont: 'Inter, system-ui, sans-serif',
-            labelFontSize: 11,
-            titleFontSize: 12,
-            symbolSize: 100,
-        },
-        title: {
-            color: '#18181b',
-            font: 'Inter, system-ui, sans-serif',
-            fontSize: 14,
-            fontWeight: 600,
-        },
-    };
-}
-export const VegaLiteChart = memo(function VegaLiteChart({ spec, artifactRunId }) {
-    const { t } = useUITranslation();
-    const { title, description, spec: vegaSpec, options } = spec;
-    const [isExporting, setIsExporting] = useState(false);
-    const [isCopied, setIsCopied] = useState(false);
-    const [error, setError] = useState(null);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const viewRef = useRef(null);
-    const fullscreenViewRef = useRef(null);
-    const containerRef = useRef(null);
-    // Artifact resolution state
-    const { client } = useUserSession();
-    const urlCache = useArtifactUrlCache();
-    // Use refs to avoid triggering effect re-runs when these stable values are accessed
-    const clientRef = useRef(client);
-    clientRef.current = client;
-    const urlCacheRef = useRef(urlCache);
-    urlCacheRef.current = urlCache;
-    const [resolvedSpec, setResolvedSpec] = useState(null);
-    const [isLoadingArtifacts, setIsLoadingArtifacts] = useState(false);
-    const [artifactError, setArtifactError] = useState(null);
-    // Determine mode and settings
-    const mode = options?.mode || 'chart';
-    const isDashboard = mode === 'dashboard';
-    const showFullscreenButton = options?.enableFullscreen ?? isDashboard;
-    // Calculate height
-    const baseHeight = options?.height || calculateAutoHeight(vegaSpec, mode);
-    // Resolve artifact URLs in the spec
-    useEffect(() => {
-        const references = findArtifactReferences(vegaSpec);
-        // If no artifact references, use original spec
-        if (references.length === 0) {
-            setResolvedSpec(vegaSpec);
-            setIsLoadingArtifacts(false);
-            setArtifactError(null);
-            return;
-        }
-        if (!artifactRunId) {
-            console.warn('[VegaLiteChart] artifact references found but artifactRunId is missing!', {
-                references: references.map(r => r.artifactPath),
-                artifactRunId,
-            });
-        }
-        else {
-            console.info('[VegaLiteChart] resolving artifacts with runId:', artifactRunId, references.map(r => r.artifactPath));
-        }
-        let cancelled = false;
-        setIsLoadingArtifacts(true);
-        setArtifactError(null);
-        const resolveArtifacts = async () => {
-            const resolvedData = new Map();
-            const currentClient = clientRef.current;
-            const currentUrlCache = urlCacheRef.current;
-            for (const ref of references) {
-                try {
-                    const pathKey = ref.path.join('.');
-                    let url;
-                    // Determine if this is a shorthand path or full path
-                    if (artifactRunId && !ref.artifactPath.startsWith('agents/')) {
-                        // Shorthand path - use artifact API
-                        const cacheKey = getArtifactCacheKey(artifactRunId, ref.artifactPath, 'inline');
-                        if (currentUrlCache) {
-                            url = await currentUrlCache.getOrFetch(cacheKey, async () => {
-                                const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, ref.artifactPath, 'inline');
-                                return result.url;
-                            });
-                        }
-                        else {
-                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, ref.artifactPath, 'inline');
-                            url = result.url;
-                        }
-                    }
-                    else {
-                        // Full path - use files API
-                        const cacheKey = getFileCacheKey(ref.artifactPath);
-                        if (currentUrlCache) {
-                            url = await currentUrlCache.getOrFetch(cacheKey, async () => {
-                                const result = await currentClient.files.getDownloadUrl(ref.artifactPath);
-                                return result.url;
-                            });
-                        }
-                        else {
-                            const result = await currentClient.files.getDownloadUrl(ref.artifactPath);
-                            url = result.url;
-                        }
-                    }
-                    // Fetch the data from the resolved URL
-                    const response = await fetch(url);
-                    if (!response.ok) {
-                        throw new Error(`Failed to fetch artifact data: ${response.statusText}`);
-                    }
-                    // Detect CSV files by artifact path extension
-                    const isCsv = ref.artifactPath.toLowerCase().endsWith('.csv');
-                    let data;
-                    if (isCsv) {
-                        // Parse CSV to JSON array
-                        const csvText = await response.text();
-                        const parseResult = Papa.parse(csvText, {
-                            header: true,
-                            skipEmptyLines: true,
-                            dynamicTyping: true, // Auto-convert numbers and booleans
-                        });
-                        data = parseResult.data;
-                    }
-                    else {
-                        // Parse as JSON
-                        const jsonData = await response.json();
-                        data = Array.isArray(jsonData) ? jsonData : [jsonData];
-                    }
-                    resolvedData.set(pathKey, data);
-                }
-                catch (err) {
-                    console.error(`Failed to resolve artifact: ${ref.artifactPath}`, err);
-                    if (!cancelled) {
-                        setArtifactError(`Failed to load data from artifact: ${ref.artifactPath}`);
-                    }
-                    return;
-                }
-            }
-            if (!cancelled) {
-                const newSpec = replaceArtifactData(vegaSpec, resolvedData);
-                setResolvedSpec(newSpec);
-                setIsLoadingArtifacts(false);
-            }
-        };
-        resolveArtifacts();
-        return () => {
-            cancelled = true;
-        };
-    }, [vegaSpec, artifactRunId]);
-    // Detect dark mode
-    const [isDarkMode, setIsDarkMode] = useState(false);
-    const isDarkModeRef = useRef(false);
-    useEffect(() => {
-        const checkDarkMode = () => {
-            const newDarkMode = document.documentElement.classList.contains('dark');
-            // Only update state if dark mode actually changed
-            if (newDarkMode !== isDarkModeRef.current) {
-                isDarkModeRef.current = newDarkMode;
-                setIsDarkMode(newDarkMode);
-            }
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-        return () => observer.disconnect();
-    }, []);
-    // Track container width for responsive sizing
-    const [containerWidth, setContainerWidth] = useState(0);
-    const containerWidthRef = useRef(0);
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        let resizeTimeout;
-        const resizeObserver = new ResizeObserver((entries) => {
-            // Debounce resize callbacks to ~100ms to avoid excessive state updates
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                const width = entries[0]?.contentRect.width;
-                if (width && width !== containerWidthRef.current) {
-                    containerWidthRef.current = width;
-                    setContainerWidth(width);
-                }
-            }, 100);
-        });
-        resizeObserver.observe(containerRef.current);
-        // Initial width
-        const initialWidth = containerRef.current.clientWidth;
-        containerWidthRef.current = initialWidth;
-        setContainerWidth(initialWidth);
-        return () => {
-            clearTimeout(resizeTimeout);
-            resizeObserver.disconnect();
-        };
-    }, []);
-    // Check if there are artifact references that need resolution
-    const hasArtifactReferences = useMemo(() => {
-        return findArtifactReferences(vegaSpec).length > 0;
-    }, [vegaSpec]);
-    // Memoize the processed spec to fix Vega-Lite selection param issues
-    // This handles the duplicate signal problem in concatenated views
-    const processedSpec = useMemo(() => {
-        // If there are artifact references, we must wait for resolvedSpec
-        // Don't fall back to vegaSpec which contains artifact: URLs
-        if (hasArtifactReferences && !resolvedSpec) {
-            return null;
-        }
-        let specToUse = resolvedSpec || vegaSpec;
-        if (!specToUse)
-            return null;
-        // Apply parameter values if provided (allows model to set initial slider/dropdown values)
-        if (options?.parameterValues) {
-            specToUse = applyParameterValues(specToUse, options.parameterValues);
-        }
-        return fixVegaLiteSelectionParams(specToUse);
-    }, [resolvedSpec, vegaSpec, hasArtifactReferences, options?.parameterValues]);
-    // Scale widths in concatenated views to fit container
-    const scaleSpecWidths = useCallback((spec, availableWidth) => {
-        if (!spec || typeof spec !== 'object')
-            return spec;
-        // Handle hconcat - distribute width among children
-        if (spec.hconcat && Array.isArray(spec.hconcat)) {
-            const childCount = spec.hconcat.length;
-            const spacing = spec.spacing ?? 10;
-            const totalSpacing = spacing * (childCount - 1);
-            const widthPerChild = Math.floor((availableWidth - totalSpacing) / childCount);
-            return {
-                ...spec,
-                hconcat: spec.hconcat.map((child) => scaleSpecWidths(child, widthPerChild)),
-            };
-        }
-        // Handle vconcat - each child gets full width
-        if (spec.vconcat && Array.isArray(spec.vconcat)) {
-            return {
-                ...spec,
-                vconcat: spec.vconcat.map((child) => scaleSpecWidths(child, availableWidth)),
-            };
-        }
-        // Handle generic concat with columns
-        if (spec.concat && Array.isArray(spec.concat)) {
-            const columns = spec.columns ?? spec.concat.length;
-            const spacing = spec.spacing ?? 10;
-            const totalSpacing = spacing * (columns - 1);
-            const widthPerChild = Math.floor((availableWidth - totalSpacing) / columns);
-            return {
-                ...spec,
-                concat: spec.concat.map((child) => scaleSpecWidths(child, widthPerChild)),
-            };
-        }
-        // For leaf views, set width if it's "container" or larger than available
-        const currentWidth = spec.width;
-        if (currentWidth === 'container' || (typeof currentWidth === 'number' && currentWidth > availableWidth)) {
-            return { ...spec, width: availableWidth };
-        }
-        return spec;
-    }, []);
-    // Build the full Vega-Lite spec with defaults
-    const buildFullSpec = useCallback((height, forFullscreen = false) => {
-        if (!processedSpec)
-            return null;
-        const config = getDarkModeConfig(isDarkMode);
-        // Use measured container width, window width for fullscreen (capped), or fallback
-        const calculatedWidth = forFullscreen
-            ? (typeof window !== 'undefined' ? Math.min(window.innerWidth - 80, 1400) : 1200)
-            : (containerWidth > 0 ? containerWidth - 24 : 500);
-        // Check if this is a concatenated view - autosize 'fit' only works for single/layered views
-        const isConcatenatedView = 'vconcat' in processedSpec || 'hconcat' in processedSpec || 'concat' in processedSpec;
-        // For concatenated views, use 'pad' which works correctly; for single views use 'fit'
-        const autosize = isConcatenatedView
-            ? { type: 'pad', contains: 'padding' }
-            : { type: 'fit', contains: 'padding' };
-        // Scale widths for concatenated views to fit container
-        let scaledSpec = processedSpec;
-        if (isConcatenatedView && calculatedWidth) {
-            scaledSpec = scaleSpecWidths(processedSpec, calculatedWidth);
-        }
-        // Replace "container" width with our measured width - "container" relies on CSS which may not be ready
-        const specWidth = scaledSpec.width;
-        const width = isConcatenatedView ? undefined : (specWidth === 'container' ? calculatedWidth : (specWidth ?? calculatedWidth));
-        // Destructure to remove width from spec so we can control it (only for non-concat views)
-        const { width: _specWidth, ...specWithoutWidth } = scaledSpec;
-        return {
-            $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
-            ...(!isConcatenatedView && width ? { width } : {}),
-            height: forFullscreen ? undefined : height,
-            autosize,
-            ...(isConcatenatedView ? scaledSpec : specWithoutWidth),
-            // Override title if provided at top level
-            ...(title && !processedSpec.title ? { title } : {}),
-            // Apply theme config
-            config: {
-                ...config,
-                ...processedSpec.config,
-            },
-        };
-    }, [processedSpec, title, isDarkMode, containerWidth, scaleSpecWidths]);
-    const handleCopy = useCallback(async () => {
-        const view = isFullscreen ? fullscreenViewRef.current : viewRef.current;
-        if (!view || isCopied)
-            return;
-        try {
-            const canvas = await view.toCanvas(2);
-            canvas.toBlob(async (blob) => {
-                if (blob) {
-                    await navigator.clipboard.write([
-                        new ClipboardItem({ 'image/png': blob })
-                    ]);
-                    setIsCopied(true);
-                    setTimeout(() => setIsCopied(false), 2000);
-                }
-            }, 'image/png');
-        }
-        catch (err) {
-            console.error('Failed to copy chart:', err);
-        }
-    }, [isCopied, isFullscreen]);
-    const handleExport = useCallback(async () => {
-        const view = isFullscreen ? fullscreenViewRef.current : viewRef.current;
-        if (!view || isExporting)
-            return;
-        setIsExporting(true);
-        try {
-            const url = await view.toImageURL('png', 2);
-            const link = document.createElement('a');
-            link.download = `${title || 'chart'}.png`;
-            link.href = url;
-            link.click();
-        }
-        catch (err) {
-            console.error('Failed to export chart:', err);
-        }
-        finally {
-            setIsExporting(false);
-        }
-    }, [title, isExporting, isFullscreen]);
-    const handleNewView = useCallback((view) => {
-        viewRef.current = view;
-        setError(null);
-    }, []);
-    const handleFullscreenNewView = useCallback((view) => {
-        fullscreenViewRef.current = view;
-    }, []);
-    const handleError = useCallback((err) => {
-        console.error('Vega-Lite rendering error:', err);
-        setError(err instanceof Error ? err.message : 'Unknown error');
-    }, []);
-    const toggleFullscreen = useCallback(() => {
-        setIsFullscreen(prev => !prev);
-    }, []);
-    // Clear error when spec changes
-    useEffect(() => {
-        setError(null);
-    }, [vegaSpec]);
-    // Toolbar component (reused in both views)
-    const Toolbar = ({ className }) => (_jsxs("div", { className: cn("flex items-center gap-2", className), children: [_jsxs("button", { onClick: handleCopy, disabled: isCopied, className: "text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors disabled:opacity-50 flex items-center gap-1", title: t('agent.copyToClipboard'), children: [isCopied ? _jsx(Check, { className: "w-3 h-3" }) : _jsx(Copy, { className: "w-3 h-3" }), isCopied ? t('agent.copied') : t('agent.copy')] }), _jsxs("button", { onClick: handleExport, disabled: isExporting, className: "text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1", title: t('agent.exportAsPng'), children: [_jsx(Download, { className: "w-3 h-3" }), isExporting ? t('agent.exporting') : t('agent.export')] }), showFullscreenButton && (_jsxs("button", { onClick: toggleFullscreen, className: "text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors flex items-center gap-1", title: isFullscreen ? t('agent.exitFullscreen') : t('agent.fullscreen'), children: [isFullscreen ? _jsx(Minimize2, { className: "w-3 h-3" }) : _jsx(Maximize2, { className: "w-3 h-3" }), isFullscreen ? t('agent.exit') : t('agent.fullscreen')] }))] }));
-    // Show loading state when resolving artifacts
-    // Also show loading if we have artifact refs but haven't resolved them yet
-    // (covers the gap before the effect runs)
-    if (isLoadingArtifacts || (hasArtifactReferences && !resolvedSpec)) {
-        return (_jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100", children: title || 'Chart' }) }), _jsx("div", { className: "flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", style: { width: '100%', height: baseHeight }, children: _jsxs("div", { className: "flex items-center gap-2 text-gray-500 dark:text-gray-400", children: [_jsx(Loader2, { className: "w-5 h-5 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading data from artifacts..." })] }) })] }) }));
-    }
-    // Show artifact error state
-    if (artifactError) {
-        return (_jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100", children: title || 'Chart' }) }), _jsx("div", { style: { width: '100%', height: baseHeight }, children: _jsx(VegaErrorDisplay, { error: artifactError, chartTitle: title }) })] }) }));
-    }
-    if (error) {
-        return (_jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100", children: title || 'Chart' }) }), _jsx("div", { style: { width: '100%', height: baseHeight }, children: _jsx(VegaErrorDisplay, { error: error, chartTitle: title }) })] }) }));
-    }
-    // Build spec for rendering
-    const chartSpec = buildFullSpec(baseHeight);
-    const fullscreenSpec = buildFullSpec(0, true);
-    // Handle case when spec isn't ready yet
-    if (!chartSpec) {
-        return null;
-    }
-    // Debug: Log renders to track unnecessary re-renders (enable with localStorage)
-    if (typeof window !== 'undefined' && localStorage.getItem('DEBUG_VEGA_RENDERS')) {
-        console.log('VegaLite rendering with spec:', {
-            title,
-            hasData: !!chartSpec.data?.values,
-            dataLength: chartSpec.data?.values?.length,
-        });
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm", isDashboard && "border-2"), children: _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100", children: title || (isDashboard ? 'Dashboard' : 'Chart') }), isDashboard && (_jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-300", children: "Interactive" }))] }), _jsx(Toolbar, {})] }), description && (_jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: description })), _jsx("div", { ref: containerRef, className: "bg-white dark:bg-gray-900 rounded overflow-hidden", style: { width: '100%', height: baseHeight, minWidth: 0 }, children: _jsx(VegaEmbed, { spec: chartSpec, onEmbed: (result) => handleNewView(result.view), onError: handleError, options: { renderer: options?.renderer || 'canvas', actions: false } }) })] }) }), _jsxs(FullscreenDialog, { isOpen: isFullscreen, onClose: () => setIsFullscreen(false), title: title || (isDashboard ? 'Dashboard' : 'Chart'), description: description, children: [_jsx("div", { className: "w-full h-full min-h-[calc(100vh-200px)]", children: fullscreenSpec && (_jsx(VegaEmbed, { spec: fullscreenSpec, onEmbed: (result) => handleFullscreenNewView(result.view), onError: handleError, options: { renderer: options?.renderer || 'canvas', actions: false } })) }), _jsx("div", { className: "absolute bottom-6 right-6", children: _jsx(Toolbar, { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700" }) })] })] }));
-}, (prevProps, nextProps) => {
-    // Deep compare the spec to prevent re-renders when data hasn't changed
-    return JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec) &&
-        prevProps.artifactRunId === nextProps.artifactRunId;
-});
-//# sourceMappingURL=VegaLiteChart.js.map