@quillsql/react 2.11.21 → 2.11.24

package/dist/cjs/ReportBuilder.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.QUILL_SERVER = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-unused-vars */
 const react_1 = require("react");
@@ -22,7 +23,7 @@ const util_1 = require("./components/ReportBuilder/util");
 const operators_1 = require("./components/ReportBuilder/operators");
 const crypto_1 = require("./utils/crypto");
 const constants_1 = require("./components/ReportBuilder/constants");
-const AddColumnPopover_1 = __importDefault(require("./components/ReportBuilder/AddColumnPopover"));
+const AddColumnModal_1 = __importDefault(require("./components/ReportBuilder/AddColumnModal"));
 const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const PivotList_1 = require("./internals/ReportBuilder/PivotList");
@@ -32,6 +33,12 @@ const width_1 = require("./utils/width");
 const QuillSelect_1 = require("./components/QuillSelect");
 const QuillCard_1 = require("./components/QuillCard");
 const SQLEditor_1 = require("./SQLEditor");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const valueFormatter_1 = require("./utils/valueFormatter");
+const pivotProcessing_1 = require("./utils/pivotProcessing");
+const tableProcessing_1 = require("./utils/tableProcessing");
+const useQuill_1 = require("./hooks/useQuill");
+exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
  *
@@ -63,7 +70,8 @@ const SQLEditor_1 = require("./SQLEditor");
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, TextComponent = UiComponents_1.MemoizedText, isAdminEnabled = false, isAIEnabled = true, containerStyle, className, }) {
+function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialChartId, }) {
+    const { data: initialData } = (0, useQuill_1.useQuill)(initialChartId || '');
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -76,12 +84,14 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
     const [activeEditItem, setActiveEditItem] = (0, react_1.useState)(null);
     const [activePath, setActivePath] = (0, react_1.useState)(null);
     const [openPopover, setOpenPopover] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(!!initialTableName);
     const [loadingSchema, setLoadingSchema] = (0, react_1.useState)(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
     const [isPending, setIsPending] = (0, react_1.useState)(false);
     const [isCopying, setIsCopying] = (0, react_1.useState)(false);
+    const [dataDisplayed, setDataDisplayed] = (0, react_1.useState)(false);
     const [rows, setRows] = (0, react_1.useState)([]);
+    const [formattedRows, setFormattedRows] = (0, react_1.useState)([]);
     const [fields, setFields] = (0, react_1.useState)([]);
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = (0, react_1.useState)('AND');
     const [editPopoverKey, setEditPopoverKey] = (0, react_1.useState)(null);
@@ -90,17 +100,17 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
     const [pivotData, setPivotData] = (0, react_1.useState)(null);
     const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
     const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
+    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
-    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(!!initialTableName || !!initialChartId);
     const [currentTable, setCurrentTable] = (0, react_1.useState)(initialTableName || '');
     const parentRef = (0, react_1.useRef)(null);
     const askAIContainerRef = (0, react_1.useRef)(null);
     const askAILoadingContainerRef = (0, react_1.useRef)(null);
-    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(200);
-    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = (0, react_1.useState)(200);
+    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(-1);
+    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = (0, react_1.useState)(-1);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
     const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
@@ -108,6 +118,17 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
     const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
     // eslint-disable-next-line no-unused-vars
     const [client, _setClient] = (0, react_1.useContext)(Context_1.ClientContext);
+    // JANK: This is temp and stupid
+    const [overrideRecommendations, setOverrideRecommendations] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        if (client.publicKey === '663416663aa9bc716e59a89d') {
+            setOverrideRecommendations(false);
+        }
+    }, [client.publicKey]);
+    (0, react_1.useEffect)(() => {
+        (0, width_1.updateFirstChildWidth)(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+        (0, width_1.updateFirstChildWidth)(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+    }, [dataDisplayed]);
     (0, react_1.useEffect)(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -120,7 +141,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [baseAst, loading]);
+    }, []);
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -134,39 +155,6 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         return columnNames.sort((a, b) => selectedOrderedColumns.indexOf(a) - selectedOrderedColumns.indexOf(b));
         // return columnNames;
     };
-    /**
-     * Transforms an array of column names into an array of columnInfo objects
-     * with label, field, format, and fieldType keys.
-     */
-    const processColumnsForPivotModal = (columns) => {
-        return columns.map((col) => ({
-            label: col,
-            name: 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
-                .flatMap((t) => t.columns)
-                .find((c) => c.name === col)?.fieldType || 'text',
-        }));
-    };
-    /**
-     * Transforms an array of column names into an array of columnInfo objects
-     * with label, field, format, and fieldType keys.
-     */
-    const processColumnsForChartBuilder = (columns) => {
-        return columns.map((col) => ({
-            label: col,
-            name: col,
-            displayName: (0, textProcessing_1.snakeCaseToTitleCase)(col),
-            field: col,
-            format: (0, SQLEditor_1.convertPostgresColumn)(fields.find((f) => f.name === col)).format ||
-                'string',
-            fieldType: schemaTables
-                .flatMap((t) => t.columns)
-                .find((c) => c.name === col)?.fieldType || 'text',
-        }));
-    };
     const clearAllState = () => {
         // We're trying to not block the main thread while resetting all the state.
         // This shouldn't be an issue since the dispatches shouldn't block, but
@@ -184,11 +172,13 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             setOpenPopover(null);
             setLoading(false);
             setIsPending(false);
+            setDataDisplayed(false);
             setRows([]);
             setFields([]);
             setTopLevelBinaryOperator('AND');
             setEditPopoverKey(null);
             setErrorMessage('');
+            setFormattedRows([]);
             // setUniqueValues({});
             setPivot(null);
             setPivotData(null);
@@ -196,8 +186,10 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         }, 0);
     };
     (0, react_1.useEffect)(() => {
-        clearAllState();
-    }, [client]);
+        if (!initialLoad && client.publicKey) {
+            clearAllState();
+        }
+    }, [client.publicKey, client.customerId]);
     (0, react_1.useEffect)(() => {
         if (activePath !== null) {
             // update the modal with the new subtree
@@ -260,7 +252,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         setErrorMessage('');
         try {
             const where = formData ? formData : ast?.where || null;
-            const response = await fetch(`https://quill-344421.uc.r.appspot.com/sqlify`, {
+            const response = await fetch(`${exports.QUILL_SERVER}/sqlify`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -273,7 +265,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             const data = await response.json();
             setActiveQuery(data.query);
             if (fetchData) {
-                fetchUponChange(ast, formData);
+                fetchUponChange(ast, formData, data.query);
             }
         }
         catch (error) {
@@ -301,43 +293,84 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         result.push(valueField, rowField);
         return result.filter(Boolean);
     };
-    const fetchDistinctHelper = async (column, table) => {
+    const fetchDistinctStrings = async (query, 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',
+            const hostedBody = {
+                metadata: {
+                    query,
+                    task: 'query',
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    databaseType: client?.databaseType,
                 },
-                body: JSON.stringify({
-                    orgId: client.customerId,
-                    publicKey: client.publicKey,
-                    query: query,
-                }),
-            });
-            const data = await response.json();
+            };
+            const cloudBody = { query };
+            const data = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
             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 };
+            const results = data.rows.map((columnInfo) => {
+                const column = columnInfo.field;
+                if (!columnInfo.string_values) {
+                    return { table, column, values: {} };
+                }
+                const values = columnInfo.string_values.reduce((result, value) => {
+                    result[value] = false;
+                    return result;
+                }, {});
+                return { table, column, values };
+            });
+            return results;
         }
         catch (e) {
             console.error(e);
             return null;
         }
     };
+    (0, react_1.useEffect)(() => {
+        const loadChart = async () => {
+            if (!initialData || initialData.referencedTables.length !== 1) {
+                return;
+            }
+            const initialRows = await handleAsk(initialData.queryString);
+            if (initialData.pivot) {
+                // @ts-ignore
+                setPivotRowField(initialData.pivot.rowField);
+                // @ts-ignore
+                setPivotAggregation(initialData.pivot.aggregationType);
+                // @ts-ignore
+                setPivotColumnField(initialData.pivot.columnField);
+                // @ts-ignore
+                setPivotValueField(initialData.pivot.valueField);
+                setPivot(initialData.pivot);
+                const pivotedData = (0, PivotModal_1.generatePivotTable)(
+                //@ts-ignore
+                initialData.pivot, initialRows, [null, null, null], false);
+                setPivotData(pivotedData || []);
+            }
+        };
+        if (initialData && initialData.referencedTables.length === 1) {
+            loadChart();
+        }
+    }, [initialData]);
     (0, react_1.useEffect)(() => {
         const loadTable = async (tables) => {
             if (!tables)
                 return;
             setLoading(true);
-            await getDistinctValues(initialTableName, tables);
+            const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === initialTableName);
+            if (tableInfo) {
+                const stringColumns = tableInfo.columns.filter((column) => {
+                    return (0, ast_1.isTextColumnType)(column.fieldType);
+                });
+                const stringNames = stringColumns.map((column) => column.name);
+                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+                const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
+                joinedUniqueValues[initialTableName] = newUniqueValues;
+                if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
+                    setUniqueValues(joinedUniqueValues);
+                }
+            }
             const columnsForTable = tables
                 .find((t) => t.name === initialTableName)
                 ?.columns.map((c) => c.name)
@@ -398,10 +431,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                         return -1;
                     return 0;
                 })));
