@quillsql/react 2.11.28 → 2.11.30

package/dist/cjs/ReportBuilder.js

@@ -26,7 +26,6 @@ const constants_1 = require("./components/ReportBuilder/constants");
 const AddColumnModal_1 = __importDefault(require("./components/ReportBuilder/AddColumnModal"));
 const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
-const PivotList_1 = require("./internals/ReportBuilder/PivotList");
 const textProcessing_1 = require("./utils/textProcessing");
 const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
 const width_1 = require("./utils/width");
@@ -40,6 +39,7 @@ const useQuill_1 = require("./hooks/useQuill");
 const dataFetcher_2 = require("./utils/dataFetcher");
 const columnProcessing_1 = require("./utils/columnProcessing");
 const astProcessing_1 = require("./utils/astProcessing");
+const PivotForm_1 = __importDefault(require("./internals/ReportBuilder/PivotForm"));
 exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
@@ -72,7 +72,7 @@ exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, }) {
+function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, ChartBuilderModalComponent = UiComponents_1.MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, }) {
     const { data: dashboardItem } = (0, useQuill_1.useQuill)(reportId || '');
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
@@ -106,6 +106,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
     const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
     const [initalChartLoad, setInitalChartLoad] = (0, react_1.useState)(false);
+    const [askedAQuestion, setAskedAQuestion] = (0, react_1.useState)(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(!!initialTableName || !!reportId);
     const [currentTable, setCurrentTable] = (0, react_1.useState)(initialTableName || '');
@@ -145,6 +146,31 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             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 = (0, PivotModal_1.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;
@@ -163,6 +189,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
         // 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);
@@ -215,7 +242,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                     }
                     else {
                         format = valueFormatter_1.DATE_FORMAT_TYPES.includes(column.format)
-                            ? 'date'
+                            ? 'MMM_yyyy'
                             : 'string';
                     }
                     const formattedValue = (0, valueFormatter_1.quillFormat)({
@@ -374,6 +401,96 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             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 (0, ast_1.isTextColumnType)(column.fieldType);
+            })
+                .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+            const stringNames = convertedStringColumns.map((column) => column.field);
+            const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+            const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
+            joinedUniqueValues[initialTableName] = newUniqueValues;
+            if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.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);
+        }
+    };
     (0, react_1.useEffect)(() => {
         const loadChart = async () => {
             setInitalChartLoad(true);
@@ -388,12 +505,22 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             const resp = await (0, dataFetcher_2.getDataFromCloud)(client, `astify`, {
                 query: dashboardItem.queryString,
             });
-            const ast = resp.ast.select ? resp.ast.select : resp.ast;
-            const initialRows = await fetchUponChange(ast, undefined);
-            const convertedAst = (0, astProcessing_1.processStarColumn)(ast, dashboardItem.columns);
-            setBaseAst(convertedAst);
-            setFormData((0, util_1.deepCopy)(convertedAst.where));
+            const ast = (0, astProcessing_1.getSelectFromAST)(resp.ast);
+            let convertedAst = (0, astProcessing_1.processStarColumn)(ast, dashboardItem.columns);
+            (0, astProcessing_1.processApostrophe)(convertedAst, ['type', 'value']);
+            convertedAst = (0, convert_1.convertBigQuery)(convertedAst);
+            let schemaInfo = schemaTables.length !== 0 ? schemaTables : await fetchSchema();
+            let newAst, groupByPivot;
+            ({ ast: newAst, pivot: groupByPivot } = (0, convert_1.convertGroupBy)(convertedAst, 
+            // @ts-ignore
+            dashboardItem.pivot, schemaInfo));
+            if (convertedAst.where) {
+                setFormData((0, util_1.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';
@@ -405,21 +532,23 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                 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 = (0, PivotModal_1.generatePivotTable)(
                 // @ts-ignore
-                setPivotValueField(dashboardItem.pivot.valueField);
-                setPivot(dashboardItem.pivot);
-                const pivotedData = (0, PivotModal_1.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 {
@@ -437,95 +566,6 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
         }
     }, [dashboardItem]);
     (0, react_1.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 (0, ast_1.isTextColumnType)(column.fieldType);
-                })
-                    .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
-                const stringNames = convertedStringColumns.map((column) => column.field);
-                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
-                const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
-                joinedUniqueValues[initialTableName] = newUniqueValues;
-                if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.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();
         }
@@ -1973,6 +2013,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
         try {
             let errored = false;
             setLoading(true);
+            setAskedAQuestion(true);
             setErrorMessage('');
             let res, data, ast;
             let numRetries = 0;
@@ -2287,20 +2328,23 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                         if (!openPopover) {
                                             setOpenPopover('AddColumnModal');
                                         }
-                                    }, label: 'Select columns' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                    }, label: 'Select columns' }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { onSave: () => {
+                                    }, title: "Select columns", children: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { 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: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
@@ -2424,25 +2468,14 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                         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 && ((0, jsx_runtime_1.jsx)(PivotList_1.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 && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { 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((0, util_1.deepCopy)(baseAst)); // trigger refetch
-                                    }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 8,
@@ -2571,7 +2604,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                 visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
                                     ? 'hidden'
                                     : 'visible',
-                            }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
+                            }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: askedAQuestion
                                             ? 'Ask a follow-up question...'
                                             : 'Ask a question...', width: askAIInputWidth !== -1
                                             ? askAIInputWidth
@@ -2581,443 +2614,445 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: dashboardItem ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), !hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' })), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: dashboardItem ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
-            display: 'flex',
-            flexDirection: 'row',
-            height: '100%',
-            overflowY: 'auto',
-            boxSizing: 'border-box',
-            ...containerStyle,
-        }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                    if (loadingSchema)
-                                        return;
-                                    if (!orderedColumnNames) {
-                                        return;
-                                    }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddColumnModal');
-                                    }
-                                }, label: "Select columns" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { 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: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'flex-start',
-                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
-                                            if (!selectedColumns ||
-                                                selectedColumns.length === 0 ||
-                                                loading) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
+                (isChartBuilderHorizontalView && !isChartBuilderOpen)) && ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    height: '100%',
+                    overflowY: 'auto',
+                    boxSizing: 'border-box',
+                    ...containerStyle,
+                }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.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 ((0, ast_1.isNumericColumnType)(columnType)) {
-                                                    const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                                    newSubtree.left.column = column;
-                                                    setActiveEditItem(newSubtree);
-                                                }
-                                                else {
-                                                    const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
-                                                    newSubtree.left.args.value[0].column = column;
-                                                    setActiveEditItem(newSubtree);
-                                                }
-                                                setOpenPopover('AddFilterPopover');
-                                                setActivePath('');
-                                                setIsPending(true);
+                                                setOpenPopover('AddColumnModal');
                                             }
