Merge pull request #54 from luusluus/46-enable-sql-autocomplete-suggestions

46 enable sql autocomplete suggestions

Author: luusluus

media/index.html

@@ -27,6 +27,7 @@
     <script nonce="{{nonce}}" type="text/javascript" src="{{scripts}}/ace/src-min/theme-idle_fingers.js"></script>
     <script nonce="{{nonce}}" type="text/javascript" src="{{scripts}}/ace/src-min/theme-dawn.js"></script>
     <script nonce="{{nonce}}" type="text/javascript" src="{{scripts}}/ace/src-min/mode-sql.js"></script>
+    <script nonce="{{nonce}}" type="text/javascript" src="{{scripts}}/ace/src-min/ext-language_tools.js"></script>
 
 </head>
 

media/scripts/ace/src-min/ext-language_tools.js

@@ -204,7 +204,7 @@
                                     <path d="m15 15-4.5-4.5"></path>
                                 </svg>
                             </div>
-                            <input class="search-box" id="input-filter-values" type="text" placeholder="Search rows" disabled>
+                            <input class="search-box" id="input-filter-values" type="text" placeholder="Search rows in page" disabled>
                             <div class="clear-icon-element" id="clear-icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true" class="clear-icon">
                                     <path d="m2 2 12 12M14 2 2 14" stroke="#ffffff"></path>
@@ -291,7 +291,9 @@
         });
     }
 
-    function initCodeEditor(isQueryable, defaultQuery, shortCutMapping, aceTheme) {
+    function initCodeEditor(
+        isQueryable, defaultQuery, shortCutMapping, aceTheme, aceEditorCompletions
+    ) {
         const queryTabPanel = document.getElementById("query-tab-panel");
         if (!isQueryable) {
             const paragraph = document.createElement("p");
@@ -319,6 +321,21 @@
         editor.setTheme(aceTheme);
         editor.session.setMode("ace/mode/sql");        
         editor.setValue(defaultQuery);
+        
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+        });
+
+        const completer = {
+            getCompletions: function(editor, session, pos, prefix, callback) {
+                callback(null, aceEditorCompletions);
+            }
+        };
+
+        var langTools = ace.require("ace/ext/language_tools");
+        langTools.addCompleter(completer);
 
         editor.commands.addCommand({
             name: 'runQuery',
@@ -904,7 +921,8 @@
                         tableData.isQueryable, 
                         tableData.settings.defaultQuery,
                         tableData.settings.shortCutMapping,
-                        tableData.aceTheme
+                        tableData.aceTheme,
+                        tableData.aceEditorCompletions
                     );
 
                     currentPageDataTab = tableData.currentPage;

media/scripts/main.js

@@ -231,4 +231,13 @@ html, body {
 .dropdown-menu li span:hover {
     background-color: #ddd;
     font-weight: bolder;
-}
+}
+
+/* ace tooltip*/
+#doc-tooltip {
+    overflow-wrap: anywhere;
+    overflow-y: auto;
+    overflow-x: auto;
+    height: inherit;
+    min-width: 300px;
+}

media/styles/parquet-visualizer.css

@@ -23,7 +23,7 @@ export abstract class Backend {
           let result: any = [];
 
           if (field.type.children.length > 0) {
-            result =  [this.parseSchema(field.type.children[0])]
+            result =  [this.parseSchema(field.type.children[0])];
             return result;
           }
           return result;
@@ -50,9 +50,12 @@ export abstract class Backend {
     public getSchema(): any { 
         const parsedSchema = this.arrowSchema.fields.map((f, index) => {
             let parsedType = this.parseSchema(f);
+            let typeName = parsedType;
+            let typeValue = parsedType;
 
             if (typeof parsedType === 'object'){
                 parsedType = JSON.stringify(parsedType);
+                typeName = 'object';
             }
 
             if(f.metadata.size > 0) {
@@ -62,6 +65,8 @@ export abstract class Backend {
                 'index': index + 1,
                 'name': f.name,
                 'type': parsedType,
+                'typeName': typeName,
+                'typeValue': typeValue,
                 'nullable': f.nullable,
                 'metadata': JSON.stringify(f.metadata)
             };

src/backend.ts

@@ -414,6 +414,61 @@ export class ParquetEditorProvider implements vscode.CustomReadonlyEditorProvide
           throw Error(errorMessage);
       }
     }
+
+    getAceEditorCompletions(schema){
+      let formattedSchema: any = {};
+      for (const key in schema){
+        const columnName = schema[key].name;
+        const columnType = schema[key].typeValue;
+        
+        formattedSchema[columnName] = columnType;
+      }
+
+      function getCompletion(columnTypeValue: any, prevColumnName: string = ''){
+        let completions: any = {};
+        for (const key in columnTypeValue) {
+          if (!columnTypeValue.hasOwnProperty(key)) {
+            continue;
+          }
+
+          const newNamePrefix = prevColumnName ? `${prevColumnName}.${key}` : key;
+          
+          if (typeof columnTypeValue[key] === 'object' && !Array.isArray(columnTypeValue[key])) {
+            completions[newNamePrefix] = columnTypeValue[key];
+            
+            Object.assign(completions, getCompletion(columnTypeValue[key], newNamePrefix));
+
+          } else if (Array.isArray(columnTypeValue[key])) {
+            completions[newNamePrefix] = columnTypeValue[key];
+          }
+          else {
+            completions[newNamePrefix] = columnTypeValue[key];
+          }
+        }
+        return completions;
+      }
+
+      const completions = getCompletion(formattedSchema);
+      const aceEditorCompletions = Object.entries(completions).reverse().map((e, i) => {
+        let htmlForDataType: string;
+        if (typeof e[1] === 'object'){
+          htmlForDataType = `<pre>${JSON.stringify(e[1], undefined, 4)}</pre>`;
+        }
+        else {
+          htmlForDataType = `${e[1]}`;
+        }
+
+        let docHtml = `<strong>Name</strong> ${e[0]}<br><strong>Type</strong>: ${htmlForDataType}`;
+        return {
+          value: e[0],
+          score: i + 1000, // NOTE: just to get the column meta above the other meta.
+          meta: 'column',
+          docHTML: docHtml,
+        };
+      });
+
+      return aceEditorCompletions;
+    }
 
     /**
      * Called when our custom editor is opened.
@@ -469,6 +524,9 @@ export class ParquetEditorProvider implements vscode.CustomReadonlyEditorProvide
         const schema = document.backend.getSchema();
         const metadata = document.backend.getMetaData();
 
+        // get Code completions for the editor
+        const aceEditorCompletions = this.getAceEditorCompletions(schema);
+
         let aceTheme = '';
         if (vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Light) {
           aceTheme = 'ace/theme/dawn';
@@ -493,7 +551,8 @@ export class ParquetEditorProvider implements vscode.CustomReadonlyEditorProvide
             defaultPageSizes: defaultPageSizesFromSettings,
             shortCutMapping: shortCutMapping
           },
-          aceTheme: aceTheme
+          aceTheme: aceTheme,
+          aceEditorCompletions
         };
 
         // Wait for the webview to be properly ready before we init