“Compose”

Compose is an Universal code Editor toolkit for providing a Cell Editor specialized in querying data.

It follows 10 years of evolution of the Hue Editor into reusable components aiming at providing modern suggestions. Think “Gmail editor with auto correct / multi language and reusability in Google Document, but for typing SQL or snippets of code”.

Editor Component in DBSQL

Compose is more than a query box, it is the glue between swappable components meshing together a smart Cell Editor:

  • The main goal is Plug & Play: swap your query box / text area in a few lines into a real editor
  • The Cell Editor is leveraging Web Code Editors like Ace (and soon either Code Mirror or Monaco) for typical functionalities (undo, toggle, shortcuts, show warning tooltips somewhere…)
  • Autocompletes & Analysers are the brains for calcultating the information (where should we highlight errors, which auto fix should we propose…) that will make a difference in assisting your users. They are reusable, can be combined together or even swapped with your owns.

“Editor Architecture”

Features

Autocomplete

“Compose”

Highlighting

“Compose”

Multi Statements

“Compose”

Demo App

That’s what you want, fully local and running. In less than 1 minute and 4 commands:

Compose

Dialects

Compose specializes in SQL languages but fits any typical cell editing flow:

  • DBSQL (SparkSql)
  • Apache Hive
  • Apache Impala
  • Apache Phoenix
  • Apache Flink
  • Ksql

The assistance will fall back to the ones of the base editor (e.g. Ace highlighter/autocomplete) and lets you plug-in your owns (e.g. hook-in your Jedi based autocomplete API for Python):

  • Python (PySpark)
  • Scala
  • Markdown

Currently the dbsql dialect is the default one activated, but many other SQL parsers are available:

Those dialects would be welcomed back in the Compose repository with some slight refactoring of the dialect repository API so that they are 100% pluggable. Some approaches could be to host them in a compose-dialects repository and provide some kind of yarn build:hive,dbsql and later npm install queryflow[hive,dbsql]. Feel free to reach out!

Package

Published as https://www.npmjs.com/package/queryflow

<html>
<head>
  <script type="text/javascript" src="./node_modules/queryflow/lib/components/QueryEditorWebComponent.js"></script>
</head>

<body>
  <div>
    <QueryEditor
      dialect="dbsql"
      api={api}
    />
  </div>
</body>

</html>

Read more in Components.