@adaptabletools/adaptable 11.0.7 → 11.1.0

package/src/View/Layout/LayoutEditorStandalonePopup.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutEditorStandalonePopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const uuid_1 = require("../../components/utils/uuid");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const PanelFooter_1 = require("../Components/Panels/PanelFooter");
+const PanelWithImage_1 = require("../Components/Panels/PanelWithImage");
+const LayoutEditorWizard_1 = require("./Wizard/LayoutEditorWizard");
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+exports.LayoutEditorStandalonePopup = (props) => {
+    /**
+     * This is here because the old code mutates the object.
+     * And we need a way to trigger an update/render.
+     *
+     * I've left the mutation because we might want to use the old PopupWizard.
+     * And it currently, the refactoring of the editor out of the scope of this feature.
+     */
+    const [stateLayout, setStateLayout] = React.useState(null);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const layoutModule = adaptable.ModuleService.getModuleById('Layout');
+    const layouts = react_redux_1.useSelector((state) => state.Layout.Layouts);
+    const layoutData = React.useMemo(() => {
+        var _a;
+        let layoutData = null;
+        const layoutToCloneOrEdit = (_a = props === null || props === void 0 ? void 0 : props.popupProps) === null || _a === void 0 ? void 0 : _a.layout;
+        switch (props.popupProps.action) {
+            case 'Clone':
+                layoutData = Helper_1.default.cloneObject(layoutToCloneOrEdit);
+                layoutData.Name = '';
+                layoutData.IsReadOnly = false;
+                layoutData.Uuid = uuid_1.createUuid();
+                break;
+            case 'New':
+                layoutData = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+                break;
+            case 'Edit':
+                layoutData = Helper_1.default.cloneObject(layoutToCloneOrEdit);
+                break;
+        }
+        return layoutData;
+    }, []);
+    const handleCancel = React.useCallback(() => {
+        props.onDismiss();
+    }, []);
+    const handleAccept = React.useCallback(() => {
+        var _a;
+        switch ((_a = props === null || props === void 0 ? void 0 : props.popupProps) === null || _a === void 0 ? void 0 : _a.action) {
+            case 'Edit':
+                const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+                dispatch(LayoutRedux.LayoutSave(layoutData));
+                if (currentLayout.Uuid === layoutData.Uuid) {
+                    dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+                }
+                break;
+            case 'Clone':
+                dispatch(LayoutRedux.LayoutAdd(layoutData));
+                dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+                break;
+            case 'New':
+                dispatch(LayoutRedux.LayoutAdd(layoutData));
+                dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+        }
+        props.onDismiss();
+    }, []);
+    const finishDisabled = !layoutData.Name;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: layoutModule.moduleInfo.Glyph, header: layoutModule.moduleInfo.FriendlyName, infoLink: layoutModule.moduleInfo.HelpPage, infoLinkDisabled: false, variant: "primary" },
+            React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, updateGoBackState: () => null })),
+        React.createElement(PanelFooter_1.PanelFooter, { acceptDisabled: finishDisabled, onAccept: handleAccept, onCancel: handleCancel })));
+};

package/src/View/Layout/LayoutPopup.js

@@ -10,7 +10,6 @@ const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReduce
 const LayoutWizard_1 = require("./Wizard/LayoutWizard");
 const LayoutEntityRow_1 = require("./LayoutEntityRow");
 const Helper_1 = require("../../Utilities/Helpers/Helper");
