@adaptabletools/adaptable-cjs 18.0.0-canary.11 → 18.0.0-canary.13

package/src/Utilities/Services/ReportService.js

@@ -11,6 +11,8 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../Extensions/String
 const ModuleConstants_1 = require("../Constants/ModuleConstants");
 const uuid_1 = require("../../components/utils/uuid");
 const ObjectFactory_1 = require("../ObjectFactory");
+const StyleHelper_1 = require("../Helpers/StyleHelper");
+const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 class ReportService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
@@ -19,29 +21,12 @@ class ReportService {
         this.excelStylesWithFormattedDate = {};
         this.adaptableApi = adaptableApi;
     }
-    resetExcelStyleMemoization() {
-        this.excelStylesCache = {};
-        this.cellClassKey2excelStyleIdMap = {};
-        this.excelStylesWithFormattedDate = {};
-    }
-    registerExcelStyle(excelStyle, cellClassKey) {
-        const excelStyleKey = JSON.stringify(excelStyle);
-        if (!this.excelStylesCache[excelStyleKey]) {
-            const excelStyleId = (0, uuid_1.createUuid)();
-            const excelStyleWithId = Object.assign(Object.assign({}, excelStyle), { id: excelStyleId });
-            this.excelStylesCache[excelStyleKey] = excelStyleWithId;
-        }
-        this.cellClassKey2excelStyleIdMap[cellClassKey] = this.excelStylesCache[excelStyleKey].id;
-    }
-    getRegisteredExcelStyles() {
-        return Object.values(this.excelStylesCache);
+    destroy() {
+        // TO DO
     }
     getExcelStyleIdForCellClassKey(cellClassKey) {
         return this.cellClassKey2excelStyleIdMap[cellClassKey];
     }
-    registerExcelStyleWithFormattedDate(cellClassId, isoFormattedValue) {
-        this.excelStylesWithFormattedDate[cellClassId] = isoFormattedValue;
-    }
     getExcelStyleWithFormattedDate(cellClassId) {
         return this.excelStylesWithFormattedDate[cellClassId];
     }
@@ -369,9 +354,6 @@ class ReportService {
         }
         return fileName;
     }
-    destroy() {
-        // TO DO
-    }
     getCustomExportDateFormat() {
         return this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
     }
@@ -383,5 +365,239 @@ class ReportService {
             : // type === formattedValue
                 this.adaptableApi.gridApi.getDisplayValueFromRawValue(rowNode, columnId, cellRawValue);
     }
