@quillsql/react 2.11.16 → 2.11.17

package/dist/cjs/ReportBuilder.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-unused-vars */
 const react_1 = require("react");
 const UiComponents_1 = require("./components/UiComponents");
 const core_1 = require("@dnd-kit/core");
@@ -25,11 +26,10 @@ const AddColumnPopover_1 = __importDefault(require("./components/ReportBuilder/A
 const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const PivotList_1 = require("./internals/ReportBuilder/PivotList");
-const QuillTable_1 = __importDefault(require("./components/QuillTable"));
-const QuillSelect_1 = require("./components/QuillSelect");
 const textProcessing_1 = require("./utils/textProcessing");
 const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
 const width_1 = require("./utils/width");
+const QuillSelect_1 = require("./components/QuillSelect");
 /**
  * Quill Report Builder
  *
@@ -37,8 +37,31 @@ const width_1 = require("./utils/width");
  * then edit them on the fly. Once users have constructed a query they like,
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ReportBuilder />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ReportBuilder
+ *   initialTableName="transactions"
+ *   TableComponent={MyTable}
+ *   SelectComponent={MySelect}
+ *   ButtonComponent={MyButton}
+ *   PopoverComponent={MyPopover}
+ *   TextInputComponent={MyTextInput}
+ *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
+ * />
+ * ```
+ *
+ * ### Report Builder API
+ * @see https://docs.quillsql.com/components/report-builder
  */
-function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, DeleteButton = UiComponents_1.MemoizedDeleteButton, TextInput = UiComponents_2.QuillTextInput, Select = QuillSelect_1.QuillSelectComponent, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
+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, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, TextComponent = UiComponents_1.MemoizedText, isAdminEnabled = false, isAIEnabled = true, containerStyle, }) {
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -130,9 +153,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             setAiPrompt('');
             setBaseAst(null);
             setFormData(null);
-            setOrderedColumnNames([]);
             setSelectedColumns([]);
             setSchemaTables([]);
+            setOrderedColumnNames([]);
             setActiveQuery('');
             setActiveEditItem(null);
             setActivePath(null);
@@ -143,6 +166,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             setFields([]);
             setTopLevelBinaryOperator('AND');
             setEditPopoverKey(null);
+            setErrorMessage('');
             // setUniqueValues({});
             setPivot(null);
             setPivotData(null);
@@ -242,7 +266,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         const result = [];
         const table = tables[0];
         const { valueField, rowField, columnField } = pivot;
-        if (columnField && uniqueValues[table][columnField]) {
+        if (columnField &&
+            uniqueValues[table] &&
+            uniqueValues[table][columnField]) {
             result.push(...Object.keys(uniqueValues[table][columnField]));
         }
         result.push(valueField, rowField);
@@ -280,6 +306,26 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         }
     };
     (0, react_1.useEffect)(() => {
+        const loadTable = async (tables) => {
+            if (!tables)
+                return;
+            setLoading(true);
+            await getDistinctValues(initialTableName, tables);
+            const columnsForTable = tables
+                .find((t) => t.name === initialTableName)
+                ?.columns.map((c) => c.name)
+                .sort((a, b) => {
+                const aIsId = a.endsWith('.id') || a.endsWith('_id') || a.endsWith('Id');
+                const bIsId = b.endsWith('.id') || b.endsWith('_id') || b.endsWith('Id');
+                if (aIsId && !bIsId)
+                    return 1;
+                if (bIsId && !aIsId)
+                    return -1;
+                return 0;
+            });
+            await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
+            setInitialLoad(false);
+        };
         const fetchSchema = async () => {
             try {
                 setLoadingSchema(true);
@@ -305,8 +351,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 setOrderedColumnNames((tables ?? []).flatMap((table) => table.columns
                     .map((c) => `${table.name}.${c.name}`)
                     .sort((a, b) => {
-                    const aIsId = a.endsWith('.id') || a.endsWith('_id');
-                    const bIsId = b.endsWith('.id') || b.endsWith('_id');
+                    const aIsId = a.endsWith('.id') || a.endsWith('_id') || a.endsWith('Id');
+                    const bIsId = b.endsWith('.id') || b.endsWith('_id') || b.endsWith('Id');
                     if (aIsId && !bIsId)
                         return 1;
                     if (bIsId && !aIsId)
@@ -314,13 +360,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     return 0;
                 })));
                 if (initialTableName && initialLoad) {
-                    setInitialLoad(false);
-                    setLoading(true);
-                    await getDistinctValues(initialTableName, tables);
-                    const columnsForTable = tables
-                        .find((t) => t.name === initialTableName)
-                        ?.columns.map((c) => c.name);
-                    await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
+                    await loadTable(tables);
                 }
                 setLoadingSchema(false);
             }
@@ -331,7 +371,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         if (schemaTables.length === 0) {
             fetchSchema();
         }
-    }, [schemaTables]);
+        else if (initialLoad && initialTableName) {
+            loadTable(schemaTables);
+        }
+    }, [schemaTables, initialTableName]);
     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
@@ -738,7 +781,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     // see onChange callback handleChange
                     // eslint-disable-next-line no-unused-vars
                     dateColumnPath, dateFilterType, intervalCount, intervalType, intervalPaths, } = (0, util_1.getDateFilterInfo)(node);
