@quillsql/react 1.7.1 → 1.7.2

package/lib/ReportBuilder.js

@@ -1,22 +1,73 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPostgresBasicType = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useContext, useCallback, useEffect } from 'react';
 // import './nightOwlLight.css';
-const axios_1 = __importDefault(require("axios"));
-const Context_1 = require("./Context");
-const solid_1 = require("@heroicons/react/20/solid");
-const SQLEditor_1 = require("./SQLEditor");
-const date_fns_1 = require("date-fns");
-function QuillModal({ children, isOpen, onClose, title, theme }) {
+import axios from 'axios';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import { XMarkIcon, CheckIcon, } from '@heroicons/react/20/solid';
+import { convertPostgresColumn } from './SQLEditor';
+import { format } from 'date-fns';
+function QuillModal(_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, theme = _a.theme;
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", __assign({ style: {
             position: 'absolute',
             top: 45,
             minWidth: 300,
@@ -29,99 +80,134 @@ function QuillModal({ children, isOpen, onClose, title, theme }) {
             borderWidth: theme.borderWidth,
             borderStyle: 'solid',
             borderColor: theme.borderColor,
-        }, children: children }));
+        } }, { children: children })));
 }
-function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onError, SelectComponent, ButtonComponent, ModalComponent, ModalTriggerComponent, TextInputComponent, tagStyle, }) {
-    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);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        async function getData(schema) {
-            if (schema.length && !data.length) {
-                const { publicKey, customerId, environment } = client;
-                const response = await axios_1.default.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,
-                    },
+export default function ReportBuilder(_a) {
+    var _this = this;
+    var onChangeQuery = _a.onChangeQuery, onChangeData = _a.onChangeData, onChangeColumns = _a.onChangeColumns, onChangeLoading = _a.onChangeLoading, onError = _a.onError, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
+    var _b = useState([]), data = _b[0], setData = _b[1];
+    var client = useContext(ClientContext)[0];
+    var _c = useContext(SchemaContext), schema = _c[0], setSchema = _c[1];
+    var theme = useContext(ThemeContext)[0];
+    var _d = useState([]), columns = _d[0], setColumns = _d[1];
+    var _e = useState([]), fields = _e[0], setFields = _e[1];
+    useEffect(function () {
+        function getData(schema) {
+            return __awaiter(this, void 0, void 0, function () {
+                var publicKey, customerId, environment, response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(schema.length && !data.length)) return [3 /*break*/, 2];
+                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                            return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
+                                    query: "select * from ".concat(schema[0].displayName, " limit 10;"),
+                                }, {
+                                    params: {
+                                        orgId: customerId,
+                                        publicKey: publicKey,
+                                    },
+                                    headers: {
+                                        Authorization: "Bearer ",
+                                        environment: environment || undefined,
+                                    },
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            setData(response.data.rows);
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
                 });
-                setData(response.data.rows);
-            }
+            });
         }
         getData(schema);
     }, [schema]);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            const { publicKey, environment } = client;
