sqlui 0.1.47 → 0.1.49

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 01c105468ea4c5f463ada429231bd41a3a65752d8fa95f8befa2121a47765fbe
-  data.tar.gz: 6e0df11aa97b0e8d0d685e6b109a297c8ddba78959f109db26f7b159aa4cfa0c
+  metadata.gz: ae60c3a8d2bb051b87f0e10ed67b3c5e5c6360ecd298b5176a17a7a5f66796d8
+  data.tar.gz: 4ee88fae0167dc7dd8958384d7b2492df3944368238453d729244d91232ebf35
 SHA512:
-  metadata.gz: 6c1fd32e0feb8817bac5e120a15e71adf48e9ccbe5183e0ba729dc29c1a2bb76ffa18bd7c63559dd49f66f0eb8a3669213988701da8c3f4d4566919985c80c13
-  data.tar.gz: 022b592a3ed56c7e06b8222566cfe7d096ed1b1789d687afe4bf945e625a390269dffd8a701fa4647377e85399b40e345147ea637113a2489e31fbd2630e409a
+  metadata.gz: b809f370ad688d9b54d50ff1ccf4dd703dea5af4344f61577220da2b3f4d7536265d8b8e03613158b81fdec4d86ca10dde35f89623cb114fde2b345a5df0108b
+  data.tar.gz: 70324412047c434e03c39e3676cd616da4f6a29c0c7767805fe4073d15e59dd1f28d994253921e18457c469154661081a4570cfec63100cfb9dd2d3ae1aec242

data/.version

@@ -1 +1 @@
-0.1.47
+0.1.49

data/app/args.rb

@@ -4,7 +4,7 @@
 class Args
   def self.fetch_non_empty_string(hash, key)
     value = fetch_non_nil(hash, key, String)
-    raise ArgumentError, "required parameter #{key} empty" if value.strip.empty?
+    raise ArgumentError, "parameter #{key} empty" if value.strip.empty?
 
     value
   end
@@ -15,7 +15,7 @@ class Args
 
   def self.fetch_non_empty_hash(hash, key)
     value = fetch_non_nil(hash, key, Hash)
-    raise ArgumentError, "required parameter #{key} empty" if value.empty?
+    raise ArgumentError, "parameter #{key} empty" if value.empty?
 
     value
   end
@@ -29,9 +29,9 @@ class Args
   end
 
   def self.fetch_non_nil(hash, key, *classes)
-    raise ArgumentError, "required parameter #{key} missing" unless hash.key?(key)
+    raise ArgumentError, "parameter #{key} missing" unless hash.key?(key)
 
-    raise ArgumentError, "required parameter #{key} null" if hash[key].nil?
+    raise ArgumentError, "parameter #{key} null" if hash[key].nil?
 
     fetch_optional(hash, key, *classes)
   end
@@ -40,12 +40,12 @@ class Args
     value = hash[key]
     if value && classes.size.positive? && !classes.find { |clazz| value.is_a?(clazz) }
       if classes.size != 1
-        raise ArgumentError, "required parameter #{key} not #{classes.map(&:to_s).map(&:downcase).join(' or ')}"
+        raise ArgumentError, "parameter #{key} not #{classes.map(&:to_s).map(&:downcase).join(' or ')}"
       end
 
       class_name = classes[0].to_s.downcase
       class_name = %w[a e i o u].include?(class_name[0]) ? "an #{class_name}" : "a #{class_name}"
-      raise ArgumentError, "required parameter #{key} not #{class_name}"
+      raise ArgumentError, "parameter #{key} not #{class_name}"
     end
 
     value

data/app/database_config.rb

@@ -8,7 +8,7 @@ require_relative 'args'
 
 # Config for a single database.
 class DatabaseConfig
-  attr_reader :display_name, :description, :url_path, :joins, :saved_path, :tables, :client_params
+  attr_reader :display_name, :description, :url_path, :joins, :saved_path, :tables, :columns, :client_params
 
   def initialize(hash)
     @display_name = Args.fetch_non_empty_string(hash, :display_name).strip
@@ -18,8 +18,10 @@ 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|
+
+    # Make joins an array. It is only a map to allow for YAML extension.
+    @joins = (Args.fetch_optional_hash(hash, :joins) || {}).values
+    @joins.each do |join|
       next if join.is_a?(Hash) &&
               join.keys.size == 2 &&
               join[:label].is_a?(String) && !join[:label].strip.empty? &&
