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

package/src/Utilities/ObjectFactory.js

@@ -18,7 +18,7 @@ export function CreateAdaptableComment(text, api) {
     };
     return comment;
 }
-export function CreateEmptyCalculatedColumn() {
+export function CreateEmptyCalculatedColumn(defaultSpecialColumnSettings) {
     return {
         Uuid: createUuid(),
         ColumnId: EMPTY_STRING,
@@ -26,17 +26,7 @@ export function CreateEmptyCalculatedColumn() {
             ScalarExpression: EMPTY_STRING,
         },
         // need to create some defaults - which we will change later
-        CalculatedColumnSettings: {
-            DataType: undefined,
-            Filterable: true,
-            Resizable: true,
-            Groupable: false,
-            Sortable: true,
-            Pivotable: false,
-            Aggregatable: false,
-            SuppressMenu: false,
-            SuppressMovable: false,
-        },
+        CalculatedColumnSettings: Object.assign(Object.assign({}, defaultSpecialColumnSettings), { DataType: undefined }),
     };
 }
 export function CreateEmptyNamedQuery(expression) {
@@ -245,24 +235,14 @@ export function CreateEmptyFormatColumn() {
         CellAlignment: undefined,
     };
 }
-export function CreateEmptyFreeTextColumn() {
+export function CreateEmptyFreeTextColumn(defaultSpecialColumnSettings) {
     return {
         Uuid: createUuid(),
         ColumnId: EMPTY_STRING,
         DefaultValue: EMPTY_STRING,
         FreeTextStoredValues: [],
         TextEditor: 'Inline',
-        FreeTextColumnSettings: {
-            DataType: 'String',
-            Filterable: true,
-            Resizable: true,
-            Groupable: false,
-            Sortable: true,
-            Pivotable: false,
-            Aggregatable: false,
-            SuppressMenu: false,
-            SuppressMovable: false,
-        },
+        FreeTextColumnSettings: Object.assign(Object.assign({}, defaultSpecialColumnSettings), { DataType: 'String' }),
     };
 }
 export function CreateEmptyLayout(layout, adaptableColumns) {

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

@@ -22,5 +22,6 @@ export declare class AggregatedScalarLiveValue {
     getAllAggregationValues(): number[];
     private getAggregationValue;
     getGlobalAggregatedValue(): any;
+    private getRowNodeValueForColumnId;
     private computeAggregatedValue;
 }

package/src/Utilities/Services/AggregatedScalarLiveValue.js

@@ -60,7 +60,7 @@ export class AggregatedScalarLiveValue {
         var _a, _b;
         if ((_a = this.expressionEvaluation.aggregationParams.groupBy) === null || _a === void 0 ? void 0 : _a.length) {
             const groupColumns = this.expressionEvaluation.aggregationParams.groupBy.map((groupByParam) => groupByParam.field);
-            const groupKeys = groupColumns.map((groupColumnName) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, groupColumnName));
+            const groupKeys = groupColumns.map((groupColumnName) => this.getRowNodeValueForColumnId(rowNode, groupColumnName));
             return (_b = this.aggregationResult.deepMap.get(groupKeys)) === null || _b === void 0 ? void 0 : _b.reducerResults[this.aggregationReducerName];
         }
         return this.getGlobalAggregatedValue();
@@ -68,6 +68,11 @@ export class AggregatedScalarLiveValue {
     getGlobalAggregatedValue() {
         return this.aggregationResult.reducerResults[this.aggregationReducerName];
     }
+    getRowNodeValueForColumnId(rowNode, columnId) {
+        const rawValue = this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, columnId);
+        // we need to convert the Date object to a number, otherwise the grouping will not work (each Date instance is unique)
+        return rawValue instanceof Date ? rawValue.getTime() : rawValue;
+    }
     computeAggregatedValue(expressionEvaluation) {
         var _a;
         const gridRowNodes = expressionEvaluation.getRowNodes
@@ -77,18 +82,16 @@ export class AggregatedScalarLiveValue {
             });
         // we iterate over the RowNode list (we need this to handle complex column values (nested values, valueGetters etc)
         // so we will map the fieldNames to RowNode.data
-        const mapReducerValueGetter = (fieldName) => {
-            return (rowNode) => {
-                return this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
-            };
+        const mapReducerValueGetter = (columnId) => {
+            return (rowNode) => this.getRowNodeValueForColumnId(rowNode, columnId);
         };
         Object.values(expressionEvaluation.aggregationParams.reducers).forEach((aggregationReducer) => {
             aggregationReducer.getter = mapReducerValueGetter(aggregationReducer.field);
             // nullify the field to force the fallback on the getter fn
             aggregationReducer.field = null;
         });
-        const mapGroupByToKey = (fieldName) => {
-            return (_unusableProperty, rowNode) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
+        const mapGroupByToKey = (columnId) => {
+            return (_unusableProperty, rowNode) => this.getRowNodeValueForColumnId(rowNode, columnId);
         };
         (_a = expressionEvaluation.aggregationParams.groupBy) === null || _a === void 0 ? void 0 : _a.forEach((groupByDef) => {
             groupByDef.toKey = mapGroupByToKey(groupByDef.field);
@@ -96,11 +99,10 @@ export class AggregatedScalarLiveValue {
         let aggregatedRowNodes = gridRowNodes;
         if (expressionEvaluation.sortByColumn) {
             const sortByColumn = expressionEvaluation.sortByColumn;
-            const getRowNodeValue = (rowNode, columnId) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, columnId);
             // currently, we support only ascending sorting
             aggregatedRowNodes.sort((first, second) => {
-                const firstValue = getRowNodeValue(first, sortByColumn);
-                const secondValue = getRowNodeValue(second, sortByColumn);
+                const firstValue = this.getRowNodeValueForColumnId(first, sortByColumn);
+                const secondValue = this.getRowNodeValueForColumnId(second, sortByColumn);
                 if (firstValue < secondValue) {
                     return -1;
                 }

package/src/Utilities/Services/CellPopupService.js

@@ -74,7 +74,7 @@ export class CellPopupService {
             this.hidePopup();
             return;
         }
-        const cellNotes = this.adaptable.api.noteApi.getCellNotes(cellPosition);
+        const cellNotes = this.adaptable.api.noteApi.getNotesForCell(cellPosition);
         const cellComments = this.adaptable.api.commentApi.getCommentThread(cellPosition);
         const hasNotesOrComments = (cellNotes === null || cellNotes === void 0 ? void 0 : cellNotes.length) || cellComments;
         // call only if it is different
@@ -92,7 +92,7 @@ export class CellPopupService {
             return;
         }
         // if open but this has no note, close
-        const cellNotes = this.adaptable.api.noteApi.getCellNotes(cellAddress);
+        const cellNotes = this.adaptable.api.noteApi.getNotesForCell(cellAddress);
         const cellComments = this.adaptable.api.commentApi.getCommentThread(cellAddress);
         const hasNotesOrComments = (cellNotes === null || cellNotes === void 0 ? void 0 : cellNotes.length) || cellComments;
         if (openCellAddress && !hasNotesOrComments) {

package/src/Utilities/Services/ModuleService.js

@@ -101,6 +101,8 @@ export class ModuleService {
                 return learnUrl + 'handbook-exporting';
             case 'ColumnFilter':
                 return learnUrl + 'handbook-column-filter';
+            case 'Comment':
+                return learnUrl + 'handbook-comments';
             case 'GridFilter':
                 return learnUrl + 'handbook-grid-filter';
             case 'FlashingCell':
@@ -113,6 +115,8 @@ export class ModuleService {
                 return learnUrl + 'handbook-monitoring-grid-info';
             case 'Layout':
                 return learnUrl + 'handbook-layouts';
+            case 'Note':
+                return learnUrl + 'handbook-notes';
             case 'PlusMinus':
                 return learnUrl + 'handbook-editing-plus-minus';
             case 'NamedQuery':

package/src/Utilities/Services/QueryLanguageService.js

@@ -48,7 +48,7 @@ export class QueryLanguageService {
         const moduleExpressionFunctions = this.getModuleExpressionFunctionsMap(module);
         const booleanAndScalarFunctions = this.getBooleanAndScalarFunctions(moduleExpressionFunctions);
         const reactiveExpression$ = parser.evaluate(reactiveExpression, {
-            node: reactiveExpression,
+            node: this.adaptableApi.gridApi.getFirstRowNode(),
             adaptableApi: this.adaptableApi,
             userName: this.adaptableApi.optionsApi.getUserName(),
             adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
@@ -62,7 +62,7 @@ export class QueryLanguageService {
         const moduleExpressionFunctionsMap = this.getModuleExpressionFunctionsMap(module);
         const booleanAndScalarFunctions = this.getBooleanAndScalarFunctions(moduleExpressionFunctionsMap);
         const aggregationEvaluation = parser.evaluate(aggregationExpression, {
-            node: aggregationExpression,
+            node: this.adaptableApi.gridApi.getFirstRowNode(),
             adaptableApi: this.adaptableApi,
             userName: this.adaptableApi.optionsApi.getUserName(),
             adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),

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/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.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/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" }),

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

@@ -14,6 +14,7 @@ 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 { RowSummarySection } from './sections/RowSummarySection';
 export const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = useDispatch();
@@ -107,6 +108,13 @@ export const LayoutWizard = (props) => {
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
                     React.createElement(RowGroupingSection, { onChange: setLayout }))),
             },
+            {
+                title: 'Row Summaries',
+                details: 'Configure Row Summaries',
+                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowSummarySection, { onChange: setLayout }))),
+            },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.AggregationColumns,

package/src/View/Layout/Wizard/sections/RowSummarySection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const RowGroupingSectionSummary: React.FunctionComponent;
+interface RowSummarySectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const RowSummarySection: React.FunctionComponent<RowSummarySectionProps>;
+export {};