@quillsql/react 2.11.28 → 2.11.30

package/dist/esm/ReportBuilder.js

@@ -20,7 +20,6 @@ import { DATE_FMT, DAY_OF_WEEK, defaultAST, defaultBoolComparison, defaultColumn
 import AddColumnModal from './components/ReportBuilder/AddColumnModal';
 import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
 import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
-import { PivotCard } from './internals/ReportBuilder/PivotList';
 import { snakeCaseToTitleCase } from './utils/textProcessing';
 import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
 import { updateFirstChildWidth } from './utils/width';
@@ -33,7 +32,8 @@ import { getUniqueValuesByColumns } from './utils/tableProcessing';
 import { useQuill } from './hooks/useQuill';
 import { getDataFromCloud } from './utils/dataFetcher';
 import { convertColumnInfoToColumnInternal, convertPostgresColumn, } from './utils/columnProcessing';
-import { processStarColumn } from './utils/astProcessing';
+import { getSelectFromAST, processApostrophe, processStarColumn, } from './utils/astProcessing';
+import PivotForm from './internals/ReportBuilder/PivotForm';
 export const QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
@@ -66,7 +66,7 @@ export const QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-3444
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, }) {
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, }) {
     const { data: dashboardItem } = useQuill(reportId || '');
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
@@ -100,6 +100,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [initalChartLoad, setInitalChartLoad] = useState(false);
+    const [askedAQuestion, setAskedAQuestion] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!reportId);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
@@ -139,6 +140,31 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             window.removeEventListener('resize', handleResize);
         };
     }, []);