@@ -27,8 +29,9 @@ class DatabaseConfig
 
       raise ArgumentError, "invalid join #{join.to_json}"
     end
+
     @tables = Args.fetch_optional_hash(hash, :tables) || {}
-    @tables = @tables.each do |table, table_config|
+    @tables.each do |table, table_config|
       unless table_config.is_a?(Hash)
         raise ArgumentError, "invalid table config for #{table} (#{table_config}), expected hash"
       end
@@ -43,6 +46,33 @@ class DatabaseConfig
         raise ArgumentError, "invalid table boost for #{table} (#{table_boost}), expected int"
       end
     end
+
+    @columns = Args.fetch_optional_hash(hash, :columns) || {}
+    @columns.each do |column, column_config|
+      unless column_config.is_a?(Hash)
+        raise ArgumentError, "invalid column config for #{column} (#{column_config}), expected hash"
+      end
+
+      links = Args.fetch_optional_hash(column_config, :links) || {}
+      links.each_value do |link_config|
+        unless link_config.is_a?(Hash)
+          raise ArgumentError, "invalid link config for #{column} (#{link_config}), expected hash"
+        end
+
+        unless link_config[:short_name].is_a?(String)
+          raise ArgumentError,
+                "invalid link short_name for #{column} link (#{link_config[:short_name]}), expected string"
+        end
+        unless link_config[:long_name].is_a?(String)
+          raise ArgumentError, "invalid link long_name for #{column} link (#{link_config[:long_name]}), expected string"
+        end
+        unless link_config[:template].is_a?(String)
+          raise ArgumentError, "invalid link template for #{column} link (#{link_config[:template]}), expected string"
+        end
+      end
+      # Make links an array. It is only a map to allow for YAML extension
+      column_config[:links] = links.values
+    end
     aliases = @tables.map { |_table, table_config| table_config[:alias] }.compact
     if aliases.to_set.size < aliases.size
       duplicate_aliases = aliases.reject { |a| aliases.count(a) == 1 }.to_set

data/app/server.rb

@@ -39,6 +39,10 @@ class Server < Sinatra::Base
       redirect config.list_url_path, 301
     end
 
+    get '/favicon.svg' do
+      send_file File.join(resources_dir, 'favicon.svg')
+    end
+
     get "#{config.list_url_path}/?" do
       erb :databases, locals: { config: config }
     end
@@ -69,6 +73,7 @@ class Server < Sinatra::Base
             list_url_path: config.list_url_path,
             schemas: DatabaseMetadata.lookup(client, database),
             tables: database.tables,
+            columns: database.columns,
             joins: database.joins,
             saved: Dir.glob("#{database.saved_path}/*.sql").to_h do |path|
               contents = File.read(path)
@@ -163,15 +168,18 @@ class Server < Sinatra::Base
       end
     end
 
-    error do |e|
-      status 500
-      headers 'Content-Type' => 'application/json; charset=utf-8'
-      message = e.message.lines.first&.strip || 'unexpected error'
-      result = {
-        error: message,
-        stacktrace: e.backtrace.map { |b| b }.join("\n")
-      }
-      body result.to_json
+    error 400..510 do
+      exception = env['sinatra.error']
+      stacktrace = exception&.full_message(highlight: false)
+      if request.env['HTTP_ACCEPT'] == 'application/json'
+        headers 'Content-Type' => 'application/json; charset=utf-8'
+        message = exception&.message&.lines&.first&.strip || 'unexpected error'
+        json = { error: message, stacktrace: stacktrace }.compact.to_json
+        body json
+      else
+        message = "#{status} #{Rack::Utils::HTTP_STATUS_CODES[status]}"
+        erb :error, locals: { title: "SQLUI #{message}", message: message, stacktrace: stacktrace }
+      end
     end
 
     run!

data/app/sql_parser.rb

@@ -1,19 +1,83 @@
 # frozen_string_literal: true
 
+require 'strscan'
+
 # Used to parse strings containing one or more SQL statements.
 class SqlParser
   def self.find_statement_at_cursor(sql, cursor)
