@adaptabletools/adaptable 16.0.0-canary.8 → 16.0.0

package/src/Strategy/FormatColumnModule.js

@@ -44,7 +44,6 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return this.api.queryApi.internalApi.getReferencedNamedQueryNames(queryExpression);
     }
     updateOldConfig() {
-        this.updateConditionalStylesColumnsOldConfig();
         this.updateFormatColumnSingleToMultiplePredicates();
         // update ConditionalStyle StatusBarPanel
         const oldStatusBars = this.api.internalApi.getState().StatusBar.StatusBars;
@@ -89,31 +88,6 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             }
         });
     }
-    updateConditionalStylesColumnsOldConfig() {
-        var _a;
-        const oldConditionalStyles = (_a = this.api.internalApi.getState().ConditionalStyle) === null || _a === void 0 ? void 0 : _a.ConditionalStyles;
-        if (!(oldConditionalStyles === null || oldConditionalStyles === void 0 ? void 0 : oldConditionalStyles.length)) {
-            return;
-        }
-        this.api.logWarn(`DEPRECATED: Conditional Styles have been merged into 'Format Columns'`);
-        // remove conditional styles
-        this.api.internalApi.deleteConditionalStyles(oldConditionalStyles);
-        const transformedFormatColumns = oldConditionalStyles.map((conditionalStyle) => {
-            const formatColumn = {
-                Scope: conditionalStyle.Scope,
-                Style: conditionalStyle.Style,
-                IncludeGroupedRows: conditionalStyle.IncludeGroupedRows,
-            };
-            if ('Rule' in conditionalStyle && conditionalStyle.Rule.Predicate) {
-                formatColumn.Rule = {
-                    Predicates: [conditionalStyle.Rule.Predicate],
-                };
-            }
-            return formatColumn;
-        });
-        // add as format column
-        this.api.formatColumnApi.addFormatColumns(transformedFormatColumns);
-    }
     addColumnMenuItems(column) {
         let returnColumnMenuItems = [];
         if (column && this.isModuleEditable() && !column.isSparkline) {
@@ -146,11 +120,13 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     subItems: [createFormatColumnMenuItem, editFormatColumnMenuItem],
                 });
                 // if more than one then display a Create and a Show
