@quillsql/react 2.11.9 → 2.11.13

package/dist/cjs/ReportBuilder.js

@@ -25,6 +25,9 @@ const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const PivotList_1 = require("./internals/ReportBuilder/PivotList");
 const QuillTable_1 = __importDefault(require("./components/QuillTable"));
+const QuillSelect_1 = require("./components/QuillSelect");
+const textProcessing_1 = require("./utils/textProcessing");
+const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
 /**
  * Quill Report Builder
  *
@@ -33,7 +36,7 @@ const QuillTable_1 = __importDefault(require("./components/QuillTable"));
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, TextInput = ui_1.QuillTextInput, Select = ui_1.QuillSelect, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, }) {
+function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, TextInput = ui_1.QuillTextInput, Select = QuillSelect_1.QuillSelectComponent, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -89,7 +92,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         return columns.map((col) => ({
             label: col,
             name: col,
-            displayName: col,
+            displayName: (0, textProcessing_1.snakeCaseToTitleCase)(col),
             field: col,
             format: (0, util_1.getPostgresBasicType)(fields.find((f) => f.name === col))?.replace('number', 'whole_number') || 'string',
             fieldType: schemaTables
@@ -121,6 +124,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             // setUniqueValues({});
             setPivot(null);
             setPivotData(null);
+            setRecommendedPivots([]);
         }, 0);
     };
     (0, react_1.useEffect)(() => {
@@ -248,14 +252,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        orgId: 2,
+                        orgId: client.customerId,
                         publicKey: client.publicKey,
                         query: query,
                     }),
                 });
                 const data = await response.json();
                 if (data.errorMessage) {
-                    console.error(data.errorMessage);
+                    // console.error(data.errorMessage);
                     return null;
                 }
                 const options = data.rows.map((r) => r[column]);
@@ -272,19 +276,36 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         };
         const fetchSchema = async () => {
             try {
-                const response = await fetch(`https://quill-344421.uc.r.appspot.com/schema2/${client.publicKey}`).then((res) => res.json());
+                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 = response?.tables;
-                for (const table of tables) {
-                    table.columns = table.columns.filter((column) => 
-                    // Quick and dirty fix for removing org ids from response.
-                    // TODO: Fix this on the backend or something.
-                    column.isVisible && column.displayName !== 'pm_company_id');
-                }
+                const tables = results.data.tables || results.data.data.tables;
                 setSchemaTables(tables ?? []);
-                setOrderedColumnNames((tables ?? [])
-                    // .filter((t: any) => t.displayName === initialTableName)
-                    .flatMap((table) => table.columns.map((c) => `${table.displayName}.${c.displayName}`)));
+                setOrderedColumnNames((tables ?? []).flatMap((table) => table.columns
+                    .map((c) => `${table.name}.${c.name}`)
+                    .sort((a, b) => {
+                    const aIsId = a.endsWith('.id') || a.endsWith('_id');
+                    const bIsId = b.endsWith('.id') || b.endsWith('_id');
+                    if (aIsId && !bIsId)
+                        return 1;
+                    if (bIsId && !aIsId)
+                        return -1;
+                    return 0;
+                })));
                 // Fetch all the unique values in parallel
                 const pendingFetches = [];
                 for (let table of tables ?? []) {
@@ -309,6 +330,12 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
                     setUniqueValues(newUniqueValues);
                 }
+                if (initialTableName) {
+                    const columnsForTable = tables
+                        .find((t) => t.name === initialTableName)
+                        ?.columns.map((c) => c.name);
+                    await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
+                }
             }
             catch (error) {
                 console.error(error);
@@ -611,6 +638,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
     };
     // Function to handle operator changes
     const handleOperatorChange = (value, node, keyPrefix, column = null) => {
+        if (!keyPrefix) {
+            setTopLevelBinaryOperator(value);
+        }
         if (isPending) {
             updateActiveItem([{ path: keyPrefix + 'operator', value }], { column });
         }
@@ -708,7 +738,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             'node.right.args.value.1.column') ??
                         (node.right?.args?.value[1]?.value &&
                             'node.right.args.value.1.value');
-                    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 20 }, children: [(0, jsx_runtime_1.jsx)(Select, { value: dateColumn, onChange: (value) => {
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 20 }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateColumn, onChange: (value) => {
                                     const columnType = getColumnTypeByName(value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
@@ -725,9 +755,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
                                 }, options: getAllPossibleColumns().map((column) => ({
-                                    label: column.displayName,
+                                    label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                                     value: column.name,
-                                })) }), (0, jsx_runtime_1.jsx)(Select, { value: dateFilterType, onChange: (value) => {
+                                })) }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
                                     if (value === dateFilterType)
                                         return null;
                                     let newSubtree = {};
@@ -773,7 +803,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                             path: keyPrefix + intervalPath,
                                         },
                                     ]));
-                                } })), (0, jsx_runtime_1.jsx)(Select, { value: intervalType, onChange: (value) => {
+                                } })), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: intervalType, onChange: (value) => {
                                     if (intervalPaths.length === 1) {
                                         handleChangeText([
                                             {
@@ -819,7 +849,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 else if ((0, util_1.isInTheLastInterval)(node, client.databaseType)) {
                     const { dateColumn, dateFilterType, intervalCount, intervalType } = (0, util_1.getDateFilterInfo)(node);
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                         value: column.name,
                     }));
                     const plural = node.right.args.value[1].expr.value > 1 ? 's' : '';
@@ -828,7 +858,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { value: node.left.column, onChange: (value) => {
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
                                         const columnType = getColumnTypeByName(value);
                                         if ((0, ast_1.isDateishColumnType)(columnType)) {
                                             // handleChange(value, keyPrefix + dateColumnPath, "text");
@@ -844,7 +874,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                             newSubtree.left.args.value[0].column = value;
                                             handleReplaceSubtree(keyPrefix, newSubtree);
                                         }
-                                    }, options: options }) }), (0, jsx_runtime_1.jsx)(Select, { value: dateFilterType, onChange: (value) => {
+                                    }, options: options }) }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, dateColumn);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
@@ -858,7 +888,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                             path: keyPrefix + 'right.args.value||1.expr.value',
                                         },
                                     ]);
-                                } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { value: node.right.args.value[1].unit, onChange: (value) => handleChange([
+                                } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.right.args.value[1].unit, onChange: (value) => handleChange([
                                         { value, path: keyPrefix + 'right.args.value||1.unit' },
                                     ]), options: [
                                         { label: `year${plural}`, value: '* 365 DAY' },
@@ -870,7 +900,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 else if ((0, util_1.isTheCurrentInterval)(node, client.databaseType)) {
                     const { dateFilterType } = (0, util_1.getDateFilterInfo)(node);
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                         value: column.name,
                     }));
                     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -878,7 +908,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)(Select, { value: node.left.column, onChange: (value) => {
+                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
                                     const columnType = getColumnTypeByName(value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
@@ -894,14 +924,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         newSubtree.left.args.value[0].column = value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { value: 'IN_THE_CURRENT', onChange: (value) => {
+                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_CURRENT', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(Select, { value: node.left.args.value[1].column, onChange: (value) => {
+                                ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     handleChange([
                                         { value, path: 'right.args.value||1.column' },
                                         { value, path: 'left.args.value||1.column' },
@@ -915,7 +945,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 }
                 else if ((0, util_1.isThePreviousInterval)(node, client.databaseType)) {
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                         value: column.name,
                     }));
                     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -923,7 +953,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)(Select, { value: node.left.column, onChange: (value) => {
+                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
                                     const columnType = getColumnTypeByName(value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
@@ -939,14 +969,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         newSubtree.left.args.value[0].column = value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, opt: true, options: options }), (0, jsx_runtime_1.jsx)(Select, { value: 'IN_THE_PREVIOUS', onChange: (value) => {
+                                }, opt: true, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(Select, { value: node.left.args.value[1].column, onChange: (value) => {
+                                ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     const dayConversion = {
                                         YEAR: 365,
                                         QUARTER: 90,
@@ -976,7 +1006,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 }
                 else if ((0, util_1.isColumnComparison)(node)) {
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                         value: column.name,
                     }));
                     // grab the value of the left child of the column comparison
@@ -1030,6 +1060,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             gap: 12,
                             flexDirection: 'column',
                             width: '100%',
+                            padding: '6px 0px',
                         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     gap: 20,
@@ -1038,7 +1069,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         ? 'row'
                                         : 'column',
                                     width: '100%',
-                                }, children: [(0, jsx_runtime_1.jsx)(Select, { style: { width: 'min-content' }, value: leftChildValue, onChange: (value) => {
+                                }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, style: { width: 'min-content' }, value: leftChildValue, onChange: (value) => {
                                             const columnType = getColumnTypeByName(value);
                                             if ((0, ast_1.isDateishColumnType)(columnType)) {
                                                 handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
@@ -1053,7 +1084,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                                 newSubtree.left.args.value[0].column = value;
                                                 handleReplaceSubtree(keyPrefix, newSubtree);
                                             }
-                                        }, options: options }), operatorOptions.length > 0 && ((0, jsx_runtime_1.jsx)(Select, { value: node.operator, onChange: (value) => {
+                                        }, options: options }), operatorOptions.length > 0 && ((0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.operator, onChange: (value) => {
                                             handleOperatorChange(value, node, keyPrefix, leftChildValue);
                                         }, style: { width: 'min-content' }, options: operatorOptions })), node.right &&
                                         node.right.type !== 'expr_list' &&
@@ -1083,7 +1114,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             justifyContent: 'space-between',
                             flexDirection: (0, util_1.showNodeAsRow)(node, formData) ? 'row' : 'column',
                             width: '100%',
-                        }, children: [node.left && renderNode(node.left, keyPrefix + 'left.'), (0, jsx_runtime_1.jsx)(Select, { value: node.operator, onChange: (value) => {
+                        }, children: [node.left && renderNode(node.left, keyPrefix + 'left.'), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.operator, onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix);
                                 }, style: { width: `100%` }, options: [
                                     // { label: `and`, value: "AND" },
@@ -1125,10 +1156,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 }
             case 'column_ref': {
                 const options = getAllPossibleColumns().map((column) => ({
-                    label: column.displayName,
+                    label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                     value: column.name,
                 }));
-                return ((0, jsx_runtime_1.jsx)(Select, { style: { width: '120px' }, value: node.column ?? options[0]?.value, onChange: (value) => {
+                return ((0, jsx_runtime_1.jsx)(Select, { theme: theme, style: { width: '120px' }, value: node.column ?? options[0]?.value, onChange: (value) => {
                         handleChange([{ value, path: keyPrefix + 'column' }]);
                     }, options: options }));
             }
@@ -1252,10 +1283,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         isInTheCurrentIntervalSentence ??
                         isInTheLastIntervalSentence ??
                         isInThePreviousIntervalSentence ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [node.left &&
-                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : topLevelBinaryOperator === 'OR' ? ((0, jsx_runtime_1.jsx)(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: Select })) : null, node.right &&
+                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : isTopLevel || topLevelBinaryOperator === 'OR' ? ((0, jsx_runtime_1.jsx)(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: Select })) : null, node.right &&
                                 renderSentence(formData, node.right, keyPrefix + 'right.', false, false, isRow)] })) }));
             case 'column_ref':
-                return node.column;
+                return (0, textProcessing_1.snakeCaseToTitleCase)(node.column);
             case 'expr_list':
                 if (node.value.length === 1) {
                     const subQuery = renderSentence(formData, node.value[0]);
@@ -1287,10 +1318,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     if (node.args.value.length < 1)
                         return null;
                     if (node.args.value[0].value) {
-                        return node.args.value[0].value.replaceAll('%', '');
+                        return (0, textProcessing_1.snakeCaseToTitleCase)(node.args.value[0].value.replaceAll('%', ''));
                     }
                     if (node.args.value[0].column)
-                        return node.args.value[0].column.replaceAll('%', '');
+                        return (0, textProcessing_1.snakeCaseToTitleCase)(node.args.value[0].column.replaceAll('%', ''));
                     return null;
                 }
                 if (node.name.toLowerCase() === 'current_date' ||
@@ -1327,10 +1358,22 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         const tableNamesInQuery = baseAst.from.map((tbl) => tbl.table);
         return schemaTables
             .filter((t) => tableNamesInQuery.includes(t.displayName))
-            .flatMap((table) => table.columns.map((c) => ({
+            .flatMap((table) => table.columns
+            .map((c) => ({
             ...c,
             table: table.displayName,
-        })));
+        }))
+            .sort((a, b) => {
+            const aIsId = a.name.toLowerCase() === 'id' ||
+                a.name.toLowerCase().endsWith('_id');
+            const bIsId = b.name.toLowerCase() === 'id' ||
+                b.name.toLowerCase().endsWith('_id');
+            if (aIsId && !bIsId)
+                return 1;
+            if (bIsId && !aIsId)
+                return -1;
+            return 0;
+        }));
     };
     const getDateColumns = () => {
         const allColumns = getAllPossibleColumns();
@@ -1381,26 +1424,6 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         },
         as: null,
     });
-    const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, }) => {
-        const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: id });
-        const style = {
-            transform: utilities_1.CSS.Transform.toString(transform),
-            transition,
-        };
-        const handleSelect = () => {
-            setSelectedColumns((selectedColumns) => {
-                if (selectedColumns.includes(id)) {
-                    return selectedColumns.filter((column) => column !== id);
-                }
-                else {
-                    return [...selectedColumns, id];
-                }
-            });
-        };
-        return ((0, jsx_runtime_1.jsx)("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(SelectColumn, { selected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        cursor: 'grab',
-                    }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(HandleButton, {}) }) }) }));
-    };
     const AddConditionPopover = ({ onSave }) => {
         return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                         fontWeight: '600',
@@ -1426,13 +1449,24 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     body: JSON.stringify({
                         ast: { ...baseAst, where: formData },
                         publicKey: client.publicKey,
-                        orgId: '2',
+                        orgId: client.customerId,
                     }),
                 });
                 const data2 = await res2.json();
                 if (data2.rows && data2.rows.length) {
                     const tables = (0, ast_1.getTableNames)(baseAst);
                     const table = tables.length >= 1 ? tables[0] : initialTableName;
+                    const sortedFields = data2.fields.sort((a, b) => {
+                        const aIsId = a.name.toLowerCase() === 'id' ||
+                            a.name.toLowerCase().endsWith('_id');
+                        const bIsId = b.name.toLowerCase() === 'id' ||
+                            b.name.toLowerCase().endsWith('_id');
+                        if (aIsId && !bIsId)
+                            return 1;
+                        if (bIsId && !aIsId)
+                            return -1;
+                        return 0;
+                    });
                     if (pivot) {
                         // Do all of this to make sure we have the right unique columns when applying a pivot
                         let uniqueFormatted = {};
@@ -1444,6 +1478,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
                         setPivotData(pivotedData);
+                        setRows(data2.rows);
+                        setFields(data2.fields);
                     }
                     else {
                         setRows(data2.rows);
@@ -1564,8 +1600,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         }
         return false;
     };
-    const handleAsk = async () => {
-        if (!aiPrompt) {
+    const handleAsk = async (overridePrompt = '') => {
+        if (!aiPrompt && !overridePrompt) {
             return;
         }
         try {
@@ -1584,7 +1620,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
-                            initialQuestion: aiPrompt,
+                            initialQuestion: aiPrompt || overridePrompt,
                             publicKey: client.publicKey,
                         }),
                     });
@@ -1621,11 +1657,21 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 newAst = (0, convert_1.convertBigQuery)(ast);
                 newAst = (0, convert_1.convertWildcardColumns)(newAst, schemaTables); // must go before groupby
                 ({ ast: newAst, pivot: groupByPivot } = (0, convert_1.convertGroupBy)(newAst, pivot, schemaTables));
+                if (groupByPivot && !groupByPivot?.valueField) {
+                    setErrorMessage("Error: Couldn't process your request, please re-word your prompt.");
+                    return;
+                }
                 newAst = (0, convert_1.convertStringComparison)(newAst, client.databaseType);
                 newAst = (0, convert_1.convertRemoveSimpleParentheses)(newAst);
+                const table = (0, ast_1.getTableNames)(newAst)[0] ?? initialTableName;
+                const tableAlias = (0, ast_1.getTableAliases)(newAst)[0] ?? initialTableName;
+                newAst = (0, util_1.removeNonSelectedTableReferences)(newAst, tableAlias ?? table);
                 // newAst = convertDateComparison(newAst); // TODO
                 ast = newAst; // so we fetch data for newAst later.
-                const table = (0, ast_1.getTableNames)(newAst)[0] ?? initialTableName;
+                setPivotRowField(groupByPivot?.rowField);
+                setPivotColumnField(groupByPivot?.columnField);
+                setPivotValueField(groupByPivot?.valueField);
+                setPivotAggregation(groupByPivot?.aggregationType);
                 setPivot(groupByPivot);
                 setSelectedColumns((0, util_1.deepCopy)(newAst).columns?.map((column) => {
                     if (column.expr.type === 'column_ref') {
@@ -1657,7 +1703,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 body: JSON.stringify({
                     ast: ast,
                     publicKey: client.publicKey,
-                    orgId: '2',
+                    orgId: client.customerId,
                 }),
             });
             const data2 = await res2.json();
@@ -1668,6 +1714,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
                     console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
                     setPivotData(pivotedData);
+                    setRows(data2.rows);
+                    setFields(data2.fields);
                 }
                 else {
                     setRows(data2.rows);
@@ -1731,7 +1779,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             transform: utilities_1.CSS.Transform.toString(transform),
             transition,
         };
-        return ((0, jsx_runtime_1.jsx)("div", { style: { ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(DraggableColumn, { label: label, onDelete: onDelete, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(DraggableColumn, { label: (0, textProcessing_1.snakeCaseToTitleCase)(label), onDelete: onDelete, children: (0, jsx_runtime_1.jsx)("div", { style: {
                         cursor: 'grab',
                     }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(HandleButton, {}) }) }) }));
     };
@@ -1792,24 +1840,17 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => ((0, jsx_runtime_1.jsx)(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } })] }) }) }));
     }
-    const allNumericColumns = getNumericColumns().map((column) => ({
-        label: column.displayName,
-        value: column.name,
-    }));
-    const allNonNumericColumns = getNonNumericColumns().map((column) => ({
-        label: column.displayName,
-        value: column.name,
-    }));
-    const allStringColumns = getStringColumns().map((column) => ({
-        label: column.displayName,
-        value: column.name,
-    }));
     if (loading) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', height: '100%' }, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                height: '100%',
+                ...containerStyle,
+            }, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
                                     if (!openPopover) {
                                         setOpenPopover('AddColumnPopover');
                                     }
-                                }, label: 'Select columns' }), title: "Select columns", onClose: () => {
+                                }, label: 'Select columns' }), label: "Select columns", onClose: () => {
                                 setIsPending(false);
                                 setActiveEditItem(null);
                                 setActivePath(null);
@@ -1922,7 +1963,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 newAst.orderby = null;
                                 setBaseAst(newAst); // trigger refetch
                                 setPivot(pivot);
-                            }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                            }, selectPivotOnEdit: true, showTrigger: !pivot || !pivotData, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3, SecondaryButtonComponent: SecondaryButton }), pivot && pivotData && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                 pivot: pivot,
                                 rows: pivotData?.rows || [],
                                 columns: pivotData?.columns || [],
@@ -1981,7 +2022,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     const newAst = { ...baseAst };
                                     newAst.orderby.splice(id, 1);
                                     setBaseAst((0, util_1.deepCopy)(newAst));
-                                } }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                } }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
                                     if (!openPopover) {
                                         setOpenPopover('AddSortPopover');
                                     }
@@ -1990,12 +2031,45 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setActiveEditItem(null);
                                 setActivePath(null);
                                 setOpenPopover(null);
-                            }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) })] }), (0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)("form", { style: {
+                            }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Limit" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), 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: SortPopover, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                    const newAst = { ...baseAst };
+                                    newAst.limit = null;
+                                    setBaseAst((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));
+                                } }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                    if (!openPopover) {
+                                        setOpenPopover('AddLimitPopover');
+                                    }
+                                }, label: 'Add limit' }), title: "Limit", onClose: () => {
+                                setIsPending(false);
+                                setActiveEditItem(null);
+                                setActivePath(null);
+                                setOpenPopover(null);
+                            }, children: (0, jsx_runtime_1.jsx)(TextInput, { value: 0, type: "number", style: { width: 120, minHeight: 32 }, onChange: (e) => { } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                                event.preventDefault();
+                            }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Ask a question...", type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), (0, jsx_runtime_1.jsx)(ButtonLoadingState, {}), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] }), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => { }, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2006,6 +2080,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             flexDirection: 'row',
             height: '100%',
             overflowY: 'auto',
+            boxSizing: 'border-box',
+            ...containerStyle,
         }, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', title: "Select columns", trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
                                 if (!openPopover) {
                                     setOpenPopover('AddColumnPopover');
@@ -2118,7 +2194,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                             setOpenPopover(null);
                                             clearCheckboxes();
                                         }
-                                    } }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (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: Select, ButtonComponent: Button, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                    } }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (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: Select, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                             setPivot(null);
                             setPivotData(null);
                         }, selectPivot: (pivot) => {
@@ -2126,9 +2202,13 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 return;
                             const newAst = { ...baseAst };
                             newAst.orderby = null;
+                            if (pivot.rowFieldType === 'date') {
+                                pivot['sort'] = true;
+                                pivot['sortDirection'] = 'ASC';
+                            }
                             setBaseAst(newAst); // trigger refetch
                             setPivot(pivot);
-                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                        }, selectPivotOnEdit: true, showTrigger: !pivot || !pivotData, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && pivotData && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                             pivot: pivot,
                             rows: pivotData?.rows || [],
                             columns: pivotData?.columns || [],
@@ -2229,28 +2309,78 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setActivePath(null);
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
-                            } }) })] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleAsk, style: {
+                            } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Limit" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), 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: SortPopover, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                const newAst = { ...baseAst };
+                                newAst.limit = null;
+                                setBaseAst((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));
+                            } }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
+                                if (!baseAst) {
+                                    return;
+                                }
+                                if (!openPopover) {
+                                    setOpenPopover('AddLimitPopover');
+                                }
+                            }, label: 'Add limit' }), title: "Limit", onClose: () => {
+                            setIsPending(false);
+                            setActiveEditItem(null);
+                            setActivePath(null);
+                            setOpenPopover(null);
+                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInput, onSave: (limit) => {
+                                const newAst = { ...baseAst };
+                                newAst.limit = {
+                                    seperator: '',
+                                    value: [
+                                        {
+                                            type: 'number',
+                                            value: Number(limit),
+                                        },
+                                    ],
+                                };
+                                setOpenPopover(null);
+                                setBaseAst((0, util_1.deepCopy)(newAst));
+                            } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                            event.preventDefault();
+                            handleAsk();
+                        }, style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: 12,
                             padding: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
-                                    rows: pivotData?.rows || rows,
-                                    fields: pivotData?.fields || fields,
-                                }, baseAst?.columns ?? []), columns: pivotData?.columns ||
-                                    enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
-                                        return { label: c, field: c };
-                                    }), error: errorMessage, rowsPerPage: 20 })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    gap: '12px',
-                                }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                            color: 'red',
-                                            fontSize: 14,
-                                            padding: '12px',
-                                            whiteSpace: 'nowrap',
-                                        }, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
+                        }, children: [(0, jsx_runtime_1.jsx)(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
+                                rows: pivotData?.rows || rows,
+                                fields: pivotData?.fields || fields,
+                            }, baseAst?.columns ?? []), columns: pivotData?.columns ||
+                                enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                    return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
+                                }), error: errorMessage, rowsPerPage: 20 })) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: '12px',
+                        }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    color: 'red',
+                                    fontSize: 14,
+                                    padding: '12px',
+                                    whiteSpace: 'nowrap',
+                                }, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] })] }))] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData })] }));
 }
 exports.default = ReportBuilder;