sqlui 0.1.40 → 0.1.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69e4dde0aaa2c01991a06d6ac073494c10a22b6f55b4f40d0a7dedc5f5ab2e7a
-  data.tar.gz: 5321247d38c5845e5398b8cb6560e6581a389bac11cf9ea06e5ace893c7f0b5d
+  metadata.gz: 1bf6c0615e6ef20a8ccdb39cb45a50dbc1ce2a5ed465f0c92de054d63577c27b
+  data.tar.gz: ff7a3de7803138292bf86594ce224c09557156189486212d5aee0b83447d8553
 SHA512:
-  metadata.gz: 032dc0a5c4a53e8273b2cf9f2916dd3d322d2c10c2e3ccf9a067471cb029bdeed34c22889071220da9d91f83e4e3976c90ef2eeb8327c84a0de88675e60e9f33
-  data.tar.gz: 7a39174c4c5b2b19cd0adf03a51a522c40b577cac9cd16bfcce1cd32ede24816aa292cc8388d960172853c06420b56bba8193320650c5fa8bf26b40ebdabe3df
+  metadata.gz: 9db790262959d363d28b658148931b3e98aedb03f4f728f3c0a268e111a6d9b038b591949680bc5abf3dcf1118652d0cc4489109a478c4527bdb951590e49e35
+  data.tar.gz: 9771a25e3c63baeeb5fc3a8d71b275496c96656f2f12fac2996d17b2fc8a82b1666932d1b8fc11757bf2b54666f03eec2173cbcb11de420e7e72be8e8a2609b5

data/.version

@@ -1 +1 @@
-0.1.40
+0.1.42

data/app/args.rb

@@ -24,6 +24,10 @@ class Args
     fetch_optional(hash, key, Hash)
   end
 
+  def self.fetch_optional_array(hash, key)
+    fetch_optional(hash, key, Array)
+  end
+
   def self.fetch_non_nil(hash, key, *classes)
     raise ArgumentError, "required parameter #{key} missing" unless hash.key?(key)
 

data/app/database_config.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require 'json'
 require 'mysql2'
 require 'set'
 
@@ -7,7 +8,7 @@ require_relative 'args'
 
 # Config for a single database.
 class DatabaseConfig
-  attr_reader :display_name, :description, :url_path, :saved_path, :table_aliases, :client_params
+  attr_reader :display_name, :description, :url_path, :joins, :saved_path, :table_aliases, :client_params
 
   def initialize(hash)
     @display_name = Args.fetch_non_empty_string(hash, :display_name).strip
@@ -17,6 +18,15 @@ class DatabaseConfig
     raise ArgumentError, 'url_path should not end with a /' if @url_path.length > 1 && @url_path.end_with?('/')
 
     @saved_path = Args.fetch_non_empty_string(hash, :saved_path).strip
+    @joins = Args.fetch_optional_array(hash, :joins) || []
+    @joins.map do |join|
+      next if join.is_a?(Hash) &&
+              join.keys.size == 2 &&
+              join[:label].is_a?(String) && !join[:label].strip.empty? &&
+              join[:apply].is_a?(String) && !join[:apply].strip.empty?
+
+      raise ArgumentError, "invalid join #{join.to_json}"
+    end
     @table_aliases = Args.fetch_optional_hash(hash, :table_aliases) || {}
     @table_aliases = @table_aliases.each do |table, a|
       raise ArgumentError, "invalid alias for table #{table} (#{a}), expected string" unless a.is_a?(String)

data/app/database_metadata.rb

@@ -38,18 +38,17 @@ class DatabaseMetadata
             extra
           from information_schema.columns
           #{where_clause}
-          order by table_schema, table_name, column_name, ordinal_position;
+          order by table_schema, table_name, ordinal_position;
         SQL
       )
-      column_result.each do |row|
-        row = row.transform_keys(&:downcase).transform_keys(&:to_sym)
-        table_schema = row[:table_schema]
+      column_result.to_a.each do |row|
+        table_schema = row.shift
         unless result[table_schema]
           result[table_schema] = {
             tables: {}
           }
         end
-        table_name = row[:table_name]
+        table_name = row.shift
         tables = result[table_schema][:tables]
         unless tables[table_name]
           tables[table_name] = {
@@ -58,16 +57,16 @@ class DatabaseMetadata
           }
         end
         columns = result[table_schema][:tables][table_name][:columns]