-                    const isPlural = intervalCount !== 1 ? 's' : '';
+                    const isPlural = intervalCount !== 1 && dateFilterType !== 'in the current'
+                        ? 's'
+                        : '';
                     // Pull off the string literal date for "equals" comparisons
                     const rawDateStringEquals = node.right?.value ??
                         node.right?.args?.value[1]?.column ??
@@ -748,50 +793,50 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             'node.right.args.value.1.column') ??
                         (node.right?.args?.value[1]?.value &&
                             'node.right.args.value.1.value');
-                    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 20 }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateColumn, onChange: (value) => {
-                                    const columnType = getColumnTypeByName(value);
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 20 }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: dateColumn, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
                                     }
                                     else if ((0, ast_1.isNumericColumnType)(columnType)) {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                        newSubtree.left.column = value;
+                                        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 = value;
+                                        newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
                                 }, options: getAllPossibleColumns().map((column) => ({
                                     label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                                     value: column.name,
-                                })) }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
-                                    if (value === dateFilterType)
+                                })) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: dateFilterType, onChange: (event) => {
+                                    if (event.target.value === dateFilterType)
                                         return null;
                                     let newSubtree = {};
                                     // TODO: implement one for each database type (eg. pg, snowflake, etc.)
-                                    if (value === 'in the last') {
+                                    if (event.target.value === 'in the last') {
                                         newSubtree = (0, postgres_1.generateLastNPeriodsPostgres)({
                                             dateField: dateColumn,
                                             intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
                                         });
                                     }
-                                    else if (value === 'in the previous') {
+                                    else if (event.target.value === 'in the previous') {
                                         newSubtree = (0, postgres_1.generatePreviousPeriodPostgres)({
                                             dateField: dateColumn,
                                             intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
                                             currentPeriod: intervalType,
                                         });
                                     }
-                                    else if (value === 'in the current') {
+                                    else if (event.target.value === 'in the current') {
                                         newSubtree = (0, postgres_1.generateCurrentPeriodPostgres)({
                                             dateField: dateColumn,
                                             currentPeriod: intervalType,
                                         });
                                     }
-                                    else if (value === 'equals') {
+                                    else if (event.target.value === 'equals') {
                                         newSubtree = (0, postgres_1.generateEqualsPostgres)({
                                             dateField: dateColumn,
                                             currentPeriod: intervalType,
@@ -805,7 +850,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'in the previous', value: 'in the previous' },
                                     { label: 'in the current', value: 'in the current' },
                                     { label: 'equals', value: 'equals' },
-                                ] }), !['in the current', 'equals'].includes(dateFilterType) && ((0, jsx_runtime_1.jsx)(TextInput, { id: "date_filter_interval_count", value: intervalCount, width: 70, onChange: (e) => {
+                                ] }), !['in the current', 'equals'].includes(dateFilterType) && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "date_filter_interval_count", value: intervalCount?.toString() ?? '', width: 70, onChange: (e) => {
                                     if (Number.isNaN(parseFloat(e.target.value || '0'))) {
                                         alert('Please input a number.');
                                         return;
@@ -817,13 +862,13 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                             path: keyPrefix + intervalPath,
                                         },
                                     ]));
-                                } })), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: intervalType, onChange: (value) => {
+                                } })), (0, jsx_runtime_1.jsx)(SelectComponent, { value: intervalType, onChange: (event) => {
                                     if (intervalPaths.length === 1) {
                                         handleChangeText([
                                             {
                                                 value: intervalCount !== null
-                                                    ? `${intervalCount} ${value}${isPlural}`
-                                                    : value,
+                                                    ? `${intervalCount} ${event.target.value}${isPlural}`
+                                                    : event.target.value,
                                                 path: keyPrefix + intervalPaths[0],
                                             },
                                         ]);
@@ -833,14 +878,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     if (dateFilterType === 'equals') {
                                         newSubtree = (0, postgres_1.generateEqualsPostgres)({
                                             dateField: dateColumn,
-                                            currentPeriod: value,
+                                            currentPeriod: event.target.value,
                                             timestamp: rawDateStringEquals,
                                         });
                                     }
                                     else {
                                         newSubtree = (0, postgres_1.generateCurrentPeriodPostgres)({
                                             dateField: dateColumn,
-                                            currentPeriod: value,
+                                            currentPeriod: event.target.value,
                                         });
                                     }
                                     handleReplaceSubtree(keyPrefix, newSubtree);
@@ -851,7 +896,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: `week${isPlural}`, value: 'week' },
                                     { label: `day${isPlural}`, value: 'day' },
                                     { label: `hour${isPlural}`, value: 'hour' },
-                                ] }), dateFilterType === 'equals' && ((0, jsx_runtime_1.jsx)(TextInput, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
+                                ] }), 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,
@@ -872,24 +917,24 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
-                                    const columnType = getColumnTypeByName(value);
+                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
                                     }
                                     else if ((0, ast_1.isNumericColumnType)(columnType)) {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                        newSubtree.left.column = value;
+                                        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 = value;
+                                        newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_LAST', onChange: (value) => {
-                                    handleOperatorChange(value, node, keyPrefix, dateColumn);
+                                }, options: options }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 'IN_THE_LAST', onChange: (event) => {
+                                    handleOperatorChange(event.target.value, node, keyPrefix, dateColumn);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
@@ -897,15 +942,18 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(TextInput, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
+                                ] }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
                                             value: e.target.value,
                                             path: keyPrefix + 'right.args.value||1.expr.value',
                                         },
                                     ]);
