@quillsql/react 2.14.14 → 2.14.15

package/dist/esm/internals/ReportBuilder/PivotModal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
-import { ClientContext, EventTrackingContext, FetchContext, SchemaDataContext, TenantContext, } from '../../Context';
+import { ClientContext, FetchContext, SchemaDataContext, TenantContext, } from '../../Context';
 import { PivotList, PivotCard } from './PivotList';
 import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, 
 // endOfDay,
@@ -14,7 +14,7 @@ import {
 // getValidDate,
 valueFormatter, } from '../../utils/valueFormatter';
 import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
-import { MemoizedDeleteButton, MemoizedSubHeader, OverflowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
+import { MemoizedDeleteButton, MemoizedSubHeader, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
 import { QuillCard } from '../../components/QuillCard';
 import { cleanPivot, getPossiblePivotFieldOptions, isValidPivot, } from '../../utils/pivotProcessing';
 import { hashCode } from '../../utils/crypto';
@@ -23,7 +23,7 @@ import { generatePivotWithSQL } from '../../utils/pivotConstructor';
 import { getDateBucketFromRange } from '../../utils/dates';
 import equal from 'fast-deep-equal';
 import { isStringType } from '../../utils/columnProcessing';
-export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, pivotSort, setPivotSort, pivotLimit, setPivotLimit, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = QuillErrorMessageComponent, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, CardComponent = QuillCard, HeaderComponent, SubheaderComponent = MemoizedSubHeader, DeleteButtonComponent = MemoizedDeleteButton, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, showTrigger = true, pivotCountRequest = 6, query, initialUniqueValues, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, parentRef, heightAdjustment = 0, }) => {
+export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = QuillErrorMessageComponent, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, CardComponent = QuillCard, HeaderComponent, SubheaderComponent = MemoizedSubHeader, DeleteButtonComponent = MemoizedDeleteButton, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, showTrigger = true, pivotCountRequest = 6, query, initialUniqueValues, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, }) => {
     const { getToken, quillFetchWithToken } = useContext(FetchContext);
     const [isLoading, setIsLoading] = useState(false);
     const [previewLoading, setPreviewLoading] = useState(false);
@@ -33,7 +33,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     const [client] = useContext(ClientContext);
     const [schemaData] = useContext(SchemaDataContext);
     const { tenants } = useContext(TenantContext);
-    const { eventTracking } = useContext(EventTrackingContext);
     const rowFieldRef = useRef(null);
     const colFieldRef = useRef(null);
     const [pivotCardWidth, setPivotCardWidth] = useState(420);
@@ -48,15 +47,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     // const percentageAggButtonRef = useRef<HTMLDivElement>(null);
     const [dateRanges, setDateRanges] = useState({});
     const [pivotError, setPivotError] = useState('');
-    const [limitInput, setLimitInput] = useState(pivotLimit?.toString() ?? '100');
-    const [sortFieldInput, setSortFieldInput] = useState(pivotSort?.sortField ?? '');
-    const [sortDirectionInput, setSortDirectionInput] = useState(pivotSort?.sortDirection ?? 'ASC');
-    const [showLimitInput, setShowLimitInput] = useState(!!pivotLimit);
-    const [showSortInput, setShowSortInput] = useState(!!pivotSort);
-    const [availableHeight, setAvailableHeight] = useState(0);
-    const [pivotModalTopHeight, setPivotModalTopHeight] = useState(450);
-    const [popoverPosition, setPopoverPosition] = useState('bottom');
-    const popoverRef = useRef(null);
     const getDistinctValues = async (fetchDistinct) => {
         if (!client) {
             return {
@@ -77,7 +67,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
             let newUniqueValues = uniqueValues ?? null;
             if (fetchDistinct || !uniqueValues) {
-                const { filteredColumns: smallStringColumns, exceededColumns } = await getCountsByColumns(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, eventTracking, dashboardName);
+                const { filteredColumns: smallStringColumns, exceededColumns } = await getCountsByColumns(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
                 newUniqueValues = await getUniqueValuesByQuery({
                     columns: smallStringColumns,
                     query: query || '',
@@ -86,7 +76,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     tenants,
                     customFields: schemaData.customFields ?? {},
                     dashboardName,
-                    eventTracking,
                 });
                 exceededColumns?.forEach((column) => {
                     if (newUniqueValues) {
@@ -118,7 +107,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             if (dateColumns.length === 0) {
                 return;
             }
-            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, getToken, tenants, eventTracking, schemaData.customFields ?? {}, dashboardName);
+            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
             setDateRanges(dateRangeByColumn || {});
         }
     };
@@ -184,22 +173,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         }, // limit preview
                         getToken,
-                        eventTracking,
                     });
                     setSamplePivotTable({ pivot: pivot, rows, columns });
                 }
                 catch (e) {
-                    eventTracking?.logError?.({
-                        type: 'bug', // TODO: determine type
-                        severity: 'high',
-                        message: 'Error fetching pivot data',
-                        errorMessage: e.message,
-                        errorStack: e.stack,
-                        errorData: {
-                            caller: 'PivotModal',
-                            function: 'fetchPivotData',
-                        },
-                    });
                     if (e instanceof Error) {
                         setPivotError(e.message);
                         return;
@@ -257,22 +234,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                 page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                             }, // limit preview
                             getToken,
-                            eventTracking,
                         });
                         setSamplePivotTable({ pivot: pivot, rows, columns });
                     }
                     catch (e) {
-                        eventTracking?.logError?.({
-                            type: 'bug', // TODO: determine type
-                            severity: 'high',
-                            message: 'Error fetching pivot data',
-                            errorMessage: e.message,
-                            errorStack: e.stack,
-                            errorData: {
-                                caller: 'PivotModal',
-                                function: 'fetchPivotData',
-                            },
-                        });
                         if (e instanceof Error) {
                             setPivotError(e.message);
                             return;
@@ -340,7 +305,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
-                    eventTracking,
                 });
                 setSelectedPivotTable({
                     pivot: pivot,
@@ -349,17 +313,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 });
             }
             catch (e) {
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error fetching pivot tables',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'PivotModal',
-                        function: 'fetchPivotTables',
-                    },
-                });
                 if (e instanceof Error) {
                     setPivotError(e.message);
                     return;
@@ -420,15 +373,8 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         if (pivotColumnField && !columnsToShow[pivotColumnField]) {
             errors.push('Error in column field: undefined type');
         }
-        if (showLimitInput && limitInput && !Number.isInteger(Number(limitInput))) {
-            errors.push('Limit must be an integer');
-        }
         if (errors.length === 0 &&
             pivotAggregations?.every((p) => p.aggregationType && (p.valueField || p.aggregationType === 'count'))) {
-            const sort = showSortInput && !!sortFieldInput && !!sortDirectionInput;
-            const sortField = sort ? sortFieldInput : undefined;
-            const sortDirection = sort ? sortDirectionInput : undefined;
-            const rowLimit = showLimitInput && limitInput ? Number(limitInput) : undefined;
             const pivot = {
                 rowField: pivotRowField,
                 rowFieldType: columnTypes[pivotRowField ?? ''],
@@ -441,10 +387,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     valueField2Type: columnTypes[p.valueField2 ?? ''],
                     aggregationType: p.aggregationType,
                 })),
