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

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

vogievetsky 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_r314573877
 
 

 ##########
 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:
   why is this being done on every prop change now?

----------------------------------------------------------------
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