RubyGems - sqlui - Versions diffs - 0.1.53 → 0.1.54 - Mend

sqlui 0.1.53 → 0.1.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aecad7b8b4d0000efae09f66acce234f8d0617e83103c2d21a7e19c2b14f4de0
-  data.tar.gz: 0e35efaf9d1116e7d758dee9a409343654963608ec14e2f5f9714866db85365f
+  metadata.gz: 62f95d3843d478f8bec0c3b78beb490f731fc00608126c6ac6a6093235912ec7
+  data.tar.gz: 756c530843ef0f7f684f40f919d7e71c8284bb0910082758ea05dc4c9358d20c
 SHA512:
-  metadata.gz: b8871b41338fff2bec4a4130d783e6fed8d5a9ee80e2b2786f48740ca2ed5d17887a37df2b9c0e3cc8c9a4b2bb13dcc3d74ca3a3f54b5f318f20f9d98df92f6e
-  data.tar.gz: 1bf1575c392641fb2d3710a093e467382ab69c8656315ec801c837e0afdde5a36c0e0a8134f271c0f38a9249f92156255d5f7ddfb3dd56685b26a20ea0fed791
+  metadata.gz: a4abb367d1945feda08acf76583501baf457dd15ef3b8b7a76c39160e6171628a89dff645116c845ecd8e01cb9b150378f4e052f68686479ae2fd5c4ea0e1f39
+  data.tar.gz: 6327b8f5e755c37b5399f10a16187b61fd975c42c48a83f282861dee6a6e0cf44702acd34ae30a3b681db9a2f4e4c2622162d99d77101fe429fcd4e485314d8f

data/.release-version CHANGED Viewed

	@@ -1 +1 @@
1	- 0.1.53
1	+ 0.1.54

data/app/server.rb CHANGED Viewed

@@ -2,6 +2,7 @@
 require 'base64'
 require 'csv'
+require 'digest/md5'
 require 'erb'
 require 'json'
 require 'prometheus/middleware/collector'
@@ -58,6 +59,10 @@ class Server < Sinatra::Base
     set :raise_errors,    false
     set :show_exceptions, false
+    favicon_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'favicon.svg')))
+    css_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'sqlui.css')))
+    js_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'sqlui.js')))
     get '/-/health' do
       status 200
       body 'OK'
@@ -68,10 +73,12 @@ class Server < Sinatra::Base
     end
     get '/favicon.svg' do
+      headers 'Cache-Control' => 'max-age=31536000'
       send_file File.join(resources_dir, 'favicon.svg')
     end
     get "#{config.list_url_path}/?" do
+      headers 'Cache-Control' => 'no-cache'
       erb :databases, locals: { config: config }
     end
@@ -82,11 +89,13 @@ class Server < Sinatra::Base
       get "#{database.url_path}/sqlui.css" do
         headers 'Content-Type' => 'text/css; charset=utf-8'
+        headers 'Cache-Control' => 'max-age=31536000'
         send_file File.join(resources_dir, 'sqlui.css')
       end
       get "#{database.url_path}/sqlui.js" do
         headers 'Content-Type' => 'text/javascript; charset=utf-8'
+        headers 'Cache-Control' => 'max-age=31536000'
         send_file File.join(resources_dir, 'sqlui.js')
       end
@@ -185,6 +194,7 @@ class Server < Sinatra::Base
         sql = find_selected_query(sql, params[:selection])
         content_type 'application/csv; charset=utf-8'
+        headers 'Cache-Control' => 'no-cache'
         attachment 'result.csv'
         status 200
