@quillsql/react 2.11.24 → 2.11.26

package/dist/cjs/ReportBuilder.js

@@ -32,12 +32,14 @@ const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
 const width_1 = require("./utils/width");
 const QuillSelect_1 = require("./components/QuillSelect");
 const QuillCard_1 = require("./components/QuillCard");
-const SQLEditor_1 = require("./SQLEditor");
 const dataFetcher_1 = require("./utils/dataFetcher");
 const valueFormatter_1 = require("./utils/valueFormatter");
 const pivotProcessing_1 = require("./utils/pivotProcessing");
 const tableProcessing_1 = require("./utils/tableProcessing");
 const useQuill_1 = require("./hooks/useQuill");
+const dataFetcher_2 = require("./utils/dataFetcher");
+const columnProcessing_1 = require("./utils/columnProcessing");
+const astProcessing_1 = require("./utils/astProcessing");
 exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
@@ -70,8 +72,8 @@ exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialChartId, }) {
-    const { data: initialData } = (0, useQuill_1.useQuill)(initialChartId || '');
+function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialReportId, }) {
+    const { data: dashboardItem } = (0, useQuill_1.useQuill)(initialReportId || '');
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const [baseAst, setBaseAst] = (0, react_1.useState)(null);
@@ -92,7 +94,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
     const [dataDisplayed, setDataDisplayed] = (0, react_1.useState)(false);
     const [rows, setRows] = (0, react_1.useState)([]);
     const [formattedRows, setFormattedRows] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
+    const [columns, setColumns] = (0, react_1.useState)([]);
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = (0, react_1.useState)('AND');
     const [editPopoverKey, setEditPopoverKey] = (0, react_1.useState)(null);
     const [uniqueValues, setUniqueValues] = (0, react_1.useState)({});
@@ -103,8 +105,9 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
     const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
+    const [initalChartLoad, setInitalChartLoad] = (0, react_1.useState)(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
-    const [initialLoad, setInitialLoad] = (0, react_1.useState)(!!initialTableName || !!initialChartId);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(!!initialTableName || !!initialReportId);
     const [currentTable, setCurrentTable] = (0, react_1.useState)(initialTableName || '');
     const parentRef = (0, react_1.useRef)(null);
     const askAIContainerRef = (0, react_1.useRef)(null);
@@ -174,7 +177,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
             setIsPending(false);
             setDataDisplayed(false);
             setRows([]);
-            setFields([]);
+            setColumns([]);
             setTopLevelBinaryOperator('AND');
             setEditPopoverKey(null);
             setErrorMessage('');
@@ -196,6 +199,50 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
             setActiveEditItem(getByKey(formData, activePath));
         }
     }, [formData]);
