@adaptabletools/adaptable 20.2.7 → 20.2.9

package/src/Api/Implementation/ColumnApiImpl.js

@@ -6,6 +6,7 @@ import { ColumnInternalApi } from '../Internal/ColumnInternalApi';
 import { AUTO_GROUP_COLUMN_ID__MULTI_PREFIX, AUTO_GROUP_COLUMN_ID__SINGLE, } from '../../layout-manager/src/normalizeLayoutModel';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { isPivotColumnTotal } from '../../layout-manager/src/isPivotColumnTotal';
+import { isPivotLayout } from './LayoutHelpers';
 const ROW_GROUP_COLUMN_DEFAULTS = {
     columnId: '',
     isTreeColumn: false,
@@ -121,13 +122,17 @@ export class ColumnApiImpl extends ApiBase {
     }
     getVisibleColumns() {
         const layout = this.getLayoutApi().getCurrentLayout();
+        const allcols = this.getColumns();
+        if (isPivotLayout(layout)) {
+            return allcols;
+        }
         const visibleCols = layout.TableColumns.reduce((acc, colId) => {
             if (layout.ColumnVisibility?.[colId] !== false) {
                 acc.add(colId);
             }
             return acc;
         }, new Set());
-        return this.getColumns().filter((c) => visibleCols.has(c.columnId));
+        return allcols.filter((c) => visibleCols.has(c.columnId));
     }
     selectColumn(columnId) {
         this._adaptable.selectColumn(columnId);

package/src/Api/Implementation/LayoutApiImpl.d.ts

@@ -38,12 +38,8 @@ export declare class LayoutApiImpl extends ApiBase implements LayoutApi {
     showChangeColumnCaption(column: AdaptableColumn): void;
     openLayoutSettingsPanel(): void;
     showLayoutEditor(layoutName?: string, layoutType?: 'table' | 'pivot', action?: ModuleParams['action']): void;
-    isCurrentLayoutReadOnly(): boolean;
     deleteLayout(layout: Layout): void;
     deleteLayoutByName(layoutName: string): void;
     removeColumnFromCurrentLayout(columnId: string): void;
-    removeColumnFromAllLayouts(columnId: string): void;
-    removeColumnFromLayout(columnId: string, layoutName: string): void;
-    addColumnToTableLayout(columnId: string, layoutName: string): void;
-    addColumnToCurrentTableLayout(columnId: string): void;
+    addColumnToCurrentLayout(columnId: string): void;
 }

package/src/Api/Implementation/LayoutApiImpl.js

@@ -1,5 +1,4 @@
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
-import { LayoutSetColumnCaption } from '../../Redux/ActionsReducers/LayoutRedux';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { ApiBase } from './ApiBase';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
@@ -207,10 +206,11 @@ export class LayoutApiImpl extends ApiBase {
     }
     setColumnCaption(columnId, caption) {
         if (StringExtensions.IsNotNullOrEmpty(columnId) && StringExtensions.IsNotNullOrEmpty(caption)) {
-            const currentLayoutName = this.getCurrentLayoutName();
-            if (StringExtensions.IsNotNullOrEmpty(currentLayoutName)) {
-                this.dispatchAction(LayoutRedux.LayoutSetColumnCaption(currentLayoutName, columnId, caption));
-            }
+            this.updateCurrentLayout((layout) => {
+                layout.ColumnHeaders = { ...layout.ColumnHeaders };
+                layout.ColumnHeaders[columnId] = caption;
+                return layout;
+            });
         }
     }
     createOrUpdateLayout(layout) {
@@ -222,13 +222,18 @@ export class LayoutApiImpl extends ApiBase {
         }
     }
     showChangeColumnCaption(column) {
-        const customHeader = this.getCurrentLayout().ColumnHeaders?.[column.columnId] ?? column.friendlyName;
+        const currentLayout = this.getCurrentLayout();
+        const customHeader = currentLayout.ColumnHeaders?.[column.columnId] ?? column.friendlyName;
         this.dispatchAction(PopupShowPrompt({
             Header: `Change caption for '${column.friendlyName}'`,
             Msg: '',
             DefaultValue: customHeader,
-            ConfirmActionCreator: (inputText) => inputText !== customHeader &&
-                LayoutSetColumnCaption(this.getCurrentLayoutName(), column.columnId, inputText),
+            ConfirmActionCreator: (inputText) => {
+                if (inputText !== customHeader) {
+                    this.setColumnCaption(column.columnId, inputText);
+                }
+                return { type: 'NOOP' };
+            },
         }));
     }
     openLayoutSettingsPanel() {
@@ -253,13 +258,6 @@ export class LayoutApiImpl extends ApiBase {
             },
         });
     }