+    // aggregate and merge all acive Adaptable styles with the user proviided ExcelStyles
+    buildExcelStylesForVisualReports() {
+        // for historical reasons, the styles are merged as class variables
+        // we could/should refactor this to be more functional
+        this.createExcelStyleMemoization();
+        return Object.values(this.excelStylesCache);
+    }
+    createExcelStyleMemoization() {
+        this.resetExcelStyleMemoization();
+        // we memoize as much as possible, as this is called quite A LOT
+        const adaptableColumnMap = {};
+        const getAdaptableColumnWithColumnId = (columnId) => {
+            const memoizedColumn = adaptableColumnMap[columnId];
+            if (memoizedColumn) {
+                return memoizedColumn;
+            }
+            const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(columnId);
+            adaptableColumnMap[columnId] = abColumn;
+            return abColumn;
+        };
+        const formatColumnsWithDisplayFormatForColumn = {};
+        const getFormatColumnsWithDisplayFormatForColumn = (columnId) => {
+            const memoizedFormatColumns = formatColumnsWithDisplayFormatForColumn[columnId];
+            if (memoizedFormatColumns) {
+                return memoizedFormatColumns;
+            }
+            const abColumn = getAdaptableColumnWithColumnId(columnId);
+            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            formatColumnsWithDisplayFormatForColumn[columnId] = formatColumns;
+            return formatColumns;
+        };
+        const isDateCellExportedAsFormattedValue = this.adaptableApi.exportApi.internalApi.isDateCellExportedAsFormattedValue();
+        const displayedColumns = this.adaptableApi.agGridApi.getAllDisplayedColumns();
+        const colDefs = displayedColumns.map((column) => {
+            return column.getColDef();
+        });
+        const forAllVisibleRowNodesDoConfig = { includeGroupRows: true };
+        const agGridApi = this.adaptableApi.agGridApi;
+        const userExcelStyles = this.adaptableApi.internalApi
+            .getAdaptableInstance()
+            .agGridAdapter.getUserGridOptionsProperty('excelStyles') || [];
+        this.adaptableApi.internalApi.forAllVisibleRowNodesDo((node, rowIndex) => {
+            var _a;
+            const rowParams = {
+                node,
+                data: node.data,
+                rowIndex,
+                api: agGridApi,
+                columnApi: null,
+                context: ((_a = agGridApi.__getContext) === null || _a === void 0 ? void 0 : _a.call(agGridApi)) || {},
+            };
+            const getRowStyleFn = agGridApi.getGridOption('getRowStyle');
+            const rowStyle = getRowStyleFn ? getRowStyleFn(rowParams) : {};
+            displayedColumns.forEach((column, columnIndex) => {
+                var _a, _b, _c;
+                const colDef = colDefs[columnIndex];
+                let cellClassParams;
+                const getLazyCellClassParams = () => {
+                    if (!cellClassParams) {
+                        cellClassParams = {
+                            colDef,
+                            node,
+                            column,
+                            data: node.data,
+                            value: this.adaptableApi.gridApi.getRawValueFromRowNode(node, column.getId()),
+                            rowIndex,
+                            api: agGridApi,
+                            columnApi: null,
+                            context: {},
+                        };
+                    }
+                    return cellClassParams;
+                };
+                const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(getLazyCellClassParams()) : {};
+                const excelStyles = [];
+                // add user defined excel styles
+                let userColDefCellClass = this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .agGridColumnAdapter.getUserColDefProperty(column.getColId(), 'cellClass');
+                const userDefinedCellClass = typeof userColDefCellClass === 'function'
+                    ? userColDefCellClass(getLazyCellClassParams())
+                    : userColDefCellClass;
+                const userDefinedExcelStyle = userDefinedCellClass &&
+                    userExcelStyles.find((excelStyle) => {
+                        var _a;
+                        return typeof userDefinedCellClass === 'string'
+                            ? userDefinedCellClass === excelStyle.id
+                            : (_a = userDefinedCellClass === null || userDefinedCellClass === void 0 ? void 0 : userDefinedCellClass.includes) === null || _a === void 0 ? void 0 : _a.call(userDefinedCellClass, excelStyle.id);
+                    });
+                if (userDefinedExcelStyle) {
+                    excelStyles.push(userDefinedExcelStyle);
+                }
+                // add adaptable derived styles (format column etc.)
+                const adaptableStyle = Object.assign(Object.assign({}, rowStyle), Object.keys(cellStyle).reduce((result, key) => {
+                    if (cellStyle[key] !== null) {
+                        result[key] = cellStyle[key];
+                    }
+                    return result;
+                }, {}));
+                const sanitizedAdaptableStyle = (0, StyleHelper_1.sanitizeStyle)(adaptableStyle);
+                if (Object.values(sanitizedAdaptableStyle).some((style) => style != null)) {
+                    excelStyles.push(this.convertCSSToExcelStyle(sanitizedAdaptableStyle));
+                }
+                const excelDataType = this.adaptableApi.exportApi.internalApi.getExcelDataType(colDef === null || colDef === void 0 ? void 0 : colDef.type);
+                const rawValue = this.adaptableApi.gridApi.getRawValueFromRowNode(node, column.getId());
+                // don't add the cell style if it has no adaptable custom styles
+                if (!excelStyles.length &&
+                    // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
+                    !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue)) {
+                    return;
+                }
+                const cellClassId = this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .agGridColumnAdapter.getExcelClassNameForCell(column.getId(), this.adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .getPrimaryKeyValueFromRowNode(node), userDefinedCellClass);
+                const finalCellExcelStyle = Object.assign({}, ...excelStyles);
+                if (excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue) {
+                    let dateFormatPattern = this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
+                    const abColumn = getAdaptableColumnWithColumnId(column.getColId());
+                    if (!dateFormatPattern) {
+                        const mostRelevantFormatColumn = this.adaptableApi.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
+                        dateFormatPattern =
+                            ((_a = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Formatter) === 'DateFormatter' &&
+                                ((_c = (_b = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _b === void 0 ? void 0 : _b.Options) === null || _c === void 0 ? void 0 : _c.Pattern);
+                    }
+                    if (dateFormatPattern) {
+                        const normalisedValue = this.adaptableApi.internalApi
+                            .getAdaptableInstance()
+                            .getNormalisedValueFromRawValue(rawValue, abColumn);
+                        if (normalisedValue) {
+                            // we have to pass the date in the ISO format to Excel
+                            // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
+                            // we can NOT use Date.toISOString() because we don't want the timezone corrections to kick in
+                            const isoFormattedValue = (0, FormatHelper_1.DateFormatter)(normalisedValue, {
+                                Pattern: `yyyy-MM-dd'T'HH:mm:ss.SSS`,
+                            });
+                            if (isoFormattedValue) {
+                                finalCellExcelStyle.dataType = 'DateTime';
+                                finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
+                                // create a new cell key to ensure any user provided className does not interfere
+                                const cellKey = this.adaptableApi.internalApi
+                                    .getAdaptableInstance()
+                                    .agGridColumnAdapter.getExcelClassNameForCell(column.getColId(), this.adaptableApi.internalApi
+                                    .getAdaptableInstance()
+                                    .getPrimaryKeyValueFromRowNode(node));
+                                // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
+                                this.registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                            }
+                        }
+                    }
+                }
+                this.registerExcelStyle(finalCellExcelStyle, cellClassId);
+            });
+        }, forAllVisibleRowNodesDoConfig);
+    }
+    convertCSSToExcelStyle(style) {
+        const getHexColor = (color) => {
+            const preparedColor = (0, StyleHelper_1.getVariableColor)(color);
+            const t = (0, tinycolor2_1.default)(preparedColor);
+            const a = t.getAlpha();
+            return tinycolor2_1.default.mix((0, tinycolor2_1.default)('white'), t, a * 100).toHexString();
+        };
+        let result = {};
+        if (style.backgroundColor != null) {
+            result.interior = {
+                color: getHexColor(style.backgroundColor),
+                pattern: 'Solid',
+            };
+        }
+        if (style.borderColor != null) {
+            const excelBorder = {
+                color: style.borderColor,
+                lineStyle: 'Continuous',
+                weight: 1,
+            };
+            result.borders = {
+                borderBottom: excelBorder,
+                borderLeft: excelBorder,
+                borderRight: excelBorder,
+                borderTop: excelBorder,
+            };
+        }
+        if (style.textAlign) {
+            result.alignment = {
+                horizontal: StringExtensions_1.default.CapitaliseFirstLetter(style.textAlign),
+            };
+        }
+        if (style.color != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font = {
+                color: getHexColor(style.color),
+            };
+        }
+        if (style.fontStyle === 'italic') {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.italic = true;
+        }
+        if (style.fontWeight != null &&
+            (style.fontWeight === 'bold' || Number(style.fontWeight) >= 600)) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.bold = true;
+        }
+        if (style.fontSize != null) {
+            if (!result.font) {
+                result.font = {};
+            }
+            result.font.size = (0, StyleHelper_1.convertCSSAbsoluteFontSizeToPt)(style.fontSize);
+        }
+        return result;
+    }
+    resetExcelStyleMemoization() {
+        this.excelStylesCache = {};
+        this.cellClassKey2excelStyleIdMap = {};
+        this.excelStylesWithFormattedDate = {};
+    }
+    registerExcelStyle(excelStyle, cellClassKey) {
+        const excelStyleKey = JSON.stringify(excelStyle);
+        if (!this.excelStylesCache[excelStyleKey]) {
+            const excelStyleId = (0, uuid_1.createUuid)();
+            const excelStyleWithId = Object.assign(Object.assign({}, excelStyle), { id: excelStyleId });
+            this.excelStylesCache[excelStyleKey] = excelStyleWithId;
+        }
+        this.cellClassKey2excelStyleIdMap[cellClassKey] = this.excelStylesCache[excelStyleKey].id;
+    }
+    registerExcelStyleWithFormattedDate(cellClassId, isoFormattedValue) {
+        this.excelStylesWithFormattedDate[cellClassId] = isoFormattedValue;
+    }
 }
 exports.ReportService = ReportService;