-                                } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.right.args.value[1].unit, onChange: (value) => handleChange([
-                                        { value, path: keyPrefix + 'right.args.value||1.unit' },
+                                } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: node.right.args.value[1].unit, onChange: (event) => handleChange([
+                                        {
+                                            value: event.target.value,
+                                            path: keyPrefix + 'right.args.value||1.unit',
+                                        },
                                     ]), options: [
                                         { label: `year${plural}`, value: '* 365 DAY' },
                                         { label: `month${plural}`, value: '* 30 DAY' },
@@ -924,24 +972,24 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
-                                    const columnType = getColumnTypeByName(value);
+                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
                                     }
                                     else if ((0, ast_1.isNumericColumnType)(columnType)) {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                        newSubtree.left.column = value;
+                                        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 = value;
+                                        newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_CURRENT', onChange: (value) => {
-                                    handleOperatorChange(value, node, keyPrefix, node.left.column);
+                                }, options: options }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 'IN_THE_CURRENT', onChange: (event) => {
+                                    handleOperatorChange(event.target.value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
@@ -949,10 +997,16 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
+                                ] }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
                                     handleChange([
-                                        { value, path: 'right.args.value||1.column' },
-                                        { value, path: 'left.args.value||1.column' },
+                                        {
+                                            value: event.target.value,
+                                            path: 'right.args.value||1.column',
+                                        },
+                                        {
+                                            value: event.target.value,
+                                            path: 'left.args.value||1.column',
+                                        },
                                     ]);
                                 }, options: [
                                     { label: `year`, value: 'YEAR' },
@@ -971,24 +1025,24 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.column, onChange: (value) => {
-                                    const columnType = getColumnTypeByName(value);
+                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
                                     if ((0, ast_1.isDateishColumnType)(columnType)) {
                                         // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
                                     }
                                     else if ((0, ast_1.isNumericColumnType)(columnType)) {
                                         const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                        newSubtree.left.column = value;
+                                        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 = value;
+                                        newSubtree.left.args.value[0].column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, options: options }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
-                                    handleOperatorChange(value, node, keyPrefix, node.left.column);
+                                }, options: options }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 'IN_THE_PREVIOUS', onChange: (event) => {
+                                    handleOperatorChange(event.target.value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
@@ -996,7 +1050,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
+                                ] }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
                                     const dayConversion = {
                                         YEAR: 365,
                                         QUARTER: 90,
@@ -1005,15 +1059,15 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     };
                                     handleChange([
                                         {
-                                            value,
+                                            value: event.target.value,
                                             path: 'left.args.value||1.column',
                                         },
                                         {
-                                            value,
+                                            value: event.target.value,
                                             path: 'right.args.value||1.column',
                                         },
                                         {
-                                            value: dayConversion[value] || 30,
+                                            value: dayConversion[event.target.value] || 30,
                                             path: 'right.args.value||0.args.value||1.expr.value',
                                         },
                                     ]);
