Autocompletes

Similar to a search engine, the suggestions come from several weighted sources:

  • Parser
  • Analyser
  • Predict

“Compose”

“Compose”

Autocompletes

The core autocomplete logic has three components:

  • Parse: split the editor content in small tokens to know exactly where we are and what we could suggest based on the language grammar
  • Update: build all suggestions by combining the parser result with available schema and language references
  • Rank: filter & sort suggestions, which is done each time the user changes the filter prefix

In addition to the core logic, there are other UI behaviors for autocomplete:

  • Conditions to trigger autocomplete
  • Insertion points
  • Suggestion detail panel
  • Determining all available suggestion catagories and allowing the user to filter by category
  • …

Suggestion sources

  • Keywords
  • Schema (catalogs, databases, tables, columns, and sample values)
  • Functions
  • Function argument sample values
  • Function documentation
  • Code Snippets
  • Dialect keywords
  • Popular values
  • User-defined query Snippets

Architecture

“Autocomplete Architecture”

The user-facing component is AceAutocomplete.ce.vue, which handles autocomplete-related mouse events and key bindings, computes the autocomplete suggestions from the editor text, and renders the autocomplete suggestions list component. It also handles insertion points.

There are two types of autocomplete suggestions. Query snippets are user-defined shortcuts that we can simply fetch from the network API, which is done by QuerySnippetsAutocompleter. All other suggestions require parsing the query text and are handled by SqlAutocompleter.

  1. The sqlStatementsParser parses the entire text to determine what the statements are, what their locations and lengths are, and whether they are a USE database statement.
  2. AceLocationHandler decides which is the current statement and passes that to SqlAutocompleter.
  3. SqlAutocompleter contains an instance of an AutocompleteParser and a SyntaxAutocompleter. It uses the statements parse results to tell the autocomplete parser what to parse.
  4. The autocomplete parser generates the parse results from the statement.
  5. The syntax autocompleter uses the parse results to generate the suggestions. To compute the suggestions it needs to incorporate information from the schema and language references including built-in functions from the script mentioned in the language references section.
  6. Once the list of suggestions is computed they are filtered and sorted using functions from sqlUtils.
  7. The detail panel next to the suggestions list is delegated to various other components.

Unit Testing

Unit tests cover most of the major steps of autocomplete.

  • QuerySnippetsAutocompleter.test tests the query snippets handling.
  • sqlStatementsParser.test tests that the statements are correctly parsed by the sqlStatementsParser.
  • AceLocationHandler.test tests that the statements parse results are correctly processed to get the active statement and the USE database pertinent to it.
  • SqlAutocompleter.test makes sure SqlAutocompleter correctly delegates the right text to the autocomplete parser.
  • dbsqlAutocompleteParser.test verifies the autocomplete parse results.
  • SyntaxAutocompleter.test verifies that the correct suggestions are generated from the parse results.
  • sqlUtils.test checks that suggestion filtering and sorting are correct.
  • insertionPoints.test tests insertion-point-related util functions.

There is currently no coverage for the logic in AceAutocomplete.ce.vue.

Bring your own

There is also a RemoteAutocompleter which allows the wrapper component to specify its own autocompleter, by passing it into the languageApi prop. In addition, the component also surfaces the monaco.languages reference, but it is recommended to use languageApi instead so the component can include its own handling.

Analysers

WIP

Predict

ML or heuristic based.

WIP