-                sort,
-                sortField,
-                sortDirection,
-                rowLimit,
                 // For backwards compatibility
                 valueField: pivotAggregations?.[0]?.valueField,
                 valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
@@ -465,16 +407,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
         }
         setErrors(errors);
-    }, [
-        pivotRowField,
-        pivotColumnField,
-        pivotAggregations,
-        sortFieldInput,
-        sortDirectionInput,
-        showSortInput,
-        showLimitInput,
-        limitInput,
-    ]);
+    }, [pivotRowField, pivotColumnField, pivotAggregations]);
     const onEditPivot = async (pivot, index, pivotType) => {
         setIsLoading(false);
         setErrors([]);
@@ -507,23 +440,11 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
-                    eventTracking,
                 });
                 setSamplePivotTable({ pivot, rows, columns });
                 return;
             }
             catch (e) {
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error fetching pivot data',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'PivotModal',
-                        function: 'onEditPivot',
-                    },
-                });
                 if (e instanceof Error) {
                     setPivotError(e.message);
                     setSamplePivotTable(null);
@@ -633,22 +554,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         }, // limit preview
                         getToken,
-                        eventTracking,
                     });
                     return { pivot: p, rows, columns };
                 }
                 catch (e) {
-                    eventTracking?.logError?.({
-                        type: 'bug', // TODO: determine type
-                        severity: 'high',
-                        message: 'Error fetching pivot data',
-                        errorMessage: e.message,
-                        errorStack: e.stack,
-                        errorData: {
-                            caller: 'PivotModal',
-                            function: 'refreshPivots',
-                        },
-                    });
                     return undefined;
                 }
             }));