-const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
@@ -18,7 +17,6 @@ const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableC
 const UIHelper_1 = require("../UIHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
-const uuid_1 = require("../../components/utils/uuid");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 class LayoutPopupComponent extends React.Component {
     constructor(props) {
@@ -82,32 +80,13 @@ class LayoutPopupComponent extends React.Component {
             this.state.editedAdaptableObject != null && (React.createElement(LayoutWizard_1.LayoutWizard, { moduleInfo: this.props.moduleInfo, editedAdaptableObject: this.state.editedAdaptableObject, configEntities: this.props.Layouts, modalContainer: this.props.modalContainer, ColumnSorts: this.props.api.gridApi.getColumnSorts(), api: this.props.api, wizardStartIndex: this.state.wizardStartIndex, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: () => this.onFinishWizard(), canFinishWizard: () => this.canFinishWizard() }))));
     }
     onNew() {
-        this.setState({
-            editedAdaptableObject: ObjectFactory_1.ObjectFactory.CreateEmptyLayout({
-                Name: '',
-            }),
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
-        });
+        this.props.api.layoutApi.showLayoutEditor(null, 'New');
     }
     onEdit(layout) {
-        const clonedObject = Helper_1.Helper.cloneObject(layout);
-        this.setState({
-            editedAdaptableObject: clonedObject,
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
-        });
+        this.props.api.layoutApi.showLayoutEditor(layout.Name, 'Edit');
     }
     onClone(layout) {
-        let clonedObject = Helper_1.Helper.cloneObject(layout);
-        clonedObject.Name = '';
-        clonedObject.IsReadOnly = false;
-        clonedObject.Uuid = uuid_1.createUuid();
-        this.setState({
-            editedAdaptableObject: clonedObject,
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
-        });
+        this.props.api.layoutApi.showLayoutEditor(layout.Name, 'Clone');
     }
     onCloseWizard() {
         this.props.onClearPopupParams();

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -1,14 +1,11 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { Layout } from '../../PredefinedConfig/LayoutState';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as React from 'react';
+export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;
     onSaveLayout: (layout: Layout) => void;
-    onNewLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
-    onCloneLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
-    onEditLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
     Layouts: Layout[];
     CurrentDraftLayout: Layout;
     CanSave: boolean;

package/src/View/Layout/LayoutViewPanel.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutViewPanelControl = void 0;
+exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const React = tslib_1.__importStar(require("react"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
@@ -14,9 +13,9 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const react_redux_1 = require("react-redux");
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
         let layoutEntity = this.props.Layouts.find((x) => x.Name == this.props.CurrentLayoutName || x.Uuid == this.props.CurrentLayoutName);
@@ -34,9 +33,9 @@ class LayoutViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], style: { width: '100%', fontSize: 'small' }, className: `ab-${elementType}__Layout__select`, items: availableLayoutOptions, disabled: availableLayoutOptions.length == 0 }, layoutEntity ? layoutEntity.Name : null)),
             React.createElement(rebass_1.Flex, { flexDirection: "row", className: join_1.default(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditLayout(this.props.moduleInfo.Popup), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
-                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.onCloneLayout(this.props.moduleInfo.Popup), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.onNewLayout(this.props.moduleInfo.Popup), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
+                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
+                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
     }
     onSaveLayout() {
@@ -66,18 +65,6 @@ function mapDispatchToProps(dispatch) {
             dispatch(LayoutRedux.LayoutSave(layout));
             dispatch(LayoutRedux.LayoutUpdateCurrentDraft(null));
         },
-        onNewLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'New',
-            source: 'Toolbar',
-        })),
-        onCloneLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'Clone',
-            source: 'Toolbar',
-        })),
-        onEditLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'Edit',
-            source: 'Toolbar',
-        })),
     };
 }
 exports.LayoutViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);

package/src/View/Layout/Wizard/LayoutEditor/ColumnLabels.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AdaptableColumnProperties } from '../../../../PredefinedConfig/Common/AdaptableColumn';
+export declare const ColumnLabels: (props: AdaptableColumnProperties & {
+    children?: React.ReactNode;
+    labels?: Record<string, React.ReactNode>;
+    flexDirection?: 'row' | 'column';
+    showBoth?: boolean;
+    showTitle?: boolean;
+}) => JSX.Element;