+    const updatePivot = (changeField, fieldKey) => {
+        const newPivot = pivot;
+        // @ts-ignore
+        newPivot[fieldKey] = changeField;
+        if (fieldKey === 'rowField') {
+            // check to see if the new rowField value is a date field
+            const column = columns.find((c) => c.field === changeField);
+            if (column?.jsType === 'date') {
+                newPivot.rowFieldType = 'date';
+                newPivot.sort = 'true';
+                newPivot.sortField = changeField;
+                newPivot.sortFieldType = column.format;
+                newPivot.sortDirection = 'ASC';
+            }
+            else {
+                newPivot.rowFieldType = 'string';
+                newPivot.sort = undefined;
+            }
+        }
+        setPivot(newPivot);
+        const pivotedData = generatePivotTable(newPivot, rows, undefined, false);
+        setPivotData(pivotedData || []);
+        const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
+        setFormattedRows(formattedRows);
+    };
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -157,6 +183,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         // This shouldn't be an issue since the dispatches shouldn't block, but
         // this seems to work for now. ¯\_(ツ)_/¯
         setTimeout(() => {
+            setAskedAQuestion(false);
             setAiPrompt('');
             setBaseAst(null);
             setFormData(null);
@@ -209,7 +236,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     }
                     else {
                         format = DATE_FORMAT_TYPES.includes(column.format)
-                            ? 'date'
+                            ? 'MMM_yyyy'
                             : 'string';
                     }
                     const formattedValue = quillFormat({
@@ -368,6 +395,96 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             return null;
         }
     };
+    const loadTable = async (tables) => {
+        if (!tables)
+            return;
+        setLoading(true);
+        const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
+        if (tableInfo) {
+            const convertedStringColumns = tableInfo.columns
+                .filter((column) => {
+                return isTextColumnType(column.fieldType);
+            })
+                .map((column) => convertColumnInfoToColumnInternal(column));
+            const stringNames = convertedStringColumns.map((column) => column.field);
+            const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+            const joinedUniqueValues = deepCopy(uniqueValues);
+            joinedUniqueValues[initialTableName] = newUniqueValues;
+            if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
+                setUniqueValues(joinedUniqueValues);
+            }
+        }
+        const columnsForTable = tables
+            .find((t) => t.name === initialTableName)
+            ?.columns.map((c) => c.name)
+            .sort((a, b) => {
+            const aIsId = a.endsWith('.id') ||
+                a.endsWith('_id') ||
+                a.endsWith('Id') ||
+                a === 'id';
+            const bIsId = b.endsWith('.id') ||
+                b.endsWith('_id') ||
+                b.endsWith('Id') ||
+                b === 'id';
+            if (aIsId && !bIsId)
+                return 1;
+            if (bIsId && !aIsId)
+                return -1;
+            return 0;
+        });
+        await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
+        setInitialLoad(false);
+    };
+    const fetchSchema = async () => {
+        try {
+            setLoadingSchema(true);
+            const response = await fetch(`${client.queryEndpoint}`, {
+                method: 'POST',
+                headers: {
+                    ...client.queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        clientId: client.publicKey,
+                        publicKey: client.publicKey,
+                        task: 'schema',
+                        removeCustomerField: true,
+                    },
+                }),
+            });
+            const results = await response.json();
+            // Filter out hidden columns on tables back from schema2.
+            const tables = results.data.tables || results.data.data.tables;
+            setSchemaTables(tables ?? []);
+            setOrderedColumnNames((tables ?? []).flatMap((table) => table.columns
+                .map((c) => `${table.name}.${c.name}`)
+                .sort((a, b) => {
+                const aIsId = a.endsWith('.id') ||
+                    a.endsWith('_id') ||
+                    a.endsWith('Id') ||
+                    a === 'id';
+                const bIsId = b.endsWith('.id') ||
+                    b.endsWith('_id') ||
+                    b.endsWith('Id') ||
+                    b === 'id';
+                if (aIsId && !bIsId)
+                    return 1;
+                if (bIsId && !aIsId)
+                    return -1;
+                return 0;
+            })));
+            if (initialTableName) {
+                await loadTable(tables);
+            }
+            setLoadingSchema(false);
+            setInitialLoad(false);
+            return tables;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
     useEffect(() => {
         const loadChart = async () => {
             setInitalChartLoad(true);
@@ -382,12 +499,22 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             const resp = await getDataFromCloud(client, `astify`, {
                 query: dashboardItem.queryString,
             });
-            const ast = resp.ast.select ? resp.ast.select : resp.ast;
-            const initialRows = await fetchUponChange(ast, undefined);
-            const convertedAst = processStarColumn(ast, dashboardItem.columns);
-            setBaseAst(convertedAst);
-            setFormData(deepCopy(convertedAst.where));
+            const ast = getSelectFromAST(resp.ast);
+            let convertedAst = processStarColumn(ast, dashboardItem.columns);
+            processApostrophe(convertedAst, ['type', 'value']);
+            convertedAst = convertBigQuery(convertedAst);
+            let schemaInfo = schemaTables.length !== 0 ? schemaTables : await fetchSchema();
+            let newAst, groupByPivot;
+            ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(convertedAst, 
+            // @ts-ignore
+            dashboardItem.pivot, schemaInfo));
+            if (convertedAst.where) {
+                setFormData(deepCopy(convertedAst.where));
+            }
             setActiveQuery(dashboardItem.queryString);
+            newAst = groupByPivot ? newAst : convertedAst;
+            setBaseAst(newAst);
+            const initialRows = await fetchUponChange(newAst, undefined);
             // const initialRows = await handleAsk(dashboardItem.queryString);
             const stringColumns = dashboardItem.columns.filter((column) => {
                 return column.format === 'string';
@@ -399,21 +526,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 joinedUniqueValues[tableName] = newUniqueValues;
                 setUniqueValues(joinedUniqueValues);
             }
-            if (dashboardItem.pivot) {
+            if (groupByPivot) {
+                // @ts-ignore
+                setPivotRowField(groupByPivot.rowField);
                 // @ts-ignore
-                setPivotRowField(dashboardItem.pivot.rowField);
+                setPivotAggregation(groupByPivot.aggregationType);
                 // @ts-ignore
-                setPivotAggregation(dashboardItem.pivot.aggregationType);
+                setPivotColumnField(groupByPivot.columnField);
                 // @ts-ignore
-                setPivotColumnField(dashboardItem.pivot.columnField);
+                setPivotValueField(groupByPivot.valueField);
+                setPivot(groupByPivot);
+                const pivotedData = generatePivotTable(
                 // @ts-ignore
-                setPivotValueField(dashboardItem.pivot.valueField);
-                setPivot(dashboardItem.pivot);
-                const pivotedData = generatePivotTable(dashboardItem.pivot, initialRows, undefined, false);
+                groupByPivot, initialRows, undefined, false);
                 setPivotData(pivotedData || []);
                 const formattedRows = formatRows(pivotedData.rows, dashboardItem.columns, true, 
                 // @ts-ignore
-                dashboardItem.pivot.aggregationType);
+                groupByPivot.aggregationType);
                 setFormattedRows(formattedRows);
             }
             else {
@@ -431,95 +560,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         }
     }, [dashboardItem]);
     useEffect(() => {
-        const loadTable = async (tables) => {
-            if (!tables)
-                return;
-            setLoading(true);
-            const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
-            if (tableInfo) {
-                const convertedStringColumns = tableInfo.columns
-                    .filter((column) => {
-                    return isTextColumnType(column.fieldType);
-                })
-                    .map((column) => convertColumnInfoToColumnInternal(column));
-                const stringNames = convertedStringColumns.map((column) => column.field);
-                const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
-                const joinedUniqueValues = deepCopy(uniqueValues);
-                joinedUniqueValues[initialTableName] = newUniqueValues;
-                if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
-                    setUniqueValues(joinedUniqueValues);
-                }
-            }
-            const columnsForTable = tables
-                .find((t) => t.name === initialTableName)
-                ?.columns.map((c) => c.name)
-                .sort((a, b) => {
-                const aIsId = a.endsWith('.id') ||
-                    a.endsWith('_id') ||
-                    a.endsWith('Id') ||
-                    a === 'id';
-                const bIsId = b.endsWith('.id') ||
-                    b.endsWith('_id') ||
-                    b.endsWith('Id') ||
-                    b === 'id';
-                if (aIsId && !bIsId)
-                    return 1;
-                if (bIsId && !aIsId)
-                    return -1;
-                return 0;
-            });
-            await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
-            setInitialLoad(false);
-        };
-        const fetchSchema = async () => {
-            try {
-                setLoadingSchema(true);
-                const response = await fetch(`${client.queryEndpoint}`, {
-                    method: 'POST',
-                    headers: {
-                        ...client.queryHeaders,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        metadata: {
-                            clientId: client.publicKey,
-                            publicKey: client.publicKey,
-                            task: 'schema',
-                            removeCustomerField: true,
-                        },
-                    }),
-                });
-                const results = await response.json();
-                // Filter out hidden columns on tables back from schema2.
-                const tables = results.data.tables || results.data.data.tables;
-                setSchemaTables(tables ?? []);
-                setOrderedColumnNames((tables ?? []).flatMap((table) => table.columns
-                    .map((c) => `${table.name}.${c.name}`)
-                    .sort((a, b) => {
-                    const aIsId = a.endsWith('.id') ||
-                        a.endsWith('_id') ||
-                        a.endsWith('Id') ||
-                        a === 'id';
-                    const bIsId = b.endsWith('.id') ||
-                        b.endsWith('_id') ||
-                        b.endsWith('Id') ||
-                        b === 'id';
-                    if (aIsId && !bIsId)
-                        return 1;
-                    if (bIsId && !aIsId)
-                        return -1;
-                    return 0;
-                })));
-                if (initialTableName) {
-                    await loadTable(tables);
-                }
-                setLoadingSchema(false);
-                setInitialLoad(false);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        };
         if (schemaTables.length === 0) {
             fetchSchema();
         }
@@ -1967,6 +2007,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         try {
             let errored = false;
             setLoading(true);
+            setAskedAQuestion(true);
             setErrorMessage('');
             let res, data, ast;
             let numRetries = 0;
@@ -2281,20 +2322,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                         if (!openPopover) {
                                             setOpenPopover('AddColumnModal');
                                         }
-                                    }, label: 'Select columns' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                    }, label: 'Select columns' }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
-                                            setIsPending(false);
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
+                                            // delay onClose callback so onClick no-ops
+                                            setTimeout(() => {
+                                                setIsPending(false);
+                                                setActiveEditItem(null);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                            }, 100);
                                         }