-        column_name = row[:column_name]
+        column_name = row.shift
         columns[column_name] = {} unless columns[column_name]
         column = columns[column_name]
         column[:name] = column_name
-        column[:data_type] = row[:data_type]
-        column[:length] = row[:character_maximum_length]
-        column[:allow_null] = row[:is_nullable]
-        column[:key] = row[:column_key]
-        column[:default] = row[:column_default]
-        column[:extra] = row[:extra]
+        column[:data_type] = row.shift
+        column[:length] = row.shift
+        column[:allow_null] = row.shift
+        column[:key] = row.shift
+        column[:default] = row.shift
+        column[:extra] = row.shift
       end
       result
     end
@@ -86,30 +85,29 @@ class DatabaseMetadata
             table_schema,
             table_name,
             index_name,
+            column_name,
             seq_in_index,
-            non_unique,
-            column_name
+            non_unique
           from information_schema.statistics
           #{where_clause}
           order by table_schema, table_name, if(index_name = "PRIMARY", 0, index_name), seq_in_index;
       SQL
       )
       stats_result.each do |row|
-        row = row.transform_keys(&:downcase).transform_keys(&:to_sym)
-        table_schema = row[:table_schema]
+        table_schema = row.shift
         tables = result[table_schema][:tables]
-        table_name = row[:table_name]
+        table_name = row.shift
         indexes = tables[table_name][:indexes]
-        index_name = row[:index_name]
+        index_name = row.shift
         indexes[index_name] = {} unless indexes[index_name]
         index = indexes[index_name]
-        column_name = row[:column_name]
+        column_name = row.shift
         index[column_name] = {}
         column = index[column_name]
         column[:name] = index_name
-        column[:seq_in_index] = row[:seq_in_index]
-        column[:non_unique] = row[:non_unique]
-        column[:column_name] = row[:column_name]
+        column[:seq_in_index] = row.shift
+        column[:non_unique] = row.shift
+        column[:column_name] = column_name
       end
     end
   end

data/app/server.rb

@@ -1,9 +1,12 @@
 # frozen_string_literal: true
 
+require 'base64'
+require 'csv'
 require 'erb'
 require 'json'
 require 'sinatra/base'
 require 'uri'
+require 'webrick/log'
 require_relative 'database_metadata'
 require_relative 'mysql_types'
 require_relative 'sql_parser'
@@ -12,6 +15,11 @@ require_relative 'sqlui'
 # SQLUI Sinatra server.
 class Server < Sinatra::Base
   def self.init_and_run(config, resources_dir)
+    Mysql2::Client.default_query_options[:as] = :array
+    Mysql2::Client.default_query_options[:cast_booleans] = true
+    Mysql2::Client.default_query_options[:database_timezone] = :utc
+    Mysql2::Client.default_query_options[:cache_rows] = false
+
     set :logging,         true
     set :bind,            '0.0.0.0'
     set :port,            config.port
@@ -19,6 +27,8 @@ class Server < Sinatra::Base
     set :raise_errors,    false
     set :show_exceptions, false
 
+    logger = WEBrick::Log.new
+
     get '/-/health' do
       status 200
       body 'OK'
@@ -58,6 +68,7 @@ class Server < Sinatra::Base
             list_url_path: config.list_url_path,
             schemas: DatabaseMetadata.lookup(client, database),
             table_aliases: database.table_aliases,
+            joins: database.joins,
             saved: Dir.glob("#{database.saved_path}/*.sql").to_h do |path|
               contents = File.read(path)
               comment_lines = contents.split("\n").take_while do |l|
@@ -85,43 +96,54 @@ class Server < Sinatra::Base
         params.merge!(JSON.parse(request.body.read, symbolize_names: true))
         break client_error('missing sql') unless params[:sql]
 
-        full_sql = params[:sql]
-        sql = params[:sql]
         variables = params[:variables] || {}
