feat(hubble): support highlighting and hints in query statements (#384)

hugegraph-hubble/hubble-fe/src/components/graph-management/data-analyze/GremlinKeyWords.ts

@@ -0,0 +1,28 @@
+export const keywords =
+  'g|V|E|has|open|close|inV|inE|out|outV|outE|label|store|next|addVertex|clazz|' +
+  'limit|traversal|withBulk|values|schema|except|ifNotExist|addEdge|addVertex|property|io|' +
+  'filter|loops|readGraph|tree|properties|graph|value|bothE|addV|where|hidden|bothV|without' +
+  'both|is|path|it|get|from|to|select|otherV|within|inside|outside|withSack';
+
+export const buildinFunctions =
+  'targetLabel|sourceLabel|indexLabel|indexLabels|edgeLabel|vertexLabel|propertyKey|getPropertyKey|' +
+  'getVertexLabel|getEdgeLabel|getIndexLabel|getPropertyKeys|getVertexLabels|getEdgeLabels|getIndexLabels|' +
+  'coin|count|coalesce|createIndex|hasLabel|getLabelId|create|build|append|eliminate|remove|rebuildIndex|' +
+  'constant|isDirected|desc|inject|profile|simplePath|eq|neq|gt|gte|lt|lte|queryType|indexFields|frequency|' +
+  'links|type|in|on|by|checkDataType|checkValue|validValue|secondary|drop|search|makeEdgeLabel|cyclicPath|' +
+  'hasKey|match|sack|aggregate|between|baseType|baseValue|indexType|rebuild|choose|aggregate|iterate|lte|dedup|' +
+  'identity|groupCount|until|barrier|fold|unfold|schemaId|checkName|makeIndexLabel|makeVertexLabel|makePropertyKey|' +
+  'sideEffect|hasNext|toList|toSet|cap|option|branch|choose|repeat|emit|order|mean|withComputer|subgraph|' +
+  'getObjectsAtDepth|hasValue|hasNot|hasId|nullableKey|nullableKeys|sortKeys|link|singleTime|multiTimes|' +
+  'enableLabelIndex|userdata|checkExist|linkWithLabel|directed|idStrategy|primaryKeys|primaryKey';
+
+export const dataTypes =
+  'int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|toString|primitive|' +
+  'money|real|number|integer|asInt|asText|dataType|cardinality|asText|asInt|asTimestamp|flatMap|valueMap|' +
+  'asByte|asBlob|asDouble|asDate|asFloat|asLong|valueSingle|asBoolean|valueList|valueSet|asUuid|null|Infinity|NaN|undefined';
+
+export const baseData = [
+  ...keywords.split('|'),
+  ...buildinFunctions.split('|'),
+  ...dataTypes.split('|')
+];

hugegraph-hubble/hubble-fe/src/components/graph-management/data-analyze/QueryAndAlgorithmLibrary.tsx

@@ -15,6 +15,10 @@ import { Button, Tooltip, Alert, Dropdown } from 'hubble-ui';
 import 'codemirror/lib/codemirror.css';
 import 'react-popper-tooltip/dist/styles.css';
 import 'codemirror/addon/display/placeholder';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/hint/show-hint.js';
+import 'codemirror/addon/hint/sql-hint.js';
 
 import { Tooltip as CustomTooltip } from '../../common';
 import Favorite from './common/Favorite';
@@ -41,6 +45,7 @@ import PersonalRank from './algorithm/PersonalRank';
 import ArrowIcon from '../../../assets/imgs/ic_arrow_16.svg';
 import QuestionMarkIcon from '../../../assets/imgs/ic_question_mark.svg';
 import { Algorithm } from '../../../stores/factory/dataAnalyzeStore/algorithmStore';
+import { baseData } from './GremlinKeyWords';
 
 export const styles = {
   primaryButton: {
@@ -51,7 +56,6 @@ export const styles = {
     margin: '16px 0'
   }
 };
-
 const codeRegexp = /[A-Za-z0-9]+/;
 
 const QueryAndAlgorithmLibrary: React.FC = observer(() => {
@@ -191,13 +195,36 @@ export const GremlinQuery: React.FC = observer(() => {
     isLoading: dataAnalyzeStore.requestStatus.fetchGraphs === 'pending'
   });
 
+  const handleShowHint = (cm: any) => {
+    var cursor = cm.getCursor(),
+      line = cm.getLine(cursor.line);
+    var start = cursor.ch,
+      end = cursor.ch;
+    while (start && /\w/.test(line.charAt(start - 1))) --start;
+    while (end < line.length && /\w/.test(line.charAt(end))) ++end;
+    var word = line.slice(start, end).toLowerCase();
+    const list = baseData.filter(function (el) {
+      return el.toLowerCase().indexOf(word) > -1;
+    });
+    return {
+      list: list,
+      from: { ch: start, line: cursor.line },
+      to: { ch: end, line: cursor.line }
+    };
+  };
   useEffect(() => {
     codeEditor.current = CodeMirror.fromTextArea(
       codeContainer.current as HTMLTextAreaElement,
       {
         lineNumbers: true,
         lineWrapping: true,
-        placeholder: t('addition.operate.input-query-statement')
+        mode: { name: 'text/x-mysql' },
+        extraKeys: { Ctrl: 'autocomplete' },
+        placeholder: t('addition.operate.input-query-statement'),
+        hintOptions: {
+          completeSingle: false,
+          hint: handleShowHint
+        }
       }
     );