@@ -1053,10 +1107,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             : []),
                         ...((0, ast_1.isTextColumnType)(columnType)
                             ? [
-                                { label: 'is', value: 'LIKE' },
-                                { label: 'is not', value: 'NOT LIKE' },
-                                { label: 'is one of', value: 'IN' },
-                                { label: 'is not one of', value: 'NOT IN' },
+                                { label: 'is exactly', value: 'LIKE' },
+                                { label: 'is not exactly', value: 'NOT LIKE' },
+                                { label: 'is', value: 'IN' },
+                                { label: 'is not', value: 'NOT IN' },
                                 { label: 'is not null', value: 'IS NOT' },
                                 { label: 'is null', value: 'IS' },
                             ]
@@ -1088,45 +1142,48 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     gap: 20,
-                                    // justifyContent: "space-between",
                                     flexDirection: (0, util_1.showNodeAsRow)(node, formData)
                                         ? 'row'
                                         : 'column',
                                     width: '100%',
-                                }, children: [(0, jsx_runtime_1.jsx)(Select, { theme: theme, style: { width: 'min-content' }, value: leftChildValue, onChange: (value) => {
-                                            const columnType = getColumnTypeByName(value);
+                                }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: leftChildValue, onChange: (event) => {
+                                            const columnType = getColumnTypeByName(event.target.value);
                                             if ((0, ast_1.isDateishColumnType)(columnType)) {
-                                                handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                                handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
                                             }
                                             else if ((0, ast_1.isNumericColumnType)(columnType)) {
                                                 const newSubtree = (0, util_1.deepCopy)(constants_1.defaultNumericComparison);
-                                                newSubtree.left.column = value;
+                                                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 = value;
+                                                newSubtree.left.args.value[0].column = event.target.value;
                                                 handleReplaceSubtree(keyPrefix, newSubtree);
                                             }
-                                        }, options: options }), operatorOptions.length > 0 && ((0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.operator, onChange: (value) => {
-                                            handleOperatorChange(value, node, keyPrefix, leftChildValue);
-                                        }, style: { width: 'min-content' }, options: operatorOptions })), node.right &&
+                                        }, options: options }), operatorOptions.length > 0 && ((0, jsx_runtime_1.jsx)(SelectComponent, { value: node.operator, onChange: (event) => {
+                                            handleOperatorChange(event.target.value, node, keyPrefix, leftChildValue);
+                                        }, options: operatorOptions })), node.right &&
                                         node.right.type !== 'expr_list' &&
                                         renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix), node.right && node.right.type === 'expr_list' && ((0, jsx_runtime_1.jsx)("div", { style: {
                                     display: 'grid',
                                     gridTemplateColumns: 'repeat(2, 1fr)',
                                     gap: 12,
-                                }, children: Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => ((0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', gap: 2 }, children: [(0, jsx_runtime_1.jsx)(Checkbox, { checked: uniqueValues[table][leftChildValue][key], onChange: (checked) => {
-                                                const newValues = (0, util_1.deepCopy)(uniqueValues);
-                                                newValues[table][leftChildValue][key] = checked;
-                                                setUniqueValues(newValues);
-                                                if (checked) {
-                                                    handleInsertVariant(keyPrefix + 'right.' + 'value', key);
-                                                }
-                                                else {
-                                                    handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
-                                                }
-                                            } }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: theme.fontFamily }, children: key })] }, key))) }, keyPrefix + 'right.'))] }));
+                                }, children: uniqueValues[table] &&
+                                    Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => ((0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', gap: 4 }, children: [(0, jsx_runtime_1.jsx)(CheckboxComponent, { isChecked: uniqueValues[table][leftChildValue][key], onChange: (event) => {
+                                                    const newValues = (0, util_1.deepCopy)(uniqueValues);
+                                                    newValues[table][leftChildValue][key] = event.target.checked;
+                                                    setUniqueValues(newValues);
+                                                    if (event.target.checked) {
+                                                        handleInsertVariant(keyPrefix + 'right.' + 'value', key);
+                                                    }
+                                                    else {
+                                                        handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
+                                                    }
+                                                } }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                                    fontFamily: theme.fontFamily,
+                                                    margin: 'auto 0',
+                                                }, children: key })] }, key))) }, keyPrefix + 'right.'))] }));
                 }
                 else {
                     const columnName = node.left.column;
@@ -1138,9 +1195,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             justifyContent: 'space-between',
                             flexDirection: (0, util_1.showNodeAsRow)(node, formData) ? 'row' : 'column',
                             width: '100%',
-                        }, children: [node.left && renderNode(node.left, keyPrefix + 'left.'), (0, jsx_runtime_1.jsx)(Select, { theme: theme, value: node.operator, onChange: (value) => {
-                                    handleOperatorChange(value, node, keyPrefix);
-                                }, style: { width: `100%` }, options: [
+                        }, children: [node.left && renderNode(node.left, keyPrefix + 'left.'), (0, jsx_runtime_1.jsx)(SelectComponent, { value: node.operator, onChange: (event) => {
+                                    handleOperatorChange(event.target.value, node, keyPrefix);
+                                }, options: [
                                     // { label: `and`, value: "AND" },
                                     // { label: `or`, value: "OR" },
                                     ...((0, ast_1.isNumericColumnType)(columnType)
@@ -1157,10 +1214,10 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                         : []),
                                     ...((0, ast_1.isTextColumnType)(columnType)
                                         ? [
-                                            { label: 'is', value: 'LIKE' },
-                                            { label: 'is not', value: 'NOT LIKE' },
-                                            { label: 'is one of', value: 'IN' },
-                                            { label: 'is not one of', value: 'NOT IN' },
+                                            { label: 'is exactly', value: 'LIKE' },
+                                            { label: 'is not exactly', value: 'NOT LIKE' },
+                                            { label: 'is', value: 'IN' },
+                                            { label: 'is not', value: 'NOT IN' },
                                             { label: 'is not null', value: 'IS NOT' },
                                             { label: 'is null', value: 'IS' },
                                         ]
@@ -1183,15 +1240,17 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     label: (0, textProcessing_1.snakeCaseToTitleCase)(column.displayName),
                     value: column.name,
                 }));
-                return ((0, jsx_runtime_1.jsx)(Select, { theme: theme, style: { width: '120px' }, value: node.column ?? options[0]?.value, onChange: (value) => {
-                        handleChange([{ value, path: keyPrefix + 'column' }]);
+                return ((0, jsx_runtime_1.jsx)(SelectComponent, { value: node.column ?? options[0]?.value, onChange: (event) => {
+                        handleChange([
+                            { value: event.target.value, path: keyPrefix + 'column' },
+                        ]);
                     }, options: options }));
             }
             case 'expr_list': {
                 const len = node.value.length;
                 return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [node.value.map((elem, index) => {
                             if (elem.value) {
-                                return ((0, jsx_runtime_1.jsx)(TextInput, { id: `expr_list_${index}`, width: 200, value: elem.value, onChange: (e) => handleChange([
+                                return ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: `expr_list_${index}`, width: 200, value: elem.value, onChange: (e) => handleChange([
                                         {
                                             value: e.target.value,
                                             path: keyPrefix + `value.${index}.`,
@@ -1199,11 +1258,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     ]) }, `input_${index}`));
                             }
                             return renderNode(elem, keyPrefix + `value.${index}.`);
-                        }), len > 1 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: '-', onClick: () => handleDeleteVariant(keyPrefix + 'value') })), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => handleInsertVariant(keyPrefix + 'value'), label: '+' })] }, keyPrefix));
+                        }), len > 1 && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: '-', onClick: () => handleDeleteVariant(keyPrefix + 'value') })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleInsertVariant(keyPrefix + 'value'), label: '+' })] }, keyPrefix));
             }
             case 'double_quote_string':
             case 'single_quote_string':
