sqlui 0.1.24 → 0.1.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 496f67632ee9516c9569403f9907c96e9efad644cdba583fbc55b2112cfd2eb7
-  data.tar.gz: d186c82b1fb261ec365275412319c19e61acfe117472f0e370b541be3fb13af1
+  metadata.gz: 11963565427ad327b2fb3cf1eadb62f789b620c3b3de943f2a0b17f3be505356
+  data.tar.gz: 1be9eaac08e81afba77f4c1f5581a78f8e4a73d007d9e29f0ca238c956d46a6b
 SHA512:
-  metadata.gz: e9d3a25232cbdb23eaec1672da41de0825defc0fb32fb2a3d3f1cc4a639b8d6945c6ff5f8ee8165f815a34ccb61f22443bc6553e840fdd6a9ecfa74b7181754d
-  data.tar.gz: e165ae26e57800866243a266957b8d9e40da901589c8c0f44efa5efc9ac0ffb293bfd096ecaabca58c972ddfb8ac1b33e9518b9cbef60cd0233d3c97082b36ac
+  metadata.gz: 76fc95eeec60f207e1505b4d71d10e6bf329c94ddc42ca15edef83853ca6f74407b275f168f1a721c9b0d50507228dcb5aae5c4f2cb2fa54e46f1dbef79d05cb
+  data.tar.gz: 06140f3797fb34a7fa869c484ef002e5310ceceeea87e57f0c6dd984f13c2a6d75c9dddab253bf64545fa9cd58a93cac41e476b8cb8ee9c7fe86f47b38af39a0

data/.version

@@ -1 +1 @@
-0.1.24
+0.1.25

data/app/server.rb

@@ -25,20 +25,17 @@ class Server < Sinatra::Base
       body 'OK'
     end
 
+    get '/?' do
+      redirect config.list_url_path, 301
+    end
+
     get "#{config.list_url_path}/?" do
       erb :databases, locals: { config: config }
     end
 
     config.database_configs.each do |database|
-      get database.url_path.to_s do
-        redirect "#{database.url_path}/app", 301
-      end
-
-      get "#{database.url_path}/app" do
-        @html ||= File.read(File.join(resources_dir, 'sqlui.html'))
-        status 200
-        headers 'Content-Type': 'text/html'
-        body @html
+      get "#{database.url_path}/?" do
+        redirect "#{database.url_path}/query", 301
       end
 
       get "#{database.url_path}/sqlui.css" do
@@ -59,16 +56,23 @@ class Server < Sinatra::Base
         metadata = database.with_client do |client|
           {
             server: "#{config.name} - #{database.display_name}",
+            list_url_path: config.list_url_path,
             schemas: DatabaseMetadata.lookup(client, database),
-            saved: Dir.glob("#{database.saved_path}/*.sql").map do |path|
-              comment_lines = File.readlines(path).take_while do |l|
+            saved: Dir.glob("#{database.saved_path}/*.sql").to_h do |path|
+              contents = File.read(path)
+              comment_lines = contents.split("\n").take_while do |l|
                 l.start_with?('--')
               end
+              filename = File.basename(path)
               description = comment_lines.map { |l| l.sub(/^-- */, '') }.join
-              {
-                filename: File.basename(path),
-                description: description
-              }
+              [
+                filename,
+                {
+                  filename: filename,
+                  description: description,
+                  contents: contents.strip
+                }
+              ]
             end
           }
         end
@@ -77,36 +81,28 @@ class Server < Sinatra::Base
         body metadata.to_json
       end
 
-      get "#{database.url_path}/query_file" do
-        break client_error('missing file param') unless params[:file]
-
-        file = File.join(database.saved_path, params[:file])
-        break client_error('no such file') unless File.exist?(file)
-
-        sql = File.read(file)
-        result = database.with_client do |client|
-          execute_query(client, sql).tap { |r| r[:file] = params[:file] }
-        end
-
-        status 200
-        headers 'Content-Type': 'application/json'
-        body result.to_json
-      end
-
       post "#{database.url_path}/query" do
         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]
-        selection = params[:selection]
-        if selection
-          selection = selection.split(':').map { |v| Integer(v) }
+        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
-                  params[:sql][selection[0], selection[1]]
+                  full_sql[selection[0], selection[1]]
                 end
+
           break client_error("can't find query at selection") unless sql
         end
 
@@ -115,11 +111,19 @@ class Server < Sinatra::Base
         end
 
         result[:selection] = params[:selection]
+        result[:query] = full_sql
 
         status 200
         headers 'Content-Type': 'application/json'
         body result.to_json
       end
