Эх сурвалжийг харах

[frontend] Add the remaining scratchpad components to the SQL Scratchpad example

Johan Ahlen 4 жил өмнө
parent
commit
219f34199c

+ 1 - 0
tools/examples/components/sql-scratchpad/.env

@@ -1 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
+DISABLE_NEW_JSX_TRANSFORM=true

+ 8 - 1
tools/examples/components/sql-scratchpad/src/App.css

@@ -1,7 +1,6 @@
 .app {
   height: 100%;
   background-color: #282c34;
-  text-align: center;
   display: flex;
   flex-direction: column;
 }
@@ -10,11 +9,16 @@
   flex: 0 0 32px;
   background-color: #282c34;
   align-items: center;
+  text-align: center;
   justify-content: center;
   font-size: 25px;
   color: white;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .app > .ace-editor {
   flex: 0 1 50%;
   position: relative;
@@ -36,12 +40,15 @@
 
 .app > .executable-progress-bar {
   flex: 1;
+  padding: 5px;
 }
 
 .app > .executable-actions {
   flex: 1;
+  padding: 5px;
 }
 
 .app > .result-table {
   flex: 0 1 50%;
+  padding: 5px;
 }

+ 2 - 28
tools/examples/components/sql-scratchpad/src/App.tsx

@@ -1,21 +1,6 @@
 import React from 'react';
 import './App.css';
-import Executor from "gethue/lib/execution/executor";
-import { QueryEditor } from "./components/QueryEditor";
-import { ExecuteActions } from "./components/ExecuteActions";
-import { ExecuteProgress } from "./components/ExecuteProgress";
-import { ResultTable } from "./components/ResultTable";
-
-const executor = new Executor({
-  compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
-  connector: (() => ({
-    dialect: 'hive',
-    id: 'hive',
-    is_sql: true
-  })) as KnockoutObservable<any>,
-  database: (() => 'default') as KnockoutObservable<any>,
-  namespace: (() => ({ id: 'default' })) as KnockoutObservable<any>,
-});
+import { SqlScratchpad } from "./components/SqlScratchpad";
 
 function App() {
   return (
@@ -25,18 +10,7 @@ function App() {
           SQL Scratchpad Example
         </p>
       </header>
-      <div className="ace-editor">
-        <QueryEditor executor={ executor } />
-      </div>
-      <div className="executable-progress-bar">
-        <ExecuteProgress />
-      </div>
-      <div className="executable-actions">
-        <ExecuteActions />
-      </div>
-      <div className="result-table">
-        <ResultTable />
-      </div>
+      <SqlScratchpad />
     </div>
   );
 }

+ 19 - 6
tools/examples/components/sql-scratchpad/src/components/ExecuteActions.tsx

@@ -1,16 +1,29 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
+import Executable from 'gethue/src/apps/editor/execution/executable';
 
-export const ExecuteActions: FC = () => {
-  const newNode = document.createElement('span');
-  newNode.innerText = 'ExecuteActions';
+export interface ExecuteActionsProps {
+  activeExecutable?: Executable
+}
+
+interface ExecuteActionsElement extends HTMLElement {
+  executable?: Executable;
+}
+
+export const ExecuteActions: FC<ExecuteActionsProps> = ({ activeExecutable }) => {
+  const newNode = document.createElement('query-editor-actions');
+  newNode.setAttribute('executable', '');
+  (newNode as ExecuteActionsElement).executable = activeExecutable;
 
   return <div
     ref={
-      (nodeElement: HTMLDivElement | null) => {
-        nodeElement && nodeElement.appendChild(newNode)
+      (element: HTMLDivElement | null) => {
+        if (element) {
+          element.innerHTML = '';
+          element.appendChild(newNode);
+        }
       }
     }
   />
-}
+};

+ 19 - 6
tools/examples/components/sql-scratchpad/src/components/ExecuteProgress.tsx

@@ -1,16 +1,29 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
+import Executable from 'gethue/src/apps/editor/execution/executable';
 
-export const ExecuteProgress: FC = () => {
-  const newNode = document.createElement('span');
-  newNode.innerText = 'ExecuteProgress';
+export interface ExecuteProgressProps {
+  activeExecutable?: Executable
+}
+
+interface ProgressBarElement extends HTMLElement {
+  executable?: Executable;
+}
+
+export const ExecuteProgress: FC<ExecuteProgressProps> = ({ activeExecutable }) => {
+  const newNode = document.createElement('query-editor-progress-bar');
+  newNode.setAttribute('executable', '');
+  (newNode as ProgressBarElement).executable = activeExecutable;
 
   return <div
     ref={
-      (nodeElement: HTMLDivElement | null) => {
-        nodeElement && nodeElement.appendChild(newNode)
+      (element: HTMLDivElement | null) => {
+        if (element) {
+          element.innerHTML = '';
+          element.appendChild(newNode)
+        }
       }
     }
   />
-}
+};

+ 37 - 2
tools/examples/components/sql-scratchpad/src/components/QueryEditor.tsx

@@ -5,7 +5,9 @@ import 'gethue/lib/components/query-editor-components';
 import hiveSyntaxParser from 'gethue/lib/parsers/hiveSyntaxParser';
 import hiveAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
 import Executor from 'gethue/lib/execution/executor';
+import Executable from 'gethue/src/apps/editor/execution/executable';
 import { SetOptions, SqlReferenceProvider, UdfCategory } from 'gethue/src/sql/reference/types'
+import { ActiveStatementChangedEvent } from 'gethue/src/apps/editor/components/aceEditor/types';
 
 const sqlReferenceProvider: SqlReferenceProvider = {
   async getReservedKeywords(dialect: string): Promise<Set<string>> {
@@ -39,22 +41,55 @@ interface QueryEditorElement extends HTMLElement {
 
 interface QueryEditorProps {
   executor: Executor;
+  id?: string; // Set a unique ID to allow multiple query editors on one page
+  setActiveExecutable(executable: Executable): void;
 }
 
-export const QueryEditor: FC<QueryEditorProps> = ({ executor }) => {
+export const QueryEditor: FC<QueryEditorProps> = ({ executor, id, setActiveExecutable }) => {
   const nodeElement = document.createElement('query-editor') as QueryEditorElement;
   nodeElement.setAttribute('hue-base-url', 'http://localhost:8888');
   nodeElement.setAttribute('executor', '');
   nodeElement.setAttribute('sql-parser-provider', '');
   nodeElement.setAttribute('sql-reference-provider', '');
+
+  nodeElement.setAttribute('id', id || 'some-id');
   nodeElement.executor = executor;
   nodeElement['sql-parser-provider'] = sqlAutocompleteProvider;
   nodeElement['sql-reference-provider'] = sqlReferenceProvider;
 
+  nodeElement.addEventListener('active-statement-changed', event => {
+    const activeStatementChangedEvent = event as ActiveStatementChangedEvent;
+    executor.update(activeStatementChangedEvent.detail, false);
+    setActiveExecutable(executor.activeExecutable);
+  })
+  
+  //nodeElement.addEventListener('value-changed', event => {
+  //  // event.detail contains the value
+  //})
+
+  // nodeElement.addEventListener('create-new-doc', () => {
+  //   // Triggered when the user presses ctrl+n
+  // })
+
+  // nodeElement.addEventListener('save-doc', () => {
+  //   // Triggered when the user presses ctrl+s
+  // })
+
+  // nodeElement.addEventListener('ace-created', event => {
+  //   // event.detail contains the Ace editor instance
+  // })
+
+  // nodeElement.addEventListener('cursor-changed', event => {
+  //   // event.detail contains the cursor position
+  // })
+
   return <div className={ 'query-editor-wrapper' }
     ref={
       element => {
-        element?.append(nodeElement);
+        if (element) {
+          element.innerHTML = '';
+          element.append(nodeElement);
+        }
       }
     }
   />;

+ 18 - 5
tools/examples/components/sql-scratchpad/src/components/ResultTable.tsx

@@ -1,15 +1,28 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
+import Executable from 'gethue/src/apps/editor/execution/executable';
 
-export const ResultTable: FC = () => {
-  const newNode = document.createElement('span');
-  newNode.innerText = 'ResultTable'
+export interface ResultTableProps {
+  activeExecutable?: Executable
+}
+
+interface ResultTableElement extends HTMLElement {
+  executable?: Executable;
+}
+
+export const ResultTable: FC<ResultTableProps> = ({ activeExecutable }) => {
+  const newNode = document.createElement('query-editor-result-table');
+  newNode.setAttribute('executable', '');
+  (newNode as ResultTableElement).executable = activeExecutable;
 
   return <div
     ref={
-      (nodeElement: HTMLDivElement | null) => {
-        nodeElement && nodeElement.appendChild(newNode)
+      (element: HTMLDivElement | null) => {
+        if (element) {
+          element.innerHTML = '';
+          element.appendChild(newNode)
+        }
       }
     }
   />

+ 41 - 0
tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx

@@ -0,0 +1,41 @@
+import React, {FC, useState} from 'react';
+
+import 'gethue/lib/components/query-editor-components';
+
+import Executor from 'gethue/lib/execution/executor';
+
+import { QueryEditor } from './QueryEditor';
+import { ExecuteActions } from './ExecuteActions';
+import { ExecuteProgress } from './ExecuteProgress';
+import { ResultTable } from './ResultTable';
+import Executable from 'gethue/src/apps/editor/execution/executable';
+
+const executor = new Executor({
+  compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
+  connector: (() => ({
+    dialect: 'hive',
+    id: 'hive',
+    is_sql: true
+  })) as KnockoutObservable<any>,
+  database: (() => 'default') as KnockoutObservable<any>,
+  namespace: (() => ({ id: 'default' })) as KnockoutObservable<any>,
+});
+
+export const SqlScratchpad: FC = () => {
+  const [activeExecutable, setActiveExecutable] = useState<Executable | undefined>(undefined);
+
+  return <React.Fragment>
+    <div className="ace-editor">
+      <QueryEditor executor={executor} setActiveExecutable={setActiveExecutable}/>
+    </div>
+    <div className="executable-progress-bar">
+      <ExecuteProgress activeExecutable={activeExecutable}/>
+    </div>
+    <div className="executable-actions">
+      <ExecuteActions/>
+    </div>
+    <div className="result-table">
+      <ResultTable/>
+    </div>
+  </React.Fragment>
+};

+ 1 - 1
tools/examples/components/sql-scratchpad/tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react"
   },
   "include": [
     "src"