@quillsql/react 1.7.1 → 1.7.2

package/lib/SQLEditor.js

@@ -1,22 +1,63 @@
-"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());
+    });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPostgresColumn = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+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 };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-const react_1 = require("react");
-const react_2 = __importDefault(require("@monaco-editor/react"));
+import { useState, useContext, useEffect } from 'react';
+import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
-const axios_1 = __importDefault(require("axios"));
-const Context_1 = require("./Context");
-const solid_1 = require("@heroicons/react/20/solid");
-const Table_1 = require("./Table");
-const react_loader_spinner_1 = require("react-loader-spinner");
-function convertPostgresColumn(column) {
-    let format;
+import axios from 'axios';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import { ChevronDownIcon, ChevronRightIcon, } from '@heroicons/react/20/solid';
+import { SpecialTable } from './Table';
+import { TailSpin } from 'react-loader-spinner';
+export function convertPostgresColumn(column) {
+    var format;
     switch (column.dataTypeID) {
         case 20: // int8
         case 21: // int2
@@ -44,7 +85,6 @@ function convertPostgresColumn(column) {
         format: format,
     };
 }
-exports.convertPostgresColumn = convertPostgresColumn;
 function defineEditorTheme(monaco, theme) {
     monaco.editor.defineTheme('onedark', {
         base: theme.darkMode ? 'vs-dark' : 'vs',
@@ -70,26 +110,30 @@ function setEditorTheme(editor, monaco) {
         console.log('ERROR: ', e);
     }
 }
-const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_1.jsx)("button", { style: {
-        borderRadius: '6px',
-        backgroundColor: secondary
-            ? theme?.secondaryButtonColor || '#FFFFFF'
-            : theme?.primaryButtonColor,
-        opacity: 1,
-        paddingLeft: '16px',
-        paddingRight: '16px',
-        paddingTop: '10px',
-        paddingBottom: '10px',
-        fontSize: '14px',
-        fontWeight: 600,
-        color: secondary ? theme?.primaryTextColor : '#FFFFFF',
-        cursor: 'pointer',
-        outline: 'none',
-        border: 'none',
-        fontFamily: theme?.fontFamily,
-    }, onClick: onClick, children: label }));
-const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
-    return ((0, jsx_runtime_1.jsx)("input", { style: {
+var QuillButton = function (_a) {
+    var onClick = _a.onClick, label = _a.label, theme = _a.theme, secondary = _a.secondary;
+    return (_jsx("button", __assign({ style: {
+            borderRadius: '6px',
+            backgroundColor: secondary
+                ? (theme === null || theme === void 0 ? void 0 : theme.secondaryButtonColor) || '#FFFFFF'
+                : theme === null || theme === void 0 ? void 0 : theme.primaryButtonColor,
+            opacity: 1,
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            paddingTop: '10px',
+            paddingBottom: '10px',
+            fontSize: '14px',
+            fontWeight: 600,
+            color: secondary ? theme === null || theme === void 0 ? void 0 : theme.primaryTextColor : '#FFFFFF',
+            cursor: 'pointer',
+            outline: 'none',
+            border: 'none',
+            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+        }, onClick: onClick }, { children: label })));
+};
+var QuillTextInput = function (_a) {
+    var onChange = _a.onChange, value = _a.value, id = _a.id, placeholder = _a.placeholder, theme = _a.theme;
+    return (_jsx("input", { style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -99,134 +143,173 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             height: 36,
             boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
             width: '445px',
-            backgroundColor: theme?.backgroundColor || 'white',
-            color: theme?.primaryTextColor,
+            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
+            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
             borderWidth: '1px',
-            borderColor: theme?.borderColor || '#E7E7E7',
+            borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E7E7E7',
             borderStyle: 'solid',
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, AddToDashboardButton, LoadingComponent, }) {
-    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [query, setQuery] = (0, react_1.useState)('');
-    const [rows, setRows] = (0, react_1.useState)([]);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
-    const [sqlQueryLoading, setSqlQueryLoading] = (0, react_1.useState)(false);
-    const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            const { publicKey, environment } = client;
-            setSchemaLoading(true);
-            const response3 = await axios_1.default.get(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: environment || undefined,
-                },
+export default function QueryEditor(_a) {
+    var _this = this;
+    var _b = _a.containerStyle, containerStyle = _b === void 0 ? { height: '100vh' } : _b, ButtonComponent = _a.ButtonComponent, SecondaryButtonComponent = _a.SecondaryButtonComponent, TextInputComponent = _a.TextInputComponent, TableComponent = _a.TableComponent, AddToDashboardButton = _a.AddToDashboardButton, LoadingComponent = _a.LoadingComponent;
+    var _c = useState(''), sqlPrompt = _c[0], setSqlPrompt = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var client = useContext(ClientContext)[0];
+    var theme = useContext(ThemeContext)[0];
+    var _e = useState(''), query = _e[0], setQuery = _e[1];
+    var _f = useState([]), rows = _f[0], setRows = _f[1];
+    var _g = useState([]), columns = _g[0], setColumns = _g[1];
+    var _h = useState([]), fields = _h[0], setFields = _h[1];
+    var _j = useContext(SchemaContext), schema = _j[0], setSchema = _j[1];
+    var _k = useState(''), errorMessage = _k[0], setErrorMessage = _k[1];
+    var _l = useState(false), sqlResponseLoading = _l[0], setSqlResponseLoading = _l[1];
+    var _m = useState(false), sqlQueryLoading = _m[0], setSqlQueryLoading = _m[1];
+    var _o = useState(false), schemaLoading = _o[0], setSchemaLoading = _o[1];
+    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;
+                            setSchemaLoading(true);
+                            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);
+                                setSchemaLoading(false);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
             });
-            if (isSubscribed) {
-                setSchema(response3.data.tables);
-                setSchemaLoading(false);
-            }
         }
         if (isSubscribed) {
             getSchema();
         }
-        return () => {
+        return function () {
             isSubscribed = false;
         };
     }, []);
-    const handleRunSqlPrompt = async () => {
-        const { publicKey, environment } = client;
-        setSqlResponseLoading(true);
-        const response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/quillai`, {
-            initialQuestion: sqlPrompt,
-            publicKey: publicKey,
-        }, {
-            headers: {
-                Authorization: `Bearer `,
-                environment: environment || undefined,
-            },
-        });
-        setQuery(response.data.message);
-        setSqlResponseLoading(false);
-    };
-    const handleRunQuery = async () => {
-        const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
-        try {
-            let response;
-            setSqlQueryLoading(true);
-            if (queryEndpoint) {
-                response = await axios_1.default.post(queryEndpoint, { metadata: { query, task: 'query' } }, { headers: queryHeaders, withCredentials });
+    var handleRunSqlPrompt = function () { return __awaiter(_this, void 0, void 0, function () {
+        var publicKey, environment, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    publicKey = client.publicKey, environment = client.environment;
+                    setSqlResponseLoading(true);
+                    return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/quillai", {
+                            initialQuestion: sqlPrompt,
+                            publicKey: publicKey,
+                        }, {
+                            headers: {
+                                Authorization: "Bearer ",
+                                environment: environment || undefined,
+                            },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    setQuery(response.data.message);
+                    setSqlResponseLoading(false);
+                    return [2 /*return*/];
             }
-            else {
-                response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/dashquery`, {
-                    query,
-                }, {
-                    params: {
-                        orgId: customerId,
-                        publicKey: publicKey,
-                    },
-                    headers: {
-                        Authorization: `Bearer `,
-                        environment: environment || undefined,
-                    },
-                });
-            }
-            if (response && response.data && response.data.errorMessage) {
-                setSqlQueryLoading(false);
-                setErrorMessage('Failed to run SQL query: ' + response.data.errorMessage);
-                setRows([]);
-                setColumns([]);
-                setFields([]);
-                return;
+        });
+    }); };
+    var handleRunQuery = function () { return __awaiter(_this, void 0, void 0, function () {
+        var publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, response, e_1;
+        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;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    response = void 0;
+                    setSqlQueryLoading(true);
+                    if (!queryEndpoint) return [3 /*break*/, 3];
+                    return [4 /*yield*/, axios.post(queryEndpoint, { metadata: { query: query, task: 'query' } }, { headers: queryHeaders, withCredentials: withCredentials })];
+                case 2:
+                    response = _a.sent();
+                    return [3 /*break*/, 5];
+                case 3: 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 4:
+                    response = _a.sent();
+                    _a.label = 5;
+                case 5:
+                    if (response && response.data && response.data.errorMessage) {
+                        setSqlQueryLoading(false);
+                        setErrorMessage('Failed to run SQL query: ' + response.data.errorMessage);
+                        setRows([]);
+                        setColumns([]);
+                        setFields([]);
+                        return [2 /*return*/];
+                    }
+                    setSqlQueryLoading(false);
+                    setErrorMessage('');
+                    setRows(response.data.rows && response.data.rows.length
+                        ? response.data.rows
+                        : []);
+                    setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
+                    setFields(response.data.fields);
+                    return [3 /*break*/, 7];
+                case 6:
+                    e_1 = _a.sent();
+                    console.log('ERROR: ', e_1);
+                    return [2 /*return*/];
+                case 7: return [2 /*return*/];
             }
-            setSqlQueryLoading(false);
-            setErrorMessage('');
-            setRows(response.data.rows && response.data.rows.length
-                ? response.data.rows
-                : []);
-            setColumns(response.data.fields.map(elem => convertPostgresColumn(elem)));
-            setFields(response.data.fields);
-        }
-        catch (e) {
-            console.log('ERROR: ', e);
-            return;
-        }
-    };
-    const handleAddToDashboard = () => {
+        });
+    }); };
+    var handleAddToDashboard = function () {
         setIsOpen(true);
     };
     /* all your useState and useContext calls and your useEffect hooks */
