[GitHub] [incubator-druid] mcbrewster commented on a change in pull request #8322: Web-console: gate auto complete on current table and schema

[GitBox <gi...@apache.org>]

mcbrewster commented on a change in pull request #8322: Web-console: gate auto complete on current table and schema
URL: https://github.com/apache/incubator-druid/pull/8322#discussion_r314801895
 
 

 ##########
 File path: web-console/src/views/query-view/query-input/query-input.tsx
 ##########
 @@ -25,45 +25,137 @@ import AceEditor from 'react-ace';
 import { SQL_DATE_TYPES, SQL_FUNCTIONS, SyntaxDescription } from '../../../../lib/sql-function-doc';
 import { uniq } from '../../../utils';
 import { ColumnMetadata } from '../../../utils/column-metadata';
-import { ColumnTreeProps, ColumnTreeState } from '../column-tree/column-tree';
 
 import { SQL_CONSTANTS, SQL_DYNAMICS, SQL_EXPRESSION_PARTS, SQL_KEYWORDS } from './keywords';
 
 import './query-input.scss';
 
 const langTools = ace.acequire('ace/ext/language_tools');
 
+function addFunctionAutoCompleter(): void {
+  if (!langTools) return;
+
+  const functionList: any[] = SQL_FUNCTIONS.map((entry: SyntaxDescription) => {
+    const funcName: string = entry.syntax.replace(/\(.*\)/, '()');
+    return {
+      value: funcName,
+      score: 80,
+      meta: 'function',
+      syntax: entry.syntax,
+      description: entry.description,
+      completer: {
+        insertMatch: (editor: any, data: any) => {
+          editor.completer.insertMatch({ value: data.caption });
+          const pos = editor.getCursorPosition();
+          editor.gotoLine(pos.row + 1, pos.column - 1);
+        },
+      },
+    };
+  });
+
+  langTools.addCompleter({
+    getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
+      callback(null, functionList);
+    },
+    getDocTooltip: (item: any) => {
+      if (item.meta === 'function') {
+        const functionName = item.caption.slice(0, -2);
+        item.docHTML = `
+<div class="function-doc">
+  <div class="function-doc-name">
+    <b>${escape(functionName)}</b>
+  </div>
+  <hr />
+  <div>
+    <b>Syntax:</b>
+  </div>
+  <div>${escape(item.syntax)}</div>
+  <br />
+  <div>
+    <b>Description:</b>
+  </div>
+  <div>${escape(item.description)}</div>
+</div>`;
+      }
+    },
+  });
+}
+
+function replaceDefaultAutoCompleter(): void {
+  if (!langTools) return;
+
+  const keywordList = ([] as any[]).concat(
+    SQL_KEYWORDS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+    SQL_EXPRESSION_PARTS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+    SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
+    SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
+    SQL_DATE_TYPES.map(v => ({ name: v.syntax, value: v.syntax, score: 0, meta: 'keyword' })),
+  );
+
+  const keywordCompleter = {
+    getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
+      return callback(null, keywordList);
+    },
+  };
+
+  langTools.setCompleters([langTools.snippetCompleter, langTools.textCompleter, keywordCompleter]);
+}
+
 export interface QueryInputProps {
   queryString: string;
   onQueryStringChange: (newQueryString: string) => void;
   runeMode: boolean;
   columnMetadata?: ColumnMetadata[];
+  currentSchema?: string;
+  currentTable?: string;
 }
 
 export interface QueryInputState {
   // For reasons (https://github.com/securingsincity/react-ace/issues/415) react ace editor needs an explicit height
   // Since this component will grown and shrink dynamically we will measure its height and then set it.
   editorHeight: number;
   prevColumnMetadata?: ColumnMetadata[];
+  prevCurrentTable?: string;
+  prevCurrentSchema?: string;
 }
 
 export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputState> {
-  static getDerivedStateFromProps(props: ColumnTreeProps, state: ColumnTreeState) {
-    const { columnMetadata } = props;
+  static getDerivedStateFromProps(props: QueryInputProps, state: QueryInputState) {
+    const { columnMetadata, currentSchema, currentTable } = props;
+
+    if (
+      columnMetadata &&
+      (columnMetadata !== state.prevColumnMetadata ||
+        currentSchema !== state.prevCurrentSchema ||
+        currentTable !== state.prevCurrentTable)
+    ) {
+      replaceDefaultAutoCompleter();
+      addFunctionAutoCompleter();
 
 Review comment:
   because if the table or schema changes I assumed we would also want to update the autocompleter. The default schema and table are coming from the ast that is only updated when you press run though.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org