-                // we should probably do the Show better - perhaps use Column Info in some way? 
+                // we should probably do the Show better - perhaps use Column Info in some way?
                 // or to filter the format columns ?
             }
             else {
-                const moduleInfo = this.api.internalApi.getModuleService().getModuleInfoByModule('FormatColumn');
+                const moduleInfo = this.api.internalApi
+                    .getModuleService()
+                    .getModuleInfoByModule('FormatColumn');
                 const editFormatColumnMenuItem = this.createColumnMenuItemReduxAction('Show Current', this.moduleInfo.Glyph, PopupRedux.PopupShowScreen('FormatColumn', moduleInfo.Popup));
                 returnColumnMenuItems.push({
                     label: 'Format Column',

package/src/Utilities/Constants/ModuleConstants.d.ts

@@ -33,6 +33,8 @@ export declare const Glue42ModuleId: ModuleConstants;
 export declare const Glue42FriendlyName = "Glue42";
 export declare const GridInfoModuleId: ModuleConstants;
 export declare const GridInfoFriendlyName = "Grid Info";
+export declare const CommentsModuleId: ModuleConstants;
+export declare const CommentsFriendlyName = "Comments";
 export declare const IPushPullModuleId: ModuleConstants;
 export declare const IPushPullFriendlyName = "IPushPull";
 export declare const LayoutModuleId: ModuleConstants;
@@ -102,4 +104,5 @@ export declare const ADAPTABLE_MODULE_MAP: {
     ToolPanel: string;
     SettingsPanel: string;
     StatusBar: string;
+    Comments: string;
 };

package/src/Utilities/Constants/ModuleConstants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShortcutFriendlyName = exports.ShortcutModuleId = exports.ScheduleFriendlyName = exports.ScheduleModuleId = exports.QuickSearchFriendlyName = exports.QuickSearchModuleId = exports.QueryFriendlyName = exports.QueryModuleId = exports.PlusMinusFriendlyName = exports.PlusMinusModuleId = exports.OpenFinFriendlyName = exports.OpenFinModuleId = exports.LayoutFriendlyName = exports.LayoutModuleId = exports.IPushPullFriendlyName = exports.IPushPullModuleId = exports.GridInfoFriendlyName = exports.GridInfoModuleId = exports.Glue42FriendlyName = exports.Glue42ModuleId = exports.FreeTextColumnFriendlyName = exports.FreeTextColumnModuleId = exports.FormatColumnFriendlyName = exports.FormatColumnModuleId = exports.FilterFriendlyName = exports.FilterModuleId = exports.Fdc3FriendlyName = exports.Fdc3ModuleId = exports.ExportFriendlyName = exports.ExportModuleId = exports.DataSetFriendlyName = exports.DataSetModuleId = exports.DataChangeHistoryFriendlyName = exports.DataChangeHistoryModuleId = exports.DashboardFriendlyName = exports.DashboardModuleId = exports.CustomSortFriendlyName = exports.CustomSortModuleId = exports.ChartingFriendlyName = exports.ChartingModuleId = exports.CellSummaryFriendlyName = exports.CellSummaryModuleId = exports.CalculatedColumnFriendlyName = exports.CalculatedColumnModuleId = exports.BulkUpdateFriendlyName = exports.BulkUpdateModuleId = exports.FlashingCellFriendlyName = exports.FlashingCellModuleId = exports.AlertModuleFriendlyName = exports.AlertModuleId = void 0;
-exports.ADAPTABLE_MODULE_MAP = exports.StatusBarFriendlyName = exports.StatusBarModuleId = exports.SettingsPanelFriendlyName = exports.SettingsPanelModuleId = exports.ToolPanelFriendlyName = exports.ToolPanelModuleId = exports.ThemeFriendlyName = exports.ThemeModuleId = exports.TeamSharingFriendlyName = exports.TeamSharingModuleId = exports.SystemStatusFriendlyName = exports.SystemStatusModuleId = exports.StateManagementFriendlyName = exports.StateManagementModuleId = exports.StyledColumnFriendlyName = exports.StyledColumnModuleId = exports.SmartEditFriendlyName = exports.SmartEditModuleId = void 0;
+exports.ScheduleFriendlyName = exports.ScheduleModuleId = exports.QuickSearchFriendlyName = exports.QuickSearchModuleId = exports.QueryFriendlyName = exports.QueryModuleId = exports.PlusMinusFriendlyName = exports.PlusMinusModuleId = exports.OpenFinFriendlyName = exports.OpenFinModuleId = exports.LayoutFriendlyName = exports.LayoutModuleId = exports.IPushPullFriendlyName = exports.IPushPullModuleId = exports.CommentsFriendlyName = exports.CommentsModuleId = exports.GridInfoFriendlyName = exports.GridInfoModuleId = exports.Glue42FriendlyName = exports.Glue42ModuleId = exports.FreeTextColumnFriendlyName = exports.FreeTextColumnModuleId = exports.FormatColumnFriendlyName = exports.FormatColumnModuleId = exports.FilterFriendlyName = exports.FilterModuleId = exports.Fdc3FriendlyName = exports.Fdc3ModuleId = exports.ExportFriendlyName = exports.ExportModuleId = exports.DataSetFriendlyName = exports.DataSetModuleId = exports.DataChangeHistoryFriendlyName = exports.DataChangeHistoryModuleId = exports.DashboardFriendlyName = exports.DashboardModuleId = exports.CustomSortFriendlyName = exports.CustomSortModuleId = exports.ChartingFriendlyName = exports.ChartingModuleId = exports.CellSummaryFriendlyName = exports.CellSummaryModuleId = exports.CalculatedColumnFriendlyName = exports.CalculatedColumnModuleId = exports.BulkUpdateFriendlyName = exports.BulkUpdateModuleId = exports.FlashingCellFriendlyName = exports.FlashingCellModuleId = exports.AlertModuleFriendlyName = exports.AlertModuleId = void 0;
+exports.ADAPTABLE_MODULE_MAP = exports.StatusBarFriendlyName = exports.StatusBarModuleId = exports.SettingsPanelFriendlyName = exports.SettingsPanelModuleId = exports.ToolPanelFriendlyName = exports.ToolPanelModuleId = exports.ThemeFriendlyName = exports.ThemeModuleId = exports.TeamSharingFriendlyName = exports.TeamSharingModuleId = exports.SystemStatusFriendlyName = exports.SystemStatusModuleId = exports.StateManagementFriendlyName = exports.StateManagementModuleId = exports.StyledColumnFriendlyName = exports.StyledColumnModuleId = exports.SmartEditFriendlyName = exports.SmartEditModuleId = exports.ShortcutFriendlyName = exports.ShortcutModuleId = void 0;
 exports.AlertModuleId = 'Alert';
 exports.AlertModuleFriendlyName = 'Alert';
 exports.FlashingCellModuleId = 'FlashingCell';
@@ -36,6 +36,8 @@ exports.Glue42ModuleId = 'Glue42';
 exports.Glue42FriendlyName = 'Glue42';
 exports.GridInfoModuleId = 'GridInfo';
 exports.GridInfoFriendlyName = 'Grid Info';
+exports.CommentsModuleId = 'Comments';
+exports.CommentsFriendlyName = 'Comments';
 exports.IPushPullModuleId = 'IPushPull';
 exports.IPushPullFriendlyName = 'IPushPull';
 exports.LayoutModuleId = 'Layout';
@@ -105,4 +107,5 @@ exports.ADAPTABLE_MODULE_MAP = {
     [exports.ToolPanelModuleId]: exports.ToolPanelFriendlyName,
     [exports.SettingsPanelModuleId]: exports.SettingsPanelFriendlyName,
     [exports.StatusBarModuleId]: exports.StatusBarFriendlyName,
+    [exports.CommentsModuleId]: exports.CommentsFriendlyName,
 };

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -41,4 +41,5 @@ exports.DEFAULT_NAVIGATION_ITEMS = [
     'Schedule',
     'StateManagement',
     'TeamSharing',
+    'Comments',
 ];

package/src/Utilities/Helpers/AdaptableHelper.d.ts

@@ -10,7 +10,7 @@ export declare function checkValidPrimaryKey(adaptable: IAdaptable): boolean;
 export declare function AdaptableObjectExistsInState(array: AdaptableObject[], itemToCheck: AdaptableObject): boolean;
 export declare function getAppropriateAccessLevel(adaptableObject: AdaptableObject, moduleAccessLevel: AccessLevel): AccessLevel;
 export declare function runAdaptableComparerFunction(columnId: string, columnValues: any[], adaptable: IAdaptable): AdaptableComparerFunction;
-export declare function addAdaptableObjectUuidAndSource(adaptableObject: AdaptableObject): AdaptableObject;
+export declare function addUuidAndSource(adaptableObject: AdaptableObject): AdaptableObject;
 export declare const AdaptableHelper: {
     assignAdaptableOptions: typeof assignAdaptableOptions;
     initPredefinedConfigWithUuids: typeof initPredefinedConfigWithUuids;
@@ -18,6 +18,6 @@ export declare const AdaptableHelper: {
     AdaptableObjectExistsInState: typeof AdaptableObjectExistsInState;
     runAdaptableComparerFunction: typeof runAdaptableComparerFunction;
     getAppropriateAccessLevel: typeof getAppropriateAccessLevel;
-    addUuidAndSource: typeof addAdaptableObjectUuidAndSource;
+    addUuidAndSource: typeof addUuidAndSource;
 };
 export default AdaptableHelper;

package/src/Utilities/Helpers/AdaptableHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableHelper = exports.addAdaptableObjectUuidAndSource = exports.runAdaptableComparerFunction = exports.getAppropriateAccessLevel = exports.AdaptableObjectExistsInState = exports.checkValidPrimaryKey = exports.initPredefinedConfigWithUuids = exports.assignAdaptableOptions = void 0;
+exports.AdaptableHelper = exports.addUuidAndSource = exports.runAdaptableComparerFunction = exports.getAppropriateAccessLevel = exports.AdaptableObjectExistsInState = exports.checkValidPrimaryKey = exports.initPredefinedConfigWithUuids = exports.assignAdaptableOptions = void 0;
 const tslib_1 = require("tslib");
 const cloneDeepWith_1 = tslib_1.__importDefault(require("lodash/cloneDeepWith"));
 const isPlainObject_1 = tslib_1.__importDefault(require("lodash/isPlainObject"));
@@ -140,14 +140,14 @@ function runAdaptableComparerFunction(columnId, columnValues, adaptable) {
     };
 }
 exports.runAdaptableComparerFunction = runAdaptableComparerFunction;
-function addAdaptableObjectUuidAndSource(adaptableObject) {
+function addUuidAndSource(adaptableObject) {
     if (!adaptableObject.Uuid) {
         adaptableObject.Uuid = (0, Uuid_1.createUuid)();
     }
     adaptableObject.Source = 'User';
     return adaptableObject;
 }
-exports.addAdaptableObjectUuidAndSource = addAdaptableObjectUuidAndSource;
+exports.addUuidAndSource = addUuidAndSource;
 exports.AdaptableHelper = {
     assignAdaptableOptions,
     initPredefinedConfigWithUuids,
@@ -155,6 +155,6 @@ exports.AdaptableHelper = {
     AdaptableObjectExistsInState,
     runAdaptableComparerFunction,
     getAppropriateAccessLevel,
-    addUuidAndSource: addAdaptableObjectUuidAndSource,
+    addUuidAndSource,
 };
 exports.default = exports.AdaptableHelper;

package/src/View/AdaptableView.js

@@ -7,6 +7,7 @@ const react_redux_1 = require("react-redux");
 const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
 const Toastify_1 = require("../components/Toastify");
 const PopupRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/PopupRedux"));
+const CommentPopup_1 = require("./Comments/CommentPopup");
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const AdaptablePopup_1 = require("./Components/Popups/AdaptablePopup");
 const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopupConfirmation");
@@ -23,6 +24,7 @@ class AdaptableView extends React.Component {
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
         const adaptableOptions = this.props.AdaptableApi.optionsApi.getAdaptableOptions();
         return (React.createElement("div", null,
+            React.createElement(CommentPopup_1.CommentPopup, null),
             React.createElement(FloatingQuickSearch_1.QuickSearchDrawer, null),
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),

package/src/View/AdaptableViewFactory.js

@@ -31,6 +31,7 @@ const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHist
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
 const ChartingViewPanel_1 = require("./Charting/ChartingViewPanel");
+const CommentListing_1 = require("./Comments/CommentListing");
 exports.AdaptableViewFactory = {
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
@@ -44,6 +45,7 @@ exports.AdaptableViewFactory = {
     ToolPanelPopup: ToolPanelPopup_1.ToolPanelPopup,
     SystemStatusPopup: SystemStatusPopup_1.SystemStatusPopup,
     DataChangeHistoryPopup: DataChangeHistoryPopup_1.DataChangeHistoryPopup,
+    CommentsPopup: CommentListing_1.CommentsListing,
 };
 exports.AdaptableViewPanelFactory = new Map([
     [ModuleConstants.AlertModuleId, AlertViewPanel_1.AlertViewPanelControl],

package/src/View/Comments/CommentListing.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const CommentsListing: React.FunctionComponent;

package/src/View/Comments/CommentListing.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentsListing = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const CommentsRedux_1 = require("../../Redux/ActionsReducers/CommentsRedux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 600,
+    },
+};
+const CommentsListing = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
+    const columnHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
+    const allComments = (0, react_redux_1.useSelector)((state) => (0, CommentsRedux_1.GetCommentsSelector)(state.Comments));
+    const columnsMap = React.useMemo(() => {
+        const columns = {
+            primaryKey: {
+                field: 'PrimaryKeyValue',
+                header: primaryKeyHeader,
+            },
+            column: {
+                field: 'ColumnId',
+                valueGetter: (params) => {
+                    return adaptable.api.columnApi.getFriendlyNameForColumnId(params.data.ColumnId);
+                },
+            },
+            comment: {
+                field: 'Value',
+                header: 'Comment',
+                defaultEditable: true,
+                defaultFlex: 3,
+            },
+            timestamp: {
+                field: 'Timestamp',
+                valueGetter: (params) => {
+                    return new Date(params.data.Timestamp).toDateString();
+                },
+            },
+            author: {
+                header: 'Author',
+                valueGetter: (params) => params.data.Author.UserName,
+            },
+            delete: {
+                defaultWidth: 50,
+                render: (params) => {
+                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { variant: "text", icon: "delete", onClick: () => {
+                            const comment = adaptable.api.commentsApi.getCommentByUuid(params.data.Uuid);
+                            adaptable.api.commentsApi.deleteComment(comment);
+                        } }));
+                },
+            },
+        };
+        return columns;
+    }, []);
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%', width: '100%' } },
+        React.createElement(InfiniteTable_1.DataSource, { data: allComments, primaryKey: "Uuid", onDataMutations: (params) => {
+                for (const mutation of params.mutations) {
+                    const [uuid, changes] = mutation;
+                    for (const change of changes) {
+                        if (change.type === 'update') {
+                            const data = change.data;
+                            const prevComment = allComments.find((x) => x.Uuid === uuid);
+                            if (prevComment.Value !== data.Value) {
+                                adaptable.api.commentsApi.updateCommentText(data.Value, prevComment);
+                            }
+                        }
+                    }
+                }
+            } },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        align: 'start',
+                        defaultFlex: 1,
+                        sortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, rowHeight: 40, columnHeaderHeight: 65, domProps: tableDOMProps, columns: columnsMap }))));
+};
+exports.CommentsListing = CommentsListing;

package/src/View/Comments/CommentPopup.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CommentPopup: () => JSX.Element;

package/src/View/Comments/CommentPopup.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentPopup = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
+const CommentsRedux_1 = require("../../Redux/ActionsReducers/CommentsRedux");
+const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const CellPopup_1 = require("../Components/CellPopup");
+const CommentEditor = ({ comment, onCommentChange, onClose, editMode, isReadonly }) => {
+    const textAreaRef = React.useRef(null);
+    const [liveValue, setLiveValue] = React.useState(comment || '');
+    const throttledOnChange = React.useMemo(() => {
+        const throttled = (0, lodash_1.throttle)((value) => onCommentChange(value), 300);
+        return (value) => {
+            setLiveValue(value);
+            throttled(value);
+        };
+    }, []);
+    React.useEffect(() => {
+        var _a;
+        if (editMode) {
+            (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [editMode]);
+    return (React.createElement(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, width: "100%", minWidth: 180, minHeight: 120, value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }, onChange: (event) => throttledOnChange(event.target.value) }));
+};
+const CommentPopup = () => {
+    var _a;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const cellPopupRef = React.useRef(null);
+    const editMode = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsEditModeSelector)(state.System));
+    const commentPosition = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsSelector)(state.System));
+    const [
+    // Only handle first comment for now
+    // Later we can handle multiple comments
+    comment,] = (0, react_redux_1.useSelector)((state) => {
+        return commentPosition ? (0, CommentsRedux_1.GetCommentsSelector)(state.Comments, commentPosition) : [];
+    });
+    const handleCommentChange = (value) => {
+        api.commentsApi.updateCommentText(value, comment);
+    };
+    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Comments');
+    const enableEditMode = () => {
+        if (!editMode) {
+            api.commentsApi.showComment(commentPosition, true);
+            cellPopupRef === null || cellPopupRef === void 0 ? void 0 : cellPopupRef.current.refreshContent();
+        }
+    };
+    if (!commentPosition) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(CellPopup_1.CellPopup, { ref: cellPopupRef, key: `${commentPosition.PrimaryKeyValue}-${commentPosition.ColumnId}`, isOpen: true, primaryKeyValue: commentPosition.PrimaryKeyValue, columnId: commentPosition.ColumnId },
+        React.createElement(rebass_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-CommentPopup" },
+            React.createElement(CommentEditor, { isReadonly: isReadonly, editMode: editMode, key: comment === null || comment === void 0 ? void 0 : comment.Uuid, onClose: () => api.commentsApi.hideComment(), comment: (_a = comment === null || comment === void 0 ? void 0 : comment.Value) !== null && _a !== void 0 ? _a : '', onCommentChange: (value) => handleCommentChange(value) }))));
+};
+exports.CommentPopup = CommentPopup;

