@adaptabletools/adaptable 20.2.8 → 20.2.9

package/src/Api/Implementation/LayoutApiImpl.js

@@ -258,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) {
@@ -282,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/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,8 +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 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,16 +136,6 @@ export const LayoutSave = (layout) => ({
     type: LAYOUT_SAVE,
     layout: normalizeLayout(layout),
 });
-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,
@@ -237,36 +215,6 @@ export const LayoutReducer = (state = initialState, action) => {
                 Layouts: newLayouts,
             };
         }
-        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/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

@@ -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/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: 1752148694307 || Date.now(),
-    VERSION: "20.2.8" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1752564875397 || Date.now(),
+    VERSION: "20.2.9" || '--current-version--',
 };

package/src/types.d.ts

@@ -121,7 +121,7 @@ export type { SystemStatusMessageDisplayedInfo } from './Api/Events/SystemStatus
 export type { CellChangedInfo } from './Api/Events/CellChanged';
 export type { TeamSharingEntityChangedInfo } from './Api/Events/TeamSharingEntityChanged';
 export type { RowChangedInfo } from './Api/Events/RowChanged';
-export type { LayoutChangedInfo } from './Api/Events/LayoutChanged';
+export type { LayoutChangedInfo, LayoutChangedAction } from './Api/Events/LayoutChanged';
 export type { CalculatedColumnChangedInfo } from './Api/Events/CalculatedColumnChanged';
 export type { CustomToolbarConfiguredInfo } from './Api/Events/CustomToolbarConfigured';
 export type { LiveDataChangedInfo, LiveReport } from './Api/Events/LiveDataChanged';