-                return ((0, jsx_runtime_1.jsx)(TextInput, { id: 'quoted_string', value: node.value.replaceAll('%', ''), width: 120, onChange: (e) => handleChange([
+                return ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'quoted_string', value: node.value.replaceAll('%', ''), width: 120, onChange: (e) => handleChange([
                         {
                             value: e.target.value,
                             path: keyPrefix + 'value',
@@ -1212,7 +1271,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             case 'null':
                 return (0, jsx_runtime_1.jsx)("div", {});
             case 'number':
-                return ((0, jsx_runtime_1.jsx)(TextInput, { id: "quill_number_input", value: node.value, width: 120, onChange: (e) => {
+                return ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "quill_number_input", value: node.value, width: 120, onChange: (e) => {
                         handleChange([
                             {
                                 value: e.target.value,
@@ -1285,13 +1344,13 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         const OPS = {
             AND: 'and',
             OR: 'or',
-            LIKE: 'is',
+            LIKE: 'is exactly',
             BETWEEN: 'is between',
-            IN: 'is one of',
-            'NOT IN': 'is not one of',
-            'NOT LIKE': 'is not',
-            '!=': 'is not',
-            '=': 'is',
+            IN: 'is',
+            'NOT IN': 'is not',
+            'NOT LIKE': 'is not exactly',
+            '!=': 'is not exactly',
+            '=': 'is exactly',
             '<': 'is less than',
             '>': 'is greater than',
             '<=': 'is less than or equal to',
@@ -1299,25 +1358,16 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             '<>': 'is not',
             '-': 'minus',
             'IS NOT': 'is not',
-            IS: 'is ',
+            IS: 'is',
         };
         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: FilterPopover, setActivePath: setActivePath, setOpenPopover: setOpenPopover, setIsPending: setIsPending, clearCheckboxes: clearCheckboxes, fetchSqlQuery: fetchSqlQuery, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, node: node, EditPopover: ui_1.EditPopover, Button: Button, renderNode: renderNode, Popover: Popover, style: {
-                        display: 'flex',
-                        gap: 3,
-                        flexDirection: isRow ? 'row' : 'column',
-                        padding: '1px',
-                        border: isCard ? '1px solid black' : 'none',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                    }, 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, fetchSqlQuery: fetchSqlQuery, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, EditPopover: ui_1.EditPopover, Button: ButtonComponent, renderNode: renderNode, children: dateComparisonPartialMatch ??
                         dateEqualityPartialMatch ??
                         isInTheCurrentIntervalSentence ??
                         isInTheLastIntervalSentence ??
                         isInThePreviousIntervalSentence ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [node.left &&
-                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : isTopLevel || topLevelBinaryOperator === 'OR' ? ((0, jsx_runtime_1.jsx)(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: Select })) : null, node.right &&
+                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : isTopLevel || topLevelBinaryOperator === 'OR' ? ((0, jsx_runtime_1.jsx)(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: SelectComponent })) : null, node.right &&
                                 renderSentence(formData, node.right, keyPrefix + 'right.', false, false, isRow)] })) }));
             case 'column_ref':
                 return (0, textProcessing_1.snakeCaseToTitleCase)(node.column);
@@ -1352,6 +1402,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                     if (node.args.value.length < 1)
                         return null;
                     if (node.args.value[0].value) {
+                        if (node.args.value[0].type === 'single_quote_string') {
+                            return node.args.value[0].value.replaceAll('%', '');
+                        }
                         return (0, textProcessing_1.snakeCaseToTitleCase)(node.args.value[0].value.replaceAll('%', ''));
                     }
                     if (node.args.value[0].column)
@@ -1399,9 +1452,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         }))
             .sort((a, b) => {
             const aIsId = a.name.toLowerCase() === 'id' ||
-                a.name.toLowerCase().endsWith('_id');
+                a.name.toLowerCase().endsWith('_id') ||
+                a.name.endsWith('Id');
             const bIsId = b.name.toLowerCase() === 'id' ||
-                b.name.toLowerCase().endsWith('_id');
+                b.name.toLowerCase().endsWith('_id') ||
+                b.name.endsWith('Id');
             if (aIsId && !bIsId)
                 return 1;
             if (bIsId && !aIsId)
@@ -1418,7 +1473,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             return false;
         const allColumns = orderedColumnNames.filter((row) => {
             const [table, _] = row.split('.');
-            return selectedColumns[0].startsWith(table);
+            const selectedTable = selectedColumns[0].split('.')[0];
+            return selectedTable === table;
         });
         return selectedColumns.length === allColumns.length;
     };
@@ -1437,12 +1493,12 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         fontSize: 18,
                         margin: 0,
                         textAlign: 'left',
-                    }, children: "Add condition" }), (0, jsx_runtime_1.jsx)(Tabs, { defaultValue: topLevelBinaryOperator, options: ui_1.DEFAULT_TAB_OPTIONS, onValueChange: (value) => setTopLevelBinaryOperator(value) }), activeEditItem && renderNode(activeEditItem), (0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: "Add condition" }), (0, jsx_runtime_1.jsx)(TabsComponent, { value: topLevelBinaryOperator, options: UiComponents_1.DEFAULT_TAB_OPTIONS, onChange: (event) => setTopLevelBinaryOperator(event.target.value) }), activeEditItem && renderNode(activeEditItem), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: 8,
                         justifyContent: 'end',
-                    }, children: (0, jsx_runtime_1.jsx)(Button, { onClick: onSave, label: 'Add condition' }) })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
     };
     const fetchUponChange = async (baseAst, newFormData) => {
         // if newFormData is null still use it
@@ -1703,9 +1759,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 newAst = (0, convert_1.convertRemoveSimpleParentheses)(newAst);
                 const table = (0, ast_1.getTableNames)(newAst)[0] ?? initialTableName;
                 const tableAlias = (0, ast_1.getTableAliases)(newAst)[0] ?? initialTableName;
-                newAst = (0, util_1.removeNonSelectedTableReferences)(newAst, tableAlias ?? table);
+                newAst = (0, util_1.removeNonSelectedTableReferences)(newAst, tableAlias ?? table, getAllPossibleColumns().map((col) => col.name));
                 // newAst = convertDateComparison(newAst); // TODO
-                ast = newAst; // so we fetch data for newAst later.
                 if (table !== currentTable) {
                     await getDistinctValues(table);
                     setCurrentTable(table);
@@ -1725,6 +1780,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 }));
                 if (groupByPivot) {
                     setBaseAst((0, util_1.deepCopy)({ ...newAst, orderby: null, limit: null }));
+                    newAst = (0, util_1.deepCopy)({ ...newAst, orderby: null, limit: null });
                 }
                 else {
                     setBaseAst((0, util_1.deepCopy)({ ...newAst }));
@@ -1734,6 +1790,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 // @ts-ignore
                 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: {
@@ -1814,11 +1871,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         fetchSqlQuery(newAst);
     };
     function TopLevelBooleanSwitch({ node, keyPrefix, handleOperatorChange, }) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: { width: 'fit-content' }, children: (0, jsx_runtime_1.jsx)(Tabs, { defaultValue: node.operator, options: ui_1.DEFAULT_TAB_OPTIONS, onValueChange: (value) => {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { width: 'fit-content' }, children: (0, jsx_runtime_1.jsx)(TabsComponent, { value: node.operator, options: UiComponents_1.DEFAULT_TAB_OPTIONS, onChange: (event) => {
                     if (loading) {
                         return;
                     }
-                    handleOperatorChange(value, node, keyPrefix);
+                    handleOperatorChange(event.target.value, node, keyPrefix);
                 } }) }));
     }
     const DraggableItem = ({ id, label, onDelete }) => {
@@ -1827,9 +1884,9 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             transform: utilities_1.CSS.Transform.toString(transform),
             transition,
         };