+    const formatRows = (rows, columns, pivot, aggregationType) => {
+        const copiedRows = (0, util_1.deepCopy)(rows);
+        if (pivot) {
+            const formattedRows = copiedRows.map((row) => {
+                const formattedRow = row;
+                Object.keys(row).forEach((key, index) => {
+                    let column = columns.find((c) => c.field === key);
+                    let format = 'string';
+                    if (!column) {
+                        format =
+                            aggregationType === 'count'
+                                ? 'whole_number'
+                                : 'two_decimal_places';
+                    }
+                    else {
+                        format = valueFormatter_1.DATE_FORMAT_TYPES.includes(column.format)
+                            ? 'date'
+                            : 'string';
+                    }
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[key],
+                        format,
+                    });
+                    formattedRow[key] = formattedValue;
+                });
+                return formattedRow;
+            });
+            return formattedRows;
+        }
+        else {
+            const formattedRows = copiedRows.map((row) => {
+                return columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            });
+            return formattedRows;
+        }
+    };
     const getByKey = (formData, path) => {
         if (!path)
             return (0, util_1.deepCopy)(formData);
@@ -265,7 +312,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
             const data = await response.json();
             setActiveQuery(data.query);
             if (fetchData) {
-                fetchUponChange(ast, formData, data.query);
+                fetchUponChange(ast, formData);
             }
         }
         catch (error) {
@@ -329,42 +376,81 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
     };
     (0, react_1.useEffect)(() => {
         const loadChart = async () => {
-            if (!initialData || initialData.referencedTables.length !== 1) {
+            setInitalChartLoad(true);
+            if (!dashboardItem || dashboardItem.referencedTables.length !== 1) {
+                setInitalChartLoad(false);
                 return;
             }
-            const initialRows = await handleAsk(initialData.queryString);
-            if (initialData.pivot) {
+            const tableName = dashboardItem.referencedTables[0];
+            if (!tableName) {
+                return;
+            }
+            const resp = await (0, dataFetcher_2.getDataFromCloud)(client, `astify`, {
+                query: dashboardItem.queryString,
+            });
+            const ast = resp.ast.select ? resp.ast.select : resp.ast;
+            const initialRows = await fetchUponChange(ast, undefined);
+            const convertedAst = (0, astProcessing_1.processStarColumn)(ast, dashboardItem.columns);
+            setBaseAst(convertedAst);
+            setFormData((0, util_1.deepCopy)(convertedAst.where));
+            setFormattedRows([]);
+            setActiveQuery(dashboardItem.queryString);
+            // const initialRows = await handleAsk(dashboardItem.queryString);
+            const stringColumns = dashboardItem.columns.filter((column) => {
+                return column.format === 'string';
+            });
+            if (stringColumns.length !== 0 && tableName) {
+                const stringNames = stringColumns.map((column) => column.field);
+                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, [], client);
+                const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
+                joinedUniqueValues[tableName] = newUniqueValues;
+                setUniqueValues(joinedUniqueValues);
+            }
+            if (dashboardItem.pivot) {
                 // @ts-ignore
-                setPivotRowField(initialData.pivot.rowField);
+                setPivotRowField(dashboardItem.pivot.rowField);
                 // @ts-ignore
-                setPivotAggregation(initialData.pivot.aggregationType);
+                setPivotAggregation(dashboardItem.pivot.aggregationType);
                 // @ts-ignore
-                setPivotColumnField(initialData.pivot.columnField);
+                setPivotColumnField(dashboardItem.pivot.columnField);
                 // @ts-ignore
-                setPivotValueField(initialData.pivot.valueField);
-                setPivot(initialData.pivot);
-                const pivotedData = (0, PivotModal_1.generatePivotTable)(
-                //@ts-ignore
-                initialData.pivot, initialRows, [null, null, null], false);
+                setPivotValueField(dashboardItem.pivot.valueField);
+                setPivot(dashboardItem.pivot);
+                const pivotedData = (0, PivotModal_1.generatePivotTable)(dashboardItem.pivot, initialRows, undefined, false);
                 setPivotData(pivotedData || []);
+                const formattedRows = formatRows(pivotedData.rows, dashboardItem.columns, true, 
+                // @ts-ignore
+                dashboardItem.pivot.aggregationType);
+                setFormattedRows(formattedRows);
             }
+            else {
+                const formattedRows = formatRows(dashboardItem.rows, dashboardItem.columns);
+                setFormattedRows(formattedRows);
+            }
+            setCurrentTable(tableName);
+            // This handles a flashing issue
+            setTimeout(() => {
+                setInitalChartLoad(false);
+            }, 500);
         };
-        if (initialData && initialData.referencedTables.length === 1) {
+        if (dashboardItem && dashboardItem.referencedTables.length === 1) {
             loadChart();
         }
-    }, [initialData]);
+    }, [dashboardItem]);
     (0, react_1.useEffect)(() => {
         const loadTable = async (tables) => {
             if (!tables)
                 return;
             setLoading(true);
-            const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === initialTableName);
+            const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
             if (tableInfo) {
-                const stringColumns = tableInfo.columns.filter((column) => {
+                const convertedStringColumns = tableInfo.columns
+                    .filter((column) => {
                     return (0, ast_1.isTextColumnType)(column.fieldType);
-                });
-                const stringNames = stringColumns.map((column) => column.name);
-                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+                })
+                    .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+                const stringNames = convertedStringColumns.map((column) => column.field);
+                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
                 const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
                 joinedUniqueValues[initialTableName] = newUniqueValues;
                 if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
@@ -431,7 +517,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                         return -1;
                     return 0;
                 })));
-                if (initialTableName && initialLoad && !initialChartId) {
+                if (initialTableName) {
                     await loadTable(tables);
                 }
                 setLoadingSchema(false);
@@ -444,7 +530,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
         if (schemaTables.length === 0) {
             fetchSchema();
         }
-    }, [schemaTables, initialTableName, initialLoad]);
+    }, [schemaTables, initialTableName, initialReportId]);
     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
