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

package/src/Utilities/Services/ReportService.js

@@ -7,6 +7,8 @@ import StringExtensions from '../Extensions/StringExtensions';
 import { ExportModuleId } from '../Constants/ModuleConstants';
 import { createUuid } from '../../components/utils/uuid';
 import { createBaseContext } from '../ObjectFactory';
+import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Helpers/StyleHelper';
+import tinycolor from 'tinycolor2';
 export class ReportService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
@@ -15,29 +17,12 @@ export 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 = 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];
     }
@@ -365,9 +350,6 @@ export class ReportService {
         }
         return fileName;
     }
-    destroy() {
-        // TO DO
-    }
     getCustomExportDateFormat() {
         return this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
     }
@@ -379,4 +361,238 @@ export 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 = 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 = 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 = getVariableColor(color);
+            const t = tinycolor(preparedColor);
+            const a = t.getAlpha();
+            return tinycolor.mix(tinycolor('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.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 = 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 = 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;
+    }
 }

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,14 @@
+export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
+    if (dataType === 'Number') {
+        return 'number';
+    }
+    if (dataType === 'Boolean') {
+        return 'boolean';
+    }
+    if (dataType === 'String') {
+        return 'text';
+    }
+    if (dataType === 'Date') {
+        return 'date';
+    }
+};

package/src/View/AdaptableViewFactory.js

@@ -29,7 +29,7 @@ import { StatusBarPopup } from './StatusBar/StatusBarPopup';
 import { ChartingViewPanel } from './Charting/ChartingViewPanel';
 import { GridFilterPopup } from './GridFilter/GridFilterPopup';
 import { ColumnInfoPopup } from './ColumnInfo/ColumnInfoPopup';
-import { NotesPopup } from './Notes/NotesPopup';
+import { NotePopup } from './Note/NotePopup';
 import { CommentsPopup } from './Comments/CommentsPopup';
 import { DataImportPopup } from './DataImport/DataImportPopup';
 export const AdaptableViewFactory = {
@@ -46,7 +46,7 @@ export const AdaptableViewFactory = {
     ToolPanelPopup,
     SystemStatusPopup,
     DataChangeHistoryPopup,
-    NotesPopup,
+    NotePopup,
     CommentsPopup,
     DataImportPopup,
     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

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

package/src/View/Comments/CommentsEditor.js

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

package/src/View/Comments/CommentsPopup.js

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

package/src/View/Components/NewScopeComponent.js

@@ -139,7 +139,7 @@ export 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, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
@@ -165,7 +165,7 @@ export const NewScopeComponent = (props) => {
                 React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(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.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
             React.createElement(Box, null,
-                React.createElement(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(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, { "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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { Flex } from 'rebass';
-import { GetNotesSelector } from '../../../../Redux/ActionsReducers/NotesRedux';
+import { GetNotesSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
 import { SystemCommentsAndNotesEditModeSelector, SystemCommentsAndNotesFocusedEntitySelector, SystemCommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/SystemRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CommentsEditor } from '../../../Comments/CommentsEditor';
-import { NoteEditor } from '../../../Notes/NoteEditor';
+import { NoteEditor } from '../../../Note/NoteEditor';
 import { CellPopup } from '../../CellPopup';
 const ConnectedNoteEditor = ({ enableEditMode }) => {
     const { api } = useAdaptable();
-    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Notes');
+    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
     const editMode = useSelector((state) => SystemCommentsAndNotesEditModeSelector(state.System));
     const cellPopupService = api.internalApi.getCellPopupService();
     const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
@@ -17,12 +17,12 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
     // Only handle first note for now
     // Later we can handle multiple notes
     note,] = useSelector((state) => {
-        return cellAddress ? GetNotesSelector(state.Notes, cellAddress) : [];
+        return cellAddress ? GetNotesSelector(state.Note, cellAddress) : [];
     });
     const handleNoteChange = React.useCallback((value) => {
-        api.notesApi.updateNoteText(value, note);
+        api.noteApi.updateNoteText(value, note);
     }, [note]);
-    return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
+    return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
         React.createElement(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) })));
 };
 export 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

@@ -111,7 +111,7 @@ export function ValueSelector(props) {
     };
     const showOnlySelectedCheckbox = (React.createElement(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(Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
+    return (React.createElement(Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
         React.createElement(Flex, { mb: 1 },
             showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(Box, { flex: 1 })),
             showSelectedOnlyPosition === 'top' && React.createElement(Box, { ml: 20 }, showOnlySelectedCheckbox)),

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

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

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -45,7 +45,7 @@ export class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory.CreateEmptyFreeTextColumn();
+        let configEntity = 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

@@ -8,8 +8,10 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextColumnRedux';
 import { useDispatch, useSelector } from 'react-redux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { useAdaptable } from '../../AdaptableContext';
 export const FreeTextColumnWizard = (props) => {
     var _a;
+    const adaptable = useAdaptable();
     const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
     const [freeTextColumn, setFreeTextColumn] = useState(() => {
         var _a, _b;
@@ -19,7 +21,7 @@ export 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.CreateEmptyFreeTextColumn();
+        return ObjectFactory.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = useDispatch();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

package/src/View/Layout/LayoutViewPanel.js

@@ -25,8 +25,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(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
+            React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
                 React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(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

@@ -7,21 +7,21 @@ import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const TransposedPopup = (props) => {
     const adaptable = 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';
@@ -40,9 +40,10 @@ export 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,
@@ -52,7 +53,7 @@ export 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 = {
@@ -63,7 +64,7 @@ export 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) {
@@ -77,7 +78,7 @@ export 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;
@@ -121,7 +122,7 @@ export const TransposedPopup = (props) => {
         };
         const firstColumn = {
             field: transposedFirstColumnHeader,
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
         };
         const agGridOptions = {
             suppressLoadingOverlay: true,
@@ -173,7 +174,7 @@ export const TransposedPopup = (props) => {
                 transposedAdaptableApi.destroy();
             }
         };
-    }, [synteticTransposedByColumnId]);
+    }, [syntheticTransposedByColumnId]);
     /**
      * Need to get all data, manualy pivot the grid using the primary key.
      *
@@ -185,8 +186,8 @@ export const TransposedPopup = (props) => {
         React.createElement(Panel, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
-                            setSynteticTransposedByColumnId(colId);
+                    React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
                         } })))),
         React.createElement(Flex, { height: "100%" },
             React.createElement(Box, { id: "transposed-adaptable-container" }),