package/src/View/Components/CellPopup/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface CellPopupProps {
+    isOpen: boolean;
+    columnId: string;
+    primaryKeyValue: number | string;
+}
+export declare type CellPopupHandle = {
+    refreshContent: () => void;
+};
+export declare const CellPopup: React.ForwardRefExoticComponent<CellPopupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<CellPopupHandle>>;

package/src/View/Components/CellPopup/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const utils_1 = require("../../../components/OverlayTrigger/utils");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const UIHelper_1 = require("../../UIHelper");
+let portalElement;
+const ensurePortalElement = () => {
+    if (!(0, UIHelper_1.isBrowserDocumentAvailable)()) {
+        return;
+    }
+    if (portalElement) {
+        return;
+    }
+    portalElement = document.createElement('div');
+    portalElement.style.position = 'absolute';
+    portalElement.style.zIndex = '999999';
+    portalElement.style.top = '0px';
+    portalElement.style.left = '0px';
+    document.body.appendChild(portalElement);
+};
+exports.CellPopup = React.forwardRef((props, ref) => {
+    ensurePortalElement();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
+        portalContainer: portalElement,
+    });
+    const OVERLAY_ID = 'cell-overlay';
+    const showCellPopupContent = () => {
+        var _a;
+        const cellSelector = `[row-id="${props.primaryKeyValue}"] [col-id="${props.columnId}"]`;
+        const alignTo = document.querySelector(cellSelector);
+        if (!alignTo) {
+            adaptable.logger.consoleError(`Could not find cell with selector ${cellSelector} to show popup`);
+            return;
+        }
+        const showOverlayOptions = {
+            id: OVERLAY_ID,
+            alignPosition: [
+                // overlay - target
+                ['TopLeft', 'TopRight'],
+                ['TopRight', 'TopLeft'],
+                ['TopCenter', 'BottomCenter'],
+                ['BottomCenter', 'TopCenter'],
+            ],
+            constrainTo: (_a = adaptable.getAgGridContainerElement()) !== null && _a !== void 0 ? _a : true,
+            alignTo: (0, utils_1.getRect)(alignTo),
+        };
+        showOverlay(() => props.children, showOverlayOptions);
+    };
+    React.useEffect(() => {
+        if (props.isOpen) {
+            showCellPopupContent();
+        }
+        else {
+            clearAllOverlays();
+            hideOverlay(OVERLAY_ID);
+        }
+    }, [props.isOpen]);
+    React.useImperativeHandle(ref, () => {
+        return {
+            refreshContent: () => showCellPopupContent(),
+        };
+    });
+    return React.createElement(React.Fragment, null, portal);
+});

