@adaptabletools/adaptable 16.1.1-canary.2 → 16.2.0-canary.1

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

@@ -9,6 +9,7 @@ const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const systemFileHandlers_1 = require("../systemFileHandlers");
+const ColumnsSection_1 = require("./sections/ColumnsSection");
 const UploadSection_1 = require("./sections/UploadSection");
 const ValidationSection_1 = require("./sections/ValidationSection");
 const DataImportWizard = (props) => {
@@ -19,6 +20,9 @@ const DataImportWizard = (props) => {
     const [rowData, setRowData] = React.useState(null);
     const [file, setFile] = React.useState(null);
     const [text, setText] = React.useState('');
+    // This needs to be called only when:
+    // - columnsMap changes
+    // - new data is loaded
     const [importType, setImportType] = React.useState('file');
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
     const getPrimaryKeyValue = (rowData) => {
@@ -27,6 +31,50 @@ const DataImportWizard = (props) => {
         }
         return rowData[primaryKey];
     };
+    // ---- COLUMNS ----
+    const [columnsMap, setColumnsMap] = React.useState(null);
+    const mappedRowDataToColumns = React.useMemo(() => {
+        return (rowData !== null && rowData !== void 0 ? rowData : []).map((row) => {
+            // pick only included columns, and need to map to abColumn.field
+            return columnsMap === null || columnsMap === void 0 ? void 0 : columnsMap.reduce((acc, colMap) => {
+                if (colMap.include && colMap.abColumn && colMap.abColumn.field) {
+                    acc[colMap.abColumn.field] = row[colMap.field];
+                }
+                return acc;
+            }, {});
+        });
+    }, [rowData, columnsMap]);
+    const columnsErrors = React.useMemo(() => {
+        return columnsMap
+            ? columnsMap.reduce((acc, colMap) => {
+                if (colMap.include && !colMap.abColumn) {
+                    acc[colMap.field] = `Field ${colMap.field} does not have a coresponding column.`;
+                }
+                return acc;
+            }, {})
+            : null;
+    }, [columnsMap]);
+    const handleNewRowData = React.useCallback((data) => {
+        if (Array.isArray(data)) {
+            setRowData(data);
+            const fields = new Set();
+            data.forEach((row) => {
+                Object.keys(row).forEach((field) => {
+                    fields.add(field);
+                });
+            });
+            const allAbColumns = adaptable.api.columnApi.getColumns();
+            const columnsMap = Array.from(fields).map((field) => {
+                const abColumn = allAbColumns.find((c) => c.field === field);
+                return { field, abColumn, include: true };
+            });
+            setColumnsMap(columnsMap);
+        }
+        else {
+            setRowData(null);
+            setColumnsMap(null);
+        }
+    }, []);
     const handleRowDataChange = React.useCallback((data) => {
         if (Array.isArray(data)) {
             setRowData(data);
@@ -38,7 +86,7 @@ const DataImportWizard = (props) => {
     const handleChangeImportType = React.useCallback((importType) => {
         setImportType(importType);
         // clear data
-        handleRowDataChange(null);
+        handleNewRowData(null);
         setFile(null);
         setText('');
     }, []);
@@ -63,7 +111,7 @@ const DataImportWizard = (props) => {
         try {
             const data = await handler.handleFile(file);
             setFile(file);
-            handleRowDataChange(data);
+            handleNewRowData(data);
             return data;
         }
         catch (_c) {
@@ -101,7 +149,7 @@ const DataImportWizard = (props) => {
             try {
                 textRawData = await textHandler(text);
                 if (Array.isArray(textRawData)) {
-                    handleRowDataChange(textRawData);
+                    handleNewRowData(textRawData);
                     setTextError('');
                 }
                 else {
@@ -109,7 +157,7 @@ const DataImportWizard = (props) => {
                 }
             }
             catch (_b) {
-                handleRowDataChange(null);
+                handleNewRowData(null);
                 setTextError('Error parsing text');
             }
         }
@@ -134,11 +182,8 @@ const DataImportWizard = (props) => {
         }, {});
     }, [rowData])) !== null && _a !== void 0 ? _a : {};
     const [skipInvalidRows, setSkipInvalidRows] = React.useState(false);
-    const handleValidationDataChange = (data) => {
-        handleRowDataChange(data);
-    };
     const handleFinish = () => {
-        const validData = rowData.filter((row) => {
+        const validData = mappedRowDataToColumns.filter((row) => {
             const rowErrors = errors[getPrimaryKeyValue(row)];
             return !rowErrors || rowErrors.length === 0;
         });
@@ -164,6 +209,23 @@ const DataImportWizard = (props) => {
                         text: text, onTextChange: handleTextChange, textMessage: textMessage }));
                 },
             },
+            {
+                title: 'Columns',
+                isValid: () => {
+                    if (columnsErrors && Object.keys(columnsErrors).length > 0) {
+                        return 'Some fields do not have a corresponding column.';
+                    }
+                    if (!(columnsMap === null || columnsMap === void 0 ? void 0 : columnsMap.some((map) => { var _a; return ((_a = map === null || map === void 0 ? void 0 : map.abColumn) === null || _a === void 0 ? void 0 : _a.field) === primaryKey; }))) {
+                        return 'You need to select a column for the primary key.';
+                    }
+                    return true;
+                },
+                render: () => {
+                    return (React.createElement(ColumnsSection_1.ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
+                            setColumnsMap(columnsMap);
+                        } }));
+                },
+            },
             {
                 title: 'Validation',
                 details: 'Check the Data is Valid',
@@ -175,7 +237,7 @@ const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, onDataChange: handleValidationDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
                 },
             },
         ] }));

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ColumnsMap } from '../DataImportWizard';
+interface ColumnsSectionProps {
+    columnsMap: ColumnsMap[] | null;
+    onColumnsChange: (columns: ColumnsMap[]) => void;
+}
+export declare const ColumnsSection: React.FunctionComponent<ColumnsSectionProps>;
+export {};

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

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptablePopover_1 = require("../../../AdaptablePopover");
+const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 300,
+        flex: 1,
+    },
+};
+const ColumnsSection = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const primaryKey = api.optionsApi.getPrimaryKey();
+    const allColumns = React.useMemo(() => {
+        return api.columnApi
+            .getColumns()
+            .filter((col) => col.field)
+            .map((column) => ({
+            label: column.friendlyName,
+            value: column,
+        }));
+    }, []);
+    const handleColumnMapChange = (newColMap) => {
+        var _a;
+        props.onColumnsChange((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.map((cm) => {
+            if (cm.field === newColMap.field) {
+                return Object.assign(Object.assign({}, cm), newColMap);
+            }
+            return cm;
+        }));
+    };
+    const columns = React.useMemo(() => {
+        return {
+            include: {
+                field: 'include',
+                header: 'Included',
+                maxWidth: 110,
+                align: 'center',
+                render: (params) => {
+                    var _a, _b;
+                    return (React.createElement(CheckBox_1.CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
+                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { include: checked }));
+                        }, checked: Boolean(params.data.include) }));
+                },
+            },
+            field: {
+                field: 'field',
+                header: 'Data Field',
+            },
+            abColumn: {
+                header: 'AdapTable Column',
+                render: (params) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    // filter out used columns
+                    const availableColumns = allColumns
+                        .filter((c) => { var _a; return !((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.find((cm) => cm.abColumn === c.value)); })
+                        .map((col) => {
+                        return Object.assign(Object.assign({}, col), { onClick: () => {
+                                handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: col.value, include: true }));
+                            } });
+                    });
+                    return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
+                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: null, include: false }));
+                        }, width: "100%", columns: ['label'], items: availableColumns }, (_f = (_c = (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.friendlyName) !== null && _c !== void 0 ? _c : (_e = (_d = params.data) === null || _d === void 0 ? void 0 : _d.abColumn) === null || _e === void 0 ? void 0 : _e.columnId) !== null && _f !== void 0 ? _f : 'Select Column'));
+                },
+            },
+            valid: {
+                header: 'Valid',
+                maxWidth: 100,
+                minWidth: 90,
+                align: 'center',
+                render: (row) => {
+                    if (!row.data.abColumn) {
+                        return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
+                    }
+                    const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                },
+            },
+        };
+    }, [props.columnsMap]);
+    if (!props.columnsMap) {
+        return (React.createElement(rebass_1.Box, { p: 2 },
+            React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+                "No Data has been Imported. Go to ",
+                React.createElement(Tag_1.Tag, null, "Upload"),
+                " step and provide Data")));
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
+                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+                            valid: 'end',
+                            type: 'end',
+                        }, columnTypes: {
+                            default: {
+                                minWidth: 100,
+                                defaultFlex: 1,
+                            },
+                        }, domProps: tableDOMProps, columns: columns }))))));
+};
+exports.ColumnsSection = ColumnsSection;
+exports.ColumnsSection.displayName = 'ColumnsSection';

