@adaptabletools/adaptable 18.0.0-canary.3 → 18.0.0-canary.30

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

@@ -62,7 +62,7 @@ export function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
+            return (React.createElement(Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier !== null && identifier !== void 0 ? identifier : index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
                 React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
                     reorderable ? (React.createElement(Box, Object.assign({ mr: 3 }, dragHandleProps),
                         React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
@@ -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/CustomSort/CustomSortSummary.js

@@ -33,7 +33,7 @@ export class CustomSortSummaryComponent extends React.Component {
     }
     render() {
         const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
-        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn);
+        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn.columnId);
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
         if (!this.props.summarisedColumn.sortable) {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { useAdaptable } from '../AdaptableContext';
 import { useEffect, useRef, useState } from 'react';
+import { useAdaptable } from '../AdaptableContext';
 import usePrevious from '../../components/utils/usePrevious';
 import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { buildActionColumnButton } from './buildActionColumnButton';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange, onClearRow } = props;
     const mainAdaptableInstance = useAdaptable();
@@ -20,13 +21,12 @@ export const DataChangeHistoryGrid = (props) => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
             const modules = mainAdaptableInstance.getAgGridRegisteredModules();
-            const agGridConfig = {
+            const dataChangeHistoryAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
                 gridOptions,
-                modules: modules,
-            };
-            // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
-            const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
-            const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+                modules,
+            });
             setAdaptableApi(dataChangeHistoryAdaptableApi);
         };
         initializeAdaptableGrid();