@@ -807,12 +893,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
      * @returns the fieldType string or undefined if not found.
      */
     const getColumnTypeByName = (columnName) => {
-        const field = fields.find((f) => f.name === columnName);
-        if (field)
-            return (0, util_1.getPostgresBasicType)(field);
-        const column = schemaTables
-            .flatMap((t) => t.columns)
-            .find((c) => c.name === columnName);
+        const column = columns.find((col) => col.field === columnName);
         return column?.fieldType;
     };
     const emptyPivotColumns = () => {
@@ -1679,9 +1760,10 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                         justifyContent: 'end',
                     }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
     };
-    const fetchUponChange = async (baseAst, newFormData, query) => {
+    const fetchUponChange = async (baseAst, newFormData) => {
         // if newFormData is null still use it
         const curFormData = newFormData !== undefined ? newFormData : formData;
+        let rows;
         if ((curFormData || baseAst) && !loading) {
             try {
                 setLoading(true);
@@ -1696,16 +1778,19 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                 };
                 const cloudBody = {};
                 const data2 = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+                rows = data2.rows;
                 const tables = (0, ast_1.getTableNames)(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
                 if (table !== currentTable) {
                     const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
                     if (tableInfo) {
-                        const stringColumns = tableInfo.columns.filter((column) => {
+                        const convertedStringColumns = tableInfo.columns
+                            .filter((column) => {
                             return (0, ast_1.isTextColumnType)(column.fieldType);
-                        });
-                        const stringNames = stringColumns.map((column) => column.name);
-                        const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                        })
+                            .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+                        const stringNames = convertedStringColumns.map((column) => column.field);
+                        const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
                         const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
                         joinedUniqueValues[table] = newUniqueValues;
                         if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
@@ -1718,22 +1803,13 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                     if (pivot) {
                         // check if any of the pivot fields aren't in the data2.fields array
                         if (!isValidPivot(data2.fields)) {
-                            const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
+                            const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                             setPivot(null);
                             setPivotData(null);
                             setRows(data2.rows);
-                            setFields(processedFields);
-                            setFormattedRows(data2.rows.map((row) => {
-                                return processedFields.reduce((formattedRow, column) => {
-                                    // Apply the format function to each field in the row
-                                    const formattedValue = (0, valueFormatter_1.quillFormat)({
-                                        value: row[column.field],
-                                        format: column.format,
-                                    });
-                                    formattedRow[column.field] = formattedValue;
-                                    return formattedRow;
-                                }, {});
-                            }));
+                            setColumns(processedFields);
+                            const formattedRows = formatRows(data2.rows, processedFields, false);
+                            setFormattedRows(formattedRows);
                             return;
                         }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
@@ -1743,39 +1819,27 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                             return acc;
                         }, {});
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
-                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
+                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, undefined, false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
-                        const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
-                        setPivotData(pivotedData || []);
+                        const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
+                        setPivotData(pivotedData);
                         setRows(data2.rows);
-                        setFields(processedFields);
-                        setFormattedRows(data2.rows.map((row) => {
-                            return processedFields.reduce((formattedRow, column) => {
-                                // Apply the format function to each field in the row
-                                const formattedValue = (0, valueFormatter_1.quillFormat)({
-                                    value: row[column.field],
-                                    format: column.format,
-                                });
-                                formattedRow[column.field] = formattedValue;
-                                return formattedRow;
-                            }, {});
+                        setColumns(processedFields);
+                        const formattedRows = formatRows(pivotedData.rows, processedFields, true, pivot.aggregationType);
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
                         }));
+                        setFormattedRows(formattedRows);
                     }
                     else {
-                        const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
+                        const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                         setRows(data2.rows);
-                        setFields(processedFields);
-                        setFormattedRows(data2.rows.map((row) => {
-                            return processedFields.reduce((formattedRow, column) => {
-                                // Apply the format function to each field in the row
-                                const formattedValue = (0, valueFormatter_1.quillFormat)({
-                                    value: row[column.field],
-                                    format: column.format,
-                                });
-                                formattedRow[column.field] = formattedValue;
-                                return formattedRow;
-                            }, {});
+                        setColumns(processedFields);
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
                         }));
+                        const formattedRows = formatRows(data2.rows, processedFields, false);
+                        setFormattedRows(formattedRows);
                         if (data2.errorMessage) {
                             setErrorMessage(`Error: ${data2.errorMessage}`);
                         }
@@ -1783,7 +1847,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                 }
                 else {
                     setRows([]);
-                    setFields([]);
+                    setColumns([]);
                     setFormattedRows([]);
                     setPivotData(null);
                 }
@@ -1794,6 +1858,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
             finally {
                 setLoading(false);
                 setDataDisplayed(true);
+                return rows;
             }
         }
     };
@@ -2009,11 +2074,13 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
             if (table !== currentTable) {
                 const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
                 if (tableInfo) {
-                    const stringColumns = tableInfo.columns.filter((column) => {
+                    const convertedStringColumns = tableInfo.columns
+                        .filter((column) => {
                         return (0, ast_1.isTextColumnType)(column.fieldType);
-                    });
-                    const stringNames = stringColumns.map((column) => column.name);
-                    const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                    })
+                        .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+                    const stringNames = convertedStringColumns.map((column) => column.field);
+                    const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
                     currentUniqueValues[table] = newUniqueValues;
                     if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(currentUniqueValues)) {
                         setUniqueValues(currentUniqueValues);
@@ -2022,7 +2089,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                 setCurrentTable(table);
             }
             if (data2.rows && data2.rows.length) {
-                const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
+                const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                 let possiblePivot = true;
                 const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(processedFields, currentUniqueValues[table]);
                 if (groupByPivot &&
@@ -2064,48 +2131,28 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                     setPivotColumnField(groupByPivot?.columnField);
                     setPivotValueField(groupByPivot?.valueField);
                     setPivotAggregation(groupByPivot?.aggregationType);
-                    const pivotedData = (0, PivotModal_1.generatePivotTable)(
-                    // @ts-ignore
-                    groupByPivot, data2.rows, [null, null, null], false);
+                    const pivotedData = (0, PivotModal_1.generatePivotTable)(groupByPivot, data2.rows, undefined, false);
                     console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
                     setPivotData(pivotedData);
                     setPivot(groupByPivot);
                     setRows(data2.rows);
-                    setFields(processedFields);
-                    setFormattedRows(data2.rows.map((row) => {
-                        return processedFields.reduce((formattedRow, column) => {
-                            // Apply the format function to each field in the row
-                            const formattedValue = (0, valueFormatter_1.quillFormat)({
-                                value: row[column.field],
-                                format: column.format,
-                            });
-                            formattedRow[column.field] = formattedValue;
-                            return formattedRow;
-                        }, {});
-                    }));
+                    setColumns(processedFields);
+                    const formattedRows = formatRows(pivotedData.rows, processedFields, true, groupByPivot.aggregationType);
+                    setFormattedRows(formattedRows);
                 }
                 else {
-                    const processedFields = data2.fields.map((elem) => (0, SQLEditor_1.convertPostgresColumn)(elem));
+                    const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                     setRows(data2.rows);
-                    setFields(processedFields);
-                    setFormattedRows(data2.rows.map((row) => {
-                        return processedFields.reduce((formattedRow, column) => {
-                            // Apply the format function to each field in the row
-                            const formattedValue = (0, valueFormatter_1.quillFormat)({
-                                value: row[column.field],
-                                format: column.format,
-                            });
-                            formattedRow[column.field] = formattedValue;
-                            return formattedRow;
-                        }, {});
-                    }));
+                    setColumns(processedFields);
+                    const formattedRows = formatRows(data2.rows, processedFields, false);
+                    setFormattedRows(formattedRows);
                 }
                 return data2.rows;
             }
             else {
                 setPivotData([]);
                 setRows([]);
-                setFields([]);
+                setColumns([]);
                 setFormattedRows([]);
             }
             if (data2.query) {
@@ -2229,7 +2276,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => ((0, jsx_runtime_1.jsx)(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } })] }) }) }));
     }
