From 39e23c464cde249d39785cc5bfe4dabafabd9427 Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Tue, 16 Apr 2024 11:24:30 +0200 Subject: [PATCH 1/8] Update tabler icons. --- src/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 5a66ebd..5e9c5b0 100644 --- 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 { @@ -781,7 +781,7 @@

About Huey...

  • Huey version 0.0.3 - tiny ripple
  • DuckDB WASM 1.28.1-dev179.0
    • -
  • Tabler Icons v2.47.0
    • +
  • Tabler Icons v3.2.0
  • Huey Source on Github
  • License (MIT)
    • From a8fc04567b6fd67c99ecdcc41ba19b55d61afc97 Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Tue, 16 Apr 2024 13:35:25 +0200 Subject: [PATCH 2/8] Fixes https://github.com/rpbouman/huey/issues/70 --- src/PivotTableUi/PivotTableUi.css | 9 ++++ src/PivotTableUi/PivotTableUi.js | 62 +++++++++++++++++++++++----- src/SettingsDialog/SettingsDialog.js | 3 ++ src/index.html | 24 ++++++++++- 4 files changed, 87 insertions(+), 11 deletions(-) diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css index 9868334..7152972 100644 --- a/src/PivotTableUi/PivotTableUi.css +++ b/src/PivotTableUi/PivotTableUi.css @@ -230,3 +230,12 @@ 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 { + display: none; +} \ No newline at end of file diff --git a/src/PivotTableUi/PivotTableUi.js b/src/PivotTableUi/PivotTableUi.js index e8a516d..40fd647 100644 --- 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); @@ -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,8 +1209,8 @@ class PivotTableUi { var rowTuples = renderAxisPromisesResults[1]; this.#setVerticalSize(0); this.#renderRows(rowTuples); - - this.#updateVerticalSizer(); + + this.#updateVerticalSizer(); this.#removeExcessColumns(); this.#updateHorizontalSizer(); diff --git a/src/SettingsDialog/SettingsDialog.js b/src/SettingsDialog/SettingsDialog.js index d10091b..79dab06 100644 --- 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 index 5e9c5b0..baf3018 100644 --- a/src/index.html +++ b/src/index.html @@ -689,12 +689,34 @@

    Settings

    - +
    + +
    + + +
    +
    + + +
    +
    +
    + From d8c0ab6d25ef293cd3cea5092a083e9f6a9775a9 Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Wed, 24 Apr 2024 10:08:05 +0200 Subject: [PATCH 3/8] Fix vertical scrollbar issue --- src/PivotTableUi/PivotTableUi.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css index 7152972..72c3955 100644 --- a/src/PivotTableUi/PivotTableUi.css +++ b/src/PivotTableUi/PivotTableUi.css @@ -238,4 +238,8 @@ */ .pivotTableUiContainer[aria-busy=true] > .pivotTableUiInnerContainer > .pivotTableUiTable > .pivotTableUiTableBody > .pivotTableUiRow > .pivotTableUiHeaderCell > .pivotTableUiCellLabel { display: none; +} + +.pivotTableUiContainer > .pivotTableUiInnerContainer > .pivotTableUiTable > .pivotTableUiTableBody > .pivotTableUiRow > .pivotTableUiHeaderCell { + height: 18px; } \ No newline at end of file From 1871b1f70b261b54d1e3bbd22e9de617e0f6ed1a Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Wed, 24 Apr 2024 10:09:38 +0200 Subject: [PATCH 4/8] add comment --- src/PivotTableUi/PivotTableUi.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css index 72c3955..973bcdc 100644 --- a/src/PivotTableUi/PivotTableUi.css +++ b/src/PivotTableUi/PivotTableUi.css @@ -240,6 +240,9 @@ display: none; } +/** + This is here to allow the vertical scrolbar height to be calculated correctly even if the cells are hidden (see above). +*/ .pivotTableUiContainer > .pivotTableUiInnerContainer > .pivotTableUiTable > .pivotTableUiTableBody > .pivotTableUiRow > .pivotTableUiHeaderCell { height: 18px; } \ No newline at end of file From a8155c3cd3bfa5dc070744919d559009270fd8f0 Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Wed, 24 Apr 2024 10:46:06 +0200 Subject: [PATCH 5/8] More robust layout. --- src/PivotTableUi/PivotTableUi.css | 16 ---------------- src/PivotTableUi/PivotTableUi.js | 10 ++++++---- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css index 973bcdc..9868334 100644 --- a/src/PivotTableUi/PivotTableUi.css +++ b/src/PivotTableUi/PivotTableUi.css @@ -230,19 +230,3 @@ 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 { - display: none; -} - -/** - This is here to allow the vertical scrolbar height to be calculated correctly even if the cells are hidden (see above). -*/ -.pivotTableUiContainer > .pivotTableUiInnerContainer > .pivotTableUiTable > .pivotTableUiTableBody > .pivotTableUiRow > .pivotTableUiHeaderCell { - height: 18px; -} \ No newline at end of file diff --git a/src/PivotTableUi/PivotTableUi.js b/src/PivotTableUi/PivotTableUi.js index 40fd647..17254a2 100644 --- a/src/PivotTableUi/PivotTableUi.js +++ b/src/PivotTableUi/PivotTableUi.js @@ -920,7 +920,7 @@ class PivotTableUi { var label = createEl('span', { "class": "pivotTableUiCellLabel", title: labelText - }, labelText); + }, String.fromCharCode(160)); cell.appendChild(label); @@ -1090,13 +1090,13 @@ class PivotTableUi { } if (!labelText || !labelText.length) { - labelText = ' '; + labelText = String.fromCharCode(160); } var label = createEl('span', { "class": "pivotTableUiCellLabel", title: labelText - }, labelText); + }, String.fromCharCode(160)); cell.appendChild(label); if (headerCellWidth < labelText.length){ @@ -1215,7 +1215,9 @@ class PivotTableUi { this.#updateHorizontalSizer(); this.#renderCells(); - await this.#updateCellData(0, 0); + + await this.#updateDataToScrollPosition(); + //await this.#updateCellData(0, 0); this.#setNeedsUpdate(false); //var currentRoute = Routing.getRouteForView(this); From 523bb1fa473c0bf48a53119cd6cb170235425ade Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Wed, 24 Apr 2024 11:29:50 +0200 Subject: [PATCH 6/8] Again, layout. --- src/PivotTableUi/PivotTableUi.css | 11 +++++++++++ src/PivotTableUi/PivotTableUi.js | 8 ++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/PivotTableUi/PivotTableUi.css b/src/PivotTableUi/PivotTableUi.css index 9868334..2f1c6df 100644 --- 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 index 17254a2..5f62ac6 100644 --- a/src/PivotTableUi/PivotTableUi.js +++ b/src/PivotTableUi/PivotTableUi.js @@ -920,7 +920,7 @@ class PivotTableUi { var label = createEl('span', { "class": "pivotTableUiCellLabel", title: labelText - }, String.fromCharCode(160)); + }, labelText); cell.appendChild(label); @@ -1096,7 +1096,7 @@ class PivotTableUi { var label = createEl('span', { "class": "pivotTableUiCellLabel", title: labelText - }, String.fromCharCode(160)); + }, labelText); cell.appendChild(label); if (headerCellWidth < labelText.length){ @@ -1215,9 +1215,9 @@ class PivotTableUi { this.#updateHorizontalSizer(); this.#renderCells(); - - await this.#updateDataToScrollPosition(); + //await this.#updateCellData(0, 0); + await this.#updateDataToScrollPosition(); this.#setNeedsUpdate(false); //var currentRoute = Routing.getRouteForView(this); From 9385a47fe72c8293b64d01bf84d962db57303843 Mon Sep 17 00:00:00 2001 From: Roland Bouman Date: Thu, 25 Apr 2024 01:53:07 +0200 Subject: [PATCH 7/8] update duckdb version. --- src/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index baf3018..c2c1214 100644 --- a/src/index.html +++ b/src/index.html @@ -800,9 +800,9 @@

    About Huey...

    A DuckDB User Interface

      -
    • Huey version 0.0.3 - tiny ripple
      • +
    • Huey version 0.0.4 - tricky duckling
      • -
    • DuckDB WASM 1.28.1-dev179.0
      • +
    • DuckDB WASM 1.28.1-dev181.0
    • Tabler Icons v3.2.0
    • Huey Source on Github
    • License (MIT)
      • @@ -1083,7 +1083,7 @@

      Axis Caption