-    return sql unless sql.include?(';')
-
-    parts_with_ranges = []
-    sql.scan(/[^;]*;[ \n]*/) { |part| parts_with_ranges << [part, 0, part.size] }
-    parts_with_ranges.inject(0) do |pos, current|
-      current[1] += pos
-      current[2] += pos
-    end
+    parts_with_ranges = parse(sql)
     part_with_range = parts_with_ranges.find do |current|
-      cursor >= current[1] && cursor < current[2]
+      cursor >= current[1] && cursor <= current[2]
     end || parts_with_ranges[-1]
-    part_with_range[0].strip
+    part_with_range[0]
+  end
+
+  def self.parse(sql)
+    scanner = StringScanner.new(sql)
+    statements = []
+    single_quoted = false
+    double_quoted = false
+    single_commented = false
+    multi_commented = false
+    escaped = false
+    current = ''
+    start = 0
+    until scanner.eos?
+      current ||= ''
+      char = scanner.getch
+      current += char
+
+      if (single_quoted || double_quoted) && !escaped && char == "'" && scanner.peek(1) == "'"
+        current += scanner.getch
+      elsif escaped
+        escaped = false
+      elsif !single_quoted && !double_quoted && !escaped && !single_commented && char == '/' && scanner.peek(1) == '*'
+        current += scanner.getch
+        multi_commented = true
+      elsif multi_commented && char == '*' && scanner.peek(1) == '/'
+        multi_commented = false
+      elsif multi_commented
+        next
+      elsif !single_quoted && !double_quoted && !escaped && !multi_commented &&
+            char == '-' && scanner.peek(1).match?(/-[ \n\t]/)
+        current += scanner.getch
+        single_commented = true
+      elsif !single_quoted && !double_quoted && !escaped && !multi_commented && char == '#'
+        single_commented = true
+      elsif single_commented && char == "\n"
+        single_commented = false
+      elsif single_commented
+        single_quoted = false if char == "\n"
+      elsif char == '\\'
+        escaped = true
+      elsif char == "'"
+        single_quoted = !single_quoted unless double_quoted
+      elsif char == '"'
+        double_quoted = !double_quoted unless single_quoted
+      elsif char == ';' && !single_quoted && !double_quoted
+        # Include trailing whitespace if it runs to end of line
+        current += scanner.scan(/[ \t]*(?=\n)/) || ''
+
+        # Include an optional trailing single line comma
+        current += scanner.scan(/[ \t]*--[ \t][^\n]*/) || ''
+        current += scanner.scan(/[ \t]*#[^\n]*/) || ''
+
+        # Include any following blank lines, careful to avoid the final newline in case it is the start of a new query
+        while (more = scanner.scan(/\n[ \t]*(?=\n)/))
+          current += more
+        end
+
+        # Include remaining whitespace if that's all that's left
+        if scanner.rest_size == scanner.match?(/[ \t\n]*/)
+          current += scanner.rest
+          scanner.terminate
+        end
+        statements << [current, start, scanner.pos]
+        start = scanner.pos
+        current = nil
+      end
+    end
+    statements << [current, start, scanner.pos] unless current.nil?
+    statements
   end
 end

data/app/views/error.erb

@@ -0,0 +1,21 @@
+<html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title><%= title %></title>
+  <link rel="icon" type="image/x-icon" href="/favicon.svg">
+</head>
+<body style="font-family: monospace; font-size: 16px;">
+
+<% if defined?(message) && message %>
+  <p><%= message %></p>
+<% end %>
+
+<% if defined?(stacktrace) && stacktrace %>
+<pre>
+<%= stacktrace %>
+</pre>
+<% end %>
+
+</body>
+</html>

data/client/resources/favicon.svg

@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0.0 0.0 32.0 32.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l32.0 0l0 32.0l-32.0 0l0 -32.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l32.0 0l0 32.0l-32.0 0z" fill-rule="evenodd"/><path fill="#6d9eeb" d="m1.3070866 20.064245l0 0c0 1.6235943 6.5782413 2.9397774 14.692913 2.9397774c8.114672 0 14.692913 -1.3161831 14.692913 -2.9397774l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774z" fill-rule="evenodd"/><path fill="#a7c4f3" d="m1.3070866 20.064245l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 20.064245l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 -8.073204" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 20.064245l0 0c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 0c0 -1.6235924 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161831 14.692913 2.9397755l0 8.073204c0 1.6235943 -6.5782413 2.9397774 -14.692913 2.9397774c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397774l0 -8.073204" fill-rule="evenodd"/><path fill="#93c47d" d="m1.3070866 12.012567l0 0c0 1.6235943 6.5782413 2.9397764 14.692913 2.9397764c8.114672 0 14.692913 -1.3161821 14.692913 -2.9397764l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755z" fill-rule="evenodd"/><path fill="#bedbb1" d="m1.3070866 12.012567l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 12.012567l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755l0 -8.073205" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 12.012567l0 0c0 1.6235943 -6.5782413 2.9397764 -14.692913 2.9397764c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397764l0 0c0 -1.6235933 6.5782413 -2.9397755 14.692913 -2.9397755c8.114672 0 14.692913 1.3161821 14.692913 2.9397755l0 8.073205c0 1.6235924 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161831 -14.692913 -2.9397755l0 -8.073205" fill-rule="evenodd"/><path fill="#f4cccc" d="m1.3070866 3.862348l0 0c0 1.6235933 6.5782413 2.939776 14.692913 2.939776c8.114672 0 14.692913 -1.3161826 14.692913 -2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755z" fill-rule="evenodd"/><path fill="#f8e0e0" d="m1.3070866 3.862348l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m30.692913 3.862348l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755l0 -8.073204" fill-rule="evenodd"/><path stroke="#351c75" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m30.692913 3.862348l0 0c0 1.6235933 -6.5782413 2.939776 -14.692913 2.939776c-8.114672 0 -14.692913 -1.3161826 -14.692913 -2.939776l0 0c0 -1.6235933 6.5782413 -2.939776 14.692913 -2.939776c8.114672 0 14.692913 1.3161826 14.692913 2.939776l0 8.073204c0 1.6235933 -6.5782413 2.9397755 -14.692913 2.9397755c-8.114672 0 -14.692913 -1.3161821 -14.692913 -2.9397755l0 -8.073204" fill-rule="evenodd"/></g></svg>

data/client/resources/sqlui.css

@@ -158,7 +158,7 @@ p {
     border-left: 1px solid #888;
     border-right: 1px solid #888;
     border-bottom: 1px solid #888;
-    z-index: 200;
+    z-index: 2;
     flex-direction: column;
     left: 0;
     right: 0;
@@ -246,6 +246,27 @@ p {
     flex-direction: column;
 }
 
+#result-table tbody tr td abbr a {
+    color: #555;
+    cursor: pointer;
+    text-decoration: none;
+    margin: 0;
+    padding: 0 3px;
+    border: 1px dotted #555;
+    font-size: 12px;
+    display: inline-block;
+}
+
+#result-table tbody tr td abbr {
+    margin: 0 5px 0 0;
+    text-decoration: none;
+    position: relative;
+}
+
+#result-table tbody tr td abbr:last-child {
+    margin: 0;
+}
+
 .fetch-sql-box {
     justify-content: center;
     align-items: center;
@@ -271,7 +292,7 @@ table td:last-child, table th:last-child {
 }
 
 td, th {
-    padding: 5px 20px 5px 5px;
+    padding: 5px 10px;
     font-weight: normal;
     white-space: nowrap;
     max-width: 500px;
@@ -300,7 +321,7 @@ thead {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: 1;
     table-layout: fixed;
 }
 

data/client/resources/sqlui.html

@@ -2,6 +2,7 @@
   <head>
     <meta charset="utf-8">
     <title>SQLUI</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.svg">
     <script src="sqlui.js"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <link rel="stylesheet" href="sqlui.css">

data/client/resources/sqlui.js

@@ -21666,6 +21666,57 @@
        }
    });
 
