sqlui 0.1.17 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db5b12190e0cde95f8a0063703cf3e0398bd8cfa862f1122b90c4f95b721c1ce
-  data.tar.gz: 0b9a4db845a28a5a40923e8107bf961472cf57928b197b2b610b4e957fd365aa
+  metadata.gz: f951e672b477e0fd4882c1aa4e42472975ac07fa6a2955eb4430bc1018ea6165
+  data.tar.gz: d8e7da6fe289ed3e94322a3ea3d5ce461356cbfa73e2e2732bab9001a8d3af24
 SHA512:
-  metadata.gz: 4e74d51eccdec8b53c8e9455f555a55ab2cde80ae3e800b11efbbc57eb8f86bdcb8528faa2b70bc3589c2205baa3f3a7a08d866548257d045de89a437199c75b
-  data.tar.gz: 87b4226337f573e294e2f181dc9c0485bc1ab407f0585d6c3c7232c5d965f6d7315cd138656a40337169ce39a01c2f18ad16f2855f5e506db8ac0eb4222a70f0
+  metadata.gz: 6769e3ee3c0b5330ca0b1ac1433370756838cec3187f0bd9822308704d31ee1608592199acb9b622edba8d45146c557e413d42c0a060bb9ace9b7653b43ad54c
+  data.tar.gz: 4ef70417125cdb931c5f6edba2ef7986be7bda22f0f27c362d7bea97df81752133493e9507b941cbfe51261fa4e77aca85f4838354805a97d88e64f0240e452d

data/.version

@@ -1 +1 @@
-0.1.17
+0.1.18

data/app/sqlui.rb

@@ -75,7 +75,7 @@ class SQLUI
   end
 
   def metadata
-    @metadata ||= load_metadata
+    load_metadata
   end
 
   def load_metadata

data/app/views/databases.erb

