Merge pull request #85 from rpbouman/dev

Upgrade DuckDB WASM, column width feature
rpbouman · Apr 27, 2024 · 3d661cc · 3d661cc
2 parents 866dc41 + 79f3c67
commit 3d661cc
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 18 deletions.
diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css
@@ -230,3 +230,14 @@
   font-weight: bold;
 }
 
+/* 
+  This is here for https://github.com/rpbouman/huey/issues/70
+  basically, we need to suprress display of the label text while we're still busy (rendering the table)
+  If we don't, the cells will not have yet assumed the assigned cell width 
+  and this messes up our calculation of how much columns we should render.
+*/
+.pivotTableUiContainer[aria-busy=true] > .pivotTableUiInnerContainer > .pivotTableUiTable > .pivotTableUiTableBody > .pivotTableUiRow > .pivotTableUiHeaderCell > .pivotTableUiCellLabel {
+  width: 1ch;
+  visibility: hidden;
+}
+
diff --git a/src/PivotTableUi/PivotTableUi.js b/src/PivotTableUi/PivotTableUi.js
@@ -640,9 +640,11 @@ class PivotTableUi {
         var width = headerCell.style.width;
         if (width.endsWith('ch')){
           var newWidth = labelText.length + 1;
+
           if (newWidth > PivotTableUi.#maximumCellWidth) {
             newWidth = PivotTableUi.#maximumCellWidth;
           }
+
           if (newWidth > parseInt(width, 10)) {
             headerCell.style.width = newWidth + 'ch';
           }
@@ -723,14 +725,20 @@ class PivotTableUi {
         });
         tableRow.appendChild(tableCell);
 
+        var columnWidth;
         // headers for the  row axis columns
         if (i === (numColumnAxisRows - 1)) {
-          var columnWidth;
           if (j < rowsAxisItems.length){
             tableCell.className += ' pivotTableUiRowsAxisHeaderCell';
             var rowsAxisItem = rowsAxisItems[j];
             labelText = QueryAxisItem.getCaptionForQueryAxisItem(rowsAxisItem);
-            columnWidth = (labelText.length + 1) + 'ch';
+            columnWidth = (labelText.length + 2);
+
+            if (columnWidth > PivotTableUi.#maximumCellWidth) {
+              columnWidth = PivotTableUi.#maximumCellWidth;
+            }
+
+            columnWidth += 'ch';
             label = createEl('span', {
               "class": 'pivotTableUiCellLabel pivotTableUiAxisHeaderLabel',
               title: labelText
@@ -744,7 +752,14 @@ class PivotTableUi {
               columnWidth = labelText.length;
               return columnWidth > acc ? columnWidth : acc;
             }, 0);
-            columnWidth = (columnWidth + 2) + 'ch';
+
+            columnWidth += 1;   
+
+            if (columnWidth > PivotTableUi.#maximumCellWidth) {
+              columnWidth = PivotTableUi.#maximumCellWidth;
+            }
+
+            columnWidth += 'ch';
           }
 
           firstTableHeaderRow = tableHeaderDom.childNodes.item(0);
@@ -763,7 +778,14 @@ class PivotTableUi {
           "class": 'pivotTableUiCellLabel pivotTableUiAxisHeaderLabel',
           title: labelText
         }, labelText);
-        tableCell.style.width = (labelText.length + 1) + 'ch';
+
+        columnWidth = labelText.length + 1;
+
+        if (columnWidth > PivotTableUi.#maximumCellWidth) {
+          columnWidth = PivotTableUi.#maximumCellWidth;
+        }
+
+        tableCell.style.width = columnWidth + 'ch';
         tableCell.appendChild(label);
       }
     }
@@ -910,13 +932,19 @@ class PivotTableUi {
           }
 
           if (j === headerRows.length - 1) {
-            stufferCell.previousSibling.style.width = (columnWidth + 1) + 'ch';
+
+            columnWidth += 1;
+            if (columnWidth > PivotTableUi.#maximumCellWidth) {
+              columnWidth = PivotTableUi.#maximumCellWidth;
+            }
+
+            stufferCell.previousSibling.style.width = columnWidth + 'ch';
           }
         }
 
         physicalColumnsAdded += 1;
         //check if the table overshoots the allowable width
-        while (tableDom.clientWidth > innerContainerWidth) {
+        if (tableDom.clientWidth > innerContainerWidth) {
           return;
         }
       }
@@ -1035,7 +1063,7 @@ class PivotTableUi {
           });
 
           var headerCell = firstTableHeaderRowCells[bodyRow.childNodes.length];
-          var headerCellWidth = parseInt(headerCell.style.width);
+          var headerCellWidth = parseInt(headerCell.style.width, 10);
 
           bodyRow.appendChild(cell);
 
