@adaptabletools/adaptable 14.0.3 → 14.1.0

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertType } from '../Utilities/getAlertType';
 declare type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
+    alertType: AlertType;
 };
 export declare const AlertScopeWizardSection: (props: AlertScopeWizardSectionProps) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -3,8 +3,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
+const rebass_1 = require("rebass");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AlertScopeWizardSection = (props) => {
-    return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    let disableDataTypes = true;
+    let disableColumns = true;
+    if (props.alertType === 'DataChange') {
+        disableDataTypes = false;
+        disableColumns = false;
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+                rowScope: 'Changes in any Column in the row will trigger an Alert',
+                columnScope: 'Changes in selected Columns will trigger an Alert',
+                dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
+            }, scope: data.Scope, updateScope: (Scope) => {
+                const newData = Object.assign(Object.assign({}, data), { Scope });
+                if (newData.Rule.Predicates) {
+                    // when scope is changed, reset the rule to predicate of any
+                    // if it was set to a predicate before
+                    newData.Rule = {
+                        Predicates: [{ PredicateId: 'Any' }],
+                    };
+                }
+                if (newData.Rule.ObservableExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {
+                    // if it had observable expression and the scope is changed to partial
+                    // we need to reset to not be an observable expression, as observable is not supported
+                    // for partial scope
+                    delete newData.Rule.ObservableExpression;
+                    newData.Rule.BooleanExpression = '';
+                }
+                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                    !api.scopeApi.scopeIsAll(Scope)) {
+                    // if it had aggregation expression and the scope is changed to partial
+                    // we need to reset to not be an aggregation expression, as aggregation is not supported
+                    // for partial scope
+                    delete newData.Rule.AggregatedBooleanExpression;
+                    newData.Rule.BooleanExpression = '';
+                }
+                props.onChange(newData);
+            } })));
 };
 exports.AlertScopeWizardSection = AlertScopeWizardSection;

package/src/View/Alert/Wizard/AlertTypeWizardSection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlertType } from '../Utilities/getAlertType';
+export declare const renderAlertTypeSummary: (alertType: AlertType) => JSX.Element;
+declare type AlertBehaviourWizardSectionProps = {
+    onAlertTypeChange: (alertType: AlertType) => void;
+    alertType: AlertType | null;
+};
+export declare const AlertTypeWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertTypeWizardSection.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const getAlertType_1 = require("../Utilities/getAlertType");
+const rebass_1 = require("rebass");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const Tag_1 = require("../../../components/Tag");
+const renderAlertTypeSummary = (alertType) => {
+    const text = (0, getAlertType_1.getAlertTypeText)(alertType);
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(Tag_1.Tag, null, text)));
+};
+exports.renderAlertTypeSummary = renderAlertTypeSummary;
+const AlertTypeWizardSection = (props) => {
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable })))));
+};
+exports.AlertTypeWizardSection = AlertTypeWizardSection;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -12,7 +12,7 @@ const AlertRulesWizardSection_1 = require("./AlertRulesWizardSection");
 const isValidAlertRules_1 = require("./isValidAlertRules");
 const AlertBehaviourWizardSection_1 = require("./AlertBehaviourWizardSection");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
-const AlertDisplayWizardSection_1 = require("./AlertDisplayWizardSection");
+const AlertMessageWizardSection_1 = require("./AlertMessageWizardSection");
 const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -20,7 +20,15 @@ const react_redux_1 = require("react-redux");
 const AlertRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/AlertRedux"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const AlertTypeWizardSection_1 = require("./AlertTypeWizardSection");