-    const downloadCSV = () => {
+    var downloadCSV = function () {
         // report.rows
         if (!rows.length) {
             return;
         }
-        const json = rows; // JSON data passed as a prop
-        const fields = Object.keys(json[0]); // Assumes all objects have same keys
-        const csvRows = [];
+        var json = rows; // JSON data passed as a prop
+        var fields = Object.keys(json[0]); // Assumes all objects have same keys
+        var csvRows = [];
         // Header row
         csvRows.push(fields.join(','));
-        // Data rows
-        for (const row of json) {
-            const values = fields.map(field => JSON.stringify(row[field] || ''));
+        var _loop_1 = function (row) {
+            var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
             csvRows.push(values.join(','));
+        };
+        // Data rows
+        for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
+            var row = json_1[_i];
+            _loop_1(row);
         }
         // Create CSV string and create a 'blob' with it
-        const csvString = csvRows.join('\r\n');
-        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        var csvString = csvRows.join('\r\n');
+        var csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        const downloadLink = document.createElement('a');
-        downloadLink.download = `${query}.csv`;
+        var downloadLink = document.createElement('a');
+        downloadLink.download = "".concat(query, ".csv");
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -234,28 +317,28 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
         document.body.removeChild(downloadLink);
     };
     /* rest of your methods */
-    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", __assign({ style: containerStyle }, { children: _jsx("div", __assign({ style: {
                 height: 'calc(100%)',
                 display: 'flex',
                 flexDirection: 'column',
                 padding: 0,
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+            } }, { children: _jsx("div", __assign({ style: { height: '100%', display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
                         width: '100%',
                         display: 'flex',
                         height: '100%',
                         flexDirection: 'row',
-                    }, children: [(0, jsx_runtime_1.jsx)(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    } }, { children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", __assign({ style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 width: 'calc(100% - 250px)',
-                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            } }, { children: [_jsxs("div", __assign({ style: {
                                         // TODO: change color
                                         height: 80,
                                         background: 'white',
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }, { children: [_jsx("div", __assign({ style: { minWidth: 440, marginRight: 10 } }, { children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: function (e) { return setSqlPrompt(e.target.value); }, placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: function (e) { return setSqlPrompt(e.target.value); }, placeholder: "Ask a question...", theme: theme })) })), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] })), _jsx("div", __assign({ style: { height: 'calc(50% - 40px)' } }, { children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) })), _jsxs("div", __assign({ style: {
                                         height: 'calc(50% - 40px)',
                                         display: 'flex',
                                         flexDirection: 'column',
@@ -263,52 +346,52 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                         margin: 0,
                                         border: 'none',
                                         outline: 'none',
-                                    }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                fontFamily: theme?.fontFamily,
-                                                color: theme?.primaryTextColor,
+                                    } }, { children: [errorMessage && (_jsx("div", __assign({ style: {
+                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                                 fontSize: 15,
                                                 fontWeight: '400',
-                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            } }, { children: _jsx("div", __assign({ style: {
                                                     padding: 30,
                                                     // TODO: change color
                                                     background: 'rgba(0,0,0,0.02)',
                                                     display: 'inline-block',
                                                     flex: 0,
                                                     borderRadius: 6,
-                                                    color: theme?.primaryTextColor,
-                                                    fontFamily: theme?.fontFamily,
-                                                }, children: errorMessage }) })), errorMessage
+                                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                } }, { children: errorMessage })) }))), errorMessage
                                             ? null