@@ -1062,7 +1090,7 @@ class PivotTableUi {
           }
 
           if (!labelText || !labelText.length) {
-            labelText = '&#160;';
+            labelText = String.fromCharCode(160);
           }
 
           var label = createEl('span', {
@@ -1072,8 +1100,14 @@ class PivotTableUi {
           cell.appendChild(label);
 
           if (headerCellWidth < labelText.length){
-            headerCellWidth = labelText.length;
+            headerCellWidth = labelText.length + 1;
+
+            if (headerCellWidth > PivotTableUi.#maximumCellWidth) {
+              headerCellWidth = PivotTableUi.#maximumCellWidth;
+            }
+
             headerCell.style.width = headerCellWidth + 'ch';
+            cell.style.width = headerCellWidth + 'ch';
           }
         }
 
@@ -1132,6 +1166,14 @@ class PivotTableUi {
     if (this.#getBusy()) {
       return;
     }
+
+    var maxCellWidth = this.#settings.getSettings('pivotSettings').maxCellWidth;
+    maxCellWidth = parseInt(maxCellWidth, 10);
+    if ( isNaN(maxCellWidth) || maxCellWidth <= 0 ) {
+      maxCellWidth = 30;
+    }
+    PivotTableUi.#maximumCellWidth = maxCellWidth;
+
     var tableDom = this.#getTableDom();
     try {
 
@@ -1167,13 +1209,15 @@ class PivotTableUi {
       var rowTuples = renderAxisPromisesResults[1];
       this.#setVerticalSize(0);
       this.#renderRows(rowTuples);
-
-      this.#updateVerticalSizer();
+           
+      this.#updateVerticalSizer();      
       this.#removeExcessColumns();
       this.#updateHorizontalSizer();
 
       this.#renderCells();
-      await this.#updateCellData(0, 0);
+
+      //await this.#updateCellData(0, 0);
+      await this.#updateDataToScrollPosition();
       this.#setNeedsUpdate(false);
 
       //var currentRoute = Routing.getRouteForView(this);

diff --git a/src/SettingsDialog/SettingsDialog.js b/src/SettingsDialog/SettingsDialog.js
@@ -65,6 +65,9 @@ class Settings extends EventEmitter {
     querySettings: {
       autoRunQuery: false
     },
+    pivotSettings: {
+      maxCellWidth: 30
+    },
     exportUi: {
       exportTitleTemplate: '${cells-items} from ${datasource} with ${rows-items} on rows and ${columns-items} on columns',
       // radio

diff --git a/src/index.html b/src/index.html
@@ -34,7 +34,7 @@
         font-style: normal;
         font-weight: 400;
         font-display: block;
-        src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/fonts/tabler-icons.woff2?v2.47.0") format("woff2");
+        src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.2.0/dist/fonts/tabler-icons.woff2?v3.2.0") format("woff2");
       }
 
       ul#resources > li::marker {
@@ -689,12 +689,34 @@ <h3 id="settingsDialogTitle">Settings</h3>
           <input id="querySettingsTab" type="radio" name="settingsTabs"/>
           <div role="tabpanel">
             <form id="querySettings">
-              <label for="autoRunQuery">Autorun Query</label>
+              <label 
+                for="autoRunQuery"
+                title="When enabled the pivot table is updated automatically after modifying the query. When disabled, you have to explicitly hit the execute button."
+              >Autorun Query</label>
               <input id="autoRunQuery" type="checkbox"/>
             </form>
           </div>
         </div>
 
+        <!--
+          Pivot Table
+        -->
+        <div>
+          <label
+            role="tab"
+            for="pivotSettingsTab"
+          >
+            Pivot Table
+          </label>
+          <input id="pivotSettingsTab" type="radio" name="settingsTabs"/>
+          <div role="tabpanel">
+            <form id="pivotSettings">
+              <label for="maxCellWidth">Max cellwidth (ch)</label>
+              <input id="maxCellWidth" type="number" min="1" max="256" value="30"/>
+            </form>
+          </div>
+        </div>
+
         <!--
           Theme
         -->
@@ -778,10 +800,10 @@ <h3 id="aboutDialogTitle">About Huey...</h3>
           A DuckDB User Interface
         </p>
         <ul>
-          <li>Huey version 0.0.3 - tiny ripple</li>
+          <li>Huey version 0.0.4 - tricky duckling</li>
           <li><a href="https://duckdb.org/" target="_duckdb" id="duckdbVersionLabel"></a></li>
-          <li><a href="https://www.jsdelivr.com/package/npm/@duckdb/duckdb-wasm?version=1.28.1-dev179.0" target="jsdelivr">DuckDB WASM 1.28.1-dev179.0</a></li>
-          <li><a href="https://tabler.io/icons" target="_tabler-icons">Tabler Icons v2.47.0</a></li>
+          <li><a href="https://www.jsdelivr.com/package/npm/@duckdb/duckdb-wasm?version=1.28.1-dev181.0" target="jsdelivr">DuckDB WASM 1.28.1-dev181.0</a></li>
+          <li><a href="https://tabler.io/icons" target="_tabler-icons">Tabler Icons v3.2.0</a></li>
           <li><a href="https://github.com/rpbouman/huey/" target="_github">Huey Source on Github</a></li>
           <li><a href="https://raw.githubusercontent.com/rpbouman/huey/dev/LICENSE" target="_github">License (MIT)</a></li>
         </ul>
@@ -1061,7 +1083,7 @@ <h1>Axis Caption</h1>
 
     <script onload="resourceLoaded(this)" src="App/App.js"></script>
     <script type="module">
-      import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]dev179.0/+esm';
+      import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]dev181.0/+esm';
 
       const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
       const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);

diff --git a/src/util/sql/SQLHelper.js b/src/util/sql/SQLHelper.js
@@ -10,6 +10,9 @@ function createNumberFormatter(fractionDigits){
   if (fractionDigits){
     options.minimumFractionDigits = localeSettings.minimumFractionDigits;
     options.maximumFractionDigits = localeSettings.maximumFractionDigits;
+    if (options.maximumFractionDigits < options.minimumFractionDigits) {
+      options.maximumFractionDigits = options.minimumFractionDigits;
+    }
   }
   var formatter;
   try {