-    if (loading) {
+    if (loading || initalChartLoad) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
@@ -2360,9 +2407,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                                                 setActivePath(null);
                                                                 setOpenPopover(null);
                                                             }
-                                                        } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                        } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                         setPivot(null);
                                         setPivotData(null);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
                                     }, 
                                     // TODOs
                                     selectPivot: (pivot) => {
@@ -2372,9 +2421,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                         newAst.orderby = null;
                                         setBaseAst(newAst); // trigger refetch
                                         setPivot(pivot);
-                                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
+                                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false);
                                         setPivotData(pivotedData || []);
-                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                        setFormattedRows(formattedRows);
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                         pivot: pivot,
                                         rows: pivotData?.rows || [],
                                         columns: pivotData?.columns || [],
@@ -2389,6 +2440,8 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                     }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
                                         setPivot(null);
                                         setPivotData(null);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
                                         setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
                                     }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         display: 'flex',
@@ -2523,7 +2576,9 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                             ? 'Ask a follow-up question...'
                                             : 'Ask a question...', width: askAIInputWidth !== -1
                                             ? askAIInputWidth
-                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
+                                        initialLoad ||
+                                        initalChartLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initalChartLoad && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2669,9 +2724,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                                             setOpenPopover(null);
                                                             clearCheckboxes();
                                                         }
