@quillsql/react 2.6.1 → 2.6.3

package/lib/ReportBuilder.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPostgresBasicType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,27 +11,13 @@ const react_1 = require("react");
 const Context_1 = require("./Context");
 const SQLEditor_1 = require("./SQLEditor");
 const date_fns_1 = require("date-fns");
-const assets_1 = require("./assets");
-function QuillModal({ children, isOpen, onClose, title, theme }) {
-    if (!isOpen) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            position: 'absolute',
-            top: 45,
-            minWidth: 300,
-            left: 0,
-            backgroundColor: theme.backgroundColor || 'white',
-            padding: '20px',
-            zIndex: '1000',
-            borderRadius: 8,
-            boxShadow: '0 1px 8px 0 rgba(0,0,0,.09)',
-            borderWidth: theme.borderWidth,
-            borderStyle: 'solid',
-            borderColor: theme.borderColor,
-        }, children: children }));
-}
-function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onError, SelectComponent, ButtonComponent, ModalComponent, ModalTriggerComponent, TextInputComponent, tagStyle, }) {
+const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
+const Table_1 = __importDefault(require("./Table"));
+const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
+const UiComponents_1 = require("./components/UiComponents");
+function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, }) {
     const [data, setData] = (0, react_1.useState)([]);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
@@ -36,72 +25,15 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
     const [columns, setColumns] = (0, react_1.useState)([]);
     const [fields, setFields] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        async function getData(schema) {
-            if (schema.length && !data.length) {
-                const { publicKey, customerId, environment } = client;
-                // const response = await axios.post(
-                //   `https://quill-344421.uc.r.appspot.com/dashquery`,
-                //   {
-                //     query: `select * from ${schema[0].displayName} limit 10;`,
-                //   },
-                //   {
-                //     params: {
-                //       orgId: customerId,
-                //       publicKey,
-                //     },
-                //     headers: {
-                //       Authorization: `Bearer `,
-                //       environment: environment || undefined,
-                //     },
-                //   }
-                // );
-                const url = new URL('https://quill-344421.uc.r.appspot.com/dashquery');
-                url.searchParams.append('orgId', customerId);
-                url.searchParams.append('publicKey', publicKey);
-                const requestOptions = {
-                    method: 'POST',
-                    headers: {
-                        Authorization: 'Bearer ',
-                        ...(environment ? { environment } : {}),
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        query: `select * from ${schema[0].displayName} limit 10;`,
-                    }),
-                };
-                const response = await fetch(url.toString(), requestOptions);
-                const responseData = await response.json();
-                setData(responseData.rows);
-            }
-        }
-        getData(schema);
-    }, [schema]);
+    const [selectedPivot, setSelectedPivot] = (0, react_1.useState)(null);
+    const defaultDateRange = (0, dateRangePickerUtils_1.getRangeFromPreset)('90d');
+    const [dateRange, setDateRange] = (0, react_1.useState)(defaultDateRange);
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
         async function getSchema() {
-            const { publicKey, environment } = client;
-            // const response3 = await axios.get(
-            //   `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`,
-            //   {
-            //     headers: {
-            //       Authorization: `Bearer `,
-            //       environment: environment || undefined,
-            //     },
-            //   }
-            // );
-            const url = `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`;
-            const requestOptions = {
-                method: 'GET',
-                headers: {
-                    Authorization: 'Bearer ',
-                    ...(environment ? { environment } : {}),
-                },
-            };
-            const response = await fetch(url, requestOptions);
-            const responseData = await response.json();
+            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
             if (isSubscribed) {
-                setSchema(responseData.tables);
+                setSchema(resp.tables);
             }
         }
         if (isSubscribed) {
@@ -111,191 +43,80 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
             isSubscribed = false;
         };
     }, []);