-    isCurrentLayoutReadOnly() {
-        const currentLayout = this.getCurrentLayout();
-        if (currentLayout) {
-            return currentLayout.IsReadOnly;
-        }
-        return true;
-    }
     deleteLayout(layout) {
         const layoutCount = this.getLayouts().length;
         if (layoutCount === 1) {
@@ -277,38 +275,39 @@ export class LayoutApiImpl extends ApiBase {
         return this.deleteLayout(layout);
     }
     removeColumnFromCurrentLayout(columnId) {
-        this.removeColumnFromLayout(columnId, this.getCurrentLayoutName());
-    }
-    removeColumnFromAllLayouts(columnId) {
-        this.getLayouts().forEach((layout) => {
-            this.removeColumnFromLayout(columnId, layout.Name);
-        });
-    }
-    removeColumnFromLayout(columnId, layoutName) {
         const column = this.getColumnApi().getColumnWithColumnId(columnId);
         if (column) {
-            const layout = this.getLayoutByName(layoutName);
-            if (layout && !isPivotLayout(layout)) {
-                if (layout.TableColumns.includes(columnId)) {
-                    this.dispatchAction(LayoutRedux.LayoutRemoveColumn(layoutName, columnId));
-                    this.getColumnApi().hideColumn(columnId);
-                }
+            const layout = this.getCurrentLayout();
+            if (!isPivotLayout(layout)) {
+                this.updateCurrentLayout((layout) => {
+                    layout.TableColumns = layout.TableColumns.filter((c) => c !== columnId);
+                    return layout;
+                });
+            }
+            else {
+                this.updateCurrentLayout((layout) => {
+                    layout.PivotColumns = layout.PivotColumns.filter((c) => c !== columnId);
+                    return layout;
+                });
             }
         }
     }
-    addColumnToTableLayout(columnId, layoutName) {
+    addColumnToCurrentLayout(columnId) {
         const column = this.getColumnApi().getColumnWithColumnId(columnId);
         if (column) {
-            const layout = this.getLayoutByName(layoutName);
-            if (layout && !isPivotLayout(layout)) {
-                if (!layout.TableColumns.includes(columnId)) {
-                    this.dispatchAction(LayoutRedux.LayoutAddColumn(layoutName, columnId));
-                    this.getColumnApi().showColumn(columnId);
-                }
+            const layout = this.getCurrentLayout();
+            if (!isPivotLayout(layout)) {
+                this.updateCurrentLayout((layout) => {
+                    layout.TableColumns.push(columnId);
+                    return layout;
+                });
+            }
+            else {
+                this.updateCurrentLayout((layout) => {
+                    layout.PivotColumns.push(columnId);
+                    return layout;
+                });
             }
         }
     }
-    addColumnToCurrentTableLayout(columnId) {
-        this.addColumnToTableLayout(columnId, this.getCurrentLayoutName());
-    }
 }

package/src/Api/Implementation/LayoutHelpers.js

@@ -226,7 +226,6 @@ export const pivotLayoutToPivotLayoutModel = (pivotLayout) => {
         Name: pivotLayout.Name,
         SuppressAggFuncInHeader: pivotLayout.SuppressAggFuncInHeader,
         ColumnWidths: pivotLayout.ColumnWidths,
-        ColumnVisibility: pivotLayout.ColumnVisibility,
         ColumnSorts: pivotLayout.ColumnSorts,
         PivotGroupedColumns: pivotLayout.PivotGroupedColumns,
         ColumnPinning: pivotLayout.ColumnPinning,
@@ -399,7 +398,6 @@ export const pivotLayoutModelToPivotLayout = (layoutModel) => {
         PivotColumns: layoutModel.PivotColumns,
         TableColumns: layoutModel.TableColumns,
         ColumnWidths: layoutModel.ColumnWidths,
-        ColumnVisibility: layoutModel.ColumnVisibility,
         ColumnSorts: layoutModel.ColumnSorts,
         ColumnPinning: layoutModel.ColumnPinning,
         PivotExpandLevel: layoutModel.PivotExpandLevel,

package/src/Api/Internal/EventInternalApi.d.ts

@@ -4,6 +4,7 @@ import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChanged
 import { AdaptableAlert, AdaptableFlashingCell, AdaptablePersistentState, AdaptableSharedEntity, AdaptableState, AdaptableTheme, CalculatedColumn, CreatedRowInfo, DashboardState, DataImportedInfo, DataSet, DeletedRowInfo, EditedRowInfo, LayoutState, RowDataChangedInfo, SystemStatusMessageInfo } from '../../types';
 import { ApiBase } from '../Implementation/ApiBase';
 import { BaseSchedule } from '../../AdaptableState/Common/Schedule';
+import { LayoutChangedAction } from '../Events/LayoutChanged';
 export declare class EventInternalApi extends ApiBase {
     fireGridSortedEvent(): void;
     fireCellChangedEvent(cellDataChangedInfo: CellDataChangedInfo): void;
@@ -11,7 +12,7 @@ export declare class EventInternalApi extends ApiBase {
     fireDashboardChangedEvent(trigger: string, oldDashboardState: DashboardState, newDashboardState: DashboardState): void;
     fireAlertFiredEvent(alertToFire: AdaptableAlert): void;
     fireThemeChangedEvent(theme: AdaptableTheme, trigger: 'ThemeSelected' | 'ThemeEdited'): void;
-    fireLayoutChangedEvent(trigger: string, oldState: LayoutState, newState: LayoutState): void;
+    fireLayoutChangedEvent(trigger: LayoutChangedAction, oldState: LayoutState, newState: LayoutState): void;
     fireScheduleTriggeredEvent(schedule: BaseSchedule): void;
     fireDataSetSelectedEvent(dataSet: DataSet): void;
     fireSystemStatusMessageDisplayedEvent(systemStatusMessageInfo: SystemStatusMessageInfo): void;

package/src/Api/LayoutApi.d.ts

@@ -88,26 +88,26 @@ export interface LayoutApi {
      */
     updateCurrentLayout(updateFn: (layout: TableLayout | PivotLayout) => TableLayout | PivotLayout): void;
     /**
-     * Creates new Layout in Adaptable State
+     * Creates a new Layout
      * @param layoutToCreate Layout to create
      * @returns created Layout object or `false` if Layout with the same name/Uuid already exists
      */
     createLayout(layoutToCreate: Layout): Layout | false;
     /**
-     * Creates new Layout in the state and then loads it into Grid
+     * Creates new Layout and loads it into Grid
      * @param layoutToCreate Layout to create
      * @returns created Layout object or `false` if creation failed
      */
     createAndSetLayout(layoutToCreate: Layout): Layout | false;
     /**
-     * Creates new Layout based on given Layout but with name provided
+     * Creates new Layout by cloning a given Layout
      * @param layoutToClone Layout to clone
-     * @param layoutName name to use for new Layout
+     * @param layoutName name of new Layout
      * @returns created Layout object or `false` if creation failed
      */
     cloneLayout(layoutToClone: Layout, layoutName: string): Layout | false;
     /**
-     * Creates new Layout based on given Layout but with name provided and then loads it into Grid
+     * Creates new Layout by cloning a given Layout and then loads it into Grid
      * @param layoutToClone Layout to clone
      * @param layoutName name to use for new Layout
      * @returns created Layout object or `false` if creation failed
@@ -148,40 +148,19 @@ export interface LayoutApi {
      * @param layout Name of the Layout to delete
      */
     deleteLayoutByName(layoutName: string): void;
-    /**
-     * Specifies where Current Layout is editable
-     */
-    isCurrentLayoutReadOnly(): boolean;
     /**
      * Opens Change Column Caption popup
      * @param column Column to open Popup for
      */
     showChangeColumnCaption(column: AdaptableColumn): void;
     /**
-     * Removes a Column from the Current Layout
+     * Removes a Column from Current Table or Pivot Layout
      * @param columnId Column to remove
      */
     removeColumnFromCurrentLayout(columnId: string): void;
     /**
-     * Removes a Column from all Layouts
-     * @param columnId Column to remove
-     */
-    removeColumnFromAllLayouts(columnId: string): void;
-    /**
-     * Removes a Column from a given Layout
-     * @param columnId Column to remove
-     * @param layoutName layout from which to remove Column
-     */
-    removeColumnFromLayout(columnId: string, layoutName: string): void;
-    /**
-     * Adds a Column to a given Table Layout
-     * @param columnId Column to add
-     * @param layoutName layout to which to add Column
-     */
-    addColumnToTableLayout(columnId: string, layoutName: string): void;
-    /**
-     * Adds a Column to Current (Table) Layout
+     * Adds a Column to Current Table or Pivot Layout
      * @param columnId Column to add
      */
-    addColumnToCurrentTableLayout(columnId: string): void;
+    addColumnToCurrentLayout(columnId: string): void;
 }

package/src/Redux/ActionsReducers/LayoutRedux.d.ts

@@ -2,10 +2,6 @@ import * as Redux from 'redux';
 import { AdaptableState } from '../../../types';
 import { LayoutState, Layout } from '../../AdaptableState/LayoutState';
 import { ColumnFilter } from '../../types';
-/**
- * @ReduxAction A new caption / header has been set for a Column in the Layout
- */
-export declare const LAYOUT_COLUMN_SET_CAPTION = "LAYOUT_COLUMN_SET_CAPTION";
 /**
  * @ReduxAction Layout Module is ready
  */
@@ -30,14 +26,6 @@ export declare const LAYOUT_SELECT = "LAYOUT_SELECT";
  * @ReduxAction A Layout has been (auto)saved
  */
 export declare const LAYOUT_SAVE = "LAYOUT_SAVE";
-/**
- * @ReduxAction A Column has been added
- */
-export declare const LAYOUT_COLUMN_ADD = "LAYOUT_COLUMN_ADD";
-/**
- * @ReduxAction A Column has been removed
- */
-export declare const LAYOUT_COLUMN_REMOVE = "LAYOUT_COLUMN_REMOVE";
 /**
  * @ReduxAction A Column Filter has been added
  */
@@ -83,7 +71,7 @@ export declare const LAYOUT_GRID_FILTER_SUSPEND = "LAYOUT_GRID_FILTER_SUSPEND";
  */
 export declare const LAYOUT_GRID_FILTER_UNSUSPEND = "LAYOUT_GRID_FILTER_UNSUSPEND";
 /**
- * @ReduxAction Edit Grid filter
+ * @ReduxAction The Grid Filter has been edited
  */
 export declare const LAYOUT_GRID_FILTER_SET = "LAYOUT_GRID_FILTER_SET";
 /**
@@ -171,9 +159,6 @@ export interface LayoutReadyAction extends Redux.Action {
 export declare const LayoutAdd: (layout: Layout) => LayoutAddAction;
 export declare const LayoutDelete: (layout: Layout) => LayoutDeleteAction;
 export declare const LayoutSave: (layout: Layout) => LayoutSaveAction;
-export declare const LayoutSetColumnCaption: (layoutName: string, columnId: string, caption: string) => LayoutSetColumnCaptionAction;
-export declare const LayoutAddColumn: (layoutName: string, columnId: string) => LayoutAddColumnAction;
-export declare const LayoutRemoveColumn: (layoutName: string, columnId: string) => LayoutRemoveColumnAction;
 export declare const LayoutSelect: (layoutName: string) => LayoutSelectAction;
 export declare const LayoutReady: (layoutState: LayoutState) => LayoutReadyAction;
 export declare const getColumnFiltersSelector: (state: AdaptableState) => ColumnFilter[];

package/src/Redux/ActionsReducers/LayoutRedux.js

@@ -1,10 +1,6 @@
 import { EMPTY_STRING } from '../../Utilities/Constants/GeneralConstants';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { normalizeLayout } from '../../Api/Implementation/LayoutHelpers';
-/**
- * @ReduxAction A new caption / header has been set for a Column in the Layout
- */
-export const LAYOUT_COLUMN_SET_CAPTION = 'LAYOUT_COLUMN_SET_CAPTION';
 /**
  * @ReduxAction Layout Module is ready
  */
@@ -29,14 +25,6 @@ export const LAYOUT_SELECT = 'LAYOUT_SELECT';
  * @ReduxAction A Layout has been (auto)saved
  */
 export const LAYOUT_SAVE = 'LAYOUT_SAVE';
-/**
- * @ReduxAction A Column has been added
- */
-export const LAYOUT_COLUMN_ADD = 'LAYOUT_COLUMN_ADD';
-/**
- * @ReduxAction A Column has been removed
- */
-export const LAYOUT_COLUMN_REMOVE = 'LAYOUT_COLUMN_REMOVE';
 /**
  * @ReduxAction A Column Filter has been added
  */
@@ -82,7 +70,7 @@ export const LAYOUT_GRID_FILTER_SUSPEND = 'LAYOUT_GRID_FILTER_SUSPEND';
  */
 export const LAYOUT_GRID_FILTER_UNSUSPEND = 'LAYOUT_GRID_FILTER_UNSUSPEND';
 /**
- * @ReduxAction Edit Grid filter
+ * @ReduxAction The Grid Filter has been edited
  */
 export const LAYOUT_GRID_FILTER_SET = 'LAYOUT_GRID_FILTER_SET';
 /**
@@ -148,22 +136,6 @@ export const LayoutSave = (layout) => ({
     type: LAYOUT_SAVE,
     layout: normalizeLayout(layout),
 });
-export const LayoutSetColumnCaption = (layoutName, columnId, caption) => ({
-    type: LAYOUT_COLUMN_SET_CAPTION,
-    layoutName,
-    columnId,
-    caption,
-});
-export const LayoutAddColumn = (layoutName, columnId) => ({
-    type: LAYOUT_COLUMN_ADD,
-    layoutName,
-    columnId,
-});
-export const LayoutRemoveColumn = (layoutName, columnId) => ({
-    type: LAYOUT_COLUMN_REMOVE,
-    layoutName,
-    columnId,
-});
 export const LayoutSelect = (layoutName) => ({
     type: LAYOUT_SELECT,
     layoutName,
@@ -243,52 +215,6 @@ export const LayoutReducer = (state = initialState, action) => {
                 Layouts: newLayouts,
             };
         }
-        case LAYOUT_COLUMN_SET_CAPTION: {
-            const setColumnCaptionAction = action;
-            const currentLayoutName = setColumnCaptionAction.layoutName;
-            let currentLayout = state.Layouts.find((l) => l.Name === currentLayoutName);
-            if (currentLayout) {
-                if (!currentLayout.ColumnHeaders) {
-                    currentLayout.ColumnHeaders = {};
-                }
-                currentLayout.ColumnHeaders[setColumnCaptionAction.columnId] =
-                    setColumnCaptionAction.caption;
-                return Object.assign({}, state, {
-                    Layouts: state.Layouts.map((abObject) => abObject.Uuid === currentLayout.Uuid ? currentLayout : abObject),
-                });
-            }
-            return state;
-        }
-        case LAYOUT_COLUMN_ADD: {
-            const addColumnAction = action;
-            const layoutname = addColumnAction.layoutName;
-            const colToAdd = addColumnAction.columnId;
-            let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
-            if (layoutToUpdate) {
-                layoutToUpdate.TableColumns.push(colToAdd);
-                return {
-                    ...state,
-                    Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
-                };
-            }
-            return state;
-        }
-        case LAYOUT_COLUMN_REMOVE: {
-            const removeColumnAction = action;
-            const layoutname = removeColumnAction.layoutName;
-            const colToRemove = removeColumnAction.columnId;
-            let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
-            if (layoutToUpdate) {
-                layoutToUpdate.TableColumns = layoutToUpdate.TableColumns.filter((col) => {
-                    return col !== colToRemove;
-                });
-                return {
-                    ...state,
-                    Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
-                };
-            }
-            return state;
-        }
         case LAYOUT_COLUMN_FILTER_SET: {
             let columnFilters = currentLayout.ColumnFilters ?? [];
             const columnFilterAction = action.columnFilter;

package/src/Redux/Store/AdaptableStore.js

@@ -881,7 +881,6 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case LayoutRedux.LAYOUT_EDIT:
                 case LayoutRedux.LAYOUT_SAVE:
                 case LayoutRedux.LAYOUT_DELETE:
-                case LayoutRedux.LAYOUT_COLUMN_SET_CAPTION:
                 case LayoutRedux.LAYOUT_SELECT: {
                     const oldLayoutState = middlewareAPI.getState().Layout;
                     // this must be called before 'next(action)'
@@ -907,8 +906,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                         adaptable.applyFiltering();
                     }
                     if (returnAction.type == LayoutRedux.LAYOUT_SELECT ||
-                        returnAction.type == LayoutRedux.LAYOUT_DELETE ||
-                        returnAction.type == LayoutRedux.LAYOUT_COLUMN_SET_CAPTION) {
+                        returnAction.type == LayoutRedux.LAYOUT_DELETE) {
                         // tell AdapTable the Layout has been selected
                         if (newLayout) {
                             adaptable.updateLayoutInManagerAfterStoreHasChanged(newLayout);

package/src/Strategy/LayoutModule.d.ts

@@ -24,4 +24,5 @@ export declare class LayoutModule extends AdaptableModuleBase implements IModule
     getViewProperties(): AdaptableModuleView;
     handleLayoutSelection(): void;
     getReferencedNamedQueryNames(layout: Layout): string[];
+    isCurrentLayoutReadOnly(): boolean;
 }

package/src/Strategy/LayoutModule.js

@@ -42,7 +42,7 @@ export class LayoutModule extends AdaptableModuleBase {
     }
     getExplicitlyReferencedColumnIds(layout) {
         const columnIds = [];
-        if (layout.TableColumns) {
+        if (!isPivotLayout(layout) && layout.TableColumns) {
             const visibility = layout.ColumnVisibility || {};
             columnIds.push(...layout.TableColumns.filter((colId) => {
                 return visibility[colId] !== false;
@@ -125,7 +125,7 @@ export class LayoutModule extends AdaptableModuleBase {
             return;
         }
         let returnColumnMenuItems = [];
-        const isReadOnlyLayout = this.api.layoutApi.isCurrentLayoutReadOnly();
+        const isReadOnlyLayout = this.isCurrentLayoutReadOnly();
         if (!isReadOnlyLayout) {
             returnColumnMenuItems.push(this.createMenuItemShowPopup('layout-edit', 'Edit Layout', this.moduleInfo.Popup, 'edit-table', {
                 action: 'Edit',
@@ -164,7 +164,7 @@ export class LayoutModule extends AdaptableModuleBase {
     }
     createContextMenuItems(menuContext) {
         let returnColumnMenuItems = [];
-        if (this.isModuleEditable() && !this.api.layoutApi.isCurrentLayoutReadOnly()) {
+        if (this.isModuleEditable() && !this.isCurrentLayoutReadOnly()) {
             returnColumnMenuItems.push(this.createMenuItemShowPopup('layout-edit', 'Edit Layout', this.moduleInfo.Popup, 'edit-table', {
                 action: 'Edit',
                 source: 'ColumnMenu',
@@ -450,4 +450,11 @@ export class LayoutModule extends AdaptableModuleBase {
         }
         return this.api.namedQueryApi.internalApi.getReferencedNamedQueryNames(layout.GridFilter.Expression);
     }
+    isCurrentLayoutReadOnly() {
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        if (currentLayout) {
+            return currentLayout.IsReadOnly;
+        }
+        return true;
+    }
 }

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -75,7 +75,44 @@ export const FloatingFilterValues = (props) => {
         columnId: props.columnId,
         searchValueRef,
     });
-    useEffect(triggerValuesLoad, []);
+    const valueRef = React.useRef(props.value);
+    useEffect(() => {
+        // we used to load values initially on mount, without any condition
+        const value = valueRef.current;
+        // but we now optimize it - if there are no values to show (for which we would need a label)
+        // then we skip it altogether, so we'll only load onMenuOpen
+        if (!value || !Array.isArray(value) || value.length === 0) {
+            return;
+        }
+        // however, if the `value` prop is a non-empty array, we need to load the values
+        // so we know which labels to show
+        triggerValuesLoad();
+    }, []);
+    const quickFilterValuesRef = React.useRef(quickFilterValues);
+    quickFilterValuesRef.current = quickFilterValues;
+    useEffect(() => {
+        // since we did the optimization above,
+        // we now hit a scenario where the value is set via an API method
+        // so we also need to account for that - so whenever props.value changes, we need to check
+        // and if we previously didn't have a valid array
+        // and now we do, we need to load the values - if they are not already loaded
+        if (quickFilterValuesRef.current.values.length > 0 ||
+            quickFilterValuesRef.current.dataLoadIsComplete) {
+            // values have already been loaded, so we can skip
+            return;
+        }
+        const currentValue = props.value;
+        const prevValue = valueRef.current;
+        valueRef.current = currentValue;
+        const prevValid = Array.isArray(prevValue) && prevValue.length > 0;
+        const currentValid = Array.isArray(currentValue) && currentValue.length > 0;
+        if (!currentValid) {
+            return;
+        }
+        if (!prevValid && currentValid) {
+            triggerValuesLoad();
+        }
+    }, [props.value]);
     const onMenuOpen = triggerValuesLoad;
     const onInputChange = React.useCallback((value) => {
         searchValueRef.current = value;

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -23,6 +23,7 @@ import { AdaptableFormControlTextClear } from '../../../Components/Forms/Adaptab
 import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
 import HelpBlock from '../../../../components/HelpBlock';
 import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const columnTypes = {
     default: {
@@ -156,7 +157,8 @@ const ColumnRow = (props) => {
     const { column } = props;
     // width
     const columnWidth = props.layout.ColumnWidths?.[column.columnId];
-    const visible = (props.layout.TableColumns.includes(column.columnId) &&
+    const visible = (!isPivotLayout(props.layout) &&
+        props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
         isRowGroupColumn;
     return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },

package/src/agGrid/AdaptableAgGrid.js

@@ -3127,6 +3127,7 @@ You need to define at least one Layout!`);
                 }
             }
         }
+        const prevLayout = this._prevLayout;
         this._prevLayout = layout;
         const perfSetLayout = this.logger.beginPerf(`setLayout(${layout.Name})`);
         const isPivot = isPivotLayout(layout);
@@ -3149,7 +3150,10 @@ You need to define at least one Layout!`);
         // need to refresh the header,
         // as the Layout.ColumnHeaders state property is not implemented in the LayoutManager
         // and is specific to Adaptable, therefore we need to refresh it manually
-        this.refreshHeader();
+        if (!prevLayout ||
+            JSON.stringify(prevLayout.ColumnHeaders) !== JSON.stringify(layout.ColumnHeaders)) {
+            this.refreshHeader();
+        }
         const layoutModel = layoutStateToLayoutModel(layout);
         this.layoutManager?.setLayout(layoutModel, {
             skipApplyRowGroupsExpandedState: !shouldUpdateExpandState,

package/src/components/ColorPicker/ColorPicker.js

@@ -1,11 +1,24 @@
 import * as React from 'react';
+import { useCallback, useEffect } from 'react';
 import { Box, Flex } from 'rebass';
+import debounce from 'lodash/debounce';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import tinycolor from 'tinycolor2';
 export const ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value, includeAlpha = true, ...restProps } = props;
+    // Create a debounced version of onChange
+    // we need this because moving the mouse A LOT in the custom color picker can break the React rendering
+    const debouncedOnChange = useCallback(debounce((color) => {
+        props.onChange(color);
+    }, 30), [props.onChange]);
+    // Clean up the debounce on unmount
+    useEffect(() => {
+        return () => {
+            debouncedOnChange.cancel();
+        };
+    }, [debouncedOnChange]);
     const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [getVariableColor(colorItem)]: colorItem }), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
         return (React.createElement("option", { key: x, value: x }, x));
@@ -27,7 +40,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
                  * The value is not in the map when the color is not in the palette.
                  */
                 const color = optionsMap[event.target.value] ?? event.target.value;
-                props.onChange(color);
+                debouncedOnChange(color);
             }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
@@ -37,6 +50,6 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             React.createElement(Box, { mr: 1 }, "Opacity"),
             React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
-                    props.onChange(color);
+                    debouncedOnChange(color);
                 }, min: 0, max: 1, step: 0.01, type: "range" })))));
 });

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1751978297635 || Date.now(),
-    VERSION: "20.2.7" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1752564875397 || Date.now(),
+    VERSION: "20.2.9" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -5644,13 +5644,13 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             desc: string;
             isOpt: boolean;
-            ref?: undefined;
+            ref: string;
         } | {
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
-            ref: string;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;