-                if (initialTableName && initialLoad) {
+                if (initialTableName && initialLoad && !initialChartId) {
                     await loadTable(tables);
                 }
                 setLoadingSchema(false);
+                setInitialLoad(false);
             }
             catch (error) {
                 console.error(error);
@@ -409,9 +443,8 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         };
         if (schemaTables.length === 0) {
             fetchSchema();
-            setInitialLoad(false);
         }
-    }, [schemaTables, initialTableName]);
+    }, [schemaTables, initialTableName, initialLoad]);
     const updateFormData = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, topLevelBinOp = 'OR', isCondition = undefined, }) => {
         // Function to immutably update or delete nodes based on their path
         // TODO: fix the following horible code
@@ -841,6 +874,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -900,7 +938,8 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         },
                                     ]));
                                 } })), (0, jsx_runtime_1.jsx)(SelectComponent, { value: intervalType, onChange: (event) => {
-                                    if (intervalPaths.length === 1) {
+                                    if (intervalPaths.length === 1 &&
+                                        dateFilterType !== 'in the previous') {
                                         handleChangeText([
                                             {
                                                 value: intervalCount !== null
@@ -912,7 +951,14 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         return;
                                     }
                                     let newSubtree;
-                                    if (dateFilterType === 'equals') {
+                                    if (dateFilterType === 'in the previous') {
+                                        newSubtree = (0, postgres_1.generatePreviousPeriodPostgres)({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${event.target.value}`,
+                                            currentPeriod: event.target.value,
+                                        });
+                                    }
+                                    else if (dateFilterType === 'equals') {
                                         newSubtree = (0, postgres_1.generateEqualsPostgres)({
                                             dateField: dateColumn,
                                             currentPeriod: event.target.value,
@@ -926,14 +972,23 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         });
                                     }
                                     handleReplaceSubtree(keyPrefix, newSubtree);
-                                }, options: [
-                                    { label: `year${isPlural}`, value: 'year' },
-                                    { label: `quarter${isPlural}`, value: 'quarter' },
-                                    { label: `month${isPlural}`, value: 'month' },
-                                    { label: `week${isPlural}`, value: 'week' },
-                                    { label: `day${isPlural}`, value: 'day' },
-                                    { label: `hour${isPlural}`, value: 'hour' },
-                                ], width: 200 }), dateFilterType === 'equals' && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
+                                }, options: dateFilterType === 'in the previous' ||
+                                    dateFilterType === 'in the last'
+                                    ? [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ]
+                                    : [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `quarter${isPlural}`, value: 'quarter' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ], width: 200 }), dateFilterType === 'equals' && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
                                     handleChangeText([
                                         {
                                             value: e.target.value,
@@ -965,6 +1020,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -979,7 +1039,6 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                     { label: 'equals', value: 'EQUALS' },
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
-                                    // { label: 'equals', value: 'equals' },
                                 ], width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
@@ -1021,6 +1080,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1075,6 +1139,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1139,6 +1208,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1223,8 +1297,6 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                 },
                                 { label: 'in the current', value: 'IN_THE_CURRENT' },
                                 { label: 'equals', value: 'equals' },
-                                { label: 'is not null', value: 'IS NOT' },
-                                { label: 'is null', value: 'IS' },
                             ]
                             : []),
                     ];
@@ -1251,6 +1323,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                                                 newSubtree.left.column = event.target.value;
                                                 handleReplaceSubtree(keyPrefix, newSubtree);
                                             }
+                                            else if ((0, ast_1.isBoolColumnType)(columnType)) {
+                                                const newSubtree = (0, util_1.deepCopy)(constants_1.defaultBoolComparison);
+                                                newSubtree.left.column = event.target.value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
                                             else {
                                                 const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
                                                 newSubtree.left.args.value[0].column = event.target.value;
@@ -1373,6 +1450,22 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                             },
                         ]);
                     } }));
+            case 'bool':
+                return ((0, jsx_runtime_1.jsx)(SelectComponent, { value: node.value.toString(), onChange: (event) => {
+                        let formatted = true;
+                        if (event.target.value === 'false') {
+                            formatted = false;
+                        }
+                        handleChange([
+                            {
+                                value: formatted,
+                                path: keyPrefix + 'value',
+                            },
+                        ]);
+                    }, options: [
+                        { label: 'is true', value: 'true' },
+                        { label: 'is false', value: 'false' },
+                    ], width: 200 }));
             case 'function':
                 if (!node.args) {
                     return (0, jsx_runtime_1.jsx)("label", {});
@@ -1436,7 +1529,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             'NOT IN': 'is not',
             'NOT LIKE': 'is not exactly',
             '!=': 'is not exactly',
-            '=': 'is exactly',
+            '=': 'is',
             '<': 'is less than',
             '>': 'is greater than',
             '<=': 'is less than or equal to',
@@ -1448,7 +1541,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         };
         switch (node.type) {
             case 'binary_expr':
-                return ((0, jsx_runtime_1.jsx)(ui_1.TagWrapper, { keyPrefix: keyPrefix, formData: formData, activeEditItem: activeEditItem, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setCheckboxes: setCheckboxes, handleReplaceSubtree: handleReplaceSubtree, FilterPopover: FilterPopoverComponent, setActivePath: setActivePath, setOpenPopover: setOpenPopover, setIsPending: setIsPending, clearCheckboxes: clearCheckboxes, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, EditPopover: ui_1.EditPopover, Button: ButtonComponent, renderNode: renderNode, children: dateComparisonPartialMatch ??
+                return ((0, jsx_runtime_1.jsx)(ui_1.TagWrapper, { keyPrefix: keyPrefix, formData: formData, activeEditItem: activeEditItem, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setCheckboxes: setCheckboxes, handleReplaceSubtree: handleReplaceSubtree, FilterPopover: FilterPopoverComponent, setActivePath: setActivePath, setOpenPopover: setOpenPopover, setIsPending: setIsPending, clearCheckboxes: clearCheckboxes, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, EditPopover: ui_1.EditPopover, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, renderNode: renderNode, children: dateComparisonPartialMatch ??
                         dateEqualityPartialMatch ??
                         uniqueSentence ?? ((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] + ' ') : isTopLevel || topLevelBinaryOperator === 'OR' ? ((0, jsx_runtime_1.jsx)(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: SelectComponent })) : null, node.right &&
@@ -1473,6 +1566,8 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 return node.value;
             case 'null':
                 return 'null';
+            case 'bool':
+                return node.value.toString();
             case 'interval':
                 if (node.unit) {
                     // eg. `INTERVAL '90' DAY` -> "90 days"
@@ -1584,39 +1679,61 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                         justifyContent: 'end',
                     }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
     };
-    const fetchUponChange = async (baseAst, newFormData) => {
+    const fetchUponChange = async (baseAst, newFormData, query) => {
         // 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', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
+                const hostedBody = {
+                    metadata: {
+                        clientId: client.publicKey,
                         ast: { ...baseAst, where: curFormData },
                         publicKey: client.publicKey,
                         orgId: client.customerId,
-                    }),
-                });
+                        task: 'patterns',
+                    },
+                };
+                const cloudBody = {};
+                const data2 = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
                 const tables = (0, ast_1.getTableNames)(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
                 if (table !== currentTable) {
-                    await getDistinctValues(table);
+                    const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
+                    if (tableInfo) {
+                        const stringColumns = tableInfo.columns.filter((column) => {
+                            return (0, ast_1.isTextColumnType)(column.fieldType);
+                        });
+                        const stringNames = stringColumns.map((column) => column.name);
+                        const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                        const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
+                        joinedUniqueValues[table] = newUniqueValues;
+                        if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
+                            setUniqueValues(joinedUniqueValues);
+                        }
+                    }
                     setCurrentTable(table);
                 }
-                const data2 = await res2.json();
                 if (data2.rows && data2.rows.length) {
-                    const tables = (0, ast_1.getTableNames)(baseAst);
                     if (pivot) {
                         // check if any of the pivot fields aren't in the data2.fields array
                         if (!isValidPivot(data2.fields)) {
+                            const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
                             setPivot(null);
                             setPivotData(null);
                             setRows(data2.rows);
-                            setFields(data2.fields);
+                            setFields(processedFields);
+                            setFormattedRows(data2.rows.map((row) => {
+                                return processedFields.reduce((formattedRow, column) => {
+                                    // Apply the format function to each field in the row
+                                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                                        value: row[column.field],
+                                        format: column.format,
+                                    });
+                                    formattedRow[column.field] = formattedValue;
+                                    return formattedRow;
+                                }, {});
+                            }));
                             return;
                         }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
@@ -1628,13 +1745,37 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
                         const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
+                        const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
                         setPivotData(pivotedData || []);
                         setRows(data2.rows);
-                        setFields(data2.fields);
+                        setFields(processedFields);
+                        setFormattedRows(data2.rows.map((row) => {
+                            return processedFields.reduce((formattedRow, column) => {
+                                // Apply the format function to each field in the row
+                                const formattedValue = (0, valueFormatter_1.quillFormat)({
+                                    value: row[column.field],
+                                    format: column.format,
+                                });
+                                formattedRow[column.field] = formattedValue;
+                                return formattedRow;
+                            }, {});
+                        }));
                     }
                     else {
+                        const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
                         setRows(data2.rows);
-                        setFields(data2.fields);
+                        setFields(processedFields);
+                        setFormattedRows(data2.rows.map((row) => {
+                            return processedFields.reduce((formattedRow, column) => {
+                                // Apply the format function to each field in the row
+                                const formattedValue = (0, valueFormatter_1.quillFormat)({
+                                    value: row[column.field],
+                                    format: column.format,
+                                });
+                                formattedRow[column.field] = formattedValue;
+                                return formattedRow;
+                            }, {});
+                        }));
                         if (data2.errorMessage) {
                             setErrorMessage(`Error: ${data2.errorMessage}`);
                         }
@@ -1643,6 +1784,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 else {
                     setRows([]);
                     setFields([]);
+                    setFormattedRows([]);
                     setPivotData(null);
                 }
             }
@@ -1651,6 +1793,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             }
             finally {
                 setLoading(false);
+                setDataDisplayed(true);
             }
         }
     };
@@ -1721,6 +1864,14 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                     return x ?? 0.0;
                 };
             }
+            else if (formatType === 'boolean') {
+                columnFormatters[field.name] = (x) => {
+                    if (x) {
+                        return 'True';
+                    }
+                    return 'False';
+                };
+            }
             else {
                 columnFormatters[field.name] = (x) => x;
             }
@@ -1751,39 +1902,14 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         }
         return false;
     };
-    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 (!(0, ast_1.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 ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
-                setUniqueValues(newUniqueValues);
-            }
-        }
-    };
     const handleAsk = async (overridePrompt = '') => {
         if (!aiPrompt && !overridePrompt) {
             return;
         }
         try {
+            let errored = false;
             setLoading(true);
+            setErrorMessage('');
             let res, data, ast;
             let numRetries = 0;
             const MAX_RETRIES = 3;
@@ -1794,7 +1920,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 if (numRetries === MAX_RETRIES)
                     break;
                 if (!activeQuery || (ast && (isTableJoin || isSubquery(ast?.where)))) {
-                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic', {
+                    res = await fetch(`${exports.QUILL_SERVER}/magic`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
@@ -1804,7 +1930,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                     });
                 }
                 else {
-                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic/edit', {
+                    res = await fetch(`${exports.QUILL_SERVER}/magic/edit`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
@@ -1844,15 +1970,6 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 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, getAllPossibleColumns().map((col) => col.name));
-                // newAst = convertDateComparison(newAst); // TODO
-                if (table !== currentTable) {
-                    await getDistinctValues(table);
-                    setCurrentTable(table);
-                }
-                setPivotRowField(groupByPivot?.rowField);
-                setPivotColumnField(groupByPivot?.columnField);
-                setPivotValueField(groupByPivot?.valueField);
-                setPivotAggregation(groupByPivot?.aggregationType);
                 setSelectedColumns((0, util_1.deepCopy)(newAst).columns?.map((column) => {
                     if (column.expr.type === 'column_ref') {
                         return `${table}.${column.expr.column}`;
@@ -1875,21 +1992,78 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 newAst?.where ? newAst?.where?.operator : 'AND');
             }
             ast = newAst; // so we fetch data for newAst later.
-            const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    ast: ast,
+            const table = (0, ast_1.getTableNames)(newAst)[0] ?? initialTableName;
+            const tableAlias = (0, ast_1.getTableAliases)(newAst)[0] ?? initialTableName;
+            const hostedBody = {
+                metadata: {
+                    clientId: client.publicKey,
+                    ast,
                     publicKey: client.publicKey,
                     orgId: client.customerId,
-                }),
-            });
-            const data2 = await res2.json();
+                    task: 'patterns',
+                },
+            };
+            const cloudBody = {};
+            const data2 = await (0, dataFetcher_1.getData)(client, 'patterns', 'same-origin', hostedBody, cloudBody);
+            let currentUniqueValues = uniqueValues;
+            if (table !== currentTable) {
+                const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
+                if (tableInfo) {
+                    const stringColumns = tableInfo.columns.filter((column) => {
+                        return (0, ast_1.isTextColumnType)(column.fieldType);
+                    });
+                    const stringNames = stringColumns.map((column) => column.name);
+                    const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                    currentUniqueValues[table] = newUniqueValues;
+                    if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(currentUniqueValues)) {
+                        setUniqueValues(currentUniqueValues);
+                    }
+                }
+                setCurrentTable(table);
+            }
             if (data2.rows && data2.rows.length) {
-                const tables = (0, ast_1.getTableNames)(newAst);
-                if (groupByPivot) {
+                const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
+                let possiblePivot = true;
+                const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(processedFields, currentUniqueValues[table]);
+                if (groupByPivot &&
+                    ((groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField)) ||
+                        (groupByPivot.rowField &&
+                            !possibleColumns.rowFields.includes(groupByPivot?.rowField)) ||
+                        (groupByPivot.valueField &&
+                            !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')))) {
+                    possiblePivot = false;
+                    let errorMessageEnding = '';
+                    if (groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField || '')) {
+                        if (currentUniqueValues[table][groupByPivot?.columnField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} has more than 24 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} is not a proper column field.`;
+                        }
+                    }
+                    else if (groupByPivot.rowField &&
+                        !possibleColumns.rowFields.includes(groupByPivot?.rowField || '')) {
+                        if (currentUniqueValues[table][groupByPivot?.rowField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} has more than 36 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} is not a proper row field.`;
+                        }
+                    }
+                    else if (groupByPivot.valueField &&
+                        !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')) {
+                        errorMessageEnding = `The column ${groupByPivot?.valueField} is not a proper value field.`;
+                    }
+                    setErrorMessage(`The requested pivot is not supported. ${errorMessageEnding}`);
+                    errored = true;
+                }
+                if (groupByPivot && possiblePivot) {
+                    setPivotRowField(groupByPivot?.rowField);
+                    setPivotColumnField(groupByPivot?.columnField);
+                    setPivotValueField(groupByPivot?.valueField);
+                    setPivotAggregation(groupByPivot?.aggregationType);
                     const pivotedData = (0, PivotModal_1.generatePivotTable)(
                     // @ts-ignore
                     groupByPivot, data2.rows, [null, null, null], false);
@@ -1897,17 +2071,42 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                     setPivotData(pivotedData);
                     setPivot(groupByPivot);
                     setRows(data2.rows);
-                    setFields(data2.fields);
+                    setFields(processedFields);
+                    setFormattedRows(data2.rows.map((row) => {
+                        return processedFields.reduce((formattedRow, column) => {
+                            // Apply the format function to each field in the row
+                            const formattedValue = (0, valueFormatter_1.quillFormat)({
+                                value: row[column.field],
+                                format: column.format,
+                            });
+                            formattedRow[column.field] = formattedValue;
+                            return formattedRow;
+                        }, {});
+                    }));
                 }
                 else {
+                    const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
                     setRows(data2.rows);
-                    setFields(data2.fields);
+                    setFields(processedFields);
+                    setFormattedRows(data2.rows.map((row) => {
+                        return processedFields.reduce((formattedRow, column) => {
+                            // Apply the format function to each field in the row
+                            const formattedValue = (0, valueFormatter_1.quillFormat)({
+                                value: row[column.field],
+                                format: column.format,
+                            });
+                            formattedRow[column.field] = formattedValue;
+                            return formattedRow;
+                        }, {});
+                    }));
                 }
+                return data2.rows;
             }
             else {
                 setPivotData([]);
                 setRows([]);
                 setFields([]);
+                setFormattedRows([]);
             }
             if (data2.query) {
                 setActiveQuery(data2.query);
@@ -1918,9 +2117,6 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             if (data2.errorMessage) {
                 setErrorMessage(`Error: ${data2.errorMessage}`);
             }
-            else {
-                setErrorMessage('');
-            }
         }
         catch (e) {
             console.error(e);
@@ -1928,7 +2124,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
         }
         finally {
             setLoading(false);
-            setAiPrompt('');
+            setDataDisplayed(true);
         }
     };
     const handleDeleteColumn = (name) => {
@@ -2039,275 +2235,299 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                 flexDirection: 'row',
                 height: '100%',
                 ...containerStyle,
-            }, className: className, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                if (loadingSchema)
-                                    return;
-                                if (!openPopover) {
-                                    setOpenPopover('AddColumnPopover');
-                                }
-                            }, label: 'Select columns' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddColumnPopover', setIsOpen: (isOpen) => {
-                                if (!isOpen) {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }
-                            }, popoverTitle: "Select columns", popoverChildren: (0, jsx_runtime_1.jsx)(AddColumnPopover_1.default, { onSave: () => {
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
-                                    setBaseAst(newAst);
-                                    fetchSqlQuery(newAst);
-                                }, pivot: pivot, initialTableName: initialTableName, defaultAST: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 2.5,
-                                alignItems: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                        if (!selectedColumns ||
-                                            selectedColumns.length === 0 ||
-                                            loading) {
+            }, className: className, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        if (loadingSchema)
                                             return;
-                                        }
                                         if (!openPopover) {
-                                            const value = orderedColumnNames[0];
-                                            const [_table, column] = value.split('.');
-                                            const columnType = getColumnTypeByName(column);
-                                            if ((0, ast_1.isNumericColumnType)(columnType)) {
-                                                const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                                newSubtree.left.column = column;
-                                                setActiveEditItem(newSubtree);
-                                            }
-                                            else {
-                                                const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
-                                                newSubtree.left.args.value[0].column = column;
-                                                setActiveEditItem(newSubtree);
-                                            }
-                                            setOpenPopover('AddFilterPopover');
-                                            setActivePath('');
-                                            setIsPending(true);
+                                            setOpenPopover('AddColumnModal');
                                         }
-                                    }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                    }, label: 'Select columns' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
                                             setIsPending(false);
+                                            setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
                                         }
-                                    }, popoverTitle: 'Add filter', popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
-                                            if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
-                                                setIsPending(false);
-                                                setActivePath(null);
-                                                setOpenPopover(null);
-                                                clearCheckboxes();
-                                                setTimeout(() => {
-                                                    setActiveEditItem(null);
-                                                }, 300);
-                                            }
-                                            else {
-                                                setIsPending(false);
-                                                handleInsertion(activeEditItem, 'AND', false);
-                                                setActivePath(null);
-                                                setOpenPopover(null);
-                                                clearCheckboxes();
-                                                setTimeout(() => {
-                                                    setActiveEditItem(null);
-                                                }, 300);
-                                            }
-                                        }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
-                                    false && ( // temp removed the AddConditionPopover
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                    }, popoverTitle: "Select columns", popoverChildren: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { onSave: () => {
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
+                                            setBaseAst(newAst);
+                                            fetchSqlQuery(newAst);
+                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                    }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
                                                 if (!openPopover) {
-                                                    setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
-                                                    setOpenPopover('AddConditionPopover');
+                                                    const value = orderedColumnNames[0];
+                                                    const [_table, column] = value.split('.');
+                                                    const columnType = getColumnTypeByName(column);
+                                                    if ((0, ast_1.isNumericColumnType)(columnType)) {
+                                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
+                                                        newSubtree.left.column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    else {
+                                                        const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                                        newSubtree.left.args.value[0].column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    setOpenPopover('AddFilterPopover');
                                                     setActivePath('');
                                                     setIsPending(true);
                                                 }
-                                            }, label: "Add condition" }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
-                                                if (!isOpen) {
-                                                    setIsPending(false);
-                                                    setTimeout(() => {
-                                                        setActiveEditItem(null);
-                                                    }, 300);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }
-                                            }, popoverTitle: "Add condition", popoverChildren: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
-                                                    if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                            }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                position: 'relative',
+                                                ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                            }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                    if (!isOpen) {
                                                         setIsPending(false);
-                                                        setTimeout(() => {
-                                                            setActiveEditItem(null);
-                                                        }, 300);
                                                         setActivePath(null);
                                                         setOpenPopover(null);
-                                                        clearCheckboxes();
-                                                    }
-                                                    else {
-                                                        setIsPending(false);
-                                                        handleInsertion(activeEditItem, topLevelBinaryOperator, true);
                                                         setTimeout(() => {
+                                                            clearCheckboxes();
                                                             setActiveEditItem(null);
                                                         }, 300);
-                                                        setActivePath(null);
-                                                        setOpenPopover(null);
-                                                        clearCheckboxes();
                                                     }
-                                                } }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { 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, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                                setPivot(null);
-                                setPivotData(null);
-                            }, 
-                            // TODOs
-                            selectPivot: (pivot) => {
-                                if (!pivot)
-                                    return;
-                                const newAst = { ...baseAst };
-                                newAst.orderby = null;
-                                setBaseAst(newAst); // trigger refetch
-                                setPivot(pivot);
-                                const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
-                                setPivotData(pivotedData || []);
-                            }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], recommendPivotCount: 3, SecondaryButtonComponent: SecondaryButtonComponent }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
-                                pivot: pivot,
-                                rows: pivotData?.rows || [],
-                                columns: pivotData?.columns || [],
-                            }, theme: theme, index: 0, onSelectPivot: () => {
-                                setIsEdittingPivot(true);
-                                setShowPivotPopover(true);
-                                setPivotRowField(pivot?.rowField);
-                                setPivotColumnField(pivot?.columnField);
-                                setPivotValueField(pivot?.valueField);
-                                setPivotAggregation(pivot?.aggregationType);
-                                setPivotPopUpTitle('Edit Pivot');
-                            }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
-                                setPivot(null);
-                                setPivotData(null);
-                                setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
-                            }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
-                                    type: pivot.sortDirection,
-                                    expr: { type: 'column_ref', column: pivot.rowField },
-                                }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                    setPivot({ ...pivot, sort: false });
-                                    setBaseAst((0, util_1.deepCopy)(baseAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(baseAst);
-                                    }
-                                }, onSave: (column, direction) => {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    setOpenPopover(null);
-                                    setBaseAst((0, util_1.deepCopy)(baseAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(baseAst);
-                                    }
-                                }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setOpenPopover(null);
-                                    if (column === '')
-                                        return;
-                                    const newAst = { ...baseAst };
-                                    newAst.orderby[id] = {
-                                        expr: {
-                                            type: 'column_ref',
-                                            table: null,
-                                            column: column,
-                                        },
-                                        type: direction,
-                                    };
-                                    // look through the columns
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                    setBaseAst((0, util_1.deepCopy)(newAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(newAst);
-                                    }
-                                }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                    const newAst = { ...baseAst };
-                                    newAst.orderby.splice(id, 1);
-                                    setBaseAst((0, util_1.deepCopy)(newAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(newAst);
-                                    }
-                                }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                if (!selectedColumns || selectedColumns.length === 0) {
-                                    return;
-                                }
-                                if (!openPopover) {
-                                    setOpenPopover('AddSortPopover');
-                                }
-                            }, label: "Add sort" }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                                if (!isOpen) {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }
-                            }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { 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: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
-                                    const newAst = { ...baseAst };
-                                    newAst.limit = null;
-                                    setBaseAst((0, util_1.deepCopy)(newAst));
-                                    fetchSqlQuery(newAst);
-                                }, onSave: (limit) => {
-                                    const newAst = { ...baseAst };
-                                    newAst.limit = {
-                                        seperator: '',
-                                        value: [
-                                            {
-                                                type: 'number',
-                                                value: limit,
-                                            },
-                                        ],
-                                    };
-                                    setOpenPopover(null);
-                                    setBaseAst((0, util_1.deepCopy)(newAst));
-                                    fetchSqlQuery(newAst);
-                                }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                }, popoverTitle: 'Add filter', popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
+                                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                                            setIsPending(false);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            setTimeout(() => {
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                        }
+                                                        else {
+                                                            setIsPending(false);
+                                                            handleInsertion(activeEditItem, 'AND', false);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            setTimeout(() => {
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                        }
+                                                    }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
+                                            false && ( // temp removed the AddConditionPopover
+                                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                        if (!openPopover) {
+                                                            setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
+                                                            setOpenPopover('AddConditionPopover');
+                                                            setActivePath('');
+                                                            setIsPending(true);
+                                                        }
+                                                    }, label: "Add condition" }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setTimeout(() => {
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add condition", popoverChildren: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
+                                                            if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                                                setIsPending(false);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                setActivePath(null);
+                                                                setOpenPopover(null);
+                                                            }
+                                                            else {
+                                                                setIsPending(false);
+                                                                handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                setActivePath(null);
+                                                                setOpenPopover(null);
+                                                            }
+                                                        } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                        setPivot(null);
+                                        setPivotData(null);
+                                    }, 
+                                    // TODOs
+                                    selectPivot: (pivot) => {
+                                        if (!pivot)
+                                            return;
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby = null;
+                                        setBaseAst(newAst); // trigger refetch
+                                        setPivot(pivot);
+                                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
+                                        setPivotData(pivotedData || []);
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                        pivot: pivot,
+                                        rows: pivotData?.rows || [],
+                                        columns: pivotData?.columns || [],
+                                    }, theme: theme, index: 0, onSelectPivot: () => {
+                                        setIsEdittingPivot(true);
+                                        setShowPivotPopover(true);
+                                        setPivotRowField(pivot?.rowField);
+                                        setPivotColumnField(pivot?.columnField);
+                                        setPivotValueField(pivot?.valueField);
+                                        setPivotAggregation(pivot?.aggregationType);
+                                        setPivotPopUpTitle('Edit pivot');
+                                    }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
+                                        setPivot(null);
+                                        setPivotData(null);
+                                        setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
+                                    }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
+                                            type: pivot.sortDirection,
+                                            expr: { type: 'column_ref', column: pivot.sortField },
+                                        }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                            setPivot({ ...pivot, sort: false });
+                                            setBaseAst((0, util_1.deepCopy)(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, onSave: (column, direction) => {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            setOpenPopover(null);
+                                            setBaseAst((0, util_1.deepCopy)(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setOpenPopover(null);
+                                            if (column === '')
+                                                return;
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby[id] = {
+                                                expr: {
+                                                    type: 'column_ref',
+                                                    table: null,
+                                                    column: column,
+                                                },
+                                                type: direction,
+                                            };
+                                            // look through the columns
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby.splice(id, 1);
+                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
+                                            return;
+                                        }
                                         if (!openPopover) {
-                                            setOpenPopover('AddLimitPopover');
+                                            setOpenPopover('AddSortPopover');
                                         }
-                                    }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                    }, label: "Add sort" }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
                                             setIsPending(false);
                                             setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
                                         }
-                                    }, popoverTitle: "Limit", popoverChildren: (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "loading_input_limit", value: '0', width: 120, onChange: () => { } }) })] }))] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsxs)("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
+                                    }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = null;
+                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, onSave: (limit) => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = {
+                                                seperator: '',
+                                                value: [
+                                                    {
+                                                        type: 'number',
+                                                        value: limit,
+                                                    },
+                                                ],
+                                            };
+                                            setOpenPopover(null);
+                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
+                                                if (!openPopover) {
+                                                    setOpenPopover('AddLimitPopover');
+                                                }
+                                            }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: () => { } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
-                                padding: 1,
-                            }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: clearAllState, label: "New report" }))] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableComponent, { isLoading: true, rows: [], columns: [] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                    ? 'hidden'
+                                    : 'visible',
+                            }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
+                                            ? 'Ask a follow-up question...'
+                                            : 'Ask a question...', width: askAIInputWidth !== -1
+                                            ? askAIInputWidth
+                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: 'Add to dashboard', onClick: () => { } })] })] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: 'Add to dashboard', onClick: () => { } })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
             display: 'flex',
@@ -2316,339 +2536,405 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
             overflowY: 'auto',
             boxSizing: 'border-box',
             ...containerStyle,
-        }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                            if (!orderedColumnNames) {
-                                return;
-                            }
-                            if (!openPopover) {
-                                setOpenPopover('AddColumnPopover');
-                            }
-                        }, label: "Select columns" }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddColumnPopover', setIsOpen: (isOpen) => {
-                            if (!isOpen) {
-                                // delay onClose callback so onClick no-ops
-                                setTimeout(() => {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }, 100);
-                            }
-                        }, popoverTitle: "Select columns", popoverChildren: (0, jsx_runtime_1.jsx)(AddColumnPopover_1.default, { onSave: () => {
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
-                                setBaseAst(ast);
-                                fetchSqlQuery(ast);
-                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2.5,
-                            alignItems: 'flex-start',
-                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0 || loading) {
+        }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                    if (loadingSchema)
+                                        return;
+                                    if (!orderedColumnNames) {
                                         return;
                                     }
                                     if (!openPopover) {
-                                        const value = orderedColumnNames[0];
-                                        const [_table, column] = value.split('.');
-                                        const columnType = getColumnTypeByName(column);
-                                        if ((0, ast_1.isNumericColumnType)(columnType)) {
-                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                            newSubtree.left.column = column;
-                                            setActiveEditItem(newSubtree);
-                                        }
-                                        else {
-                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
-                                            newSubtree.left.args.value[0].column = column;
-                                            setActiveEditItem(newSubtree);
-                                        }
-                                        setOpenPopover('AddFilterPopover');
-                                        setActivePath('');
-                                        setIsPending(true);
+                                        setOpenPopover('AddColumnModal');
                                     }
-                                }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                }, label: "Select columns" }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                     if (!isOpen) {
                                         // delay onClose callback so onClick no-ops
                                         setTimeout(() => {
                                             setIsPending(false);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            clearCheckboxes();
                                             setActiveEditItem(null);
-                                        }, 200);
-                                    }
-                                }, popoverTitle: "Add filter", popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
-                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
-                                            setIsPending(false);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
-                                        }
-                                        else {
-                                            setIsPending(false);
-                                            handleInsertion(activeEditItem, 'AND', false);
                                             setActivePath(null);
                                             setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
-                                        }
-                                    }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
-                                false && ( // temp removed the AddConditionPopover
-                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        }, 100);
+                                    }
+                                }, title: "Select columns", children: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { onSave: () => {
+                                        setActiveEditItem(null);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                    }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                        setBaseAst(ast);
+                                        fetchSqlQuery(ast);
+                                    }, pivot: pivot, initialTableName: initialTableName, defaultAST: constants_1.defaultAST, defaultTable: constants_1.defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: renderSentence(formData, formData, '', true) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'flex-start',
+                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            if (!selectedColumns ||
+                                                selectedColumns.length === 0 ||
+                                                loading) {
+                                                return;
+                                            }
                                             if (!openPopover) {
-                                                setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
-                                                setOpenPopover('AddConditionPopover');
+                                                const value = orderedColumnNames[0];
+                                                const [_table, column] = value.split('.');
+                                                const columnType = getColumnTypeByName(column);
+                                                if ((0, ast_1.isNumericColumnType)(columnType)) {
+                                                    const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
+                                                    newSubtree.left.column = column;
+                                                    setActiveEditItem(newSubtree);
+                                                }
+                                                else {
+                                                    const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                                    newSubtree.left.args.value[0].column = column;
+                                                    setActiveEditItem(newSubtree);
+                                                }
+                                                setOpenPopover('AddFilterPopover');
                                                 setActivePath('');
                                                 setIsPending(true);
                                             }
-                                        }, label: 'Add condition' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
-                                            if (!isOpen) {
-                                                // delay onClose callback so onClick no-ops
-                                                setTimeout(() => {
-                                                    setIsPending(false);
-                                                    setActiveEditItem(null);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }, 200);
-                                            }
-                                        }, popoverChildren: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
-                                                if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
-                                                    setIsPending(false);
-                                                    setTimeout(() => {
-                                                        setActiveEditItem(null);
-                                                    }, 300);
-                                                    setActivePath(null);
+                                        }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    // delay onClose callback so onClick no-ops
                                                     setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }
-                                                else {
-                                                    setIsPending(false);
-                                                    handleInsertion(activeEditItem, topLevelBinaryOperator, true);
                                                     setTimeout(() => {
+                                                        setIsPending(false);
+                                                        setActivePath(null);
+                                                        clearCheckboxes();
                                                         setActiveEditItem(null);
                                                     }, 300);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
                                                 }
-                                            } }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { 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: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                            setPivot(null);
-                            setPivotData(null);
-                        }, selectPivot: (pivot) => {
-                            if (!pivot)
-                                return;
-                            const newAst = { ...baseAst };
-                            newAst.orderby = null;
-                            if (pivot.rowFieldType === 'date') {
-                                pivot['sort'] = true;
-                                pivot['sortDirection'] = 'ASC';
-                            }
-                            setBaseAst(newAst); // trigger refetch
-                            setPivot(pivot);
-                            const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
-                            setPivotData(pivotedData || []);
-                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
-                            pivot: pivot,
-                            rows: pivotData?.rows || [],
-                            columns: pivotData?.columns || [],
-                        }, theme: theme, index: 0, onSelectPivot: () => {
-                            setIsEdittingPivot(true);
-                            setShowPivotPopover(true);
-                            setPivotRowField(pivot?.rowField);
-                            setPivotColumnField(pivot?.columnField);
-                            setPivotValueField(pivot?.valueField);
-                            setPivotAggregation(pivot?.aggregationType);
-                            setPivotPopUpTitle('Edit Pivot');
-                        }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
-                            setPivot(null);
-                            setPivotData(null);
-                            setBaseAst((0, util_1.deepCopy)(baseAst));
-                        }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
-                                type: pivot.sortDirection,
-                                expr: { type: 'column_ref', column: pivot.rowField },
-                            }, columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: false });
-                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    return;
-                                }
-                                setBaseAst((0, util_1.deepCopy)(baseAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                            }, onSave: (column, direction) => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    return;
-                                }
-                                setOpenPopover(null);
-                                setBaseAst((0, util_1.deepCopy)(baseAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: false });
-                                    return;
-                                }
-                                const newAst = { ...baseAst };
-                                newAst.orderby.splice(id, 1);
-                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, onSave: (column, direction) => {
-                                if (pivot) {
-                                    setPivot({
-                                        ...pivot,
-                                        sort: true,
-                                        sortDirection: direction,
-                                    });
-                                    return;
-                                }
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setOpenPopover(null);
-                                if (column === '')
-                                    return;
-                                const newAst = { ...baseAst };
-                                newAst.orderby[id] = {
-                                    expr: {
-                                        type: 'column_ref',
-                                        table: null,
-                                        column: column,
-                                    },
-                                    type: direction,
-                                };
-                                // look through the columns
-                                setActivePath(null);
-                                setOpenPopover(null);
-                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                            if (!selectedColumns || selectedColumns.length === 0) {
-                                return;
-                            }
-                            if (!openPopover) {
-                                setOpenPopover('AddSortPopover');
-                            }
-                        }, label: 'Add sort' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                            if (!isOpen) {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }
-                        }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
-                                if (column === '')
-                                    return;
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                    setBaseAst((0, util_1.deepCopy)(baseAst));
-                                    return;
-                                }
-                                const newAst = { ...baseAst };
-                                if (!newAst.orderby)
-                                    newAst.orderby = [];
-                                newAst.orderby.push({
-                                    expr: { type: 'column_ref', column },
-                                    type: direction,
-                                });
-                                // look through the columns
-                                setActivePath(null);
-                                setOpenPopover(null);
-                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { 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: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
-                                const newAst = { ...baseAst };
-                                newAst.limit = null;
-                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, onSave: (limit) => {
-                                const newAst = { ...baseAst };
-                                newAst.limit = {
-                                    seperator: '',
-                                    value: [
-                                        {
-                                            type: 'number',
-                                            value: limit,
-                                        },
-                                    ],
-                                };
-                                setOpenPopover(null);
-                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0) {
-                                        return;
-                                    }
-                                    if (!baseAst) {
+                                            }, popoverTitle: "Add filter", popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
+                                                    if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                                        setOpenPopover(null);
+                                                        clearCheckboxes();
+                                                        setIsPending(false);
+                                                        setTimeout(() => {
+                                                            setActivePath(null);
+                                                            setActiveEditItem(null);
+                                                        }, 300);
+                                                    }
+                                                    else {
+                                                        setOpenPopover(null);
+                                                        setIsPending(false);
+                                                        handleInsertion(activeEditItem, 'AND', false);
+                                                        setActivePath(null);
+                                                        setTimeout(() => {
+                                                            clearCheckboxes();
+                                                            setActiveEditItem(null);
+                                                        }, 300);
+                                                    }
+                                                }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
+                                        false && ( // temp removed the AddConditionPopover
+                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                    if (!openPopover) {
+                                                        setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
+                                                        setOpenPopover('AddConditionPopover');
+                                                        setActivePath('');
+                                                        setIsPending(true);
+                                                    }
+                                                }, label: 'Add condition' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                    if (!isOpen) {
+                                                        // delay onClose callback so onClick no-ops
+                                                        setTimeout(() => {
+                                                            setIsPending(false);
+                                                            setActiveEditItem(null);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            clearCheckboxes();
+                                                        }, 200);
+                                                    }
+                                                }, popoverChildren: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
+                                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                                            setIsPending(false);
+                                                            setTimeout(() => {
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            clearCheckboxes();
+                                                        }
+                                                        else {
+                                                            setIsPending(false);
+                                                            handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                            setTimeout(() => {
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            clearCheckboxes();
+                                                        }
+                                                    } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                    setPivot(null);
+                                    setPivotData(null);
+                                }, selectPivot: (pivot) => {
+                                    if (!pivot)
                                         return;
+                                    const newAst = { ...baseAst };
+                                    newAst.orderby = null;
+                                    if (pivot.rowFieldType === 'date') {
+                                        pivot['sort'] = true;
+                                        pivot['sortDirection'] = 'ASC';
                                     }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddLimitPopover');
-                                    }
-                                }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
-                                    if (!isOpen) {
+                                    setBaseAst(newAst); // trigger refetch
+                                    setPivot(pivot);
+                                    const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
+                                    setPivotData(pivotedData || []);
+                                    setErrorMessage('');
+                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                    pivot: pivot,
+                                    rows: pivotData?.rows || [],
+                                    columns: pivotData?.columns || [],
+                                }, theme: theme, index: 0, onSelectPivot: () => {
+                                    setIsEdittingPivot(true);
+                                    setShowPivotPopover(true);
+                                    setPivotRowField(pivot?.rowField);
+                                    setPivotColumnField(pivot?.columnField);
+                                    setPivotValueField(pivot?.valueField);
+                                    setPivotAggregation(pivot?.aggregationType);
+                                    setPivotPopUpTitle('Edit pivot');
+                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
+                                    setPivot(null);
+                                    setPivotData(null);
+                                    setBaseAst((0, util_1.deepCopy)(baseAst));
+                                }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
+                                        type: pivot.sortDirection,
+                                        expr: { type: 'column_ref', column: pivot.sortField },
+                                    }, columns: pivot
+                                        ? pivot.columnField
+                                            ? [`.${pivot.rowField}`]
+                                            : [
+                                                `.${pivot.rowField}`,
+                                                `.${pivot.valueField || 'count'}`,
+                                            ]
+                                        : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                        if (pivot) {
+                                            setPivot({ ...pivot, sort: false });
+                                            const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, [null, null, null], false);
+                                            setPivotData(pivotedData || []);
+                                            setErrorMessage('');
+                                            return;
+                                        }
+                                        setBaseAst((0, util_1.deepCopy)(baseAst));
+                                        fetchSqlQuery((0, util_1.deepCopy)(baseAst));
+                                    }, onSave: (column, direction) => {
+                                        if (pivot) {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            const pivotedData = (0, PivotModal_1.generatePivotTable)({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            }, rows, [null, null, null], false);
+                                            setPivotData(pivotedData || []);
+                                            setErrorMessage('');
+                                            return;
+                                        }
+                                        setOpenPopover(null);
+                                        setBaseAst((0, util_1.deepCopy)(baseAst));
+                                        fetchSqlQuery((0, util_1.deepCopy)(baseAst));
+                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                        if (pivot) {
+                                            setPivot({ ...pivot, sort: false });
+                                            return;
+                                        }
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby.splice(id, 1);
+                                        setBaseAst((0, util_1.deepCopy)(newAst));
+                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                    }, onSave: (column, direction) => {
+                                        if (pivot) {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            return;
+                                        }
                                         setIsPending(false);
                                         setActiveEditItem(null);
+                                        setOpenPopover(null);
+                                        if (column === '')
+                                            return;
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby[id] = {
+                                            expr: {
+                                                type: 'column_ref',
+                                                table: null,
+                                                column: column,
+                                            },
+                                            type: direction,
+                                        };
+                                        // look through the columns
                                         setActivePath(null);
                                         setOpenPopover(null);
+                                        setBaseAst((0, util_1.deepCopy)(newAst));
+                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                        return;
+                                    }
+                                    if (!openPopover) {
+                                        setOpenPopover('AddSortPopover');
                                     }
-                                }, popoverTitle: "Limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                }, label: 'Add sort' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    position: 'relative',
+                                    ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                        if (!isOpen) {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }
+                                    }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot
+                                            ? pivot.columnField
+                                                ? [`.${pivot.rowField}`]
+                                                : [
+                                                    `.${pivot.rowField}`,
+                                                    `.${pivot.valueField || 'count'}`,
+                                                ]
+                                            : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
+                                            if (column === '')
+                                                return;
+                                            if (pivot) {
+                                                const sortFieldType = column === (pivot.valueField || 'count')
+                                                    ? 'number'
+                                                    : pivot.rowFieldType;
+                                                setPivot({
+                                                    ...pivot,
+                                                    sort: true,
+                                                    sortDirection: direction,
+                                                    sortField: column,
+                                                    sortFieldType: sortFieldType,
+                                                });
+                                                const pivotedData = (0, PivotModal_1.generatePivotTable)({
+                                                    ...pivot,
+                                                    sort: true,
+                                                    sortDirection: direction,
+                                                    sortField: column,
+                                                    sortFieldType: sortFieldType,
+                                                }, rows, [null, null, null], false);
+                                                setErrorMessage('');
+                                                setPivotData(pivotedData || []);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                                setBaseAst((0, util_1.deepCopy)(baseAst));
+                                                return;
+                                            }
+                                            const newAst = { ...baseAst };
+                                            if (!newAst.orderby)
+                                                newAst.orderby = [];
+                                            newAst.orderby.push({
+                                                expr: { type: 'column_ref', column },
+                                                type: direction,
+                                            });
+                                            // look through the columns
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                            setBaseAst((0, util_1.deepCopy)(newAst));
+                                            fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                        } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                        const newAst = { ...baseAst };
+                                        newAst.limit = null;
+                                        setBaseAst((0, util_1.deepCopy)(newAst));
+                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                    }, onSave: (limit) => {
                                         const newAst = { ...baseAst };
                                         newAst.limit = {
                                             seperator: '',
                                             value: [
                                                 {
                                                     type: 'number',
-                                                    value: Number(limit),
+                                                    value: limit,
                                                 },
                                             ],
                                         };
                                         setOpenPopover(null);
                                         setBaseAst((0, util_1.deepCopy)(newAst));
                                         fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                    } }) })] }))] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsxs)("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                                    }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                                return;
+                                            }
+                                            if (!baseAst) {
+                                                return;
+                                            }
+                                            if (!openPopover) {
+                                                setOpenPopover('AddLimitPopover');
+                                            }
+                                        }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                    const newAst = { ...baseAst };
+                                                    newAst.limit = {
+                                                        seperator: '',
+                                                        value: [
+                                                            {
+                                                                type: 'number',
+                                                                value: Number(limit),
+                                                            },
+                                                        ],
+                                                    };
+                                                    setOpenPopover(null);
+                                                    setBaseAst((0, util_1.deepCopy)(newAst));
+                                                    fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                                } }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: 12,
-                            padding: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: applyFormatting({
-                            rows: pivotData?.rows || rows,
-                            fields: pivotData?.fields || fields,
-                        }, baseAst?.columns ?? []), columns: pivot
+                            visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                ? 'hidden'
+                                : 'visible',
+                        }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
+                                        ? askAIInputWidth
+                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: pivotData?.rows || formattedRows, columns: pivot
                             ? pivotData?.columns || emptyPivotColumns()
                             : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                 return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
@@ -2656,13 +2942,22 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => voi
                             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)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                            width: '100%',
+                        }, children: [errorMessage ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    overflow: 'hidden',
+                                    width: '100%',
+                                    gap: 12,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            color: 'red',
+                                            fontSize: 14,
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                        }, children: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: isAdminEnabled, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: fields, fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
 }
 exports.default = ReportBuilder;