+   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 copyTextToClipboard (text) {
+     const type = 'text/plain';
+     const blob = new Blob([text], { type });
+     navigator.clipboard.write([new window.ClipboardItem({ [type]: blob })]);
+   }
+
+   function toCsv (columns, rows) {
+     let text = columns.map((header) => {
+       if (typeof header === 'string' && (header.includes('"') || header.includes(','))) {
+         return `"${header.replaceAll('"', '""')}"`
+       } else {
+         return header
+       }
+     }).join(',') + '\n';
+     text += rows.map((row) => {
+       return row.map((cell) => {
+         if (typeof cell === 'string' && (cell.includes('"') || cell.includes(','))) {
+           return `"${cell.replaceAll('"', '""')}"`
+         } else {
+           return cell
+         }
+       }).join(',')
+     }).join('\n');
+
+     return text
+   }
+
+   function toTsv (columns, rows) {
+     if (columns.find((cell) => cell === '\t')) {
+       throw new Error('TSV input may not contain a tab character.')
+     }
+     let text = columns.join('\t') + '\n';
+
+     text += rows.map((row) => {
+       if (row.find((cell) => cell === '\t')) {
+         throw new Error('TSV input may not contain a tab character.')
+       }
+       return row.join('\t')
+     }).join('\n');
+
+     return text
+   }
+
    /// A parse stack. These are used internally by the parser to track
    /// parsing progress. They also provide some properties and methods
    /// that external code such as a tokenizer can use to get information