-                                            : (TableComponent && ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, height: "calc(100% - 70px)" }))) || ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: rows, columns: columns, height: "calc(100% - 70px)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, theme: theme })), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            : (TableComponent && (_jsx(TableComponent, { rows: rows, columns: columns, height: "calc(100% - 70px)" }))) || (_jsx(SpecialTable, { rows: rows, columns: columns, height: "calc(100% - 70px)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, theme: theme })), _jsx("div", __assign({ style: {
                                                 height: 70,
                                                 // TODO: change color
-                                                background: theme?.backgroundColor,
-                                            }, children: rows.length ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
+                                            } }, { children: rows.length ? (_jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     height: 70,
                                                     border: 'none',
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                } }, { children: [_jsx("div", { style: {
                                                             height: 1,
                                                             width: '100%',
                                                             // TODO: change color
                                                             // background: theme.borderColor,
-                                                        } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        } }), _jsxs("div", __assign({ style: {
                                                             marginLeft: 0,
                                                             height: 69,
                                                             display: 'flex',
                                                             alignItems: 'center',
                                                             justifyContent: 'flex-end',
                                                             paddingRight: 20,
-                                                        }, children: [(SecondaryButtonComponent && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: downloadCSV, label: "Download CSV" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: downloadCSV, label: "Download CSV", secondary: true })), AddToDashboardButton && (0, jsx_runtime_1.jsx)("div", { style: { width: 10 } }), AddToDashboardButton && ((0, jsx_runtime_1.jsx)(AddToDashboardButton
+                                                        } }, { children: [(SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: downloadCSV, label: "Download CSV" }))) || (_jsx(QuillButton, { theme: theme, onClick: downloadCSV, label: "Download CSV", secondary: true })), AddToDashboardButton && _jsx("div", { style: { width: 10 } }), AddToDashboardButton && (_jsx(AddToDashboardButton
                                                             // @ts-ignore
                                                             , { 
                                                                 // @ts-ignore
-                                                                rows: rows, columns: columns, query: query })), (0, jsx_runtime_1.jsx)("div", {})] })] })) : null })] })] })] }) }) }) }));
+                                                                rows: rows, columns: columns, query: query })), _jsx("div", {})] }))] }))) : null }))] }))] }))] })) })) })) })));
 }