package/src/Utilities/Services/SummaryService.d.ts

@@ -1,6 +1,6 @@
 import { IRowNode } from '@ag-grid-community/core';
-import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
 import { AdaptableApi, AdaptableModule } from '../../types';
+import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
 export declare const summarySupportedExpressions: readonly ["SUM", "AVG", "MIN", "MAX", "COUNT", "MEDIAN", "MODE", "DISTINCT", "ONLY", "STD_DEVIATION"];
 export type SummarySupportedExpression = (typeof summarySupportedExpressions)[number];
 export type SumaryConfig = {

package/src/Utilities/adaptableQlUtils.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableColumnDataType, ExpressionFunctionInputType } from '../types';
+export declare const mapColumnDataTypeToExpressionFunctionType: (dataType: AdaptableColumnDataType) => ExpressionFunctionInputType;

package/src/Utilities/adaptableQlUtils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapColumnDataTypeToExpressionFunctionType = void 0;
+const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
+    if (dataType === 'Number') {
+        return 'number';
+    }
+    if (dataType === 'Boolean') {
+        return 'boolean';
+    }
+    if (dataType === 'String') {
+        return 'text';
+    }
+    if (dataType === 'Date') {
+        return 'date';
+    }
+};
+exports.mapColumnDataTypeToExpressionFunctionType = mapColumnDataTypeToExpressionFunctionType;

