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

sqlui 0.1.53 → 0.1.54

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