-exports.default = QueryEditor;
-const SQLEditorComponent = ({ query, setQuery, handleRunQuery, defineEditorTheme, setEditorTheme, ButtonComponent, theme, loading, LoadingComponent, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+var SQLEditorComponent = function (_a) {
+    var query = _a.query, setQuery = _a.setQuery, handleRunQuery = _a.handleRunQuery, defineEditorTheme = _a.defineEditorTheme, setEditorTheme = _a.setEditorTheme, ButtonComponent = _a.ButtonComponent, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
+    return (_jsxs("div", __assign({ style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
@@ -322,27 +405,27 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, defineEditorTheme
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             overflow: 'hidden',
-        }, children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+        } }, { children: [loading ? (_jsxs("div", __assign({ style: {
                     height: 'calc(100% - 70px)',
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     background: '#F9F9F9',
-                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsx)(react_loader_spinner_1.TailSpin, { height: 36, width: 36, color: "#364153" }))] })) : ((0, jsx_runtime_1.jsx)(react_2.default, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] }))) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
                     wordWrap: 'on',
                     minimap: {
                         enabled: false,
                     },
                     padding: { top: 16 },
-                }, onChange: query => setQuery(query), beforeMount: monaco => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, onChange: function (query) { return setQuery(query); }, beforeMount: function (monaco) { return defineEditorTheme(monaco, theme); }, onMount: setEditorTheme })), _jsx("div", __assign({ style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     height: 70,
-                }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })) })] }));
+                } }, { children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })) }))] })));
 };