package/src/View/AdaptableViewFactory.js

@@ -33,7 +33,7 @@ const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
 const ChartingViewPanel_1 = require("./Charting/ChartingViewPanel");
 const GridFilterPopup_1 = require("./GridFilter/GridFilterPopup");
 const ColumnInfoPopup_1 = require("./ColumnInfo/ColumnInfoPopup");
-const NotesPopup_1 = require("./Notes/NotesPopup");
+const NotePopup_1 = require("./Note/NotePopup");
 const CommentsPopup_1 = require("./Comments/CommentsPopup");
 const DataImportPopup_1 = require("./DataImport/DataImportPopup");
 exports.AdaptableViewFactory = {
@@ -50,7 +50,7 @@ exports.AdaptableViewFactory = {
     ToolPanelPopup: ToolPanelPopup_1.ToolPanelPopup,
     SystemStatusPopup: SystemStatusPopup_1.SystemStatusPopup,
     DataChangeHistoryPopup: DataChangeHistoryPopup_1.DataChangeHistoryPopup,
-    NotesPopup: NotesPopup_1.NotesPopup,
+    NotePopup: NotePopup_1.NotePopup,
     CommentsPopup: CommentsPopup_1.CommentsPopup,
     DataImportPopup: DataImportPopup_1.DataImportPopup,
     GridFilterPopup: GridFilterPopup_1.GridFilterPopup,

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.d.ts

@@ -2,7 +2,7 @@
 import { CalculatedColumn } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export declare const calculatedColumnTypes: readonly ["ScalarExpression", "AggregatedScalarExpression", "CumulativeAggregatedExpression", "QuantileAggregatedExpression"];
-export type ExpressionType = (typeof calculatedColumnTypes)[number];
+export type ExpressionType = typeof calculatedColumnTypes[number];
 export interface CalculatedColumnWizardProps extends AdaptableOnePageWizardProps<CalculatedColumn> {
 }
 export declare const CalculatedColumnWizard: (props: CalculatedColumnWizardProps) => JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -40,7 +40,7 @@ const CalculatedColumnWizard = (props) => {
                 return (0, Helper_1.cloneObject)(calculatedColumn);
             }
         }
-        return ObjectFactory_1.default.CreateEmptyCalculatedColumn();
+        return ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const isEdit = Boolean(props.data) || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

package/src/View/Comments/CommentsEditor.js

@@ -89,7 +89,7 @@ const CommentsEditor = (props) => {
                 }
             }, mt: 2, mb: "2", width: "100%", placeholder: "Write new comment" }),
         React.createElement(SimpleButton_1.default, { width: "100%", variant: "raised", onClick: () => {
-                adaptable.api.settingsPanelApi.openSettingsPanel('Comments');
+                adaptable.api.settingsPanelApi.openSettingsPanel('Comment');
                 adaptable.api.internalApi.getCellPopupService().hidePopup();
             } },
             React.createElement(rebass_1.Box, { mr: 2 },

package/src/View/Comments/CommentsPopup.js

@@ -49,14 +49,18 @@ const CellComments = (props) => {
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (React.createElement(Panel_1.default, { mb: 2, header: React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 2 },
-                "Cell Value: ",
+                React.createElement("b", null, "Cell Value:"),
+                " ",
                 cellValue),
             React.createElement(rebass_1.Box, { mr: 2 },
-                primaryKeyHeader,
-                ": ",
+                React.createElement("b", null,
+                    primaryKeyHeader,
+                    ":"),
+                " ",
                 props.commentThread.PrimaryKeyValue),
             React.createElement(rebass_1.Box, null,
-                "Column: ",
+                React.createElement("b", null, "Column:"),
+                " ",
                 columnFriendlyName),
             React.createElement(rebass_1.Box, { flex: 1 }),
             React.createElement(AdaptableButton_1.AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {

package/src/View/Components/NewScopeComponent.js

@@ -145,7 +145,7 @@ const NewScopeComponent = (props) => {
     }
     const hasColumnTypes = React.useMemo(() => {
         var _a;
-        return ((_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return ((_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }, []);
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
@@ -171,7 +171,7 @@ const NewScopeComponent = (props) => {
                 React.createElement(rebass_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
         hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
             React.createElement(rebass_1.Box, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, (_b = (_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
+                React.createElement(rebass_1.Flex, { flexDirection: "column" }, (_b = (_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
                     var _a;
                     return (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
                             let columnTypes = [].concat(props.scope.ColumnTypes);

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -5,15 +5,15 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
-const NotesRedux_1 = require("../../../../Redux/ActionsReducers/NotesRedux");
+const NoteRedux_1 = require("../../../../Redux/ActionsReducers/NoteRedux");
 const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CommentsEditor_1 = require("../../../Comments/CommentsEditor");
-const NoteEditor_1 = require("../../../Notes/NoteEditor");
+const NoteEditor_1 = require("../../../Note/NoteEditor");
 const CellPopup_1 = require("../../CellPopup");
 const ConnectedNoteEditor = ({ enableEditMode }) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Notes');
+    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
     const editMode = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesEditModeSelector)(state.System));
     const cellPopupService = api.internalApi.getCellPopupService();
     const cellAddress = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesSelector)(state.System));
@@ -21,12 +21,12 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
     // Only handle first note for now
     // Later we can handle multiple notes
     note,] = (0, react_redux_1.useSelector)((state) => {
-        return cellAddress ? (0, NotesRedux_1.GetNotesSelector)(state.Notes, cellAddress) : [];
+        return cellAddress ? (0, NoteRedux_1.GetNotesSelector)(state.Note, cellAddress) : [];
     });
     const handleNoteChange = React.useCallback((value) => {
-        api.notesApi.updateNoteText(value, note);
+        api.noteApi.updateNoteText(value, note);
     }, [note]);
-    return (React.createElement(rebass_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
+    return (React.createElement(rebass_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
         React.createElement(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Text, onNoteChange: (value) => handleNoteChange(value) })));
 };
 const GridCellPopup = (props) => {

package/src/View/Components/ValueSelector/index.d.ts

@@ -26,6 +26,7 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
     isOptionDisabled?: (option: OPTION_TYPE) => boolean;
     disabled?: boolean;
+    style?: React.CSSProperties;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
 export declare namespace ValueSelector {

package/src/View/Components/ValueSelector/index.js

@@ -115,7 +115,7 @@ function ValueSelector(props) {
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
     const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
-    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
+    return (React.createElement(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
         React.createElement(rebass_1.Flex, { mb: 1 },
             showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
             showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -213,7 +213,6 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         },
         autoGroupColumnDef: {
             sortable: true,
-            // suppressMenu: true,
         },
         columnDefs: [
             {

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -49,7 +49,7 @@ class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard_1.FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn();
+        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(this.props.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -12,8 +12,10 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const AdaptableContext_1 = require("../../AdaptableContext");
 const FreeTextColumnWizard = (props) => {
     var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
     const [freeTextColumn, setFreeTextColumn] = (0, react_1.useState)(() => {
         var _a, _b;
@@ -23,7 +25,7 @@ const FreeTextColumnWizard = (props) => {
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
             return allFreeTextColumns.find((column) => column.ColumnId === props.popupParams.column.columnId);
         }
-        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
+        return ObjectFactory_1.default.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

package/src/View/Layout/LayoutViewPanel.js

@@ -29,8 +29,9 @@ class LayoutViewPanelComponent extends React.Component {
             return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, { flex: 1 },
+            React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
                 React.createElement(Select_1.Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, 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 })),

package/src/View/Layout/TransposedPopup.js

@@ -11,21 +11,21 @@ const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
 const TransposedPopup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows } = props.popupProps;
     const rowNodes = React.useMemo(() => {
-        return adaptable.api.gridApi.getAllRowNodes();
+        return props.popupProps.visibleRows
+            ? adaptable.api.gridApi.getVisibleRowNodes()
+            : adaptable.api.gridApi.getAllRowNodes();
     }, [
-    // can be later triggered by ticking data
+    // can be later triggered by tickng data
     ]);
-    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    // Thist must be qunique
-    const transposeByColumnId = primaryKey;
-    // Only used to show nice values a the top of the grid, istead on the value
-    // of the primarykey
-    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const [syntheticTransposedByColumnId, setSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
     const columns = React.useMemo(() => {
         // customisable
-        return adaptable.api.columnApi.getColumns();
+        return visibleColumns
+            ? adaptable.api.columnApi.getVisibleColumns()
+            : adaptable.api.columnApi.getColumns();
     }, []);
     const adaptableContainerId = 'transposed-adaptable-container';
     const agGridContainerId = 'transposed-adaptable-ag-grid-container';
@@ -44,9 +44,10 @@ const TransposedPopup = (props) => {
         for (const row of rowNodes) {
             // we force the col-ids to be strings, easer to work with
             //row[transposeByColumnId] + '';
-            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId) + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
             //row[synteticTransposedByColumnId] + '';
-            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
+                '';
             transposedColumns.push({
                 colId,
                 header,
@@ -56,7 +57,7 @@ const TransposedPopup = (props) => {
             /**
              * We can hide the transposed column, if we want
              */
-            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
                 continue;
             }
             const transposedRow = {
@@ -67,7 +68,7 @@ const TransposedPopup = (props) => {
             };
             for (let row of rowNodes) {
                 // [transposed-by-column-value[n]]: [other column value[n]]
-                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId);
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
                 // row[column.field]
                 let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
                 if (value instanceof Date) {
@@ -81,7 +82,7 @@ const TransposedPopup = (props) => {
             transposedColumns,
             transposedRows,
         };
-    }, [rowNodes, primaryKey, synteticTransposedByColumnId]);
+    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
     React.useEffect(() => {
         // Mounting in an effect, so the nodes are rendered/available
         const hostAdaptableOptions = adaptable.adaptableOptions;
@@ -125,7 +126,7 @@ const TransposedPopup = (props) => {
         };
         const firstColumn = {
             field: transposedFirstColumnHeader,
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
         };
         const agGridOptions = {
             suppressLoadingOverlay: true,
@@ -177,7 +178,7 @@ const TransposedPopup = (props) => {
                 transposedAdaptableApi.destroy();
             }
         };
-    }, [synteticTransposedByColumnId]);
+    }, [syntheticTransposedByColumnId]);
     /**
      * Need to get all data, manualy pivot the grid using the primary key.
      *
@@ -189,8 +190,8 @@ const TransposedPopup = (props) => {
         React.createElement(Panel_1.default, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
-                            setSynteticTransposedByColumnId(colId);
+                    React.createElement(ColumnSelector_1.ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
                         } })))),
         React.createElement(rebass_1.Flex, { height: "100%" },
             React.createElement(rebass_1.Box, { id: "transposed-adaptable-container" }),