@@ -672,17 +581,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             setSelectedPivotIndex(-1);
         }
         catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error fetching pivot recommendations',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'PivotModal',
-                    function: 'refreshPivots',
-                },
-            });
             setPivotError('Failed to fetch pivot recommendations');
             console.error('Failed parsing pivotai response', e);
         }
@@ -795,22 +693,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
-                    eventTracking,
                 });
                 setSamplePivotTable({ pivot, rows, columns });
             }
             catch (e) {
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error fetching pivot data',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'PivotModal',
-                        function: 'pivotFieldChange',
-                    },
-                });
                 if (e instanceof Error) {
                     console.log('error', e);
                     setPivotError(e.message);
@@ -841,22 +727,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         },
                         getToken,
-                        eventTracking,
                     });
                     return { pivot: p, rows, columns };
                 }
                 catch (e) {
-                    eventTracking?.logError?.({
-                        type: 'bug', // TODO: determine type
-                        severity: 'high',
-                        message: 'Error fetching pivot data',
-                        errorMessage: e.message,
-                        errorStack: e.stack,
-                        errorData: {
-                            caller: 'PivotModal',
-                            function: 'fetchPivotTables',
-                        },
-                    });
                     return undefined;
                 }
             }));
@@ -864,58 +738,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         };
         fetchPivotTables();
     }, [createdPivots, dateRange]);
-    const handleResize = () => {
-        const parentRefElement = parentRef?.current;
-        const popoverRefElement = popoverRef?.current;
-        if (parentRefElement && popoverRefElement) {
-            const parentRect = parentRefElement.getBoundingClientRect();
-            const popoverRect = popoverRefElement.getBoundingClientRect();
-            const topOffset = popoverRect.top - parentRect.top;
-            const availableHeight = parentRect.height - topOffset;
-            setAvailableHeight(availableHeight);
-            calculatePopoverPosition();
-        }
-    };
-    const calculatePopoverPosition = () => {
-        if (!buttonRef.current)
-            return;
-        const buttonRect = buttonRef.current.getBoundingClientRect();
-        const parentRefElement = parentRef?.current;
-        if (!parentRefElement)
-            return;
-        const parentRect = parentRefElement.getBoundingClientRect();
-        // Calculate available space above and below
-        const spaceBelow = parentRect.bottom - buttonRect.bottom;
-        const spaceAbove = buttonRect.top - parentRect.top;
-        const desiredHeight = Math.max(450, spaceAbove - 20);
-        setPivotModalTopHeight(desiredHeight);
-        // If there's not enough space below but more space above, position above
-        if (spaceBelow < desiredHeight && spaceAbove > desiredHeight) {
-            setPopoverPosition('top');
-        }
-        else {
-            setPopoverPosition('bottom');
-        }
-    };
-    useEffect(() => {
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        // Add scroll listener to the parent element if it exists
-        const parentElement = parentRef?.current;
-        if (parentElement) {
-            parentElement.addEventListener('scroll', handleResize);
-        }
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            if (parentElement) {
-                parentElement.removeEventListener('scroll', handleResize);
-            }
-        };
-    }, [
-        parentRef?.current,
-        popoverRef?.current,
-        buttonRef?.current?.getBoundingClientRect().top,
-    ]);
     return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
@@ -950,15 +772,9 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             }
                             setIsOpen(!isOpen);
                             setShowUpdatePivot(false);