@@ -65,7 +65,7 @@ export const DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.gridApi.getAgGridInstance().api.applyTransactionAsync({
+        adaptableApi.agGridApi.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
@@ -208,7 +208,6 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         },
         autoGroupColumnDef: {
             sortable: true,
-            // suppressMenu: true,
         },
         columnDefs: [
             {

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -132,7 +132,7 @@ export const DataImportWizard = (props) => {
         return [...userDefinedHandlers, ...systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
-        return fileHandlers.map((h) => h.fileExtension).join(', ');
+        return [...new Set(fileHandlers.map((h) => h.fileExtension)).values()].join(', ');
     }, [fileHandlers]);
     const readFile = React.useCallback(async (file) => {
         var _a, _b;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -143,6 +143,19 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
@@ -189,7 +202,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -248,13 +261,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, { mr: 3 },
                         React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Integer Separator" },
-                            React.createElement(Input, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Truncate" },
                             React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormRow, { label: "Ceiling" },
@@ -279,7 +292,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Input, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -7,11 +7,6 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 export const renderFormatColumnSettingsSummary = (data) => {
     var _a;
     return (React.createElement(Box, { padding: 2 },
@@ -20,7 +15,10 @@ export const renderFormatColumnSettingsSummary = (data) => {
             React.createElement(Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
         React.createElement(Text, { mt: 3 },
             "Include grouped rows ",
-            React.createElement(Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+            React.createElement(Tag, null, data.IncludeGroupedRows ? 'yes' : 'no')),
+        React.createElement(Text, { mt: 3 },
+            "Include row summaries ",
+            React.createElement(Tag, null, data.IncludeRowSummaries ? 'yes' : 'no'))));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
@@ -34,6 +32,9 @@ export const FormatColumnSettingsWizardSection = (props) => {
     const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
     };
+    const onIncludeRowSummariesChanged = (IncludeRowSummaries) => {
+        props.onChange(Object.assign(Object.assign({}, data), { IncludeRowSummaries }));
+    };
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Settings"),
         React.createElement(Tabs.Content, null,
@@ -52,5 +53,8 @@ export const FormatColumnSettingsWizardSection = (props) => {
                                     : onCellAlignmentSelectChanged(null) }))),
                     React.createElement(FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))),
+                    React.createElement(FormRow, { label: "Include Row Summaries:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeRowSummaries, onChange: onIncludeRowSummariesChanged, mr: 2 }))))))));
 };

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/GridFilter/GridFilterViewPanel.js

@@ -23,6 +23,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
+            e.preventDefault();
             runQuery();
         }
     };
@@ -44,10 +45,11 @@ const QueryViewPanelComponent = (props) => {
                         fontFamily: 'monospace',
                         fontSize: 12,
                         maxHeight: 52,
-                        height: 21,
-                        paddingTop: 7,
+                        height: '100%',
+                        paddingTop: 6,
+                        overflow: 'hidden',
                         zIndex: 100,
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
             ' ',
@@ -71,11 +73,13 @@ const QueryViewPanelComponent = (props) => {
                         maxHeight: 60,
                         paddingTop: 7,
                         zIndex: 100,
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+                        height: '100%',
+                        overflow: 'hidden',
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
     const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
     const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
         React.createElement(Icon, { name: 'list' })));

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -59,7 +59,7 @@ export const useGridFilterExpressionEditor = () => {
     const runQuery = (newExpression = expression) => {
         if (StringExtensions.IsNullOrEmpty(newExpression) &&
             StringExtensions.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
-            // user pressed enter key with an empty input => clear existing current query
+            // user pressed enter key with an empty input => clear existing expression
             adaptable.api.gridFilterApi.setGridFilterExpression('');
             return;
         }

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -9,8 +9,8 @@ import { AdaptableObjectCollection } from '../../Components/AdaptableObjectColle
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
-import env from '../../../env';
-const version = env.VERSION;
+import { ADAPTABLE_VERSION } from '../../../EnvVars';
+const version = ADAPTABLE_VERSION;
 export const GridInfoPopup = (props) => {
     const CreateGridSummaries = (colItems) => {
         var _a;
@@ -39,7 +39,6 @@ export const GridInfoPopup = (props) => {
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));

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.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const TransposedPopup: (props: WindowPopupChildProps) => JSX.Element;

package/src/View/Layout/TransposedPopup.js

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import Panel from '../../components/Panel';
+import { useAdaptable } from '../AdaptableContext';
+import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
+export const TransposedPopup = (props) => {
+    const adaptable = useAdaptable();
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
+    const rowNodes = React.useMemo(() => {
+        return props.popupProps.visibleRows
+            ? adaptable.api.gridApi.getVisibleRowNodes()
+            : adaptable.api.gridApi.getAllRowNodes();
+    }, [
+    // can be later triggered by tickng data
+    ]);
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const [syntheticTransposedByColumnId, setSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
+    const columns = React.useMemo(() => {
+        // customisable
+        return visibleColumns
+            ? adaptable.api.columnApi.getVisibleColumns()
+            : adaptable.api.columnApi.getColumns();
+    }, []);
+    const adaptableContainerId = 'transposed-adaptable-container';
+    const agGridContainerId = 'transposed-adaptable-ag-grid-container';
+    /**
+     * This is used as first field
+     */
+    const transposedFirstColumnField = '_transposed_column_value';
+    const transposedFirstColumnHeader = '_transposed_column_header';
+    const transposedRowsAndColumns = React.useMemo(() => {
+        /**
+         * transposed column values become primaryKey of the new tarnsposed rows
+         * we build row by row, might be easer
+         */
+        const transposedColumns = [];
+        const transposedRows = [];
+        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, primaryKey) + '';
+            //row[synteticTransposedByColumnId] + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
+                '';
+            transposedColumns.push({
+                colId,
+                header,
+            });
+        }
+        for (const column of columns) {
+            /**
+             * We can hide the transposed column, if we want
+             */
+            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
+                continue;
+            }
+            const transposedRow = {
+                // [transposed-by-column-id]: [other column id],
+                // the value can be set to friendlyname
+                [transposedFirstColumnField]: column.columnId,
+                [transposedFirstColumnHeader]: column.friendlyName,
+            };
+            for (let row of rowNodes) {
+                // [transposed-by-column-value[n]]: [other column value[n]]
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
+                // row[column.field]
+                let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
+                if (value instanceof Date) {
+                    value = value.toLocaleString();
+                }
+                transposedRow[key] = value;
+            }
+            transposedRows.push(transposedRow);
+        }
+        return {
+            transposedColumns,
+            transposedRows,
+        };
+    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
+    React.useEffect(() => {
+        // Mounting in an effect, so the nodes are rendered/available
+        const hostAdaptableOptions = adaptable.adaptableOptions;
+        const adaptableOptions = {
+            primaryKey: transposedFirstColumnField,
+            licenseKey: hostAdaptableOptions.licenseKey,
+            userName: `${hostAdaptableOptions.userName}`,
+            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
+            containerOptions: {
+                adaptableContainer: adaptableContainerId,
+                agGridContainer: agGridContainerId,
+            },
+            entitlementOptions: {
+                defaultAccessLevel: 'Hidden',
+            },
+            layoutOptions: {
+                createDefaultLayout: false,
+                autoSizeColumnsInLayout: autosize,
+            },
+            predefinedConfig: {
+                Layout: {
+                    Revision: Date.now(),
+                    CurrentLayout: 'TransposedView',
+                    Layouts: [
+                        {
+                            Name: 'TransposedView',
+                            Columns: [
+                                transposedFirstColumnHeader,
+                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                            ],
+                            PinnedColumnsMap: {
+                                [transposedFirstColumnHeader]: 'left',
+                            },
+                        },
+                    ],
+                },
+                Theme: {
+                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
+                },
+            },
+        };
+        const firstColumn = {
+            field: transposedFirstColumnHeader,
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
+        };
+        const agGridOptions = {
+            suppressLoadingOverlay: true,
+            defaultColDef: {
+                floatingFilter: false,
+                filter: false,
+                sortable: true,
+                resizable: true,
+                enableRowGroup: false,
+                editable: false,
+                enablePivot: false,
+                enableValue: false,
+                lockPinned: true,
+                menuTabs: [],
+                width: 120,
+            },
+            columnDefs: [
+                {
+                    field: transposedFirstColumnField,
+                    hide: true,
+                },
+                firstColumn,
+                ...transposedRowsAndColumns.transposedColumns.map((col) => {
+                    return {
+                        field: col.colId,
+                        type: null,
+                        headerName: col.header,
+                    };
+                }),
+            ],
+            rowData: transposedRowsAndColumns.transposedRows,
+            sideBar: false,
+        };
+        const modules = adaptable.getAgGridRegisteredModules();
+        let transposedAdaptableApi;
+        (async () => {
+            transposedAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
+            adaptable.api.eventApi.on('ThemeChanged', (event) => {
+                transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            });
+        })();
+        return () => {
+            if (transposedAdaptableApi) {
+                transposedAdaptableApi.destroy();
+            }
+        };
+    }, [syntheticTransposedByColumnId]);
+    /**
+     * Need to get all data, manualy pivot the grid using the primary key.
+     *
+     * 1. get the data, and pivot using the primary key
+     * 2. create the col definitios, a col definition for each row
+     * 3. create the grid
+     */
+    return (React.createElement(Flex, { flexDirection: "column", width: "100%", height: "100%" },
+        React.createElement(Panel, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Elevated Column" },
+                    React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
+                        } })))),
+        React.createElement(Flex, { height: "100%" },
+            React.createElement(Box, { id: "transposed-adaptable-container" }),
+            React.createElement(Box, { height: "100%", width: "100%", id: "transposed-adaptable-ag-grid-container" }))));
+};

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

@@ -14,6 +14,8 @@ import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionV
 import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
 import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
+import { areSummaryRowsValid, RowSummarySection } from './sections/RowSummarySection';
+import { WEIGHTED_AVERAGE_AGGREATED_FUNCTION } from '../../../PredefinedConfig/Common/RowSummary';
 export const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = useDispatch();
@@ -27,14 +29,16 @@ export const LayoutWizard = (props) => {
             preparedLayout = cloneObject(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
+                delete preparedLayout.Uuid;
             }
         }
         else {
             preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
-            preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.api.gridApi.getAgGridInstance().suppressAggFuncInHeader;
+            preparedLayout.SuppressAggFuncInHeader = !!adaptable.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('suppressAggFuncInHeader');
         }
         return preparedLayout;
     });
@@ -101,6 +105,7 @@ export const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
+                isValid: areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
@@ -113,7 +118,37 @@ export const LayoutWizard = (props) => {
                 renderSummary: () => React.createElement(AggregationsSectionSummary, null),
                 isValid: (data) => isAggregationsSectionValid(data),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection, { onChange: setLayout }))),
