@easyquery/ui 7.4.2 → 7.5.0-rc02

package/dist/easyquery.ui.esm.js

@@ -42,11 +42,15 @@ class EntitiesPanel extends Widget {
      * The default constructor.
      * @param slot The html element.
      */
-    constructor(slot) {
+    constructor(slot, customQuery) {
         super(slot);
+        this.customQuery = null;
         this.queryChangedCallbackId = null;
         this.group = WidgetGroup.Model | WidgetGroup.Query;
         this.panel = slot;
+        if (customQuery) {
+            this.customQuery = customQuery;
+        }
     }
     getWidgetType() {
         return 'entitiesPanel';
@@ -61,6 +65,12 @@ class EntitiesPanel extends Widget {
         this.setOptions(options);
         this.renderProgressBlock();
     }
+    getQuery() {
+        if (this.customQuery) {
+            return this.customQuery;
+        }
+        return this.context.getQuery();
+    }
     /**
     * Refresh widget implementation
     */
@@ -110,11 +120,11 @@ class EntitiesPanel extends Widget {
             utils.assignDeep(this.options, options);
         }
         if (this.queryChangedCallbackId) {
-            const query = this.context.getQuery();
+            const query = this.getQuery();
             query.removeChangedCallback(this.queryChangedCallbackId);
         }
         if (this.options.syncWithColumns) {
-            const query = this.context.getQuery();
+            const query = this.getQuery();
             this.queryChangedCallbackId = query.addChangedCallback((ev) => {
                 const edata = ev.data;
                 if (!edata || (edata.part != QueryChangePart.Columns && edata.part != QueryChangePart.All)) {
@@ -225,7 +235,7 @@ class EntitiesPanel extends Widget {
                         if (this.options.syncWithColumns) {
                             attrInput.addEventListener('change', (ev) => {
                                 const model = this.context.getModel();
-                                const query = this.context.getQuery();
+                                const query = this.getQuery();
                                 const checkbox = ev.currentTarget;
                                 const attrId = checkbox.parentElement.parentElement.getAttribute('data-id');
                                 if (model.checkAttrProperty(attrId, "useInResult")) {
@@ -324,7 +334,7 @@ class EntitiesPanel extends Widget {
                 entity.checked = element.checked;
             }
             if (this.options.syncWithColumns) {
-                const query = this.context.getQuery();
+                const query = this.getQuery();
                 const model = this.context.getModel();
                 const attrList = [];
                 const attrElems = Array.from(entityChildren.querySelectorAll(`.${this.cssPrefix}-entity-attr`));
@@ -429,7 +439,7 @@ class EntitiesPanel extends Widget {
                 const attrElements = this.panel.querySelectorAll(`.${this.cssPrefix}-entity-attr`);
                 let attrList = [];
                 let attrId;
-                const query = this.context.getQuery();
+                const query = this.getQuery();
                 query.fireProcessEvent({
                     source: self,
                     status: "start"
@@ -467,7 +477,7 @@ class EntitiesPanel extends Widget {
                 let attrElements = this.panel.querySelectorAll(`.${this.cssPrefix}-entity-attr`);
                 let attrList = [];
                 let attrId;
-                let query = this.context.getQuery();
+                let query = this.getQuery();
                 query.fireProcessEvent({
                     source: self,
                     status: "start"
@@ -530,7 +540,7 @@ class EntitiesPanel extends Widget {
     }
     refreshCheckedStateByColumns() {
         this.deselectAll();
-        const query = this.context.getQuery();
+        const query = this.getQuery();
         const exprColumns = query.getColumns()
             .filter(col => col.expr.tag === ExprTag.EntityAttribute);
         for (const column of exprColumns) {
@@ -647,6 +657,80 @@ var ConditionsEditMode;
     ConditionsEditMode[ConditionsEditMode["Full"] = 255] = "Full";
 })(ConditionsEditMode || (ConditionsEditMode = {}));
 
+function computeMenuPlacement(input) {
+    const minOffset = input.minOffset != null ? input.minOffset : 15;
+    const alignOffset = input.alignOffset != null ? input.alignOffset : 0;
+    const { anchorY, anchorHeight, menuHeight, scrollDivHeight, scrollY, viewportHeight, levelIndex, useMaxSpace } = input;
+    const viewportTopDoc = scrollY;
+    const viewportBottomDoc = scrollY + viewportHeight;
+    // A sub-level sits beside its parent item, so it aligns top-with-top when
+    // opening downward and bottom-with-bottom when opening upward. The root
+    // level opens below or above its anchor element.
+    const sideAttached = levelIndex > 0;
+    const downTop = sideAttached ? anchorY - alignOffset : anchorY + anchorHeight;
+    const upBottom = sideAttached ? anchorY + anchorHeight + alignOffset : anchorY;
+    const spaceBelow = (viewportBottomDoc - minOffset) - downTop;
+    const spaceAbove = upBottom - (viewportTopDoc + minOffset);
+    // A. fits below the anchor without scrolling
+    if (menuHeight < spaceBelow) {
+        return { top: downTop, maxHeight: null };
+    }
+    // B. fits above without scrolling
+    if (menuHeight < spaceAbove) {
+        return { top: upBottom - menuHeight, maxHeight: null };
+    }
+    // C. useMaxSpace: occupy as much of the viewport as the list needs,
+    // growing from the anchor toward the side with more room and sliding
+    // past the anchor only as far as the viewport edge requires; a list
+    // taller than the viewport fills it and scrolls internally. With the
+    // option off, every level stays attached to its trigger instead (D/E).
+    if (useMaxSpace) {
+        if (spaceAbove <= spaceBelow) {
+            let top = sideAttached ? downTop : anchorY;
+            const overflowBottom = (top + menuHeight) - (viewportBottomDoc - minOffset);
+            if (overflowBottom > 0) {
+                top -= overflowBottom;
+            }
+            let maxHeight = null;
+            const overflowTop = (viewportTopDoc + minOffset) - top;
+            if (overflowTop > 0) {
+                top += overflowTop;
+                maxHeight = scrollDivHeight - overflowTop;
+            }
+            return { top, maxHeight };
+        }
+        let top = upBottom - menuHeight;
+        const overflowTop = (viewportTopDoc + minOffset) - top;
+        if (overflowTop > 0) {
+            top += overflowTop;
+        }
+        let maxHeight = null;
+        const overflowBottom = (top + menuHeight) - (viewportBottomDoc - minOffset);
+        if (overflowBottom > 0) {
+            maxHeight = scrollDivHeight - overflowBottom;
+        }
+        return { top, maxHeight };
+    }
+    // D. drop down with an internal scroll
+    if (spaceAbove <= spaceBelow) {
+        let maxHeight = null;
+        const overflow = menuHeight - spaceBelow;
+        if (overflow > 0) {
+            maxHeight = scrollDivHeight - overflow;
+        }
+        return { top: downTop, maxHeight };
+    }
+    // E. drop up with an internal scroll
+    let top = upBottom - menuHeight;
+    let maxHeight = null;
+    const overflowTop = (viewportTopDoc + minOffset) - top;
+    if (overflowTop > 0) {
+        maxHeight = scrollDivHeight - overflowTop;
+        top += overflowTop;
+    }
+    return { top, maxHeight };
+}
+
 class MenuLevel {
     get applyItem() {
         return this._applyItem;
@@ -823,6 +907,7 @@ class MenuLevel {
             .addClass(getMobileCssClass());
         scrollDiv.style.overflowX = "hidden";
         scrollDiv.style.overflowY = "auto";
+        scrollDiv.style.setProperty("overscroll-behavior", "contain");
         scrollDiv.style.position = "relative";
         baseDiv.appendChild(scrollDiv);
         this.levelDiv = baseDiv;
@@ -914,7 +999,7 @@ class MenuLevel {
         }
     }
     focusScrollDiv() {
-        this.scrollDiv.focus();
+        this.scrollDiv.focus({ preventScroll: true });
     }
     turnCheckboxes(items) {
         //turn checkboxes on for selected items
@@ -1431,8 +1516,7 @@ class MenuLevel {
         const leftSpace = pos.x - scroll.left;
         const rightSpace = winSize.width - leftSpace - menuItem.itemDiv.offsetWidth;
         pos.x += menuItem.itemDiv.offsetParent.offsetWidth;
-        pos.y -= 5;
-        menuItem.subLevel.showAt(pos.x, pos.y, true, true);
+        menuItem.subLevel.showAt(pos.x, pos.y, true, true, menuItem.itemDiv);
         menuItem.subLevel.levelDiv.style.width = '';
         menuItem.subLevel.levelDiv.style.right = '';
         if ((rightSpace >= menuItem.subLevel.levelDiv.offsetWidth) || (rightSpace >= leftSpace)) { //show level to the right
@@ -1487,48 +1571,25 @@ class MenuLevel {
         const viewportHeight = getViewportSize().height;
         const anchorRect = anchor ? anchor.getBoundingClientRect() : null;
         const anchorHeight = anchorRect ? anchorRect.height : 0;
-        const upperSpace = y - scrollY;
-        const lowerSpace = viewportHeight - upperSpace - anchorHeight;
-        const minOffset = 15;
-        // Рахуємо початковий контейнер
-        let levelDivRect = this.levelDiv.getBoundingClientRect();
-        if (this.levelIndex == 0 && levelDivRect.height < lowerSpace - minOffset) { //root level. Have enough space to drop down without scroll
-            levelStyle.top = (y + anchorHeight) + 'px';
-        }
-        else if (this.levelIndex == 0 && levelDivRect.height < upperSpace - minOffset) { //root level. Have enough space to drop up without scroll
-            levelStyle.top = (y - levelDivRect.height) + 'px';
-        }
-        else if (useMaxSpace || this.levelIndex > 0) { //sub-level or useMaxSpace option set. Use all the space
-            const outsideBottom = levelDivRect.bottom + minOffset - scrollY - viewportHeight;
-            if (outsideBottom > 0) {
-                levelStyle.top = levelDivRect.top - outsideBottom + 'px';
-            }
-            levelDivRect = this.levelDiv.getBoundingClientRect();
-            const outsideTop = scrollY + minOffset - levelDivRect.top;
-            if (outsideTop > 0) {
-                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
-                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
-                levelStyle.top = levelDivRect.top + outsideTop + 'px';
-            }
-        }
-        else if (upperSpace <= lowerSpace) { //root level. Drop down with scroll
-            levelStyle.top = (y + anchorHeight) + 'px';
-            const outsideBottom = levelDivRect.height + minOffset - lowerSpace;
-            if (outsideBottom > 0) {
-                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
-                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideBottom + 'px';
-            }
-        }
-        else { //root level. Drop up with scroll
-            y -= levelDivRect.height;
-            const outsideTop = scrollY + minOffset - y;
-            if (outsideTop > 0) {
-                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
-                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
-                y += outsideTop;
-            }
-            levelStyle.top = y + 'px';
-        }
+        // Measure natural sizes (maxHeight was just reset above), then delegate
+        // all vertical placement to a pure, document-coordinate helper.
+        const levelDivRect = this.levelDiv.getBoundingClientRect();
+        const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+        const placement = computeMenuPlacement({
+            anchorY: y,
+            anchorHeight,
+            menuHeight: levelDivRect.height,
+            scrollDivHeight: scrollDivRect.height,
+            scrollY,
+            viewportHeight,
+            levelIndex: this.levelIndex,
+            useMaxSpace,
+            // sub-levels sit beside their parent item; compensate the menu
+            // padding so the first/last sub-item lines up with the item
+            alignOffset: this.levelIndex > 0 ? 5 : 0,
+        });
+        levelStyle.top = placement.top + 'px';
+        this.scrollDiv.style.maxHeight = placement.maxHeight == null ? '' : placement.maxHeight + 'px';
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
         if (minItemWidth > 0 && this.scrollDiv.offsetWidth < minItemWidth) {
@@ -1547,10 +1608,10 @@ class MenuLevel {
     }
     focus() {
         window.setTimeout(() => {
-            this.scrollDiv.focus();
+            this.scrollDiv.focus({ preventScroll: true });
             if (this.searchBox != null) {
                 if (this.parentMenu.options.searchBoxAutoFocus) {
-                    this.searchBox.focus();
+                    this.searchBox.focus({ preventScroll: true });
                 }
                 this.searchBox.value = "";
             }
@@ -1832,6 +1893,10 @@ class PopupMenu {
             this.rootLevel.levelDiv.style.position = 'fixed';
             this.rootLevel.levelDiv.style.fontSize = '20px';
             this.rootLevel.showAt(0, 0, true, true);
+            //the full-screen menu is a column: the list of items takes all the space left
+            //after the search box and the "Close" button (see the .eqjs-mobile rules in the CSS).
+            //It's set after showAt() which turns any level into a plain block.
+            this.rootLevel.levelDiv.style.display = 'flex';
         }
         else {
             const anchor = options.anchor || document.documentElement;
@@ -3369,7 +3434,7 @@ class ColumnsPanel extends Widget {
     get cssPrefix() {
         return 'eqjs-qc';
     }
-    constructor(slot) {
+    constructor(slot, customQuery) {
         super(slot);
         this.options = {
             isSubQuery: false,
@@ -3403,6 +3468,7 @@ class ColumnsPanel extends Widget {
             showIndicatorOnLoad: true,
             editMode: ColumnsEditMode.Full
         };
+        this.customQuery = null;
         this.landingSlot = domel('div')
             .addClass(`${this.cssPrefix}-col-landing-slot`)
             .addChildElement(domel('div')
@@ -3411,6 +3477,9 @@ class ColumnsPanel extends Widget {
         this.landingIndex = -1;
         this.slot.classList.add(`${this.cssPrefix}-panel`);
         this.group = WidgetGroup.Query;
+        if (customQuery) {
+            this.customQuery = customQuery;
+        }
     }
     getWidgetType() {
         return 'columnsPanel';
@@ -3659,6 +3728,9 @@ class ColumnsPanel extends Widget {
         }
     }
     getQuery() {
+        if (this.customQuery) {
+            return this.customQuery;
+        }
         return this.getContext().getQuery();
     }
     showLandingSlot(pageX, pageY) {
@@ -5620,7 +5692,7 @@ class SortingBar extends Widget {
     get cssPrefix() {
         return "eqjs-sb";
     }
-    constructor(slot) {
+    constructor(slot, customQuery) {
         super(slot);
         this.options = {
             showAddRow: true,
@@ -5633,6 +5705,7 @@ class SortingBar extends Widget {
                 itemRenderedCallback: null
             },
         };
+        this.customQuery = null;
         this.sortMenuList = [
             { id: 'None', text: i18n.getText('CmdNotSorted') },
             { id: 'Ascending', text: i18n.getText('CmdAscending') },
@@ -5651,6 +5724,9 @@ class SortingBar extends Widget {
             .addClass(`${this.cssPrefix}-panel`)
             .addClass(getMobileCssClass());
         this.group = WidgetGroup.Query;
+        if (customQuery) {
+            this.customQuery = customQuery;
+        }
     }
     getWidgetType() {
         return 'sortingBar';
@@ -5716,6 +5792,9 @@ class SortingBar extends Widget {
         }
     }
     getQuery() {
+        if (this.customQuery) {
+            return this.customQuery;
+        }
         return this.getContext().getQuery();
     }
     getModel() {
@@ -8978,6 +9057,25 @@ class Grid extends Widget {
     }
 }
 
+/**
+ * Computes a stable per-column identity used to persist column widths:
+ * the query column's expression (attribute id, else the serialized expression),
+ * falling back to the server-provided origin attribute id when the query has
+ * no matching column (e.g. a data-filtering fetch with an empty column list,
+ * where the server reflects all entity properties into auto-columns).
+ * Returns null when the column has no stable identity — such columns are not
+ * persisted (transient ids would only pollute the store).
+ */
+function stableColumnKey(qcol, dataColumn) {
+    if (qcol) {
+        const exprData = qcol.expr.saveToData();
+        if (exprData) {
+            return exprData.id || JSON.stringify(exprData);
+        }
+    }
+    return (dataColumn && dataColumn.originAttrId) || null;
+}
+
 class EasyGridWidget extends Grid {
     /**
      * The default constructor.
@@ -8986,6 +9084,10 @@ class EasyGridWidget extends Grid {
     constructor(slot) {
         super(slot);
         this.hasCustomTotalsSettings = false;
+        this.columnWidthCache = {};
+        this.columnWidthScope = 'model';
+        this.columnWidthsEnabled = true;
+        this.loadedWidthScopeKey = null;
         //!!!! DO NOT forget to add types for options
         this.options = { autoRefresh: true };
         this.group = WidgetGroup.Result;
@@ -9005,6 +9107,25 @@ class EasyGridWidget extends Grid {
         this.options = utils.assign(this.options, gridOptions);
         gridOptions.onPlusButtonClick = (ev) => this.addColumnClickHandler(ev);
         gridOptions.onColumnMoved = (ev) => this.columnMovedHandler(ev);
+        const userSync = gridOptions.onSyncGridColumn;
+        gridOptions.onSyncGridColumn = (col) => {
+            this.syncGridColumn(col);
+            this.applyColumnWidth(col);
+            if (userSync)
+                userSync(col);
+        };
+        gridOptions.onColumnSort = (ev) => this.columnSortHandler(ev);
+        // gridOptions already merges widgets.resultGrid / widgets.easyGrid / options
+        // (spread above), with `options` winning, so a single read honours priority.
+        const cwOpt = gridOptions.columnWidthPersistence || {};
+        this.columnWidthsEnabled = cwOpt.enabled !== false;
+        this.columnWidthScope = cwOpt.scope === 'query' ? 'query' : 'model';
+        const userResize = gridOptions.onColumnResize;
+        gridOptions.onColumnResize = (ev) => {
+            this.columnResizeHandler(ev);
+            if (userResize)
+                userResize(ev);
+        };
         if (gridOptions.aggregates) {
             this.hasCustomTotalsSettings = true;
         }
@@ -9017,8 +9138,12 @@ class EasyGridWidget extends Grid {
         if (this.options.autoRefresh) {
             this.attachQueryObserver();
         }
+        this.loadColumnWidths();
     }
     refreshCore() {
+        // Re-checks the scope key (no-ops when unchanged) so a query switch under
+        // scope:'query', or a model that loads after init, picks up stored widths.
+        this.loadColumnWidths();
         this.clear();
         this.updateTotalsSettings();
         this.render();
@@ -9108,6 +9233,119 @@ class EasyGridWidget extends Grid {
         });
         return col;
     }
+    toGridSort(dir) {
+        if (dir === SortDirection.Ascending)
+            return 'asc';
+        if (dir === SortDirection.Descending)
+            return 'desc';
+        return 'none';
+    }
+    fromGridSort(dir) {
+        if (dir === 'asc')
+            return SortDirection.Ascending;
+        if (dir === 'desc')
+            return SortDirection.Descending;
+        return SortDirection.None;
+    }
+    /** Reflects the query's current sorting in the grid header indicator. */
+    syncGridColumn(col) {
+        if (col.isRowNum || !col.dataColumn)
+            return;
+        const query = this.getQuery();
+        const qcol = query.getColumns().find(c => c.id === col.dataColumn.id);
+        col.sortDirection = qcol ? this.toGridSort(query.getColumnSorting(qcol)) : 'none';
+    }
+    /** Handles a header-sort click: multi-column server-side sort, then reload. */
+    columnSortHandler(ev) {
+        const query = this.getQuery();
+        const target = query.getColumns().find(c => c.id === ev.columnId);
+        if (!target)
+            return;
+        // Multi-column sort: write the new direction (already cycled by EasyGrid:
+        // none -> asc -> desc -> none) to only the clicked column. The query keeps
+        // the full sorted set; when syncSortOrderWithColumnsOrder is enabled (the
+        // default), Query.adjustColumnsSorting aligns sort priority with the column
+        // order, matching ColumnsPanel.
+        const prevSorting = query.getColumnSorting(target);
+        query.setColumnSorting(target, this.fromGridSort(ev.direction));
+        // Pure result re-ordering: reload sorted data and re-render the result grid
+        // (which re-applies the header sort indicators via onSyncGridColumn), then
+        // refresh the query-side widgets (SortingBar/ColumnsPanel). This deliberately
+        // does not route through the view's clear/refetch path, so there is no
+        // result-clearing flash and no double fetch.
+        this.context.fetchData({
+            success: () => this.context.refreshWidgets(WidgetGroup.Result),
+            error: () => {
+                // The failed sorting must not stay in the query, otherwise every
+                // subsequent fetch would repeat the failing ORDER BY (e.g. a column
+                // the server cannot sort by). Only the query-side widgets need a
+                // refresh: the grid header changes its arrows only on re-render,
+                // which never happened for the failed direction - re-rendering the
+                // grid here would just make it blink.
+                query.setColumnSorting(target, prevSorting);
+                this.context.refreshWidgets(WidgetGroup.Query);
+            }
+        });
+        this.context.refreshWidgets(WidgetGroup.Query);
+    }
+    /** Computes the storage scope key for the current model/query. */
+    columnWidthScopeKey() {
+        return this.columnWidthScope === 'query'
+            ? this.getQuery().getId()
+            : this.getContext().getModel().getId();
+    }
+    /** Stable per-column identity: the query column's expression, else the
+     * server-provided originAttrId (covers the data-filtering scenario where
+     * the query has no columns and the server auto-generates them). */
+    columnKey(dataColumn) {
+        const qcol = this.getQuery().getColumns().find(c => c.id === dataColumn.id);
+        return stableColumnKey(qcol, dataColumn);
+    }
+    /** Applies a cached width to a grid column (called from onSyncGridColumn). */
+    applyColumnWidth(col) {
+        if (!this.columnWidthsEnabled || col.isRowNum || !col.dataColumn)
+            return;
+        const key = this.columnKey(col.dataColumn);
+        if (key && this.columnWidthCache[key] != null) {
+            col.width = this.columnWidthCache[key];
+            col.manualWidth = true;
+        }
+    }
+    /** Persists a width when the user finishes a resize drag. */
+    columnResizeHandler(ev) {
+        if (!this.columnWidthsEnabled)
+            return;
+        const gridCol = this.grid.getColumns().getItems()
+            .find(c => c.dataColumn && c.dataColumn.id === ev.columnId);
+        if (!gridCol)
+            return;
+        const key = this.columnKey(gridCol.dataColumn);
+        if (!key)
+            return;
+        const scopeKey = this.columnWidthScopeKey();
+        if (!scopeKey)
+            return; // no model/query id -> avoid a colliding empty key
+        this.columnWidthCache[key] = ev.width;
+        this.getContext().getColumnWidthStore().save(scopeKey, key, ev.width);
+    }
+    /** Loads the width map once per scope key, then refreshes to apply. */
+    loadColumnWidths() {
+        if (!this.columnWidthsEnabled)
+            return;
+        const model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return; // no model yet -> nothing to scope by
+        const scopeKey = this.columnWidthScopeKey();
+        if (scopeKey === this.loadedWidthScopeKey)
+            return;
+        this.loadedWidthScopeKey = scopeKey;
+        this.getContext().getColumnWidthStore().load(scopeKey).then((map) => {
+            this.columnWidthCache = map || {};
+            if (Object.keys(this.columnWidthCache).length > 0 && this.grid) {
+                this.grid.refresh();
+            }
+        });
+    }
 }
 
 /**
@@ -9714,7 +9952,25 @@ class ChartWidget extends Widget {
     getCurrentChartType() {
         return this.chartType;
     }
+    /**
+     * Changes the current chart type and redraws the chart in place.
+     * Deliberately avoids a full re-render: emptying the widget (even for
+     * the drawing delay) shrinks the scrollable parent, so the browser
+     * clamps - and loses - its scroll position.
+     * @param type The new chart type.
+     */
+    changeChartType(type) {
+        this.chartType = type;
+        this.drawChart(0);
+    }
     render() {
+        // hold the current height while the content is being rebuilt:
+        // an emptied widget shrinks the scrollable parent and the browser
+        // clamps (loses) its scroll position. drawChart() releases the lock.
+        const prevHeight = this.element.offsetHeight;
+        if (prevHeight > 0) {
+            this.element.style.minHeight = prevHeight + 'px';
+        }
         this.clear();
         if (this.hasData() && this.hasColumnsForChart()
             && (this.context.resultTable.getTotal()
@@ -9735,8 +9991,7 @@ class ChartWidget extends Widget {
                 headerDiv.appendChild(chartTypeSelector);
                 chartTypeSelector.addEventListener('change', (ev) => {
                     let ctkey = ev.target.value;
-                    this.chartType = parseInt(ctkey);
-                    this.refresh();
+                    this.changeChartType(parseInt(ctkey));
                 });
                 this.settingsDiv = document.createElement('div');
                 addCssClass(this.settingsDiv, `${this.cssPrefix}-settings`);
@@ -9758,6 +10013,7 @@ class ChartWidget extends Widget {
             }
             else {
                 this.addContentDiv(mainDiv, 'Unable to render  the chart. None of the supported chart libraries (ChartJS, Google Charts, etc) is found.');
+                this.element.style.minHeight = '';
             }
             if (!this.options.hideSettings) {
                 this.element.appendChild(headerDiv);
@@ -9767,6 +10023,7 @@ class ChartWidget extends Widget {
         }
         else {
             this.element.style.display = "none";
+            this.element.style.minHeight = '';
         }
     }
     addContentDiv(mainDiv, text) {
@@ -9787,11 +10044,16 @@ class ChartWidget extends Widget {
      */
     drawChart(delay) {
         showElement(this.chartDiv);
+        const draw = () => {
+            this.drawCore();
+            //release the height lock held by render() for the redraw gap
+            this.element.style.minHeight = '';
+        };
         if (delay > 0) {
-            setTimeout(() => this.drawCore(), delay);
+            setTimeout(draw, delay);
         }
         else {
-            this.drawCore();
+            draw();
         }
     }
     /**
@@ -9910,6 +10172,7 @@ class ChartJsWidget extends ChartWidget {
         ];
         this.chartLabels = [];
         this.chartColumns = [];
+        this.chart = null;
         this.hasChartTypes = [
             ChartType.Column,
             ChartType.Bar,
@@ -9934,6 +10197,16 @@ class ChartJsWidget extends ChartWidget {
     static hasChartJs() {
         return typeof Chart !== 'undefined';
     }
+    /**
+     * Returns the major version of the Chart.js library loaded on the page.
+     * `Chart.version` was introduced in 3.0, so its absence means 2.x.
+     */
+    static getChartJsMajorVersion() {
+        if (!ChartJsWidget.hasChartJs())
+            return 0;
+        const major = parseInt(Chart.version, 10);
+        return isNaN(major) ? 2 : major;
+    }
     canDraw() {
         return ChartJsWidget.hasChartJs();
     }
@@ -9949,7 +10222,20 @@ class ChartJsWidget extends ChartWidget {
             let config = this.generateConfig();
             let chartCanvas = this.getChartCanvas(this.chartDiv);
             let chartContext = chartCanvas.getContext('2d');
-            new Chart(chartContext, config);
+            //we redraw into the same canvas when the chart settings change,
+            //and Chart.js 3+ refuses to reuse a canvas that still holds a chart
+            this.destroyChart();
+            this.chart = new Chart(chartContext, config);
+        }
+    }
+    destroyCore() {
+        this.destroyChart();
+        super.destroyCore();
+    }
+    destroyChart() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
         }
     }
     updateChartColumns() {
@@ -10018,24 +10304,39 @@ class ChartJsWidget extends ChartWidget {
                 datasets: [dataset1],
                 labels: this.chartLabels
             },
-            options: {
-                legend: {
-                    display: displayLegend,
-                    position: this.options.legend.position || 'bottom'
-                },
-                title: {
-                    display: true,
-                    text: datasetName
-                }
-            }
+            options: this.generateOptions(datasetName, displayLegend)
+        };
+    }
+    generateOptions(datasetName, displayLegend) {
+        const legend = {
+            display: displayLegend,
+            position: this.options.legend.position || 'bottom'
+        };
+        const title = {
+            display: true,
+            text: datasetName
         };
+        if (ChartJsWidget.getChartJsMajorVersion() < 3) {
+            return { legend, title };
+        }
+        //both were moved under `plugins` in 3.0 - left at the root
+        //they are silently ignored
+        const options = { plugins: { legend, title } };
+        //3.0 dropped the `horizontalBar` type in favour of flipping a bar chart
+        if (this.chartType == ChartType.Bar) {
+            options.indexAxis = 'y';
+        }
+        return options;
     }
     getChartType() {
         switch (this.chartType) {
             case ChartType.Column:
                 return "bar";
             case ChartType.Bar:
-                return "horizontalBar";
+                //3.0 replaced this type with `bar` + `indexAxis: 'y'`
+                return ChartJsWidget.getChartJsMajorVersion() < 3
+                    ? "horizontalBar"
+                    : "bar";
             case ChartType.Area:
             case ChartType.SteppedLine:
             case ChartType.Line:
@@ -12480,7 +12781,8 @@ class View {
             },
             widgets: {
                 resultGrid: {
-                    addColumns: false
+                    addColumns: false,
+                    sortable: true
                 }
             },
             handlers: {}
@@ -13703,7 +14005,15 @@ class DataFilterView extends View {
                 this.context.syncQuery();
             }
         });
-        this.context.addEventListener('ready', this.fetchData.bind(this));
+        this.context.addEventListener('ready', () => {
+            // Turn "show the whole entity" into an ordinary query with explicit
+            // columns (silently - the fetch below is the only one). A query
+            // loaded from storage keeps its own columns.
+            if (options.autoFillColumns !== false) {
+                this.context.getQuery().fillColumnsWithRootAttributes();
+            }
+            this.fetchData();
+        });
         return options;
     }
     createWidgets(options) {