-        if params[:selection]
-          selection = params[:selection]
-          if selection.include?('-')
-            # sort because the selection could be in either direction
-            selection = params[:selection].split('-').map { |v| Integer(v) }.sort
-          else
-            selection = Integer(selection)
-            selection = [selection, selection]
-          end
-
-          sql = if selection[0] == selection[1]
-                  SqlParser.find_statement_at_cursor(params[:sql], selection[0])
-                else
-                  full_sql[selection[0], selection[1]]
-                end
-
-          break client_error("can't find query at selection") unless sql
-        end
+        sql = find_selected_query(params[:sql], params[:selection])
 
         result = database.with_client do |client|
-          variables.each do |name, value|
-            client.query("SET @#{name} = #{value};")
-          end
-          execute_query(client, sql)
+          query_result = execute_query(client, variables, sql)
+          # NOTE: the call to result.field_types must go before other interaction with the result. Otherwise you will
+          # get a seg fault. Seems to be a bug in Mysql2.
+          # TODO: stream this and render results on the client as they are returned?
+          {
+            columns: query_result.fields,
+            column_types: MysqlTypes.map_to_google_charts_types(query_result.field_types),
+            total_rows: query_result.size,
+            rows: (query_result.to_a || []).take(Sqlui::MAX_ROWS)
+          }
         end
 
         result[:selection] = params[:selection]
-        result[:query] = full_sql
+        result[:query] = params[:sql]
 
         status 200
         headers 'Content-Type' => 'application/json; charset=utf-8'
         body result.to_json
       end
 