-                                        }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                            position: 'relative',
-                                            ...(openPopover === 'AddFilterPopover' && { top: 12 }),
-                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
-                                                if (!isOpen) {
-                                                    // delay onClose callback so onClick no-ops
+                                        }, label: "Select columns" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
-                                                    if ((0, util_1.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: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { 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: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start',
+                                        }, children: [(0, jsx_runtime_1.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
-                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
                                                     if (!openPopover) {
-                                                        setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
-                                                        setOpenPopover('AddConditionPopover');
+                                                        const value = orderedColumnNames[0];
+                                                        const [_table, column] = value.split('.');
+                                                        const columnType = getColumnTypeByName(column);
+                                                        if ((0, ast_1.isNumericColumnType)(columnType)) {
+                                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
+                                                            newSubtree.left.column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        else {
+                                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                                            newSubtree.left.args.value[0].column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        setOpenPopover('AddFilterPopover');
                                                         setActivePath('');
                                                         setIsPending(true);
                                                     }
-                                                }, label: 'Add condition' }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
-                                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
-                                                            setIsPending(false);
-                                                            setTimeout(() => {
-                                                                setActiveEditItem(null);
-                                                            }, 300);
-                                                            setActivePath(null);
+                                                }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                                }, children: (0, jsx_runtime_1.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();
                                                         }
-                                                    } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.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 = (0, PivotModal_1.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 && ((0, jsx_runtime_1.jsx)(PivotList_1.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((0, util_1.deepCopy)(baseAst));
-                                }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.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_1.AddSortPopover, handleDelete: () => {
-                                        if (pivot) {
-                                            setPivot({ ...pivot, sort: false });
-                                            const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, undefined, false);
-                                            setPivotData(pivotedData || []);
-                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    }, popoverTitle: "Add filter", popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
+                                                            if ((0, util_1.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
+                                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                            if (!openPopover) {
+                                                                setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
+                                                                setOpenPopover('AddConditionPopover');
+                                                                setActivePath('');
+                                                                setIsPending(true);
+                                                            }
+                                                        }, label: 'Add condition' }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
+                                                                if ((0, util_1.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();
+                                                                }
+                                                            } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.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((0, util_1.deepCopy)(baseAst));
-                                        fetchSqlQuery((0, util_1.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 = (0, PivotModal_1.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 = (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false);
                                             setPivotData(pivotedData || []);
                                             const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
                                             setFormattedRows(formattedRows);
                                             setErrorMessage('');
-                                            return;
-                                        }
-                                        setOpenPopover(null);
-                                        setBaseAst((0, util_1.deepCopy)(baseAst));
-                                        fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                        if (pivot) {
-                                            setPivot({ ...pivot, sort: false });
-                                            return;
-                                        }
-                                        const newAst = { ...baseAst };
-                                        newAst.orderby.splice(id, 1);
-                                        setBaseAst((0, util_1.deepCopy)(newAst));
-                                        fetchSqlQuery((0, util_1.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((0, util_1.deepCopy)(newAst));
-                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0) {
-                                        return;
-                                    }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddSortPopover');
-                                    }
-                                }, label: 'Add sort' }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: 'relative',
-                                    ...(openPopover === 'AddSortPopover' && { top: 12 }),
-                                }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                                        if (!isOpen) {
-                                            setIsPending(false);
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                        }
-                                    }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.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 = (0, PivotModal_1.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 && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { 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 }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.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_1.AddSortPopover, handleDelete: () => {
+                                                if (pivot) {
+                                                    setPivot({ ...pivot, sort: false });
+                                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, undefined, false);
+                                                    setPivotData(pivotedData || []);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    setFormattedRows(formattedRows);
+                                                    setErrorMessage('');
+                                                    return;
+                                                }
+                                                setBaseAst((0, util_1.deepCopy)(baseAst));
+                                                fetchSqlQuery((0, util_1.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 = (0, PivotModal_1.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((0, util_1.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((0, util_1.deepCopy)(newAst));
-                                            fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                        } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                    marginBottom: 12,
-                                }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
-                                        const newAst = { ...baseAst };
-                                        newAst.limit = null;
-                                        setBaseAst((0, util_1.deepCopy)(newAst));
-                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                    }, onSave: (limit) => {
-                                        const newAst = { ...baseAst };
-                                        newAst.limit = {
-                                            seperator: '',
-                                            value: [
-                                                {
-                                                    type: 'number',
-                                                    value: limit,
-                                                },
-                                            ],
-                                        };
-                                        setOpenPopover(null);
-                                        setBaseAst((0, util_1.deepCopy)(newAst));
-                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                    }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                fetchSqlQuery((0, util_1.deepCopy)(baseAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                                if (pivot) {
+                                                    setPivot({ ...pivot, sort: false });
+                                                    return;
+                                                }
+                                                const newAst = { ...baseAst };
+                                                newAst.orderby.splice(id, 1);
+                                                setBaseAst((0, util_1.deepCopy)(newAst));
+                                                fetchSqlQuery((0, util_1.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((0, util_1.deepCopy)(newAst));
+                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
                                             if (!selectedColumns || selectedColumns.length === 0) {
                                                 return;
                                             }
-                                            if (!baseAst) {
-                                                return;
-                                            }
                                             if (!openPopover) {
-                                                setOpenPopover('AddLimitPopover');
+                                                setOpenPopover('AddSortPopover');
                                             }
-                                        }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, label: 'Add sort' }), (0, jsx_runtime_1.jsx)("div", { style: {
                                             position: 'relative',
-                                            ...(openPopover === 'AddLimitPopover' && { top: 12 }),
-                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                            ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                                 if (!isOpen) {
                                                     setIsPending(false);
                                                     setActiveEditItem(null);
                                                     setActivePath(null);
                                                     setOpenPopover(null);
                                                 }
-                                            }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                            }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.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 = (0, PivotModal_1.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((0, util_1.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((0, util_1.deepCopy)(newAst));
                                                     fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                                } }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
-                            event.preventDefault();
-                            handleAsk();
-                        }, style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: 12,
-                            visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
-                                ? 'hidden'
-                                : 'visible',
-                        }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
-                            ? pivotData?.columns || emptyPivotColumns()
-                            : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
-                                return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
-                            }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: '12px',
-                            width: '100%',
-                        }, children: [errorMessage ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = null;
+                                                setBaseAst((0, util_1.deepCopy)(newAst));
+                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                            }, onSave: (limit) => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = {
+                                                    seperator: '',
+                                                    value: [
+                                                        {
+                                                            type: 'number',
+                                                            value: limit,
+                                                        },
+                                                    ],
+                                                };
+                                                setOpenPopover(null);
+                                                setBaseAst((0, util_1.deepCopy)(newAst));
+                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                                        return;
+                                                    }
+                                                    if (!baseAst) {
+                                                        return;
+                                                    }
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddLimitPopover');
+                                                    }
+                                                }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                                }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setActiveEditItem(null);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                            const newAst = { ...baseAst };
+                                                            newAst.limit = {
+                                                                seperator: '',
+                                                                value: [
+                                                                    {
+                                                                        type: 'number',
+                                                                        value: Number(limit),
+                                                                    },
+                                                                ],
+                                                            };
+                                                            setOpenPopover(null);
+                                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                                            fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                                        } }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                                    event.preventDefault();
+                                    handleAsk();
+                                }, style: {
                                     display: 'flex',
                                     flexDirection: 'row',
-                                    overflow: 'hidden',
-                                    width: '100%',
                                     gap: 12,
-                                }, children: [(0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
-                                            setIsChartBuilderOpen(true);
-                                        }, label: dashboardItem ? 'Save changes' : 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { dashboardItem: dashboardItem
+                                    visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                        ? 'hidden'
+                                        : 'visible',
+                                }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
+                                    ? pivotData?.columns || emptyPivotColumns()
+                                    : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                        return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
+                                    }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '12px',
+                                    width: '100%',
+                                }, children: [errorMessage ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            overflow: 'hidden',
+                                            width: '100%',
+                                            gap: 12,
+                                        }, children: [(0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                                                    setIsChartBuilderOpen(true);
+                                                }, label: dashboardItem ? 'Save changes' : 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { dashboardItem: dashboardItem
                     ? {
                         ...dashboardItem,
                         pivot: pivot,
@@ -3032,6 +3067,6 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                         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' }))] }));
 }
 exports.default = ReportBuilder;