-            const response3 = await axios_1.default.get(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: environment || undefined,
-                },
+    useEffect(function () {
+        var isSubscribed = true;
+        function getSchema() {
+            return __awaiter(this, void 0, void 0, function () {
+                var publicKey, environment, response3;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            publicKey = client.publicKey, environment = client.environment;
+                            return [4 /*yield*/, axios.get("https://quill-344421.uc.r.appspot.com/schema2/".concat(publicKey, "/"), {
+                                    headers: {
+                                        Authorization: "Bearer ",
+                                        environment: environment || undefined,
+                                    },
+                                })];
+                        case 1:
+                            response3 = _a.sent();
+                            if (isSubscribed) {
+                                setSchema(response3.data.tables);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
             });
-            if (isSubscribed) {
-                setSchema(response3.data.tables);
-            }
         }
         if (isSubscribed) {
             getSchema();
         }
-        return () => {
+        return function () {
             isSubscribed = false;
         };
     }, []);
-    const runQuery = async (query) => {
-        const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
-        let response;
-        if (queryEndpoint) {
-            response = await axios_1.default.post(queryEndpoint, { metadata: { query, task: 'query' } }, { headers: queryHeaders, withCredentials });
-        }
-        else {
-            response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/dashquery`, {
-                query,
-            }, {
-                params: {
-                    orgId: customerId,
-                    publicKey,
-                },
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: environment || undefined,
-                },
-            });
-        }
-        if (response && response.data && response.data.errorMessage) {
-            onError(response.data.errorMessage);
-            setData([]);
-            onChangeData([]);
-            setColumns([]);
-            onChangeColumns([]);
-            setFields([]);
-            return;
-        }
-        setData(response.data.rows);
-        onChangeData(response.data.rows);
-        setColumns(response.data.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
-        onChangeColumns(response.data.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
-        setFields(response.data.fields);
-    };
+    var runQuery = function (query) { return __awaiter(_this, void 0, void 0, function () {
+        var publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders, withCredentials = client.withCredentials;
+                    if (!queryEndpoint) return [3 /*break*/, 2];
+                    return [4 /*yield*/, axios.post(queryEndpoint, { metadata: { query: query, task: 'query' } }, { headers: queryHeaders, withCredentials: withCredentials })];
+                case 1:
+                    response = _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
+                        query: query,
+                    }, {
+                        params: {
+                            orgId: customerId,
+                            publicKey: publicKey,
+                        },
+                        headers: {
+                            Authorization: "Bearer ",
+                            environment: environment || undefined,
+                        },
+                    })];
+                case 3:
+                    response = _a.sent();
+                    _a.label = 4;
+                case 4:
+                    if (response && response.data && response.data.errorMessage) {
+                        onError(response.data.errorMessage);
+                        setData([]);
+                        onChangeData([]);
+                        setColumns([]);
+                        onChangeColumns([]);
+                        setFields([]);
+                        return [2 /*return*/];
+                    }
+                    setData(response.data.rows);
+                    onChangeData(response.data.rows);
+                    setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
+                    onChangeColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
+                    setFields(response.data.fields);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     if (!schema.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent
+    return (_jsx(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent
             ? SelectComponent
-            : ({ onChange, value, options }) => {
-                return ((0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
+            : function (_a) {
+                var onChange = _a.onChange, value = _a.value, options = _a.options;
+                return (_jsx("select", __assign({ onChange: function (event) { return onChange(event.target.value); }, value: value, id: 'reportbuilderdropdown', style: {
                         width: '100%',
                         minWidth: 230,
                         outline: 'none',
@@ -139,11 +225,12 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
                         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))) }));
+                    } }, { children: options.map(function (option, index) { return (_jsx("option", __assign({ value: option.value }, { children: option.label }), option.label + index)); }) })));
             }, ButtonComponent: ButtonComponent
             ? ButtonComponent
-            : ({ onClick, label }) => {
-                return ((0, jsx_runtime_1.jsx)("div", { style: {
+            : function (_a) {
+                var onClick = _a.onClick, label = _a.label;
+                return (_jsx("div", __assign({ style: {
                         height: 32,
                         background: theme.primaryButtonColor,
                         borderWidth: theme.borderWidth,
@@ -157,15 +244,17 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
                         cursor: 'pointer',
                         fontFamily: theme.fontFamily,
                         fontWeight: theme.buttonFontWeight || 600,
-                    }, onClick: onClick, children: label }));
+                    }, 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 }));
+            : function (_a) {
+                var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
+                return (_jsx(QuillModal, __assign({ isOpen: isOpen, theme: theme, onClose: onClose, title: title }, { children: children })));
             }, ModalTriggerComponent: ModalTriggerComponent
             ? ModalTriggerComponent
-            : ({ onClick, label }) => {
-                return ((0, jsx_runtime_1.jsx)("div", { style: {
+            : function (_a) {
+                var onClick = _a.onClick, label = _a.label;
+                return (_jsx("div", __assign({ style: {
                         height: 32,
                         background: theme.backgroundColor,
                         borderWidth: theme.borderWidth,
@@ -184,11 +273,12 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
                         color: theme.primaryTextColor,
                         fontWeight: theme.buttonFontWeight || 600,
                         fontFamily: theme.fontFamily,
-                    }, onClick: onClick, children: label }));
+                    }, onClick: onClick }, { children: label })));
             }, TextInputComponent: TextInputComponent
             ? TextInputComponent
-            : ({ onChange, value, id }) => {
-                return ((0, jsx_runtime_1.jsx)("input", { style: {
+            : function (_a) {
+                var onChange = _a.onChange, value = _a.value, id = _a.id;
+                return (_jsx("input", { style: {
                         outline: 'none',
                         textAlign: 'left',
                         whiteSpace: 'nowrap',
@@ -208,9 +298,8 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
                     }, id: id, onChange: onChange, value: value }));
             }, tagStyle: tagStyle }));
 }
-exports.default = ReportBuilder;
-function getPostgresBasicType(column) {
-    let format;
+export function getPostgresBasicType(column) {
+    var format;
     // first check if column.dataTypeID exists
     if (column.dataTypeID) {
         switch (column.dataTypeID) {
@@ -257,12 +346,13 @@ 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 [filters, setFilters] = (0, react_1.useState)([]);
-    const [AST, setAST] = (0, react_1.useState)({
+function ReportingTool(_a) {
+    var _this = this;
+    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, onChangeQuery = _a.onChangeQuery, theme = _a.theme, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
+    var _b = useState(schema[0]), selectedTable = _b[0], setSelectedTable = _b[1];
+    var _c = useState(schema[0].columns[0]), selectedColumn = _c[0], setSelectedColumn = _c[1];
+    var _d = useState([]), filters = _d[0], setFilters = _d[1];
+    var _e = useState({
         with: null,
         type: 'select',
         options: null,
@@ -276,40 +366,39 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         orderby: null,
         limit: { seperator: '', value: [] },
         window: null,
-    });
-    const [numberStart, setNumberStart] = (0, react_1.useState)(0);
-    const [numberEnd, setNumberEnd] = (0, react_1.useState)(0);
-    const [dateStart, setDateStart] = (0, react_1.useState)('');
-    const [dateEnd, setDateEnd] = (0, react_1.useState)('');
-    const [computedColumns, setComputedColumns] = (0, react_1.useState)({});
-    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)('');
+    }), AST = _e[0], setAST = _e[1];
+    var _f = useState(0), numberStart = _f[0], setNumberStart = _f[1];
+    var _g = useState(0), numberEnd = _g[0], setNumberEnd = _g[1];
+    var _h = useState(''), dateStart = _h[0], setDateStart = _h[1];
+    var _j = useState(''), dateEnd = _j[0], setDateEnd = _j[1];
+    var _k = useState({}), computedColumns = _k[0], setComputedColumns = _k[1];
+    var _l = useState([]), stringFilterValues = _l[0], setStringFilterValues = _l[1];
+    var _m = useState(getPostgresBasicType(schema[0].columns[0])), columnType = _m[0], setColumnType = _m[1];
+    var _o = useState(''), sqlQuery = _o[0], setSqlQuery = _o[1];
     // 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 addGroupBy = () => {
+    var _p = useState('month'), dateBucket = _p[0], setDateBucket = _p[1];
+    var _q = useState(-1), indexBeingEdited = _q[0], setIndexBeingEdited = _q[1];
+    var _r = useState([]), groupBys = _r[0], setGroupBys = _r[1];
+    var _s = useState([]), aggregations = _s[0], setAggregations = _s[1];
+    var _t = useState(schema[0].columns[0]), selectedGroupByColumn = _t[0], setSelectedGroupByColumn = _t[1];
+    var _u = useState(getPostgresBasicType(schema[0].columns[0])), groupByColumnType = _u[0], setGroupByColumnType = _u[1];
+    var _v = useState(schema[0].columns[0].name), selectedSortByColumn = _v[0], setSelectedSortByColumn = _v[1];
+    var _w = useState([]), sortBys = _w[0], setSortBys = _w[1];
+    var _x = useState('ascending'), selectedSortByDirection = _x[0], setSelectedSortByDirection = _x[1];
+    var _y = useState(-1), groupByIndexBeingEdited = _y[0], setGroupByIndexBeingEdited = _y[1];
+    var _z = useState(-1), sortByIndexBeingEdited = _z[0], setSortByIndexBeingEdited = _z[1];
+    var _0 = useState(schema[0].columns.map(function (col) { return col.name; })), sortableColumns = _0[0], setSortableColumns = _0[1];
+    var addGroupBy = function () {
         if (selectedGroupByColumn && groupByColumnType) {
             if (groupByColumnType === 'string') {
-                setGroupBys(groupBys => {
-                    return [
-                        ...groupBys,
+                setGroupBys(function (groupBys) {
+                    return __spreadArray(__spreadArray([], groupBys, true), [
                         {
                             column: selectedGroupByColumn.name,
                             columnType: groupByColumnType,
                             tag: selectedGroupByColumn.name,
                         },
-                    ];
+                    ], false);
                 });
                 return;
             }
@@ -318,59 +407,55 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 return;
             }
             else if (groupByColumnType === 'date') {
-                setGroupBys(groupBys => {
-                    return [
-                        ...groupBys,
+                setGroupBys(function (groupBys) {
+                    return __spreadArray(__spreadArray([], groupBys, true), [
                         {
                             column: selectedGroupByColumn.name,
                             columnType: groupByColumnType,
                             bucket: dateBucket,
                             tag: dateBucket,
                         },
-                    ];
+                    ], false);
                 });
                 return;
             }
         }
     };
-    const addSortBy = () => {
-        setSortBys(sortBys => {
-            return [
-                ...sortBys,
+    var addSortBy = function () {
+        setSortBys(function (sortBys) {
+            return __spreadArray(__spreadArray([], sortBys, true), [
                 {
                     column: selectedSortByColumn,
                     direction: selectedSortByDirection,
                 },
-            ];
+            ], false);
         });
     };
-    const removeSortBy = index => {
-        setSortBys(oldSortBys => {
-            const newSortBys = [...oldSortBys];
+    var removeSortBy = function (index) {
+        setSortBys(function (oldSortBys) {
+            var newSortBys = __spreadArray([], oldSortBys, true);
             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),
-            ];
+    var removeGroupBy = function (index) {
+        var columnBeingDeleted = groupBys[index].tag;
+        setSortBys(function (oldSortBys) {
+            var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted; }), true);
             return newSortBys;
         });
-        setGroupBys(oldGroupBys => {
-            const newGroupBys = [...oldGroupBys];
+        setGroupBys(function (oldGroupBys) {
+            var newGroupBys = __spreadArray([], oldGroupBys, true);
             newGroupBys.splice(index, 1);
             return newGroupBys;
         });
         setGroupByIndexBeingEdited(-1);
     };
-    const updateSortBy = index => {
+    var updateSortBy = function (index) {
         if (selectedSortByColumn && selectedSortByDirection) {
-            setSortBys(sortBys => {
-                const newSortBys = [...sortBys];
+            setSortBys(function (sortBys) {
+                var newSortBys = __spreadArray([], sortBys, true);
                 newSortBys[index] = {
                     column: selectedSortByColumn,
                     direction: selectedSortByDirection,
@@ -381,16 +466,16 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             return;
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         setColumnType(getPostgresBasicType(selectedColumn));
         // console.log("WTF: ", selectedColumn);
     }, [selectedColumn]);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
     }, [selectedGroupByColumn]);
-    const selectFilter = index => {
-        const filter = filters[index];
-        const matchingColumn = selectedTable.columns.find(column => column.name === filter.column);
+    var selectFilter = function (index) {
+        var filter = filters[index];
+        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === filter.column; });
         setSelectedColumn(matchingColumn);
         if (filter.columnType === 'string') {
             setStringFilterValues(filter.stringFilterValues);
@@ -407,36 +492,34 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             setIndexBeingEdited(index);
         }
     };
-    const selectSortBy = index => {
-        const sortBy = sortBys[index];
+    var selectSortBy = function (index) {
+        var 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);
+    var selectGroupBy = function (index) {
+        var groupBy = groupBys[index];
+        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === groupBy.column; });
         setSelectedGroupByColumn(matchingColumn);
         if (groupBy.bucket) {
             setDateBucket(groupBy.bucket);
         }
         setGroupByIndexBeingEdited(index);
     };
-    const updateGroupBy = index => {
+    var updateGroupBy = function (index) {
         if (selectedGroupByColumn && groupByColumnType) {
             // if column changed, then auto delete the sort using that column
-            const columnBeingDeleted = selectedGroupByColumn.name !== groupBys[index].column
+            var columnBeingDeleted_1 = selectedGroupByColumn.name !== groupBys[index].column
                 ? groupBys[index].tag
                 : 'nocolumnbeingdeleted';
-            setSortBys(oldSortBys => {
-                const newSortBys = [
-                    ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
-                ];
+            setSortBys(function (oldSortBys) {
+                var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted_1; }), true);
                 return newSortBys;
             });
             if (groupByColumnType === 'date') {
-                setGroupBys(groupBys => {
-                    const newGroupBys = [...groupBys];
+                setGroupBys(function (groupBys) {
+                    var newGroupBys = __spreadArray([], groupBys, true);
                     newGroupBys[index] = {
                         column: selectedGroupByColumn.name,
                         columnType: groupByColumnType,
@@ -447,8 +530,8 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 });
             }
             else {
-                setGroupBys(groupBys => {
-                    const newGroupBys = [...groupBys];
+                setGroupBys(function (groupBys) {
+                    var newGroupBys = __spreadArray([], groupBys, true);
                     newGroupBys[index] = {
                         column: selectedGroupByColumn.name,
                         columnType: groupByColumnType,
@@ -461,42 +544,42 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             return;
         }
     };
-    const updateFilter = index => {
+    var updateFilter = function (index) {
         if (selectedColumn && columnType) {
             if (columnType === 'string') {
-                setFilters(filters => {
-                    const newFilters = [...filters];
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType,
-                        stringFilterValues,
-                        tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
+                        columnType: columnType,
+                        stringFilterValues: stringFilterValues,
+                        tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
                     };
                     return newFilters;
                 });
             }
             else if (columnType === 'number') {
-                setFilters(filters => {
-                    const newFilters = [...filters];
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType,
-                        numberStart,
-                        numberEnd,
-                        tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
+                        columnType: columnType,
+                        numberStart: numberStart,
+                        numberEnd: numberEnd,
+                        tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
                     };
                     return newFilters;
                 });
             }
             else if (columnType === 'date') {
-                setFilters(filters => {
-                    const newFilters = [...filters];
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType,
-                        dateStart,
-                        dateEnd,
-                        tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
+                        columnType: columnType,
+                        dateStart: dateStart,
+                        dateEnd: dateEnd,
+                        tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
                     };
                     return newFilters;
                 });
@@ -511,21 +594,20 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         }
     };
     // ADD FILTER TO "FILTERS" ARRAY
-    const addFilter = () => {
+    var addFilter = function () {
         if (selectedColumn && columnType) {
             //   const type = getPostgresBasicType(selectedColumn);
-            let newCondition;
+            var newCondition = void 0;
             if (columnType === 'string') {
-                setFilters(filters => {
-                    return [
-                        ...filters,
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
                         {
                             column: selectedColumn.name,
-                            columnType,
-                            stringFilterValues,
-                            tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
+                            columnType: columnType,
+                            stringFilterValues: stringFilterValues,
+                            tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
                         },
-                    ];
+                    ], false);
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -535,17 +617,16 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 return;
             }
             else if (columnType === 'number') {
-                setFilters(filters => {
-                    return [
-                        ...filters,
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
                         {
                             column: selectedColumn.name,
-                            columnType,
-                            numberStart,
-                            numberEnd,
-                            tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
+                            columnType: columnType,
+                            numberStart: numberStart,
+                            numberEnd: numberEnd,
+                            tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
                         },
-                    ];
+                    ], false);
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -555,17 +636,16 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 return;
             }
             else if (columnType === 'date') {
-                setFilters(filters => {
-                    return [
-                        ...filters,
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
                         {
                             column: selectedColumn.name,
-                            columnType,
-                            dateStart,
-                            dateEnd,
-                            tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
+                            columnType: columnType,
+                            dateStart: dateStart,
+                            dateEnd: dateEnd,
+                            tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
                         },
-                    ];
+                    ], false);
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -575,29 +655,23 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             }
         }
     };
-    const setAggregationColumn = (column, index) => {
+    var setAggregationColumn = function (column, index) {
         // ex
-        setAggregations(aggregations => {
-            const newAggregations = [...aggregations];
-            newAggregations[index] = {
-                ...newAggregations[index],
-                column: column,
-            };
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray([], aggregations, true);
+            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { column: column });
             return newAggregations;
         });
     };
-    const setAggregationType = (aggregationType, index) => {
+    var setAggregationType = function (aggregationType, index) {
         // ex
-        setAggregations(aggregations => {
-            const newAggregations = [...aggregations];
-            newAggregations[index] = {
-                ...newAggregations[index],
-                aggregationType: aggregationType,
-            };
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray([], aggregations, true);
+            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { aggregationType: aggregationType });
             return newAggregations;
         });
     };
-    const addAggregation = () => {
+    var addAggregation = function () {
         // setAggregations([
         //   {
         //     column: selectedTable.columns.filter(
@@ -606,23 +680,24 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         //     aggregationType: "sum",
         //   },
         // ]);
-        setAggregations(aggregations => {
-            const newAggregations = [
-                ...aggregations,
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray(__spreadArray([], aggregations, true), [
                 {
-                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number' &&
-                        !aggregations.map(elem => elem.name).includes(col.name))[0],
+                    column: selectedTable.columns.filter(function (col) {
+                        return getPostgresBasicType(col) === 'number' &&
+                            !aggregations.map(function (elem) { return elem.name; }).includes(col.name);
+                    })[0],
                     aggregationType: 'sum',
                 },
-            ];
+            ], false);
             return newAggregations;
         });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         // if selected table changes, clear everything
         if (selectedTable.displayName !== AST.from.table) {
             setSelectedColumn(selectedTable.columns[0]);
-            setSortableColumns(selectedTable.columns.map(col => col.name));
+            setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
             setGroupBys([]);
             setSortBys([]);
             setFilters([]);
@@ -647,9 +722,9 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
         }
     }, [selectedTable]);
     // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         if (filters.length || groupBys.length || aggregations.length) {
-            const newAST = {
+            var newAST = {
                 with: null,
                 type: 'select',
                 options: null,
@@ -665,11 +740,11 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 window: null,
             };
             // FILTERS
-            for (let i = 0; i < filters.length; i++) {
-                const filter = filters[i];
-                const { column, columnType, stringFilterValues, numberStart, numberEnd, dateStart, dateEnd, } = filter;
-                let newCondition;
-                if (columnType === 'string') {
+            for (var i = 0; i < filters.length; i++) {
+                var filter = filters[i];
+                var column = filter.column, columnType_1 = filter.columnType, stringFilterValues_1 = filter.stringFilterValues, numberStart_1 = filter.numberStart, numberEnd_1 = filter.numberEnd, dateStart_1 = filter.dateStart, dateEnd_1 = filter.dateEnd;
+                var newCondition = void 0;
+                if (columnType_1 === 'string') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'IN',
@@ -680,14 +755,14 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                         },
                         right: {
                             type: 'expr_list',
-                            value: stringFilterValues.map(value => ({
+                            value: stringFilterValues_1.map(function (value) { return ({
                                 type: 'single_quote_string',
-                                value,
-                            })),
+                                value: value,
+                            }); }),
                         },
                     };
                 }
-                else if (columnType === 'number') {
+                else if (columnType_1 === 'number') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'BETWEEN',
@@ -699,13 +774,13 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                         right: {
                             type: 'expr_list',
                             value: [
-                                { type: 'number', value: numberStart },
-                                { type: 'number', value: numberEnd },
+                                { type: 'number', value: numberStart_1 },
+                                { type: 'number', value: numberEnd_1 },
                             ],
                         },
                     };
                 }
-                else if (columnType === 'date') {
+                else if (columnType_1 === 'date') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'BETWEEN',
@@ -719,11 +794,11 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                             value: [
                                 {
                                     type: 'single_quote_string',
-                                    value: (0, date_fns_1.format)(new Date(dateStart), 'MM/dd/yyyy'),
+                                    value: format(new Date(dateStart_1), 'MM/dd/yyyy'),
                                 },
                                 {
                                     type: 'single_quote_string',
-                                    value: (0, date_fns_1.format)(new Date(dateEnd), 'MM/dd/yyyy'),
+                                    value: format(new Date(dateEnd_1), 'MM/dd/yyyy'),
                                 },
                             ],
                         },
@@ -792,8 +867,8 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             if (groupBys.length > 0) {
                 newAST.columns = [];
                 newAST.groupby = [];
-                for (let i = 0; i < groupBys.length; i++) {
-                    const groupBy = groupBys[i];
+                for (var i = 0; i < groupBys.length; i++) {
+                    var groupBy = groupBys[i];
                     if (groupBy.columnType === 'date') {
                         newAST.columns.push({
                             expr: {
@@ -841,8 +916,8 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
                 }
                 // AGGREGATIONS
                 if (aggregations.length > 0) {
-                    for (let i = 0; i < aggregations.length; i++) {
-                        const aggregation = aggregations[i];
+                    for (var i = 0; i < aggregations.length; i++) {
+                        var aggregation = aggregations[i];
                         newAST.columns.push({
                             expr: {
                                 type: 'aggr_func',
@@ -867,8 +942,8 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             }
             if (sortBys.length > 0) {
                 newAST.orderby = [];
-                for (let i = 0; i < sortBys.length; i++) {
-                    const sortBy = sortBys[i];
+                for (var i = 0; i < sortBys.length; i++) {
+                    var sortBy = sortBys[i];
                     newAST.orderby.push({
                         expr: { type: 'column_ref', table: null, column: sortBy.column },
                         type: sortBy.direction === 'descending' ? 'DESC' : 'ASC',
@@ -879,53 +954,54 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
             setAST(newAST);
         }
     }, [filters, groupBys, aggregations, sortBys]);
-    const removeFilter = index => {
-        setFilters(oldFilters => {
-            const newFilters = [...oldFilters];
+    var removeFilter = function (index) {
+        setFilters(function (oldFilters) {
+            var newFilters = __spreadArray([], oldFilters, true);
             newFilters.splice(index, 1);
             return newFilters;
         });
         setIndexBeingEdited(-1);
     };
-    const computeStats = (0, react_1.useCallback)(column => {
+    var computeStats = useCallback(function (column) {
+        var _a;
         if (!computedColumns[column.name] && data) {
-            const basicType = getPostgresBasicType(column);
-            let result;
+            var basicType = getPostgresBasicType(column);
+            var result = void 0;
             if (basicType === 'number') {
-                let min = Infinity, max = -Infinity;
-                data.forEach(row => {
-                    const value = row[column.name];
-                    min = Math.min(min, value);
-                    max = Math.max(max, value);
+                var min_1 = Infinity, max_1 = -Infinity;
+                data.forEach(function (row) {
+                    var value = row[column.name];
+                    min_1 = Math.min(min_1, value);
+                    max_1 = Math.max(max_1, value);
                 });
-                result = { min, max };
+                result = { min: min_1, max: max_1 };
             }
             else if (basicType === 'string') {
-                const freqMap = {};
-                data.forEach(row => {
-                    const value = row[column.name];
-                    freqMap[value] = (freqMap[value] || 0) + 1;
+                var freqMap_1 = {};
+                data.forEach(function (row) {
+                    var value = row[column.name];
+                    freqMap_1[value] = (freqMap_1[value] || 0) + 1;
                 });
-                result = Object.entries(freqMap)
-                    .sort((a, b) => b[1] - a[1])
+                result = Object.entries(freqMap_1)
+                    .sort(function (a, b) { return b[1] - a[1]; })
                     .slice(0, 6)
-                    .map(([key]) => key);
+                    .map(function (_a) {
+                    var key = _a[0];
+                    return key;
+                });
             }
             else {
                 // Handle other column types if necessary
             }
-            setComputedColumns({
-                ...computedColumns,
-                [column.name]: result,
-            });
+            setComputedColumns(__assign(__assign({}, computedColumns), (_a = {}, _a[column.name] = result, _a)));
         }
     }, [data, computedColumns]);
     // Call this function whenever the selected column changes
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         computeStats(selectedColumn);
     }, [selectedColumn]);
     // Use the results directly in your component
-    const columnStats = computedColumns[selectedColumn.name];
+    var columnStats = computedColumns[selectedColumn.name];
     // useEffect(() => {
     //   if (AST && AST.from[0].table) {
     //     const parser = new Parser();
@@ -936,43 +1012,53 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
     //     }
     //   }
     // }, [AST]);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         if (!aggregations.length) {
             setAggregations([
                 {
-                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number')[0],
+                    column: selectedTable.columns.filter(function (col) { return 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_1.default.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST });
-                    const sqlQuery = response.data.query; // assuming the response contains the SQL query
-                    // alert(sqlQuery);
-                    if (sqlQuery) {
-                        onChangeQuery(sqlQuery);
-                        runQuery(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));
+    useEffect(function () {
+        var getSqlQueryFromAST = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response, sqlQuery_1, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        if (!(AST && AST.from[0].table)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, axios.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST })];
+                    case 1:
+                        response = _a.sent();
+                        sqlQuery_1 = response.data.query;
+                        // alert(sqlQuery);
+                        if (sqlQuery_1) {
+                            onChangeQuery(sqlQuery_1);
+                            runQuery(sqlQuery_1);
+                            setSqlQuery(sqlQuery_1);
+                            if (AST.columns === '*') {
+                                setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
+                            }
+                            else if (AST.columns.length) {
+                                setSortableColumns(AST.columns.map(function (elem) { return elem.as || elem.expr.name; }));
+                            }
                         }
-                    }
+                        _a.label = 2;
+                    case 2: return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.error(err_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
                 }
-            }
-            catch (err) {
-                console.error(err);
-            }
-        };
+            });
+        }); };
         getSqlQueryFromAST();
     }, [AST]);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         if (sortableColumns.length) {
             setSelectedSortByColumn(sortableColumns[0]);
         }
@@ -980,30 +1066,31 @@ function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponen
     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: {
+    return (_jsxs("div", __assign({ style: { marginLeft: '25px' } }, { children: [_jsxs("div", __assign({ style: { maxWidth: 245 } }, { children: [_jsx("div", __assign({ 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);
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                        } }, { children: "Table" })), _jsx(SelectComponent, { label: "Table", value: selectedTable.displayName, onChange: function (e) {
+                            var table = schema.find(function (t) { return t.displayName === e; });
                             setSelectedTable(table);
-                        }, options: schema?.length
-                            ? schema.map(elem => {
+                        }, options: (schema === null || schema === void 0 ? void 0 : schema.length)
+                            ? schema.map(function (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 }), (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 }), (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 })] })] }));
+                            : [] })] })), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: '12px' } }, { children: [_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 }), _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 }), _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 })] }))] })));
 }
-function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, theme, tagStyle, }) {
-    const handleRemoveFilter = () => {
+function FilterTag(_a) {
+    var id = _a.id, label = _a.label, removeFilter = _a.removeFilter, index = _a.index, setIsOpen = _a.setIsOpen, selectFilter = _a.selectFilter, theme = _a.theme, tagStyle = _a.tagStyle;
+    var handleRemoveFilter = function () {
         removeFilter(index);
     };
-    const handleSelectFilter = () => {
+    var handleSelectFilter = function () {
         selectFilter(index);
         setIsOpen(true);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: tagStyle || {
+    return (_jsxs("div", __assign({ id: id, onClick: handleSelectFilter, style: tagStyle || {
             marginLeft: '12px',
             cursor: 'pointer',
             borderRadius: 8,
@@ -1015,17 +1102,17 @@ function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, th
             alignItems: 'center',
             fontSize: 13,
             fontWeight: 'medium',
-            color: theme?.primaryTextColor,
-            fontFamily: theme?.fontFamily,
+            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
             outline: 'none',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { id: id, style: {
+        } }, { children: [_jsx("div", __assign({ id: id, style: {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     maxWidth: '80px',
-                }, children: label }), (0, jsx_runtime_1.jsx)("div", { 
+                } }, { children: label })), _jsx("div", __assign({ 
                 // onClick={handleRemoveFilter}
-                onClick: e => {
+                onClick: function (e) {
                     e.stopPropagation(); // Prevents the event from bubbling up to the parent
                     handleRemoveFilter();
                 }, style: {
@@ -1034,53 +1121,54 @@ function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, th
                     alignItems: 'center',
                     cursor: 'pointer',
                     paddingLeft: '6px',
-                }, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { style: {
+                } }, { children: _jsx(XMarkIcon, { style: {
                         height: '20px',
                         width: '20px',
-                        color: tagStyle?.color || theme?.primaryTextColor,
-                    }, "aria-hidden": "true" }) })] }));
+                        color: (tagStyle === null || tagStyle === void 0 ? void 0 : tagStyle.color) || (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor),
+                    }, "aria-hidden": "true" }) }))] })));
 }
-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: {
+var SortByModal = function (_a) {
+    var selectedSortByColumn = _a.selectedSortByColumn, selectedSortByDirection = _a.selectedSortByDirection, setSelectedSortByColumn = _a.setSelectedSortByColumn, setSelectedSortByDirection = _a.setSelectedSortByDirection, selectedTable = _a.selectedTable, sortableColumns = _a.sortableColumns, removeSortBy = _a.removeSortBy, selectSortBy = _a.selectSortBy, updateSortBy = _a.updateSortBy, addSortBy = _a.addSortBy, sortBys = _a.sortBys, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, tagStyle = _a.tagStyle, ModalTriggerComponent = _a.ModalTriggerComponent, sortByIndexBeingEdited = _a.sortByIndexBeingEdited, theme = _a.theme;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: 12 } }, { children: _jsxs("div", __assign({ style: {
                 position: 'relative',
                 display: 'inline-block',
                 textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            } }, { children: [_jsxs("div", __assign({ 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: {
+                    } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Sort" }), _jsx("div", __assign({ 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: {
+                            } }, { children: sortBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'sort' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add sort" }, { children: _jsxs("div", __assign({ 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: {
+                        } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ 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 => {
+                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                        } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedSortByColumn, onChange: function (e) {
                                             setSelectedSortByColumn(e);
-                                        }, options: sortableColumns.map(elem => {
+                                        }, options: sortableColumns.map(function (elem) {
                                             return { label: elem, value: elem };
-                                        }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }) })] })), _jsx("div", __assign({ style: {
                                     fontSize: '14px',
                                     marginBottom: '6px',
                                     fontWeight: '600',
                                     color: theme.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
+                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
                                     marginTop: 20,
-                                }, children: "Direction" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: selectedSortByDirection, onChange: e => {
+                                } }, { children: "Direction" })), _jsx(SelectComponent, { value: selectedSortByDirection, onChange: function (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)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                ] }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
                                     if (sortByIndexBeingEdited > -1) {
                                         updateSortBy(sortByIndexBeingEdited);
                                         setIsOpen(false);
@@ -1090,76 +1178,80 @@ const SortByModal = ({ selectedSortByColumn, selectedSortByDirection, setSelecte
                                     addSortBy();
                                     setIsOpen(false);
                                     // close();
-                                }, label: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' })] }) })] }) }));
+                                }, 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: {
+var GroupByModal2 = function (_a) {
+    var selectedGroupByColumn = _a.selectedGroupByColumn, addGroupBy = _a.addGroupBy, setSelectedGroupByColumn = _a.setSelectedGroupByColumn, selectedTable = _a.selectedTable, groupByColumnType = _a.groupByColumnType, groupByIndexBeingEdited = _a.groupByIndexBeingEdited, updateGroupBy = _a.updateGroupBy, groupBys = _a.groupBys, removeGroupBy = _a.removeGroupBy, selectGroupBy = _a.selectGroupBy, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, aggregations = _a.aggregations, setAggregationColumn = _a.setAggregationColumn, setAggregationType = _a.setAggregationType, addAggregation = _a.addAggregation, dateBucket = _a.dateBucket, setDateBucket = _a.setDateBucket, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
                 position: 'relative',
                 display: 'inline-block',
                 textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            } }, { children: [_jsxs("div", __assign({ 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: {
+                    } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Group by" }), _jsx("div", __assign({ 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: {
+                            } }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'groupby' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add group by" }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
                                             fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
-                                            fontFamily: theme?.fontFamily,
+                                            fontFamily: theme === null || theme === void 0 ? void 0 : 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);
+                                        } }, { children: "Column" })), _jsx(SelectComponent, { label: "Column", value: selectedGroupByColumn.name, onChange: function (e) {
+                                            var column = selectedTable.columns.find(function (c) { return c.name === e; });
                                             setSelectedGroupByColumn(column);
-                                        }, options: selectedTable.columns.map(elem => {
+                                        }, options: selectedTable.columns.map(function (elem) {
                                             return { label: elem.name, value: elem.name };
-                                        }) })] }), groupByColumnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }) })] })), groupByColumnType === 'date' && (_jsxs("div", __assign({ style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     // marginLeft: 12,
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                } }, { children: [_jsx("div", __assign({ style: {
                                             fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
                                             color: theme.secondaryTextColor,
-                                            fontFamily: theme?.fontFamily,
+                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
                                             marginTop: 20,
-                                        }, children: "Bucket" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Bucket", value: dateBucket, onChange: e => {
+                                        } }, { children: "Bucket" })), _jsx(SelectComponent, { label: "Bucket", value: dateBucket, onChange: function (e) {
                                             setDateBucket(e);
                                         }, options: [
                                             { label: 'month', value: 'month' },
                                             { label: 'day', value: 'day' },
                                             { label: 'week', value: 'week' },
-                                        ] })] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        ] })] }))), _jsx("div", __assign({ 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)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                } }, { children: "Aggregations" })), aggregations.map(function (aggregation, index) {
+                                var _a;
+                                return (
+                                // setAggregationType
+                                _jsxs("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    } }, { children: [_jsx(SelectComponent, { value: (_a = aggregation.column) === null || _a === void 0 ? void 0 : _a.name, onChange: function (e) {
+                                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                                setAggregationColumn(column, index);
+                                            }, options: selectedTable.columns.map(function (elem) {
+                                                return { label: elem.name, value: elem.name };
+                                            }) }), _jsx("div", { style: { width: 16 } }), _jsx(SelectComponent, { value: aggregation.aggregationType, onChange: function (e) {
+                                                setAggregationType(e, index);
+                                            }, options: [
+                                                { label: 'sum', value: 'sum' },
+                                                { label: 'average', value: 'average' },
+                                                { label: 'count', value: 'count' },
+                                            ] })] }), 'agg' + index));
+                            }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
                                     if (groupByIndexBeingEdited > -1) {
                                         updateGroupBy(groupByIndexBeingEdited);
                                         setIsOpen(false);
@@ -1169,116 +1261,119 @@ const GroupByModal2 = ({ selectedGroupByColumn, addGroupBy, setSelectedGroupByCo
                                     addGroupBy();
                                     setIsOpen(false);
                                     // close();
-                                }, label: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' })] }) })] }) }));
+                                }, 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 [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: {
+var AddFilterModal2 = function (_a) {
+    var filters = _a.filters, selectedColumn = _a.selectedColumn, numberStart = _a.numberStart, numberEnd = _a.numberEnd, dateStart = _a.dateStart, setDateStart = _a.setDateStart, columnStats = _a.columnStats, stringFilterValues = _a.stringFilterValues, setStringFilterValues = _a.setStringFilterValues, addFilter = _a.addFilter, setSelectedColumn = _a.setSelectedColumn, setNumberStart = _a.setNumberStart, setNumberEnd = _a.setNumberEnd, selectedTable = _a.selectedTable, columnType = _a.columnType, setDateEnd = _a.setDateEnd, dateEnd = _a.dateEnd, removeFilter = _a.removeFilter, selectFilter = _a.selectFilter, indexBeingEdited = _a.indexBeingEdited, updateFilter = _a.updateFilter, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
                     position: 'relative',
                     display: 'inline-block',
                     textAlign: 'left',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                } }, { children: [_jsxs("div", __assign({ 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: {
+                        } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Filter" }), _jsx("div", __assign({ 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.map(function (elem, index) { return (_jsx(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle }, 'filter' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add filter" }, { children: _jsxs("div", __assign({ style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            } }, { children: [_jsx("div", __assign({ 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 => {
-                                        const column = selectedTable.columns.find(c => c.name === e);
+                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                    } }, { children: "Column" })), _jsx(SelectComponent, { id: "custom-select", value: selectedColumn.name, onChange: function (e) {
+                                        var column = selectedTable.columns.find(function (c) { return c.name === e; });
                                         setSelectedColumn(column);
-                                    }, options: selectedTable.columns.map(elem => {
+                                    }, options: selectedTable.columns.map(function (elem) {
                                         return { label: elem.name, value: elem.name };
-                                    }) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", __assign({ style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
-                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                        } }, { children: [_jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                } }, { children: [_jsx("div", __assign({ style: {
                                                             fontSize: '14px',
                                                             fontWeight: '600',
                                                             color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
+                                                            fontFamily: theme === null || theme === void 0 ? void 0 : 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: "Minimum" })), _jsx(TextInputComponent, { id: "min-input", value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); } })] })), _jsx("div", { style: { width: 16 } }), _jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                } }, { children: [_jsx("div", __assign({ style: {
                                                             fontSize: '14px',
                                                             fontWeight: '600',
                                                             color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
+                                                            fontFamily: theme === null || theme === void 0 ? void 0 : 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: "Maximum" })), _jsx(TextInputComponent, { id: "max-input", value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); } })] }))] })) })), columnType === 'date' && (_jsxs("div", __assign({ style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'space-between',
-                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }, { children: [_jsxs("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            } }, { children: [_jsx("div", __assign({ 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: {
+                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                    } }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date" })] })), _jsxs("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            } }, { children: [_jsx("div", __assign({ 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' &&
+                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                    } }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date" })] }))] }))), columnType === 'string' &&
                                     columnStats &&
-                                    columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    columnStats.length > 0 && (_jsx("div", __assign({ style: {
                                         flex: 'flex',
                                         flexDirection: 'column',
                                         marginTop: '14px',
                                         overflow: 'hidden',
-                                    }, children: columnStats.map(value => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    } }, { children: columnStats.map(function (value) { return (_jsx("div", __assign({ style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
-                                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        } }, { children: _jsxs("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 paddingTop: 6,
                                                 paddingBottom: 6,
-                                            }, children: [(0, jsx_runtime_1.jsx)(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
-                                                        setStringFilterValues(prev => prev.includes(value)
-                                                            ? prev.filter(v => v !== value)
-                                                            : [...prev, value]);
-                                                    } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            } }, { children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: function () {
+                                                        setStringFilterValues(function (prev) {
+                                                            return prev.includes(value)
+                                                                ? prev.filter(function (v) { return v !== value; })
+                                                                : __spreadArray(__spreadArray([], prev, true), [value], false);
+                                                        });
+                                                    } }), _jsx("div", __assign({ style: {
                                                         marginLeft: 6,
                                                         display: 'block',
                                                         overflow: 'hidden',
                                                         textOverflow: 'ellipsis',
                                                         whiteSpace: 'nowrap',
-                                                        color: theme?.primaryTextColor,
-                                                        fontFamily: theme?.fontFamily,
-                                                    }, children: value })] }, value) }, value))) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                        color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                    } }, { children: value }))] }), value) }), value)); }) }))), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
                                         if (indexBeingEdited > -1) {
                                             updateFilter(indexBeingEdited);
                                             setIsOpen(false);
@@ -1286,15 +1381,16 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                         }
                                         addFilter();
                                         setIsOpen(false);
-                                    }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '12px' } })] }));
+                                    }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })] })) }))] })), _jsx("div", { style: { height: '12px' } })] })));
 };
-const DivCheckbox = ({ onChange, checked, theme }) => {
-    const toggleCheckbox = () => {
+var DivCheckbox = function (_a) {
+    var onChange = _a.onChange, checked = _a.checked, theme = _a.theme;
+    var toggleCheckbox = function () {
         if (onChange) {
             onChange(!checked);
         }
     };
-    const style = {
+    var style = {
         // display: 'inline-block',
         width: '18px',
         height: '18px',
@@ -1304,14 +1400,14 @@ const DivCheckbox = ({ onChange, checked, theme }) => {
         position: 'relative',
         cursor: 'pointer',
         boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        fontFamily: theme?.fontFamily,
+        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
     };
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked, 
+    return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, 
         // className="shadow-sm"
-        role: "checkbox", children: checked && ((0, jsx_runtime_1.jsx)(solid_1.CheckIcon, { style: { color: theme?.backgroundColor, height: 16, width: 16 }, className: "text-white", "aria-hidden": "true" })) }));
+        role: "checkbox" }, { children: checked && (_jsx(CheckIcon, { style: { color: theme === null || theme === void 0 ? void 0 : theme.backgroundColor, height: 16, width: 16 }, className: "text-white", "aria-hidden": "true" })) })));
 };
 //# sourceMappingURL=ReportBuilder.js.map