package/src/View/DataImport/DataImportWizard/sections/DataPreview.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ValidationErrorsMap } from '../DataImportWizard';
+import { ColumnsMap, ValidationErrorsMap } from '../DataImportWizard';
 interface DataPreviewProps {
     data?: Record<string, unknown>[];
     onDataChange?: (data: Record<string, unknown>[]) => void;
     errors: ValidationErrorsMap | null;
     editable?: boolean;
+    columnsMap?: ColumnsMap[] | null;
 }
 export declare const DataPreview: React.FunctionComponent<DataPreviewProps>;
 export {};

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

@@ -43,15 +43,9 @@ const DataPreview = (props) => {
             " step and provide Data"));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    const dataSample = props.data[0];
     const columns = React.useMemo(() => {
-        if (!dataSample) {
-            return {};
-        }
-        const adaptableColumnsInData = adaptable.api.columnApi.getColumns().filter((c) => {
-            var _a;
-            return dataSample && ((_a = c.field) !== null && _a !== void 0 ? _a : c.columnId) in dataSample;
-        });
+        var _a;
+        const mappedAdaptableColumns = (_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.filter((map) => map.include && map.abColumn);
         const mapDataType = (dataType) => {
             switch (dataType) {
                 case 'Boolean':
@@ -69,23 +63,25 @@ const DataPreview = (props) => {
             }
             return rowData[primaryKey];
         };
-        const infiniteColumns = adaptableColumnsInData.reduce((acc, column) => {
-            const isPrimaryKey = column.columnId === primaryKey;
+        const infiniteColumns = mappedAdaptableColumns.reduce((acc, colMap) => {
+            var _a;
+            const isPrimaryKey = ((_a = colMap === null || colMap === void 0 ? void 0 : colMap.abColumn) === null || _a === void 0 ? void 0 : _a.columnId) === primaryKey;
             let editable = !isPrimaryKey;
             if (props.editable !== undefined && !isPrimaryKey) {
                 editable = props.editable;
             }
-            acc[column.columnId] = {
-                field: column.field,
-                header: adaptable.api.columnApi.getFriendlyNameForColumnId(column.columnId),
-                dataType: mapDataType(column.dataType),
+            const abColumn = colMap.abColumn;
+            acc[colMap.field] = {
+                field: colMap.field,
+                header: adaptable.api.columnApi.getFriendlyNameForColumnId(colMap.abColumn.columnId),
+                dataType: mapDataType(abColumn.dataType),
                 defaultEditable: editable,
                 valueGetter: (params) => {
-                    if (column.dataType === 'Boolean') {
-                        return params.data[column.columnId] ? 'True' : 'False';
+                    if (abColumn.dataType === 'Boolean') {
+                        return params.data[colMap.field] ? 'True' : 'False';
                     }
                     else {
-                        return params.data[params.field];
+                        return params.data[colMap.field];
                     }
                 },
             };

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ValidationErrorsMap } from '../DataImportWizard';
+import { ColumnsMap, ValidationErrorsMap } from '../DataImportWizard';
 interface ValidationSectionProps {
     data?: Record<string, unknown>[];
     onDataChange?: (data: Record<string, unknown>[]) => void;
     errors: ValidationErrorsMap | null;
     skipInvalidRows: boolean;
     onSkipInvalidRowsChange: (skipInvalidRows: boolean) => void;
+    columnsMap: ColumnsMap[] | null;
 }
 export declare const ValidationSection: React.FunctionComponent<ValidationSectionProps>;
 export {};

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

@@ -30,6 +30,6 @@ const ValidationSection = (props) => {
         React.createElement(Tabs_1.Tabs, { flex: 1 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(DataPreview_1.DataPreview, { data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
+                React.createElement(DataPreview_1.DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
 };
 exports.ValidationSection = ValidationSection;

package/src/View/QuickSearch/QuickSearchInput.js

@@ -17,6 +17,6 @@ const QuickSearchInput = (props) => {
         QuickSearchText,
         onRunQuickSearch,
     });
-    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: '7rem' } }));
+    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: '10rem' } }));
 };
 exports.QuickSearchInput = QuickSearchInput;

package/src/components/Dashboard/Dashboard.d.ts

@@ -9,6 +9,7 @@ export declare type DashboardProps = {
     children: ReactElement<DashboardTabProps>[];
     left: ReactNode;
     right: ReactNode;
+    footer: ReactNode;
     canFloat: boolean;
     onShowDashboardPopup?: () => void;
     activeTabIndex?: number;

package/src/components/Dashboard/Dashboard.js

@@ -78,6 +78,7 @@ function Dashboard(props) {
         // @ts-ignore
         ref: targetRef, className: (0, join_1.default)(`ab-Dashboard`, collapsed ? 'ab-Dashboard--collapsed' : '', floating ? 'ab-Dashboard--floating' : '', inline ? 'ab-Dashboard--inline' : ''), style: floating ? floatingStyle : undefined },
         expanded && inline ? renderHomeToolbar() : renderBar(),
-        expanded && children && children.length ? (React.createElement("div", { className: "ab-Dashboard__content" }, children[activeTabIndex] ? children[activeTabIndex].props.children : null)) : null));
+        expanded && children && children.length ? (React.createElement("div", { className: "ab-Dashboard__content" }, children[activeTabIndex] ? children[activeTabIndex].props.children : null)) : null,
+        props.footer));
 }
 exports.Dashboard = Dashboard;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -21,7 +21,7 @@ const ModuleManager = (props) => {
     const unusedItems = React.useMemo(() => availableItems
         .map((t) => t.Id)
         .filter((item) => {
-        return !tabs.some((tab) => tab.Items.includes(item));
+        return !tabs.some((tab) => { var _a; return (_a = tab.Items) === null || _a === void 0 ? void 0 : _a.includes(item); });
     }), [tabs, availableItems]);
     const handleToolbarDragEnd = (result) => {
         const { source, destination, draggableId } = result;

package/src/components/DragAndDropContext/TabList.js

@@ -33,7 +33,7 @@ function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, di
 }
 exports.TabItem = TabItem;
 function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, Object.assign({ className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' }),
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, Object.assign({ className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' }), toolbars === null || toolbars === void 0 ? void 0 :
         toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
         provided.placeholder))));
 }

package/src/components/ExpressionEditor/editorButtonsObservable.js

@@ -12,6 +12,16 @@ exports.editorButtonsObservable = [
         data: 'GRID_CHANGE()',
         text: 'GridChange',
     },
+    {
+        functionName: 'ROW_ADDED',
+        data: 'ROW_ADDED()',
+        text: 'RowAdded',
+    },
+    {
+        functionName: 'ROW_REMOVED',
+        data: 'ROW_REMOVED()',
+        text: 'RowRemoved',
+    },
     {
         functionName: 'COUNT',
         data: 'COUNT()',

package/src/metamodel/adaptable.metamodel.d.ts

@@ -2308,6 +2308,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    DataImportValidationError: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     DataSet: {
         name: string;
         kind: string;
@@ -4078,6 +4088,16 @@ export declare const ADAPTABLE_METAMODEL: {
             defVal?: undefined;
         })[];
     };
+    PreprocessDataContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     PreProcessExportContext: {
         name: string;
         kind: string;