-        return ((0, jsx_runtime_1.jsx)("div", { style: { ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(DraggableColumn, { label: (0, textProcessing_1.snakeCaseToTitleCase)(label), onDelete: onDelete, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(DraggableColumnComponent, { label: (0, textProcessing_1.snakeCaseToTitleCase)(label), onDelete: onDelete, DragHandle: (props) => ((0, jsx_runtime_1.jsx)("div", { style: {
                         cursor: 'grab',
-                    }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(HandleButton, {}) }) }) }));
+                    }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(props.dragIcon, {}) })) }) }));
     };
     function DraggableColumns() {
         const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
@@ -1839,8 +1896,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
         function handleDragEnd(event) {
             const { active, over } = event;
             if (active.id !== over.id) {
-                const oldIndex = orderedColumnNames.findIndex((c) => c.endsWith(active.id));
-                const newIndex = orderedColumnNames.findIndex((c) => c.endsWith(over.id));
+                const oldIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${active.id}`));
+                const newIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${over.id}`));
                 const newOrder = (0, sortable_1.arrayMove)(orderedColumnNames, oldIndex, newIndex);
                 setOrderedColumnNames(newOrder);
                 const orderedSelectedColumns = [];
@@ -1895,25 +1952,27 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                 flexDirection: 'row',
                 height: '100%',
                 ...containerStyle,
-            }, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                    if (loadingSchema)
-                                        return;
-                                    if (!openPopover) {
-                                        setOpenPopover('AddColumnPopover');
-                                    }
-                                }, label: 'Select columns' }), label: "Select columns", onClose: () => {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, children: (0, jsx_runtime_1.jsx)(AddColumnPopover_1.default, { onSave: () => {
+            }, 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: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Filters" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                }, 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,
@@ -1923,39 +1982,41 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 flexDirection: 'column',
                                 gap: 2.5,
                                 alignItems: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddFilterPopover', title: 'Add filter', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                            if (!selectedColumns ||
-                                                selectedColumns.length === 0 ||
-                                                loading) {
-                                                return;
+                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
+                                            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);
                                             }
-                                            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);
+                                            else {
+                                                const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                                newSubtree.left.args.value[0].column = column;
+                                                setActiveEditItem(newSubtree);
                                             }
