@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.10

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,98 +1,61 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
-import Textarea from '../../components/Textarea';
-import { Icon } from '../../components/icons';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
 import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
 import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonSave } from '../Components/Buttons/ButtonSave';
 import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
 import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { Box, Flex } from '../../components/Flex';
+import Tooltip from '../../components/Tooltip';
 const QueryViewPanelComponent = (props) => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
+    const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            runQuery();
-        }
-    };
     const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
-    const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
-            buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:h-full" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 52,
-                        height: '100%',
-                        paddingTop: 6,
-                        overflow: 'hidden',
-                        zIndex: 100,
-                    }, 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?.Expression, className: "twa:mr-1" })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-            ' ',
-            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { className: "twa:w-full twa:overflow-visible" },
-            ' ',
+    const renderExpressionLabel = () => {
+        const baseClasses = 'twa:font-mono twa:text-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
+        const placeholderClasses = 'twa:text-gray-400 twa:italic';
+        const labelClassName = clsx(baseClasses, {
+            [placeholderClasses]: !expression,
+        });
+        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
+            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter')));
+        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
             buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 60,
-                        paddingTop: 7,
-                        zIndex: 100,
-                        height: '100%',
-                        overflow: 'hidden',
-                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+            expressionLabel,
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
     };
-    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
-        React.createElement(Icon, { name: 'list' })));
+    const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
+    const hasActiveGridFilter = gridFilter != null && hasExpression;
+    const hasNamedQueries = namedQueries && namedQueries.length > 0;
+    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
     const renderButtons = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
-            saveButton,
+        return (React.createElement(React.Fragment, null,
+            clearButton,
             isSuspended ? unSuspendButton : suspendButton,
-            columnsDropdown,
-            namedQuerySelector,
-            ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
-            ' ',
-            React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
-            ' ',
             saveButton,
-            isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
-        React.createElement(Flex, null, renderButtons())));
+    const isToolbar = props.viewType === 'Toolbar';
+    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+            'twa:w-[500px]': isToolbar,
+        }) },
+        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
+        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
+                'twa:pl-1': isToolbar,
+                'twa:pt-1': !isToolbar,
+            }) }, renderButtons())));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

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

@@ -1,82 +1,73 @@
 import * as React from 'react';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { ADAPTABLE_VERSION } from '../../../EnvVars';
+import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
+import { DataSource, InfiniteTableGrid } from '../../../components/InfiniteTable';
 import Panel from '../../../components/Panel';
 import { Tabs } from '../../../components/Tabs';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import Helper from '../../../Utilities/Helpers/Helper';
-import { AdaptablePopover } from '../../AdaptablePopover';
-import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
-import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
-import { ADAPTABLE_VERSION } from '../../../EnvVars';
-import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
 import clsx from 'clsx';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
     const api = props.api;
-    const CreateGridSummaries = (colItems) => {
-        const returnRows = [];
-        const calcColumns = api.calculatedColumnApi
-            .getCalculatedColumns()
-            .map((c) => c.ColumnId);
-        const actionColumns = api.actionColumnApi
-            .getActionColumns()
-            .map((ac) => ac.columnId);
-        const freeTextColumns = api.freeTextColumnApi
-            .getFreeTextColumns()
-            .map((c) => c.ColumnId);
-        const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
-        const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
-        const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
-            ? api.gridApi.getColumnSorts().map((gs) => {
-                return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
-            })
-            : null;
-        const selectedRowInfo = api.gridApi.getSelectedRowInfo();
-        if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', adaptableVersion));
-        }
-        if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AG Grid Version', agGridVersion));
-        }
-        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
-        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?.gridRows.length));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length));
-        returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+    const keyValuePairs = [];
+    const calcColumns = api.calculatedColumnApi
+        .getCalculatedColumns()
+        .map((c) => c.ColumnId);
+    const actionColumns = api.actionColumnApi
+        .getActionColumns()
+        .map((ac) => ac.columnId);
+    const freeTextColumns = api.freeTextColumnApi
+        .getFreeTextColumns()
+        .map((c) => c.ColumnId);
+    const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
+    const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+    const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+        ? api.gridApi.getColumnSorts().map((gs) => {
+            return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+        })
+        : null;
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
+        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+    }
+    if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
+        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+    }
+    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions.createCommaSeparatedString(calcColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
-            : 'None'));
-        return returnRows;
+            : 'None' });
+    const domProps = {
+        className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    const createReadOnlyColItem = (colItems, item1, item2, item3) => {
-        let rowColItems = Helper.cloneObject(colItems);
-        rowColItems[0].Content = item1;
-        rowColItems[1].Content = item2;
-        if (item3) {
-            let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [item3] });
-            rowColItems[2].Content = infoButton;
-        }
-        return rowColItems;
+    keyValuePairs.map((keyValuePair) => {
+        return {
+            Key: keyValuePair.Key,
+            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
+        };
+    })
+        .filter((x) => x.Value);
+    const columnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
-    let propValueColItems = [
-        { Content: 'Property', Size: 5 },
-        { Content: 'Value', Size: 7 },
-    ];
-    let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
-        return React.createElement(AdaptableObjectRow, { key: index, colItems: x });
-    });
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
         React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