+const getAlertType_1 = require("../Utilities/getAlertType");
+const mapAlertDefinition_1 = require("../Utilities/mapAlertDefinition");
+const getDefaultAlertDefinition_1 = require("../Utilities/getDefaultAlertDefinition");
+const AlertNotificationWizardSection_1 = require("./AlertNotificationWizardSection");
 const AlertWizard = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
     const [alertDefinition, setAlertDefinition] = (0, react_1.useState)(() => {
         var _a;
         const alertDefinition = props.data
@@ -35,86 +43,12 @@ const AlertWizard = (props) => {
         alertDefinition.MessageType = (_a = alertDefinition.MessageType) !== null && _a !== void 0 ? _a : GeneralConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const updateAlertDefinition = (alertDefinition) => {
+    // Alert type is based initialy on data, but can be changed by the user
+    // the default objects do not neccesary have enough information to determine the type
+    const [alertType, setAlertType] = (0, react_1.useState)(() => {
         var _a;
-        // we need to adjust the alert actions&behaviours based on the predicate type(row/cell based)
-        const isAddedRowChangeAlert = api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
-        const isRemovedRowChangeAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
-        const isCellChangeAlert = !isAddedRowChangeAlert && !isRemovedRowChangeAlert;
-        // map FormButton Actions
-        const mapValidButtonActions = (alertAction) => {
-            if (isCellChangeAlert) {
-                if (alertAction === 'highlight-row') {
-                    return 'highlight-cell';
-                }
-                if (alertAction === 'jump-to-row') {
-                    return 'jump-to-cell';
-                }
-                return alertAction;
-            }
-            if (isAddedRowChangeAlert) {
-                if (alertAction === 'highlight-cell') {
-                    return 'highlight-row';
-                }
-                if (alertAction === 'jump-to-cell') {
-                    return 'jump-to-row';
-                }
-                if (alertAction === 'jump-to-column' || alertAction === 'undo') {
-                    return null;
-                }
-                return alertAction;
-            }
-            if (isRemovedRowChangeAlert) {
-                if (alertAction === 'highlight-cell' ||
-                    alertAction === 'jump-to-cell' ||
-                    alertAction === 'highlight-row' ||
-                    alertAction === 'jump-to-row' ||
-                    alertAction === 'jump-to-column' ||
-                    alertAction === 'undo') {
-                    return null;
-                }
-                return alertAction;
-            }
-        };
-        if (alertDefinition.AlertForm && typeof alertDefinition.AlertForm !== 'string') {
-            const alertButtons = (_a = alertDefinition.AlertForm) === null || _a === void 0 ? void 0 : _a.Buttons;
-            alertButtons === null || alertButtons === void 0 ? void 0 : alertButtons.forEach((alertButton) => {
-                const alertAction = alertButton.Action;
-                if (Array.isArray(alertAction)) {
-                    alertButton.Action = alertAction
-                        .map(mapValidButtonActions)
-                        .filter(Boolean);
-                }
-                else {
-                    alertButton.Action = mapValidButtonActions(alertAction);
-                }
-            });
-        }
-        // map Alert Properties(Behaviour)
-        if (isCellChangeAlert) {
-            alertDefinition.AlertProperties.HighlightCell = alertDefinition.AlertProperties.HighlightRow;
-            delete alertDefinition.AlertProperties.HighlightRow;
-            alertDefinition.AlertProperties.JumpToCell = alertDefinition.AlertProperties.JumpToRow;
-            delete alertDefinition.AlertProperties.JumpToRow;
-        }
-        if (isAddedRowChangeAlert) {
-            alertDefinition.AlertProperties.HighlightRow = alertDefinition.AlertProperties.HighlightCell;
-            delete alertDefinition.AlertProperties.HighlightCell;
-            alertDefinition.AlertProperties.JumpToRow = alertDefinition.AlertProperties.JumpToCell;
-            delete alertDefinition.AlertProperties.JumpToCell;
-            delete alertDefinition.AlertProperties.PreventEdit;
-        }
-        if (isRemovedRowChangeAlert) {
-            delete alertDefinition.AlertProperties.PreventEdit;
-            delete alertDefinition.AlertProperties.HighlightRow;
-            delete alertDefinition.AlertProperties.JumpToRow;
-            delete alertDefinition.AlertProperties.HighlightCell;
-            delete alertDefinition.AlertProperties.JumpToCell;
-        }
-        setAlertDefinition(alertDefinition);
-    };
-    const dispatch = (0, react_redux_1.useDispatch)();
+        return (_a = (0, getAlertType_1.getAlertType)(alertDefinition)) !== null && _a !== void 0 ? _a : getAlertType_1.AlertType.DataChange;
+    });
     const handleFinish = () => {
         if (props.data) {
             dispatch(AlertRedux.AlertDefinitionEdit(alertDefinition));
@@ -124,44 +58,65 @@ const AlertWizard = (props) => {
         }
         props.onCloseWizard();
     };
-    const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
+    const updateAlertDefinition = (newAlertDefinition) => {
+        setAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
+    };
+    const handleAlertTypeChange = (newAlertType) => {
+        setAlertType(newAlertType);
+        setAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
+    };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
+                title: 'Type',
+                details: (React.createElement(React.Fragment, null,
+                    "Select ",
+                    React.createElement("b", null, "what"),
+                    " type of change in AdapTable will cause the Alert to fire")),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
+                renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
+            },
+            {
+                title: 'Trigger',
+                isVisible: () => alertType === getAlertType_1.AlertType.DataChange,
                 details: (React.createElement(React.Fragment, null,
                     "Specify ",
-                    React.createElement("b", null, "which"),
+                    React.createElement("b", null, "where"),
                     " data changes should trigger the Alert")),
                 isValid: NewScopeComponent_1.isScopeValid,
-                render: () => React.createElement(AlertScopeWizardSection_1.AlertScopeWizardSection, { onChange: setAlertDefinition }),
-                renderSummary: BaseAlertScopeWizardSection_1.renderBaseAlertScopeSummary,
-                title: 'Trigger',
+                render: () => (React.createElement(AlertScopeWizardSection_1.AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
+                renderSummary: BaseAlertScopeWizardSection_1.renderScopeSummary,
             },
             {
-                details: (React.createElement(React.Fragment, null,
-                    "Build the rules ",
-                    React.createElement("b", null, "when"),
-                    " the Alert should trigger")),
+                title: 'Rule',
+                details: (0, AlertRulesWizardSection_1.getRuleStepDescription)(alertType),
                 isValid: isValidAlertRules_1.isValidAlertRules,
-                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: updateAlertDefinition, module: "alert" }),
+                render: () => (React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { alertType: alertType, onChange: updateAlertDefinition, module: "alert" })),
                 renderSummary: AlertRulesWizardSection_1.renderAlertRulesSummary,
-                title: 'Rule',
             },
             {
-                details: "Select the Alert's Message Type and Notification option",
+                title: 'Message',
+                details: "Select the Alert's Message Type and Text",
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(AlertDisplayWizardSection_1.AlertDisplayWizardSection, { onChange: setAlertDefinition }))),
-                renderSummary: AlertDisplayWizardSection_1.renderAlertDisplaySummary,
-                title: 'Type & Display',
+                    React.createElement(AlertMessageWizardSection_1.AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
+                renderSummary: AlertMessageWizardSection_1.renderAlertMessageSummary,
+            },
+            {
+                title: 'Notification',
+                details: 'Create a Notification for the Alert',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(AlertNotificationWizardSection_1.AlertNotificationWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
+                renderSummary: AlertNotificationWizardSection_1.renderAlertNotificationSummary,
             },
             {
-                details: 'Configure ' + behaviourSpelling + ' for the Alert',
                 title: behaviourSpelling,
+                details: 'Configure ' + behaviourSpelling + ' for the Alert',
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { onChange: setAlertDefinition }))),
+                    React.createElement(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourWizardSummary,
             },
             {
-                details: 'Select Alert tags',
+                details: 'Select Alert Tags',
                 title: 'Tags',
                 isVisible: () => api.internalApi.shouldDisplayTagSections(),
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { FlashingCellDefinition } from '../../../../types';
-declare type BaseAlertScopeWizardSectionProps<T extends AlertDefinition> = {
-    onChange: (data: T) => void;
-};
-export declare const BaseAlertScopeWizardSection: <T extends AlertDefinition>(props: BaseAlertScopeWizardSectionProps<T>) => JSX.Element;
-export declare const renderBaseAlertScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => JSX.Element;
-export {};
+export declare const renderScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => JSX.Element;

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -1,47 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderBaseAlertScopeSummary = exports.BaseAlertScopeWizardSection = void 0;
+exports.renderScopeSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ValueSelector_1 = require("../../Components/ValueSelector");
-const BaseAlertScopeWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
-        React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                rowScope: 'Changes in any Column in the row will trigger an Alert',
-                columnScope: 'Changes in selected Columns will trigger an Alert',
-            }, scope: data.Scope, updateScope: (Scope) => {
-                const newData = Object.assign(Object.assign({}, data), { Scope });
-                if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of any
-                    // if it was set to a predicate before
-                    newData.Rule = {
-                        Predicates: [{ PredicateId: 'Any' }],
-                    };
-                }
-                if (newData.Rule.ObservableExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {
-                    // if it had observable expression and the scope is changed to partial
-                    // we need to reset to not be an observable expression, as observable is not supported
-                    // for partial scope
-                    delete newData.Rule.ObservableExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
-                    !api.scopeApi.scopeIsAll(Scope)) {
-                    // if it had aggregation expression and the scope is changed to partial
-                    // we need to reset to not be an aggregation expression, as aggregation is not supported
-                    // for partial scope
-                    delete newData.Rule.AggregatedBooleanExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                props.onChange(newData);
-            } })));
-};
-exports.BaseAlertScopeWizardSection = BaseAlertScopeWizardSection;
-const renderBaseAlertScopeSummary = (data) => {
+const renderScopeSummary = (data) => {
     const { api: { scopeApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const columnsInScope = scopeApi.getColumnsForScope(data.Scope);
     return (React.createElement(React.Fragment, null,
@@ -53,7 +18,7 @@ const renderBaseAlertScopeSummary = (data) => {
             React.createElement(rebass_1.Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),
             columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(React.Fragment, null, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(rebass_1.Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, "Changes in columns of the selected data-types trigger an alert"),
+            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, "Changes in Columns with these Data Types trigger an Alert"),
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: data.Scope.DataTypes, value: data.Scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(React.Fragment, null, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
 };
-exports.renderBaseAlertScopeSummary = renderBaseAlertScopeSummary;
+exports.renderScopeSummary = renderScopeSummary;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -74,7 +74,7 @@ const CalculatedColumnWizard = (props) => {
                 },
             },
             {
-                details: 'Select Calculated Column tags',
+                details: 'Select Calculated Column Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },

package/src/View/{Components/Charting → Charting}/ChartingStatusBarPopover.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingStatusBarPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const ModuleConstants = tslib_1.__importStar(require("../../../Utilities/Constants/ModuleConstants"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const useChartingElements_1 = require("./useChartingElements");
 const rebass_1 = require("rebass");
 const ChartingStatusBarPopover = (props) => {

package/src/View/{Components/Charting → Charting}/ChartingViewPanel.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { ViewPanelProps } from '../SharedProps/ViewPanelProps';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export declare const ChartingViewPanel: React.FunctionComponent<ViewPanelProps>;

package/src/View/{Components/Charting → Charting}/ChartingWizard/ChartingWizard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ChartDefinition } from '../../../../types';
-import { AdaptableOnePageWizardProps } from '../../../Wizard/Interface/IAdaptableWizard';
+import { ChartDefinition } from '../../../types';
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export interface ChartingWizardProps extends AdaptableOnePageWizardProps<ChartDefinition> {
 }
 export declare const ChartingWizard: React.FunctionComponent<ChartingWizardProps>;

package/src/View/{Components/Charting → Charting}/ChartingWizard/ChartingWizard.js

@@ -4,10 +4,11 @@ exports.ChartingWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const PreviewChartSection_1 = require("./PreviewChartSection");
 const SettingsSection_1 = require("./SettingsSection");
+const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const ChartingWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [chartDefinition, setChartDefinition] = React.useState(() => {
@@ -26,6 +27,15 @@ const ChartingWizard = (props) => {
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
+            {
+                details: 'Select Chart Tags',
+                title: 'Tags',
+                isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setChartDefinition }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+            },
+            '-',
             {
                 title: 'Preview Chart',
                 details: 'Chart Preview',

package/src/View/{Components/Charting → Charting}/ChartingWizard/PreviewChartSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartDefinition } from '../../../../types';
+import { ChartDefinition } from '../../../types';
 export declare const PreviewChartSection: React.FunctionComponent<{
     chartDefinition: ChartDefinition;
     onChange: (chartDefinition: ChartDefinition) => void;

package/src/View/{Components/Charting → Charting}/ChartingWizard/PreviewChartSection.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
-const SystemRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/SystemRedux"));
-const AdaptableContext_1 = require("../../../AdaptableContext");
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
+const AdaptableContext_1 = require("../../AdaptableContext");
 const PreviewChartSection = (props) => {
     const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
     const [localChartId, setLocalChartId] = React.useState(null);

package/src/View/{Components/Charting → Charting}/ChartingWizard/SettingsSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableApi, ChartDefinition } from '../../../../types';
+import { AdaptableApi, ChartDefinition } from '../../../types';
 export declare const isSettingsValid: (chartDefinition: ChartDefinition, api: AdaptableApi) => true | string;
 export interface SettingsSectionProps {
     chartDefinition: ChartDefinition;

package/src/View/{Components/Charting → Charting}/ChartingWizard/SettingsSection.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../AdaptableInput"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
         return 'Name is mandatory';

package/src/View/{Components/Charting → Charting}/DeleteChartButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccessLevel, ChartDefinition } from '../../../types';
+import { AccessLevel, ChartDefinition } from '../../types';
 export interface ButtonDeleteProps {
     chart: ChartDefinition;
     accessLevel: AccessLevel;

package/src/View/{Components/Charting → Charting}/DeleteChartButton.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeleteChartButton = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ButtonDelete_1 = require("../Buttons/ButtonDelete");
-const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
 const DeleteChartButton = (props) => {
     var _a;
-    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: ChartingRedux.ChartingDeleteChart((_a = props.chart) === null || _a === void 0 ? void 0 : _a.Name), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel }));
+    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: ChartingRedux.ChartingDeleteChart((_a = props.chart) === null || _a === void 0 ? void 0 : _a.Name), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel, tooltip: "Delete Chart" }));
 };
 exports.DeleteChartButton = DeleteChartButton;

package/src/View/{Components/Charting → Charting}/EditChartButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AccessLevel, ChartDefinition } from '../../../types';
+import { AccessLevel, ChartDefinition } from '../../types';
 export interface EditChartButtonProps {
     chart: ChartDefinition;
     accessLevel: AccessLevel;

package/src/View/{Components/Charting → Charting}/EditChartButton.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditChartButton = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
-const ButtonEdit_1 = require("../Buttons/ButtonEdit");
-const ModuleConstants = tslib_1.__importStar(require("../../../Utilities/Constants/ModuleConstants"));
+const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
+const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const react_redux_1 = require("react-redux");
 const EditChartButton = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();

package/src/View/{Components/Charting → Charting}/ShowChartButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../types';
+import { AdaptableObject } from '../../types';
 export declare const ShowChartButton: React.FunctionComponent<{
     data: AdaptableObject;
 }>;

package/src/View/{Components/Charting → Charting}/ShowChartButton.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShowChartButton = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const useChartState_1 = require("./useChartState");
 const ShowChartButton = (props) => {
     var _a, _b;
@@ -13,10 +13,10 @@ const ShowChartButton = (props) => {
     const chartContainers = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions) === null || _b === void 0 ? void 0 : _b.chartContainers;
     const { isOpen, showChart, closeChart } = (0, useChartState_1.useChartState)(props.data);
     if (isOpen) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: closeChart, variant: "raised", tone: "error" }, "Close"));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: closeChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
     }
     if (!(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length)) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => showChart(), variant: "text", tone: "success" }, "Open"));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => showChart(), variant: "text", tone: "success", icon: "visibility", tooltip: "Show Chart" }));
     }
     const containerOptions = [
         {

package/src/View/{Components/Charting → Charting}/useChartState.d.ts

@@ -1,4 +1,4 @@
-import { ChartDefinition } from '../../../types';
+import { ChartDefinition } from '../../types';
 export declare const useChartState: (chartDefinition?: ChartDefinition) => {
     isOpen: boolean;
     showChart: (chartContainer?: {

package/src/View/{Components/Charting → Charting}/useChartState.js

@@ -4,20 +4,20 @@ exports.useChartState = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
-const LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
+const AdaptableContext_1 = require("../AdaptableContext");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const useChartState = (chartDefinition) => {
     const [chartRef, setChartRef] = React.useState(null);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
     React.useEffect(() => {
-        var _a;
+        var _a, _b;
         if (!chartDefinition) {
             setChartRef(null);
             return;
         }
-        const currentChartRef = (_a = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId)) !== null && _a !== void 0 ? _a : null;
+        const currentChartRef = (_b = adaptable.api.chartingApi.getChartRef((_a = chartDefinition === null || chartDefinition === void 0 ? void 0 : chartDefinition.Model) === null || _a === void 0 ? void 0 : _a.chartId)) !== null && _b !== void 0 ? _b : null;
         setChartRef(currentChartRef);
     }, [currentChartModels, chartDefinition]);
     const closeAlreadyOpenedChartsInContainer = (element) => {