-const styles = {
+var styles = {
     columnHeader: {
         boxSizing: 'border-box',
         flex: '150 0 auto',
@@ -374,9 +457,10 @@ const styles = {
         overflow: 'hidden',
     },
 };
-const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
+var SchemaListComponent = function (_a) {
+    var schema = _a.schema, theme = _a.theme, loading = _a.loading, LoadingComponent = _a.LoadingComponent;
     if (loading) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+        return (_jsxs("div", __assign({ style: {
                 background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: 250,
@@ -390,9 +474,9 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
                 display: 'flex',
                 // alignItems: 'center',
                 justifyContent: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsx)(react_loader_spinner_1.TailSpin, { height: 36, width: 36, color: "#364153" }))] }));
+            } }, { children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", __assign({ style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: 250,
@@ -402,11 +486,12 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
             // maxHeight: "100%",
             paddingLeft: 20,
             paddingRight: 30,
-        }, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+        } }, { children: schema.map(function (elem, index) { return (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index)); }) })));
 };
-function SchemaItem({ elem, theme, index }) {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
-    const schemaContainerStyle = {
+function SchemaItem(_a) {
+    var elem = _a.elem, theme = _a.theme, index = _a.index;
+    var _b = useState(index === 0), isOpen = _b[0], setIsOpen = _b[1];
+    var schemaContainerStyle = {
         display: 'flex',
         flexDirection: 'column',
         // WebkitTouchCallout: "none",
@@ -416,7 +501,7 @@ function SchemaItem({ elem, theme, index }) {
         // msUserSelect: "none",
         // userSelect: "none",
     };
-    const schemaRowStyle = {
+    var schemaRowStyle = {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
@@ -424,10 +509,10 @@ function SchemaItem({ elem, theme, index }) {
         justifyContent: 'space-between',
         cursor: 'pointer',
     };
-    const schemaRowHoverStyle = {
+    var schemaRowHoverStyle = {
         background: theme.selectUnderlayColor,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
+    return (_jsxs("div", __assign({ style: schemaContainerStyle }, { children: [_jsxs("div", __assign({ style: __assign(__assign({}, schemaRowStyle), (isOpen && schemaRowHoverStyle)), onClick: function () { return setIsOpen(!isOpen); } }, { children: [_jsx("p", __assign({ style: {
                             marginLeft: theme.padding,
                             fontSize: 13,
                             color: '#384151',
@@ -437,8 +522,8 @@ function SchemaItem({ elem, theme, index }) {
                             margin: 0,
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
-                            fontFamily: theme?.fontFamily,
-                        }, title: elem.displayName, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                        }, title: elem.displayName }, { children: elem.displayName })), _jsx("div", __assign({ style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -447,19 +532,19 @@ function SchemaItem({ elem, theme, index }) {
                             paddingBottom: 12,
                             paddingLeft: 0,
                             cursor: 'pointer',
-                        }, children: isOpen ? ((0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(solid_1.ChevronRightIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                        } }, { children: isOpen ? (_jsx(ChevronDownIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) : (_jsx(ChevronRightIcon, { style: { height: 13, width: 13, color: theme.secondaryTextColor }, "aria-hidden": "true" })) }))] })), isOpen ? (_jsx("div", __assign({ style: {
                     paddingBottom: theme.padding,
                     display: 'flex',
                     flexDirection: 'column',
                     paddingLeft: theme.padding,
                     paddingRight: theme.padding,
-                }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                } }, { children: elem.columns.map(function (elem, index) { return (_jsxs("div", __assign({ style: {
                         paddingTop: theme.padding,
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, 
+                    } }, { children: [_jsx("div", __assign({ title: elem.displayName, 
                             // className="text-gray-500"
                             style: {
                                 fontSize: 12,
@@ -473,8 +558,8 @@ function SchemaItem({ elem, theme, index }) {
                                 overflow: 'hidden',
                                 width: 200,
                                 maxWidth: 200,
-                                fontFamily: theme?.fontFamily,
-                            }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { 
+                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                            } }, { children: elem.displayName })), _jsx("div", __assign({ 
                             // className="text-gray-500"
                             title: elem.displayName, style: {
                                 fontSize: 12,
@@ -482,7 +567,7 @@ function SchemaItem({ elem, theme, index }) {
                                 color: theme.secondaryTextColor,
                                 padding: 0,
                                 margin: 0,
-                                fontFamily: theme?.fontFamily,
-                            }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
+                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                            } }, { children: elem.fieldType }))] }), elem.displayName + elem.index)); }) }))) : null] })));
 }
 //# sourceMappingURL=SQLEditor.js.map