+                    React.createElement(AggregationsSection, { onChange: (layout) => {
+                            let newLayout = cloneObject(layout);
+                            // if we do not have an weighted avg col, we need to clear the row summary if one exists
+                            if (newLayout.RowSummaries) {
+                                newLayout.RowSummaries = newLayout.RowSummaries.map((rowSummary) => {
+                                    return Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
+                                            if (
+                                            // see if it is weighted avg
+                                            aggFunc === WEIGHTED_AVERAGE_AGGREATED_FUNCTION &&
+                                                // see if we have a weight in the agg columns
+                                                newLayout.AggregationColumns[columnId] &&
+                                                (typeof newLayout.AggregationColumns[columnId] !== 'object' ||
+                                                    newLayout.AggregationColumns[columnId].weightColumnId)) {
+                                                // need to remove the row summary
+                                                return acc;
+                                            }
+                                            acc[columnId] = aggFunc;
+                                            return acc;
+                                        }, {}) });
+                                });
+                            }
+                            setLayout(newLayout);
+                        } }))),
+            },
+            {
+                title: 'Row Summaries',
+                details: 'Configure Row Summaries',
+                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
+                isVisible: () => layoutSupportedFeatures.RowSummaries,
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowSummarySection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',

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

@@ -170,7 +170,7 @@ const ColumnRow = (props) => {
                     React.createElement(FormRow, { label: "ColumnId" },
                         React.createElement(Tag, null, props.column.columnId)),
                     React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placeholder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },

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

@@ -52,7 +52,7 @@ export const FilterSection = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(FormLayout, { mb: 2 },
                 React.createElement(FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
+                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {