sqlui 0.1.55 → 0.1.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ac5672ec8d9668ee10c58ccf407a63f297b411ff055cadfc89ce9090369bb2d
-  data.tar.gz: 146c7af99506528b86b8721db25dfffec71dbb5af32f9ed711a7b7b781ae0dbb
+  metadata.gz: be280a4fa679ca8aa39ad6dfd93705c85b87b54993cf4ea601fa6260978ae349
+  data.tar.gz: db66920d0dd4c222bc5f4626046d7305be478afb11a816fb5c450a09d97b7f2b
 SHA512:
-  metadata.gz: 31d766b04ba02bf3f0bc4d369614b87bc5c527e6f96634d3019875f71cb84d6906aba812d54175ca65782cadee47355df87018c8c190a8cf33fce2a306a32def
-  data.tar.gz: c05a7fff480f3fe42925a7a07cddebddbff979f74e3bdac898a585439d251c180d682da66a7e6b98d4f0e175def931f03dff23d3d5406fd9c273f1953dcc0d6a
+  metadata.gz: 0f436e784f0ac4b187805ed276323a9e712a9f0aee3e5beb504971956abd5588e8e044a9495618e4be82f018b0c20d88f50a37d3d379fc6e2d08e6a962000a43
+  data.tar.gz: ed51e6754f145b23d184542bdbc97c76bbcd52d3bc17c0bbebb7c2adb0534486c097e9af379c453b2c16b6b850fbd7252f9b03e43df71962771e1e29f99d9a4a

data/.release-version

@@ -1 +1 @@
-0.1.55
+0.1.57

data/app/server.rb

@@ -138,13 +138,13 @@ class Server < Sinatra::Base
         break client_error('missing sql') unless params[:sql]
 
         variables = params[:variables] || {}
-        sql = find_selected_query(params[:sql], params[:selection])
+        queries = find_selected_queries(params[:sql], params[:selection])
 
         status 200
         headers 'Content-Type' => 'application/json; charset=utf-8'
 
         database.with_client do |client|
-          query_result = execute_query(client, variables, sql)
+          query_result = execute_query(client, variables, queries)
           stream do |out|
             if query_result
               json = <<~RES.chomp
@@ -159,7 +159,7 @@ class Server < Sinatra::Base
               out << json
               bytes = json.bytesize
               query_result.each_with_index do |row, i|
-                json = "#{i.zero? ? '' : ','}\n    #{row.to_json}"
+                json = "#{i.zero? ? '' : ','}\n    #{row.map { |v| big_decimal_to_float(v) }.to_json}"
                 bytes += json.bytesize
                 break if i == Sqlui::MAX_ROWS || bytes > Sqlui::MAX_BYTES
 
@@ -191,7 +191,7 @@ class Server < Sinatra::Base
 
         sql = Base64.decode64(params[:sql]).force_encoding('UTF-8')
         variables = params.map { |k, v| k[0] == '_' ? [k, v] : nil }.compact.to_h
-        sql = find_selected_query(sql, params[:selection])
+        queries = find_selected_queries(sql, params[:selection])
 
         content_type 'application/csv; charset=utf-8'
         headers 'Cache-Control' => 'no-cache'
@@ -199,11 +199,11 @@ class Server < Sinatra::Base
         status 200
 
         database.with_client do |client|
-          query_result = execute_query(client, variables, sql)
+          query_result = execute_query(client, variables, queries)
           stream do |out|
             out << CSV::Row.new(query_result.fields, query_result.fields, header_row: true).to_s.strip
             query_result.each do |row|
-              out << "\n#{CSV::Row.new(query_result.fields, row).to_s.strip}"
+              out << "\n#{CSV::Row.new(query_result.fields, row.map { |v| big_decimal_to_float(v) }).to_s.strip}"
             end
           end
         end
@@ -250,33 +250,45 @@ class Server < Sinatra::Base
     body({ error: message, stacktrace: stacktrace }.compact.to_json)
   end
 
-  def find_selected_query(full_sql, selection)
-    return full_sql unless selection
-
-    if selection.include?('-')
-      # sort because the selection could be in either direction
-      selection = selection.split('-').map { |v| Integer(v) }.sort
-    else
-      selection = Integer(selection)
-      selection = [selection, selection]
-    end
+  def find_selected_queries(full_sql, selection)
+    if selection
+      if selection.include?('-')
+        # sort because the selection could be in either direction
+        selection = selection.split('-').map { |v| Integer(v) }.sort
+      else
+        selection = Integer(selection)
+        selection = [selection, selection]
+      end
 
-    if selection[0] == selection[1]
-      SqlParser.find_statement_at_cursor(full_sql, selection[0])
+      if selection[0] == selection[1]
+        [SqlParser.find_statement_at_cursor(full_sql, selection[0])]
+      else
+        SqlParser.split(full_sql[selection[0], selection[1]])
+      end
     else
-      full_sql[selection[0], selection[1]]
+      SqlParser.split(full_sql)
     end
   end
 
-  def execute_query(client, variables, sql)
+  def execute_query(client, variables, queries)
     variables.each do |name, value|
       client.query("SET @#{name} = #{value};")
     end
-    queries = if sql.include?(';')
-                sql.split(/(?<=;)/).map(&:strip).reject(&:empty?)
-              else
-                [sql]
-              end
     queries.map { |current| client.query(current) }.last
   end
+
+  def big_decimal_to_float(maybe_big_decimal)
+    # TODO: This BigDecimal thing needs some thought.
+    if maybe_big_decimal.is_a?(BigDecimal)
+      big_decimal_string = maybe_big_decimal.to_s('F')
+      float = maybe_big_decimal.to_f
+      if big_decimal_string == float.to_s
+        float
+      else
+        big_decimal_string
+      end
+    else
+      maybe_big_decimal
+    end
+  end
 end

data/app/sql_parser.rb

@@ -12,6 +12,10 @@ class SqlParser
     part_with_range[0]
   end
 
+  def self.split(sql)
+    parse(sql).map(&:first)
+  end
+
   def self.parse(sql)
     scanner = StringScanner.new(sql)
     statements = []

data/app/sqlui.rb

@@ -6,8 +6,8 @@ require_relative 'version'
 
 # Main entry point.
 class Sqlui
-  MAX_ROWS = 5_000
-  MAX_BYTES = 10 * 1_024 * 1_024
+  MAX_ROWS = 50_000
+  MAX_BYTES = 10 * 1_024 * 1_024 # 10 MB
 
   def initialize(config_file)
     raise 'you must specify a configuration file' unless config_file

data/app/views/sqlui.erb

@@ -100,8 +100,10 @@
         <div style="flex: 1;"></div>
         <div id="pagination-box" class="tab-content-element">
           <div id="page-count-box"></div>
+          <input id="first-button" class="pagination-button" type="button" value="First" />
           <input id="prev-button" class="pagination-button" type="button" value="Prev" />
           <input id="next-button" class="pagination-button" type="button" value="Next" />
+          <input id="last-button" class="pagination-button" type="button" value="Last" />
         </div>
       </div>
     </div>

data/client/resources/sqlui.css

@@ -282,8 +282,6 @@ table {
     border-spacing: 0;
     color: #333;
     font-size: 18px;
-    width: 100%;
-    table-layout: auto; /* Will be overridden if a column is resized. */
 }
 
 table td:last-child, table th:last-child {
@@ -296,6 +294,10 @@ td, th {
     max-width: 500px;
 }
 
+td:last-child, th:last-child {
+    max-width: none;
+}
+
 td {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -491,15 +493,8 @@ select {
     font-size: 16px;
 }
 
-#next-button {
-
-}
-
-#prev-button {
-    margin: 0 10px;
-}
-
 .pagination-button {
+    margin: 0 10px;
     cursor: pointer;
     background: none;
     color: #333;

data/client/resources/sqlui.js

@@ -24295,180 +24295,215 @@
      return match ? match[1] : identifier
    }
 
-   const drag = {
-     containerElement: null,
-     tableElement: null,
-     thElement: null,
-     colElement: null,
-     otherColWidths: null,
-     lastColElement: null
-   };
+   class Drag {
+     tableElement = null
+     scrolled = null
+     scrollOffset = null
+     containerOffset = null
+     containerWidth = null
+     thElement = null
+     colElement = null
+     otherColsWidth = null
+     lastColElement = null
+   }
+
+   let drag = new Drag();
 
    document.addEventListener('mousedown', (event) => {
-     if (event.target.classList.contains('col-resizer')) {
-       event.preventDefault();
-       const thElement = event.target.parentElement.parentElement;
-       if (thElement.tagName.toLowerCase() !== 'th') {
-         throw new Error(`expected th element, found: ${thElement}`)
-       }
-       const trElement = thElement.parentElement;
-       const theadElement = trElement.parentElement;
-       drag.tableElement = theadElement.parentElement;
-       drag.containerElement = drag.tableElement.parentElement;
-       drag.thElement = thElement;
-       drag.colElement = document.getElementById(event.target.dataset.colId);
-
-       const colElements = Array.from(drag.colElement.parentElement.childNodes);
-       drag.lastColElement = colElements[colElements.length - 1];
-       drag.otherColWidths = [];
-       for (let i = 0; i < colElements.length - 1; i++) {
-         if (colElements[i] !== drag.colElement) {
-           drag.otherColWidths.push(colElements[i].getBoundingClientRect().width);
-         }
-       }
-       colElements.forEach((element) => {
-         element.style.width = `${element.getBoundingClientRect().width}px`;
-       });
-       drag.tableElement.style.tableLayout = 'fixed';
+     if (!event.target.classList.contains('col-resizer')) return
+
+     drag = new Drag();
+     event.preventDefault();
+     const thElement = event.target.parentElement.parentElement;
+     if (thElement.tagName.toLowerCase() !== 'th') {
+       throw new Error(`expected th element, found: ${thElement}`)
      }
+     const trElement = thElement.parentElement;
+     const theadElement = trElement.parentElement;
+     const tableElement = theadElement.parentElement;
+     const containerElement = tableElement.parentElement;
+     drag.tableElement = tableElement;
+     drag.containerWidth = containerElement.clientWidth;
+     drag.scrollOffset = containerElement.scrollLeft;
+     drag.scrolled = drag.scrollOffset > 0;
+     drag.containerOffset = containerElement.offsetLeft;
+     drag.thElement = thElement;
+     drag.colElement = tableElement.querySelector(`col[data-col-id=${event.target.dataset.colId}]`);
+
+     const colElements = Array.from(drag.colElement.parentElement.childNodes);
+     drag.lastColElement = colElements[colElements.length - 1];
+     drag.otherColsWidth = 0;
+     for (let i = 0; i < colElements.length; i++) {
+       if (colElements[i] !== drag.colElement && i !== (colElements.length - 1)) {
+         drag.otherColsWidth += colElements[i].getBoundingClientRect().width;
+       }
+       colElements[i].style.width = `${colElements[i].getBoundingClientRect().width}px`;
+     }
+     tableElement.style.tableLayout = 'fixed';
+     tableElement.style.width = `${tableElement.getBoundingClientRect().width}px`;
    });
 
    document.addEventListener('mouseup', (event) => {
-     drag.containerElement = null;
-     drag.tableElement = null;
-     drag.thElement = null;
-     drag.colElement = null;
-     drag.otherColWidths = null;
-     drag.lastColElement = null;
+     drag = new Drag();
    });
 
    document.addEventListener('mousemove', (event) => {
-     if (drag.colElement) {
-       const scrollOffset = drag.containerElement.scrollLeft;
-       const scrolled = scrollOffset > 0;
-       const containerOffset = drag.containerElement.offsetLeft;
-       const newColumnWidth = Math.max(0, scrollOffset + (event.clientX - containerOffset) - drag.thElement.offsetLeft);
-       if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
-
-       drag.colElement.style.width = `${newColumnWidth}px`;
-       let runningWidth = newColumnWidth;
-       drag.otherColWidths.forEach((width) => {
-         runningWidth += width;
-       });
-       let remainingWidth;
-       if (scrolled) {
-         remainingWidth = (scrollOffset + drag.containerElement.clientWidth) - runningWidth;
-       } else {
-         remainingWidth = Math.max(10, drag.containerElement.clientWidth - runningWidth);
-       }
-       drag.lastColElement.style.width = `${remainingWidth}px`;
-       runningWidth += remainingWidth;
-       drag.tableElement.style.width = `${runningWidth}px`;
+     if (!drag.colElement) return
+
+     const newColumnWidth = Math.max(0, drag.scrollOffset + (event.clientX - drag.containerOffset) - drag.thElement.offsetLeft);
+     if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
+
+     drag.colElement.style.width = `${newColumnWidth}px`;
+     drag.tableElement.columnsWidth = newColumnWidth + drag.otherColsWidth;
+     let lastColWidth;
+     if (drag.scrolled) {
+       lastColWidth = (drag.scrollOffset + drag.containerWidth) - (drag.tableElement.columnsWidth);
+     } else {
+       lastColWidth = Math.max(10, drag.containerWidth - (drag.tableElement.columnsWidth));
      }
+     drag.lastColElement.style.width = lastColWidth + 'px';
+     drag.tableElement.style.width = (drag.otherColsWidth + newColumnWidth + lastColWidth) + 'px';
    });
 
-   function createTable (containerElement, columns, rows, id, cellRenderer) {
-     if (!containerElement) throw new Error('missing table containerElement')
-     if (!columns) throw new Error('missing table columns')
-     if (!rows) throw new Error('missing table rows')
-     if (!id) throw new Error('missing table id')
+   class ResizeTable extends HTMLTableElement {
+     constructor (columns, rows, cellRenderer) {
+       super();
 
-     const tableElement = document.createElement('table');
-     containerElement.appendChild(tableElement);
-     if (id) tableElement.id = id;
+       this.columns = columns;
+       this.cellRenderer = cellRenderer;
 
-     const colgroupElement = document.createElement('colgroup');
-     tableElement.appendChild(colgroupElement);
+       this.style.tableLayout = 'auto';
+       this.style.width = '100%';
 
-     const theadElement = document.createElement('thead');
-     tableElement.appendChild(theadElement);
+       const colgroupElement = document.createElement('colgroup');
+       this.appendChild(colgroupElement);
 
-     const headerTrElement = document.createElement('tr');
-     theadElement.appendChild(headerTrElement);
+       const theadElement = document.createElement('thead');
+       this.appendChild(theadElement);
 
-     const nonLastColElements = [];
-     columns.forEach(function (column, index) {
-       const headerElement = document.createElement('th');
-       headerTrElement.appendChild(headerElement);
+       const headerTrElement = document.createElement('tr');
+       theadElement.appendChild(headerTrElement);
 
-       const contentWrapperElement = document.createElement('div');
-       contentWrapperElement.classList.add('col-content-wrapper');
-       headerElement.appendChild(contentWrapperElement);
+       if (columns.length > 0) {
+         const colElements = [];
+         columns.forEach(function (column, index) {
+           const headerElement = document.createElement('th');
+           headerTrElement.appendChild(headerElement);
 
-       const nameElement = document.createElement('div');
-       nameElement.classList.add('col-name');
-       contentWrapperElement.appendChild(nameElement);
+           const contentWrapperElement = document.createElement('div');
+           contentWrapperElement.classList.add('col-content-wrapper');
+           headerElement.appendChild(contentWrapperElement);
 
-       const colElement = document.createElement('col');
-       colElement.id = `${id}-col-${index}`;
-       colgroupElement.appendChild(colElement);
-       nonLastColElements.push(colElement);
+           const nameElement = document.createElement('div');
+           nameElement.classList.add('col-name');
+           contentWrapperElement.appendChild(nameElement);
 
-       const resizerElement = document.createElement('div');
-       resizerElement.classList.add('col-resizer');
-       resizerElement.dataset.colId = colElement.id;
-       contentWrapperElement.appendChild(resizerElement);
+           const colElement = document.createElement('col');
+           colElement.dataset.colId = `col-${index}`;
+           colgroupElement.appendChild(colElement);
+           colElements.push(colElement);
 
-       nameElement.innerText = column;
-     });
-     if (columns.length > 0) {
-       headerTrElement.appendChild(document.createElement('th'));
-       const lastColElement = document.createElement('col');
-       lastColElement.style.width = '100%';
-       function resize () {
-         let runningWidth = 0;
-         const colElements = Array.from(tableElement.getElementsByTagName('col'));
-         nonLastColElements.forEach((element, index) => {
-           runningWidth += element.getBoundingClientRect().width;
+           const resizerElement = document.createElement('div');
+           resizerElement.classList.add('col-resizer');
+           resizerElement.dataset.colId = colElement.dataset.colId;
+           contentWrapperElement.appendChild(resizerElement);
+
+           nameElement.innerText = column;
          });
-         const remainingWidth = Math.max(10, containerElement.clientWidth - runningWidth);
-         colElements[colElements.length - 1].style.width = `${remainingWidth}px`;
-         runningWidth += remainingWidth;
-         tableElement.style.width = `${runningWidth}px`;
-       }
 
-       const resizeObserver = new ResizeObserver(resize);
-       resizeObserver.observe(containerElement);
+         headerTrElement.appendChild(document.createElement('th'));
+         const lastColElement = document.createElement('col');
+         lastColElement.style.width = '100%';
+         colElements.push(lastColElement);
 
-       const mutationObserver = new MutationObserver((mutationList, observer) => {
-         if (!tableElement.parentElement) {
-           resizeObserver.unobserve(containerElement);
-           resizeObserver.unobserve(containerElement);
-           observer.disconnect();
-         }
-       });
-       mutationObserver.observe(containerElement, { childList: true });
-       colgroupElement.appendChild(lastColElement);
+         const containerMutationObserver = new MutationObserver(function (mutationList, observer) {
+           mutationList.forEach(function (mutation) {
+             if (this.parentElement) {
+               if (this.parentElement !== mutation.target) {
+                 throw new Error('Unexpected table parent')
+               }
+               return
+             }
 
-       createTableBody(rows, tableElement, cellRenderer);
-     }
-   }
+             if (observer.resizeObserver) {
+               observer.resizeObserver.unobserve(mutation.target);
+               observer.resizeObserver = null;
+             }
+             observer.disconnect();
+           }.bind(this));
+         }.bind(this));
 
-   function createTableBody (rows, tableElement, cellRenderer) {
-     const tbodyElement = document.createElement('tbody');
-     tableElement.appendChild(tbodyElement);
+         const tableResizeObserver = new ResizeObserver(function () {
+           if (!this.parentElement) {
+             this.observingContainer = false;
+             return
+           }
+           if (this.observingContainer) {
+             return
+           }
+           this.observingContainer = true;
 
-     let highlight = false;
-     rows.forEach(function (row) {
-       const rowElement = document.createElement('tr');
-       if (highlight) {
-         rowElement.classList.add('highlighted-row');
+           const containerResizeObserver = new ResizeObserver(function () {
+             if (this.style.tableLayout === 'auto') return
+             if (this.parentElement.scrollLeft > 0) return
+             if (!this.columnsWidth) throw new Error('columnsWidth not set')
+
+             const remainingWidth = Math.max(10, this.parentElement.clientWidth - this.columnsWidth);
+             colElements.slice(-1)[0].style.width = `${remainingWidth}px`;
+             this.style.width = `${this.columnsWidth + remainingWidth}px`;
+           }.bind(this));
+           containerResizeObserver.observe(this.parentElement);
+
+           containerMutationObserver.resizeObserver = containerResizeObserver;
+           containerMutationObserver.containerElement = this.parentElement;
+           console.log('observing');
+           console.log(this.parentElement);
+           containerMutationObserver.observe(this.parentElement, { childList: true });
+         }.bind(this));
+         tableResizeObserver.observe(this);
+
+         colgroupElement.appendChild(lastColElement);
+
+         this.updateTableBody(rows, cellRenderer);
        }
-       highlight = !highlight;
-       tbodyElement.appendChild(rowElement);
-       row.forEach(function (value, index) {
-         if (cellRenderer) {
-           cellRenderer(rowElement, index, value);
-         } else {
-           const cellElement = document.createElement('td');
-           cellElement.innerText = value;
-           rowElement.appendChild(cellElement);
+     }
+
+     updateTableBody (rows, cellRenderer) {
+       this.style.tableLayout = 'auto';
+
+       if (this.tbodyElement) this.removeChild(this.tbodyElement);
+       const tbodyElement = document.createElement('tbody');
+       this.appendChild(tbodyElement);
+       this.tbodyElement = tbodyElement;
+
+       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, index) {
+           if (cellRenderer) {
+             cellRenderer(rowElement, index, value);
+           } else {
+             const cellElement = document.createElement('td');
+             cellElement.innerText = value;
+             rowElement.appendChild(cellElement);
+           }
+         });
+         rowElement.appendChild(document.createElement('td'));
        });
-       rowElement.appendChild(document.createElement('td'));
-     });
+     }
+
+     getTableBody () {
+       return this.tbodyElement
+     }
    }
 
+   customElements.define('resize-table', ResizeTable, { extends: 'table' });
+
    /* global google */
 
    const PAGE_SIZE = 500;
@@ -24538,6 +24573,10 @@
          copyTextToClipboard(toTsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
        }
      });
+     addClickListener(document.getElementById('first-button'), (event) => {
+       window.sqlFetch.page = 0;
+       displaySqlFetch(window.sqlFetch);
+     });
      addClickListener(document.getElementById('prev-button'), (event) => {
        window.sqlFetch.page -= 1;
        displaySqlFetch(window.sqlFetch);
@@ -24546,6 +24585,10 @@
        window.sqlFetch.page += 1;
        displaySqlFetch(window.sqlFetch);
      });
+     addClickListener(document.getElementById('last-button'), (event) => {
+       window.sqlFetch.page = window.sqlFetch.pageCount - 1;
+       displaySqlFetch(window.sqlFetch);
+     });
      addClickListener(document.getElementById('submit-dropdown-button-download-csv'), () => {
        if (!window.sqlFetch?.result) return
 
@@ -24694,6 +24737,8 @@
        selected.style.display = 'none';
      });
 
+     setStatus('');
+
      switch (window.tab) {
        case 'query':
          selectResultTab(internal);
@@ -24799,7 +24844,7 @@
            cellElement.innerText = value;
            rowElement.appendChild(cellElement);
          };
-         createTable(columnsElement, columns, rows, 'columns-table', cellRenderer);
+         columnsElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
        }
 
        const indexEntries = Object.entries(table.indexes);
@@ -24825,7 +24870,7 @@
            cellElement.innerText = value;
            rowElement.appendChild(cellElement);
          };
-         createTable(indexesElement, columns, rows, 'tables-table', cellRenderer);
+         indexesElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
        }
      });
      window.structureLoaded = true;
@@ -25274,28 +25319,25 @@
 
      displaySqlFetchResultStatus(fetch);
 
-     const resultBody = document.querySelector('table[id="result-table"] > tbody');
      const pageStart = fetch.page * fetch.pageSize;
      const rows = fetch.result.rows.slice(pageStart, pageStart + fetch.pageSize);
-     if (resultBody) {
+
+     let tableElement = document.getElementById('result-table');
+     if (tableElement) {
+       const resultBody = tableElement.getTableBody();
        if (resultBody.dataset.page === fetch.page) {
          // Results already displayed.
          return
        }
-       resultBody.parentElement.removeChild(resultBody);
-       createTableBody(rows, document.getElementById('result-table'), resultCellRenderer);
+       tableElement.updateTableBody(rows, resultCellRenderer);
      } else {
        clearResultBox();
-       createTable(
-         document.getElementById('result-box'),
-         fetch.result.columns,
-         rows,
-         'result-table',
-         resultCellRenderer);
+       const resultBoxElement = document.getElementById('result-box');
+       tableElement = new ResizeTable(fetch.result.columns, rows, resultCellRenderer);
+       tableElement.id = 'result-table';
+       resultBoxElement.appendChild(tableElement);
      }
-     document
-       .querySelector('table[id="result-table"] > tbody')
-       .setAttribute('data-page', fetch.page);
+     tableElement.setAttribute('data-page', fetch.page);
    }
 
    function disableDownloadButtons () {
@@ -25451,7 +25493,7 @@
      }
 
      if (result.total_rows > result.rows.length) {
-       message += ` (truncated to ${result.rows.length})`;
+       message += ` (truncated to ${result.rows.length.toLocaleString()})`;
      }
      setStatus(message);
 
@@ -25463,6 +25505,16 @@
        document.getElementById('next-button').disabled = sqlFetch.page + 1 === sqlFetch.pageCount;
        document.getElementById('prev-button').disabled = sqlFetch.page === 0;
      }
+
+     if (sqlFetch.pageCount > 2) {
+       document.getElementById('first-button').style.display = 'flex';
+       document.getElementById('last-button').style.display = 'flex';
+       document.getElementById('first-button').disabled = sqlFetch.page === 0;
+       document.getElementById('last-button').disabled = sqlFetch.page === sqlFetch.pageCount - 1;
+     } else {
+       document.getElementById('last-button').style.display = 'none';
+       document.getElementById('first-button').style.display = 'none';
+     }
    }
 
    window.addEventListener('popstate', function (event) {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.55
+  version: 0.1.57
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-12-09 00:00:00.000000000 Z
+date: 2022-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: airbrake