@@ -201,12 +211,16 @@ class Server < Sinatra::Base
       get(%r{#{Regexp.escape(database.url_path)}/(query|graph|structure|saved)}) do
         status 200
+        headers 'Cache-Control' => 'no-cache'
         client_config = config.airbrake[:client] || {}
         erb :sqlui, locals: {
           environment: config.environment.to_s,
           airbrake_enabled: client_config[:enabled] || false,
           airbrake_project_id: client_config[:project_id] || '',
-          airbrake_project_key: client_config[:project_key] || ''
+          airbrake_project_key: client_config[:project_key] || '',
+          js_hash: js_hash,
+          css_hash: css_hash,
+          favicon_hash: favicon_hash
         }
       end
     end

data/app/views/sqlui.erb CHANGED Viewed

@@ -1,8 +1,9 @@
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>SQLUI</title>
-    <link rel="icon" type="image/x-icon" href="/favicon.svg">
+    <link rel="icon" type="image/x-icon" href="/favicon.svg?<%= favicon_hash %>">
     <!-- Initialize Airbrake before loading the main app JS so that we can catch errors as early as possible. -->
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>
     <script type="text/javascript">
@@ -18,9 +19,9 @@
         window.airbrake?.notify(error)
       }
     </script>
-    <script type="text/javascript" src="sqlui.js"></script>
+    <script type="text/javascript" src="sqlui.js?<%= js_hash %>"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-    <link rel="stylesheet" href="sqlui.css">
+    <link rel="stylesheet" href="sqlui.css?<%= css_hash %>">
   </head>
   <body>

data/client/resources/sqlui.css CHANGED Viewed

@@ -1,4 +1,9 @@
+html {
+    height: 100%;
+}
 body {
+    height: 100%;
     margin: 0;
     overflow: hidden;
 }
@@ -245,8 +250,8 @@ p {
     display: flex;
     flex-direction: column;
 }
-#result-table tbody tr td{
-  height: calc(21px + 10px); // 21 for text, 10 for top and bottom padding of 5
+table tbody tr td {
+  height: 21px;
 }
 #result-table tbody tr td abbr a {
@@ -264,10 +269,7 @@ p {
     margin: 0 5px 0 0;
     text-decoration: none;
     position: relative;
-}
-#result-table tbody tr td abbr:last-child {
-    margin: 0;
+    bottom: 2px; /* To make the links look vertically centered. */
 }
 .fetch-sql-box {
@@ -281,41 +283,62 @@ p {
 table {
     font-family: monospace;
-    flex: 1;
     border-spacing: 0;
-    display: flex;
-    width: 100%;
     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 {
-    width: 100%;
     border-right: none !important;
 }
 td, th {
-    padding: 5px 10px;
     font-weight: normal;
     white-space: nowrap;
     max-width: 500px;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 5px 10px;
     text-align: right;
 }
+#result-table tbody tr td .cell-content-wrapper {
+    display: flex;
+}
+#result-table tbody tr td .cell-value {
+    flex: 1;
+}
 th {
-    text-align: left;
     font-weight: bold;
     border-bottom: 1px solid #ddd;
     border-right: 1px solid #ddd;
 }
-table {
-    display: block;
+th div.col-content-wrapper {
+    display: flex;
+}
+th div.col-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    height: 21px;
+    text-align: left;
+    padding: 5px 10px;
+}
+th div.col-resizer {
+    width: 7px;
+    position: relative;
+    left: 5px; /* center over the right border */
+    cursor: col-resize;
 }
 thead {
@@ -325,7 +348,6 @@ thead {
     position: sticky;
     top: 0;
     z-index: 1;
-    table-layout: fixed;
 }
 .highlighted-row {

data/client/resources/sqlui.js CHANGED Viewed

@@ -24182,27 +24182,152 @@
      return match ? match[1] : identifier
    }
-   function createTable (columns, rows, id, headerRenderer, cellRenderer) {
+   const drag = {
+     containerElement: null,
+     tableElement: null,
+     thElement: null,
+     colElement: null,
+     otherColWidths: null,
+     lastColElement: null
+   };
+   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';
+     }
+   });
+   document.addEventListener('mouseup', (event) => {
+     drag.containerElement = null;
+     drag.tableElement = null;
+     drag.thElement = null;
+     drag.colElement = null;
+     drag.otherColWidths = null;
+     drag.lastColElement = null;
+   });
+   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.getBoundingClientRect().width) - runningWidth;
+       } else {
+         remainingWidth = Math.max(10, drag.containerElement.getBoundingClientRect().width - runningWidth);
+       }
+       drag.lastColElement.style.width = `${remainingWidth}px`;
+       runningWidth += remainingWidth;
+       drag.tableElement.style.width = `${runningWidth}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')
      const tableElement = document.createElement('table');
      if (id) tableElement.id = id;
+     const colgroupElement = document.createElement('colgroup');
+     tableElement.appendChild(colgroupElement);
      const theadElement = document.createElement('thead');
-     const headerTrElement = document.createElement('tr');
-     const tbodyElement = document.createElement('tbody');
-     theadElement.appendChild(headerTrElement);
      tableElement.appendChild(theadElement);
+     const tbodyElement = document.createElement('tbody');
      tableElement.appendChild(tbodyElement);
-     columns.forEach(function (columnName) {
-       if (headerRenderer) {
-         headerRenderer(headerTrElement, columnName);
-       } else {
-         const headerElement = document.createElement('th');
-         headerElement.innerText = columnName;
-         headerTrElement.appendChild(headerElement);
-       }
+     const headerTrElement = document.createElement('tr');
+     theadElement.appendChild(headerTrElement);
+     const nonLastColElements = [];
+     columns.forEach(function (column, index) {
+       const headerElement = document.createElement('th');
+       headerTrElement.appendChild(headerElement);
+       const contentWrapperElement = document.createElement('div');
+       contentWrapperElement.classList.add('col-content-wrapper');
+       headerElement.appendChild(contentWrapperElement);
+       const nameElement = document.createElement('div');
+       nameElement.classList.add('col-name');
+       contentWrapperElement.appendChild(nameElement);
+       const colElement = document.createElement('col');
+       colElement.id = `${id}-col-${index}`;
+       colgroupElement.appendChild(colElement);
+       nonLastColElements.push(colElement);
+       const resizerElement = document.createElement('div');
+       resizerElement.classList.add('col-resizer');
+       resizerElement.dataset.colId = colElement.id;
+       contentWrapperElement.appendChild(resizerElement);
+       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 remainingWidth = Math.max(10, containerElement.getBoundingClientRect().width - runningWidth);
+         colElements[colElements.length - 1].style.width = `${remainingWidth}px`;
+         runningWidth += remainingWidth;
+         tableElement.style.width = `${runningWidth}px`;
+       }
+       const resizeObserver = new ResizeObserver(resize);
+       resizeObserver.observe(containerElement);
+       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);
      }
      let highlight = false;
      rows.forEach(function (row) {
@@ -24212,9 +24337,9 @@
        }
        highlight = !highlight;
        tbodyElement.appendChild(rowElement);
-       row.forEach(function (value, i) {
+       row.forEach(function (value, index) {
          if (cellRenderer) {
-           cellRenderer(rowElement, columns[i], value);
+           cellRenderer(rowElement, index, value);
          } else {
            const cellElement = document.createElement('td');
            cellElement.innerText = value;
@@ -24223,7 +24348,7 @@
        });
        rowElement.appendChild(document.createElement('td'));
      });
-     return tableElement
+     containerElement.appendChild(tableElement);
    }
    /* global google */
@@ -24540,7 +24665,13 @@
            }
            rows.push(row);
          }
-         columnsElement.appendChild(createTable(columns, rows, null));
+         const cellRenderer = function (rowElement, _columnIndex, value) {
+           const cellElement = document.createElement('td');
+           cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
+           cellElement.innerText = value;
+           rowElement.appendChild(cellElement);
+         };
+         createTable(columnsElement, columns, rows, 'columns-table', cellRenderer);
        }
        const indexEntries = Object.entries(table.indexes);
@@ -24560,7 +24691,13 @@
              rows.push(row);
            }
          }
-         indexesElement.appendChild(createTable(columns, rows, null));
+         const cellRenderer = function (rowElement, _columnIndex, value) {
+           const cellElement = document.createElement('td');
+           cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
+           cellElement.innerText = value;
+           rowElement.appendChild(cellElement);
+         };
+         createTable(indexesElement, columns, rows, 'tables-table', cellRenderer);
        }
      });
      window.structureLoaded = true;
@@ -24970,35 +25107,37 @@
        return abbrElement
      };
-     const headerRenderer = function (rowElement, column) {
-       const headerElement = document.createElement('th');
-       headerElement.innerText = column;
-       if (window.metadata.columns[column]) {
-         headerElement.colSpan = 2;
-       }
-       rowElement.appendChild(headerElement);
-     };
+     const cellRenderer = function (rowElement, columnIndex, value) {
+       const column = fetch.result.columns[columnIndex];
+       const columnType = fetch.result.column_types[columnIndex];
-     const cellRenderer = function (rowElement, column, value) {
-       if (window.metadata.columns[column]?.links?.length > 0) {
-         const linksColumnElement = document.createElement('td');
-         if (value) {
-           window.metadata.columns[column].links.forEach((link) => {
-             linksColumnElement.appendChild(createLink(link, value));
-           });
-         }
-         rowElement.appendChild(linksColumnElement);
-         const textColumnElement = document.createElement('td');
-         textColumnElement.innerText = value;
-         rowElement.appendChild(textColumnElement);
+       if (value && window.metadata.columns[column]?.links?.length > 0) {
+         const linksElement = document.createElement('div');
+         window.metadata.columns[column].links.forEach((link) => {
+           linksElement.appendChild(createLink(link, value));
+         });
+         const textElement = document.createElement('div');
+         textElement.classList.add('cell-value');
+         textElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
+         textElement.innerText = value;
+         const wrapperElement = document.createElement('div');
+         wrapperElement.classList.add('cell-content-wrapper');
+         wrapperElement.appendChild(linksElement);
+         wrapperElement.appendChild(textElement);
+         const columnElement = document.createElement('td');
+         columnElement.appendChild(wrapperElement);
+         rowElement.appendChild(columnElement);
        } else {
          const cellElement = document.createElement('td');
+         cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
          cellElement.innerText = value;
          rowElement.appendChild(cellElement);
        }
      };
-     document.getElementById('result-box')
-       .appendChild(createTable(fetch.result.columns, fetch.result.rows, 'result-table', headerRenderer, cellRenderer));
+     createTable(document.getElementById('result-box'), fetch.result.columns, fetch.result.rows, 'result-table', cellRenderer);
    }
    function disableDownloadButtons () {

metadata CHANGED Viewed

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