@quillsql/react 1.7.5 → 1.7.6

package/src/SQLEditor.tsx

@@ -1,1093 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import React, { useState, useContext, useMemo, useEffect } from 'react';
-import MonacoEditor from '@monaco-editor/react';
-// import './nightOwlLight.css';
-import axios from 'axios';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  SparklesIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/20/solid';
-import { QuillTheme } from './QuillProvider';
-import { SpecialTable } from './Table';
-
-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 ButtonComponentProps {
-  onClick: () => void;
-  label: string;
-}
-
-interface SQLEditorProps {
-  containerStyle: React.CSSProperties;
-  ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-  SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-  TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
-  TableComponent?: (props: TableComponentProps) => JSX.Element;
-  AddToDashboardButton?: (props: AddToDashboardButtonProps) => JSX.Element;
-  LoadingComponent?: () => JSX.Element;
-}
-
-interface AddToDashboardButtonProps {
-  rows: any[];
-  columns: any[];
-  query: string;
-}
-
-interface TableComponentProps {
-  rows: any[];
-  columns: any[];
-  height: string;
-}
-
-interface TextInputComponentProps {
-  onChange: (e: any) => void;
-  value: string;
-  id: string;
-  placeholder?: string;
-}
-
-const QuillButton = ({
-  onClick,
-  label,
-  theme,
-  secondary,
-}: {
-  onClick: () => void;
-  label: string;
-  theme?: any;
-  secondary?: boolean;
-}) => (
-  <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}
-  >
-    {label}
-  </button>
-);
-
-const QuillTextInput = ({
-  onChange,
-  value,
-  id,
-  placeholder,
-  theme,
-}: {
-  onChange: (e: any) => void;
-  value: string;
-  id: string;
-  placeholder?: string;
-  theme?: any;
-}) => {
-  return (
-    <input
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingLeft: '12px',
-        paddingRight: '12px',
-        fontWeight: 'medium',
-        height: 36,
-        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
-        width: '445px',
-        backgroundColor: theme?.backgroundColor || 'white',
-        color: theme?.primaryTextColor,
-        borderWidth: '1px',
-        borderColor: theme?.borderColor || '#E7E7E7',
-        borderStyle: 'solid',
-        borderRadius: '6px',
-      }}
-      id={id}
-      onChange={onChange}
-      value={value}
-      placeholder={placeholder}
-    />
-  );
-};
-
-export default function QueryEditor({
-  containerStyle = { height: '100vh' },
-  ButtonComponent,
-  SecondaryButtonComponent,
-  TextInputComponent,
-  TableComponent,
-  AddToDashboardButton,
-  LoadingComponent,
-}: SQLEditorProps) {
-  const [sqlPrompt, setSqlPrompt] = useState('');
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [client] = useContext(ClientContext);
-  const [theme] =
-    useContext<[QuillTheme, (theme: QuillTheme) => void]>(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);
-  const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
-  const [schemaLoading, setSchemaLoading] = useState(false);
-
-  useEffect(() => {
-    let isSubscribed = true;
-    async function getSchema() {
-      const { publicKey, environment } = client;
-      setSchemaLoading(true);
-      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);
-        setSchemaLoading(false);
-      }
-    }
-    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,
-      queryEndpoint,
-      queryHeaders,
-      withCredentials,
-    } = client;
-    try {
-      let response;
-      setSqlQueryLoading(true);
-      if (queryEndpoint) {
-        response = await axios.post(
-          queryEndpoint,
-          { metadata: { query, task: 'query' } },
-          { headers: queryHeaders, withCredentials }
-        );
-      } else {
-        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) {
-        setSqlQueryLoading(false);
-        setErrorMessage(
-          'Failed to run SQL query: ' + response.data.errorMessage
-        );
-        setRows([]);
-        setColumns([]);
-        setFields([]);
-        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 = () => {
-    setIsOpen(true);
-  };
-
-  /* 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}
-              LoadingComponent={LoadingComponent}
-              loading={schemaLoading}
-            />
-
-            <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',
-                    fontFamily: theme?.fontFamily,
-                  }}
-                >
-                  <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',
-                      fontFamily: theme?.fontFamily,
-                    }}
-                  />
-                </div> */}
-                <div style={{ minWidth: 440, marginRight: 10 }}>
-                  {(TextInputComponent && (
-                    <TextInputComponent
-                      id="ai-search"
-                      value={sqlPrompt}
-                      onChange={e => setSqlPrompt(e.target.value)}
-                      placeholder="Ask a question..."
-                    />
-                  )) || (
-                    <QuillTextInput
-                      id="ai-search"
-                      value={sqlPrompt}
-                      onChange={e => setSqlPrompt(e.target.value)}
-                      placeholder="Ask a question..."
-                      theme={theme}
-                    />
-                  )}
-                </div>
-                {(ButtonComponent && (
-                  <ButtonComponent
-                    onClick={handleRunSqlPrompt}
-                    label="Ask AI"
-                  />
-                )) || (
-                  <QuillButton
-                    theme={theme}
-                    onClick={handleRunSqlPrompt}
-                    label="Ask AI"
-                  />
-                )}
-              </div>
-              <div style={{ height: 'calc(50% - 40px)' }}>
-                <SQLEditorComponent
-                  query={query}
-                  setQuery={setQuery}
-                  handleRunQuery={handleRunQuery}
-                  theme={theme}
-                  defineEditorTheme={defineEditorTheme}
-                  setEditorTheme={setEditorTheme}
-                  ButtonComponent={ButtonComponent}
-                  loading={sqlResponseLoading}
-                  LoadingComponent={LoadingComponent}
-                />
-              </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,
-                        color: theme?.primaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                      }}
-                    >
-                      {errorMessage}
-                    </div>
-                  </div>
-                )}
-                {errorMessage
-                  ? null
-                  : (TableComponent && (
-                      <TableComponent
-                        rows={rows}
-                        columns={columns}
-                        height="calc(100% - 70px)"
-                      />
-                    )) || (
-                      <SpecialTable
-                        rows={rows}
-                        columns={columns}
-                        height="calc(100% - 70px)"
-                        LoadingComponent={LoadingComponent}
-                        loading={sqlQueryLoading}
-                        theme={theme}
-                      />
-                    )}
-                <div
-                  style={{
-                    height: 70,
-                    // TODO: change color
-                    background: theme?.backgroundColor,
-                  }}
-                >
-                  {rows.length ? (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: 70,
-                        border: 'none',
-                      }}
-                    >
-                      <div
-                        style={{
-                          height: 1,
-                          width: '100%',
-                          // TODO: change color
-                          // background: theme.borderColor,
-                        }}
-                      />
-                      <div
-                        style={{
-                          marginLeft: 0,
-                          height: 69,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'flex-end',
-                          paddingRight: 20,
-                        }}
-                      >
-                        {/* <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,
-                            fontFamily: theme.fontFamily,
-                            outline: 'none',
-                            border: 'none',
-                            cursor: 'pointer',
-                            marginTop: 14,
-                          }}
-                        >
-                          Download CSV
-                        </button> */}
-                        {(SecondaryButtonComponent && (
-                          <SecondaryButtonComponent
-                            onClick={downloadCSV}
-                            label="Download CSV"
-                          />
-                        )) || (
-                          <QuillButton
-                            theme={theme}
-                            onClick={downloadCSV}
-                            label="Download CSV"
-                            secondary
-                          />
-                        )}
-                        {AddToDashboardButton && <div style={{ width: 10 }} />}
-                        {AddToDashboardButton && (
-                          <AddToDashboardButton
-                            // @ts-ignore
-                            rows={rows}
-                            columns={columns}
-                            query={query}
-                          />
-                        )}
-                        <div />
-                      </div>
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const SQLEditorComponent = ({
-  query,
-  setQuery,
-  handleRunQuery,
-  defineEditorTheme,
-  setEditorTheme,
-  ButtonComponent,
-  theme,
-  loading,
-  LoadingComponent,
-}) => {
-  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',
-      }}
-    >
-      {loading ? (
-        <div
-          style={{
-            height: 'calc(100% - 70px)',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: '#F9F9F9',
-          }}
-        >
-          {LoadingComponent && <LoadingComponent />}
-          {!LoadingComponent && (
-            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-              <defs>
-                <linearGradient
-                  id="circleGradient"
-                  gradientUnits="objectBoundingBox"
-                >
-                  <stop offset="0%" stop-color="#F9F9FA" />
-                  <stop offset="5%" stop-color="#F9F9FA" />
-                  <stop offset="100%" stop-color="#D1D1D1" />
-                </linearGradient>
-                <mask id="mask">
-                  <circle cx="12" cy="12" r="12" fill="white" />
-                  <path
-                    id="sector"
-                    fill="black"
-                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
-                  >
-                    <animate
-                      attributeName="d"
-                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
-                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
-                      dur="2s"
-                      repeatCount="indefinite"
-                    />
-                  </path>
-                </mask>
-              </defs>
-              <g transform="rotate(0 15 15)">
-                <animateTransform
-                  attributeName="transform"
-                  attributeType="XML"
-                  type="rotate"
-                  from="0 12 12"
-                  to="360 12 12"
-                  dur="2s"
-                  repeatCount="indefinite"
-                />
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="12"
-                  fill="none"
-                  stroke="url(#circleGradient)"
-                  stroke-width="8"
-                  mask="url(#mask)"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
-      ) : (
-        <MonacoEditor
-          height="calc(100% - 70px)"
-          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: 70,
-        }}
-      >
-        {/* <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,
-            fontFamily: theme.fontFamily,
-            outline: 'none',
-            border: 'none',
-            cursor: 'pointer',
-          }}
-        >
-          Run query
-        </button> */}
-        {(ButtonComponent && (
-          <ButtonComponent onClick={handleRunQuery} label="Run query" />
-        )) || (
-          <QuillButton
-            onClick={handleRunQuery}
-            label="Run query"
-            theme={theme}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-const styles = {
-  columnHeader: {
-    boxSizing: 'border-box',
-    flex: '150 0 auto',
-    minWidth: '50px',
-    width: '150px',
-    position: 'relative',
-    cursor: 'pointer',
-    background: 'rgb(249, 250, 251)',
-    borderRight: '1px solid rgb(229, 231, 235)',
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    alignItems: 'center',
-    overflowX: 'visible',
-    margin: '0px',
-    textOverflow: 'ellipsis',
-    minHeight: '36px',
-    // 2.25rem * 16px = 36px
-  },
-  columnHeaderLabel: {
-    fontFamily:
-      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-    WebkitTapHighlightColor: 'transparent',
-    color: 'rgb(55, 65, 81)',
-    textDecoration: 'none',
-    fontWeight: 500,
-    fontSize: '14px', // 0.875rem * 16px = 14px
-    lineHeight: '20px', // 1.25rem * 16px = 20px
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-};
-
-const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
-  if (loading) {
-    return (
-      <div
-        style={{
-          background: theme.backgroundColor,
-          // maxHeight: 700,
-          width: 250,
-          minWidth: 250,
-          // overflowY: 'scroll',
-          height: '100%',
-          // maxHeight: "100%",
-          paddingLeft: 20,
-          paddingRight: 30,
-          paddingTop: 40,
-          display: 'flex',
-          // alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <div style={{ height: 100 }} />
-        {LoadingComponent && <LoadingComponent />}
-        {!LoadingComponent && (
-          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-            <defs>
-              <linearGradient
-                id="circleGradient"
-                gradientUnits="objectBoundingBox"
-              >
-                <stop offset="0%" stop-color="#F9F9FA" />
-                <stop offset="5%" stop-color="#F9F9FA" />
-                <stop offset="100%" stop-color="#D1D1D1" />
-              </linearGradient>
-              <mask id="mask">
-                <circle cx="12" cy="12" r="12" fill="white" />
-                <path
-                  id="sector"
-                  fill="black"
-                  d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
-                >
-                  <animate
-                    attributeName="d"
-                    from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
-                    to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
-                    dur="2s"
-                    repeatCount="indefinite"
-                  />
-                </path>
-              </mask>
-            </defs>
-            <g transform="rotate(0 15 15)">
-              <animateTransform
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                from="0 12 12"
-                to="360 12 12"
-                dur="2s"
-                repeatCount="indefinite"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="12"
-                fill="none"
-                stroke="url(#circleGradient)"
-                stroke-width="8"
-                mask="url(#mask)"
-              />
-            </g>
-          </svg>
-        )}
-      </div>
-    );
-  }
-  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',
-            fontFamily: theme?.fontFamily,
-          }}
-          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,
-                  fontFamily: theme?.fontFamily,
-                }}
-              >
-                {elem.displayName}
-              </div>
-              <div
-                // className="text-gray-500"
-                title={elem.displayName}
-                style={{
-                  fontSize: 12,
-                  // color: '#6C727F',
-                  color: theme.secondaryTextColor,
-                  padding: 0,
-                  margin: 0,
-                  fontFamily: theme?.fontFamily,
-                }}
-              >
-                {elem.fieldType}
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}