@@ -23860,131 +23911,7 @@
        builtin: MySQLBuiltin
    });
 
-   /* 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'));
-     addClickListener(document.getElementById('structure-tab-button'), (event) => selectTab(event, 'structure'));
-     addClickListener(document.getElementById('graph-tab-button'), (event) => selectTab(event, 'graph'));
-     addClickListener(document.getElementById('cancel-button'), (event) => clearResult());
-
-     const dropdownContent = document.getElementById('submit-dropdown-content');
-     const dropdownButton = document.getElementById('submit-dropdown-button');
-     addClickListener(dropdownButton, () => dropdownContent.classList.toggle('submit-dropdown-content-show'));
-
-     const isMac = navigator.userAgent.includes('Mac');
-     const runCurrentLabel = `run selection (${isMac ? '⌘' : 'Ctrl'}-Enter)`;
-     const runAllLabel = `run all (${isMac ? '⌘' : 'Ctrl'}-Shift-Enter)`;
-
-     const submitButtonCurrent = document.getElementById('submit-button-current');
-     submitButtonCurrent.value = runCurrentLabel;
-     addClickListener(submitButtonCurrent, (event) => submitCurrent(event.target, event));
-
-     const submitButtonAll = document.getElementById('submit-button-all');
-     submitButtonAll.value = runAllLabel;
-     addClickListener(submitButtonAll, (event) => submitAll(event.target, event));
-
-     const dropdownButtonCurrent = document.getElementById('submit-dropdown-button-current');
-     dropdownButtonCurrent.value = runCurrentLabel;
-     addClickListener(dropdownButtonCurrent, (event) => submitCurrent(event.target, event));
-
-     const dropdownAllButton = document.getElementById('submit-dropdown-button-all');
-     dropdownAllButton.value = runAllLabel;
-     addClickListener(dropdownAllButton, (event) => submitAll(event.target, event));
-
-     const dropdownToggleButton = document.getElementById('submit-dropdown-button-toggle');
-     addClickListener(dropdownToggleButton, () => {
-       submitButtonCurrent.classList.toggle('submit-button-show');
-       submitButtonAll.classList.toggle('submit-button-show');
-       focus(getSelection());
-     });
-
-     const copyListenerFactory = (delimiter) => {
-       return () => {
-         if (!window.sqlFetch?.result) {
-           return
-         }
-         const type = 'text/plain';
-         let text = window.sqlFetch.result.columns.map((header) => {
-           if (typeof header === 'string' && (header.includes('"') || header.includes(delimiter))) {
-             return `"${header.replaceAll('"', '""')}"`
-           } else {
-             return header
-           }
-         }).join(delimiter) + '\n';
-         text += window.sqlFetch.result.rows.map((row) => {
-           return row.map((cell) => {
-             if (typeof cell === 'string' && (cell.includes('"') || cell.includes(delimiter))) {
-               return `"${cell.replaceAll('"', '""')}"`
-             } else {
-               return cell
-             }
-           }).join(delimiter)
-         }).join('\n');
-         const blob = new Blob([text], { type });
-         navigator.clipboard.write([new window.ClipboardItem({ [type]: blob })]);
-       }
-     };
-     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) {
-         dropdownContent.classList.remove('submit-dropdown-content-show');
-       }
-     });
-     dropdownContent.addEventListener('focusout', function (event) {
-       if (!dropdownContent.contains(event.relatedTarget)) {
-         dropdownContent.classList.remove('submit-dropdown-content-show');
-       }
-     });
-
+   function createEditor (parent, metadata, onSubmit, onShiftSubmit) {
      const fixedHeightEditor = EditorView.theme({
        '.cm-scroller': {
          height: '200px',
@@ -23992,7 +23919,7 @@
          resize: 'vertical'
        }
      });
-     const schemas = Object.entries(window.metadata.schemas);
+     const schemas = Object.entries(metadata.schemas);
      const editorSchema = {};
      const tables = [];
      schemas.forEach(([schemaName, schema]) => {
@@ -24001,8 +23928,8 @@
          const quotedQualifiedTableName = schemas.length === 1 ? `\`${tableName}\`` : `\`${schemaName}\`.\`${tableName}\``;
          const columns = Object.keys(table.columns);
          editorSchema[qualifiedTableName] = columns;
-         const alias = window.metadata.tables[qualifiedTableName]?.alias;
-         const boost = window.metadata.tables[qualifiedTableName]?.boost;
+         const alias = metadata.tables[qualifiedTableName]?.alias;
+         const boost = metadata.tables[qualifiedTableName]?.boost;
          if (alias) {
            editorSchema[alias] = columns;
            tables.push({
@@ -24067,7 +23994,7 @@
      const originalSchemaCompletionSource = schemaCompletionSource(sqlConfig);
      const originalKeywordCompletionSource = keywordCompletionSource(MySQL, true);
      const keywordCompletions = [];
-     window.metadata.joins.forEach((join) => {
+     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' });
        });
@@ -24166,7 +24093,7 @@
                if (foundSchema) {
                  const unquotedLabel = unquoteSqlId(option.label);
                  const quoted = unquotedLabel !== option.label;
-                 const tableConfig = window.metadata.tables[`${foundSchema}.${unquotedLabel}`];
+                 const tableConfig = metadata.tables[`${foundSchema}.${unquotedLabel}`];
                  const alias = tableConfig?.alias;
                  const boost = tableConfig?.boost || -1;
                  const optionOverride = {
@@ -24190,7 +24117,7 @@
          })
        ]
      );
-     window.editorView = new EditorView({
+     return new EditorView({
        state: EditorState.create({
          extensions: [
            lineNumbers(),
@@ -24217,7 +24144,152 @@
          ]
        }),
        parent
+     })
+   }
+
+   function unquoteSqlId (identifier) {
+     const match = identifier.match(/^`(.*)`$/);
+     return match ? match[1] : identifier
+   }
+
+   function createTable (columns, rows, id, headerRenderer, cellRenderer) {
+     const tableElement = document.createElement('table');
+     if (id) tableElement.id = id;
+     const theadElement = document.createElement('thead');
+     const headerTrElement = document.createElement('tr');
+     const tbodyElement = document.createElement('tbody');
+     theadElement.appendChild(headerTrElement);
+     tableElement.appendChild(theadElement);
+     tableElement.appendChild(tbodyElement);
+
+     columns.forEach(function (columnName) {
+       if (headerRenderer) {
+         headerRenderer(headerTrElement, columnName);
+       } else {
+         const headerElement = document.createElement('th');
+         headerElement.innerText = columnName;
+         headerTrElement.appendChild(headerElement);
+       }
+     });
+     if (columns.length > 0) {
+       headerTrElement.appendChild(document.createElement('th'));
+     }
+     let highlight = false;
+     rows.forEach(function (row) {
+       const rowElement = document.createElement('tr');
+       if (highlight) {
+         rowElement.classList.add('highlighted-row');
+       }
+       highlight = !highlight;
+       tbodyElement.appendChild(rowElement);
+       row.forEach(function (value, i) {
+         if (cellRenderer) {
+           cellRenderer(rowElement, columns[i], value);
+         } else {
+           const cellElement = document.createElement('td');
+           cellElement.innerText = value;
+           rowElement.appendChild(cellElement);
+         }
+       });
+       rowElement.appendChild(document.createElement('td'));
+     });
+     return tableElement
+   }
+
+   /* global google */
+
+   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'));
+     addClickListener(document.getElementById('structure-tab-button'), (event) => selectTab(event, 'structure'));
+     addClickListener(document.getElementById('graph-tab-button'), (event) => selectTab(event, 'graph'));
+     addClickListener(document.getElementById('cancel-button'), (event) => clearResult());
+
+     const dropdownContent = document.getElementById('submit-dropdown-content');
+     const dropdownButton = document.getElementById('submit-dropdown-button');
+     addClickListener(dropdownButton, () => dropdownContent.classList.toggle('submit-dropdown-content-show'));
+
+     const isMac = navigator.userAgent.includes('Mac');
+     const runCurrentLabel = `run selection (${isMac ? '⌘' : 'Ctrl'}-Enter)`;
+     const runAllLabel = `run all (${isMac ? '⌘' : 'Ctrl'}-Shift-Enter)`;
+
+     const submitButtonCurrent = document.getElementById('submit-button-current');
+     submitButtonCurrent.value = runCurrentLabel;
+     addClickListener(submitButtonCurrent, (event) => submitCurrent(event.target, event));
+
+     const submitButtonAll = document.getElementById('submit-button-all');
+     submitButtonAll.value = runAllLabel;
+     addClickListener(submitButtonAll, (event) => submitAll(event.target, event));
+
+     const dropdownButtonCurrent = document.getElementById('submit-dropdown-button-current');
+     dropdownButtonCurrent.value = runCurrentLabel;
+     addClickListener(dropdownButtonCurrent, (event) => submitCurrent(event.target, event));
+
+     const dropdownAllButton = document.getElementById('submit-dropdown-button-all');
+     dropdownAllButton.value = runAllLabel;
+     addClickListener(dropdownAllButton, (event) => submitAll(event.target, event));
+
+     const dropdownToggleButton = document.getElementById('submit-dropdown-button-toggle');
+     addClickListener(dropdownToggleButton, () => {
+       submitButtonCurrent.classList.toggle('submit-button-show');
+       submitButtonAll.classList.toggle('submit-button-show');
+       focus(getSelection());
+     });
+
+     addClickListener(document.getElementById('submit-dropdown-button-copy-csv'), (event) => {
+       if (window.sqlFetch?.result) {
+         copyTextToClipboard(toCsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
+       }
+     });
+     addClickListener(document.getElementById('submit-dropdown-button-copy-tsv'), (event) => {
+       if (window.sqlFetch?.result) {
+         copyTextToClipboard(toTsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
+       }
+     });
+     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) {
+         dropdownContent.classList.remove('submit-dropdown-content-show');
+       }
+     });
+     dropdownContent.addEventListener('focusout', function (event) {
+       if (!dropdownContent.contains(event.relatedTarget)) {
+         dropdownContent.classList.remove('submit-dropdown-content-show');
+       }
      });