package/src/View/Layout/Wizard/LayoutEditor/ColumnLabels.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnLabels = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+exports.ColumnLabels = (props) => {
+    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
+    const labelNames = [
+        'Aggregatable',
+        'Filterable',
+        'Groupable',
+        'Moveable',
+        'Pivotable',
+        'Sortable',
+    ];
+    const labels = labelNames.map((name) => columnProperties[name.toLocaleLowerCase()] ? name.charAt(0) : '');
+    const flexProps = {
+        [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
+    };
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
+        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
+        labels.map((l, index) => {
+            const enabled = !!l;
+            const labelName = labelNames[index];
+            const letter = labelName.charAt(0);
+            const renderBox = (enabled, key) => {
+                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
+                        overflow: 'hidden',
+                        cursor: 'auto',
+                        position: 'relative',
+                        fontWeight: 600,
+                        lineHeight: 0,
+                        border: `1px solid var(--ab-color-${enabled ? 'accent' : 'inputborder'})`,
+                        borderRadius: 'var(--ab__border-radius)',
+                        opacity: enabled ? 1 : 0.5,
+                    }, key: `${letter}${key ? key : ''}` },
+                    !enabled ? (React.createElement("div", { style: {
+                            background: 'currentColor',
+                            position: 'absolute',
+                            bottom: '-100%',
+                            right: 0,
+                            width: 2,
+                            height: '200%',
+                            transform: 'skewX(45deg)',
+                        } })) : null,
+                    letter));
+            };
+            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
+                renderBox(enabled),
+                showBoth ? renderBox(!enabled, 'label') : null,
+                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
+        }),
+        children));
+};

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -21,61 +21,12 @@ const PivotList_1 = require("./PivotList");
 const ButtonInfo_1 = require("../../../Components/Buttons/ButtonInfo");
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ColumnLabels_1 = require("./ColumnLabels");
 const verticalPanelStyle = {
     minHeight: 150,
-    flex: '1 0 auto',
     overflow: 'auto',
 };
 const ListPanel = (props) => (React.createElement(Panel_1.default, Object.assign({ variant: "modern", bodyProps: { padding: 0 }, style: Object.assign(Object.assign({}, verticalPanelStyle), props.style) }, props)));
