@quillsql/react 1.5.3 → 1.5.5

package/src/SQLEditor.tsx

@@ -0,0 +1,841 @@
+import React, { useState, useContext, useMemo, useEffect } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+// import './nightOwlLight.css';
+import axios from 'axios';
+import { TailSpin } from 'react-loader-spinner';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  SparklesIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/20/solid';
+
+export function convertPostgresColumn(column) {
+  let format;
+
+  switch (column.dataTypeID) {
+    case 20: // int8
+    case 21: // int2
+    case 23: // int4
+      format = 'whole_number';
+      break;
+    case 700: // float4
+    case 701: // float8
+    case 1700: // numeric
+      format = 'two_decimal_places';
+      break;
+    case 1082: // date
+    case 1083: // time
+    case 1184: // timestamptz
+    case 1114: // timestamp
+      format = 'MMM_dd_yyyy';
+      break;
+    case 1043: // varchar
+    default:
+      format = 'string';
+  }
+
+  return {
+    label: column.name,
+    field: column.name,
+    format: format,
+  };
+}
+
+function defineEditorTheme(monaco, theme) {
+  monaco.editor.defineTheme('onedark', {
+    base: theme.darkMode ? 'vs-dark' : 'vs',
+    inherit: true,
+    rules: [
+      {
+        token: 'comment',
+        foreground: '#5d7988',
+        fontStyle: 'italic',
+      },
+      { token: 'constant', foreground: '#e06c75' },
+    ],
+    colors: {
+      'editor.background': '#F9F9F9',
+    },
+  });
+}
+function setEditorTheme(editor, monaco) {
+  try {
+    monaco.editor.setTheme('onedark');
+  } catch (e) {
+    console.log('ERROR: ', e);
+  }
+}
+
+interface SQLEditorProps {
+  containerStyle: React.CSSProperties;
+}
+
+export default function QueryEditor({
+  containerStyle = { height: '100vh' },
+}: SQLEditorProps) {
+  const [sqlPrompt, setSqlPrompt] = useState('');
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [client] = useContext(ClientContext);
+  const [theme] = useContext(ThemeContext);
+  const [query, setQuery] = useState('');
+  const [rows, setRows] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const [fields, setFields] = useState([]);
+  const [schema, setSchema] = useContext(SchemaContext);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+
+  useEffect(() => {
+    let isSubscribed = true;
+    async function getSchema() {
+      const { publicKey, environment } = client;
+      const response3 = await axios.get(
+        `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`,
+        {
+          headers: {
+            Authorization: `Bearer `,
+            environment: environment || undefined,
+          },
+        }
+      );
+      if (isSubscribed) {
+        setSchema(response3.data.tables);
+      }
+    }
+    if (isSubscribed) {
+      getSchema();
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, []);
+
+  const handleRunSqlPrompt = async () => {
+    const { publicKey, environment } = client;
+    setSqlResponseLoading(true);
+    const response = await axios.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 } = client;
+    try {
+      const response = await axios.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) {
+        setErrorMessage(
+          'Failed to run SQL query: ' + response.data.errorMessage
+        );
+        setRows([]);
+        setColumns([]);
+        setFields([]);
+        return;
+      }
+      setErrorMessage('');
+      setRows(response.data.rows);
+      setColumns(response.data.fields.map(elem => convertPostgresColumn(elem)));
+      setFields(response.data.fields);
+    } catch (e) {
+      console.log('ERROR: ', e);
+      return;
+    }
+  };
+
+  const handleAddToDashboard = () => {
+    setIsOpen(true);
+  };
+
+  const newRows = useMemo(() => {
+    return JSON.parse(JSON.stringify(rows));
+  }, [rows]);
+
+  /* all your useState and useContext calls and your useEffect hooks */
+
+  const downloadCSV = () => {
+    // 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 = [];
+
+    // Header row
+    csvRows.push(fields.join(','));
+
+    // Data rows
+    for (const row of json) {
+      const values = fields.map(field => JSON.stringify(row[field] || ''));
+      csvRows.push(values.join(','));
+    }
+
+    // Create CSV string and create a 'blob' with it
+    const csvString = csvRows.join('\r\n');
+    const csvBlob = new Blob([csvString], { type: 'text/csv' });
+
+    // Create a download link and click it
+    const downloadLink = document.createElement('a');
+    downloadLink.download = `${query}.csv`;
+    downloadLink.href = URL.createObjectURL(csvBlob);
+    downloadLink.style.display = 'none';
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  };
+
+  /* rest of your methods */
+
+  return (
+    <div style={containerStyle}>
+      <div
+        style={{
+          height: 'calc(100%)',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+        }}
+      >
+        <div
+          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+          <div
+            style={{
+              width: '100%',
+              display: 'flex',
+              height: '100%',
+              flexDirection: 'row',
+            }}
+          >
+            <SchemaListComponent schema={schema} theme={theme} />
+
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: 'calc(100% - 250px)',
+              }}
+            >
+              <div
+                style={{
+                  // TODO: change color
+                  height: 80,
+                  background: 'white',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingLeft: '12px',
+                    paddingRight: '12px',
+                    height: 38,
+                    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
+                    width: '445px',
+                    // TODO: change color
+                    borderColor: theme.borderColor,
+                    color: theme.primaryTextColor,
+                    borderWidth: '1px',
+                    // TODO: change color
+                    backgroundColor: 'white',
+                    borderRadius: 6,
+                    borderStyle: 'solid',
+                    outline: 'none',
+                  }}
+                >
+                  <MagnifyingGlassIcon
+                    style={{
+                      height: 16,
+                      width: 16,
+                      color: theme.secondaryTextColor,
+                    }}
+                    aria-hidden="true"
+                  />
+                  <input
+                    value={sqlPrompt}
+                    onChange={e => setSqlPrompt(e.target.value)}
+                    style={{
+                      outline: 'none',
+                      marginLeft: 8,
+                      width: '100%',
+                      border: 'none',
+                      outline: 'none',
+                    }}
+                  />
+                </div>
+                <button
+                  onClick={handleRunSqlPrompt}
+                  style={{
+                    // TODO: change color
+                    background: theme.primaryButtonColor,
+                    // TODO: change color
+                    color: theme.backgroundColor,
+                    height: 38,
+                    paddingLeft: 10,
+                    paddingRight: 12,
+                    width: 87,
+                    minWidth: 87,
+                    maxWidth: 87,
+                    marginLeft: 12,
+                    fontWeight: '400',
+                    borderRadius: '0.375rem',
+                    border: 'none',
+                    outline: 'none',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {sqlResponseLoading ? (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        width: '100%',
+                        height: '100%',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <TailSpin
+                        height="20"
+                        width="20"
+                        // TODO: change color
+                        color={theme.backgroundColor}
+                        ariaLabel="loading-indicator"
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <SparklesIcon
+                        style={{
+                          height: 12,
+                          width: 12,
+                          marginRight: 4,
+                          // TODO: change color
+                          color: theme.backgroundColor,
+                        }}
+                        aria-hidden="true"
+                      />
+                      <div style={{ fontSize: 14, fontWeight: 600 }}>
+                        Ask AI
+                      </div>
+                    </div>
+                  )}
+                </button>
+              </div>
+              <div style={{ height: 'calc(50% - 40px)' }}>
+                <SQLEditorComponent
+                  query={query}
+                  setQuery={setQuery}
+                  handleRunQuery={handleRunQuery}
+                  theme={theme}
+                  defineEditorTheme={defineEditorTheme}
+                  setEditorTheme={setEditorTheme}
+                />
+              </div>
+              <div
+                style={{
+                  height: 'calc(50% - 40px)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  padding: 0,
+                  margin: 0,
+                  border: 'none',
+                  outline: 'none',
+                }}
+              >
+                {errorMessage && (
+                  <div
+                    style={{
+                      fontFamily: theme.fontFamily,
+                      color: theme.primaryTextColor,
+                      fontSize: 15,
+                      fontWeight: '400',
+                    }}
+                  >
+                    <div
+                      style={{
+                        padding: 30,
+                        // TODO: change color
+                        background: 'rgba(0,0,0,0.02)',
+                        display: 'inline-block',
+                        flex: 0,
+                        borderRadius: 6,
+                      }}
+                    >
+                      {errorMessage}
+                    </div>
+                  </div>
+                )}
+                <div
+                  style={{
+                    height: 'calc(100% - 60px)',
+                    overflow: 'scroll',
+                    padding: 0,
+                    margin: 0,
+                    border: 'none',
+                    outline: 'none',
+                  }}
+                >
+                  <table
+                    style={{
+                      padding: 0,
+                      margin: 0,
+                      border: 'none',
+                      outline: 'none',
+                      borderSpacing: 0,
+                    }}
+                  >
+                    <thead
+                      style={{
+                        position: 'sticky',
+                        // TODO: change color
+                        background: theme.backgroundColor,
+                        top: 0,
+                        height: 37,
+                        minHeight: 37,
+                        maxHeight: 37,
+                      }}
+                    >
+                      <tr
+                        style={{
+                          outline: 'none',
+                          border: 'none',
+                          padding: 0,
+                          margin: 0,
+                        }}
+                      >
+                        {columns.map((column, index) => (
+                          <th
+                            key={index}
+                            scope="col"
+                            style={{
+                              textAlign: 'left',
+                              fontSize: 13,
+                              height: 37,
+                              minHeight: 37,
+                              maxHeight: 37,
+                              paddingLeft: 12,
+                              paddingRight: 12,
+                              paddingTop: 0,
+                              paddingBottom: 0,
+                              margin: 0,
+                              fontWeight: '500',
+                              // TODO: change color
+                              boxShadow: `inset 0 -1px 0 ${theme.borderColor}`,
+                              // TODO: change color
+                              color: theme.primaryTextColor,
+                              outline: 'none',
+                              border: 'none',
+                            }}
+                          >
+                            {column.label}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody
+                      style={{
+                        // TODO: change color
+                        backgroundColor: theme.backgroundColor,
+                      }}
+                    >
+                      {newRows.map((row, rowIndex) => (
+                        <tr key={rowIndex}>
+                          {columns.map((column, columnIndex) => (
+                            <td
+                              key={columnIndex}
+                              style={{
+                                padding: 12,
+                                whiteSpace: 'nowrap',
+                                fontSize: 13,
+                                color: theme.secondaryTextColor,
+                                // TODO: change color
+                                borderBottom: `1px solid ${theme.borderColor} !important`,
+                                outline: 'none',
+                              }}
+                            >
+                              {typeof row[column.field] === 'object'
+                                ? JSON.stringify(row[column.field]).length > 55
+                                  ? JSON.stringify(row[column.field]).substring(
+                                      0,
+                                      52
+                                    ) + '...'
+                                  : JSON.stringify(row[column.field])
+                                : row[column.field].length > 55
+                                ? row[column.field].substring(0, 52) + '...'
+                                : row[column.field]}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div
+                  style={{
+                    height: 60,
+                    // TODO: change color
+                    background: theme.backgroundColor,
+                  }}
+                >
+                  {rows.length ? (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: 60,
+                        border: 'none',
+                      }}
+                    >
+                      <div
+                        style={{
+                          height: 1,
+                          // TODO: change color
+                          background: theme.borderColor,
+                        }}
+                      />
+                      <div style={{ marginLeft: 0 }}>
+                        <button
+                          type="button"
+                          onClick={downloadCSV}
+                          style={{
+                            borderRadius: 6,
+                            // TODO: change color
+                            backgroundColor: theme.primaryButtonColor,
+                            paddingLeft: '1rem',
+                            paddingRight: '1rem',
+                            paddingTop: '0.5rem',
+                            paddingBottom: '0.5rem',
+                            fontSize: '0.875rem',
+                            fontWeight: '600',
+                            // TODO: change color
+                            color: theme.backgroundColor,
+                            outline: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            marginTop: 14,
+                          }}
+                        >
+                          Download CSV
+                        </button>
+                        <div />
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const SQLEditorComponent = ({
+  query,
+  setQuery,
+  handleRunQuery,
+  theme,
+  defineEditorTheme,
+  setEditorTheme,
+}) => {
+  return (
+    <div
+      style={{
+        background: theme.backgroundColor,
+        // maxHeight: 700,
+        width: '100%',
+        height: '100%',
+        // minWidth: 450,
+        // overflowY: "scroll",
+        // padding: "20px 30px 20px 20px",
+        // marginLeft: 20,
+        borderTopLeftRadius: 6,
+        borderBottomLeftRadius: 6,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        overflow: 'hidden',
+      }}
+    >
+      <MonacoEditor
+        height="calc(100% - 50px)"
+        width="100%"
+        defaultLanguage="pgsql"
+        defaultValue=""
+        value={query}
+        loading={<div />}
+        options={{
+          wordWrap: 'on',
+          minimap: {
+            enabled: false,
+          },
+          padding: { top: 16 },
+        }}
+        onChange={query => setQuery(query)}
+        beforeMount={monaco => defineEditorTheme(monaco, theme)}
+        onMount={setEditorTheme}
+      />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: 50,
+        }}
+      >
+        {/* <button
+          type="button"
+          onClick={handleRunQuery}
+          style={{
+            borderRadius: 8,
+            width: '100px',
+            // backgroundColor: "#212121",
+            height: '32px',
+            fontSize: 14,
+            fontWeight: '600',
+            backgroundColor: 'transparent',
+            color: '#384151',
+            border: 'none',
+            outline: 'none',
+            cursor: 'pointer',
+          }}
+        >
+          Run query
+        </button> */}
+        <button
+          type="button"
+          onClick={handleRunQuery}
+          style={{
+            borderRadius: 6,
+            backgroundColor: theme.primaryButtonColor,
+            height: 32,
+            width: 100,
+            marginLeft: 0,
+            // paddingLeft: '1rem',
+            // paddingRight: '1rem',
+            // paddingTop: '0.5rem',
+            // paddingBottom: '0.5rem',
+            fontSize: '0.875rem',
+            fontWeight: '600',
+            color: theme.backgroundColor,
+            outline: 'none',
+            border: 'none',
+            cursor: 'pointer',
+          }}
+        >
+          Run query
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const SchemaListComponent = ({ schema, theme }) => {
+  return (
+    <div
+      style={{
+        background: theme.backgroundColor,
+        // maxHeight: 700,
+        width: 250,
+        minWidth: 250,
+        overflowY: 'scroll',
+        height: '100%',
+        // maxHeight: "100%",
+        paddingLeft: 20,
+        paddingRight: 30,
+      }}
+    >
+      {schema.map((elem, index) => (
+        <SchemaItem
+          key={elem.displayName + index}
+          elem={elem}
+          theme={theme}
+          index={index}
+        />
+      ))}
+    </div>
+  );
+};
+
+function SchemaItem({ elem, theme, index }) {
+  const [isOpen, setIsOpen] = useState(index === 0);
+
+  const schemaContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    // WebkitTouchCallout: "none",
+    // WebkitUserSelect: "none",
+    // KhtmlUserSelect: "none",
+    // MozUserSelect: "none",
+    // msUserSelect: "none",
+    // userSelect: "none",
+  };
+
+  const schemaRowStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: 'space-between',
+    cursor: 'pointer',
+  };
+
+  const schemaRowHoverStyle = {
+    background: theme.selectUnderlayColor,
+  };
+
+  return (
+    <div style={schemaContainerStyle}>
+      <div
+        style={{ ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <p
+          style={{
+            marginLeft: theme.padding,
+            fontSize: 13,
+            color: '#384151',
+            fontWeight: '500',
+            whiteSpace: 'nowrap',
+            padding: 0,
+            margin: 0,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
+          title={elem.displayName}
+        >
+          {elem.displayName}
+        </p>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // paddingRight: 25,
+            paddingTop: 12,
+            paddingBottom: 12,
+            paddingLeft: 0,
+            cursor: 'pointer',
+          }}
+        >
+          {/* <Arrow
+            fill={theme.fontColor}
+            style={{
+              transform: isOpen ? "scale(0.8) rotate(90deg)" : "scale(0.8)",
+            }}
+          /> */}
+          {isOpen ? (
+            <ChevronDownIcon
+              style={{ height: 13, width: 13, color: theme.secondaryTextColor }}
+              aria-hidden="true"
+            />
+          ) : (
+            <ChevronRightIcon
+              style={{ height: 13, width: 13, color: theme.secondaryTextColor }}
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      </div>
+      {isOpen ? (
+        <div
+          style={{
+            paddingBottom: theme.padding,
+            display: 'flex',
+            flexDirection: 'column',
+            paddingLeft: theme.padding,
+            paddingRight: theme.padding,
+          }}
+        >
+          {elem.columns.map((elem, index) => (
+            <div
+              key={elem.displayName + elem.index}
+              style={{
+                paddingTop: theme.padding,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <div
+                title={elem.displayName}
+                // className="text-gray-500"
+                style={{
+                  fontSize: 12,
+                  //   color: theme.secondaryFontColor,
+                  whiteSpace: 'nowrap',
+                  color: theme.secondaryTextColor,
+                  // color: "#6C727F",
+                  padding: 0,
+                  margin: 0,
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  width: 200,
+                  maxWidth: 200,
+                }}
+              >
+                {elem.displayName}
+              </div>
+              <div
+                // className="text-gray-500"
+                title={elem.displayName}
+                style={{
+                  fontSize: 12,
+                  // color: '#6C727F',
+                  color: theme.secondaryTextColor,
+                  padding: 0,
+                  margin: 0,
+                }}
+              >
+                {elem.fieldType}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}