-                                                    } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                    } }) })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                     setPivot(null);
                                     setPivotData(null);
+                                    const formattedRows = formatRows(rows, columns, false);
+                                    setFormattedRows(formattedRows);
                                 }, selectPivot: (pivot) => {
                                     if (!pivot)
                                         return;
@@ -2683,10 +2740,12 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                     }
                                     setBaseAst(newAst); // trigger refetch
                                     setPivot(pivot);
-                                    const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, [null, null, null], false);
+                                    const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false);
                                     setPivotData(pivotedData || []);
+                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                    setFormattedRows(formattedRows);
                                     setErrorMessage('');
-                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                     pivot: pivot,
                                     rows: pivotData?.rows || [],
                                     columns: pivotData?.columns || [],
@@ -2701,6 +2760,8 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                 }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
                                     setPivot(null);
                                     setPivotData(null);
+                                    const formattedRows = formatRows(rows, columns, false);
+                                    setFormattedRows(formattedRows);
                                     setBaseAst((0, util_1.deepCopy)(baseAst));
                                 }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
                                     display: 'flex',
@@ -2720,8 +2781,10 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                         : 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);
+                                            const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, undefined, false);
                                             setPivotData(pivotedData || []);
+                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                            setFormattedRows(formattedRows);
                                             setErrorMessage('');
                                             return;
                                         }
@@ -2745,8 +2808,10 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                                 sortDirection: direction,
                                                 sortField: column,
                                                 sortFieldType: sortFieldType,
-                                            }, rows, [null, null, null], false);
+                                            }, rows, undefined, false);
                                             setPivotData(pivotedData || []);
+                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                            setFormattedRows(formattedRows);
                                             setErrorMessage('');
                                             return;
                                         }
@@ -2844,9 +2909,11 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                                     sortDirection: direction,
                                                     sortField: column,
                                                     sortFieldType: sortFieldType,
-                                                }, rows, [null, null, null], false);
+                                                }, rows, undefined, false);
                                                 setErrorMessage('');
                                                 setPivotData(pivotedData || []);
+                                                const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                setFormattedRows(formattedRows);
                                                 setActivePath(null);
                                                 setOpenPopover(null);
                                                 setBaseAst((0, util_1.deepCopy)(baseAst));
@@ -2934,7 +3001,7 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                                 : 'visible',
                         }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
                                         ? askAIInputWidth
-                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: pivotData?.rows || formattedRows, columns: pivot
+                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
                             ? pivotData?.columns || emptyPivotColumns()
                             : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                 return { label: (0, textProcessing_1.snakeCaseToTitleCase)(c), field: c };
@@ -2946,18 +3013,26 @@ function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => vo
                         }, children: [errorMessage ? ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
-                                    alignItems: 'center',
                                     overflow: 'hidden',
                                     width: '100%',
                                     gap: 12,
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            color: 'red',
-                                            fontSize: 14,
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                        }, children: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                                }, children: [(0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: fields, fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { dashboardItem: dashboardItem
+                    ? {
+                        ...dashboardItem,
+                        pivot: pivot,
+                        yAxisFields: dashboardItem.pivot && !pivot
+                            ? []
+                            : dashboardItem.yAxisFields,
+                        columns: dashboardItem.columns.filter((col) => {
+                            return columns.find((c) => {
+                                return col.field === c.field;
+                            });
+                        }),
+                        queryString: activeQuery,
+                        rows: rows,
+                    }
+                    : undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: dashboardItem ? 'Edit Chart' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: dashboardItem ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: dashboardItem ? 'Edit Chart' : 'Add to dashboard' })] }));
 }
 exports.default = ReportBuilder;