-                                    }, popoverTitle: "Select columns", popoverChildren: _jsx(AddColumnModal, { onSave: () => {
+                                    }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
                                             setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
-                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
-                                            setBaseAst(newAst);
-                                            fetchSqlQuery(newAst);
+                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                            setBaseAst(ast);
+                                            fetchSqlQuery(ast);
                                         }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
@@ -2418,25 +2462,14 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                         setPivotData(pivotedData || []);
                                         const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
                                         setFormattedRows(formattedRows);
-                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
-                                        pivot: pivot,
-                                        rows: pivotData?.rows || [],
-                                        columns: pivotData?.columns || [],
-                                    }, theme: theme, index: 0, onSelectPivot: () => {
-                                        setIsEdittingPivot(true);
-                                        setShowPivotPopover(true);
-                                        setPivotRowField(pivot?.rowField);
-                                        setPivotColumnField(pivot?.columnField);
-                                        setPivotValueField(pivot?.valueField);
-                                        setPivotAggregation(pivot?.aggregationType);
-                                        setPivotPopUpTitle('Edit pivot');
-                                    }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                        setPivotRowField(value);
+                                    }, setPivotColumnField: setPivotColumnField, setPivotValueField: setPivotValueField, setPivotAggregation: setPivotAggregation, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, onDelete: () => {
                                         setPivot(null);
-                                        setPivotData(null);
+                                        setPivotData([]);
                                         const formattedRows = formatRows(rows, columns, false);
                                         setFormattedRows(formattedRows);
-                                        setBaseAst(deepCopy(baseAst)); // trigger refetch
-                                    }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                    }, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 8,
@@ -2565,7 +2598,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                 visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
                                     ? 'hidden'
                                     : 'visible',
-                            }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
+                            }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: askedAQuestion
                                             ? 'Ask a follow-up question...'
                                             : 'Ask a question...', width: askAIInputWidth !== -1
                                             ? askAIInputWidth