+
+      get(%r{#{Regexp.escape(database.url_path)}/(query|graph|structure|saved)}) do
+        @html ||= File.read(File.join(resources_dir, 'sqlui.html'))
+        status 200
+        headers 'Content-Type': 'text/html'
+        body @html
+      end
     end
 
     error do |e|
@@ -165,7 +169,6 @@ class Server < Sinatra::Base
       columns = []
     end
     {
-      query: sql,
       columns: columns,
       column_types: column_types,
       total_rows: rows.size,

data/app/views/databases.erb

@@ -1,11 +1,11 @@
-<html>
+<html lang="en">
 <head>
   <title>Databases</title>
 
   <style>
       body {
-          font-family: Helvetica;
-          margin: 0px;
+          font-family: Helvetica, sans-serif;
+          margin: 0;
       }
 
       h1 {
@@ -25,7 +25,8 @@
           flex-direction: row;
           border-bottom: 1px solid #ddd;
           height: 36px;
-          font-family: Helvetica;
+          font-family: Helvetica, sans-serif;
+          padding: 5px;
       }
 
       .header, .server-name {
@@ -41,28 +42,34 @@
           font-weight: normal;
       }
 
+      .name-and-links {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+      }
+
       .header {
           font-weight: bold;
           padding-left: 5px;
       }
 
       .database a {
-          margin-right: 10px;
+          margin-right: 5px;
           color: darkblue;
-          font-size: 16px
+          font-size: 16px;
+          text-decoration: none;
       }
 
       .database h2 {
-          margin: 0px;
+          margin: 0 10px 0 0;
       }
 
       .database p {
-          margin: 0px;
-          margin-top: 10px;
+          margin: 10px 0 0;
       }
 
       .database {
-          margin: 0px;
+          margin: 0;
           padding: 10px;
           cursor: pointer;
           border-bottom: 1px solid #eeeeee;
@@ -76,6 +83,18 @@
           background: #eee;
       }
   </style>
+
+  <script>
+    function openDatabase(event, url) {
+      if (event.shiftKey) {
+        window.open(url, '_blank').focus()
+      } else if (event.metaKey) {
+        window.open(url).focus()
+      } else {
+        window.location = url
+      }
+    }
+  </script>
 </head>
 
 <body>
@@ -84,11 +103,13 @@
   <h1 class="server-name"><%= config.name %> Databases</h1>
 </div>
 <% config.database_configs.each do |database_config| %>
-  <div class="database" onclick="window.location='<%= "#{database_config.url_path}/app" %>'">
-    <h2 class='name'><%= database_config.display_name %></h2>
-    <a class='query-link' href="<%= database_config.url_path %>/app">query</a>
-    <a class='saved-link' href="<%= database_config.url_path %>/app?tab=saved">saved</a>
-    <a class='structure-link' href="<%= database_config.url_path %>/app?tab=structure">structure</a>
+  <div class="database" onclick="openDatabase(event, '<%= "#{database_config.url_path}/query" %>')">
+    <div class="name-and-links">
+      <h2 class='name'><%= database_config.display_name %></h2>
+      <a class='query-link' href="<%= database_config.url_path %>/query" onclick="event.stopPropagation()">query</a>
+      <a class='saved-link' href="<%= database_config.url_path %>/saved" onclick="event.stopPropagation()">saved</a>
+      <a class='structure-link' href="<%= database_config.url_path %>/structure" onclick="event.stopPropagation()">structure</a>
+    </div>
     <p class='description'>
       <%= database_config.description %>
     </p>

data/client/resources/sqlui.css

@@ -71,6 +71,7 @@ p {
 .tab-button, .selected-tab-button {
     border: none;
     outline: none;
+    text-decoration: none;
     cursor: pointer;
     width: 150px;
     padding: 2px;
@@ -79,6 +80,7 @@ p {
     justify-content: center;
     background-color: #fff;
     font-size: 18px;
+    align-self: center;
 }
 
 .tab-button {
@@ -110,6 +112,7 @@ p {
 .submit-box {
     display: flex;
     border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
     justify-content: right;
 }
 
@@ -135,15 +138,16 @@ p {
     color: #333;
 }
 
-.result-box, .saved-box, .graph-box, .structure-box {
+.result-box, .fetch-sql-box, .saved-box, .graph-box, .structure-box {
     flex: 1;
     overflow: auto;
     display: flex;
     flex-direction: column;
 }
 
-.graph-box, .result-box {
-    border-top: 1px solid #ddd;
+.fetch-sql-box {
+    justify-content: center;
+    align-items: center;
 }
 
 .graph-box {
@@ -218,6 +222,7 @@ thead {
 
 .tabs-box {
     display: flex;
+    padding: 5px;
 }
 
 .saved-box {
@@ -287,3 +292,17 @@ select {
     color: #333;
     font-size: 18px;
 }
+
+.loader {
+    border: 8px solid #eee; /* Light grey */
+    border-top: 8px solid #888; /* Blue */
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

data/client/resources/sqlui.html

@@ -13,12 +13,12 @@
 
   <div id="main-box" class="main-box" style="display:none">
     <div class="tabs-box">
-      <h1 class="header"><a href="/sqlui">SQLUI</a></h1>
+      <h1 class="header"><a id="header-link">SQLUI</a></h1>
       <h1 id="server-name" class="server-name"></h1>
-      <input id="query-tab-button" class="tab-button" type="button" value="Query" onclick="sqlui.selectTab('query')"></input>
-      <input id="graph-tab-button" class="tab-button" type="button" value="Graph" onclick="sqlui.selectTab('graph')"></input>
-      <input id="saved-tab-button" class="tab-button" type="button" value="Saved" onclick="sqlui.selectTab('saved')"></input>
-      <input id="structure-tab-button" class="tab-button" type="button" value="Structure" onclick="sqlui.selectTab('structure')"></input>
+      <a id="query-tab-button" class="tab-button">Query</a>
+      <a id="graph-tab-button" class="tab-button">Graph</a>
+      <a id="saved-tab-button" class="tab-button">Saved</a>
+      <a id="structure-tab-button" class="tab-button">Structure</a>
     </div>
 
     <div id="query-box" class="query-box tab-content-element graph-element query-element" style="display: none;">
@@ -26,8 +26,8 @@
     </div>
 
     <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
-      <input id="submit-all-button" class="submit-button" type="button" value="execute (ctrl-shift-enter)" onclick="sqlui.submitAll();"></input>
-      <input id="submit-current-button" class="submit-button" type="button" value="execute selection (ctrl-enter)" onclick="sqlui.submitCurrent();"></input>
+      <input id="submit-current-button" class="submit-button" type="button" value="run selection (ctrl-enter)"></input>
+      <input id="submit-all-button" class="submit-button" type="button" value="run (ctrl-shift-enter)"></input>
     </div>
 
     <div id="result-box" class="result-box tab-content-element query-element" style="display: none;">
@@ -36,6 +36,10 @@
     <div id="graph-box" class="graph-box tab-content-element graph-element" style="display: none;">
     </div>
 
+    <div id="fetch-sql-box" class="fetch-sql-box tab-content-element graph-element query-element" style="display: none;">
+      <div id="result-loader" class="loader"></div>
+    </div>
+
     <div id="saved-box" class="saved-box tab-content-element saved-element" style="display: none;">
     </div>
 
@@ -55,7 +59,7 @@
     </div>
 
     <div id="status-box" class="status-box">
-      <div id="query-status" class="status tab-content-element query-element"></div>
+      <div id="result-status" class="status tab-content-element query-element"></div>
       <div id="graph-status" class="status tab-content-element graph-element"></div>
       <div id="saved-status" class="status tab-content-element saved-element"></div>
     </div>

data/client/resources/sqlui.js

@@ -1,4 +1,4 @@
-var sqlui = (function (exports) {
+(function () {
    'use strict';
 
    /**
@@ -23851,6 +23851,25 @@ var sqlui = (function (exports) {
    /* global google */
 
    function init (parent, onSubmit, onShiftSubmit) {
+     document.getElementById('query-tab-button').addEventListener('click', function (event) {
+       selectTab(event, 'query');
+     });
+     document.getElementById('saved-tab-button').addEventListener('click', function (event) {
+       selectTab(event, 'saved');
+     });
+     document.getElementById('structure-tab-button').addEventListener('click', function (event) {
+       selectTab(event, 'structure');
+     });
+     document.getElementById('graph-tab-button').addEventListener('click', function (event) {
+       selectTab(event, 'graph');
+     });
+     document.getElementById('submit-all-button').addEventListener('click', function (event) {
+       submitAll(event.target, event);
+     });
+     document.getElementById('submit-current-button').addEventListener('click', function (event) {
+       submitCurrent(event.target, event);
+     });
+
      const fixedHeightEditor = EditorView.theme({
        '.cm-scroller': { height: '200px', overflow: 'auto', resize: 'vertical' }
      });
@@ -23872,18 +23891,27 @@ var sqlui = (function (exports) {
    }
 
    function getSelection () {
-     return [window.editorView.state.selection.main.from, window.editorView.state.selection.main.to]
+     const anchor = window.editorView.state.selection.main.anchor;
+     const head = window.editorView.state.selection.main.head;
+     if (anchor === head) {
+       return `${anchor}`
+     } else {
+       return `${anchor}-${head}`
+     }
    }
 
    function setSelection (selection) {
-     window.editorView.dispatch(
-       {
-         selection: {
-           anchor: Math.min(selection[0], window.editorView.state.doc.length),
-           head: Math.min(selection[1], window.editorView.state.doc.length)
-         }
-       }
-     );
+     let anchor;
+     let head;
+     if (selection.includes('-')) {
+       selection = selection.split('-').map(x => parseInt(x));
+       anchor = Math.min(selection[0], window.editorView.state.doc.length);
+       head = Math.min(selection[1], window.editorView.state.doc.length);
+     } else {
+       anchor = Math.min(parseInt(selection), window.editorView.state.doc.length);
+       head = anchor;
+     }
+     window.editorView.dispatch({ selection: { anchor, head } });
    }
 
    function focus () {
@@ -23904,30 +23932,62 @@ var sqlui = (function (exports) {
      });
    }
 
-   function selectTab (tab) {
-     window.tab = tab;
+   function setTabInUrl (url, tab) {
+     url.pathname = url.pathname.replace(/\/[^/]+$/, `/${tab}`);
+   }
+
+   function getTabFromUrl (url) {
+     const match = url.pathname.match(/\/([^/]+)$/);
+     if (match && ['query', 'graph', 'structure', 'saved'].includes(match[1])) {
+       return match[1]
+     } else {
+       throw new Error(`invalid tab: ${url.pathname}`)
+     }
+   }
+
+   function updateTabs () {
      const url = new URL(window.location);
-     if (url.searchParams.has('tab')) {
-       if (url.searchParams.get('tab') !== tab) {
-         if (tab === 'query') {
-           url.searchParams.delete('tab');
-           window.history.pushState({}, '', url);
-           return route()
-         } else {
-           url.searchParams.set('tab', tab);
-           window.history.pushState({}, '', url);
-           return route()
+     setTabInUrl(url, 'graph');
+     document.getElementById('graph-tab-button').href = url.pathname + url.search;
+     setTabInUrl(url, 'saved');
+     document.getElementById('saved-tab-button').href = url.pathname + url.search;
+     setTabInUrl(url, 'structure');
+     document.getElementById('structure-tab-button').href = url.pathname + url.search;
+     setTabInUrl(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);
+     route(event.target, event, url);
+   }
+
+   function route (target = null, event = null, url = null) {
+     if (url) {
+       if (event) {
+         event.preventDefault();
+         if (!(target instanceof EditorView && event instanceof KeyboardEvent)) {
+           if (event.shiftKey) {
+             window.open(url).focus();
+             return
+           }
+           if (event.metaKey) {
+             window.open(url, '_blank').focus();
+             return
+           }
          }
        }
-     } else {
-       if (tab !== 'query') {
-         url.searchParams.set('tab', tab);
+       if (url.href !== window.location.href) {
          window.history.pushState({}, '', url);
-         return route()
        }
+     } else {
+       url = new URL(window.location);
      }
+     updateTabs();
+     window.tab = getTabFromUrl(url);
 
-     const tabElement = document.getElementById(`${tab}-tab-button`);
+     const tabElement = document.getElementById(`${window.tab}-tab-button`);
      Array.prototype.forEach.call(document.getElementsByClassName('selected-tab-button'), function (selected) {
        selected.classList.remove('selected-tab-button');
        selected.classList.add('tab-button');
@@ -23939,9 +23999,9 @@ var sqlui = (function (exports) {
        selected.style.display = 'none';
      });
 
-     switch (tab) {
+     switch (window.tab) {
        case 'query':
-         selectQueryTab();
+         selectResultTab();
          break
        case 'graph':
          selectGraphTab();
@@ -23953,7 +24013,7 @@ var sqlui = (function (exports) {
          selectStructureTab();
          break
        default:
-         throw new Error(`Unexpected tab: ${tab}`)
+         throw new Error(`Unexpected tab: ${window.tab}`)
      }
    }
 
@@ -24096,42 +24156,26 @@ var sqlui = (function (exports) {
    }
 
    function selectGraphTab () {
-     Array.prototype.forEach.call(document.getElementsByClassName('graph-element'), function (selected) {
-       selected.style.display = 'flex';
-     });
-
-     google.charts.load('current', { packages: ['corechart', 'line'] });
-     google.charts.setOnLoadCallback(function () {
-       loadQueryOrGraphTab(loadGraphResult, queryErrorCallback('graph-status'));
-     });
+     document.getElementById('query-box').style.display = 'flex';
+     document.getElementById('submit-box').style.display = 'flex';
+     document.getElementById('graph-box').style.display = 'flex';
+     document.getElementById('graph-status').style.display = 'flex';
+     maybeFetchResult();
 
      const selection = getSelection();
      focus();
      setSelection(selection);
    }
 
-   function selectQueryTab () {
-     Array.prototype.forEach.call(document.getElementsByClassName('query-element'), function (selected) {
-       selected.style.display = 'flex';
-     });
-
+   function selectResultTab () {
+     document.getElementById('query-box').style.display = 'flex';
+     document.getElementById('submit-box').style.display = 'flex';
+     document.getElementById('result-box').style.display = 'flex';
+     document.getElementById('result-status').style.display = 'flex';
      const selection = getSelection();
      focus();
      setSelection(selection);
-
-     loadQueryOrGraphTab(loadQueryResult, queryErrorCallback('query-status'));
-   }
-
-   function queryErrorCallback (statusElementId) {
-     const statusElement = document.getElementById(statusElementId);
-     return function (message, error) {
-       if (error) {
-         console.log(`${message}\n${error}`);
-         statusElement.innerText = `error: ${message} (check console)`;
-       } else {
-         statusElement.innerText = `error: ${message}`;
-       }
-     }
+     maybeFetchResult();
    }
 
    function selectSavedTab () {
@@ -24149,22 +24193,20 @@ var sqlui = (function (exports) {
      }
 
      const saved = window.metadata.saved;
-     if (saved && saved.length === 1) {
+     if (Object.keys(saved).length === 1) {
        setSavedStatus('1 file');
      } else {
        setSavedStatus(`${saved.length} files`);
      }
-     saved.forEach(file => {
+     Object.values(saved).forEach(file => {
        const divElement = document.createElement('div');
        divElement.classList.add('saved-list-item');
        divElement.addEventListener('click', function (event) {
          clearResult();
-         const url = new URL(window.location);
-         url.searchParams.delete('sql');
-         url.searchParams.delete('tab');
+         const url = new URL(window.location.origin + window.location.pathname);
+         setTabInUrl(url, 'query');
          url.searchParams.set('file', file.filename);
-         window.history.pushState({}, '', url);
-         route();
+         route(event.target, event, url);
        });
        const nameElement = document.createElement('h2');
        nameElement.innerText = file.filename;
@@ -24179,59 +24221,68 @@ var sqlui = (function (exports) {
      window.savedLoaded = true;
    }
 
-   function submitAll () {
-     submit(null);
+   function submitAll (target, event) {
+     submit(target, event);
    }
 
-   function submitCurrent () {
-     submit(getSelection());
+   function submitCurrent (target, event) {
+     submit(target, event, getSelection());
    }
 
-   function submit (selection) {
+   function submit (target, event, selection = null) {
+     clearResult();
      const url = new URL(window.location);
-     if (selection) {
-       url.searchParams.set('selection', selection.join(':'));
-     } else {
-       url.searchParams.delete('selection');
-     }
-
      let sql = getValue().trim();
      sql = sql === '' ? null : sql;
 
+     url.searchParams.delete('run');
+
      if (url.searchParams.has('file')) {
-       url.searchParams.delete('file');
-       url.searchParams.set('sql', sql);
-       window.history.pushState({}, '', url);
+       if (window.metadata.saved[url.searchParams.get('file')].contents !== getValue()) {
+         url.searchParams.delete('file');
+         url.searchParams.set('sql', sql);
+       }
      } else {
        let sqlParam = url.searchParams.get('sql')?.trim();
        sqlParam = sqlParam === '' ? null : sqlParam;
 
-       if (sqlParam !== sql) {
-         if (sql === null) {
-           url.searchParams.delete('sql');
-           window.history.pushState({}, '', url);
-         } else {
-           url.searchParams.set('sql', sql);
-           window.history.pushState({}, '', url);
-         }
+       if (sqlParam !== sql && sql === null) {
+         url.searchParams.delete('sql');
+       } else if (sqlParam !== sql) {
+         url.searchParams.set('sql', sql);
+       }
+     }
+
+     if (sql) {
+       if (selection) {
+         url.searchParams.set('selection', selection);
        } else {
-         window.history.replaceState({}, '', url);
+         url.searchParams.delete('selection');
        }
+     } else {
+       url.searchParams.delete('selection');
+       url.searchParams.delete('sql');
+       url.searchParams.delete('file');
      }
-     clearResult();
-     route();
+
+     route(target, event, url);
    }
 
    function clearResult () {
      clearGraphStatus();
-     clearQueryStatus();
+     clearResultStatus();
      clearGraphBox();
      clearResultBox();
-     window.result = null;
+     const existingRequest = window.sqlFetch;
+     if (existingRequest?.state === 'pending') {
+       existingRequest.state = 'aborted';
+       existingRequest.fetchController.abort();
+     }
+     window.sqlFetch = null;
    }
 
-   function clearQueryStatus () {
-     document.getElementById('query-status').innerText = '';
+   function clearResultStatus () {
+     document.getElementById('result-status').innerText = '';
    }
 
    function clearGraphStatus () {
@@ -24252,7 +24303,7 @@ var sqlui = (function (exports) {
      }
    }
 
-   function fetchSql (sql, selection, successCallback, errorCallback) {
+   function fetchSql (request, selection, callback) {
      fetch('query', {
        headers: {
          Accept: 'application/json',
@@ -24260,137 +24311,165 @@ var sqlui = (function (exports) {
        },
        method: 'POST',
        body: JSON.stringify({
-         sql,
+         sql: request.sql,
          selection
-       })
+       }),
+       signal: request.fetchController.signal
      })
        .then((response) => {
          const contentType = response.headers.get('content-type');
          if (contentType && contentType.indexOf('application/json') !== -1) {
            response.json().then((result) => {
              if (result?.query) {
-               successCallback(result);
-             } else if (result?.error) {
-               errorCallback(result.error, result.stacktrace);
-             } else if (result) {
-               errorCallback('failed to execute query', result.toString());
+               request.state = 'success';
+               request.result = result;
              } else {
-               errorCallback('failed to execute query');
+               request.state = 'error';
+               if (result?.error) {
+                 request.error_message = result.error;
+                 request.error_details = result.stacktrace;
+               } else if (result) {
+                 request.error_message = 'failed to execute query';
+                 request.error_details = result.toString();
+               } else {
+                 request.error_message = 'failed to execute query';
+               }
              }
+             callback(request);
            });
          } else {
            response.text().then((result) => {
-             errorCallback('failed to execute query', result);
+             request.state = 'error';
+             request.error_message = 'failed to execute query';
+             request.error_details = result;
+             callback(request);
            });
          }
        })
        .catch(function (error) {
-         errorCallback('failed to execute query', error.stack);
-       });
-   }
-
-   function fetchFile (name, successCallback, errorCallback) {
-     fetch(`query_file?file=${name}`, {
-       headers: {
-         Accept: 'application/json'
-       },
-       method: 'GET'
-     })
-       .then((response) => {
-         const contentType = response.headers.get('content-type');
-         if (contentType && contentType.indexOf('application/json') !== -1) {
-           response.json().then((result) => {
-             if (result?.query) {
-               successCallback(result);
-             } else if (result?.error) {
-               errorCallback(result.error, result.stacktrace);
-             } else if (result) {
-               errorCallback('failed to load file  ', result.toString());
-             } else {
-               errorCallback('failed to load file');
-             }
-           });
-         } else {
-           errorCallback('failed to load file', response.toString());
+         if (request.state === 'pending') {
+           request.state = 'error';
+           request.error_message = 'failed to execute query';
+           request.error_details = error.stack;
+           callback(request);
          }
-       })
-       .catch(function (error) {
-         errorCallback('failed to load file', error.stack);
        });
    }
 
-   function loadQueryOrGraphTab (callback, errorCallback) {
+   function maybeFetchResult () {
      const params = new URLSearchParams(window.location.search);
      const sql = params.get('sql');
      const file = params.get('file');
-     const selection = params.has('selection') ? params.get('selection') : null;
+     const selection = params.get('selection');
+     const run = !params.has('run') || !['0', 'false'].includes(params.get('run').toLowerCase());
 
-     if (params.has('sql') && window.result && sql === window.result.query) {
-       callback();
-       return
-     } else if (params.has('file') && window.result && file === window.result.file) {
-       callback();
-       return
-     }
-
-     if (params.has('file') && params.has('sql') && selection === window.result.selection) {
+     if (params.has('file') && params.has('sql')) {
        // TODO: show an error.
        throw new Error('You can only specify a file or sql, not both.')
      }
 
+     const request = {
+       fetchController: new AbortController(),
+       state: 'pending',
+       sql,
+       file,
+       selection
+     };
+
+     if (params.has('file')) {
+       const fileDetails = window.metadata.saved[params.get('file')];
+       if (!fileDetails) {
+         throw new Error(`no such file: ${params.get('file')}`)
+       }
+       request.file = file;
+       request.sql = fileDetails.contents;
+     } else if (params.has('sql')) {
+       request.sql = sql;
+     }
+
+     const existingRequest = window.sqlFetch;
+     if (existingRequest) {
+       const selectionMatches = selection === existingRequest.selection;
+       const sqlMatches = params.has('sql') && sql === existingRequest.sql;
+       const fileMatches = params.has('file') && file === existingRequest.file;
+       const queryMatches = sqlMatches || fileMatches;
+       if (selectionMatches && queryMatches) {
+         displaySqlFetch(existingRequest);
+         if (params.has('selection')) {
+           focus();
+           setSelection(selection);
+         }
+         return
+       }
+     }
+
      clearResult();
 
-     if (params.has('sql')) {
-       setValue(sql);
-       fetchSql(params.get('sql'), selection, function (result) {
-         window.result = result;
-         callback();
-       }, errorCallback);
-     } else if (params.has('file')) {
-       setValue('');
-       fetchFile(file, function (result) {
-         window.result = result;
-         setValue(result.query);
-         callback();
-       }, errorCallback);
+     if (params.has('sql') || params.has('file')) {
+       setValue(request.sql);
+       if (run) {
+         window.sqlFetch = request;
+         displaySqlFetch(request);
+         fetchSql(request, selection, displaySqlFetch);
+       }
      }
      if (params.has('selection')) {
        focus();
-       setSelection(params.get('selection').split(':'));
+       setSelection(selection);
      }
    }
 
-   function loadQueryResult () {
-     const resultElement = document.getElementById('result-box');
-     if (resultElement.children.length > 0) {
+   function displaySqlFetchInResultTab (fetch) {
+     const fetchSqlBoxElement = document.getElementById('fetch-sql-box');
+     const resultBoxElement = document.getElementById('result-box');
+     if (fetch.state === 'pending') {
+       clearResultBox();
+       resultBoxElement.style.display = 'none';
+       fetchSqlBoxElement.style.display = 'flex';
        return
      }
 
-     setQueryStatus(window.result);
+     resultBoxElement.style.display = 'flex';
+     fetchSqlBoxElement.style.display = 'none';
+
+     if (fetch.state === 'error') {
+       clearResultBox();
+       displaySqlFetchError('result-status', fetch.error_message, fetch.error_details);
+       return
+     }
 
-     // if (!window.result.rows) {
-     //   return
-     // }
+     if (fetch.state !== 'success') {
+       throw new Error(`unexpected fetch sql request status: ${fetch.status}`)
+     }
+
+     if (document.getElementById('result-table')) {
+       // Results already displayed.
+       return
+     }
+
+     clearResultBox();
+     displaySqlFetchResultStatus('result-status', fetch.result);
 
      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);
-     resultElement.appendChild(tableElement);
+     resultBoxElement.appendChild(tableElement);
 
-     window.result.columns.forEach(column => {
+     fetch.result.columns.forEach(column => {
        const template = document.createElement('template');
        template.innerHTML = `<th class="cell">${column}</th>`;
        headerElement.appendChild(template.content.firstChild);
      });
-     if (window.result.columns.length > 0) {
+     if (fetch.result.columns.length > 0) {
        headerElement.appendChild(document.createElement('th'));
      }
      let highlight = false;
-     window.result.rows.forEach(function (row) {
+     fetch.result.rows.forEach(function (row) {
        const rowElement = document.createElement('tr');
        if (highlight) {
          rowElement.classList.add('highlighted-row');
@@ -24404,29 +24483,67 @@ var sqlui = (function (exports) {
        });
        rowElement.appendChild(document.createElement('td'));
      });
+   }
 
-     document.getElementById('result-box').style.display = 'flex';
+   function displaySqlFetch (fetch) {
+     if (window.tab === 'query') {
+       displaySqlFetchInResultTab(fetch);
+     } else if (window.tab === 'graph') {
+       displaySqlFetchInGraphTab(fetch);
+     }
+   }
+
+   function displaySqlFetchError (statusElementId, message, details) {
+     const statusElement = document.getElementById(statusElementId);
+     if (details) {
+       console.log(`${message}\n${details}`);
+       statusElement.innerText = `error: ${message} (check console)`;
+     } else {
+       statusElement.innerText = `error: ${message}`;
+     }
    }
 
-   function loadGraphResult () {
-     setGraphStatus(window.result);
+   function displaySqlFetchInGraphTab (fetch) {
+     const graphBoxElement = document.getElementById('graph-box');
+     const fetchSqlBoxElement = document.getElementById('fetch-sql-box');
+     if (fetch.state === 'pending') {
+       clearGraphBox();
+       graphBoxElement.style.display = 'none';
+       fetchSqlBoxElement.style.display = 'flex';
+       return
+     }
+
+     graphBoxElement.style.display = 'flex';
+     fetchSqlBoxElement.style.display = 'none';
 
-     if (!window.result.rows) {
+     if (fetch.state === 'error') {
+       clearGraphBox();
+       displaySqlFetchError('graph-status', fetch.error_message, fetch.error_details);
        return
      }
-     if (window.result.rows.length === 0 || window.result.columns.length < 2) {
+
+     if (fetch.state !== 'success') {
+       throw new Error(`unexpected fetch sql request status: ${fetch.status}`)
+     }
+     clearGraphBox();
+     displaySqlFetchResultStatus('graph-status', fetch.result);
+
+     if (!fetch.result.rows) {
+       return
+     }
+     if (fetch.result.rows.length === 0 || fetch.result.columns.length < 2) {
        return
      }
      const dataTable = new google.visualization.DataTable();
-     window.result.columns.forEach((column, index) => {
-       dataTable.addColumn(window.result.column_types[index], column);
+     fetch.result.columns.forEach((column, index) => {
+       dataTable.addColumn(fetch.result.column_types[index], column);
      });
 
-     window.result.rows.forEach((row) => {
+     fetch.result.rows.forEach((row) => {
        const rowValues = row.map((value, index) => {
-         if (window.result.column_types[index] === 'date' || window.result.column_types[index] === 'datetime') {
+         if (fetch.result.column_types[index] === 'date' || fetch.result.column_types[index] === 'datetime') {
            return new Date(value)
-         } else if (window.result.column_types[index] === 'timeofday') {
+         } else if (fetch.result.column_types[index] === 'timeofday') {
            // TODO: This should be hour, minute, second, milliseconds
            return [0, 0, 0, 0]
          } else {
@@ -24436,36 +24553,20 @@ var sqlui = (function (exports) {
        dataTable.addRow(rowValues);
      });
 
-     const graphBoxElement = document.getElementById('graph-box');
-
      const chart = new google.visualization.LineChart(graphBoxElement);
      const options = {
        hAxis: {
-         title: window.result.columns[0]
+         title: fetch.result.columns[0]
        },
        vAxis: {
-         title: window.result.columns[1]
+         title: fetch.result.columns[1]
        }
      };
      chart.draw(dataTable, options);
    }
 
-   function setGraphStatus (result) {
-     const statusElement = document.getElementById('graph-status');
-
-     if (result.total_rows === 1) {
-       statusElement.innerText = `${result.total_rows} row`;
-     } else {
-       statusElement.innerText = `${result.total_rows} rows`;
-     }
-
-     if (result.total_rows > result.rows.length) {
-       statusElement.innerText += ` (truncated to ${result.rows.length})`;
-     }
-   }
-
-   function setQueryStatus (result) {
-     const statusElement = document.getElementById('query-status');
+   function displaySqlFetchResultStatus (statusElementId, result) {
+     const statusElement = document.getElementById(statusElementId);
 
      if (result.total_rows === 1) {
        statusElement.innerText = `${result.total_rows} row`;
@@ -24487,24 +24588,24 @@ var sqlui = (function (exports) {
    });
 
    window.addEventListener('resize', function (event) {
-     if (window.tab === 'graph' && window.result) {
+     if (window.tab === 'graph' && window.sqlFetch.result) {
        clearGraphBox();
-       loadGraphResult();
+       displaySqlFetchInGraphTab(window.sqlFetch);
      }
    });
 
-   function route () {
-     selectTab(new URLSearchParams(window.location.search).get('tab') || 'query');
-   }
-
    window.onload = function () {
-     fetch('metadata', {
-       headers: {
-         Accept: 'application/json'
-       },
-       method: 'GET'
-     })
-       .then((response) => {
+     Promise.all([
+       google.charts.load('current', { packages: ['corechart', 'line'] }),
+       fetch('metadata', {
+         headers: {
+           Accept: 'application/json'
+         },
+         method: 'GET'
+       })
+     ])
+       .then((results) => {
+         const response = results[1];
          const contentType = response.headers.get('content-type');
          if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json().then((result) => {
@@ -24525,7 +24626,9 @@ var sqlui = (function (exports) {
                window.metadata = result;
                document.getElementById('loading-box').style.display = 'none';
                document.getElementById('main-box').style.display = 'flex';
-               document.getElementById('server-name').innerText = result.server;
+               document.getElementById('server-name').innerText = window.metadata.server;
+               document.title = `SQLUI ${window.metadata.server}`;
+               document.getElementById('header-link').href = result.list_url_path;
                const queryElement = document.getElementById('query');
 
                init(queryElement, submitCurrent, submitAll);
@@ -24547,10 +24650,4 @@ var sqlui = (function (exports) {
        });
    };
 
-   exports.selectTab = selectTab;
-   exports.submitAll = submitAll;
-   exports.submitCurrent = submitCurrent;
-
-   return exports;
-
-})({});
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.24
+  version: 0.1.25
 platform: ruby
 authors:
 - Nick Dower
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-28 00:00:00.000000000 Z
+date: 2022-10-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mysql2