-const ColumnLabels = (props) => {
-    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
-    const labelNames = [
-        'Aggregatable',
-        'Filterable',
-        'Groupable',
-        'Moveable',
-        'Pivotable',
-        'Sortable',
-    ];
-    const labels = labelNames.map((name) => columnProperties[name.toLocaleLowerCase()] ? name.charAt(0) : '');
-    const flexProps = {
-        [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
-    };
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
-        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
-        labels.map((l, index) => {
-            const enabled = !!l;
-            const labelName = labelNames[index];
-            const letter = labelName.charAt(0);
-            const renderBox = (enabled, key) => {
-                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
-                        overflow: 'hidden',
-                        cursor: 'auto',
-                        position: 'relative',
-                        fontWeight: 600,
-                        lineHeight: 0,
-                        border: `1px solid var(--ab-color-${enabled ? 'accent' : 'inputborder'})`,
-                        borderRadius: 'var(--ab__border-radius)',
-                        opacity: enabled ? 1 : 0.5,
-                    }, key: `${letter}${key ? key : ''}` },
-                    !enabled ? (React.createElement("div", { style: {
-                            background: 'currentColor',
-                            position: 'absolute',
-                            bottom: '-100%',
-                            right: 0,
-                            width: 2,
-                            height: '200%',
-                            transform: 'skewX(45deg)',
-                        } })) : null,
-                    letter));
-            };
-            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
-                renderBox(enabled),
-                showBoth ? renderBox(!enabled, 'label') : null,
-                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
-        }),
-        children));
-};
 function areEqual(_prevProps, _nextProps) {
     /*
      * For now we don't need updates from the parent - the initial layout we receive on mount is enough
@@ -297,7 +248,7 @@ exports.LayoutEditor = React.memo((props) => {
                                         whiteSpace: 'nowrap',
                                     }, onChange: setColumnVisibility.bind(null, c) }, "Visible")),
                             React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "column" },
-                                React.createElement(ColumnLabels, { showTitle: true, sortable: c.sortable, filterable: c.filterable, moveable: c.moveable, pivotable: c.pivotable, groupable: c.groupable, aggregatable: c.aggregatable }, ' '),
+                                React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: true, sortable: c.sortable, filterable: c.filterable, moveable: c.moveable, pivotable: c.pivotable, groupable: c.groupable, aggregatable: c.aggregatable }, ' '),
                                 React.createElement(rebass_1.Flex, { flexDirection: "row", mt: 2 },
                                     React.createElement(rebass_1.Flex, { flex: 3, alignItems: "baseline" },
                                         React.createElement(rebass_1.Text, { fontSize: 3, mr: 2 }, "Header:"),
@@ -415,21 +366,5 @@ exports.LayoutEditor = React.memo((props) => {
                                 React.createElement(icons_1.Icon, { name: "clear" }))));
                     }, getItemStyle: (columnId, snapshot, draggableStyle) => {
                         return getItemStyle_1.getItemStyle(allColumnsMap[columnId], layout, state.dragSource, snapshot, draggableStyle);
-                    } })),
-            React.createElement(ListPanel, { header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
-                    gridRow: '1 /1',
-                    gridColumn: '3/3',
-                }, bodyProps: {
-                    padding: 2,
-                    backgroundColor: 'defaultbackground',
-                    color: 'text-on-defaultbackground',
-                } },
-                React.createElement(ColumnLabels, { flexDirection: "column", showBoth: true, labels: {
-                        Sortable: 'Able to be sorted',
-                        Filterable: 'Can be filtered',
-                        Aggregatable: 'Shows aggregations (in grouped rows)',
-                        Groupable: 'Can form a row group',
-                        Moveable: 'Is draggable and movable',
-                        Pivotable: 'Eligible for pivoting',
-                    }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })))));
+                    } })))));
 }, areEqual);

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -3,6 +3,7 @@ import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Inte
 import { Layout } from '../../../PredefinedConfig/LayoutState';
 export interface LayoutEditorWizardProps extends AdaptableWizardStepProps<Layout> {
     Layouts: Layout[];
+    onLayoutChange?: (layout: Layout) => void;
 }
 export interface LayoutEditorWizardState {
     layoutName: string;

package/src/View/Layout/Wizard/LayoutEditorWizard.js

@@ -8,6 +8,10 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const LayoutEditor_1 = require("./LayoutEditor");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const ColumnLabels_1 = require("./LayoutEditor/ColumnLabels");
 class LayoutEditorWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -35,11 +39,13 @@ class LayoutEditorWizard extends React.Component {
             return ErrorMessage;
         };
         this.updateLayout = (layout) => {
+            var _a, _b;
             const updatedLayout = Object.assign(Object.assign({}, this.state.layout), layout);
             Object.assign(this.props.data, updatedLayout);
             this.setState({
                 layout: updatedLayout,
             });
+            (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onLayoutChange) === null || _b === void 0 ? void 0 : _b.call(_a, updatedLayout);
         };
         this.onLayoutChange = (layout) => {
             layout = Object.assign(Object.assign({}, layout), { Name: this.state.layoutName });
@@ -64,14 +70,36 @@ class LayoutEditorWizard extends React.Component {
         };
     }
     render() {
-        return (React.createElement("div", { "data-name": 'layout-editor', style: { flex: 1, overflow: 'auto' } },
+        return (React.createElement("div", { "data-name": 'layout-editor', style: { height: '100%' } },
             React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 } },
-                React.createElement(FormLayout_1.default, { columns: ['label', 'children'], m: 2, width: "30rem" },
-                    React.createElement(FormLayout_1.FormRow, { label: "Layout Name" },
-                        React.createElement(Input_1.default, { value: this.state.layoutName, "data-name": "layout-editor-name-input", width: "100%", autoFocus: true, placeholder: "Type a name", onChange: this.onLayoutNameChange }),
-                        ' '),
-                    this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null),
+                React.createElement(rebass_1.Flex, null,
+                    React.createElement(rebass_1.Box, { width: 350 },
+                        React.createElement(FormLayout_1.default, { columns: ['label', 'children'], m: 2 },
+                            React.createElement(FormLayout_1.FormRow, { label: "Layout Name" },
+                                React.createElement(Input_1.default, { value: this.state.layoutName, "data-name": "layout-editor-name-input", width: "100%", autoFocus: true, placeholder: "Type a name", onChange: this.onLayoutNameChange }),
+                                ' '),
+                            this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
+                                React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null)),
+                    React.createElement(rebass_1.Flex, { flex: 1, pr: 2, alignItems: "center", justifyContent: "end" },
+                        React.createElement(rebass_1.Text, { mr: 2 }, "Legend"),
+                        React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, bodyText: [
+                                React.createElement(Panel_1.default, { variant: "modern", header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
+                                        gridRow: '1 /1',
+                                        gridColumn: '3/3',
+                                    }, bodyProps: {
+                                        padding: 2,
+                                        backgroundColor: 'defaultbackground',
+                                        color: 'text-on-defaultbackground',
+                                    } },
+                                    React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "column", showBoth: true, labels: {
+                                            Sortable: 'Able to be sorted',
+                                            Filterable: 'Can be filtered',
+                                            Aggregatable: 'Shows aggregations (in grouped rows)',
+                                            Groupable: 'Can form a row group',
+                                            Moveable: 'Is draggable and movable',
+                                            Pivotable: 'Eligible for pivoting',
+                                        }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
+                            ] }))),
                 React.createElement(LayoutEditor_1.LayoutEditor, { api: this.props.api, layout: this.state.layout, onLayoutChange: this.onLayoutChange }))));
     }
     canNext() {

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -4,7 +4,6 @@ exports.SystemStatusEntityRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const EntityRowItem_1 = require("../Components/EntityRowItem");
 const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Helper_1 = require("../../Utilities/Helpers/Helper");
@@ -25,7 +24,7 @@ class SystemStatusEntityRow extends React.Component {
                 " ",
                 systemStatus.statusFurtherInformation ? '...' : ''),
             systemStatus.statusFurtherInformation ? (React.createElement(rebass_1.Box, { margin: 2, style: { whiteSpace: 'normal' } }, systemStatus.statusFurtherInformation)) : null)) : null;
-        colItems[1].Content = React.createElement(EntityRowItem_1.EntityRowItem, { Content: systemStatus.timestamp.toLocaleString() });
+        colItems[1].Content = systemStatus.timestamp.toLocaleString();
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }
 }

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, GridReadyEvent, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
+import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -178,6 +178,7 @@ export declare class Adaptable implements IAdaptable {
     forAllRowNodesDo(func: (rowNode: RowNode) => void): void;
     forAllVisibleRowNodesDo(func: (rowNode: RowNode, rowIndex: number) => void): void;
     getVisibleRowNodes(): RowNode[];
+    getRowsInViewport(): RowNode[];
     selectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
     deSelectNodes(rowNodes: RowNode[], clearSelection: boolean): void;
     selectNode(rowNode: RowNode, clearSelection: boolean): void;
@@ -187,6 +188,7 @@ export declare class Adaptable implements IAdaptable {
     redrawBody(): void;
     redrawHeader(): void;
     redrawRow(rowNode: RowNode): void;
+    redrawRows(rowNodes: RowNode[]): void;
     refreshCells(rowNodes: RowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     jumpToRow(rowNode: RowNode): void;
     jumpToColumn(columnId: string): void;
@@ -241,6 +243,7 @@ export declare class Adaptable implements IAdaptable {
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
     private initInternalGridLogic;
+    private updateColumnFilterActiveState;
     buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
     prepareGrid(): void;
     setupColumns(): void;
@@ -360,5 +363,4 @@ export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
     constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions);
     render(container?: HTMLElement | null): void;
 }
-export declare const bindAdaptableAgGrid: (gridReadyEvent: GridReadyEvent, gridOptions: GridOptions) => void;
 export {};