@@ -2575,443 +2608,445 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(ButtonComponent, { label: dashboardItem ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), !hideCopySQL && (_jsx(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' })), _jsx(ButtonComponent, { label: dashboardItem ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
     }
-    return (_jsxs("div", { ref: parentRef, style: {
-            display: 'flex',
-            flexDirection: 'row',
-            height: '100%',
-            overflowY: 'auto',
-            boxSizing: 'border-box',
-            ...containerStyle,
-        }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                    if (loadingSchema)
-                                        return;
-                                    if (!orderedColumnNames) {
-                                        return;
-                                    }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddColumnModal');
-                                    }
-                                }, label: "Select columns" }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
-                                    if (!isOpen) {
-                                        // delay onClose callback so onClick no-ops
-                                        setTimeout(() => {
-                                            setIsPending(false);
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                        }, 100);
-                                    }
-                                }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
-                                        setActiveEditItem(null);
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                    }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
-                                        setBaseAst(ast);
-                                        fetchSqlQuery(ast);
-                                    }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'flex-start',
-                                }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
-                                            if (!selectedColumns ||
-                                                selectedColumns.length === 0 ||
-                                                loading) {
+    return (_jsxs("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
+                (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsxs("div", { ref: parentRef, style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    height: '100%',
+                    overflowY: 'auto',
+                    boxSizing: 'border-box',
+                    ...containerStyle,
+                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                            if (loadingSchema)
+                                                return;
+                                            if (!orderedColumnNames) {
                                                 return;
                                             }
                                             if (!openPopover) {
-                                                const value = orderedColumnNames[0];
-                                                const [_table, column] = value.split('.');
-                                                const columnType = getColumnTypeByName(column);
-                                                if (isNumericColumnType(columnType)) {
-                                                    const newSubtree = deepCopy(defaultNumericComparison);
-                                                    newSubtree.left.column = column;
-                                                    setActiveEditItem(newSubtree);
-                                                }
-                                                else {
-                                                    const newSubtree = deepCopy(defaultEntry);
-                                                    newSubtree.left.args.value[0].column = column;
-                                                    setActiveEditItem(newSubtree);
-                                                }
-                                                setOpenPopover('AddFilterPopover');
-                                                setActivePath('');
-                                                setIsPending(true);
+                                                setOpenPopover('AddColumnModal');
                                             }
-                                        }, label: 'Add filter' }), _jsx("div", { style: {
-                                            position: 'relative',
-                                            ...(openPopover === 'AddFilterPopover' && { top: 12 }),
-                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
-                                                if (!isOpen) {
-                                                    // delay onClose callback so onClick no-ops
+                                        }, label: "Select columns" }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                            if (!isOpen) {
+                                                // delay onClose callback so onClick no-ops
+                                                setTimeout(() => {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
                                                     setOpenPopover(null);
-                                                    setTimeout(() => {
-                                                        setIsPending(false);
-                                                        setActivePath(null);
-                                                        clearCheckboxes();
-                                                        setActiveEditItem(null);
-                                                    }, 300);
-                                                }
-                                            }, popoverTitle: "Add filter", popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
-                                                    if (isNodeEmptyCollection(activeEditItem)) {
-                                                        setOpenPopover(null);
-                                                        clearCheckboxes();
-                                                        setIsPending(false);
-                                                        setTimeout(() => {
-                                                            setActivePath(null);
-                                                            setActiveEditItem(null);
-                                                        }, 300);
-                                                    }
-                                                    else {
-                                                        setOpenPopover(null);
-                                                        setIsPending(false);
-                                                        handleInsertion(activeEditItem, 'AND', false);
-                                                        setActivePath(null);
-                                                        setTimeout(() => {
-                                                            clearCheckboxes();
-                                                            setActiveEditItem(null);
-                                                        }, 300);
+                                                }, 100);
+                                            }
+                                        }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
+                                                setActiveEditItem(null);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                                setBaseAst(ast);
+                                                fetchSqlQuery(ast);
+                                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start',
+                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                    if (!selectedColumns ||
+                                                        selectedColumns.length === 0 ||
+                                                        loading) {
+                                                        return;
                                                     }
-                                                }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
-                                        false && ( // temp removed the AddConditionPopover
-                                    _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                     if (!openPopover) {
-                                                        setActiveEditItem(deepCopy(defaultEntry));
-                                                        setOpenPopover('AddConditionPopover');
+                                                        const value = orderedColumnNames[0];
+                                                        const [_table, column] = value.split('.');
+                                                        const columnType = getColumnTypeByName(column);
+                                                        if (isNumericColumnType(columnType)) {
+                                                            const newSubtree = deepCopy(defaultNumericComparison);
+                                                            newSubtree.left.column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        else {
+                                                            const newSubtree = deepCopy(defaultEntry);
+                                                            newSubtree.left.args.value[0].column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        setOpenPopover('AddFilterPopover');
                                                         setActivePath('');
                                                         setIsPending(true);
                                                     }
-                                                }, label: 'Add condition' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
-                                                    if (!isOpen) {
-                                                        // delay onClose callback so onClick no-ops
-                                                        setTimeout(() => {
-                                                            setIsPending(false);
-                                                            setActiveEditItem(null);
-                                                            setActivePath(null);
-                                                            setOpenPopover(null);
-                                                            clearCheckboxes();
-                                                        }, 200);
-                                                    }
-                                                }, popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
-                                                        if (isNodeEmptyCollection(activeEditItem)) {
-                                                            setIsPending(false);
-                                                            setTimeout(() => {
-                                                                setActiveEditItem(null);
-                                                            }, 300);
-                                                            setActivePath(null);
+                                                }, label: 'Add filter' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            // delay onClose callback so onClick no-ops
                                                             setOpenPopover(null);
-                                                            clearCheckboxes();
-                                                        }
-                                                        else {
-                                                            setIsPending(false);
-                                                            handleInsertion(activeEditItem, topLevelBinaryOperator, true);
                                                             setTimeout(() => {
+                                                                setIsPending(false);
+                                                                setActivePath(null);
+                                                                clearCheckboxes();
                                                                 setActiveEditItem(null);
                                                             }, 300);
-                                                            setActivePath(null);
-                                                            setOpenPopover(null);
-                                                            clearCheckboxes();
                                                         }
-                                                    } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                                    setPivot(null);
-                                    setPivotData(null);
-                                    const formattedRows = formatRows(rows, columns, false);
-                                    setFormattedRows(formattedRows);
-                                }, selectPivot: (pivot) => {
-                                    if (!pivot)
-                                        return;
-                                    const newAst = { ...baseAst };
-                                    newAst.orderby = null;
-                                    if (pivot.rowFieldType === 'date') {
-                                        pivot['sort'] = true;
-                                        pivot['sortDirection'] = 'ASC';
-                                    }
-                                    setBaseAst(newAst); // trigger refetch
-                                    setPivot(pivot);
-                                    const pivotedData = generatePivotTable(pivot, rows, undefined, false);
-                                    setPivotData(pivotedData || []);
-                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
-                                    setFormattedRows(formattedRows);
-                                    setErrorMessage('');
-                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
-                                    pivot: pivot,
-                                    rows: pivotData?.rows || [],
-                                    columns: pivotData?.columns || [],
-                                }, theme: theme, index: 0, onSelectPivot: () => {
-                                    setIsEdittingPivot(true);
-                                    setShowPivotPopover(true);
-                                    setPivotRowField(pivot?.rowField);
-                                    setPivotColumnField(pivot?.columnField);
-                                    setPivotValueField(pivot?.valueField);
-                                    setPivotAggregation(pivot?.aggregationType);
-                                    setPivotPopUpTitle('Edit pivot');
-                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
-                                    setPivot(null);
-                                    setPivotData(null);
-                                    const formattedRows = formatRows(rows, columns, false);
-                                    setFormattedRows(formattedRows);
-                                    setBaseAst(deepCopy(baseAst));
-                                }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: _jsx(SortSentence, { sortData: {
-                                        type: pivot.sortDirection,
-                                        expr: { type: 'column_ref', column: pivot.sortField },
-                                    }, columns: pivot
-                                        ? pivot.columnField
-                                            ? [`.${pivot.rowField}`]
-                                            : [
-                                                `.${pivot.rowField}`,
-                                                `.${pivot.valueField || 'count'}`,
-                                            ]
-                                        : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                        if (pivot) {
-                                            setPivot({ ...pivot, sort: false });
-                                            const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, undefined, false);
-                                            setPivotData(pivotedData || []);
-                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
+                                                            if (isNodeEmptyCollection(activeEditItem)) {
+                                                                setOpenPopover(null);
+                                                                clearCheckboxes();
+                                                                setIsPending(false);
+                                                                setTimeout(() => {
+                                                                    setActivePath(null);
+                                                                    setActiveEditItem(null);
+                                                                }, 300);
+                                                            }
+                                                            else {
+                                                                setOpenPopover(null);
+                                                                setIsPending(false);
+                                                                handleInsertion(activeEditItem, 'AND', false);
+                                                                setActivePath(null);
+                                                                setTimeout(() => {
+                                                                    clearCheckboxes();
+                                                                    setActiveEditItem(null);
+                                                                }, 300);
+                                                            }
+                                                        }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
+                                                false && ( // temp removed the AddConditionPopover
+                                            _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                            if (!openPopover) {
+                                                                setActiveEditItem(deepCopy(defaultEntry));
+                                                                setOpenPopover('AddConditionPopover');
+                                                                setActivePath('');
+                                                                setIsPending(true);
+                                                            }
+                                                        }, label: 'Add condition' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                            if (!isOpen) {
+                                                                // delay onClose callback so onClick no-ops
+                                                                setTimeout(() => {
+                                                                    setIsPending(false);
+                                                                    setActiveEditItem(null);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }, 200);
+                                                            }
+                                                        }, popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
+                                                                if (isNodeEmptyCollection(activeEditItem)) {
+                                                                    setIsPending(false);
+                                                                    setTimeout(() => {
+                                                                        setActiveEditItem(null);
+                                                                    }, 300);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }
+                                                                else {
+                                                                    setIsPending(false);
+                                                                    handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                                    setTimeout(() => {
+                                                                        setActiveEditItem(null);
+                                                                    }, 300);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }
+                                                            } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                            setPivot(null);
+                                            setPivotData(null);
+                                            const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                            setErrorMessage('');
-                                            return;
-                                        }
-                                        setBaseAst(deepCopy(baseAst));
-                                        fetchSqlQuery(deepCopy(baseAst));
-                                    }, onSave: (column, direction) => {
-                                        if (pivot) {
-                                            const sortFieldType = column === (pivot.valueField || 'count')
-                                                ? 'number'
-                                                : pivot.rowFieldType;
-                                            setPivot({
-                                                ...pivot,
-                                                sort: true,
-                                                sortDirection: direction,
-                                                sortField: column,
-                                                sortFieldType: sortFieldType,
-                                            });
-                                            const pivotedData = generatePivotTable({
-                                                ...pivot,
-                                                sort: true,
-                                                sortDirection: direction,
-                                                sortField: column,
-                                                sortFieldType: sortFieldType,
-                                            }, rows, undefined, false);
+                                        }, selectPivot: (pivot) => {
+                                            if (!pivot)
+                                                return;
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby = null;
+                                            if (pivot.rowFieldType === 'date') {
+                                                pivot['sort'] = true;
+                                                pivot['sortDirection'] = 'ASC';
+                                            }
+                                            setBaseAst(newAst); // trigger refetch
+                                            setPivot(pivot);
+                                            const pivotedData = generatePivotTable(pivot, rows, undefined, false);
                                             setPivotData(pivotedData || []);
                                             const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
                                             setFormattedRows(formattedRows);
                                             setErrorMessage('');
-                                            return;
-                                        }
-                                        setOpenPopover(null);
-                                        setBaseAst(deepCopy(baseAst));
-                                        fetchSqlQuery(deepCopy(baseAst));
-                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                        if (pivot) {
-                                            setPivot({ ...pivot, sort: false });
-                                            return;
-                                        }
-                                        const newAst = { ...baseAst };
-                                        newAst.orderby.splice(id, 1);
-                                        setBaseAst(deepCopy(newAst));
-                                        fetchSqlQuery(deepCopy(newAst));
-                                    }, onSave: (column, direction) => {
-                                        if (pivot) {
-                                            const sortFieldType = column === (pivot.valueField || 'count')
-                                                ? 'number'
-                                                : pivot.rowFieldType;
-                                            setPivot({
-                                                ...pivot,
-                                                sort: true,
-                                                sortDirection: direction,
-                                                sortField: column,
-                                                sortFieldType: sortFieldType,
-                                            });
-                                            return;
-                                        }
-                                        setIsPending(false);
-                                        setActiveEditItem(null);
-                                        setOpenPopover(null);
-                                        if (column === '')
-                                            return;
-                                        const newAst = { ...baseAst };
-                                        newAst.orderby[id] = {
-                                            expr: {
-                                                type: 'column_ref',
-                                                table: null,
-                                                column: column,
-                                            },
-                                            type: direction,
-                                        };
-                                        // look through the columns
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                        setBaseAst(deepCopy(newAst));
-                                        fetchSqlQuery(deepCopy(newAst));
-                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0) {
-                                        return;
-                                    }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddSortPopover');
-                                    }
-                                }, label: 'Add sort' }), _jsx("div", { style: {
-                                    position: 'relative',
-                                    ...(openPopover === 'AddSortPopover' && { top: 12 }),
-                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                                        if (!isOpen) {
-                                            setIsPending(false);
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                        }
-                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivot
-                                            ? pivot.columnField
-                                                ? [`.${pivot.rowField}`]
-                                                : [
-                                                    `.${pivot.rowField}`,
-                                                    `.${pivot.valueField || 'count'}`,
-                                                ]
-                                            : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
-                                            if (column === '')
-                                                return;
-                                            if (pivot) {
-                                                const sortFieldType = column === (pivot.valueField || 'count')
-                                                    ? 'number'
-                                                    : pivot.rowFieldType;
-                                                setPivot({
-                                                    ...pivot,
-                                                    sort: true,
-                                                    sortDirection: direction,
-                                                    sortField: column,
-                                                    sortFieldType: sortFieldType,
-                                                });
-                                                const pivotedData = generatePivotTable({
-                                                    ...pivot,
-                                                    sort: true,
-                                                    sortDirection: direction,
-                                                    sortField: column,
-                                                    sortFieldType: sortFieldType,
-                                                }, rows, undefined, false);
-                                                setErrorMessage('');
-                                                setPivotData(pivotedData || []);
-                                                const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
-                                                setFormattedRows(formattedRows);
-                                                setActivePath(null);
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                            setPivotRowField(value);
+                                            updatePivot(value, 'rowField');
+                                        }, setPivotColumnField: (value) => {
+                                            setPivotColumnField(value);
+                                            updatePivot(value, 'columnField');
+                                        }, setPivotValueField: (value) => {
+                                            setPivotValueField(value);
+                                            updatePivot(value, 'valueField');
+                                        }, setPivotAggregation: (value) => {
+                                            setPivotAggregation(value);
+                                            updatePivot(value, 'aggregationType');
+                                        }, onDelete: () => {
+                                            setPivot(null);
+                                            setPivotData([]);
+                                            const formattedRows = formatRows(rows, columns, false);
+                                            setFormattedRows(formattedRows);
+                                        }, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(SortSentence, { sortData: {
+                                                type: pivot.sortDirection,
+                                                expr: { type: 'column_ref', column: pivot.sortField },
+                                            }, columns: pivot
+                                                ? pivot.columnField
+                                                    ? [`.${pivot.rowField}`]
+                                                    : [
+                                                        `.${pivot.rowField}`,
+                                                        `.${pivot.valueField || 'count'}`,
+                                                    ]
+                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                if (pivot) {
+                                                    setPivot({ ...pivot, sort: false });
+                                                    const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, undefined, false);
+                                                    setPivotData(pivotedData || []);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    setFormattedRows(formattedRows);
+                                                    setErrorMessage('');
+                                                    return;
+                                                }
+                                                setBaseAst(deepCopy(baseAst));
+                                                fetchSqlQuery(deepCopy(baseAst));
+                                            }, onSave: (column, direction) => {
+                                                if (pivot) {
+                                                    const sortFieldType = column === (pivot.valueField || 'count')
+                                                        ? 'number'
+                                                        : pivot.rowFieldType;
+                                                    setPivot({
+                                                        ...pivot,
+                                                        sort: true,
+                                                        sortDirection: direction,
+                                                        sortField: column,
+                                                        sortFieldType: sortFieldType,
+                                                    });
+                                                    const pivotedData = generatePivotTable({
+                                                        ...pivot,
+                                                        sort: true,
+                                                        sortDirection: direction,
+                                                        sortField: column,
+                                                        sortFieldType: sortFieldType,
+                                                    }, rows, undefined, false);
+                                                    setPivotData(pivotedData || []);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    setFormattedRows(formattedRows);
+                                                    setErrorMessage('');
+                                                    return;
+                                                }
                                                 setOpenPopover(null);
                                                 setBaseAst(deepCopy(baseAst));
-                                                return;
-                                            }
-                                            const newAst = { ...baseAst };
-                                            if (!newAst.orderby)
-                                                newAst.orderby = [];
-                                            newAst.orderby.push({
-                                                expr: { type: 'column_ref', column },
-                                                type: direction,
-                                            });
-                                            // look through the columns
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            setBaseAst(deepCopy(newAst));
-                                            fetchSqlQuery(deepCopy(newAst));
-                                        } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? (_jsx("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
-                                        const newAst = { ...baseAst };
-                                        newAst.limit = null;
-                                        setBaseAst(deepCopy(newAst));
-                                        fetchSqlQuery(deepCopy(newAst));
-                                    }, onSave: (limit) => {
-                                        const newAst = { ...baseAst };
-                                        newAst.limit = {
-                                            seperator: '',
-                                            value: [
-                                                {
-                                                    type: 'number',
-                                                    value: limit,
-                                                },
-                                            ],
-                                        };
-                                        setOpenPopover(null);
-                                        setBaseAst(deepCopy(newAst));
-                                        fetchSqlQuery(deepCopy(newAst));
-                                    }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                fetchSqlQuery(deepCopy(baseAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                if (pivot) {
+                                                    setPivot({ ...pivot, sort: false });
+                                                    return;
+                                                }
+                                                const newAst = { ...baseAst };
+                                                newAst.orderby.splice(id, 1);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, onSave: (column, direction) => {
+                                                if (pivot) {
+                                                    const sortFieldType = column === (pivot.valueField || 'count')
+                                                        ? 'number'
+                                                        : pivot.rowFieldType;
+                                                    setPivot({
+                                                        ...pivot,
+                                                        sort: true,
+                                                        sortDirection: direction,
+                                                        sortField: column,
+                                                        sortFieldType: sortFieldType,
+                                                    });
+                                                    return;
+                                                }
+                                                setIsPending(false);
+                                                setActiveEditItem(null);
+                                                setOpenPopover(null);
+                                                if (column === '')
+                                                    return;
+                                                const newAst = { ...baseAst };
+                                                newAst.orderby[id] = {
+                                                    expr: {
+                                                        type: 'column_ref',
+                                                        table: null,
+                                                        column: column,
+                                                    },
+                                                    type: direction,
+                                                };
+                                                // look through the columns
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
                                             if (!selectedColumns || selectedColumns.length === 0) {
                                                 return;
                                             }
-                                            if (!baseAst) {
-                                                return;
-                                            }
                                             if (!openPopover) {
-                                                setOpenPopover('AddLimitPopover');
+                                                setOpenPopover('AddSortPopover');
                                             }
-                                        }, label: 'Add limit' }), _jsx("div", { style: {
+                                        }, label: 'Add sort' }), _jsx("div", { style: {
                                             position: 'relative',
-                                            ...(openPopover === 'AddLimitPopover' && { top: 12 }),
-                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                            ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                                 if (!isOpen) {
                                                     setIsPending(false);
                                                     setActiveEditItem(null);
                                                     setActivePath(null);
                                                     setOpenPopover(null);
                                                 }
-                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivot
+                                                    ? pivot.columnField
+                                                        ? [`.${pivot.rowField}`]
+                                                        : [
+                                                            `.${pivot.rowField}`,
+                                                            `.${pivot.valueField || 'count'}`,
+                                                        ]
+                                                    : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
+                                                    if (column === '')
+                                                        return;
+                                                    if (pivot) {
+                                                        const sortFieldType = column === (pivot.valueField || 'count')
+                                                            ? 'number'
+                                                            : pivot.rowFieldType;
+                                                        setPivot({
+                                                            ...pivot,
+                                                            sort: true,
+                                                            sortDirection: direction,
+                                                            sortField: column,
+                                                            sortFieldType: sortFieldType,
+                                                        });
+                                                        const pivotedData = generatePivotTable({
+                                                            ...pivot,
+                                                            sort: true,
+                                                            sortDirection: direction,
+                                                            sortField: column,
+                                                            sortFieldType: sortFieldType,
+                                                        }, rows, undefined, false);
+                                                        setErrorMessage('');
+                                                        setPivotData(pivotedData || []);
+                                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                        setFormattedRows(formattedRows);
+                                                        setActivePath(null);
+                                                        setOpenPopover(null);
+                                                        setBaseAst(deepCopy(baseAst));
+                                                        return;
+                                                    }
                                                     const newAst = { ...baseAst };
-                                                    newAst.limit = {
-                                                        seperator: '',
-                                                        value: [
-                                                            {
-                                                                type: 'number',
-                                                                value: Number(limit),
-                                                            },
-                                                        ],
-                                                    };
+                                                    if (!newAst.orderby)
+                                                        newAst.orderby = [];
+                                                    newAst.orderby.push({
+                                                        expr: { type: 'column_ref', column },
+                                                        type: direction,
+                                                    });
+                                                    // look through the columns
+                                                    setActivePath(null);
                                                     setOpenPopover(null);
                                                     setBaseAst(deepCopy(newAst));
                                                     fetchSqlQuery(deepCopy(newAst));
-                                                } }) }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
-                            event.preventDefault();
-                            handleAsk();
-                        }, style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: 12,
-                            visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
-                                ? 'hidden'
-                                : 'visible',
-                        }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
-                                        ? askAIInputWidth
-                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
-                            ? pivotData?.columns || emptyPivotColumns()
-                            : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
-                                return { label: snakeCaseToTitleCase(c), field: c };
-                            }) })), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: '12px',
-                            width: '100%',
-                        }, children: [errorMessage ? (_jsxs("div", { style: {
+                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = null;
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, onSave: (limit) => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = {
+                                                    seperator: '',
+                                                    value: [
+                                                        {
+                                                            type: 'number',
+                                                            value: limit,
+                                                        },
+                                                    ],
+                                                };
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                                        return;
+                                                    }
+                                                    if (!baseAst) {
+                                                        return;
+                                                    }
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddLimitPopover');
+                                                    }
+                                                }, label: 'Add limit' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setActiveEditItem(null);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                            const newAst = { ...baseAst };
+                                                            newAst.limit = {
+                                                                seperator: '',
+                                                                value: [
+                                                                    {
+                                                                        type: 'number',
+                                                                        value: Number(limit),
+                                                                    },
+                                                                ],
+                                                            };
+                                                            setOpenPopover(null);
+                                                            setBaseAst(deepCopy(newAst));
+                                                            fetchSqlQuery(deepCopy(newAst));
+                                                        } }) }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                                    event.preventDefault();
+                                    handleAsk();
+                                }, style: {
                                     display: 'flex',
                                     flexDirection: 'row',
-                                    overflow: 'hidden',
-                                    width: '100%',
                                     gap: 12,
-                                }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
-                                            setIsChartBuilderOpen(true);
-                                        }, label: dashboardItem ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { dashboardItem: dashboardItem
+                                    visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                        ? 'hidden'
+                                        : 'visible',
+                                }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
+                                                ? askAIInputWidth
+                                                : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: askedAQuestion
+                                                ? 'Ask a follow-up question...'
+                                                : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
+                                    ? pivotData?.columns || emptyPivotColumns()
+                                    : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                        return { label: snakeCaseToTitleCase(c), field: c };
+                                    }) })), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '12px',
+                                    width: '100%',
+                                }, children: [errorMessage ? (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            overflow: 'hidden',
+                                            width: '100%',
+                                            gap: 12,
+                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && (_jsxs(_Fragment, { children: [!hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) })), _jsx(ButtonComponent, { onClick: () => {
+                                                    setIsChartBuilderOpen(true);
+                                                }, label: dashboardItem ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { dashboardItem: dashboardItem
                     ? {
                         ...dashboardItem,
                         pivot: pivot,
@@ -3026,5 +3061,5 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         queryString: activeQuery,
                         rows: rows,
                     }
-                    : undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: dashboardItem ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: dashboardItem ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: dashboardItem ? 'Save changes' : 'Add to dashboard' })] }));
+                    : undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: dashboardItem ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: dashboardItem ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: dashboardItem ? 'Save changes' : 'Add to dashboard' }))] }));
 }