-                        }, label: triggerButtonText }) })), _jsx("div", { ref: popoverRef, style: {
-                        position: 'absolute', // Change from 'relative' to 'absolute'
-                        ...(isOpen &&
-                            showTrigger && {
-                            top: popoverPosition === 'bottom' ? '100%' : 'auto',
-                            bottom: popoverPosition === 'top' ? '100%' : 'auto',
-                            marginBottom: popoverPosition === 'top' ? pivotModalTopHeight : 0,
-                            marginTop: popoverPosition === 'bottom' ? 8 : 0,
-                        }),
+                        }, label: triggerButtonText }) })), _jsx("div", { style: {
+                        position: 'relative',
+                        ...(isOpen && showTrigger && { top: 12 }),
                     }, children: _jsx(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
                             if (!isOpen) {
                                 setShowUpdatePivot(false);
@@ -967,7 +783,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             setIsOpen(isOpen);
                         }, ignoredRefs: [buttonRef], popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
                             ? popUpTitle
-                            : 'Recommended pivots', horizontalPadding: 0, titlePaddingLeft: 20, popoverChildren: _jsx("div", { style: {
+                            : 'Recommended pivots', popoverChildren: _jsx("div", { style: {
                                 paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
                                 position: 'relative',
                             }, children: showUpdatePivot || !pivotRecommendationsEnabled ? (_jsxs("div", { style: {
@@ -975,223 +791,145 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 20,
-                                    position: 'relative',
-                                    height: '100%',
-                                    overflow: 'auto',
-                                }, children: [_jsx(OverflowContainer, { style: {
-                                            height: popoverPosition === 'bottom'
-                                                ? Math.max(availableHeight - heightAdjustment, 250)
-                                                : pivotModalTopHeight - 140,
-                                        }, children: _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                paddingLeft: 20,
-                                                paddingRight: 20,
-                                            }, children: [previewLoading && _jsx(LoadingComponent, {}), samplePivotTable && !previewLoading && (_jsx("div", { style: {
-                                                        width: pivotCardWidth,
-                                                        // minHeight: 160,
-                                                        paddingBottom: 20,
-                                                    }, children: _jsx(PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
-                                                            setPivotAggregations([
-                                                                {
-                                                                    valueField: undefined,
-                                                                    valueField2: undefined,
-                                                                    aggregationType: undefined,
-                                                                },
-                                                            ]);
-                                                            setPivotRowField(undefined);
-                                                            setPivotColumnField(undefined);
-                                                            setSamplePivotTable(undefined);
-                                                            setPivotSort(undefined);
-                                                            setPivotLimit(undefined);
-                                                        } }) })), _jsxs(PivotColumnContainer, { children: [_jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: 4,
-                                                            }, children: [_jsx(HeaderComponent, { label: "Groupings" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { ref: rowFieldRef, children: _jsx(SelectComponent, { id: "pivot-row-field", label: "Group rows by", value: pivotRowField, onChange: (e) => {
-                                                                                    pivotFieldChange('rowField', e.target.value);
-                                                                                    setPivotRowField(e.target.value === ''
-                                                                                        ? undefined
-                                                                                        : e.target.value);
-                                                                                }, options: allowedRowFields
-                                                                                    .filter((field) => field !== pivotColumnField)
-                                                                                    .map((field) => {
-                                                                                    return {
-                                                                                        label: snakeAndCamelCaseToTitleCase(field),
-                                                                                        value: field,
-                                                                                    };
-                                                                                }), isLoading: uniqueValuesIsLoading, width: 200 }) }), _jsx("div", { ref: colFieldRef, children: _jsx(SelectComponent, { id: "pivot-column-field", label: "Group columns by", value: pivotColumnField, onChange: (e) => {
-                                                                                    pivotFieldChange('columnField', e.target.value);
-                                                                                    setPivotColumnField(e.target.value === ''
-                                                                                        ? undefined
-                                                                                        : e.target.value);
-                                                                                }, options: allowedColumnFields
-                                                                                    .filter((field) => field !== pivotRowField)
-                                                                                    .map((field) => {
-                                                                                    return {
-                                                                                        label: snakeAndCamelCaseToTitleCase(field),
-                                                                                        value: field,
-                                                                                    };
-                                                                                }), isLoading: uniqueValuesIsLoading, width: 200, disabled: pivotRowField === undefined }) })] })] }), _jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: 4,
-                                                                paddingBottom: 20,
-                                                            }, children: [_jsx(HeaderComponent, { label: "Aggregations" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Aggregation Type" }) }), _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Value Field" }) })] }), pivotAggregations?.map((agg, index) => (_jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-aggregation-type", value: agg.aggregationType, onChange: (e) => {
-                                                                                const newAgg = [
-                                                                                    ...pivotAggregations.slice(0, index),
-                                                                                    {
-                                                                                        ...agg,
-                                                                                        aggregationType: e.target.value === ''
-                                                                                            ? undefined
-                                                                                            : e.target.value,
-                                                                                    },
-                                                                                    ...pivotAggregations.slice(index + 1),
-                                                                                ];
-                                                                                pivotFieldChange('aggregations', newAgg);
-                                                                                setPivotAggregations(newAgg);
-                                                                            }, options: [
-                                                                                ...[
-                                                                                    'sum',
-                                                                                    'average',
-                                                                                    'count',
-                                                                                    'max',
-                                                                                    'min',
-                                                                                    'percentage',
-                                                                                ].map((option) => {
-                                                                                    return { label: option, value: option };
-                                                                                }),
-                                                                            ], width: 200 }), _jsx(SelectComponent, { id: "pivot-value-field", value: agg.valueField, onChange: (e) => {
-                                                                                const newAgg = [
-                                                                                    ...pivotAggregations.slice(0, index),
-                                                                                    {
-                                                                                        ...agg,
-                                                                                        valueField: e.target.value === ''
-                                                                                            ? undefined
-                                                                                            : e.target.value,
-                                                                                    },
-                                                                                    ...pivotAggregations.slice(index + 1),
-                                                                                ];
-                                                                                pivotFieldChange('aggregations', newAgg);
-                                                                                setPivotAggregations(newAgg);
-                                                                            }, options: allowedValueFields.map((field) => {
-                                                                                return {
-                                                                                    label: snakeAndCamelCaseToTitleCase(field),
-                                                                                    value: field,
-                                                                                };
-                                                                            }), isLoading: uniqueValuesIsLoading, width: 200 }), _jsx("div", { style: {
-                                                                                marginLeft: -16,
-                                                                                marginRight: -16,
-                                                                                visibility: index > 0 ? 'visible' : 'hidden',
-                                                                            }, children: _jsx(DeleteButtonComponent, { onClick: () => {
-                                                                                    setPivotAggregations([
-                                                                                        ...pivotAggregations.slice(0, index),
-                                                                                        ...pivotAggregations.slice(index + 1),
-                                                                                    ]);
-                                                                                } }) })] }, index)))] })] }), _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        marginRight: 'auto',
-                                                        paddingBottom: 20,
-                                                    }, children: _jsx(SecondaryButtonComponent, { label: "Add Aggregation", onClick: () => {
-                                                            setPivotAggregations([
-                                                                ...pivotAggregations,
-                                                                {
-                                                                    aggregationType: undefined,
-                                                                    valueField: undefined,
-                                                                    valueField2: undefined,
-                                                                },
-                                                            ]);
-                                                        } }) }), _jsx(PivotColumnContainer, { children: _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            gap: 4,
-                                                            paddingBottom: 20,
-                                                        }, children: [_jsx(HeaderComponent, { label: "Sort" }), !showSortInput ? (_jsx("div", { style: { width: 200 }, children: _jsx(SecondaryButtonComponent, { onClick: () => setShowSortInput(true), disabled: disabled, label: "Add Sort" }) })) : (_jsxs("div", { children: [_jsxs(PivotRowContainer, { children: [_jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Sort Field" }) }), _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Sort Direction" }) })] }), _jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-sort-field", value: sortFieldInput, onChange: (e) => {
-                                                                                    setSortFieldInput(e.target.value);
-                                                                                    if (e.target.value &&
-                                                                                        sortDirectionInput) {
-                                                                                        setPivotSort({
-                                                                                            sortField: e.target.value,
-                                                                                            sortDirection: sortDirectionInput,
-                                                                                        });
-                                                                                    }
-                                                                                }, options: (samplePivotTable?.columns ?? []).map((column) => ({
-                                                                                    label: snakeAndCamelCaseToTitleCase(column.field),
-                                                                                    value: column.field,
-                                                                                })), width: 200 }), _jsx(SelectComponent, { id: "pivot-sort-direction", value: sortDirectionInput, onChange: (e) => {
-                                                                                    setSortDirectionInput(e.target.value);
-                                                                                    if (sortFieldInput && e.target.value) {
-                                                                                        setPivotSort({
-                                                                                            sortField: sortFieldInput,
-                                                                                            sortDirection: e.target.value,
-                                                                                        });
-                                                                                    }
-                                                                                }, options: [
-                                                                                    { label: 'Ascending', value: 'ASC' },
-                                                                                    { label: 'Descending', value: 'DESC' },
-                                                                                ], hideEmptyOption: true, width: 200 }), _jsx("div", { style: {
-                                                                                    marginLeft: -16,
-                                                                                    marginRight: -16,
-                                                                                }, children: _jsx(DeleteButtonComponent, { onClick: () => {
-                                                                                        if (pivotSort !== undefined) {
-                                                                                            setPivotSort(undefined);
-                                                                                        }
-                                                                                        setShowSortInput(false);
-                                                                                        setSortFieldInput('');
-                                                                                        setSortDirectionInput('ASC');
-                                                                                    } }) })] })] }))] }) }), _jsx(PivotColumnContainer, { children: _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            gap: 4,
-                                                            paddingBottom: 20,
-                                                        }, children: [_jsx(HeaderComponent, { label: "Limit" }), !showLimitInput ? (_jsx("div", { style: { width: 200 }, children: _jsx(SecondaryButtonComponent, { onClick: () => setShowLimitInput(true), disabled: disabled, label: "Add Limit" }) })) : (_jsxs("div", { children: [_jsx(PivotRowContainer, { children: _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Pivot row limit" }) }) }), _jsxs(PivotRowContainer, { children: [_jsx(TextInputComponent, { id: "pivot-limit", value: limitInput, width: 180, onChange: (e) => {
-                                                                                    setLimitInput(e.target.value);
-                                                                                    const limit = parseInt(e.target.value);
-                                                                                    if (limit) {
-                                                                                        setPivotLimit(limit);
-                                                                                    }
-                                                                                    else {
-                                                                                        setPivotLimit(undefined);
-                                                                                    }
-                                                                                } }), _jsx("div", { style: {
-                                                                                    marginLeft: -16,
-                                                                                    marginRight: -16,
-                                                                                }, children: _jsx(DeleteButtonComponent, { onClick: () => {
-                                                                                        if (pivotLimit !== undefined) {
-                                                                                            setPivotLimit(undefined);
-                                                                                        }
-                                                                                        setShowLimitInput(false);
-                                                                                        setLimitInput('100');
-                                                                                    } }) })] })] }))] }) }), errors.length > 0 && (_jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 8,
-                                                        paddingTop: 8,
-                                                        width: pivotCardWidth,
-                                                        maxWidth: pivotCardWidth,
-                                                        paddingBottom: 20,
-                                                    }, children: errors.map((error, index) => (_jsx(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) }))] }) }), _jsxs("div", { style: {
-                                            position: 'sticky',
+                                }, children: [previewLoading && _jsx(LoadingComponent, {}), samplePivotTable && !previewLoading && (_jsx("div", { style: {
+                                            width: pivotCardWidth,
+                                            minHeight: 160,
+                                        }, children: _jsx(PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
+                                                setPivotAggregations([
+                                                    {
+                                                        valueField: undefined,
+                                                        valueField2: undefined,
+                                                        aggregationType: undefined,
+                                                    },
+                                                ]);
+                                                setPivotRowField(undefined);
+                                                setPivotColumnField(undefined);
+                                                setSamplePivotTable(undefined);
+                                            } }) })), _jsxs(PivotColumnContainer, { children: [_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 4,
+                                                }, children: [_jsx(HeaderComponent, { label: "Groupings" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { ref: rowFieldRef, children: _jsx(SelectComponent, { id: "pivot-row-field", label: "Group rows by", value: pivotRowField, onChange: (e) => {
+                                                                        pivotFieldChange('rowField', e.target.value);
+                                                                        setPivotRowField(e.target.value === ''
+                                                                            ? undefined
+                                                                            : e.target.value);
+                                                                    }, options: allowedRowFields
+                                                                        .filter((field) => field !== pivotColumnField)
+                                                                        .map((field) => {
+                                                                        return {
+                                                                            label: snakeAndCamelCaseToTitleCase(field),
+                                                                            value: field,
+                                                                        };
+                                                                    }), isLoading: uniqueValuesIsLoading, width: 200 }) }), _jsx("div", { ref: colFieldRef, children: _jsx(SelectComponent, { id: "pivot-column-field", label: "Group columns by", value: pivotColumnField, onChange: (e) => {
+                                                                        pivotFieldChange('columnField', e.target.value);
+                                                                        setPivotColumnField(e.target.value === ''
+                                                                            ? undefined
+                                                                            : e.target.value);
+                                                                    }, options: allowedColumnFields
+                                                                        .filter((field) => field !== pivotRowField)
+                                                                        .map((field) => {
+                                                                        return {
+                                                                            label: snakeAndCamelCaseToTitleCase(field),
+                                                                            value: field,
+                                                                        };
+                                                                    }), isLoading: uniqueValuesIsLoading, width: 200, disabled: pivotRowField === undefined }) })] })] }), _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 4,
+                                                }, children: [_jsx(HeaderComponent, { label: "Aggregations" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Aggregation Type" }) }), _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Value Field" }) })] }), pivotAggregations?.map((agg, index) => (_jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-aggregation-type", value: agg.aggregationType, onChange: (e) => {
+                                                                    // if (
+                                                                    //   e.target.value !== 'count' &&
+                                                                    //   agg.valueField &&
+                                                                    //   !numberFormatOptions.includes(
+                                                                    //     columns.find(
+                                                                    //       (col: Column) =>
+                                                                    //         col.field === agg.valueField,
+                                                                    //     )!.format,
+                                                                    //   )
+                                                                    // ) {
+                                                                    //   setPivotValueField(undefined);
+                                                                    // }
+                                                                    const newAgg = [
+                                                                        ...pivotAggregations.slice(0, index),
+                                                                        {
+                                                                            ...agg,
+                                                                            aggregationType: e.target.value === ''
+                                                                                ? undefined
+                                                                                : e.target.value,
+                                                                        },
+                                                                        ...pivotAggregations.slice(index + 1),
+                                                                    ];
+                                                                    pivotFieldChange('aggregations', newAgg);
+                                                                    setPivotAggregations(newAgg);
+                                                                }, options: [
+                                                                    ...[
+                                                                        'sum',
+                                                                        'average',
+                                                                        'count',
+                                                                        'max',
+                                                                        'min',
+                                                                        'percentage',
+                                                                    ].map((option) => {
+                                                                        return { label: option, value: option };
+                                                                    }),
+                                                                ], width: 200 }), _jsx(SelectComponent, { id: "pivot-value-field", value: agg.valueField, onChange: (e) => {
+                                                                    const newAgg = [
+                                                                        ...pivotAggregations.slice(0, index),
+                                                                        {
+                                                                            ...agg,
+                                                                            valueField: e.target.value === ''
+                                                                                ? undefined
+                                                                                : e.target.value,
+                                                                        },
+                                                                        ...pivotAggregations.slice(index + 1),
+                                                                    ];
+                                                                    pivotFieldChange('aggregations', newAgg);
+                                                                    setPivotAggregations(newAgg);
+                                                                }, options: allowedValueFields.map((field) => {
+                                                                    return {
+                                                                        label: snakeAndCamelCaseToTitleCase(field),
+                                                                        value: field,
+                                                                    };
+                                                                }), isLoading: uniqueValuesIsLoading, width: 200 }), _jsx("div", { style: {
+                                                                    marginLeft: -16,
+                                                                    marginRight: -16,
+                                                                    visibility: index > 0 ? 'visible' : 'hidden',
+                                                                }, children: _jsx(DeleteButtonComponent, { onClick: () => {
+                                                                        setPivotAggregations([
+                                                                            ...pivotAggregations.slice(0, index),
+                                                                            ...pivotAggregations.slice(index + 1),
+                                                                        ]);
+                                                                    } }) })] }, index)))] })] }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            marginRight: 'auto',
+                                        }, children: _jsx(SecondaryButtonComponent, { label: "Add Aggregation", onClick: () => {
+                                                setPivotAggregations([
+                                                    ...pivotAggregations,
+                                                    {
+                                                        aggregationType: undefined,
+                                                        valueField: undefined,
+                                                        valueField2: undefined,
+                                                    },
+                                                ]);
+                                            } }) }), errors.length > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            paddingTop: 8,
+                                            width: pivotCardWidth,
+                                            maxWidth: pivotCardWidth,
+                                        }, children: errors.map((error, index) => (_jsx(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) })), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
-                                            justifyContent: 'flex-end',
                                             marginLeft: 'auto',
                                             gap: 8,