package/src/agGrid/Adaptable.d.ts

@@ -99,6 +99,8 @@ export declare class Adaptable implements IAdaptable {
     private _adaptableReady;
     isDestroyed: boolean;
     private listenerKeydown;
+    private listenerMouseEnter;
+    private listenerMouseLeave;
     supressReact18RenderWarning: boolean;
     renderReactRoot: RenderReactRootFn;
     private listenerFirstDataRendered;
@@ -181,6 +183,7 @@ export declare class Adaptable implements IAdaptable {
     private getAlertRowClass;
     private getAlertRowStyle;
     private getFlashingCellStyle;
+    private getCommentCellClassName;
     private getFlashingCellClass;
     private getCellHighlightStyle;
     private getRowHighlightStyle;

package/src/agGrid/Adaptable.js

@@ -320,14 +320,21 @@ class Adaptable {
             // }
             // because this await for of introduces too much delay
         }
-        const doInit = (ab) => ab.init(adaptableOptions, runtimeConfig, true).then((api) => {
-            if (Array.isArray(adaptableOptions.plugins)) {
-                adaptableOptions.plugins.forEach((plugin) => {
-                    plugin.afterInit(ab);
-                });
-            }
-            return api;
-        });
+        const doInit = (ab) => {
+            // required for NoCode
+            // it should go away with https://github.com/AdaptableTools/adaptable/issues/2278
+            if (adaptableOptions._gridOptions) {
+                runtimeConfig.gridOptions = adaptableOptions._gridOptions;
+            }
+            return ab.init(adaptableOptions, runtimeConfig, true).then((api) => {
+                if (Array.isArray(adaptableOptions.plugins)) {
+                    adaptableOptions.plugins.forEach((plugin) => {
+                        plugin.afterInit(ab);
+                    });
+                }
+                return api;
+            });
+        };
         if (promise && promise.then) {
             return promise.then(() => {
                 const ab = new Adaptable();
@@ -1148,6 +1155,20 @@ class Adaptable {
                 ? flashingCell.flashingCellDefinition.DownChangeStyle
                 : flashingCell.flashingCellDefinition.NeutralChangeStyle)) !== null && _a !== void 0 ? _a : {});
     }
+    getCommentCellClassName(col, params) {
+        if (!this.api.internalApi.getModuleService().isModuleAvailable('Comments')) {
+            return;
+        }
+        const cellPosition = {
+            PrimaryKeyValue: this.getPrimaryKeyValueFromRowNode(params.node),
+            ColumnId: col.columnId,
+        };
+        const cellComments = this.api.commentsApi.getCellComments(cellPosition);
+        if (!(cellComments === null || cellComments === void 0 ? void 0 : cellComments.length)) {
+            return undefined;
+        }
+        return 'ab-Cell-Comment';
+    }
     getFlashingCellClass(col, params) {
         var _a, _b, _c;
         const primaryKey = params.node.aggData
@@ -2753,7 +2774,11 @@ class Adaptable {
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
             gridContainerElement.removeEventListener('keydown', this.listenerKeydown);
+            gridContainerElement.removeEventListener('mouseenter', this.listenerMouseEnter);
+            gridContainerElement.removeEventListener('mouseleave', this.listenerMouseLeave);
             this.listenerKeydown = null;
+            this.listenerMouseEnter = null;
+            this.listenerMouseLeave = null;
         }
         this.api.internalDestroySelf();
         this.colDefPropertyCache = null;
@@ -2902,6 +2927,10 @@ class Adaptable {
             // This is needed to be able to prevent the editor to be opened
             // in bubling phase the opening is not prevented with ag-grid v30
             true);
+            gridContainerElement.addEventListener('mouseenter', (this.listenerMouseEnter = (event) => {
+                this._emit('MouseEnter', event);
+            }), true);
+            gridContainerElement.addEventListener('mouseleave', (this.listenerMouseLeave = (event) => this._emit('MouseLeave', event)));
         }
         /*********************
          * AG Grid EVENTS
@@ -3064,6 +3093,7 @@ class Adaptable {
         this.gridOptions.api.addEventListener(core_1.Events.EVENT_SORT_CHANGED, (this.listenerSortChanged = () => {
             this.onSortChanged();
             this.debouncedSetSelectedCells();
+            this._emit('SortChanged');
         }));
         const showGroupingTotalsAsHeader = this.adaptableOptions.groupingOptions.showGroupingTotalsAsHeader;
         /**
@@ -3404,6 +3434,7 @@ class Adaptable {
                 const flashingClassName = this.getFlashingCellClass(abColumn, params);
                 const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
                 const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
+                const commentClassName = this.getCommentCellClassName(abColumn, params);
                 const returnValue = [
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
                     !hasStyledColumn && formatColumns.length
@@ -3414,6 +3445,7 @@ class Adaptable {
                     readonlyClassName,
                     highlightAlertClassName,
                     flashingClassName,
+                    commentClassName,
                 ]
                     // we flatten the array because some rules ('userCellClass' etc)  might return a string[]
                     .flat()
@@ -3495,12 +3527,14 @@ class Adaptable {
         });
     }
     setupColumnTooltipValueGetter({ col, colId, abColumn }) {
+        let hasTooptip = false;
         this.setColDefProperty(col, 'tooltipValueGetter', () => {
             const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
             if (styledColumn &&
                 !styledColumn.IsSuspended &&
                 styledColumn.PercentBarStyle &&
                 styledColumn.PercentBarStyle.ToolTipText) {
+                hasTooptip = true;
                 if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.PercentBarStyle) {
                     return (params) => {
                         const min = this.api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
@@ -5213,12 +5247,13 @@ class AdaptableNoCodeWizard {
         // this allows people to customize the wizard dimensions & styling
         // when it's visible
         container.classList.add('adaptable--in-wizard');
-        const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
+        const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions, gridOptions) => {
                 container.classList.remove('adaptable--in-wizard');
                 unmount();
+                adaptableOptions._gridOptions = gridOptions;
                 this.init({
                     adaptableOptions,
-                    gridOptions: adaptableOptions._gridOptions,
+                    gridOptions: gridOptions,
                     agGridModules: [...this.agGridModules],
                 });
             } })), container, true);

package/src/agGrid/agGridHelper.js

@@ -35,6 +35,7 @@ const DataChangeHistoryModule_1 = require("../Strategy/DataChangeHistoryModule")
 const FlashingCellModule_1 = require("../Strategy/FlashingCellModule");
 const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
+const CommentsModule_1 = require("../Strategy/CommentsModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
 const BadgeRenderer_1 = require("./BadgeRenderer");
 const Helper_1 = require("../Utilities/Helpers/Helper");
@@ -104,6 +105,7 @@ class agGridHelper {
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
         modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
+        modules.set(ModuleConstants.CommentsModuleId, new CommentsModule_1.CommentsModule(api));
         modules.set(ModuleConstants.StyledColumnModuleId, new StyledColumnModule_1.StyledColumnModule(api));
         modules.set(ModuleConstants.Fdc3ModuleId, new Fdc3Module_1.Fdc3Module(api));
         return modules;

package/src/components/OverlayTrigger/utils.d.ts

@@ -1,4 +1,4 @@
 import { BoundingClientRect } from '../utils/getAvailableSizeInfo';
-export declare const getRect: (node: HTMLElement, offset?: number) => BoundingClientRect;
+export declare const getRect: (node: Element, offset?: number) => BoundingClientRect;
 export declare const getDocRect: () => BoundingClientRect;
 export declare const getIntersection: (rect1: BoundingClientRect, rect2: BoundingClientRect) => BoundingClientRect;

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

@@ -312,6 +312,11 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    AdaptableComment: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableComparerFunction: {
         name: string;
         kind: string;
@@ -1698,6 +1703,28 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    CommentsState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        }[];
+    };
+    CommmentableCellContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     CompatibleContext: {
         name: string;
         kind: string;