-    const runQuery = async (query) => {
-        const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
-        let response;
-        let responseData;
-        if (queryEndpoint) {
-            // response = await axios.post(
-            //   queryEndpoint,
-            //   { metadata: { query, task: 'query' } },
-            //   { headers: queryHeaders, withCredentials }
-            // );
-            const requestOptions = {
-                method: 'POST',
-                headers: {
-                    ...queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                credentials: withCredentials ? 'include' : 'same-origin',
-                body: JSON.stringify({
-                    metadata: customerId
-                        ? { query, task: 'query', orgId: customerId }
-                        : { query, task: 'query' },
-                }),
-            };
-            setLoading(true);
-            response = await fetch(queryEndpoint, requestOptions);
-            responseData = await response.json();
+    (0, react_1.useEffect)(() => {
+        if (onDateFilterChange) {
+            onDateFilterChange(dateRange);
         }
-        else {
-            // response = await axios.post(
-            //   `https://quill-344421.uc.r.appspot.com/dashquery`,
-            //   {
-            //     query,
-            //   },
-            //   {
-            //     params: {
-            //       orgId: customerId,
-            //       publicKey,
-            //     },
-            //     headers: {
-            //       Authorization: `Bearer `,
-            //       environment: environment || undefined,
-            //     },
-            //   }
-            // );
-            const url = new URL('https://quill-344421.uc.r.appspot.com/dashquery');
-            url.searchParams.append('orgId', customerId);
-            url.searchParams.append('publicKey', publicKey);
-            const requestOptions = {
-                method: 'POST',
-                headers: {
-                    Authorization: 'Bearer ',
-                    ...(environment ? { environment } : {}),
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ query }),
-            };
-            setLoading(true);
-            response = await fetch(url.toString(), requestOptions);
-            responseData = await response.json();
+    }, [dateRange]);
+    (0, react_1.useEffect)(() => {
+        if (onDateFilterChange) {
+            onDateFilterChange(defaultDateRange);
         }
-        if (response && responseData && responseData.errorMessage) {
-            onError(responseData.errorMessage);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setColumns([]);
+    }, [tableName]);
+    const runQuery = async (query) => {
+        setLoading(true);
+        const hostedBody = {
+            metadata: client.customerId
+                ? { query, task: 'query', orgId: client.customerId }
+                : { query, task: 'query' },
+        };
+        const cloudBody = { query };
+        const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+        if (resp && resp.errorMessage) {
+            onError(resp.errorMessage);
             setData([]);
-            onChangeData([]);
+            // onChangeData([]);
             setColumns([]);
-            onChangeColumns([]);
+            // onChangeColumns([]);
             setFields([]);
+            if (onChangeFields) {
+                onChangeFields([]);
+            }
             setLoading(false);
             return;
         }
-        setData(responseData.rows);
-        onChangeData(responseData.rows);
-        setColumns(responseData.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
-        onChangeColumns(responseData.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
-        setFields(responseData.fields);
+        setData(resp.rows);
+        setColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
+        if (selectedPivot) {
+            const { rows, columns } = (0, PivotModal_1.generatePivotTable)(selectedPivot, resp.rows, dateRange);
+            if (onChangePivot) {
+                onChangePivot(selectedPivot, columns, rows);
+            }
+        }
+        else {
+            if (onChangeData) {
+                onChangeData(resp.rows);
+            }
+            if (onChangeColumns) {
+                onChangeColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
+            }
+        }
+        setFields(resp.fields);
+        if (onChangeFields) {
+            onChangeFields(resp.fields);
+        }
         setLoading(false);
     };
     (0, react_1.useEffect)(() => {
         if (onChangeLoading) {
             onChangeLoading(loading);
         }
-    }, [loading, onChangeLoading]);
-    if (!schema.length) {
+    }, [loading]);
+    if (!schema || !schema.length || !tableName) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent
-            ? SelectComponent
-            : ({ onChange, value, options }) => {
-                return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
-                                width: '100%',
-                                minWidth: 230,
-                                WebkitAppearance: 'none',
-                                outline: 'none',
-                                textAlign: 'left',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                borderRadius: 6,
-                                paddingLeft: 12,
-                                paddingRight: 12,
-                                height: 38,
-                                borderWidth: theme.borderWidth,
-                                borderColor: theme.borderColor,
-                                background: theme.backgroundColor,
-                                color: theme.primaryTextColor,
-                                boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                                fontFamily: theme.fontFamily,
-                            }, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
-                                height: '20px',
-                                width: '20px',
-                                flex: 'none',
-                                position: 'absolute',
-                                right: 8,
-                                top: 9,
-                                color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" })] }));
-            }, ButtonComponent: ButtonComponent
-            ? ButtonComponent
-            : ({ onClick, label }) => {
-                return ((0, jsx_runtime_1.jsx)("div", { style: {
-                        height: 38,
-                        background: theme.primaryButtonColor,
-                        borderWidth: theme.borderWidth,
-                        borderColor: theme.borderColor,
-                        color: theme.backgroundColor,
-                        display: 'flex',
-                        borderRadius: 6,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        maxWidth: 200,
-                        outline: 'none',
-                        cursor: 'pointer',
-                        fontFamily: theme.fontFamily,
-                        fontWeight: theme.buttonFontWeight || 500,
-                        fontSize: 14,
-                    }, onClick: onClick, children: label }));
-            }, ModalComponent: ModalComponent
-            ? ModalComponent
-            : ({ children, isOpen, onClose, title }) => {
-                return ((0, jsx_runtime_1.jsx)(QuillModal, { isOpen: isOpen, theme: theme, onClose: onClose, title: title, children: children }));
-            }, ModalTriggerComponent: ModalTriggerComponent
-            ? ModalTriggerComponent
-            : ({ onClick, label }) => {
-                return ((0, jsx_runtime_1.jsx)("div", { style: {
-                        height: 32,
-                        background: theme.backgroundColor,
-                        borderWidth: theme.borderWidth,
-                        borderColor: theme.borderColor,
-                        borderStyle: 'solid',
-                        outline: 'none',
-                        cursor: 'pointer',
-                        display: 'flex',
-                        borderRadius: 6,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                        paddingRight: 12,
-                        paddingLeft: 12,
-                        fontSize: 14,
-                        color: theme.primaryTextColor,
-                        fontWeight: theme.buttonFontWeight || 600,
-                        fontFamily: theme.fontFamily,
-                    }, onClick: onClick, children: label }));
-            }, TextInputComponent: TextInputComponent
-            ? TextInputComponent
-            : ({ onChange, value, id }) => {
-                return ((0, jsx_runtime_1.jsx)("input", { style: {
-                        outline: 'none',
-                        textAlign: 'left',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        borderRadius: 6,
-                        paddingLeft: 12,
-                        paddingRight: 12,
-                        height: 38,
-                        borderWidth: theme.borderWidth,
-                        borderColor: theme.borderColor,
-                        borderStyle: 'solid',
-                        background: theme.backgroundColor,
-                        color: theme.primaryTextColor,
-                        boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                        fontFamily: theme.fontFamily,
-                    }, id: id, onChange: onChange, value: value }));
-            }, tagStyle: tagStyle }));
+    return ((0, jsx_runtime_1.jsx)(ReportingTool, { containerStyle: containerStyle, theme: theme, data: data, columns: columns, fields: fields, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
+            setSelectedPivot(pivot);
+            if (onChangePivot) {
+                const table = pivot
+                    ? (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange)
+                    : { rows: null, columns: null };
+                onChangePivot(pivot, table.columns, table.rows);
+            }
+        }, schema: schema, tableName: tableName, dateColumn: dateColumn, selectedTagBorderColor: selectedTagBorderColor, onChangeQuery: onChangeQuery, runQuery: runQuery, dateRange: dateRange, setDateRange: setDateRange, defaultDateRange: defaultDateRange, chartBuilderEnabled: chartBuilderEnabled, HeaderComponent: Header, LabelComponent: Label, SelectComponent: Select, TextComponent: Text, ButtonComponent: Button, ModalComponent: Modal, PopoverComponent: Popover, TextInputComponent: TextInput, tagStyle: tagStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions }));
 }
 exports.default = ReportBuilder;
 function getPostgresBasicType(column) {
@@ -347,9 +168,34 @@ function getPostgresBasicType(column) {
     return format;
 }
 exports.getPostgresBasicType = getPostgresBasicType;
-function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponent, onChangeQuery, theme, ModalComponent, ModalTriggerComponent, TextInputComponent, tagStyle, }) {
-    const [selectedTable, setSelectedTable] = (0, react_1.useState)(schema[0]);
-    const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns[0]);
+const newDateWhereAST = (column, dateRange) => {
+    return {
+        type: 'binary_expr',
+        operator: 'BETWEEN',
+        left: {
+            type: 'column_ref',
+            table: null,
+            column: column,
+        },
+        right: {
+            type: 'expr_list',
+            value: [
+                {
+                    type: 'single_quote_string',
+                    value: (0, date_fns_1.format)(new Date(dateRange[0]), 'MM/dd/yyyy'),
+                },
+                {
+                    type: 'single_quote_string',
+                    value: (0, date_fns_1.format)(new Date(dateRange[1]), 'MM/dd/yyyy'),
+                },
+            ],
+        },
+    };
+};
+function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, }) {
+    const selectedTable = (0, react_1.useMemo)(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
+    const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns.find(elem => elem.name !== 'id'));
+    const parentRef = (0, react_1.useRef)();
     const [filters, setFilters] = (0, react_1.useState)([]);
     const [AST, setAST] = (0, react_1.useState)({
         with: null,
@@ -358,8 +204,8 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         distinct: { type: null },
         columns: '*',
         into: { position: null },
-        from: [{ db: null, table: schema[0].displayName, as: null }],
-        where: null,
+        from: [{ db: null, table: selectedTable.displayName, as: null }],
+        where: newDateWhereAST(dateColumn, defaultDateRange),
         groupby: null,
         having: null,
         orderby: null,
@@ -374,111 +220,27 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
     const [stringFilterValues, setStringFilterValues] = (0, react_1.useState)([]);
     const [columnType, setColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
     const [sqlQuery, setSqlQuery] = (0, react_1.useState)('');
-    // month | week | day | quarter
-    const [dateBucket, setDateBucket] = (0, react_1.useState)('month');
     const [indexBeingEdited, setIndexBeingEdited] = (0, react_1.useState)(-1);
-    const [groupBys, setGroupBys] = (0, react_1.useState)([]);
-    const [aggregations, setAggregations] = (0, react_1.useState)([]);
-    const [selectedGroupByColumn, setSelectedGroupByColumn] = (0, react_1.useState)(schema[0].columns[0]);
-    const [groupByColumnType, setGroupByColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
-    const [selectedSortByColumn, setSelectedSortByColumn] = (0, react_1.useState)(schema[0].columns[0].name);
-    const [sortBys, setSortBys] = (0, react_1.useState)([]);
-    const [selectedSortByDirection, setSelectedSortByDirection] = (0, react_1.useState)('ascending');
-    const [groupByIndexBeingEdited, setGroupByIndexBeingEdited] = (0, react_1.useState)(-1);
-    const [sortByIndexBeingEdited, setSortByIndexBeingEdited] = (0, react_1.useState)(-1);
-    const [sortableColumns, setSortableColumns] = (0, react_1.useState)(schema[0].columns.map(col => col.name));
     const [isAddFilterModalOpen, setIsAddFilterModalOpen] = (0, react_1.useState)(false);
-    const [isGroupByModalOpen, setIsGroupByModalOpen] = (0, react_1.useState)(false);
-    const [isSortByModalOpen, setIsSortByModalOpen] = (0, react_1.useState)(false);
-    const addGroupBy = () => {
-        if (selectedGroupByColumn && groupByColumnType) {
-            if (groupByColumnType === 'string') {
-                setGroupBys(groupBys => {
-                    return [
-                        ...groupBys,
-                        {
-                            column: selectedGroupByColumn.name,
-                            columnType: groupByColumnType,
-                            tag: selectedGroupByColumn.name,
-                        },
-                    ];
-                });
-                return;
-            }
-            else if (groupByColumnType === 'number') {
-                // is this possible lmao
-                return;
-            }
-            else if (groupByColumnType === 'date') {
-                setGroupBys(groupBys => {
-                    return [
-                        ...groupBys,
-                        {
-                            column: selectedGroupByColumn.name,
-                            columnType: groupByColumnType,
-                            bucket: dateBucket,
-                            tag: dateBucket,
-                        },
-                    ];
-                });
-                return;
-            }
-        }
-    };
-    const addSortBy = () => {
-        setSortBys(sortBys => {
-            return [
-                ...sortBys,
-                {
-                    column: selectedSortByColumn,
-                    direction: selectedSortByDirection,
-                },
-            ];
-        });
-    };
-    const removeSortBy = index => {
-        setSortBys(oldSortBys => {
-            const newSortBys = [...oldSortBys];
-            newSortBys.splice(index, 1);
-            return newSortBys;
-        });
-        setSortByIndexBeingEdited(-1);
-    };
-    const removeGroupBy = index => {
-        const columnBeingDeleted = groupBys[index].tag;
-        setSortBys(oldSortBys => {
-            const newSortBys = [
-                ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
-            ];
-            return newSortBys;
-        });
-        setGroupBys(oldGroupBys => {
-            const newGroupBys = [...oldGroupBys];
-            newGroupBys.splice(index, 1);
-            return newGroupBys;
-        });
-        setGroupByIndexBeingEdited(-1);
-    };
-    const updateSortBy = index => {
-        if (selectedSortByColumn && selectedSortByDirection) {
-            setSortBys(sortBys => {
-                const newSortBys = [...sortBys];
-                newSortBys[index] = {
-                    column: selectedSortByColumn,
-                    direction: selectedSortByDirection,
-                };
-                return newSortBys;
-            });
-            setSortByIndexBeingEdited(-1);
-            return;
-        }
-    };
+    const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
+    const [isPivotModalOpen, setIsPivotModalOpen] = (0, react_1.useState)(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
+    const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
+    const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
+    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
+    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
+    const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
+    const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
     (0, react_1.useEffect)(() => {
         setColumnType(getPostgresBasicType(selectedColumn));
     }, [selectedColumn]);
     (0, react_1.useEffect)(() => {
-        setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
-    }, [selectedGroupByColumn]);
+        removePivot();
+        setCreatedPivots([]);
+        setRecommendedPivots([]);
+    }, [selectedTable]);
     const selectFilter = index => {
         const filter = filters[index];
         const matchingColumn = selectedTable.columns.find(column => column.name === filter.column);
@@ -498,58 +260,27 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             setIndexBeingEdited(index);
         }
     };
-    const selectSortBy = index => {
-        const sortBy = sortBys[index];
-        setSelectedSortByColumn(sortBy.column);
-        setSelectedSortByDirection(sortBy.direction);
-        setSortByIndexBeingEdited(index);
-    };
-    const selectGroupBy = index => {
-        const groupBy = groupBys[index];
-        const matchingColumn = selectedTable.columns.find(column => column.name === groupBy.column);
-        setSelectedGroupByColumn(matchingColumn);
-        if (groupBy.bucket) {
-            setDateBucket(groupBy.bucket);
+    const selectedPivotTable = (0, react_1.useMemo)(() => {
+        if (selectedPivot && data) {
+            return (0, PivotModal_1.generatePivotTable)(selectedPivot, data, dateRange);
+        }
+        else {
+            return {};
+        }
+    }, [selectedPivot, data, dateRange]);
+    const removePivot = () => {
+        setSelectedPivotIndex(-1);
+        setSelectedPivot(null);
+        if (onChangePivot) {
+            onChangePivot(null, null, null);
         }
-        setGroupByIndexBeingEdited(index);
     };
-    const updateGroupBy = index => {
-        if (selectedGroupByColumn && groupByColumnType) {
-            // if column changed, then auto delete the sort using that column
-            const columnBeingDeleted = selectedGroupByColumn.name !== groupBys[index].column
-                ? groupBys[index].tag
-                : 'nocolumnbeingdeleted';
-            setSortBys(oldSortBys => {
-                const newSortBys = [
-                    ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
-                ];
-                return newSortBys;
-            });
-            if (groupByColumnType === 'date') {
-                setGroupBys(groupBys => {
-                    const newGroupBys = [...groupBys];
-                    newGroupBys[index] = {
-                        column: selectedGroupByColumn.name,
-                        columnType: groupByColumnType,
-                        bucket: dateBucket,
-                        tag: dateBucket,
-                    };
-                    return newGroupBys;
-                });
-            }
-            else {
-                setGroupBys(groupBys => {
-                    const newGroupBys = [...groupBys];
-                    newGroupBys[index] = {
-                        column: selectedGroupByColumn.name,
-                        columnType: groupByColumnType,
-                        tag: selectedGroupByColumn.name,
-                    };
-                    return newGroupBys;
-                });
-            }
-            setGroupByIndexBeingEdited(-1);
-            return;
+    const selectPivot = (pivot, index) => {
+        setSelectedPivotIndex(index);
+        setSelectedPivot(pivot);
+        const pivotTable = (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange);
+        if (onChangePivot) {
+            onChangePivot(pivot, pivotTable.columns, pivotTable.rows);
         }
     };
     const updateFilter = index => {
@@ -666,98 +397,51 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             }
         }
     };
-    const setAggregationColumn = (column, index) => {
-        // ex
-        setAggregations(aggregations => {
-            const newAggregations = [...aggregations];
-            newAggregations[index] = {
-                ...newAggregations[index],
-                column: column,
-            };
-            return newAggregations;
-        });
-    };
-    const setAggregationType = (aggregationType, index) => {
-        // ex
-        setAggregations(aggregations => {
-            const newAggregations = [...aggregations];
-            newAggregations[index] = {
-                ...newAggregations[index],
-                aggregationType: aggregationType,
-            };
-            return newAggregations;
-        });
-    };
-    const addAggregation = () => {
-        // setAggregations([
-        //   {
-        //     column: selectedTable.columns.filter(
-        //       (col) => getPostgresBasicType(col) === "number"
-        //     )[0],
-        //     aggregationType: "sum",
-        //   },
-        // ]);
-        setAggregations(aggregations => {
-            const newAggregations = [
-                ...aggregations,
-                {
-                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number' &&
-                        !aggregations.map(elem => elem.name).includes(col.name))[0],
-                    aggregationType: 'sum',
-                },
-            ];
-            return newAggregations;
-        });
-    };
-    // useEffect(() => {
-    //   if (sqlQuery && sqlQuery.length &&) {
-    //     runQuery(sqlQuery);
-    //   }
-    // }, [sqlQuery]);
-    const handleRunQuery = () => {
-        if (sqlQuery && sqlQuery.length) {
-            runQuery(sqlQuery);
+    const handleRunQuery = (newSqlQuery) => {
+        const queryToUse = newSqlQuery || sqlQuery;
+        if (queryToUse && queryToUse.length) {
+            runQuery(queryToUse);
         }
     };
     (0, react_1.useEffect)(() => {
         // if selected table changes, clear everything
         if (selectedTable.displayName !== AST.from.table) {
-            setSelectedColumn(selectedTable.columns[0]);
-            setSortableColumns(selectedTable.columns.map(col => col.name));
-            setGroupBys([]);
-            setSortBys([]);
+            setSelectedColumn(selectedTable.columns.find(elem => elem.name !== 'id'));
             setFilters([]);
-            // setAST((AST) => {
-            //   return {
-            //     with: null,
-            //     type: "select",
-            //     options: null,
-            //     distinct: { type: null },
-            //     columns: "*",
-            //     into: { position: null },
-            //     where: null,
-            //     groupby: null,
-            //     having: null,
-            //     orderby: null,
-            //     limit: { seperator: "", value: [] },
-            //     window: null,
-            //     from: [{ db: null, table: selectedTable.displayName, as: null }],
-            //   };
-            // });
+            removePivot();
+            setAST(AST => {
+                return {
+                    with: null,
+                    type: 'select',
+                    options: null,
+                    distinct: { type: null },
+                    columns: '*',
+                    into: { position: null },
+                    // where: newDateWhereAST(dateColumn, defaultDateRange),
+                    where: null,
+                    groupby: null,
+                    having: null,
+                    orderby: null,
+                    limit: { seperator: '', value: [] },
+                    window: null,
+                    from: [{ db: null, table: selectedTable.displayName, as: null }],
+                };
+            });
             return;
         }
     }, [selectedTable]);
     // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
     (0, react_1.useEffect)(() => {
-        if (filters.length || groupBys.length || aggregations.length) {
+        if (filters.length || dateRange) {
             const newAST = {
                 with: null,
                 type: 'select',
                 options: null,
                 distinct: null,
-                columns: null,
+                columns: '*',
                 into: { position: null },
                 from: [{ db: null, table: selectedTable.displayName, as: null }],
+                // where: newDateWhereAST(dateColumn, dateRange || defaultDateRange),
                 where: null,
                 groupby: null,
                 having: null,
@@ -807,28 +491,7 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                     };
                 }
                 else if (columnType === 'date') {
-                    newCondition = {
-                        type: 'binary_expr',
-                        operator: 'BETWEEN',
-                        left: {
-                            type: 'column_ref',
-                            table: null,
-                            column: column,
-                        },
-                        right: {
-                            type: 'expr_list',
-                            value: [
-                                {
-                                    type: 'single_quote_string',
-                                    value: (0, date_fns_1.format)(new Date(dateStart), 'MM/dd/yyyy'),
-                                },
-                                {
-                                    type: 'single_quote_string',
-                                    value: (0, date_fns_1.format)(new Date(dateEnd), 'MM/dd/yyyy'),
-                                },
-                            ],
-                        },
-                    };
+                    newCondition = newDateWhereAST(column, [dateStart, dateEnd]);
                 }
                 if (!newAST.where) {
                     newAST.where = newCondition;
@@ -842,144 +505,9 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                     };
                 }
             }
-            // GROUP BYS and AGGREGATIONS
-            // if (groupBys.length > 0) {
-            //   newAST.groupby = groupBys.map(groupBy => ({
-            //     type: 'column_ref',
-            //     table: null,
-            //     column: groupBy.column,
-            //   }));
-            //   if (aggregations.length > 0) {
-            //     newAST.columns = [
-            //       ...groupBys.map(groupBy => ({
-            //         expr: {
-            //           type: 'column_ref',
-            //           table: null,
-            //           column: groupBy.column,
-            //         },
-            //         as: null,
-            //       })),
-            //       ...aggregations.map(aggregation => ({
-            //         expr: {
-            //           type: 'aggr_func',
-            //           name: aggregation.aggregationType.toUpperCase(),
-            //           args: {
-            //             expr: {
-            //               type: 'column_ref',
-            //               table: null,
-            //               column: aggregation.column.name,
-            //             },
-            //           },
-            //           over: null,
-            //         },
-            //         as: null,
-            //       })),
-            //     ];
-            //   } else {
-            //     newAST.columns = groupBys.map(groupBy => ({
-            //       expr: {
-            //         type: 'column_ref',
-            //         table: null,
-            //         column: groupBy.column,
-            //       },
-            //       as: null,
-            //     }));
-            //   }
-            // } else {
-            //   newAST.columns = '*';
-            //   newAST.groupby = null;
-            // }
-            // GROUP BYS
-            if (groupBys.length > 0) {
-                newAST.columns = [];
-                newAST.groupby = [];
-                for (let i = 0; i < groupBys.length; i++) {
-                    const groupBy = groupBys[i];
-                    if (groupBy.columnType === 'date') {
-                        newAST.columns.push({
-                            expr: {
-                                type: 'function',
-                                name: 'date_trunc',
-                                args: {
-                                    type: 'expr_list',
-                                    value: [
-                                        {
-                                            type: 'single_quote_string',
-                                            value: groupBy.bucket,
-                                        },
-                                        {
-                                            type: 'column_ref',
-                                            table: null,
-                                            column: groupBy.column,
-                                        },
-                                    ],
-                                },
-                                over: null,
-                            },
-                            as: groupBy.bucket,
-                        });
-                        newAST.groupby.push({
-                            type: 'column_ref',
-                            table: null,
-                            column: groupBy.bucket,
-                        });
-                    }
-                    else {
-                        newAST.columns.push({
-                            expr: {
-                                type: 'column_ref',
-                                table: null,
-                                column: groupBy.column,
-                            },
-                            as: null,
-                        });
-                        newAST.groupby.push({
-                            type: 'column_ref',
-                            table: null,
-                            column: groupBy.column,
-                        });
-                    }
-                }
-                // AGGREGATIONS
-                if (aggregations.length > 0) {
-                    for (let i = 0; i < aggregations.length; i++) {
-                        const aggregation = aggregations[i];
-                        newAST.columns.push({
-                            expr: {
-                                type: 'aggr_func',
-                                name: aggregation.aggregationType.toUpperCase(),
-                                args: {
-                                    expr: {
-                                        type: 'column_ref',
-                                        table: null,
-                                        column: aggregation.column.name,
-                                    },
-                                },
-                                over: null,
-                            },
-                            as: null,
-                        });
-                    }
-                }
-            }
-            else {
-                newAST.columns = '*';
-                newAST.groupby = null;
-            }
-            if (sortBys.length > 0) {
-                newAST.orderby = [];
-                for (let i = 0; i < sortBys.length; i++) {
-                    const sortBy = sortBys[i];
-                    newAST.orderby.push({
-                        expr: { type: 'column_ref', table: null, column: sortBy.column },
-                        type: sortBy.direction === 'descending' ? 'DESC' : 'ASC',
-                    });
-                }
-                // "orderby":[{"expr":{"type":"column_ref","table":null,"column":"amount"},"type":"DESC"},{"expr":{"type":"column_ref","table":null,"column":"month"},"type":"ASC"}]
-            }
             setAST(newAST);
         }
-    }, [filters, groupBys, aggregations, sortBys]);
+    }, [filters, dateRange]);
     const removeFilter = index => {
         setFilters(oldFilters => {
             const newFilters = [...oldFilters];
@@ -989,7 +517,9 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         setIndexBeingEdited(-1);
     };
     const computeStats = (0, react_1.useCallback)(column => {
-        if (!computedColumns[column.name] && data) {
+        if ((!computedColumns[column.name] ||
+            computedColumns[column.name].length === 0) &&
+            data) {
             const basicType = getPostgresBasicType(column);
             let result;
             if (basicType === 'number') {
@@ -1026,7 +556,7 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
     // Call this function whenever the selected column changes
     (0, react_1.useEffect)(() => {
         computeStats(selectedColumn);
-    }, [selectedColumn]);
+    }, [selectedColumn, data]);
     // Use the results directly in your component
     const columnStats = computedColumns[selectedColumn.name];
     // useEffect(() => {
@@ -1039,45 +569,16 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
     //     }
     //   }
     // }, [AST]);
-    (0, react_1.useEffect)(() => {
-        if (!aggregations.length) {
-            setAggregations([
-                {
-                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number')[0],
-                    aggregationType: 'sum',
-                },
-            ]);
-        }
-    }, [selectedGroupByColumn]);
     (0, react_1.useEffect)(() => {
         const getSqlQueryFromAST = async () => {
             try {
                 if (AST && AST.from[0].table) {
-                    // const response = await axios.post(
-                    //   'https://quill-344421.uc.r.appspot.com/sqlify',
-                    //   { ast: AST }
-                    // );
-                    const url = 'https://quill-344421.uc.r.appspot.com/sqlify';
-                    const requestOptions = {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ ast: AST }),
-                    };
-                    const response = await fetch(url, requestOptions);
-                    const responseData = await response.json();
-                    const sqlQuery = responseData.query; // assuming the response contains the SQL query
-                    // alert(sqlQuery);
-                    if (sqlQuery) {
-                        onChangeQuery(sqlQuery);
-                        setSqlQuery(sqlQuery);
-                        if (AST.columns === '*') {
-                            setSortableColumns(selectedTable.columns.map(col => col.name));
-                        }
-                        else if (AST.columns.length) {
-                            setSortableColumns(AST.columns.map(elem => elem.as || elem.expr.name));
-                        }
+                    const resp = await (0, dataFetcher_1.getDataFromCloud)(null, 'sqlify', { ast: AST });
+                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
+                    if (newSqlQuery && newSqlQuery !== sqlQuery) {
+                        onChangeQuery(newSqlQuery);
+                        setSqlQuery(newSqlQuery);
+                        handleRunQuery(newSqlQuery);
                     }
                 }
             }
@@ -1087,30 +588,28 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         };
         getSqlQueryFromAST();
     }, [AST]);
-    (0, react_1.useEffect)(() => {
-        if (sortableColumns.length) {
-            setSelectedSortByColumn(sortableColumns[0]);
-        }
-    }, [sortableColumns]);
     if (!schema || !schema.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginLeft: '25px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: 245 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                            fontSize: 14,
-                            marginBottom: '6px',
-                            fontWeight: '600',
-                            color: theme.secondaryTextColor,
-                            fontFamily: theme?.fontFamily,
-                        }, children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Table", value: selectedTable.displayName, onChange: e => {
-                            const table = schema.find(t => t.displayName === e);
-                            setSelectedTable(table);
-                        }, options: schema?.length
-                            ? schema.map(elem => {
-                                return { label: elem.displayName, value: elem.displayName };
-                            })
-                            : [] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: '12px' }, children: [(0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen }), (0, jsx_runtime_1.jsx)(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme, setIsOpen: setIsGroupByModalOpen, isOpen: isGroupByModalOpen }), (0, jsx_runtime_1.jsx)(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsSortByModalOpen, isOpen: isSortByModalOpen }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "run-report-button", onClick: handleRunQuery, label: 'Run report' })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    // marginLeft: '25px',
+                    // marginRight: '25px',
+                    justifyContent: 'end',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [(0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (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, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
+                    height: 400,
+                    marginTop: 10,
+                } }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            width: '100%',
+                            height: '70px',
+                            gap: '8px',
+                        }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: data, columns: columns, fields: fields, query: sqlQuery, pivot: selectedPivot, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots })] }))] }));
 }