@@ -85,7 +76,8 @@ export const GridInfoPopup = (props) => {
                     React.createElement(Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
                     React.createElement(Tabs.Content, null,
                         React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -79,7 +79,7 @@ function mapDispatchToProps(dispatch) {
         showMissingLayoutsError: () => {
             dispatch(PopupRedux.PopupShowConfirmation({
                 Header: 'Missing Layouts',
-                Msg: 'You have not defined any Layout! See the console for more details.',
+                Msg: 'No Layouts have been defined. Please check the console for details.',
                 ConfirmAction: null,
                 ConfirmButtonText: 'OK',
                 CancelButtonText: null,

package/src/View/Layout/TransposedPopup.js

@@ -5,72 +5,153 @@ import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 import { Box, Flex } from '../../components/Flex';
-const adaptableContainerId = `transposed-adaptable-container`;
-const agGridContainerId = `transposed-adaptable-ag-grid-container`;
+import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
+const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
+/** Field used for the first column in transposed grid (hidden, holds column id). */
+const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
+/** Header used for the first visible column in transposed grid (shows friendly name). */
+const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
+function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
+    return {
+        primaryKey: TRANSPOSED_FIRST_COLUMN_FIELD,
+        licenseKey: hostOptions.licenseKey,
+        userName: `${hostOptions.userName}`,
+        adaptableId: `${hostOptions.adaptableId}::TransposedView`,
+        containerOptions: {
+            adaptableContainer: ADAPTABLE_CONTAINER_ID,
+            agGridContainer: AG_GRID_CONTAINER_ID,
+        },
+        entitlementOptions: { defaultAccessLevel: 'Hidden' },
+        initialState: {
+            Layout: {
+                Revision: Date.now(),
+                CurrentLayout: 'TransposedView',
+                Layouts: [
+                    {
+                        Name: 'TransposedView',
+                        TableColumns: [
+                            TRANSPOSED_FIRST_COLUMN_HEADER,
+                            ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                        ],
+                        ColumnPinning: { [TRANSPOSED_FIRST_COLUMN_HEADER]: 'left' },
+                        AutoSizeColumns: true,
+                    },
+                ],
+            },
+            Theme: { CurrentTheme: currentTheme },
+        },
+    };
+}
+function buildTransposedGridOptions({ transposedRowsAndColumns, elevatedColumnId, adaptableApi, }) {
+    const firstColumn = {
+        field: TRANSPOSED_FIRST_COLUMN_HEADER,
+        headerName: adaptableApi.columnApi.getFriendlyNameForColumnId(elevatedColumnId),
+    };
+    return {
+        loading: false,
+        defaultColDef: {
+            floatingFilter: false,
+            filter: false,
+            sortable: true,
+            resizable: true,
+            enableRowGroup: false,
+            editable: false,
+            enablePivot: false,
+            enableValue: false,
+            lockPinned: true,
+            menuTabs: [],
+            width: 120,
+        },
+        columnDefs: [
+            { field: TRANSPOSED_FIRST_COLUMN_FIELD, hide: true },
+            firstColumn,
+            ...transposedRowsAndColumns.transposedColumns.map((col) => ({ field: col.colId, headerName: col.header })),
+        ],
+        rowData: transposedRowsAndColumns.transposedRows,
+        sideBar: false,
+    };
+}
 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, doSetSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
-    const setSyntheticTransposedByColumnId = (syntheticTransposedByColumnId) => {
+    const rawConfig = (props.popupProps ?? {});
+    const transposeConfig = {
+        transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
+        hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
+        autosize: rawConfig.autosize ?? true,
+        columnsToTranspose: rawConfig.columnsToTranspose,
+        rowsToTranspose: rawConfig.rowsToTranspose,
+    };
+    const rowNodes = React.useMemo(() => {
+        let transposableRowNodes = [];
+        const rowsToTranspose = transposeConfig.rowsToTranspose;
+        if (rowsToTranspose === 'VisibleOnly') {
+            return adaptable.api.gridApi.getVisibleRowNodes();
+        }
+        if (rowsToTranspose === 'All') {
+            return adaptable.api.gridApi.getAllRowNodes();
+        }
+        if (StringExtensions.IsNotNullOrEmpty(rowsToTranspose)) {
+            adaptable.api.gridApi.getAllRowNodes().forEach((rn) => {
+                const shouldTransposeRow = adaptable.api.internalApi
+                    .getQueryLanguageService()
+                    .evaluateBooleanExpression(rowsToTranspose, ExportModuleId, rn);
+                if (shouldTransposeRow) {
+                    transposableRowNodes.push(rn);
+                }
+            });
+            return transposableRowNodes;
+        }
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [transposeConfig.rowsToTranspose, adaptable.api]);
+    const [elevatedColumnId, setElevatedColumnIdState] = React.useState(() => transposeConfig.transposedColumnId ?? primaryKey);
+    const setElevatedColumnId = (newElevatedColumnId) => {
         transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
-        doSetSyntheticTransposedByColumnId(syntheticTransposedByColumnId);
+        setElevatedColumnIdState(newElevatedColumnId);
     };
     const transposedAdaptableApiRef = React.useRef(null);
     const columns = React.useMemo(() => {
-        // customisable
-        return visibleColumns
-            ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getUIAvailableColumns();
-    }, []);
+        const allUIColumns = adaptable.api.columnApi.getUIAvailableColumns();
+        const columnsToTranspose = transposeConfig.columnsToTranspose;
+        if (!columnsToTranspose) {
+            return allUIColumns;
+        }
+        const columnIds = typeof columnsToTranspose === 'function'
+            ? columnsToTranspose({
+                ...adaptable.api.internalApi.buildBaseContext(),
+                columns: allUIColumns,
+            })
+            : columnsToTranspose;
+        return columnIds
+            .map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
+            .filter((col) => col != null);
+    }, [transposeConfig.columnsToTranspose, adaptable.api]);
     /**
-     * This is used as first field
+     * Build transposed structure: original rows become columns (colId = primaryKey value),
+     * original columns become rows. Each transposed row has the column id/header plus
+     * one cell per original row keyed by primaryKey value.
      */
-    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,
-            });
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, elevatedColumnId) + '';
+            transposedColumns.push({ colId, header });
         }
         for (const column of columns) {
-            /**
-             * We can hide the transposed column, if we want
-             */
-            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
+            if (transposeConfig.hideTransposedColumn &&
+                column.columnId === elevatedColumnId) {
                 continue;
             }
             const transposedRow = {
-                // [transposed-by-column-id]: [other column id],
-                // the value can be set to friendlyname
-                [transposedFirstColumnField]: column.columnId,
-                [transposedFirstColumnHeader]: column.friendlyName,
+                [TRANSPOSED_FIRST_COLUMN_FIELD]: column.columnId,
+                [TRANSPOSED_FIRST_COLUMN_HEADER]: column.friendlyName,
             };
-            for (let row of rowNodes) {
-                // [transposed-by-column-value[n]]: [other column value[n]]
+            for (const row of rowNodes) {
                 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();
@@ -79,90 +160,25 @@ export const TransposedPopup = (props) => {
             }
             transposedRows.push(transposedRow);
         }
-        return {
-            transposedColumns,
-            transposedRows,
-        };
-    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
+        return { transposedColumns, transposedRows };
+    }, [rowNodes, primaryKey, elevatedColumnId, columns, transposeConfig.hideTransposedColumn, adaptable.api]);
     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',
-            },
-            initialState: {
-                Layout: {
-                    Revision: Date.now(),
-                    CurrentLayout: 'TransposedView',
-                    Layouts: [
-                        {
-                            Name: 'TransposedView',
-                            TableColumns: [
-                                transposedFirstColumnHeader,
-                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
-                            ],
-                            ColumnPinning: {
-                                [transposedFirstColumnHeader]: 'left',
-                            },
-                            AutoSizeColumns: true,
-                        },
-                    ],
-                },
-                Theme: {
-                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
-                },
-            },
-        };
-        const firstColumn = {
-            field: transposedFirstColumnHeader, // use the column friendly name
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
-        };
-        const agGridOptions = {
-            loading: false,
-            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 hostOptions = adaptable.adaptableOptions;
+        const adaptableOptions = buildTransposedAdaptableOptions({
+            hostOptions,
+            transposedRowsAndColumns,
+            currentTheme: adaptable.api.themeApi.getCurrentTheme(),
+        });
+        const gridOptions = buildTransposedGridOptions({
+            transposedRowsAndColumns,
+            elevatedColumnId,
+            adaptableApi: adaptable.api,
+        });
         const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,
-            gridOptions: agGridOptions,
+            gridOptions,
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
@@ -170,30 +186,20 @@ export const TransposedPopup = (props) => {
                 transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
         });
-    }, [syntheticTransposedByColumnId]);
+    }, [elevatedColumnId, adaptable]);
     React.useEffect(() => {
-        // destroy when closing the popup
         return () => {
             requestAnimationFrame(() => {
                 transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
             });
         };
     }, []);
-    /**
-     * 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", className: "twa:w-full twa:h-full" },
         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(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
         React.createElement(Flex, { className: "twa:h-full" },
-            React.createElement(Box, { id: adaptableContainerId }),
-            React.createElement(Box, { className: "twa:h-full twa:w-full", id: agGridContainerId }))));
+            React.createElement(Box, { id: ADAPTABLE_CONTAINER_ID }),
+            React.createElement(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
 };