@@ -5,11 +5,13 @@
     <style>
       body {
         font-family: Helvetica;
+        margin: 0px;
       }
 
       h1 {
         font-size: 30px;
-        margin-bottom: 30px;
+        margin: 10px;
+
       }
 
       .database a {
@@ -20,8 +22,6 @@
 
       .database h2 {
         margin: 0px;
-        margin-top: 10px;
-        margin-bottom: 0px;
         font-size: 20px;
         font-weight: bold;
       }
@@ -29,11 +29,12 @@
       .database p {
         margin: 0px;
         margin-top: 10px;
-        padding-bottom: 20px;
         font-size: 16px;
       }
 
       .database {
+        margin: 0px;
+        padding: 10px;
         cursor: pointer;
         border-bottom: 1px solid #eeeeee;
       }
@@ -52,11 +53,11 @@
     <h1>Databases</h1>
     <% databases.values.each do |database| %>
       <div class="database" onclick="window.location='<%= "/db/#{database['url_path']}/app" %>'">
-      <h2><%= database['name'] %></h2>
-      <a href="/db/<%= database['url_path'] %>/app">query</a>
-      <a href="/db/<%= database['url_path'] %>/app?tab=saved">saved</a>
-      <a href="/db/<%= database['url_path'] %>/app?tab=structure">structure</a>
-      <p>
+      <h2 class='name'><%= database['name'] %></h2>
+      <a class='query-link' href="/db/<%= database['url_path'] %>/app">query</a>
+      <a class='saved-link' href="/db/<%= database['url_path'] %>/app?tab=saved">saved</a>
+      <a class='structure-link' href="/db/<%= database['url_path'] %>/app?tab=structure">structure</a>
+      <p class='description'>
         <%= database['description'] %>
       </p>
     </div>

data/client/resources/sqlui.js

@@ -23848,177 +23848,179 @@ var sqlui = (function (exports) {
    */
    const StandardSQL = /*@__PURE__*/SQLDialect.define({});
 
-   function init(parent, onSubmit) {
+   /* global google */
+
+   function init (parent, onSubmit) {
      const fixedHeightEditor = EditorView.theme({
-       ".cm-scroller": { height: "200px", overflow: "auto", resize: "vertical" },
+       '.cm-scroller': { height: '200px', overflow: 'auto', resize: 'vertical' }
      });
      window.editorView = new EditorView({
        state: EditorState.create({
          extensions: [
            keymap.of([
-             {key: "Ctrl-Enter", run: onSubmit, preventDefault: true},
+             { key: 'Ctrl-Enter', run: onSubmit, preventDefault: true },
              ...defaultKeymap
            ]),
            basicSetup,
            sql(),
            fixedHeightEditor,
-           placeholder("Ctrl-Enter to submit")
+           placeholder('Ctrl-Enter to submit')
          ]
        }),
-       parent: parent
+       parent
      });
    }
 
-   function getCursor() {
-     return window.editorView.state.selection.main.head;
+   function getCursor () {
+     return window.editorView.state.selection.main.head
    }
 
-   function setCursor(cursor) {
-     window.editorView.dispatch({selection: {anchor: Math.min(cursor, window.editorView.state.doc.length)}});
+   function setCursor (cursor) {
+     window.editorView.dispatch({ selection: { anchor: Math.min(cursor, window.editorView.state.doc.length) } });
    }
 
-   function focus() {
+   function focus () {
      window.editorView.focus();
    }
 
-   function getValue() {
-     return window.editorView.state.doc.toString();
+   function getValue () {
+     return window.editorView.state.doc.toString()
    }
 
-   function setValue(value) {
+   function setValue (value) {
      window.editorView.dispatch({
        changes: {
          from: 0,
          to: window.editorView.state.doc.length,
          insert: value
-       },
+       }
      });
    }
 
-   function selectTab(tab) {
+   function selectTab (tab) {
      window.tab = tab;
      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();
+     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();
+           url.searchParams.set('tab', tab);
+           window.history.pushState({}, '', url);
+           return route()
          }
        }
      } else {
-       if (tab !== "query") {
-         url.searchParams.set("tab", tab);
-         window.history.pushState({}, "", url);
-         return route();
+       if (tab !== 'query') {
+         url.searchParams.set('tab', tab);
+         window.history.pushState({}, '', url);
+         return route()
        }
      }
 
      const tabElement = document.getElementById(`${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");
+     Array.prototype.forEach.call(document.getElementsByClassName('selected-tab-button'), function (selected) {
+       selected.classList.remove('selected-tab-button');
+       selected.classList.add('tab-button');
      });
-     tabElement.classList.remove("tab-button");
-     tabElement.classList.add("selected-tab-button");
+     tabElement.classList.remove('tab-button');
+     tabElement.classList.add('selected-tab-button');
 
-     Array.prototype.forEach.call(document.getElementsByClassName("tab-content-element"), function(selected) {
-       selected.style.display = "none";
+     Array.prototype.forEach.call(document.getElementsByClassName('tab-content-element'), function (selected) {
+       selected.style.display = 'none';
      });
 
      switch (tab) {
-       case "query":
+       case 'query':
          selectQueryTab();
-         break;
-       case "graph":
+         break
+       case 'graph':
          selectGraphTab();
-         break;
-       case "saved":
+         break
+       case 'saved':
          selectSavedTab();
-         break;
-       case "structure":
+         break
+       case 'structure':
          selectStructureTab();
-         break;
+         break
        default:
-         throw `Unexpected tab: ${tab}`;
+         throw new Error(`Unexpected tab: ${tab}`)
      }
    }
 
-   function selectStructureTab() {
-     Array.prototype.forEach.call(document.getElementsByClassName("structure-element"), function(selected) {
-       selected.style.display = "flex";
+   function selectStructureTab () {
+     Array.prototype.forEach.call(document.getElementsByClassName('structure-element'), function (selected) {
+       selected.style.display = 'flex';
      });
 
      if (window.structureLoaded) {
-       return;
+       return
      }
 
-     const schemasElement = document.getElementById("schemas");
-     const tablesElement = document.getElementById("tables");
-     const columnsElement = document.getElementById("columns");
-     const indexesElement = document.getElementById("indexes");
+     const schemasElement = document.getElementById('schemas');
+     const tablesElement = document.getElementById('tables');
+     const columnsElement = document.getElementById('columns');
+     const indexesElement = document.getElementById('indexes');
 
-     const schemaNames = Object.keys(window.metadata["schemas"]);
-     if (schemaNames.length == 1) {
+     const schemaNames = Object.keys(window.metadata.schemas);
+     if (schemaNames.length === 1) {
        schemasElement.style.display = 'none';
        // TODO: duplicate code
-       while(tablesElement.firstChild) {
+       while (tablesElement.firstChild) {
          tablesElement.removeChild(tablesElement.firstChild);
        }
        const schemaName = schemaNames[0];
-       const schema = window.metadata["schemas"][schemaName];
-       const tableNames = Object.keys(schema["tables"]);
-       tableNames.forEach(function(tableName) {
-         const optionElement = document.createElement("option");
+       const schema = window.metadata.schemas[schemaName];
+       const tableNames = Object.keys(schema.tables);
+       tableNames.forEach(function (tableName) {
+         const optionElement = document.createElement('option');
          optionElement.value = tableName;
          optionElement.innerText = tableName;
          tablesElement.appendChild(optionElement);
        });
      } else {
        schemasElement.style.display = 'flex';
-       schemaNames.forEach(function(schemaName) {
-         const optionElement = document.createElement("option");
+       schemaNames.forEach(function (schemaName) {
+         const optionElement = document.createElement('option');
          optionElement.value = schemaName;
          optionElement.innerText = schemaName;
          schemasElement.appendChild(optionElement);
        });
-       schemasElement.addEventListener("change", function() {
-         while(tablesElement.firstChild) {
+       schemasElement.addEventListener('change', function () {
+         while (tablesElement.firstChild) {
            tablesElement.removeChild(tablesElement.firstChild);
          }
          const schemaName = schemasElement.value;
-         const schema = window.metadata["schemas"][schemaName];
-         const tableNames = Object.keys(schema["tables"]);
-         tableNames.forEach(function(tableName) {
-           const optionElement = document.createElement("option");
+         const schema = window.metadata.schemas[schemaName];
+         const tableNames = Object.keys(schema.tables);
+         tableNames.forEach(function (tableName) {
+           const optionElement = document.createElement('option');
            optionElement.value = tableName;
            optionElement.innerText = tableName;
            tablesElement.appendChild(optionElement);
          });
        });
      }
-     tablesElement.addEventListener("change", function() {
-       while(columnsElement.firstChild) {
+     tablesElement.addEventListener('change', function () {
+       while (columnsElement.firstChild) {
          columnsElement.removeChild(columnsElement.firstChild);
        }
-       while(indexesElement.firstChild) {
+       while (indexesElement.firstChild) {
          indexesElement.removeChild(indexesElement.firstChild);
        }
-       const schemaName = schemaNames.length == 1 ? schemaNames[0] : schemasElement.value;
+       const schemaName = schemaNames.length === 1 ? schemaNames[0] : schemasElement.value;
        const tableName = tablesElement.value;
-       const table = window.metadata["schemas"][schemaName]["tables"][tableName];
+       const table = window.metadata.schemas[schemaName].tables[tableName];
 
-       const columnEntries = Object.entries(table["columns"]);
+       const columnEntries = Object.entries(table.columns);
        if (columnEntries.length > 0) {
          const columns = Object.keys(columnEntries[0][1]);
          const rows = [];
-         for (const [_, column] of columnEntries) {
+         for (const [, column] of columnEntries) {
            const row = [];
-           for (const [_, value] of Object.entries(column)) {
+           for (const [, value] of Object.entries(column)) {
              row.push(value);
            }
            rows.push(row);
@@ -24026,7 +24028,7 @@ var sqlui = (function (exports) {
          createTable(columnsElement, columns, rows);
        }
 
-       const indexEntries = Object.entries(table["indexes"]);
+       const indexEntries = Object.entries(table.indexes);
        if (indexEntries.length > 0) {
          const firstIndex = indexEntries[0][1];
          const indexColumns = Object.keys(firstIndex);
@@ -24034,10 +24036,10 @@ var sqlui = (function (exports) {
          const columns = indexColumnKeys;
 
          const rows = [];
-         for (const [_, index] of indexEntries) {
-           for (const [_, column] of Object.entries(index)) {
+         for (const [, index] of indexEntries) {
+           for (const [, column] of Object.entries(index)) {
              const row = [];
-             for (const [_, value] of Object.entries(column)) {
+             for (const [, value] of Object.entries(column)) {
                row.push(value);
              }
              rows.push(row);
@@ -24049,32 +24051,34 @@ var sqlui = (function (exports) {
      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");
+   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");
+     columns.forEach(function (columnName) {
+       const headerElement = document.createElement('th');
+       headerElement.classList.add('cell');
        headerElement.innerText = columnName;
        headerTrElement.appendChild(headerElement);
      });
      headerTrElement.appendChild(document.createElement('th'));
      let highlight = false;
-     rows.forEach(function(row) {
-       const rowElement = document.createElement("tr");
+     rows.forEach(function (row) {
+       const rowElement = document.createElement('tr');
        if (highlight) {
-         rowElement.classList.add("highlighted-row");
+         rowElement.classList.add('highlighted-row');
        }
        highlight = !highlight;
        tbodyElement.appendChild(rowElement);
-       row.forEach(function(value) {
-         const cellElement = document.createElement("td");
+       row.forEach(function (value) {
+         const cellElement = document.createElement('td');
+         cellElement.classList.add('cell');
          cellElement.innerText = value;
          rowElement.appendChild(cellElement);
        });
@@ -24082,13 +24086,13 @@ var sqlui = (function (exports) {
      });
    }
 
-   function selectGraphTab() {
-     Array.prototype.forEach.call(document.getElementsByClassName("graph-element"), function(selected) {
-       selected.style.display = "flex";
+   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() {
+     google.charts.load('current', { packages: ['corechart', 'line'] });
+     google.charts.setOnLoadCallback(function () {
        loadQueryOrGraphTab(loadGraphResult);
      });
 
@@ -24097,9 +24101,9 @@ var sqlui = (function (exports) {
      setCursor(cursor);
    }
 
-   function selectQueryTab() {
-     Array.prototype.forEach.call(document.getElementsByClassName("query-element"), function(selected) {
-       selected.style.display = "flex";
+   function selectQueryTab () {
+     Array.prototype.forEach.call(document.getElementsByClassName('query-element'), function (selected) {
+       selected.style.display = 'flex';
      });
 
      const cursor = getCursor();
@@ -24109,43 +24113,43 @@ var sqlui = (function (exports) {
      loadQueryOrGraphTab(loadQueryResult);
    }
 
-   function selectSavedTab() {
-     Array.prototype.forEach.call(document.getElementsByClassName("saved-element"), function(selected) {
-       selected.style.display = "flex";
+   function selectSavedTab () {
+     Array.prototype.forEach.call(document.getElementsByClassName('saved-element'), function (selected) {
+       selected.style.display = 'flex';
      });
 
      if (window.savedLoaded) {
-       return;
+       return
      }
 
-     const savedElement = document.getElementById("saved-box");
+     const savedElement = document.getElementById('saved-box');
      if (savedElement.children.length > 0) {
-       return;
+       return
      }
 
-     const saved = window.metadata["saved"];
+     const saved = window.metadata.saved;
      if (saved && saved.length === 1) {
-       setSavedStatus("1 file");
+       setSavedStatus('1 file');
      } else {
        setSavedStatus(`${saved.length} files`);
      }
      saved.forEach(file => {
-       const divElement = document.createElement("div");
-       divElement.addEventListener("click", function(event) {
+       const divElement = document.createElement('div');
+       divElement.addEventListener('click', function (event) {
          clearResult();
          const url = new URL(window.location);
-         url.searchParams.delete("sql");
-         url.searchParams.delete("tab");
-         url.searchParams.set("file", file["filename"]);
-         window.history.pushState({}, "", url);
+         url.searchParams.delete('sql');
+         url.searchParams.delete('tab');
+         url.searchParams.set('file', file.filename);
+         window.history.pushState({}, '', url);
          route();
        });
-       const nameElement = document.createElement("h1");
-       nameElement.innerText = file["filename"];
+       const nameElement = document.createElement('h1');
+       nameElement.innerText = file.filename;
        divElement.appendChild(nameElement);
 
-       const descriptionElement = document.createElement("p");
-       descriptionElement.innerText = file["description"];
+       const descriptionElement = document.createElement('p');
+       descriptionElement.innerText = file.description;
        divElement.appendChild(descriptionElement);
 
        savedElement.appendChild(divElement);
@@ -24153,38 +24157,38 @@ var sqlui = (function (exports) {
      window.savedLoaded = true;
    }
 
-   function submit() {
+   function submit () {
      const url = new URL(window.location);
-     url.searchParams.set("cursor", getCursor());
+     url.searchParams.set('cursor', getCursor());
 
      let sql = getValue().trim();
-     sql = sql === "" ? null : sql;
+     sql = sql === '' ? null : sql;
 
-     if (url.searchParams.has("file")) {
-       url.searchParams.delete("file");
-       url.searchParams.set("sql", sql);
-       window.history.pushState({}, "", url);
+     if (url.searchParams.has('file')) {
+       url.searchParams.delete('file');
+       url.searchParams.set('sql', sql);
+       window.history.pushState({}, '', url);
      } else {
-       let sqlParam = url.searchParams.get("sql")?.trim();
-       sqlParam = sqlParam === "" ? null : sqlParam;
+       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);
+           url.searchParams.delete('sql');
+           window.history.pushState({}, '', url);
          } else {
-           url.searchParams.set("sql", sql);
-           window.history.pushState({}, "", url);
+           url.searchParams.set('sql', sql);
+           window.history.pushState({}, '', url);
          }
        } else {
-         window.history.replaceState({}, "", url);
+         window.history.replaceState({}, '', url);
        }
      }
      clearResult();
      route();
    }
 
-   function clearResult() {
+   function clearResult () {
      clearGraphStatus();
      clearQueryStatus();
      clearGraphBox();
@@ -24192,266 +24196,267 @@ var sqlui = (function (exports) {
      window.result = null;
    }
 
-   function clearQueryStatus() {
-     document.getElementById("query-status").innerText = "";
+   function clearQueryStatus () {
+     document.getElementById('query-status').innerText = '';
    }
 
-   function clearGraphStatus() {
-     document.getElementById("graph-status").innerText = "";
+   function clearGraphStatus () {
+     document.getElementById('graph-status').innerText = '';
    }
 
-   function clearResultBox() {
-     const resultElement = document.getElementById("result-box");
-     while(resultElement.firstChild) {
+   function clearResultBox () {
+     const resultElement = document.getElementById('result-box');
+     while (resultElement.firstChild) {
        resultElement.removeChild(resultElement.firstChild);
      }
    }
 
-   function clearGraphBox() {
-     const graphElement = document.getElementById("graph-box");
-     while(graphElement.firstChild) {
+   function clearGraphBox () {
+     const graphElement = document.getElementById('graph-box');
+     while (graphElement.firstChild) {
        graphElement.removeChild(graphElement.firstChild);
      }
    }
 
-   function fetchSql(sql, cursor, callback) {
-     fetch("query", {
-       "headers": {
-         "Accept": "application/json",
-         "Content-Type": "application/json"
+   function fetchSql (sql, cursor, callback) {
+     fetch('query', {
+       headers: {
+         Accept: 'application/json',
+         'Content-Type': 'application/json'
        },
-       "method":"POST",
-       "body": JSON.stringify({
-         "sql": sql,
-         "cursor": cursor
+       method: 'POST',
+       body: JSON.stringify({
+         sql,
+         cursor
        })
      })
-     .then((response) => response.json())
-     .then((result) => callback(result));
+       .then((response) => response.json())
+       .then((result) => callback(result));
    }
 
-   function fetchFile(name, callback) {
+   function fetchFile (name, callback) {
      fetch(`query_file?file=${name}`, {
-       "headers": {
-         "Accept": "application/json"
+       headers: {
+         Accept: 'application/json'
        },
-       "method":"GET"
+       method: 'GET'
      })
-     .then((response) => response.json())
-     .then((result) => callback(result));
+       .then((response) => response.json())
+       .then((result) => callback(result));
    }
 
-   function fetchMetadata(callback) {
-     fetch("metadata", {
-       "headers": {
-         "Accept": "application/json"
+   function fetchMetadata (callback) {
+     fetch('metadata', {
+       headers: {
+         Accept: 'application/json'
        },
-       "method":"GET"
+       method: 'GET'
      })
-     .then((response) => response.json())
-     .then((result) => callback(result));
+       .then((response) => response.json())
+       .then((result) => callback(result));
    }
 
-   function loadQueryOrGraphTab(callback) {
+   function loadQueryOrGraphTab (callback) {
      const params = new URLSearchParams(window.location.search);
-     const sql = params.get("sql");
-     const file = params.get("file");
-     const cursor = params.has("cursor") ? params.get("cursor") : 0;
+     const sql = params.get('sql');
+     const file = params.get('file');
+     const cursor = params.has('cursor') ? params.get('cursor') : 0;
 
-     if (params.has("sql") && window.result && sql === window.result["query"]) {
+     if (params.has('sql') && window.result && sql === window.result.query) {
        callback();
-       return;
-     } else if (params.has("file") && window.result && file === window.result["file"]) {
+       return
+     } else if (params.has('file') && window.result && file === window.result.file) {
        callback();
-       return;
+       return
      }
 
-     if (params.has("file") && params.has("sql") && cursor === window.result["cursor"]) {
+     if (params.has('file') && params.has('sql') && cursor === window.result.cursor) {
        // TODO: show an error.
-       throw "You can only specify a file or sql, not both."
+       throw new Error('You can only specify a file or sql, not both.')
      }
 
-     if (params.has("sql")) {
+     clearResult();
+
+     if (params.has('sql')) {
        setValue(sql);
-       const cursor = params.has("cursor") ? params.get("cursor") : 0;
-       fetchSql(params.get("sql"), cursor, function(result) {
+       const cursor = params.has('cursor') ? params.get('cursor') : 0;
+       fetchSql(params.get('sql'), cursor, function (result) {
          window.result = result;
          callback();
        });
-     } else if (params.has("file")) {
-       setValue("");
-       fetchFile(file, function(result) {
+     } else if (params.has('file')) {
+       setValue('');
+       fetchFile(file, function (result) {
          window.result = result;
-         if (window.result["query"]) {
-           setValue(result["query"]);
+         if (window.result.query) {
+           setValue(result.query);
          }
          callback();
        });
      }
-     if (params.has("cursor")) {
+     if (params.has('cursor')) {
        focus();
        setCursor(cursor);
      }
    }
 
-   function loadQueryResult() {
-     const resultElement = document.getElementById("result-box");
+   function loadQueryResult () {
+     const resultElement = document.getElementById('result-box');
      if (resultElement.children.length > 0) {
-       return;
+       return
      }
 
      setQueryStatus(window.result);
 
-     if (!window.result["rows"]) {
-       return;
+     if (!window.result.rows) {
+       return
      }
 
-     const tableElement = document.createElement("table");
-     const theadElement = document.createElement("thead");
-     const headerElement = document.createElement("tr");
-     const tbodyElement = document.createElement("tbody");
+     const tableElement = document.createElement('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);
-     
-     window.result["columns"].forEach(column => {
-       const template = document.createElement("template");
-       template.innerHTML = `<th>${column}</th>`;
+
+     window.result.columns.forEach(column => {
+       const template = document.createElement('template');
+       template.innerHTML = `<th class="cell">${column}</th>`;
        headerElement.appendChild(template.content.firstChild);
      });
      headerElement.appendChild(document.createElement('th'));
      let highlight = false;
-     window.result["rows"].forEach(function(row) {
-       const rowElement = document.createElement("tr");
+     window.result.rows.forEach(function (row) {
+       const rowElement = document.createElement('tr');
        if (highlight) {
-         rowElement.classList.add("highlighted-row");
+         rowElement.classList.add('highlighted-row');
        }
        highlight = !highlight;
        tbodyElement.appendChild(rowElement);
-       row.forEach(function(value) {
-         const template = document.createElement("template");
-         template.innerHTML = `<td>${value}</td>`;
+       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'));
      });
 
-     document.getElementById("result-box").style.display = "flex";
+     document.getElementById('result-box').style.display = 'flex';
    }
 
-   function loadGraphResult() {
+   function loadGraphResult () {
      setGraphStatus(window.result);
 
-     if (!window.result["rows"]) {
-       return;
+     if (!window.result.rows) {
+       return
      }
-     if (window.result["rows"].length == 0 || window.result["columns"].length < 2) {
-       return;
+     if (window.result.rows.length === 0 || window.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);
+     window.result.columns.forEach((column, index) => {
+       dataTable.addColumn(window.result.column_types[index], column);
      });
 
-     window.result["rows"].forEach((row) => {
+     window.result.rows.forEach((row) => {
        const rowValues = row.map((value, index) => {
-         if (window.result["column_types"][index] === "date") {
-           return new Date(value);
+         if (window.result.column_types[index] === 'date') {
+           return new Date(value)
          } else {
-           return value;
+           return value
          }
        });
        dataTable.addRow(rowValues);
      });
 
-     const graphBoxElement = document.getElementById("graph-box");
+     const graphBoxElement = document.getElementById('graph-box');
 
      const chart = new google.visualization.LineChart(graphBoxElement);
      const options = {
-       "hAxis": {
-         "title": window.result["columns"][0]
+       hAxis: {
+         title: window.result.columns[0]
        },
-       "vAxis": {
-         "title": window.result["columns"][1]
+       vAxis: {
+         title: window.result.columns[1]
        }
      };
      chart.draw(dataTable, options);
    }
 
-   function setGraphStatus(result) {
-     const statusElement = document.getElementById("graph-status");
-     if (!result["rows"]) {
+   function setGraphStatus (result) {
+     const statusElement = document.getElementById('graph-status');
+     if (!result.rows) {
        // TODO use a popup
-       console.log("error parsing graph result");
+       console.log('error parsing graph result');
        console.log(JSON.stringify(result, null, 2));
-       statusElement.innerText = "error, check console";
-       return;
+       statusElement.innerText = 'error, check console';
+       return
      }
 
-     if (result["total_rows"] == 1) {
-       statusElement.innerText = `${result["total_rows"]} row`;
+     if (result.total_rows === 1) {
+       statusElement.innerText = `${result.total_rows} row`;
      } else {
-       statusElement.innerText = `${result["total_rows"]} rows`;
+       statusElement.innerText = `${result.total_rows} rows`;
      }
 
-     if (result["total_rows"] > result["rows"].length) {
-       statusElement.innerText += ` (truncated to ${result["rows"].length})`;
+     if (result.total_rows > result.rows.length) {
+       statusElement.innerText += ` (truncated to ${result.rows.length})`;
      }
    }
 
-   function setQueryStatus(result) {
-     const statusElement = document.getElementById("query-status");
-     if (!result["rows"]) {
+   function setQueryStatus (result) {
+     const statusElement = document.getElementById('query-status');
+     if (!result.rows) {
        // TODO use a popup
-       console.log("error parsing query result");
+       console.log('error parsing query result');
        console.log(JSON.stringify(result, null, 2));
-       statusElement.innerText = "error, check console";
-       return;
+       statusElement.innerText = 'error, check console';
+       return
      }
 
-     if (result["total_rows"] == 1) {
-       statusElement.innerText = `${result["total_rows"]} row`;
+     if (result.total_rows === 1) {
+       statusElement.innerText = `${result.total_rows} row`;
      } else {
-       statusElement.innerText = `${result["total_rows"]} rows`;
+       statusElement.innerText = `${result.total_rows} rows`;
      }
 
-     if (result["total_rows"] > result["rows"].length) {
-       statusElement.innerText += ` (truncated to ${result["rows"].length})`;
+     if (result.total_rows > result.rows.length) {
+       statusElement.innerText += ` (truncated to ${result.rows.length})`;
      }
    }
 
-   function setSavedStatus(status) {
-     document.getElementById("saved-status").innerText = status;
+   function setSavedStatus (status) {
+     document.getElementById('saved-status').innerText = status;
    }
 
-   window.addEventListener("popstate", function(event) {
+   window.addEventListener('popstate', function (event) {
      route();
    });
 
-   window.addEventListener("resize", function(event) {
-     if (window.tab === "graph" && window.result) {
+   window.addEventListener('resize', function (event) {
+     if (window.tab === 'graph' && window.result) {
        clearGraphBox();
        loadGraphResult();
      }
    });
 
-   function route() {
-     selectTab(new URLSearchParams(window.location.search).get("tab") || "query");
+   function route () {
+     selectTab(new URLSearchParams(window.location.search).get('tab') || 'query');
    }
 
    window.onload = function () {
-     fetchMetadata(function(result) {
+     fetchMetadata(function (result) {
        window.metadata = result;
-       if (!result["server"]) {
+       if (!result.server) {
          // TODO show error
-         throw "unexpected metadata response";
+         throw new Error('unexpected metadata response')
        }
-       document.getElementById("header").innerText = result["server"];
-       new URLSearchParams(window.location.search);
-       const queryElement = document.getElementById("query");
+       document.getElementById('header').innerText = result.server;
+       const queryElement = document.getElementById('query');
 
-       init(queryElement, function() {
+       init(queryElement, function () {
          submit();
        });
        route();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.17
+  version: 0.1.18
 platform: ruby
 authors:
 - Nick Dower
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-22 00:00:00.000000000 Z
+date: 2022-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mysql2
@@ -123,19 +123,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.0'
 - !ruby/object:Gem::Dependency
-  name: sinatra
+  name: selenium-webdriver
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '4.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: watir
   requirement: !ruby/object:Gem::Requirement