-function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, theme, tagStyle, }) {
+function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
     const handleRemoveFilter = () => {
         removeFilter(index);
     };
@@ -1118,26 +617,34 @@ function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, th
         selectFilter(index);
         setIsOpen(true);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: tagStyle || {
-            marginLeft: '12px',
-            cursor: 'pointer',
-            borderRadius: 8,
-            backgroundColor: '#EFF0FC',
-            paddingLeft: '12px',
-            paddingRight: '8px',
-            height: 30,
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: 13,
-            fontWeight: 'medium',
-            color: theme?.primaryTextColor,
-            fontFamily: theme?.fontFamily,
-            outline: 'none',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { id: id, style: {
+    const styles = tagStyle || {
+        cursor: 'pointer',
+        borderRadius: 8,
+        border: '1px solid',
+        backgroundColor: '#EFF0FC',
+        paddingLeft: '12px',
+        paddingRight: '8px',
+        height: 30,
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: 13,
+        fontWeight: 'medium',
+        color: theme?.primaryTextColor,
+        fontFamily: theme?.fontFamily,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        outline: 'none',
+        maxWidth: 120,
+    };
+    const borderColor = {
+        borderColor: isSelected
+            ? selectedTagBorderColor || '#B3B4BD'
+            : styles.borderColor || '#EFF0FC',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
-                    maxWidth: '80px',
                 }, children: label }), (0, jsx_runtime_1.jsx)("div", { 
                 // onClick={handleRemoveFilter}
                 onClick: e => {
@@ -1151,172 +658,44 @@ function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, th
                     paddingLeft: '6px',
                 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
 }
-const SortByModal = ({ selectedSortByColumn, selectedSortByDirection, setSelectedSortByColumn, setSelectedSortByDirection, selectedTable, sortableColumns, removeSortBy, selectSortBy, updateSortBy, addSortBy, sortBys, SelectComponent, ButtonComponent, ModalComponent, tagStyle, ModalTriggerComponent, sortByIndexBeingEdited, theme, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 12 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                position: 'relative',
-                display: 'inline-block',
-                textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => setIsOpen(isOpen => !isOpen), label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                overflowX: 'scroll',
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            }, children: sortBys.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'sort' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add sort", children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            fontSize: '14px',
-                                            marginBottom: '6px',
-                                            fontWeight: '600',
-                                            color: theme.secondaryTextColor,
-                                            fontFamily: theme?.fontFamily,
-                                        }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: selectedSortByColumn, onChange: e => {
-                                            setSelectedSortByColumn(e);
-                                        }, options: sortableColumns.map(elem => {
-                                            return { label: elem, value: elem };
-                                        }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    fontSize: '14px',
-                                    marginBottom: '6px',
-                                    fontWeight: '600',
-                                    color: theme.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                    marginTop: 20,
-                                }, children: "Direction" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: selectedSortByDirection, onChange: e => {
-                                    setSelectedSortByDirection(e);
-                                }, options: [
-                                    { label: 'ascending', value: 'ascending' },
-                                    { label: 'descending', value: 'descending' },
-                                ] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
-                                        if (sortByIndexBeingEdited > -1) {
-                                            updateSortBy(sortByIndexBeingEdited);
-                                            setIsOpen(false);
-                                            // close();
-                                            return;
-                                        }
-                                        addSortBy();
-                                        setIsOpen(false);
-                                        // close();
-                                    }, label: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' }) })] }) })] }) }));
-};
-const GroupByModal2 = ({ selectedGroupByColumn, addGroupBy, setSelectedGroupByColumn, selectedTable, groupByColumnType, groupByIndexBeingEdited, updateGroupBy, groupBys, removeGroupBy, selectGroupBy, SelectComponent, ButtonComponent, aggregations, setAggregationColumn, setAggregationType, addAggregation, dateBucket, setDateBucket, ModalComponent, theme, ModalTriggerComponent, TextInputComponent, tagStyle, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                position: 'relative',
-                display: 'inline-block',
-                textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => {
-                                setIsOpen(isOpen => !isOpen);
-                            }, label: "Group by" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                overflowX: 'scroll',
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            }, children: groupBys.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'groupby' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
-                        setIsOpen(false);
-                    }, title: "Add group by", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            fontSize: '14px',
-                                            marginBottom: '6px',
-                                            fontWeight: '600',
-                                            fontFamily: theme?.fontFamily,
-                                            color: theme.secondaryTextColor,
-                                        }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Column", value: selectedGroupByColumn.name, onChange: e => {
-                                            const column = selectedTable.columns.find(c => c.name === e);
-                                            setSelectedGroupByColumn(column);
-                                        }, options: selectedTable.columns.map(elem => {
-                                            return { label: elem.name, value: elem.name };
-                                        }) })] }), groupByColumnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    // marginLeft: 12,
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            fontSize: '14px',
-                                            marginBottom: '6px',
-                                            fontWeight: '600',
-                                            color: theme.secondaryTextColor,
-                                            fontFamily: theme?.fontFamily,
-                                            marginTop: 20,
-                                        }, children: "Bucket" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Bucket", value: dateBucket, onChange: e => {
-                                            setDateBucket(e);
-                                        }, options: [
-                                            { label: 'month', value: 'month' },
-                                            { label: 'day', value: 'day' },
-                                            { label: 'week', value: 'week' },
-                                        ] })] })), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    fontSize: 14,
-                                    marginBottom: '6px',
-                                    fontWeight: '600',
-                                    marginTop: 20,
-                                    color: theme.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                }, children: "Aggregations" }), aggregations.map((aggregation, index) => (
-                            // setAggregationType
-                            (0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: aggregation.column?.name, onChange: e => {
-                                            const column = selectedTable.columns.find(c => c.name === e);
-                                            setAggregationColumn(column, index);
-                                        }, options: selectedTable.columns.map(elem => {
-                                            return { label: elem.name, value: elem.name };
-                                        }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: aggregation.aggregationType, onChange: e => {
-                                            setAggregationType(e, index);
-                                        }, options: [
-                                            { label: 'sum', value: 'sum' },
-                                            { label: 'average', value: 'average' },
-                                            { label: 'count', value: 'count' },
-                                        ] })] }, 'agg' + index))), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
-                                        if (groupByIndexBeingEdited > -1) {
-                                            updateGroupBy(groupByIndexBeingEdited);
-                                            setIsOpen(false);
-                                            // close();
-                                            return;
-                                        }
-                                        addGroupBy();
-                                        setIsOpen(false);
-                                        // close();
-                                    }, label: groupByIndexBeingEdited > -1
-                                        ? 'Edit group by'
-                                        : 'Add group by' }) })] }) })] }) }));
-};
-const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, dateStart, setDateStart, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, setDateEnd, dateEnd, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, ModalComponent, theme, ModalTriggerComponent, TextInputComponent, tagStyle, }) => {
+const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, dateStart, setDateStart, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, setDateEnd, dateEnd, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     position: 'relative',
                     display: 'inline-block',
                     textAlign: 'left',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
-                        }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => setIsOpen(isOpen => !isOpen), label: "Filter" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    overflowX: 'scroll',
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                }, children: filters.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle }, 'filter' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: filters.length > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                height: 10,
+                                width: 10,
+                                backgroundColor: theme.primaryButtonColor,
+                                borderRadius: '50%',
+                                position: 'absolute',
+                                top: -2,
+                                right: -2,
+                            } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400 }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", style: { right: 0, minWidth: 400 }, setIsOpen: setIsOpen, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontSize: 14,
-                                        marginBottom: '6px',
-                                        fontWeight: '600',
-                                        color: theme.secondaryTextColor,
-                                        fontFamily: theme?.fontFamily,
-                                    }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "custom-select", value: selectedColumn.name, onChange: e => {
+                            }, children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: 20 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            overflowY: 'scroll',
+                                            maxHeight: '300px',
+                                            display: 'flex',
+                                            gap: '5px',
+                                            flexDirection: 'row',
+                                            flexWrap: 'wrap',
+                                            alignItems: 'center',
+                                        }, children: filters.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), (0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
                                         const column = selectedTable.columns.find(c => c.name === e);
                                         setSelectedColumn(column);
-                                    }, options: selectedTable.columns.map(elem => {
+                                    }, options: selectedTable.columns
+                                        .filter(elem => !(elem.name === 'id' ||
+                                        elem.name.endsWith('_id') ||
+                                        (0, PivotModal_1.isDateField)(elem.fieldType)))
+                                        .map(elem => {
                                         return { label: elem.name, value: elem.name };
                                     }) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
@@ -1327,23 +706,11 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: '14px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                            marginBottom: 6,
-                                                        }, children: "Minimum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "min-input", value: numberStart, onChange: e => setNumberStart(e.target.value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Minimum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: '14px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                            marginBottom: 6,
-                                                        }, children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", value: numberEnd, onChange: e => setNumberEnd(e.target.value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
@@ -1352,21 +719,11 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                        fontSize: 14,
-                                                        fontWeight: '600',
-                                                        color: 'rgba(56, 65, 81, 0.7)',
-                                                        fontFamily: theme?.fontFamily,
-                                                    }, children: "Start date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateStart, onChange: e => setDateStart(e.target.value), placeholder: "Start date" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Start date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateStart, onChange: e => setDateStart(e.target.value), placeholder: "Start date" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                        fontSize: 14,
-                                                        fontWeight: '600',
-                                                        color: 'rgba(56, 65, 81, 0.7)',
-                                                        fontFamily: theme?.fontFamily,
-                                                    }, children: "End date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateEnd, onChange: e => setDateEnd(e.target.value), placeholder: "End date" })] })] })), columnType === 'string' &&
+                                            }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "End date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateEnd, onChange: e => setDateEnd(e.target.value), placeholder: "End date" })] })] })), columnType === 'string' &&
                                     columnStats &&
                                     columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         flex: 'flex',
@@ -1401,11 +758,9 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                             }
                                             if (indexBeingEdited > -1) {
                                                 updateFilter(indexBeingEdited);
-                                                setIsOpen(false);
                                                 return;
                                             }
                                             addFilter();
-                                            setIsOpen(false);
                                         }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '12px' } })] }));
 };
 const DivCheckbox = ({ onChange, checked, theme }) => {