-                                            bottom: 0,
-                                            right: 0,
-                                            backgroundColor: 'white',
-                                            width: '100%',
-                                            paddingRight: 20,
                                         }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                     setPivotError('');
                                                     setIsOpen(false);
                                                     setPopUpTitle('Add pivot');
-                                                }, label: "Cancel" }), _jsx(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: (showSortInput &&
-                                                    (!sortFieldInput ||
-                                                        !(samplePivotTable?.columns ?? []).some((c) => c.field === sortFieldInput) ||
-                                                        !sortDirectionInput)) ||
-                                                    !(pivotAggregations?.length > 0) ||
+                                                }, label: "Cancel" }), _jsx(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: !(pivotAggregations?.length > 0) ||
                                                     pivotAggregations.some((agg) => !agg.aggregationType ||
                                                         (!agg.valueField &&
                                                             agg.aggregationType !== 'count')) })] })] })) : (_jsx("div", { style: {
@@ -1200,13 +938,8 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                     fontFamily: theme?.fontFamily,
                                     color: theme?.primaryTextColor,
                                     width: selectedPivotTable ? 500 : 600,
-                                    minHeight: pivotModalTopHeight - 100,
-                                    maxHeight: popoverPosition === 'bottom'
-                                        ? 600
-                                        : pivotModalTopHeight - 100,
+                                    maxHeight: 600,
                                     overflowY: 'scroll',
-                                    paddingRight: 20,
-                                    paddingLeft: 20,
                                 }, children: selectedPivotIndex >= 0 ? (_jsx("div", { children: _jsx("div", { onClick: () => {
                                             setPopUpTitle('Edit pivot');
                                             onEditPivot(createdPivots[0], 0);
@@ -1220,7 +953,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 8,
-                                                paddingRight: 20,
                                             }, children: [_jsx(SecondaryButtonComponent, { label: "Regenerate", onClick: refreshPivots, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: _jsx("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }) }), _jsx(SecondaryButtonComponent, { label: "Create pivot +", onClick: () => onEditPivot({ aggregations: [{}] }, null) })] }), isLoading || uniqueValuesIsLoading ? (_jsx(LoadingComponent, {})) : pivotError ? (_jsx("div", { style: {
                                                 width: '100%',
                                                 height: '140px',
@@ -1513,7 +1245,7 @@ export function isDateField(fieldType) {
 //   }
 //   return newData;
 // };
-export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, eventTracking, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
+export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
     try {
         if (report && client) {
             const pivotTable = await generatePivotWithSQL({
@@ -1536,17 +1268,6 @@ export async function generatePivotTable({ pivot, dateBucket, dateFilter, report
         }
     }
     catch (e) {
-        eventTracking?.logError?.({
-            type: 'bug', // TODO: determine type
-            severity: 'high',
-            message: 'Error generating pivot table',
-            errorMessage: e.message,
-            errorStack: e.stack,
-            errorData: {
-                caller: 'PivotModal',
-                function: 'generatePivotTable',
-            },
-        });
         throw Error(`Failed to generate pivot table with SQL: ${e}`);
     }
     throw Error('Failed to generate pivot table: invalid report');