Revert "Improve table display in Spinner."

This reverts commit df96b05863.

.idea/codeStyles/Project.xml

@@ -1,5 +1,11 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <option name="OTHER_INDENT_OPTIONS">
+      <value>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </value>
+    </option>
     <option name="RIGHT_MARGIN" value="240" />
     <option name="FORMATTER_TAGS_ENABLED" value="true" />
     <option name="SOFT_MARGINS" value="160" />

spinner/lib/src/main/assets/browse.hbs

@@ -38,7 +38,7 @@
       </form>
 
       <!-- Data Rows -->
-      <table id="data-table" class="invisible">
+      <table>
         <tr>
           {{#each queryResult.columns}}
             <th>{{this}}</th>
@@ -55,7 +55,6 @@
     {{else}}
       <div>Select a table from above and click 'browse'.</div>
     {{/if}}
-    <div id="handson-table"></div>
 
     <br />
 
@@ -71,44 +70,6 @@
       <input type="submit" name="action" value="last" {{#if pagingData.lastPage}}disabled{{/if}} />
     </form>
 
-
-    <script src="/js/lib/handsontable.full.min.js"></script>
-
     {{> partials/suffix}}
-
-    <script>
-      function main() {
-        const table = document.getElementById('data-table')
-        if (!table) {
-          return;
-        }
-
-        const data = htmlToHandsonData(table)
-        table.remove()
-
-        const renderers = []
-        for (const header of data.headers) {
-          renderers.push({ renderer: 'nullRenderer' })
-        }
-
-        const hot = new Handsontable(document.getElementById('handson-table'), {
-          data: data.rows,
-          colHeaders: data.headers,
-          columns: renderers,
-          readOnly: true,
-          filters: true,
-          columnSorting: true,
-          manualColumnResize: true,
-          manualColumnMove: true,
-          manualRowResize: true,
-          dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
-          viewportColumnRenderingOffset: 1000,
-          licenseKey: 'non-commercial-and-evaluation'
-        })
-      }
-
-      main()
-    </script>
   </body>
-
 </html>

spinner/lib/src/main/assets/css/main.css

@@ -50,12 +50,18 @@ select, input, button {
 }
 
 table, th, td {
-  font-family: 'JetBrains Mono', monospace;
+  border: 1px solid black;
   font-size: 1rem;
 }
 
-.handsontable td.htDimmed {
+th, td {
-  color: #000;
+  padding: 8px;
+}
+
+th {
+  position: sticky;
+  top: 0;
+  background: var(--background-color);
 }
 
 .handsontable th {
@@ -131,10 +137,6 @@ h2.collapse-header, h2.collapse-header+div {
   display: none;
 }
 
-.invisible {
-  opacity: 0;
-}
-
 table.device-info {
   margin-bottom: 16px;
 }

spinner/lib/src/main/assets/js/main.js

@@ -14,10 +14,6 @@ function init() {
     window.location.href = window.location.href.split('?')[0] + '?db=' + e.target.value;
   }
 
-  if (typeof Handsontable !== 'undefined') {
-    Handsontable.renderers.registerRenderer('nullRenderer', nullRenderer)
-  }
-
   document.querySelector('#theme-toggle').onclick = function() {
     if (document.body.getAttribute('data-theme') === 'dark') {
       document.body.removeAttribute('data-theme');
@@ -34,39 +30,4 @@ function init() {
   }
 }
 
-
-function htmlToHandsonData(table) {
-  const headers = []
-  const rows = []
-
-  for (const row of table.querySelectorAll('tr')) {
-    for (const th of row.querySelectorAll('th')) {
-      headers.push(th.innerText)
-    }
-
-    const cells = []
-
-    for (const td of row.querySelectorAll('td')) {
-      cells.push(td.innerText)
-    }
-
-    if (cells.length > 0) {
-      rows.push(cells)
-    }
-  }
-
-  return {
-    headers: headers, 
-    rows: rows
-  }
-}
-
-function nullRenderer(hot, td, row, column, props, value, cellProperties) {
-  if (value === 'null') {
-    td.innerHTML = `<em class="null">null</em>`
-  } else {
-    td.innerHTML = value
-  }
-}
-
 init();

spinner/lib/src/main/assets/partials/head.hbs

@@ -8,9 +8,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 
-  <!-- handsontable -->
-  <link href="/css/lib/handsontable.full.min.css" rel="stylesheet">
-
-  <!-- Us -->
   <link href="/css/main.css" rel="stylesheet">
+  <style type="text/css">
+  </style>
 </head>

spinner/lib/src/main/assets/query.hbs

@@ -29,7 +29,7 @@
       {{queryResult.timeToFirstRow}} ms to read the first row. <br />
       {{queryResult.timeToReadRows}} ms to read the rest of the rows. <br />
       <br />
-      <table id="data-table" class="invisible">
+      <table>
         <tr>
           {{#each queryResult.columns}}
             <th>{{this}}</th>
@@ -43,14 +43,10 @@
           </tr>
         {{/each}}
       </table>
-
-      <div id="handson-table"></div>
     {{else}}
       No data.
     {{/if}}
 
-    <script src="/js/lib/handsontable.full.min.js"></script>
-
     {{> partials/suffix}}
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -92,34 +88,6 @@
           bindKey: {win: "Ctrl-Shift-F", mac: "Command-Shift-F"},
           exec: formatSql
         });
-
-        const table = document.getElementById('data-table')
-        if (!table) {
-          return;
-        }
-
-        const data = htmlToHandsonData(table)
-        table.remove()
-
-        const renderers = []
-        for (const header of data.headers) {
-          renderers.push({ renderer: 'nullRenderer' })
-        }
-
-        const hot = new Handsontable(document.getElementById('handson-table'), {
-          data: data.rows,
-          colHeaders: data.headers,
-          columns: renderers,
-          readOnly: true,
-          filters: true,
-          columnSorting: true,
-          manualColumnResize: true,
-          manualColumnMove: true,
-          manualRowResize: true,
-          dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
-          viewportColumnRenderingOffset: 1000,
-          licenseKey: 'non-commercial-and-evaluation'
-        })
       }
 
       function onFormatClicked(e) {