+     window.editorView = createEditor(parent, window.metadata, onSubmit, onShiftSubmit);
    }
 
    function addClickListener (element, func) {
@@ -24438,7 +24510,7 @@
            }
            rows.push(row);
          }
-         createTable(columnsElement, columns, rows);
+         columnsElement.appendChild(createTable(columns, rows, null));
        }
 
        const indexEntries = Object.entries(table.indexes);
@@ -24458,49 +24530,12 @@
              rows.push(row);
            }
          }
-         createTable(indexesElement, columns, rows);
+         indexesElement.appendChild(createTable(columns, rows, null));
        }
      });
      window.structureLoaded = true;
    }
 
-   function createTable (parent, columns, rows) {
-     const tableElement = document.createElement('table');
-     const theadElement = document.createElement('thead');
-     const headerTrElement = document.createElement('tr');
-     const tbodyElement = document.createElement('tbody');
-     theadElement.appendChild(headerTrElement);
-     tableElement.appendChild(theadElement);
-     tableElement.appendChild(tbodyElement);
-     parent.appendChild(tableElement);
-
-     columns.forEach(function (columnName) {
-       const headerElement = document.createElement('th');
-       headerElement.classList.add('cell');
-       headerElement.innerText = columnName;
-       headerTrElement.appendChild(headerElement);
-     });
-     if (columns.length > 0) {
-       headerTrElement.appendChild(document.createElement('th'));
-     }
-     let highlight = false;
-     rows.forEach(function (row) {
-       const rowElement = document.createElement('tr');
-       if (highlight) {
-         rowElement.classList.add('highlighted-row');
-       }
-       highlight = !highlight;
-       tbodyElement.appendChild(rowElement);
-       row.forEach(function (value) {
-         const cellElement = document.createElement('td');
-         cellElement.classList.add('cell');
-         cellElement.innerText = value;
-         rowElement.appendChild(cellElement);
-       });
-       rowElement.appendChild(document.createElement('td'));
-     });
-   }
-
    function selectGraphTab (internal) {
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
@@ -24892,39 +24927,46 @@
      clearResultBox();
      displaySqlFetchResultStatus('result-status', fetch);
 
-     const tableElement = document.createElement('table');
-     tableElement.id = 'result-table';
-     const theadElement = document.createElement('thead');
-     const headerElement = document.createElement('tr');
-     const tbodyElement = document.createElement('tbody');
-     theadElement.appendChild(headerElement);
-     tableElement.appendChild(theadElement);
-     tableElement.appendChild(tbodyElement);
-     document.getElementById('result-box').appendChild(tableElement);
+     const createLink = function (link, value) {
+       const linkElement = document.createElement('a');
+       linkElement.href = link.template.replaceAll('{*}', encodeURIComponent(value));
+       linkElement.innerText = link.short_name;
+       linkElement.target = '_blank';
 
-     fetch.result.columns.forEach(column => {
-       const template = document.createElement('template');
-       template.innerHTML = `<th class="cell">${column}</th>`;
-       headerElement.appendChild(template.content.firstChild);
-     });
-     if (fetch.result.columns.length > 0) {
-       headerElement.appendChild(document.createElement('th'));
-     }
-     let highlight = false;
-     fetch.result.rows.forEach(function (row) {
-       const rowElement = document.createElement('tr');
-       if (highlight) {
-         rowElement.classList.add('highlighted-row');
+       const abbrElement = document.createElement('abbr');
+       abbrElement.title = link.long_name;
+       abbrElement.appendChild(linkElement);
+
+       return abbrElement
+     };
+
+     const headerRenderer = function (rowElement, column) {
+       const headerElement = document.createElement('th');
+       headerElement.innerText = column;
+       if (window.metadata.columns[column]) {
+         headerElement.colSpan = 2;
        }
-       highlight = !highlight;
-       tbodyElement.appendChild(rowElement);
-       row.forEach(function (value) {
-         const template = document.createElement('template');
-         template.innerHTML = `<td class="cell">${value}</td>`;
-         rowElement.appendChild(template.content.firstChild);
-       });
-       rowElement.appendChild(document.createElement('td'));
-     });
+       rowElement.appendChild(headerElement);
+     };
+
+     const cellRenderer = function (rowElement, column, value) {
+       if (window.metadata.columns[column]?.links?.length > 0) {
+         const linksColumnElement = document.createElement('td');
+         window.metadata.columns[column].links.forEach((link) => {
+           linksColumnElement.appendChild(createLink(link, value));
+         });
+         rowElement.appendChild(linksColumnElement);
+         const textColumnElement = document.createElement('td');
+         textColumnElement.innerText = value;
+         rowElement.appendChild(textColumnElement);
+       } else {
+         const cellElement = document.createElement('td');
+         cellElement.innerText = value;
+         rowElement.appendChild(cellElement);
+       }
+     };
+     document.getElementById('result-box')
+       .appendChild(createTable(fetch.result.columns, fetch.result.rows, 'result-table', headerRenderer, cellRenderer));
    }
 
    function disableDownloadButtons () {
@@ -25116,10 +25158,12 @@
          if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json().then((result) => {
              if (result.error) {
-               let error = `<pre>${result.error}`;
+               let error = '<div style="font-family: monospace; font-size: 16px;">\n';
+               error += `<div>${result.error}</div>\n`;
                if (result.stacktrace) {
-                 error += '\n' + result.stacktrace + '</pre>';
+                 error += '<pre>\n' + result.stacktrace + '\n</pre>\n';
                }
+               error += '</div>\n';
                document.getElementById('loading-box').innerHTML = error;
              } else if (!result.server) {
                document.getElementById('loading-box').innerHTML = `

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.47
+  version: 0.1.49
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-21 00:00:00.000000000 Z
+date: 2022-11-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mysql2
@@ -140,7 +140,9 @@ files:
 - app/sqlui.rb
 - app/sqlui_config.rb
 - app/views/databases.erb
+- app/views/error.erb
 - bin/sqlui
+- client/resources/favicon.svg
 - client/resources/sqlui.css
 - client/resources/sqlui.html
 - client/resources/sqlui.js