+      get "#{database.url_path}/download_csv" do
+        break client_error('missing sql') unless params[:sql]
+
+        sql = Base64.decode64(params[:sql]).force_encoding('UTF-8')
+        logger.info "sql: #{sql}"
+        variables = params.map { |k, v| k[0] == '_' ? [k, v] : nil }.compact.to_h
+        sql = find_selected_query(sql, params[:selection])
+        logger.info "sql: #{sql}"
+
+        content_type 'application/csv; charset=utf-8'
+        attachment 'result.csv'
+        status 200
+
+        database.with_client do |client|
+          query_result = execute_query(client, variables, sql)
+          stream do |out|
+            out << CSV::Row.new(query_result.fields, query_result.fields, header_row: true).to_s.strip
+            query_result.each do |row|
+              out << "\n#{CSV::Row.new(query_result.fields, row).to_s.strip}"
+            end
+          end
+        end
+      end
+
       get(%r{#{Regexp.escape(database.url_path)}/(query|graph|structure|saved)}) do
         @html ||= File.read(File.join(resources_dir, 'sqlui.html'))
         status 200
@@ -152,30 +174,33 @@ class Server < Sinatra::Base
     body({ error: message, stacktrace: stacktrace }.compact.to_json)
   end
 
-  def execute_query(client, sql)
+  def find_selected_query(full_sql, selection)
+    return full_sql unless selection
+
+    if selection.include?('-')
+      # sort because the selection could be in either direction
+      selection = selection.split('-').map { |v| Integer(v) }.sort
+    else
+      selection = Integer(selection)
+      selection = [selection, selection]
+    end
+
+    if selection[0] == selection[1]
+      SqlParser.find_statement_at_cursor(full_sql, selection[0])
+    else
+      full_sql[selection[0], selection[1]]
+    end
+  end
+
+  def execute_query(client, variables, sql)
+    variables.each do |name, value|
+      client.query("SET @#{name} = #{value};")
+    end
     queries = if sql.include?(';')
                 sql.split(/(?<=;)/).map(&:strip).reject(&:empty?)
               else
                 [sql]
               end
-    results = queries.map { |current| client.query(current) }
-    result = results[-1]
-    # NOTE: the call to result.field_types must go before any other interaction with the result. Otherwise you will
-    # get a seg fault. Seems to be a bug in Mysql2.
-    if result
-      column_types = MysqlTypes.map_to_google_charts_types(result.field_types)
-      rows = result.map(&:values)
-      columns = result.first&.keys || []
-    else
-      column_types = []
-      rows = []
-      columns = []
-    end
-    {
-      columns: columns,
-      column_types: column_types,
-      total_rows: rows.size,
-      rows: rows.take(Sqlui::MAX_ROWS)
-    }
+    queries.map { |current| client.query(current) }.last
   end
 end

data/app/sqlui.rb

@@ -5,7 +5,7 @@ require_relative 'server'
 
 # Main entry point.
 class Sqlui
-  MAX_ROWS = 1_000
+  MAX_ROWS = 10_000
 
   def initialize(config_file)
     raise 'you must specify a configuration file' unless config_file

data/app/sqlui_config.rb

@@ -11,7 +11,7 @@ class SqluiConfig
   attr_reader :name, :port, :environment, :list_url_path, :database_configs
 
   def initialize(filename, overrides = {})
-    config = YAML.safe_load(ERB.new(File.read(filename)).result).deep_merge!(overrides)
+    config = YAML.safe_load(ERB.new(File.read(filename)).result, aliases: true).deep_merge!(overrides)
     config.deep_symbolize_keys!
     @name = Args.fetch_non_empty_string(config, :name).strip
     @port = Args.fetch_non_empty_int(config, :port)

data/client/resources/sqlui.css

@@ -218,6 +218,15 @@ p {
     outline: none
 }
 
+.submit-dropdown-content-button.disabled {
+    color: #888 !important;
+    cursor: auto !important;
+}
+
+.submit-dropdown-content-button.disabled:hover {
+    background: none !important;
+}
+
 .status {
     display: flex;
     justify-content: center;

data/client/resources/sqlui.html

@@ -41,8 +41,9 @@
               <input id="submit-dropdown-button-toggle" class="submit-dropdown-content-button" type="button" value="toggle default"></input>
             </div>
             <div class="submit-dropdown-content-section">
-              <input id="submit-dropdown-button-copy-csv" class="submit-dropdown-content-button" type="button" value="copy to clipboard (csv)"></input>
-              <input id="submit-dropdown-button-copy-tsv" class="submit-dropdown-content-button" type="button" value="copy to clipboard (tsv)"></input>
+              <input id="submit-dropdown-button-copy-csv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (csv)"></input>
+              <input id="submit-dropdown-button-copy-tsv" class="submit-dropdown-content-button disabled" type="button" value="copy to clipboard (tsv)"></input>
+              <input id="submit-dropdown-button-download-csv" class="submit-dropdown-content-button disabled" type="button" value="download (csv)"></input>
             </div>
           </div>
         </div>

data/client/resources/sqlui.js

@@ -3359,23 +3359,24 @@
        */
        minPointSize = -1) {
            let cursor = new SpanCursor(sets, null, minPointSize).goto(from), pos = from;
-           let open = cursor.openStart;
+           let openRanges = cursor.openStart;
            for (;;) {
                let curTo = Math.min(cursor.to, to);
                if (cursor.point) {
-                   iterator.point(pos, curTo, cursor.point, cursor.activeForPoint(cursor.to), open, cursor.pointRank);
-                   open = cursor.openEnd(curTo) + (cursor.to > curTo ? 1 : 0);
+                   let active = cursor.activeForPoint(cursor.to);
+                   let openCount = cursor.pointFrom < from ? active.length + 1 : Math.min(active.length, openRanges);
+                   iterator.point(pos, curTo, cursor.point, active, openCount, cursor.pointRank);
+                   openRanges = Math.min(cursor.openEnd(curTo), active.length);
                }
                else if (curTo > pos) {
-                   iterator.span(pos, curTo, cursor.active, open);
-                   open = cursor.openEnd(curTo);
+                   iterator.span(pos, curTo, cursor.active, openRanges);
+                   openRanges = cursor.openEnd(curTo);
                }
                if (cursor.to > to)
-                   break;
+                   return openRanges + (cursor.point && cursor.to > to ? 1 : 0);
                pos = cursor.to;
                cursor.next();
            }
-           return open;
        }
        /**
        Create a range set for the given range or array of ranges. By
@@ -3679,6 +3680,8 @@
            this.pointRank = 0;
            this.to = -1000000000 /* C.Far */;
            this.endSide = 0;
+           // The amount of open active ranges at the start of the iterator.
+           // Not including points.
            this.openStart = -1;
            this.cursor = HeapCursor.from(sets, skip, minPoint);
        }
@@ -3719,7 +3722,7 @@
        next() {
            let from = this.to, wasPoint = this.point;
            this.point = null;
-           let trackOpen = this.openStart < 0 ? [] : null, trackExtra = 0;
+           let trackOpen = this.openStart < 0 ? [] : null;
            for (;;) {
                let a = this.minActive;
                if (a > -1 && (this.activeTo[a] - this.cursor.from || this.active[a].endSide - this.cursor.startSide) < 0) {
@@ -3745,8 +3748,6 @@
                    let nextVal = this.cursor.value;
                    if (!nextVal.point) { // Opening a range
                        this.addActive(trackOpen);
-                       if (this.cursor.from < from && this.cursor.to > from)
-                           trackExtra++;
                        this.cursor.next();
                    }
                    else if (wasPoint && this.cursor.to == this.to && this.cursor.from < this.cursor.to) {
@@ -3759,8 +3760,6 @@
                        this.pointRank = this.cursor.rank;
                        this.to = this.cursor.to;
                        this.endSide = nextVal.endSide;
-                       if (this.cursor.from < from)
-                           trackExtra = 1;
                        this.cursor.next();
                        this.forward(this.to, this.endSide);
                        break;
@@ -3768,10 +3767,9 @@
                }
            }
            if (trackOpen) {
-               let openStart = 0;
-               while (openStart < trackOpen.length && trackOpen[openStart] < from)
-                   openStart++;
-               this.openStart = openStart + trackExtra;
+               this.openStart = 0;
+               for (let i = trackOpen.length - 1; i >= 0 && trackOpen[i] < from; i--)
+                   this.openStart++;
            }
        }
        activeForPoint(to) {
@@ -5826,7 +5824,7 @@
                    }
                }
                let take = Math.min(this.text.length - this.textOff, length, 512 /* T.Chunk */);
-               this.flushBuffer(active.slice(0, openStart));
+               this.flushBuffer(active.slice(active.length - openStart));
                this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
                this.atCursorPos = true;
                this.textOff += take;
@@ -20367,6 +20365,8 @@
            if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
                !sameResults(active, this.active))
                open = CompletionDialog.build(active, state, this.id, this.open, conf);