-                                        }, label: 'Add filter' }), onClose: () => {
-                                        setIsPending(false);
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                        clearCheckboxes();
-                                        setTimeout(() => {
-                                            setActiveEditItem(null);
-                                        }, 300);
-                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
+                                            setOpenPopover('AddFilterPopover');
+                                            setActivePath('');
+                                            setIsPending(true);
+                                        }
+                                    }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                        if (!isOpen) {
+                                            setIsPending(false);
+                                            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);
@@ -1975,44 +2036,46 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                                     setActiveEditItem(null);
                                                 }, 300);
                                             }
-                                        }, Button: Button, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
+                                        }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
                                     false && ( // temp removed the AddConditionPopover
-                                (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddConditionPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                            if (!openPopover) {
-                                                setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
-                                                setOpenPopover('AddConditionPopover');
-                                                setActivePath('');
-                                                setIsPending(true);
-                                            }
-                                        }, label: 'Add condition' }), onClose: () => {
-                                        setIsPending(false);
-                                        setTimeout(() => {
-                                            setActiveEditItem(null);
-                                        }, 300);
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                        clearCheckboxes();
-                                    }, children: (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.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: Select, ButtonComponent: Button, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                (0, jsx_runtime_1.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(() => {
+                                                        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)) {
+                                                        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.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, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                 setPivot(null);
                                 setPivotData(null);
                             }, 
@@ -2026,7 +2089,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setPivot(pivot);
                                 const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
                                 setPivotData(pivotedData || []);
-                            }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3, SecondaryButtonComponent: SecondaryButton }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                            }, 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 || [],
@@ -2038,11 +2101,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setPivotValueField(pivot?.valueField);
                                 setPivotAggregation(pivot?.aggregationType);
                                 setPivotPopUpTitle('Edit Pivot');
-                            }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: () => {
+                            }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
                                 setPivot(null);
                                 setPivotData(null);
                                 setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
-                            }, minHeight: 180, LabelComponent: Label, TextComponent: Text })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            }, 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,
@@ -2050,7 +2113,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             }, 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, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                }, 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) {
@@ -2063,7 +2126,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     if (!pivot) {
                                         fetchSqlQuery(baseAst);
                                     }
-                                }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                }, 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,
@@ -2090,31 +2153,33 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     if (!pivot) {
                                         fetchSqlQuery(newAst);
                                     }
-                                }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                }, 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: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0) {
-                                        return;
-                                    }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddSortPopover');
-                                    }
-                                }, label: 'Add sort' }), title: "Sort By", onClose: () => {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Limit" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                }, 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: SortPopover, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                            }, 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));
@@ -2133,27 +2198,29 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     setOpenPopover(null);
                                     setBaseAst((0, util_1.deepCopy)(newAst));
                                     fetchSqlQuery(newAst);
-                                }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                    if (!openPopover) {
-                                        setOpenPopover('AddLimitPopover');
-                                    }
-                                }, label: 'Add limit' }), title: "Limit", onClose: () => {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, children: (0, jsx_runtime_1.jsx)(TextInput, { id: "loading_input_limit", value: 0, width: 120, onChange: () => { } }) }))] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
+                                }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        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: "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) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [(0, jsx_runtime_1.jsx)(TextInput, { 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)(Button, { onClick: () => { }, label: "Ask AI" }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsx)(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: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(Button, { 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',
@@ -2162,26 +2229,28 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
             overflowY: 'auto',
             boxSizing: 'border-box',
             ...containerStyle,
-        }, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', title: "Select columns", trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                if (!openPopover) {
-                                    setOpenPopover('AddColumnPopover');
-                                }
-                            }, label: 'Select columns' }), onClose: () => {
-                            // delay onClose callback so onClick no-ops
-                            setTimeout(() => {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, 100);
-                        }, children: (0, jsx_runtime_1.jsx)(AddColumnPopover_1.default, { onSave: () => {
+        }, 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 (!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: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Filters" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), formData && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            }, 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,
@@ -2191,52 +2260,42 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'column',
                             gap: 2.5,
                             alignItems: 'flex-start',
-                        }, children: [(0, jsx_runtime_1.jsx)(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                        if (!selectedColumns ||
-                                            selectedColumns.length === 0 ||
-                                            loading) {
-                                            return;
+                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0 || loading) {
+                                        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);
                                         }
-                                        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);
+                                        else {
+                                            const newSubtree = (0, util_1.deepCopy)(constants_1.defaultEntry);
+                                            newSubtree.left.args.value[0].column = column;
+                                            setActiveEditItem(newSubtree);
                                         }
-                                    }, label: 'Add filter' }), onClose: () => {
-                                    // delay onClose callback so onClick no-ops
-                                    setTimeout(() => {
-                                        setIsPending(false);
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                        clearCheckboxes();
-                                        setActiveEditItem(null);
-                                    }, 200);
-                                }, children: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
-                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                        setOpenPopover('AddFilterPopover');
+                                        setActivePath('');
+                                        setIsPending(true);
+                                    }
+                                }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                    if (!isOpen) {
+                                        // delay onClose callback so onClick no-ops
+                                        setTimeout(() => {
                                             setIsPending(false);
                                             setActivePath(null);
                                             setOpenPopover(null);
                                             clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
-                                        }
-                                        else {
+                                            setActiveEditItem(null);
+                                        }, 200);
+                                    }
+                                }, popoverTitle: "Add filter", popoverChildren: (0, jsx_runtime_1.jsx)(ui_1.AddFilterPopover, { onSave: () => {
+                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
                                             setIsPending(false);
-                                            handleInsertion(activeEditItem, 'AND', false);
                                             setActivePath(null);
                                             setOpenPopover(null);
                                             clearCheckboxes();
@@ -2244,45 +2303,57 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                                 setActiveEditItem(null);
                                             }, 300);
                                         }
