@quillsql/react 2.11.12 → 2.11.14

package/dist/esm/ReportBuilder.js

@@ -21,6 +21,8 @@ import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/Pivot
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import QuillTable from './components/QuillTable';
 import { QuillSelectComponent } from './components/QuillSelect';
+import { snakeCaseToTitleCase } from './utils/textProcessing';
+import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
 /**
  * Quill Report Builder
  *
@@ -58,6 +60,8 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const [currentTable, setCurrentTable] = useState(initialTableName || '');
     const parentRef = useRef(null);
     const [theme] = useContext(ThemeContext);
     const [pivotRowField, setPivotRowField] = useState(undefined);
@@ -85,7 +89,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         return columns.map((col) => ({
             label: col,
             name: col,
-            displayName: col,
+            displayName: snakeCaseToTitleCase(col),
             field: col,
             format: getPostgresBasicType(fields.find((f) => f.name === col))?.replace('number', 'whole_number') || 'string',
             fieldType: schemaTables
@@ -117,6 +121,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             // setUniqueValues({});
             setPivot(null);
             setPivotData(null);
+            setRecommendedPivots([]);
         }, 0);
     };
     useEffect(() => {
@@ -177,7 +182,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         }
         setUniqueValues(newValues);
     };
-    const fetchSqlQuery = async () => {
+    const fetchSqlQuery = async (ast, formData) => {
+        setLoading(true);
+        setErrorMessage('');
         try {
             const response = await fetch(`https://quill-344421.uc.r.appspot.com/sqlify`, {
                 method: 'POST',
@@ -185,32 +192,19 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    ast: { ...baseAst, where: formData },
+                    ast: { ...ast, where: formData },
                     publicKey: client.publicKey,
                 }),
             });
             const data = await response.json();
             setActiveQuery(data.query);
-            fetchUponChange();
+            fetchUponChange(ast, formData);
         }
         catch (error) {
+            setLoading(false);
             console.error(error);
         }
     };
-    useEffect(() => {
-        setErrorMessage('');
-        if (baseAst || formData) {
-            fetchSqlQuery();
-        }
-    }, [baseAst]);
-    // Returns an array of all the column names in the pivot config
-    // if there are any, otherwise returns [].
-    const getColumnsInPivot = () => {
-        if (!pivot)
-            return [];
-        const { valueField, rowField, columnField } = pivot;
-        return [valueField, rowField, columnField].filter(Boolean);
-    };
     // It's just like getColumnsInPivot but we expand the columnField
     // if there is one to include all the variants just like it would
     // show up in the table. (eg. category -> ...[Fuel, Food, Other])
@@ -229,81 +223,78 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         result.push(valueField, rowField);
         return result.filter(Boolean);
     };
-    useEffect(() => {
-        if (errorMessage) {
-            console.error(errorMessage);
+    const fetchDistinctHelper = async (column, table) => {
+        try {
+            const query = `SELECT DISTINCT ${column} FROM ${table};`;
+            const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashquery`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    orgId: client.customerId,
+                    publicKey: client.publicKey,
+                    query: query,
+                }),
+            });
+            const data = await response.json();
+            if (data.errorMessage) {
+                // console.error(data.errorMessage);
+                return null;
+            }
+            const options = data.rows.map((r) => r[column]);
+            const newCheckboxValues = options.reduce((obj, col) => {
+                obj[col] = false;
+                return obj;
+            }, {});
+            return { table, column, values: newCheckboxValues };
+        }
+        catch (e) {
+            console.error(e);
+            return null;
         }
-    }, [errorMessage]);
+    };
     useEffect(() => {
-        const fetchDistinctHelper = async (column, table) => {
+        const fetchSchema = async () => {
             try {
-                const query = `SELECT DISTINCT ${column} FROM ${table};`;
-                const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashquery`, {
+                const response = await fetch(`${client.queryEndpoint}`, {
                     method: 'POST',
                     headers: {
+                        ...client.queryHeaders,
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        orgId: client.customerId,
-                        publicKey: client.publicKey,
-                        query: query,
+                        metadata: {
+                            clientId: client.publicKey,
+                            publicKey: client.publicKey,
+                            task: 'schema',
+                            removeCustomerField: true,
+                        },
                     }),
                 });
-                const data = await response.json();
-                if (data.errorMessage) {
-                    // console.error(data.errorMessage);
-                    return null;
-                }
-                const options = data.rows.map((r) => r[column]);
-                const newCheckboxValues = options.reduce((obj, col) => {
-                    obj[col] = false;
-                    return obj;
-                }, {});
-                return { table, column, values: newCheckboxValues };
-            }
-            catch (e) {
-                console.error(e);
-                return null;
-            }
-        };
-        const fetchSchema = async () => {
-            try {
-                const response = await fetch(`https://quill-344421.uc.r.appspot.com/schema2/${client.publicKey}`).then((res) => res.json());
+                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}`)));
-                // Fetch all the unique values in parallel
-                const pendingFetches = [];
-                for (let table of tables ?? []) {
-                    for (let column of table.columns) {
-                        if (!isTextColumnType(column.fieldType))
-                            continue;
-                        const fetchPromise = fetchDistinctHelper(column.name, table.displayName);
-                        pendingFetches.push(fetchPromise);
-                    }
-                }
-                const newUniqueValues = {};
-                const resolvedPromises = await Promise.all(pendingFetches);
-                for (const resolvedData of resolvedPromises) {
-                    if (resolvedData) {
-                        const { table, column, values } = resolvedData;
-                        if (!newUniqueValues[table]) {
-                            newUniqueValues[table] = {};
-                        }
-                        newUniqueValues[table][column] = values;
-                    }
-                }
-                if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
-                    setUniqueValues(newUniqueValues);
+                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;
+                })));
+                if (initialTableName && initialLoad) {
+                    setInitialLoad(false);
+                    setLoading(true);
+                    await getDistinctValues(initialTableName, tables);
+                    const columnsForTable = tables
+                        .find((t) => t.name === initialTableName)
+                        ?.columns.map((c) => c.name);
+                    await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
                 }
             }
             catch (error) {
@@ -327,7 +318,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             const paths = globalPath.split('.').filter((p) => p);
             if (paths.length === 0 && !isInsertion && !isReplaceSubtree) {
                 setFormData(null);
-                setBaseAst(deepCopy({
+                const newAst = deepCopy({
                     ...defaultAST,
                     ...baseAst,
                     ...(!baseAst?.columns && {
@@ -341,12 +332,13 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         from: [{ ...defaultTable, table: initialTableName }],
                     }),
                     where: null,
-                }));
+                });
+                setBaseAst(newAst);
+                fetchSqlQuery(newAst, null);
                 return;
             }
             if (!formData && isInsertion) {
-                setFormData(value);
-                setBaseAst(deepCopy({
+                const newAst = deepCopy({
                     ...defaultAST,
                     ...baseAst,
                     ...(!baseAst?.columns && {
@@ -360,7 +352,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         from: [{ ...defaultTable, table: initialTableName }],
                     }),
                     where: value,
-                }));
+                });
+                setFormData(value);
+                setBaseAst(newAst);
+                fetchSqlQuery(newAst, value);
                 return;
             }
             let newState = deepCopy(formData);
@@ -444,7 +439,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 }
             }
             setFormData(newState);
-            setBaseAst({
+            const newAst = {
                 ...defaultAST,
                 ...baseAst,
                 ...(!baseAst?.columns && {
@@ -458,7 +453,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     from: [{ ...defaultTable, table: initialTableName }],
                 }),
                 where: { ...newState },
-            });
+            };
+            setBaseAst(newAst);
+            fetchSqlQuery(newAst, newState);
         });
     };
     // TODO: Merge this function with the updateFormData function
@@ -607,6 +604,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     };
     // Function to handle operator changes
     const handleOperatorChange = (value, node, keyPrefix, column = null) => {
+        if (!keyPrefix) {
+            setTopLevelBinaryOperator(value);
+        }
         if (isPending) {
             updateActiveItem([{ path: keyPrefix + 'operator', value }], { column });
         }
@@ -675,6 +675,23 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             .find((c) => c.name === columnName);
         return column?.fieldType;
     };
+    const emptyPivotColumns = () => {
+        if (pivot && pivot.rowField && pivot.columnField && pivot.valueField) {
+            return [
+                { label: snakeCaseToTitleCase(pivot.rowField) },
+                { label: snakeCaseToTitleCase(pivot.columnField) },
+            ];
+        }
+        else if (pivot && pivot.rowField && pivot.valueField) {
+            return [
+                { label: snakeCaseToTitleCase(pivot.rowField) },
+                { label: snakeCaseToTitleCase(pivot.valueField) },
+            ];
+        }
+        else {
+            return [{ label: snakeCaseToTitleCase(pivot.valueField) }];
+        }
+    };
     /**
      * Render form fields based on the type of the node
      * @param node the AST or subtree to render recursively
@@ -721,7 +738,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
                                 }, options: getAllPossibleColumns().map((column) => ({
-                                    label: column.displayName,
+                                    label: snakeCaseToTitleCase(column.displayName),
                                     value: column.name,
                                 })) }), _jsx(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
                                     if (value === dateFilterType)
@@ -815,7 +832,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 else if (isInTheLastInterval(node, client.databaseType)) {
                     const { dateColumn, dateFilterType, intervalCount, intervalType } = getDateFilterInfo(node);
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: snakeCaseToTitleCase(column.displayName),
                         value: column.name,
                     }));
                     const plural = node.right.args.value[1].expr.value > 1 ? 's' : '';
@@ -866,7 +883,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 else if (isTheCurrentInterval(node, client.databaseType)) {
                     const { dateFilterType } = getDateFilterInfo(node);
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: snakeCaseToTitleCase(column.displayName),
                         value: column.name,
                     }));
                     return (_jsxs("div", { style: {
@@ -911,7 +928,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 }
                 else if (isThePreviousInterval(node, client.databaseType)) {
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: snakeCaseToTitleCase(column.displayName),
                         value: column.name,
                     }));
                     return (_jsxs("div", { style: {
@@ -972,7 +989,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 }
                 else if (isColumnComparison(node)) {
                     const options = getAllPossibleColumns().map((column) => ({
-                        label: column.displayName,
+                        label: snakeCaseToTitleCase(column.displayName),
                         value: column.name,
                     }));
                     // grab the value of the left child of the column comparison
@@ -1026,6 +1043,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             gap: 12,
                             flexDirection: 'column',
                             width: '100%',
+                            padding: '6px 0px',
                         }, children: [_jsxs("div", { style: {
                                     display: 'flex',
                                     gap: 20,
@@ -1067,7 +1085,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                                 else {
                                                     handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
                                                 }
-                                            } }), _jsx("span", { children: key })] }, key))) }, keyPrefix + 'right.'))] }));
+                                            } }), _jsx("span", { style: { fontFamily: theme.fontFamily }, children: key })] }, key))) }, keyPrefix + 'right.'))] }));
                 }
                 else {
                     const columnName = node.left.column;
@@ -1121,7 +1139,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 }
             case 'column_ref': {
                 const options = getAllPossibleColumns().map((column) => ({
-                    label: column.displayName,
+                    label: snakeCaseToTitleCase(column.displayName),
                     value: column.name,
                 }));
                 return (_jsx(Select, { theme: theme, style: { width: '120px' }, value: node.column ?? options[0]?.value, onChange: (value) => {
@@ -1248,10 +1266,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         isInTheCurrentIntervalSentence ??
                         isInTheLastIntervalSentence ??
                         isInThePreviousIntervalSentence ?? (_jsxs(_Fragment, { children: [node.left &&
-                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : topLevelBinaryOperator === 'OR' ? (_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' ? (_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 snakeCaseToTitleCase(node.column);
             case 'expr_list':
                 if (node.value.length === 1) {
                     const subQuery = renderSentence(formData, node.value[0]);
@@ -1283,10 +1301,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     if (node.args.value.length < 1)
                         return null;
                     if (node.args.value[0].value) {
-                        return node.args.value[0].value.replaceAll('%', '');
+                        return snakeCaseToTitleCase(node.args.value[0].value.replaceAll('%', ''));
                     }
                     if (node.args.value[0].column)
-                        return node.args.value[0].column.replaceAll('%', '');
+                        return snakeCaseToTitleCase(node.args.value[0].column.replaceAll('%', ''));
                     return null;
                 }
                 if (node.name.toLowerCase() === 'current_date' ||
@@ -1323,37 +1341,22 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         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,
-        })));
-    };
-    const getDateColumns = () => {
-        const allColumns = getAllPossibleColumns();
-        return allColumns.filter((c) => isDateishColumnType(c.fieldType));
-    };
-    const getNumericColumns = () => {
-        const allColumns = getAllPossibleColumns();
-        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
-        return allColumns
-            .filter((column) => {
-            return selectedColumnNames.includes(column.name);
-        })
-            .filter((c) => isNumericColumnType(c.fieldType));
-    };
-    const getNonNumericColumns = () => {
-        const allColumns = getAllPossibleColumns();
-        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
-        return allColumns
-            .filter((column) => selectedColumnNames.includes(column.name))
-            .filter((c) => !isNumericColumnType(c.fieldType));
-    };
-    const getStringColumns = () => {
-        const allColumns = getAllPossibleColumns();
-        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
-        return allColumns
-            .filter((column) => selectedColumnNames.includes(column.name))
-            .filter((c) => isTextColumnType(c.fieldType));
+        }))
+            .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;
+        }));
     };
     /**
      * Return whether all columns have been selected (used to hide select all
@@ -1377,26 +1380,6 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         },
         as: null,
     });
-    const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, }) => {
-        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
-        const style = {
-            transform: DND_CSS.Transform.toString(transform),
-            transition,
-        };
-        const handleSelect = () => {
-            setSelectedColumns((selectedColumns) => {
-                if (selectedColumns.includes(id)) {
-                    return selectedColumns.filter((column) => column !== id);
-                }
-                else {
-                    return [...selectedColumns, id];
-                }
-            });
-        };
-        return (_jsx("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: _jsx(SelectColumn, { selected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, children: _jsx("div", { style: {
-                        cursor: 'grab',
-                    }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
-    };
     const AddConditionPopover = ({ onSave }) => {
         return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("h1", { style: {
                         fontWeight: '600',
@@ -1410,8 +1393,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         justifyContent: 'end',
                     }, children: _jsx(Button, { onClick: onSave, label: 'Add condition' }) })] }));
     };
-    const fetchUponChange = async () => {
-        if ((formData || baseAst) && !loading) {
+    const fetchUponChange = async (baseAst, newFormData) => {
+        // if newFormData is null still use it
+        const curFormData = newFormData !== undefined ? newFormData : formData;
+        if ((curFormData || baseAst) && !loading) {
             try {
                 setLoading(true);
                 const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
@@ -1420,7 +1405,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        ast: { ...baseAst, where: formData },
+                        ast: { ...baseAst, where: curFormData },
                         publicKey: client.publicKey,
                         orgId: client.customerId,
                     }),
@@ -1429,6 +1414,21 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 if (data2.rows && data2.rows.length) {
                     const tables = getTableNames(baseAst);
                     const table = tables.length >= 1 ? tables[0] : initialTableName;
+                    if (table !== currentTable) {
+                        getDistinctValues(table);
+                        setCurrentTable(table);
+                    }
+                    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 = {};
@@ -1439,7 +1439,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
                         const pivotedData = generatePivotTable(pivot, data2.rows, [null, null, null], false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
-                        setPivotData(pivotedData);
+                        setPivotData(pivotedData || []);
                         setRows(data2.rows);
                         setFields(data2.fields);
                     }
@@ -1562,8 +1562,35 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         }
         return false;
     };
-    const handleAsk = async () => {
-        if (!aiPrompt) {
+    const getDistinctValues = async (table, overrideSchema) => {
+        const schemaInfo = overrideSchema || schemaTables;
+        const tableInfo = schemaInfo.find((tableInfo) => tableInfo.name === table);
+        if (tableInfo) {
+            const pendingFetches = [];
+            for (let column of tableInfo.columns) {
+                if (!isTextColumnType(column.fieldType))
+                    continue;
+                const fetchPromise = fetchDistinctHelper(column.name, tableInfo.displayName);
+                pendingFetches.push(fetchPromise);
+            }
+            const newUniqueValues = {};
+            const resolvedPromises = await Promise.all(pendingFetches);
+            for (const resolvedData of resolvedPromises) {
+                if (resolvedData) {
+                    const { table, column, values } = resolvedData;
+                    if (!newUniqueValues[table]) {
+                        newUniqueValues[table] = {};
+                    }
+                    newUniqueValues[table][column] = values;
+                }
+            }
+            if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                setUniqueValues(newUniqueValues);
+            }
+        }
+    };
+    const handleAsk = async (overridePrompt = '') => {
+        if (!aiPrompt && !overridePrompt) {
             return;
         }
         try {
@@ -1582,7 +1609,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
-                            initialQuestion: aiPrompt,
+                            initialQuestion: aiPrompt || overridePrompt,
                             publicKey: client.publicKey,
                         }),
                     });
@@ -1630,11 +1657,14 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 newAst = removeNonSelectedTableReferences(newAst, tableAlias ?? table);
                 // newAst = convertDateComparison(newAst); // TODO
                 ast = newAst; // so we fetch data for newAst later.
+                if (table !== currentTable) {
+                    getDistinctValues(table);
+                    setCurrentTable(table);
+                }
                 setPivotRowField(groupByPivot?.rowField);
                 setPivotColumnField(groupByPivot?.columnField);
                 setPivotValueField(groupByPivot?.valueField);
                 setPivotAggregation(groupByPivot?.aggregationType);
-                setPivot(groupByPivot);
                 setSelectedColumns(deepCopy(newAst).columns?.map((column) => {
                     if (column.expr.type === 'column_ref') {
                         return `${table}.${column.expr.column}`;
@@ -1645,7 +1675,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     return `${table}.${column.expr.value}`;
                 }));
                 if (groupByPivot) {
-                    setBaseAst(deepCopy({ ...newAst, orderby: null }));
+                    setBaseAst(deepCopy({ ...newAst, orderby: null, limit: null }));
                 }
                 else {
                     setBaseAst(deepCopy({ ...newAst }));
@@ -1654,8 +1684,6 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 setTopLevelBinaryOperator(
                 // @ts-ignore
                 newAst?.where ? newAst?.where?.operator : 'AND');
-                if (groupByPivot)
-                    return; // the useEffect will handle the rest
             }
             const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
                 method: 'POST',
@@ -1671,11 +1699,13 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             const data2 = await res2.json();
             if (data2.rows && data2.rows.length) {
                 const tables = getTableNames(newAst);
-                const table = tables.length >= 1 ? tables[0] : initialTableName;
                 if (groupByPivot) {
-                    const pivotedData = generatePivotTable(pivot, data2.rows, [null, null, null], false);
+                    const pivotedData = generatePivotTable(
+                    // @ts-ignore
+                    groupByPivot, data2.rows, [null, null, null], false);
                     console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
                     setPivotData(pivotedData);
+                    setPivot(groupByPivot);
                     setRows(data2.rows);
                     setFields(data2.fields);
                 }
@@ -1685,6 +1715,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 }
             }
             else {
+                setPivotData([]);
                 setRows([]);
                 setFields([]);
             }
@@ -1703,7 +1734,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
         }
         catch (e) {
             console.error(e);
-            setErrorMessage(`${e.name}: ${e.message}`);
+            setErrorMessage(`Error: Couldn't process your request, please re-word your prompt.`);
         }
         finally {
             setLoading(false);
@@ -1729,11 +1760,17 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             clearAllState();
             return;
         }
-        const newAst = { ...baseAst, columns };
-        setBaseAst(deepCopy(newAst));
+        const newAst = deepCopy({ ...baseAst, columns });
+        setBaseAst(newAst);
+        fetchSqlQuery(newAst);
     };
     function TopLevelBooleanSwitch({ node, keyPrefix, handleOperatorChange, }) {
-        return (_jsx("div", { style: { width: 'fit-content' }, children: _jsx(Tabs, { defaultValue: node.operator, options: DEFAULT_TAB_OPTIONS, onValueChange: (value) => handleOperatorChange(value, node, keyPrefix) }) }));
+        return (_jsx("div", { style: { width: 'fit-content' }, children: _jsx(Tabs, { defaultValue: node.operator, options: DEFAULT_TAB_OPTIONS, onValueChange: (value) => {
+                    if (loading) {
+                        return;
+                    }
+                    handleOperatorChange(value, node, keyPrefix);
+                } }) }));
     }
     const DraggableItem = ({ id, label, onDelete }) => {
         const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
@@ -1741,7 +1778,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             transform: DND_CSS.Transform.toString(transform),
             transition,
         };
-        return (_jsx("div", { style: { ...style }, ref: setNodeRef, children: _jsx(DraggableColumn, { label: label, onDelete: onDelete, children: _jsx("div", { style: {
+        return (_jsx("div", { style: { ...style }, ref: setNodeRef, children: _jsx(DraggableColumn, { label: snakeCaseToTitleCase(label), onDelete: onDelete, children: _jsx("div", { style: {
                         cursor: 'grab',
                     }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
     };
@@ -1779,6 +1816,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 };
                 const newAst = baseAst ? newBaseAst : fallbackAST;
                 setBaseAst(newAst);
+                fetchSqlQuery(newAst);
             }
         }
         const columnNamesInAst = baseAst?.columns.map((col) => {
@@ -1802,18 +1840,6 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _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 (_jsxs("div", { style: {
                 display: 'flex',
@@ -1824,7 +1850,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     if (!openPopover) {
                                         setOpenPopover('AddColumnPopover');
                                     }
-                                }, label: 'Select columns' }), title: "Select columns", onClose: () => {
+                                }, label: 'Select columns' }), label: "Select columns", onClose: () => {
                                 setIsPending(false);
                                 setActiveEditItem(null);
                                 setActivePath(null);
@@ -1833,7 +1859,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     setActiveEditItem(null);
                                     setActivePath(null);
                                     setOpenPopover(null);
-                                }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: setBaseAst, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
+                                }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
+                                    setBaseAst(newAst);
+                                    fetchSqlQuery(newAst);
+                                }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: 8,
@@ -1844,6 +1873,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 gap: 2.5,
                                 alignItems: 'flex-start',
                             }, children: [_jsx(Popover, { isOpen: openPopover === 'AddFilterPopover', title: 'Add filter', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                                return;
+                                            }
                                             if (!openPopover) {
                                                 const value = orderedColumnNames[0];
                                                 const [_table, column] = value.split('.');
@@ -1930,14 +1962,18 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                         } }) }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: 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: () => {
                                 setPivot(null);
                                 setPivotData(null);
-                            }, selectPivot: (pivot) => {
+                            }, 
+                            // TODOs
+                            selectPivot: (pivot) => {
                                 if (!pivot)
                                     return;
                                 const newAst = { ...baseAst };
                                 newAst.orderby = null;
                                 setBaseAst(newAst); // trigger refetch
                                 setPivot(pivot);
-                            }, selectPivotOnEdit: true, showTrigger: !pivot || !pivotData, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && pivotData && (_jsx(PivotCard, { pivotTable: {
+                                const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                                setPivotData(pivotedData || []);
+                            }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3, SecondaryButtonComponent: SecondaryButton }), pivot && (_jsx(PivotCard, { pivotTable: {
                                 pivot: pivot,
                                 rows: pivotData?.rows || [],
                                 columns: pivotData?.columns || [],
@@ -1964,10 +2000,16 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover, handleDelete: () => {
                                     setPivot({ ...pivot, sort: false });
                                     setBaseAst(deepCopy(baseAst));
+                                    if (!pivot) {
+                                        fetchSqlQuery(baseAst);
+                                    }
                                 }, onSave: (column, direction) => {
                                     setPivot({ ...pivot, sort: true, sortDirection: direction });
                                     setOpenPopover(null);
                                     setBaseAst(deepCopy(baseAst));
+                                    if (!pivot) {
+                                        fetchSqlQuery(baseAst);
+                                    }
                                 } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -1992,11 +2034,17 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     setActivePath(null);
                                     setOpenPopover(null);
                                     setBaseAst(deepCopy(newAst));
+                                    if (!pivot) {
+                                        fetchSqlQuery(newAst);
+                                    }
                                 }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover, handleDelete: () => {
                                     const newAst = { ...baseAst };
                                     newAst.orderby.splice(id, 1);
                                     setBaseAst(deepCopy(newAst));
-                                } }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                    if (!pivot) {
+                                        fetchSqlQuery(newAst);
+                                    }
+                                } }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
                                     if (!openPopover) {
                                         setOpenPopover('AddSortPopover');
                                     }
@@ -2005,18 +2053,51 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setActiveEditItem(null);
                                 setActivePath(null);
                                 setOpenPopover(null);
-                            }, children: _jsx(AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) })] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
+                            }, children: _jsx(AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Limit" }), _jsx("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 8,
+                                marginBottom: 12,
+                            }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: SortPopover, EditPopover: AddLimitPopover, handleDelete: () => {
+                                    const newAst = { ...baseAst };
+                                    newAst.limit = null;
+                                    setBaseAst(deepCopy(newAst));
+                                    fetchSqlQuery(newAst);
+                                }, onSave: (limit) => {
+                                    const newAst = { ...baseAst };
+                                    newAst.limit = {
+                                        seperator: '',
+                                        value: [
+                                            {
+                                                type: 'number',
+                                                value: limit,
+                                            },
+                                        ],
+                                    };
+                                    setOpenPopover(null);
+                                    setBaseAst(deepCopy(newAst));
+                                    fetchSqlQuery(newAst);
+                                } }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                                    if (!openPopover) {
+                                        setOpenPopover('AddLimitPopover');
+                                    }
+                                }, label: 'Add limit' }), title: "Limit", onClose: () => {
+                                setIsPending(false);
+                                setActiveEditItem(null);
+                                setActivePath(null);
+                                setOpenPopover(null);
+                            }, children: _jsx(TextInput, { value: 0, type: "number", style: { width: 120, minHeight: 32 }, onChange: (e) => { } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [_jsx(TextInput, { placeholder: "Ask a question...", type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), _jsx(Button, { onClick: () => { }, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), baseAst && (_jsxs(_Fragment, { children: [_jsx(TableLoadingState, {}), _jsxs("div", { style: {
+                            }, children: [_jsx(TextInput, { placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), _jsx(Button, { onClick: () => { }, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableLoadingState, {}), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButton, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(Button, { label: 'Add to dashboard', onClick: () => { } })] })] }))] }), _jsx("style", { children: `body{margin:0;}` })] }));
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButton, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(Button, { label: 'Add to dashboard', onClick: () => { } })] })] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
     }
     return (_jsxs("div", { ref: parentRef, style: {
             display: 'flex',
@@ -2041,7 +2122,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setActiveEditItem(null);
                                 setActivePath(null);
                                 setOpenPopover(null);
-                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: setBaseAst, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
+                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                setBaseAst(ast);
+                                fetchSqlQuery(ast);
+                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
@@ -2052,6 +2136,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             gap: 2.5,
                             alignItems: 'flex-start',
                         }, children: [_jsx(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                        if (!selectedColumns || selectedColumns.length === 0) {
+                                            return;
+                                        }
                                         if (!openPopover) {
                                             const value = orderedColumnNames[0];
                                             const [_table, column] = value.split('.');
@@ -2137,7 +2224,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                             setOpenPopover(null);
                                             clearCheckboxes();
                                         }
-                                    } }) }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: 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: () => {
+                                    } }) }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: 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) => {
@@ -2151,7 +2238,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             }
                             setBaseAst(newAst); // trigger refetch
                             setPivot(pivot);
-                        }, selectPivotOnEdit: true, showTrigger: !pivot || !pivotData, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && pivotData && (_jsx(PivotCard, { pivotTable: {
+                            const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                            setPivotData(pivotedData || []);
+                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && (_jsx(PivotCard, { pivotTable: {
                             pivot: pivot,
                             rows: pivotData?.rows || [],
                             columns: pivotData?.columns || [],
@@ -2166,7 +2255,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: () => {
                             setPivot(null);
                             setPivotData(null);
-                            setBaseAst(deepCopy(baseAst)); // trigger refetch
+                            setBaseAst(deepCopy(baseAst));
                         }, minHeight: 180, LabelComponent: Label, TextComponent: Text })), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Sort" }), _jsx("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && (_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
@@ -2175,13 +2264,25 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         }, children: _jsx(SortSentence, { sortData: {
                                 type: pivot.sortDirection,
                                 expr: { type: 'column_ref', column: pivot.rowField },
-                            }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover, handleDelete: () => {
-                                setPivot({ ...pivot, sort: false });
+                            }, columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover, handleDelete: () => {
+                                if (pivot) {
+                                    setPivot({ ...pivot, sort: false });
+                                    const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, [null, null, null], false);
+                                    setPivotData(pivotedData || []);
+                                    return;
+                                }
                                 setBaseAst(deepCopy(baseAst));
+                                fetchSqlQuery(deepCopy(baseAst));
                             }, onSave: (column, direction) => {
-                                setPivot({ ...pivot, sort: true, sortDirection: direction });
+                                if (pivot) {
+                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
+                                    const pivotedData = generatePivotTable({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
+                                    setPivotData(pivotedData || []);
+                                    return;
+                                }
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(baseAst));
+                                fetchSqlQuery(deepCopy(baseAst));
                             } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
@@ -2195,6 +2296,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 const newAst = { ...baseAst };
                                 newAst.orderby.splice(id, 1);
                                 setBaseAst(deepCopy(newAst));
+                                fetchSqlQuery(deepCopy(newAst));
                             }, onSave: (column, direction) => {
                                 if (pivot) {
                                     setPivot({
@@ -2222,6 +2324,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setActivePath(null);
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(newAst));
+                                fetchSqlQuery(deepCopy(newAst));
                             } }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
                                 if (!openPopover) {
                                     setOpenPopover('AddSortPopover');
@@ -2236,6 +2339,8 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     return;
                                 if (pivot) {
                                     setPivot({ ...pivot, sort: true, sortDirection: direction });
+                                    const pivotedData = generatePivotTable({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
+                                    setPivotData(pivotedData || []);
                                     setActivePath(null);
                                     setOpenPopover(null);
                                     setBaseAst(deepCopy(baseAst));
@@ -2252,7 +2357,58 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setActivePath(null);
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(newAst));
-                            } }) })] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
+                                fetchSqlQuery(deepCopy(newAst));
+                            } }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Limit" }), _jsx("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 8,
+                            marginBottom: 12,
+                        }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: SortPopover, EditPopover: AddLimitPopover, handleDelete: () => {
+                                const newAst = { ...baseAst };
+                                newAst.limit = null;
+                                setBaseAst(deepCopy(newAst));
+                                fetchSqlQuery(deepCopy(newAst));
+                            }, onSave: (limit) => {
+                                const newAst = { ...baseAst };
+                                newAst.limit = {
+                                    seperator: '',
+                                    value: [
+                                        {
+                                            type: 'number',
+                                            value: limit,
+                                        },
+                                    ],
+                                };
+                                setOpenPopover(null);
+                                setBaseAst(deepCopy(newAst));
+                                fetchSqlQuery(deepCopy(newAst));
+                            } }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _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: _jsx(AddLimitPopover, { TextInput: TextInput, onSave: (limit) => {
+                                const newAst = { ...baseAst };
+                                newAst.limit = {
+                                    seperator: '',
+                                    value: [
+                                        {
+                                            type: 'number',
+                                            value: Number(limit),
+                                        },
+                                    ],
+                                };
+                                setOpenPopover(null);
+                                setBaseAst(deepCopy(newAst));
+                                fetchSqlQuery(deepCopy(newAst));
+                            } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
@@ -2263,9 +2419,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         }, children: [_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...' }), _jsx(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && (_jsx(_Fragment, { children: loading && errorMessage.length === 0 ? (_jsx(TableLoadingState, {})) : (_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 };
+                            }, baseAst?.columns ?? []), columns: pivot
+                                ? pivotData?.columns || emptyPivotColumns()
+                                : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                    return { label: snakeCaseToTitleCase(c), field: c };
                                 }), error: errorMessage, rowsPerPage: 20 })) })), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',