+           else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
+               open = null;
            else if (open && tr.docChanged)
                open = open.map(tr.changes);
            if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
@@ -21292,7 +21292,7 @@
    - F8: [`nextDiagnostic`](https://codemirror.net/6/docs/ref/#lint.nextDiagnostic)
    */
    const lintKeymap = [
-       { key: "Mod-Shift-m", run: openLintPanel },
+       { key: "Mod-Shift-m", run: openLintPanel, preventDefault: true },
        { key: "F8", run: nextDiagnostic }
    ];
    const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
@@ -21916,10 +21916,10 @@
        canShift(term) {
            for (let sim = new SimulatedStack(this);;) {
                let action = this.p.parser.stateSlot(sim.state, 4 /* DefaultReduce */) || this.p.parser.hasAction(sim.state, term);
-               if ((action & 65536 /* ReduceFlag */) == 0)
-                   return true;
                if (action == 0)
                    return false;
+               if ((action & 65536 /* ReduceFlag */) == 0)
+                   return true;
                sim.reduce(action);
            }
        }
@@ -23271,7 +23271,7 @@
      LineComment = 1,
      BlockComment = 2,
      String$1 = 3,
-     Number = 4,
+     Number$1 = 4,
      Bool = 5,
      Null = 6,
      ParenL = 7,
@@ -23540,18 +23540,18 @@
                    input.advance();
                if (quoted && input.next == 39 /* Ch.SingleQuote */)
                    input.advance();
-               input.acceptToken(Number);
+               input.acceptToken(Number$1);
            }
            else if (next == 46 /* Ch.Dot */ && input.next >= 48 /* Ch._0 */ && input.next <= 57 /* Ch._9 */) {
                readNumber(input, true);
-               input.acceptToken(Number);
+               input.acceptToken(Number$1);
            }
            else if (next == 46 /* Ch.Dot */) {
                input.acceptToken(Dot);
            }
            else if (next >= 48 /* Ch._0 */ && next <= 57 /* Ch._9 */) {
                readNumber(input, false);
-               input.acceptToken(Number);
+               input.acceptToken(Number$1);
            }
            else if (inString(next, d.operatorChars)) {
                while (inString(input.next, d.operatorChars))
@@ -23862,6 +23862,36 @@
 
    /* global google */
 
+   function unquoteSqlId (identifier) {
+     const match = identifier.match(/^`(.*)`$/);
+     return match ? match[1] : identifier
+   }
+
+   function base64Encode (str) {
+     // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
+     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+       function toSolidBytes (match, p1) {
+         return String.fromCharCode(Number(`0x${p1}`))
+       }))
+   }
+
+   function getSqlFromUrl (url) {
+     const params = url.searchParams;
+     if (params.has('file') && params.has('sql')) {
+       // TODO: show an error.
+       throw new Error('You can only specify a file or sql param, not both.')
+     }
+     if (params.has('sql')) {
+       return params.get('sql')
+     } else if (params.has('file')) {
+       const file = params.get('file');
+       const fileDetails = window.metadata.saved[file];
+       if (!fileDetails) throw new Error(`no such file: ${file}`)
+       return fileDetails.contents
+     }
+     throw new Error('You must specify a file or sql param')
+   }
+
    function init (parent, onSubmit, onShiftSubmit) {
      addClickListener(document.getElementById('query-tab-button'), (event) => selectTab(event, 'query'));
      addClickListener(document.getElementById('saved-tab-button'), (event) => selectTab(event, 'saved'));
@@ -23902,9 +23932,7 @@
 
      const copyListenerFactory = (delimiter) => {
        return () => {
-         if (
-           !window.sqlFetch?.result
-         ) {
+         if (!window.sqlFetch?.result) {
            return
          }
          const type = 'text/plain';
@@ -23930,6 +23958,21 @@
      };
      addClickListener(document.getElementById('submit-dropdown-button-copy-csv'), copyListenerFactory(','));
      addClickListener(document.getElementById('submit-dropdown-button-copy-tsv'), copyListenerFactory('\t'));
+     addClickListener(document.getElementById('submit-dropdown-button-download-csv'), () => {
+       if (!window.sqlFetch?.result) return
+
+       const url = new URL(window.location);
+       url.searchParams.set('sql', base64Encode(getSqlFromUrl(url)));
+       url.searchParams.delete('file');
+       setActionInUrl(url, 'download_csv');
+
+       const link = document.createElement('a');
+       link.setAttribute('download', 'result.csv');
+       link.setAttribute('href', url.href);
+       link.click();
+
+       focus(getSelection());
+     });
 
      document.addEventListener('click', function (event) {
        if (event.target !== dropdownButton) {
@@ -23956,16 +23999,17 @@
      schemas.forEach(([schemaName, schema]) => {
        Object.entries(schema.tables).forEach(([tableName, table]) => {
          const qualifiedTableName = schemas.length === 1 ? tableName : `${schemaName}.${tableName}`;
+         const quotedQualifiedTableName = schemas.length === 1 ? `\`${tableName}\`` : `\`${schemaName}\`.\`${tableName}\``;
          const columns = Object.keys(table.columns);
          editorSchema[qualifiedTableName] = columns;
-         const alias = window.metadata.table_aliases[tableName];
+         const alias = window.metadata.table_aliases[qualifiedTableName];
          if (alias) {
            editorSchema[alias] = columns;
            tables.push({
              label: qualifiedTableName,
              detail: alias,
              alias_type: 'with',
-             quoted: '`' + qualifiedTableName + '` ' + alias,
+             quoted: `${quotedQualifiedTableName} \`${alias}\``,
              unquoted: `${qualifiedTableName} ${alias}`
            });
            tables.push({
@@ -24018,40 +24062,81 @@
        schema: editorSchema,
        tables
      };
-     const scs = schemaCompletionSource(sqlConfig);
+     const originalSchemaCompletionSource = schemaCompletionSource(sqlConfig);
+     const originalKeywordCompletionSource = keywordCompletionSource(MySQL, true);
+     const keywordCompletions = [];
+     window.metadata.joins.forEach((join) => {
+       ['JOIN', 'INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'CROSS JOIN'].forEach((type) => {
+         keywordCompletions.push({ label: `${type} ${join.label}`, apply: `${type} ${join.apply}`, type: 'keyword' });
+       });
+     });
+     let combinedKeywordCompletionSource;
+     if (keywordCompletions.length > 0) {
+       const customKeywordCompletionSource = ifNotIn(['QuotedIdentifier', 'SpecialVar', 'String', 'LineComment', 'BlockComment', '.'], completeFromList(keywordCompletions));
+       combinedKeywordCompletionSource = function (context) {
+         const original = originalKeywordCompletionSource(context);
+         const custom = customKeywordCompletionSource(context);
+         if (original?.options && custom?.options) {
+           original.options = original.options.concat(custom.options);
+         }
+         return original
+       };
+     } else {
+       combinedKeywordCompletionSource = originalKeywordCompletionSource;
+     }
      const sqlExtension = new LanguageSupport(
        MySQL.language,
        [
          MySQL.language.data.of({
            autocomplete: (context) => {
-             const result = scs(context);
+             const result = originalSchemaCompletionSource(context);
              if (!hasTableAliases || !result?.options) return result
 
              const tree = syntaxTree(context.state);
              let node = tree.resolveInner(context.pos, -1);
+             if (!node) return result
 
              // We are trying to identify the case where we are autocompleting a table name after "from" or "join"
+
              // TODO: we don't handle the case where a user typed "select table.foo from". In that case we probably
              // shouldn't autocomplete the alias. Though, if the user typed "select table.foo, t.bar", we won't know
-             // what to do.
+             // what to do. Maybe it is ok to force users to simply delete the alias after autocompleting.
+
              // TODO: if table aliases aren't enabled, we don't need to override autocomplete.
 
-             if (node?.name === 'Statement') {
+             let foundSchema;
+             if (node.name === 'Statement') {
                // The node can be a Statement if the cursor is at the end of "from " and there is a complete
                // statement in the editor (semicolon present). In that case we want to find the node just before the
                // current position so that we can check whether it is "from" or "join".
                node = node.childBefore(context.pos);
-             } else if (node?.name === 'Script') {
+             } else if (node.name === 'Script') {
                // It seems the node can sometimes be a Script if the cursor is at the end of the last statement in the
                // editor and the statement doesn't end in a semicolon. In that case we can find the last statement in the
                // Script so that we can check whether it is "from" or "join".
                node = node.lastChild?.childBefore(context.pos);
-             } else if (['Identifier', 'QuotedIdentifier', 'Keyword'].includes(node?.name)) {
+             } else if (['Identifier', 'QuotedIdentifier', 'Keyword', '.'].includes(node.name)) {
                // If the node is an Identifier, we might be in the middle of typing the table name. If the node is a
                // Keyword but isn't "from" or "join", we might be in the middle of typing a table name that is similar
                // to a Keyword, for instance "orders" or "selections" or "fromages". In these cases, look for the previous
-               // sibling so that we can check whether it is "from" or "join".
-               node = node.prevSibling;
+               // sibling so that we can check whether it is "from" or "join". If we found a '.' or if the previous
+               // sibling is a '.', we might be in the middle of typing something like "schema.table" or
+               // "`schema`.table" or "`schema`.`table`". In these cases we need to record the schema used so that we
+               // can autocomplete table names with aliases.
+               if (node.name !== '.') {
+                 node = node.prevSibling;
+               }
+
+               if (node?.name === '.') {
+                 node = node.prevSibling;
+                 if (['Identifier', 'QuotedIdentifier'].includes(node?.name)) {
+                   foundSchema = unquoteSqlId(context.state.doc.sliceString(node.from, node.to));
+                   node = node.parent;
+                   if (node?.name === 'CompositeIdentifier') {
+                     node = node.prevSibling;
+                   }
+                 }
+               }
              }
 
              const nodeText = node ? context.state.doc.sliceString(node.from, node.to).toLowerCase() : null;
@@ -24076,13 +24161,21 @@
                    option.apply = option.unquoted;
                  }
                }
+               if (foundSchema) {
+                 const unquotedLabel = unquoteSqlId(option.label);
+                 const quoted = unquotedLabel !== option.label;
+                 const alias = window.metadata.table_aliases[`${foundSchema}.${unquotedLabel}`];
+                 if (alias) {
+                   option = { label: quoted ? `\`${unquotedLabel}\` \`${alias}\`` : `${option.label} ${alias}` };
+                 }
+               }
                return option
              });
              return result
            }
          }),
          MySQL.language.data.of({
-           autocomplete: keywordCompletionSource(MySQL, true)
+           autocomplete: combinedKeywordCompletionSource
          })
        ]
      );
@@ -24168,8 +24261,8 @@
      });
    }
 
-   function setTabInUrl (url, tab) {
-     url.pathname = url.pathname.replace(/\/[^/]+$/, `/${tab}`);
+   function setActionInUrl (url, action) {
+     url.pathname = url.pathname.replace(/\/[^/]+$/, `/${action}`);
    }
 
    function getTabFromUrl (url) {
@@ -24183,19 +24276,19 @@
 
    function updateTabs () {
      const url = new URL(window.location);
-     setTabInUrl(url, 'graph');
+     setActionInUrl(url, 'graph');
      document.getElementById('graph-tab-button').href = url.pathname + url.search;
-     setTabInUrl(url, 'saved');
+     setActionInUrl(url, 'saved');
      document.getElementById('saved-tab-button').href = url.pathname + url.search;
-     setTabInUrl(url, 'structure');
+     setActionInUrl(url, 'structure');
      document.getElementById('structure-tab-button').href = url.pathname + url.search;
-     setTabInUrl(url, 'query');
+     setActionInUrl(url, 'query');
      document.getElementById('query-tab-button').href = url.pathname + url.search;
    }
 
    function selectTab (event, tab) {
      const url = new URL(window.location);
-     setTabInUrl(url, tab);
+     setActionInUrl(url, tab);
      route(event.target, event, url, true);
    }
 
@@ -24404,6 +24497,7 @@
      document.getElementById('graph-status').style.display = 'flex';
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('cancel-button').style.display = 'none';
+     updateDownloadButtons(window?.sqlFetch);
      maybeFetchResult(internal);
 
      focus(getSelection());
@@ -24438,7 +24532,7 @@
      setSavedStatus(`${numFiles} file${numFiles === 1 ? '' : 's'}`);
      Object.values(saved).forEach(file => {
        const viewUrl = new URL(window.location.origin + window.location.pathname);
-       setTabInUrl(viewUrl, 'query');
+       setActionInUrl(viewUrl, 'query');
        viewUrl.searchParams.set('file', file.filename);
 
        const viewLinkElement = document.createElement('a');
@@ -24451,7 +24545,7 @@
        });
 
        const runUrl = new URL(window.location.origin + window.location.pathname);
-       setTabInUrl(runUrl, 'query');
+       setActionInUrl(runUrl, 'query');
        runUrl.searchParams.set('file', file.filename);
        runUrl.searchParams.set('run', 'true');
 
@@ -24552,6 +24646,7 @@
      clearGraphStatus();
      clearResultBox();
      clearResultStatus();
+     disableDownloadButtons();
    }
 
    function clearResultStatus () {
@@ -24821,7 +24916,28 @@
      });
    }
 
+   function disableDownloadButtons () {
+     document.getElementById('submit-dropdown-button-download-csv').classList.add('disabled');
+     document.getElementById('submit-dropdown-button-copy-csv').classList.add('disabled');
+     document.getElementById('submit-dropdown-button-copy-tsv').classList.add('disabled');
+   }
+
+   function enableDownloadButtons () {
+     document.getElementById('submit-dropdown-button-download-csv').classList.remove('disabled');
+     document.getElementById('submit-dropdown-button-copy-csv').classList.remove('disabled');
+     document.getElementById('submit-dropdown-button-copy-tsv').classList.remove('disabled');
+   }
+
+   function updateDownloadButtons (fetch) {
+     if (fetch?.state === 'success') {
+       enableDownloadButtons();
+     } else {
+       disableDownloadButtons();
+     }
+   }
+
    function displaySqlFetch (fetch) {
+     updateDownloadButtons(fetch);
      if (window.tab === 'query') {
        displaySqlFetchInResultTab(fetch);
      } else if (window.tab === 'graph') {
@@ -24950,7 +25066,7 @@
      if (result.total_rows === 1) {
        statusElement.innerText = `${result.total_rows} row (${elapsed}s)`;
      } else {
-       statusElement.innerText = `${result.total_rows} rows (${elapsed}s)`;
+       statusElement.innerText = `${result.total_rows.toLocaleString()} rows (${elapsed}s)`;
      }
 
      if (result.total_rows > result.rows.length) {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.40
+  version: 0.1.42
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-18 00:00:00.000000000 Z
+date: 2022-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mysql2