-                                    }, Button: Button, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
-                                false && ( // temp removed the AddConditionPopover
-                            (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddConditionPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                        if (!openPopover) {
-                                            setActiveEditItem((0, util_1.deepCopy)(constants_1.defaultEntry));
-                                            setOpenPopover('AddConditionPopover');
-                                            setActivePath('');
-                                            setIsPending(true);
-                                        }
-                                    }, label: 'Add condition' }), onClose: () => {
-                                    // delay onClose callback so onClick no-ops
-                                    setTimeout(() => {
-                                        setIsPending(false);
-                                        setActiveEditItem(null);
-                                        setActivePath(null);
-                                        setOpenPopover(null);
-                                        clearCheckboxes();
-                                    }, 200);
-                                }, children: (0, jsx_runtime_1.jsx)(AddConditionPopover, { onSave: () => {
-                                        if ((0, util_1.isNodeEmptyCollection)(activeEditItem)) {
+                                        else {
                                             setIsPending(false);
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
+                                            handleInsertion(activeEditItem, 'AND', false);
                                             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.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: Select, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                    }, 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.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, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                             setPivot(null);
                             setPivotData(null);
                         }, selectPivot: (pivot) => {
@@ -2298,7 +2369,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             setPivot(pivot);
                             const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
                             setPivotData(pivotedData || []);
-                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                        }, 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 || [],
@@ -2310,11 +2381,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             setPivotValueField(pivot?.valueField);
                             setPivotAggregation(pivot?.aggregationType);
                             setPivotPopUpTitle('Edit Pivot');
-                        }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: () => {
+                        }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
                             setPivot(null);
                             setPivotData(null);
                             setBaseAst((0, util_1.deepCopy)(baseAst));
-                        }, minHeight: 180, LabelComponent: Label, TextComponent: Text })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, 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,
@@ -2322,7 +2393,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                         }, 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, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                            }, 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);
@@ -2341,12 +2412,12 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(baseAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            }, 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, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                        }, 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;
@@ -2383,19 +2454,21 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                if (!selectedColumns || selectedColumns.length === 0) {
-                                    return;
-                                }
-                                if (!openPopover) {
-                                    setOpenPopover('AddSortPopover');
-                                }
-                            }, label: 'Add sort' }), title: "Sort by", onClose: () => {
-                            setIsPending(false);
-                            setActiveEditItem(null);
-                            setActivePath(null);
-                            setOpenPopover(null);
-                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, SecondaryButton: SecondaryButton, onSave: (column, direction) => {
+                            }, 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) {
@@ -2419,12 +2492,12 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 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)(SidebarHeading, { label: "Limit" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            } }) }), (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: SortPopover, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                        }, 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));
@@ -2443,36 +2516,38 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                 setOpenPopover(null);
                                 setBaseAst((0, util_1.deepCopy)(newAst));
                                 fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                            }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : ((0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
-                                if (!selectedColumns || selectedColumns.length === 0) {
-                                    return;
-                                }
-                                if (!baseAst) {
-                                    return;
-                                }
-                                if (!openPopover) {
-                                    setOpenPopover('AddLimitPopover');
-                                }
-                            }, label: 'Add limit' }), title: "Limit", onClose: () => {
-                            setIsPending(false);
-                            setActiveEditItem(null);
-                            setActivePath(null);
-                            setOpenPopover(null);
-                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, 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)(Container, { children: [!hideAi && ((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, { onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                        return;
+                                    }
+                                    if (!baseAst) {
+                                        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: "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.jsxs)("form", { ref: askAIContainerRef, onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
@@ -2480,14 +2555,14 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                             flexDirection: 'row',
                             gap: 12,
                             padding: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(TextInput, { 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)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
-                                rows: pivotData?.rows || rows,
-                                fields: pivotData?.fields || fields,
-                            }, baseAst?.columns ?? []), columns: pivot
-                                ? pivotData?.columns || emptyPivotColumns()
-                                : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
-                                    return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
-                                }), rowsPerPage: 20 })) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, 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
+                            ? pivotData?.columns || emptyPivotColumns()
+                            : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
+                            }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: '12px',
@@ -2496,11 +2571,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
                                     fontSize: 14,
                                     padding: '12px',
                                     whiteSpace: 'nowrap',
-                                }, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
+                                }, 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: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, 
-                // TODO: Modal={Modal}
-                // TODO: Popover={Popover}
-                DeleteButton: DeleteButton })] }));
+                                        }, 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", 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, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent })] }));
 }
 exports.default = ReportBuilder;