@quillsql/react 2.15.2 → 2.15.4

package/dist/esm/SQLEditor.js

@@ -1,972 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-import { useState, useContext, useEffect, useRef, useMemo, useCallback, } from 'react';
-import MonacoEditor from '@monaco-editor/react';
-import { ClientContext, DashboardFiltersContext, EventTrackingContext, FetchContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
-import { ChartBuilderWithModal, createInitialFormData } from './ChartBuilder';
-import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedModal, MemoizedPopover, MemoizedSecondaryButton, MemoizedSubHeader, MemoizedText, OverflowContainer, QuillChartBuilderCheckboxComponent, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableSQLEditorComponent, QuillToolTip, } from './components/UiComponents';
-import { QuillTextInput } from './components/UiComponents';
-import { updateFirstChildWidth } from './utils/width';
-import { TEMP_REPORT_ID, } from './models/Report';
-import { QuillCard } from './components/QuillCard';
-import { QuillSelectComponent } from './components/QuillSelect';
-import { fetchResultsByQuery, } from './utils/tableProcessing';
-import { processColumnReference } from './utils/queryConstructor';
-import { generateSuggestionsByDatasource, generateSuggestionsBySchema, QUILL_LANGUAGE, } from './utils/monacoConfig';
-import { shouldFetchMore, shouldSortInMemory, } from './utils/paginationProcessing';
-import { EMPTY_INTERNAL_REPORT, formatRowsFromReport } from './utils/report';
-import { cleanDashboardItem } from './utils/dashboard';
-import { createDebounce } from './lib';
-import { isSimpleSelectStarQuery } from './components/ReportBuilder/convert';
-import { getSelectFromAST, getTablesHelper } from './utils/astProcessing';
-import { useDashboardInternal, useDashboards } from './hooks/useDashboard';
-import { SAVED_QUERIES_DASHBOARD, SINGLE_TENANT } from './utils/constants';
-import { useLongLoading } from './hooks/useLongLoading';
-function defineEditorTheme(monaco, theme) {
-    monaco.editor.defineTheme('onedark', {
-        base: theme.darkMode ? 'vs-dark' : 'vs',
-        inherit: true,
-        rules: [
-            {
-                token: 'comment',
-                foreground: '#5d7988',
-                fontStyle: 'italic',
-            },
-            { token: 'constant', foreground: '#e06c75' },
-        ],
-        colors: {
-            'editor.background': '#F9F9F9',
-        },
-    });
-}
-function setEditorTheme(_editor, monaco, schema, databaseType, clientName, eventTracking) {
-    try {
-        monaco.editor.setTheme('onedark');
-        monaco.languages.register({ id: clientName });
-        monaco.languages.setMonarchTokensProvider(clientName, QUILL_LANGUAGE.monarchTokensProvider);
-        monaco.languages.setLanguageConfiguration(clientName, QUILL_LANGUAGE.languageConfiguration);
-        const provider = monaco.languages.registerCompletionItemProvider(clientName, {
-            provideCompletionItems: function (model, position) {
-                const word = model.getWordUntilPosition(position);
-                const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
-                const databaseSuggestions = generateSuggestionsByDatasource(monaco, range, databaseType);
-                const schemaSuggestions = generateSuggestionsBySchema(schema, monaco, range, databaseType);
-                return {
-                    suggestions: [...databaseSuggestions, ...schemaSuggestions],
-                };
-            },
-        });
-        return provider;
-    }
-    catch (e) {
-        eventTracking?.logError?.({
-            type: 'bug', // TODO: determine type
-            severity: 'medium',
-            message: 'Error setting editor theme',
-            errorMessage: e.message,
-            errorStack: e.stack,
-            errorData: {
-                caller: 'SQLEditor',
-                function: 'setEditorTheme',
-            },
-        });
-        return null;
-    }
-}
-/**
- * ### Quill SQLEditor
- *
- * Allows your users to build and write custom SQL queries and then add those
- * queries into their dashboard as a metric, chart, or table.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <SQLEditor />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components and default values.
- * <SQLEditor
- *   defaultQuery="SELECT SUM(amount) FROM TRANSACTIONS"
- *   ButtonComponen={MyButton}
- *   SecondaryButtonComponen={MySecondaryButton}
- * />
- * ```
- *
- * ### SQLEditor API
- * @see https://docs.quillsql.com/components/sql-editor
- */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, CheckboxComponent = QuillChartBuilderCheckboxComponent, defaultQuery, destinationDashboard, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, onDiscardChanges, onSaveChanges, onCloseChartBuilder, isChartBuilderEnabled = false, isAdminEnabled = false, chartBuilderTitle, runQueryOnMount = false, onAddToDashboardComplete, onSaveQueryComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, onRequestAddVirtualTable, }) {
-    const [sqlPrompt, setSqlPrompt] = useState('');
-    const [client] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const { tenants } = useContext(TenantContext);
-    const { dashboards } = useDashboards();
-    const { data, isLoading: dashboardIsLoading, reload, } = useDashboardInternal(destinationDashboard);
-    const { getToken, quillFetchWithToken } = useContext(FetchContext);
-    const { eventTracking } = useContext(EventTrackingContext);
-    const destinationDashboardConfig = useMemo(() => {
-        return dashboards?.find((d) => d.name === destinationDashboard);
-    }, [dashboards, destinationDashboard]);
-    const [query, setQuery] = useState(defaultQuery);
-    const [rows, setRows] = useState([]);
-    const [columns, setColumns] = useState([]);
-    const [schemaData] = useContext(SchemaDataContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const specificDashboardFilters = useMemo(() => {
-        return Object.values(dashboardFilters[report?.dashboardName ?? destinationDashboard ?? ''] ??
-            {}).map((f) => f.filter);
-    }, [dashboardFilters, destinationDashboard]);
-    // TODO: revisit if application state should influence the default flags
-    // const { dashboardConfig } = useContext(DashboardConfigContext);
-    // const flagsToAdd: { [tenantField: string]: string[] } = useMemo(() => {
-    //   if (client && asSingleDatabaseTenant(client))
-    //     return { 'QUILL_SINGLE_TENANT': flags ?? {} } as { [tenantField: string]: string[] };
-    //   const tenantKeys =
-    //     dashboardConfig[report?.dashboardName ?? destinationDashboard ?? '']
-    //       ?.config.tenantKeys ?? [];
-    //   if (!tenantKeys.length) return {};
-    //   // Tenants is either an array or an object. If it's an array, just map the ids to the first tenantKey in the config
-    //   if (
-    //     tenants &&
-    //     (typeof tenants[0] === 'string' || typeof tenants[0] === 'number')
-    //   ) {
-    //     const dashboardOwner = tenantKeys[0]!;
-    //     const tenantIds = (client?.allTenantTypes as QuillTenant[])?.find(
-    //       (tt) => dashboardOwner === tt.tenantField,
-    //     )?.tenantIds;
-    //     return {
-    //       [dashboardOwner]:
-    //         tenantIds
-    //           ?.filter(
-    //             (tt) =>
-    //               (tenants as (string | number)[]).includes(tt.id) && tt.flag,
-    //           )
-    //           ?.map((tt) => tt.flag!) ?? [],
-    //     };
-    //   }
-    //   const tenantKeysSet = new Set(tenantKeys);
-    //   return (
-    //     (
-    //       tenants as
-    //         | { tenantField: string; tenantIds: (string | number)[] }[]
-    //         | undefined
-    //     )
-    //       ?.filter((t) => tenantKeysSet.has(t.tenantField))
-    //       .reduce(
-    //         (acc, t) => {
-    //           const tenantIds = new Set(t.tenantIds);
-    //           acc[t.tenantField] =
-    //             (client?.allTenantTypes as QuillTenant[])
-    //               ?.find((tt) => t.tenantField === tt.tenantField)
-    //               ?.tenantIds?.filter((tt) => tenantIds.has(tt.id) && tt.flag)
-    //               ?.map((tt) => tt.flag!) ?? [];
-    //           return acc;
-    //         },
-    //         {} as { [tenantField: string]: string[] },
-    //       ) ?? {}
-    //   );
-    // }, [
-    //   tenants,
-    //   flags,
-    //   dashboardConfig,
-    //   destinationDashboard,
-    //   report?.dashboardName,
-    //   client?.allTenantTypes,
-    // ]);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
-    useLongLoading(sqlResponseLoading, {
-        origin: 'SQLEditor',
-        loadDescription: 'Loading SQL response',
-    });
-    const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
-    useLongLoading(sqlQueryLoading, {
-        origin: 'SQLEditor',
-        loadDescription: 'Loading SQL query',
-    });
-    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [displayTable, setDisplayTable] = useState(false);
-    const [formattedRows, setFormattedRows] = useState([]);
-    const formRef = useRef(null);
-    const sidebarRef = useRef(null);
-    const [searchBarWidth, setSearchBarWidth] = useState(200);
-    const [showSearchBar, setShowSearchBar] = useState(false);
-    const [filterBarWidth, setFilterBarWidth] = useState(200);
-    const [rowCount, setRowCount] = useState(undefined);
-    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
-    const [maxPage, setMaxPage] = useState(1);
-    const [tableSearchQuery, setTableSearchQuery] = useState('');
-    const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState('');
-    const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
-    const [tempReport, setTempReport] = useState({
-        ...EMPTY_INTERNAL_REPORT,
-        ...report,
-    });
-    const tableRef = useRef(null);
-    const [cachedHeight, setCachedHeight] = useState(0);
-    const DEFAULT_ROWS_PER_PAGE = 5;
-    const ROW_HEIGHT = 37;
-    const TABLE_TAB_HEIGHT = 75;
-    const filteredSchema = useMemo(() => {
-        return schemaData.schemaWithCustomFields?.filter((table) => {
-            return (destinationDashboardConfig?.tenantKeys?.[0] === SINGLE_TENANT ||
-                !table.ownerTenantFields ||
-                table.ownerTenantFields?.length === 0 ||
-                table.ownerTenantFields?.includes(destinationDashboardConfig?.tenantKeys?.[0] ?? ''));
-        });
-    }, [
-        schemaData.schemaWithCustomFields,
-        destinationDashboardConfig?.tenantKeys,
-    ]);
-    // Update cached height whenever ref exists
-    useEffect(() => {
-        if (tableRef.current) {
-            setCachedHeight(tableRef.current.clientHeight);
-        }
-    }, [tableRef.current?.clientHeight]);
-    useEffect(() => {
-        if (!data && !dashboardIsLoading) {
-            // need dashboard to be in Context for filteredSchema
-            reload();
-        }
-    }, [data, dashboardIsLoading]);
-    // Use cached height when ref is null
-    const dynamicHeight = tableRef.current
-        ? tableRef.current.clientHeight
-        : cachedHeight;
-    const rowsPerPage = Math.max(DEFAULT_ROWS_PER_PAGE, Math.ceil((dynamicHeight - TABLE_TAB_HEIGHT) / ROW_HEIGHT));
-    const pagination = {
-        page: 0,
-        rowsPerPage,
-        rowsPerRequest: Math.max(rowsPerPage * Math.floor(1000 / rowsPerPage), rowsPerPage * 10),
-    };
-    const [currentPage, setCurrentPage] = useState(0);
-    const [currentSort, setCurrentSort] = useState(undefined);
-    const currentProcessing = useMemo(() => {
-        return {
-            page: {
-                currentPage,
-                rowsPerPage,
-                rowsPerRequest: Math.max(rowsPerPage * Math.floor(1000 / rowsPerPage), rowsPerPage * 10),
-            },
-            sort: currentSort,
-        };
-    }, [currentPage, rowsPerPage, currentSort]);
-    const displayedTableData = useMemo(() => {
-        return (filteredSchema?.filter((table) => {
-            return (table.name
-                ?.toLowerCase()
-                ?.includes(tableSearchQuery.toLowerCase().trim()) ||
-                table.columns.some((col) => col.field
-                    ?.toLowerCase()
-                    ?.includes(tableSearchQuery.toLowerCase().trim())));
-        }) ?? []);
-    }, [tableSearchQuery, schemaData.schemaWithCustomFields]);
-    useEffect(() => {
-        // Since the TextInput component takes a required numeric width parameter,
-        // we dynamically calculate the width of this component here.
-        function handleResize() {
-            updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
-            updateFirstChildWidth(sidebarRef, setFilterBarWidth, { gap: 12 });
-            setShowSearchBar(true);
-        }
-        (async () => {
-            // add an async delay to ensure ref is set before calling resize
-            await new Promise((resolve) => setTimeout(resolve, 30));
-            handleResize();
-        })();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    useEffect(() => {
-        if (client) {
-            setRows([]);
-            setColumns([]);
-            setDisplayTable(false);
-        }
-    }, [client?.publicKey]);
-    useEffect(() => {
-        if (isChartBuilderOpen === false) {
-            onCloseChartBuilder && onCloseChartBuilder();
-        }
-    }, [isChartBuilderOpen]);
-    const handleRunSqlPrompt = useCallback(async () => {
-        if (!client || sqlResponseLoading) {
-            return;
-        }
-        if (sqlPrompt.trim().length > 500) {
-            return;
-        }
-        setSqlResponseLoading(true);
-        const { data: resp } = await quillFetchWithToken({
-            client,
-            task: 'quillai',
-            metadata: {
-                initialQuestion: sqlPrompt,
-            },
-        });
-        setQuery(resp.message);
-        setSqlResponseLoading(false);
-    }, [sqlPrompt, sqlResponseLoading]);
-    const debounceRunSqlPrompt = useCallback(createDebounce(handleRunSqlPrompt, 500), [handleRunSqlPrompt]);
-    const handleClearQuery = async () => {
-        setQuery('');
-    };
-    const onPageChange = (page) => {
-        if (currentProcessing.page && shouldFetchMore(pagination, page, maxPage)) {
-            const newPagination = { ...currentProcessing.page, page };
-            const updatedProcessing = { ...currentProcessing, page: newPagination };
-            setCurrentPage(page);
-            handleRunQuery(updatedProcessing);
-        }
-        if (page > maxPage) {
-            setMaxPage(page);
-        }
-    };
-    const onSortChange = (sort) => {
-        if (tempReport && shouldSortInMemory(pagination, rowCount)) {
-            return;
-        }
-        const updatedProcessing = { page: pagination, sort };
-        handleRunQuery(updatedProcessing, true);
-        setCurrentSort(sort);
-        setMaxPage(0);
-    };
-    const fetchRowCount = async (processing, includeFilters) => {
-        if (!client || !query) {
-            return;
-        }
-        setRowCountIsLoading(true);
-        const tableInfo = await fetchResultsByQuery({
-            query,
-            client,
-            tenants,
-            processing,
-            customFields: schemaData.customFields,
-            filters: includeFilters ? specificDashboardFilters : undefined,
-            dateField: includeFilters
-                ? (tempReport.dateField ?? report?.dateField)
-                : undefined,
-            rowsOnly: false,
-            rowCountOnly: true,
-            dashboardName: destinationDashboard,
-            getToken,
-            eventTracking,
-        });
-        if (tableInfo.rowCount) {
-            setRowCount(tableInfo.rowCount);
-        }
-        setRowCountIsLoading(false);
-    };
-    const handleRunQuery = async (processing, resetRows = false, includeFilters = false, resetPage = false) => {
-        if (!client) {
-            return;
-        }
-        try {
-            if (!query) {
-                throw new Error('No query found');
-            }
-            setDisplayTable(true);
-            setSqlQueryLoading(true);
-            setErrorMessage('');
-            if (resetPage && processing.page) {
-                processing.page.page = 0;
-                setCurrentPage(0);
-                setMaxPage(1);
-            }
-            const { referencedTablesAndColumns } = await getReferencedTables(client, query ?? '', schemaData.schemaWithCustomFields, isSimpleSelectStarQuery(query ?? ''));
-            const illegalTable = referencedTablesAndColumns.find((table) => !filteredSchema?.some((t) => t.name === table.name));
-            if (illegalTable) {
-                setErrorMessage(`Table "${illegalTable.name}" not found`);
-                return;
-            }
-            const tableInfo = await fetchResultsByQuery({
-                query,
-                client,
-                tenants,
-                processing,
-                customFields: schemaData.customFields,
-                rowsOnly: true,
-                dashboardName: destinationDashboard,
-                getToken,
-                eventTracking,
-            });
-            if (!!tableInfo.error) {
-                throw new Error(tableInfo.error);
-            }
-            // Search through tableInfo.columns for any two columns with the same 'field' value
-            const duplicateColumns = tableInfo.columns
-                .map((col) => col.field)
-                .filter((field, index, self) => self.indexOf(field) !== index);
-            if (duplicateColumns.length > 0) {
-                setErrorMessage(`Column named "${duplicateColumns[0]}" occurs more than once in results.`);
-                return;
-            }
-            fetchRowCount(processing, includeFilters);
-            setSqlQueryLoading(false);
-            let tempRows = [...rows, ...tableInfo.rows];
-            if (resetRows) {
-                tempRows = tableInfo.rows;
-            }
-            setRows(tempRows);
-            setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
-            if (onChangeData) {
-                onChangeData(tempRows);
-            }
-            setColumns(tableInfo.columns);
-            if (onChangeColumns) {
-                onChangeColumns(tableInfo.columns);
-            }
-            if (onChangeFields) {
-                onChangeFields(tableInfo.columns);
-            }
-            const formData = report
-                ? report
-                : createInitialFormData(tableInfo.columns);
-            const newReport = {
-                ...tempReport,
-                ...formData,
-                itemQuery: tableInfo.itemQuery,
-                rowCount: tableInfo.rowCount ?? tableInfo.rows.length,
-                rows: tempRows,
-                columns: tableInfo.columns,
-                referencedTables: tableInfo.referencedTables,
-            };
-            const cleaned = await cleanDashboardItem({
-                item: newReport,
-                dashboardFilters: newReport.filtersApplied,
-                client,
-                customFields: schemaData.customFields,
-                getToken,
-                tenants,
-                eventTracking,
-            });
-            setTempReport(cleaned);
-            setLastSuccessfulQuery(query);
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error running query',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'SQLEditor',
-                    function: 'handleRunQuery',
-                },
-            });
-            setErrorMessage(e.message);
-            return;
-        }
-    };
-    const handleFixWithAI = async () => {
-        try {
-            setDisplayTable(false);
-            setSqlResponseLoading(true);
-            if (!client) {
-                return;
-            }
-            if (sqlPrompt.trim().length > 500 ||
-                (query && query.trim().length > 5000) ||
-                errorMessage.trim().length > 1000) {
-                return;
-            }
-            const { data: resp } = await quillFetchWithToken({
-                client,
-                task: 'plsfix',
-                metadata: {
-                    initialQuestion: sqlPrompt,
-                    brokenQuery: query,
-                    errorMessage: errorMessage,
-                },
-            });
-            setErrorMessage('');
-            setQuery(resp.message);
-            setSqlResponseLoading(false);
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error fixing query',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'SQLEditor',
-                    function: 'handleFixWithAI',
-                },
-            });
-            setErrorMessage('Failed to fix query');
-            setSqlResponseLoading(false);
-        }
-    };
-    const handleClickSchemaItem = async (event) => {
-        const name = event.target.textContent;
-        if (!name) {
-            return;
-        }
-        // FOR Big Query it actually makes more sense to not wrap the table reference in quotes
-        const newQuery = `SELECT * FROM ${processColumnReference(name, client?.databaseType ?? 'postgresql')};`.replaceAll('`', '');
-        if (!query || query.length === 0) {
-            setQuery(newQuery);
-        }
-        await navigator.clipboard.writeText(newQuery);
-    };
-    const getReferencedTables = async (client, sqlQuery, dbTables, skipStar) => {
-        const { data: resp } = await quillFetchWithToken({
-            client,
-            task: 'astify',
-            metadata: {
-                query: sqlQuery,
-                clientId: client.clientId,
-                useNewNodeSql: true,
-            },
-        });
-        if (resp.success === false) {
-            return getTablesHelper(getSelectFromAST({}), dbTables, skipStar);
-        }
-        return getTablesHelper(getSelectFromAST(resp.ast), dbTables, skipStar);
-    };
-    useEffect(() => {
-        if (onChangeQuery) {
-            onChangeQuery(query || '');
-        }
-    }, [query]);
-    if (schemaData.isSchemaLoading || dashboardIsLoading) {
-        return _jsx(LoadingComponent, {});
-    }
-    return (_jsxs("div", { style: { backgroundColor: theme?.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
-                (isChartBuilderHorizontalView && !isChartBuilderOpen)) &&
-                !schemaData.isSchemaLoading && (_jsx("div", { style: {
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    padding: 0,
-                }, children: _jsx("div", { style: {
-                        height: '100%',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: _jsxs("div", { style: {
-                            width: '100%',
-                            display: 'flex',
-                            height: '100%',
-                            flexDirection: 'row',
-                            gap: 20,
-                        }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 20,
-                                }, children: [_jsx("div", { style: {
-                                            paddingTop: 16,
-                                            paddingLeft: '20px',
-                                            paddingRight: '30px',
-                                        }, children: _jsx(TextInputComponent, { placeholder: "Filter tables...", onChange: (e) => {
-                                                setTableSearchQuery(e.target.value);
-                                            }, value: tableSearchQuery, id: 'edit-name', width: filterBarWidth }) }), _jsx(SchemaListComponent, { schema: displayedTableData, theme: theme, LoadingComponent: LoadingComponent, loading: dashboardIsLoading || schemaData.isSchemaLoading, onClick: handleClickSchemaItem, onRequestAddVirtualTable: onRequestAddVirtualTable, ButtonComponent: ButtonComponent })] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    // gap: 12,
-                                    flexDirection: 'column',
-                                    justifyContent: 'space-between',
-                                    width: 'calc(100% - 290px)',
-                                    height: '100%',
-                                    overflowX: 'hidden',
-                                }, children: [_jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            overflow: addToDashboardButtonLabel === 'Add to dashboard'
-                                                ? 'visible'
-                                                : 'auto',
-                                            height: '100%',
-                                        }, children: _jsxs(OverflowContainer, { children: [_jsxs("form", { ref: formRef, onSubmit: (e) => {
-                                                        e.preventDefault();
-                                                        if (sqlPrompt.trim().length > 500) {
-                                                            return;
-                                                        }
-                                                        debounceRunSqlPrompt();
-                                                    }, style: {
-                                                        display: 'flex',
-                                                        visibility: showSearchBar ? 'visible' : 'hidden',
-                                                        flexDirection: 'row',
-                                                        gap: 12,
-                                                        paddingTop: 16,
-                                                        paddingBottom: 16,
-                                                    }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(QuillToolTip, { text: "Prompt must be less than 500 characters", enabled: sqlPrompt.trim().length > 500, displayBelow: true, textStyle: {
-                                                                maxWidth: '77px',
-                                                                whiteSpace: 'normal',
-                                                            }, children: _jsx(ButtonComponent, { onClick: debounceRunSqlPrompt, label: "Ask AI", isLoading: sqlResponseLoading, disabled: sqlPrompt.trim().length > 500 }) })] }), _jsx("div", { style: {
-                                                        minHeight: 'max(210px, 20vh)',
-                                                        maxHeight: '30%',
-                                                        height: '20vh',
-                                                    }, children: _jsx(SQLEditorComponent, { query: query || '', schema: filteredSchema, databaseType: client?.databaseType ?? 'postgresql', clientName: client?.publicKey || '', setQuery: setQuery, handleRunQuery: () => {
-                                                            handleRunQuery(currentProcessing, true);
-                                                        }, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, runQueryOnMount: runQueryOnMount, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, setEditorMounted: () => { }, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading &&
-                                                            schemaData.isSchemaLoading &&
-                                                            dashboardIsLoading, LoadingComponent: LoadingComponent }) }), _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        width: '100%',
-                                                        justifyContent: addToDashboardButtonLabel === 'Add to dashboard'
-                                                            ? 'flex-end'
-                                                            : 'flex-start',
-                                                    }, children: _jsx("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                            height: 70,
-                                                        }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [addToDashboardButtonLabel ===
-                                                                    'Add to dashboard' ? (_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                                        handleRunQuery({
-                                                                            page: pagination,
-                                                                            sort: undefined,
-                                                                        }, true, false, true);
-                                                                    }, label: "Run query" })) : (_jsx(ButtonComponent, { onClick: () => {
-                                                                        handleRunQuery({
-                                                                            page: pagination,
-                                                                            sort: undefined,
-                                                                        }, true, false, true);
-                                                                    }, label: "Run query" })), isAdminEnabled && !report && (_jsx(SecondaryButtonComponent, { disabled: !!errorMessage ||
-                                                                        !(lastSuccessfulQuery === query) ||
-                                                                        !query, onClick: async () => {
-                                                                        const isSelectStar = isSimpleSelectStarQuery(query ?? '');
-                                                                        let tables = [];
-                                                                        let customFieldColumns = [];
-                                                                        if (client &&
-                                                                            isSelectStar &&
-                                                                            schemaData.customFields) {
-                                                                            const { referencedTablesAndColumns } = await getReferencedTables(client, query ?? '', schemaData.schemaWithCustomFields, isSelectStar);
-                                                                            tables = referencedTablesAndColumns.map((ref) => ref.name);
-                                                                            customFieldColumns = tables
-                                                                                .map((table) => {
-                                                                                return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
-                                                                            })
-                                                                                .flat();
-                                                                        }
-                                                                        setTempReport({
-                                                                            ...tempReport,
-                                                                            id: TEMP_REPORT_ID,
-                                                                            rows,
-                                                                            columns: isSelectStar // if SELECT *, filter out custom fields from tabular view
-                                                                                ? // so Automatic Custom Fields can be applied
-                                                                                    columns.filter((col) => {
-                                                                                        return !customFieldColumns.includes(col.field);
-                                                                                    })
-                                                                                : columns,
-                                                                            includeCustomFields: isSelectStar,
-                                                                            columnInternal: columns,
-                                                                            rowCount: rowCount ?? 0,
-                                                                            queryString: query ?? '',
-                                                                            chartType: 'table',
-                                                                            dashboardName: destinationDashboard,
-                                                                        });
-                                                                        setIsSaveQueryModalOpen(true);
-                                                                    }, label: "Save query" })), isNewQueryEnabled && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" })), addToDashboardButtonLabel ===
-                                                                    'Add to dashboard' && (_jsx(ButtonComponent, { onClick: async () => {
-                                                                        onSaveChanges && onSaveChanges();
-                                                                        const isSelectStar = isSimpleSelectStarQuery(query ?? '');
-                                                                        let tables = [];
-                                                                        let customFieldColumns = [];
-                                                                        if (client &&
-                                                                            isSelectStar &&
-                                                                            schemaData.customFields) {
-                                                                            const { referencedTablesAndColumns } = await getReferencedTables(client, query ?? '', filteredSchema, isSelectStar);
-                                                                            tables = referencedTablesAndColumns.map((ref) => ref.name);
-                                                                            customFieldColumns = tables
-                                                                                .map((table) => {
-                                                                                return (schemaData.customFields?.[table] ?? []).map((field) => field.field);
-                                                                            })
-                                                                                .flat();
-                                                                        }
-                                                                        setTempReport({
-                                                                            ...tempReport,
-                                                                            id: TEMP_REPORT_ID,
-                                                                            rows,
-                                                                            columns: isSelectStar // if SELECT *, filter out custom fields from tabular view
-                                                                                ? // so Automatic Custom Fields can be applied
-                                                                                    columns.filter((col) => {
-                                                                                        return !customFieldColumns.includes(col.field);
-                                                                                    })
-                                                                                : columns,
-                                                                            includeCustomFields: isSelectStar,
-                                                                            columnInternal: columns,
-                                                                            rowCount: rowCount ?? 0,
-                                                                            queryString: query ?? '',
-                                                                            dashboardName: report?.dashboardName ??
-                                                                                destinationDashboard,
-                                                                        });
-                                                                        setIsChartBuilderOpen(true);
-                                                                    }, label: addToDashboardButtonLabel, disabled: !!errorMessage ||
-                                                                        !(lastSuccessfulQuery === query) ||
-                                                                        !query, tooltipText: !!errorMessage ||
-                                                                        !(lastSuccessfulQuery === query)
-                                                                        ? 'Please run a query'
-                                                                        : '' }))] }) }) }), _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        // height: '100%',
-                                                        padding: 0,
-                                                        margin: 0,
-                                                        border: 'none',
-                                                        outline: 'none',
-                                                    }, children: [errorMessage && (_jsx("div", { style: {
-                                                                fontFamily: theme?.fontFamily,
-                                                                color: theme?.primaryTextColor,
-                                                                fontSize: 15,
-                                                                fontWeight: '400',
-                                                                width: '100%',
-                                                            }, children: _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    justifyContent: 'space-between',
-                                                                    gap: 12,
-                                                                    background: 'rgba(0,0,0,0.02)', // TODO: change color
-                                                                    color: theme?.primaryTextColor,
-                                                                    fontFamily: theme?.fontFamily,
-                                                                    borderRadius: 6,
-                                                                    padding: 20,
-                                                                    marginBottom: 15,
-                                                                    width: '100%',
-                                                                    alignItems: 'center',
-                                                                }, children: [errorMessage, errorMessage !== 'No data found' &&
-                                                                        errorMessage !== 'No query found' &&
-                                                                        sqlPrompt.trim().length <= 500 &&
-                                                                        (!query || query?.trim().length <= 5000) &&
-                                                                        errorMessage.trim().length <= 1000 && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))] }) })), errorMessage || !displayTable ? null : (_jsx("div", { ref: tableRef, children: _jsx(TableComponent, { isLoading: sqlQueryLoading, rows: formattedRows, columns: columns, rowCount: rowCount, rowsPerPage: rowsPerPage, rowCountIsLoading: rowCountIsLoading, onPageChange: onPageChange, onSortChange: onSortChange, containerStyle: {
-                                                                    height: 'calc(100vh - max(210px, 20vh) - 310px)',
-                                                                    minHeight: `calc(${DEFAULT_ROWS_PER_PAGE} * ${ROW_HEIGHT}px + ${TABLE_TAB_HEIGHT}px)`, // at least 10 rows tall
-                                                                    maxHeight: 'calc(100vh - max(210px, 20vh) - 310px)',
-                                                                }, currentPage: currentPage, setCurrentPage: setCurrentPage }) }))] })] }) }), isChartBuilderEnabled && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            justifyContent: 'flex-end',
-                                            width: '100%',
-                                            gap: 12,
-                                            marginTop: 15,
-                                            marginBottom: 5,
-                                        }, children: [onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), addToDashboardButtonLabel !== 'Add to dashboard' && (_jsx(ButtonComponent, { onClick: async () => {
-                                                    onSaveChanges && onSaveChanges();
-                                                    setTempReport({
-                                                        ...tempReport,
-                                                        id: TEMP_REPORT_ID,
-                                                        rows,
-                                                        columns: columns,
-                                                        columnInternal: columns,
-                                                        rowCount: rowCount ?? 0,
-                                                        queryString: query ?? '',
-                                                        dashboardName: report?.dashboardName ?? destinationDashboard,
-                                                        // flags: flagsToAdd,
-                                                    });
-                                                    setIsChartBuilderOpen(true);
-                                                }, label: addToDashboardButtonLabel, disabled: !!errorMessage || !(lastSuccessfulQuery === query) }))] }))] })] }) }) })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, isAdmin: isAdminEnabled, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, tempReport: tempReport, reportId: report?.id, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, CheckboxComponent: CheckboxComponent, hideDateRangeFilter: true, hideDeleteButton: true, onClickChartElement: onClickChartElement, isEditingMode: true })), isSaveQueryModalOpen && (_jsx(ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSaveQueryComplete, destinationDashboard: SAVED_QUERIES_DASHBOARD, isAdmin: false, title: 'Save query', buttonLabel: 'Save query', tempReport: tempReport, reportId: report?.id, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, CheckboxComponent: CheckboxComponent, hideDateRangeFilter: true, hideDeleteButton: true, hideDiscardChanges: true, hideSQLQuery: false, onClickChartElement: onClickChartElement, isEditingMode: true }))] }));
-}
-const SQLEditorComponent = ({ query, schema, databaseType, clientName, setQuery, setEditorMounted, handleRunQuery, defineEditorTheme, setEditorTheme, runQueryOnMount = false, theme, loading, LoadingComponent = QuillLoadingComponent, }) => {
-    const [editorKey, setEditorKey] = useState(0);
-    const { eventTracking } = useContext(EventTrackingContext);
-    const currentProvider = useRef(null);
-    useEffect(() => {
-        if (currentProvider.current) {
-            currentProvider.current.dispose();
-            if (schema && schema.length !== 0) {
-                setEditorKey((prevKey) => prevKey + 1);
-            }
-        }
-        return () => {
-            currentProvider.current?.dispose();
-        };
-    }, [schema, clientName, databaseType]);
-    return (_jsx("div", { style: {
-            // maxHeight: 700,
-            width: '100%',
-            height: '100%',
-            // minWidth: 450,
-            // overflowY: "scroll",
-            // padding: "20px 30px 20px 20px",
-            // marginLeft: 20,
-            display: 'flex',
-            flexDirection: 'column',
-            borderTopLeftRadius: 6,
-            borderBottomLeftRadius: 6,
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            overflow: 'hidden',
-        }, children: loading ? (_jsx("div", { style: {
-                height: '100%',
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: '#F9F9F9',
-            }, children: _jsx(LoadingComponent, {}) })) : (_jsx(MonacoEditor, { height: "100%", width: "100%", defaultLanguage: clientName, defaultValue: "", language: clientName, value: query, loading: _jsx("div", {}), options: {
-                wordWrap: 'on',
-                minimap: {
-                    enabled: false,
-                },
-                padding: { top: 16 },
-            }, onChange: (query) => setQuery(query || ''), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: (_editor, monaco) => {
-                currentProvider.current = setEditorTheme(_editor, monaco, schema, databaseType, clientName, eventTracking);
-                setEditorMounted();
-                if (runQueryOnMount) {
-                    handleRunQuery();
-                }
-                _editor.focus();
-            } }, editorKey)) }));
-};
-export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick, style, onRequestAddVirtualTable, ButtonComponent = MemoizedButton, }) => {
-    if (loading) {
-        return (_jsxs("div", { style: {
-                // maxHeight: 700,
-                width: width || 250,
-                minWidth: 250,
-                // overflowY: 'scroll',
-                height: '100%',
-                // maxHeight: "100%",
-                paddingLeft: 20,
-                paddingRight: 30,
-                paddingTop: 40,
-                display: 'flex',
-                // alignItems: 'center',
-                justifyContent: 'center',
-                ...style,
-            }, children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
-    }
-    return (_jsx("div", { style: {
-            // maxHeight: 700,
-            width: width || 250,
-            maxWidth: 350,
-            minWidth: 250,
-            overflowY: 'auto',
-            height: '100%',
-            // maxHeight: "100%",
-            paddingLeft: 20,
-            paddingRight: 30,
-        }, children: schema.length > 0 ? (schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index, onClick: onClick }, elem.displayName + index)))) : (_jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                paddingTop: 20,
-                gap: 20,
-                height: '100%',
-            }, children: [_jsx("span", { style: {
-                        fontFamily: theme?.fontFamily,
-                        fontSize: theme?.fontSize,
-                        color: theme?.secondaryTextColor,
-                        textAlign: 'center',
-                    }, children: "No tables found for the current tenant" }), onRequestAddVirtualTable && (_jsx(ButtonComponent, { onClick: onRequestAddVirtualTable, label: "Add Table" }))] })) }));
-};
-function SchemaItem({ elem, theme, index, onClick, }) {
-    const [isOpen, setIsOpen] = useState(index === 0);
-    const schemaContainerStyle = {
-        display: 'flex',
-        flexDirection: 'column',
-        // WebkitTouchCallout: "none",
-        // WebkitUserSelect: "none",
-        // KhtmlUserSelect: "none",
-        // MozUserSelect: "none",
-        // msUserSelect: "none",
-        // userSelect: "none",
-    };
-    const schemaRowStyle = {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-        justifyContent: 'space-between',
-    };
-    const schemaRowHoverStyle = {
-        background: theme.selectUnderlayColor,
-    };
-    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: {
-                    cursor: 'pointer',
-                    ...schemaRowStyle,
-                    ...(isOpen && schemaRowHoverStyle),
-                }, onClick: () => setIsOpen(!isOpen), children: [_jsxs("div", { className: "schema-item", style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            overflow: 'hidden',
-                        }, onClick: (event) => {
-                            event.stopPropagation();
-                            const newEvent = {
-                                target: { textContent: elem.displayName },
-                            };
-                            onClick(newEvent);
-                        }, children: [_jsx("p", { style: {
-                                    marginLeft: theme.padding,
-                                    fontSize: 13,
-                                    color: theme.primaryTextColor ?? '#384151',
-                                    fontWeight: '500',
-                                    whiteSpace: 'nowrap',
-                                    padding: 0,
-                                    margin: 0,
-                                    textOverflow: 'ellipsis',
-                                    overflow: 'hidden',
-                                    userSelect: 'none',
-                                    fontFamily: theme?.fontFamily,
-                                    width: '100%',
-                                }, title: elem.displayName, children: elem.displayName }), _jsx("style", { children: `
-              .schema-item svg {
-          opacity: 0;
-              }
-              .schema-item:hover svg {
-          opacity: 1;
-              }
-            ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: "currentColor", viewBox: "0 0 16 16", style: {
-                                    overflow: 'visible',
-                                    marginLeft: 5,
-                                    marginRight: 5,
-                                }, children: _jsx("path", { fillRule: "evenodd", d: "M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" }) })] }), _jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            // paddingRight: 25,
-                            paddingTop: 12,
-                            paddingBottom: 12,
-                            paddingLeft: 0,
-                            userSelect: 'none',
-                        }, children: isOpen ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, color: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z", clipRule: "evenodd" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, color: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) })) })] }), isOpen ? (_jsx("div", { style: {
-                    paddingBottom: theme.padding,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    paddingLeft: theme.padding,
-                    paddingRight: theme.padding,
-                }, children: elem.columns.map((elem, index) => (_jsxs("div", { style: {
-                        paddingTop: theme.padding,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [_jsx("div", { title: elem.field, 
-                            // className="text-gray-500"
-                            style: {
-                                fontSize: 12,
-                                //   color: theme.secondaryFontColor,
-                                whiteSpace: 'nowrap',
-                                color: theme.secondaryTextColor,
-                                // color: "#6C727F",
-                                padding: 0,
-                                margin: 0,
-                                textOverflow: 'ellipsis',
-                                overflow: 'hidden',
-                                width: 200,
-                                maxWidth: 200,
-                                fontFamily: theme?.fontFamily,
-                            }, children: elem.field ?? elem.columnName }), _jsx("div", { 
-                            // className="text-gray-500"
-                            title: elem.field, style: {
-                                fontSize: 12,
-                                // color: '#6C727F',
-                                color: theme.secondaryTextColor,
-                                padding: 0,
-                                margin: 0,
-                                fontFamily: theme?.fontFamily,
-                            }, children: elem.fieldType })] }, elem.field + index))) })) : null] }));
-}