@reltio/components 1.4.915 → 1.4.916

package/cjs/components/SideIconPanel/SideButtonsPanel.d.ts

@@ -3,11 +3,11 @@ declare type Props = {
     buttonsProps: {
         icon: ElementType;
         tooltipTitle: string;
-        id: string;
+        id: number;
     }[];
-    activeIndex: number;
+    activeIndexId: number;
     className?: string;
-    onButtonClick: (index: number) => void;
+    onButtonClick: (id: number) => void;
 };
 export declare const SideButtonsPanel: VFC<Props>;
 export {};

package/cjs/components/SideIconPanel/SideButtonsPanel.js

@@ -31,12 +31,12 @@ var classnames_1 = __importDefault(require("classnames"));
 var SmallIconButton_1 = require("../SmallIconButton");
 var styles_1 = require("./styles");
 var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndex = _a.activeIndex, className = _a.className, onButtonClick = _a.onButtonClick;
+    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
     var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a, index) {
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndex === index, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(index); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
+        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
     })));
 };
 exports.SideButtonsPanel = SideButtonsPanel;

package/cjs/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode, VFC } from 'react';
 declare type HeaderProps = {
-    mainTitle: string;
-    secondTitle: string;
+    mainTitle?: string;
+    secondTitle?: string;
+    content?: ReactNode;
     rightContent?: ReactNode;
 };
 declare type Props = HeaderProps & {

package/cjs/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.js

@@ -12,13 +12,14 @@ var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var SidePanelContentHeader = function (_a) {
-    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, rightContent = _a.rightContent;
+    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
     var styles = styles_1.useStyles();
     return (react_1.default.createElement("div", { className: styles.container },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "S", icon: Close_1.default, onClick: onClose, className: styles.icon, tooltipTitle: ui_i18n_1.default.text('Close') }),
-        react_1.default.createElement(Typography_1.default, { variant: "h6" }, mainTitle),
-        react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
-        react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
-        rightContent));
+        content || (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Typography_1.default, { variant: "h6" }, mainTitle),
+            react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
+            react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
+            rightContent))));
 };
 exports.SidePanelContentHeader = SidePanelContentHeader;

package/cjs/components/attributes/AttributesView/index.js

@@ -9,7 +9,7 @@ var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var AttributesView_1 = __importDefault(require("./AttributesView"));
 exports.AttributesView = AttributesView_1.default;
 var mapStateToProps = function (state, ownProps) { return ({
-    entity: ownProps.entity || mdm_module_1.default.selectors.getEntity(state),
+    entity: ownProps.entity || mdm_module_1.default.selectors.getEntityWithDiff(state),
     mode: ownProps.mode || mdm_module_1.default.selectors.getMode(state)
 }); };
 exports.default = react_redux_1.connect(mapStateToProps)(AttributesView_1.default);

package/cjs/components/history/HistoryTree/HistoryTree.js

@@ -39,7 +39,8 @@ var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
-var mdm_module_1 = require("@reltio/mdm-module");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var HistoryRow_1 = __importDefault(require("../HistoryRow/HistoryRow"));
 var HistoryGraph_1 = __importDefault(require("../HistoryGraph/HistoryGraph"));
@@ -50,6 +51,7 @@ var HistoryTree = function (_a) {
     var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, entityUri = _a.entityUri, historyEvent = _a.historyEvent, findPreviousChange = _a.findPreviousChange;
     var styles = styles_1.useStyles();
     var dispatch = react_redux_1.useDispatch();
+    var isEditableMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsEditableMode);
     var _c = react_1.useState({ historyLanes: {}, rows: [] }), graphData = _c[0], setGraphData = _c[1];
     var _d = react_1.useState(false), isScrollable = _d[0], setIsScrollable = _d[1];
     var _e = react_1.useState(-1), selectedIndex = _e[0], setSelectedIndex = _e[1];
@@ -78,6 +80,14 @@ var HistoryTree = function (_a) {
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
     var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if (isEditableMode) {
+            if (window.confirm(ui_i18n_1.default.text('Are you sure you want to go in history mode? All your changes will be lost.'))) {
+                dispatch(mdm_module_1.profile.mode.actions.modeUpdated(mdm_sdk_1.Mode.Viewing));
+            }
+            else {
+                return;
+            }
+        }
         if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
             dispatch(mdm_module_1.profile.history.actions.clearHistoryEvent());
             setSelectedIndex(0);

package/cjs/components/history/hooks/useHistory.d.ts

@@ -12,5 +12,6 @@ export declare const useHistory: ({ entityUri, enabled }: Props) => {
     historyWithTotal: import("@reltio/mdm-sdk").HistoryWithTotal;
     historyFilter: HistoryFilter;
     setHistoryFilter: import("react").Dispatch<import("react").SetStateAction<HistoryFilter>>;
+    reloadHistory: () => void;
 };
 export {};

package/cjs/components/history/hooks/useHistory.js

@@ -21,7 +21,7 @@ var useHistory = function (_a) {
         offset: historyPage * MAX_HISTORY_ROWS,
         order: 'desc',
         showAll: true
-    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore;
+    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore, loadData = _e.loadData;
     var canLoadMore = react_1.useMemo(function () { return (historyPage + 1) * MAX_HISTORY_ROWS <= (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total); }, [
         historyWithTotal,
         historyPage
@@ -32,6 +32,10 @@ var useHistory = function (_a) {
         loadMore((historyPage + 1) * MAX_HISTORY_ROWS);
         setHistoryPage(historyPage + 1);
     }, [loadMore, historyPage, canLoadMore]);
+    var reloadHistory = react_1.useCallback(function () {
+        loadData();
+        setHistoryPage(0);
+    }, [loadData]);
     return {
         isLoading: isHistoryLoading || isHistoricUrisLoading,
         canLoadMore: canLoadMore,
@@ -39,7 +43,8 @@ var useHistory = function (_a) {
         historicUris: historicUris,
         historyWithTotal: historyWithTotal,
         historyFilter: historyFilter,
-        setHistoryFilter: setHistoryFilter
+        setHistoryFilter: setHistoryFilter,
+        reloadHistory: reloadHistory
     };
 };
 exports.useHistory = useHistory;

package/cjs/components/history/hooks/useHistoryDiff.d.ts

@@ -0,0 +1,2 @@
+import { HistoryDiff } from '@reltio/mdm-sdk';
+export declare const useHistoryDiff: () => HistoryDiff;

package/cjs/components/history/hooks/useHistoryDiff.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHistoryDiff = void 0;
+var react_1 = require("react");
+var react_redux_1 = require("react-redux");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var defaultHistoryDiff = {
+    appearance: {},
+    attributes: {},
+    roles: [],
+    tags: []
+};
+var fixRefEntity = ramda_1.evolve({
+    refEntity: mdm_sdk_1.wrapInArrayIfNeeded,
+    refRelation: mdm_sdk_1.wrapInArrayIfNeeded
+});
+var prepareHistorySlice = function (historySlice) {
+    if (historySlice) {
+        return ramda_1.evolve({
+            attributes: ramda_1.map(ramda_1.map(fixRefEntity))
+        })(historySlice);
+    }
+    return historySlice;
+};
+var useHistoryDiff = function () {
+    var dispatch = react_redux_1.useDispatch();
+    var historySlice = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistorySlice);
+    var historyDiff = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryDiff);
+    var historyMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryMode);
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
+    react_1.useEffect(function () {
+        if (historySlice) {
+            var aEntity = historySlice.aEntity, bEntity = historySlice.bEntity;
+            var historyManager = mdm_sdk_1.entity.HistoryManager.createHistoryManager(mdm_sdk_1.entity.AttributesDiff);
+            var historyDiff_1 = historyManager.computeEntityHistoryDiff(prepareHistorySlice(historyMode === mdm_module_1.HistoryMode.Current ? entity : bEntity), prepareHistorySlice(aEntity));
+            dispatch(mdm_module_1.profile.history.actions.setHistoryDiff(historyDiff_1));
+        }
+    }, [historySlice, historyMode, dispatch, entity]);
+    return historyDiff || defaultHistoryDiff;
+};
+exports.useHistoryDiff = useHistoryDiff;

package/cjs/components/history/hooks/useHistoryWithTotal.d.ts

@@ -13,5 +13,6 @@ export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, .
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     loadMore: (offset: number) => void;
+    loadData: () => void;
 };
 export {};

package/cjs/components/history/hooks/useHistoryWithTotal.js

@@ -74,6 +74,6 @@ var useHistoryWithTotal = function (_a) {
             loadData();
         }
     }, [loadData, enabled]);
-    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore };
+    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore, loadData: loadData };
 };
 exports.useHistoryWithTotal = useHistoryWithTotal;

package/cjs/components/history/index.d.ts

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/cjs/components/history/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileBandHistory = exports.HistoryHeader = exports.HistoryView = exports.useHistory = exports.useHistorySlice = exports.useHistoryWithTotal = exports.useHistoricUris = void 0;
+exports.ProfileBandHistory = exports.HistoryHeader = exports.HistoryView = exports.useHistoryDiff = exports.useHistory = exports.useHistorySlice = exports.useHistoryWithTotal = exports.useHistoricUris = void 0;
 var useHistoricUris_1 = require("./hooks/useHistoricUris");
 Object.defineProperty(exports, "useHistoricUris", { enumerable: true, get: function () { return useHistoricUris_1.useHistoricUris; } });
 var useHistoryWithTotal_1 = require("./hooks/useHistoryWithTotal");
@@ -22,6 +22,8 @@ var useHistorySlice_1 = require("./hooks/useHistorySlice");
 Object.defineProperty(exports, "useHistorySlice", { enumerable: true, get: function () { return useHistorySlice_1.useHistorySlice; } });
 var useHistory_1 = require("./hooks/useHistory");
 Object.defineProperty(exports, "useHistory", { enumerable: true, get: function () { return useHistory_1.useHistory; } });
+var useHistoryDiff_1 = require("./hooks/useHistoryDiff");
+Object.defineProperty(exports, "useHistoryDiff", { enumerable: true, get: function () { return useHistoryDiff_1.useHistoryDiff; } });
 var HistoryView_1 = require("./HistoryView/HistoryView");
 Object.defineProperty(exports, "HistoryView", { enumerable: true, get: function () { return __importDefault(HistoryView_1).default; } });
 var HistoryHeader_1 = require("./HistoryHeader/HistoryHeader");

package/cjs/contexts/HistoryAppearanceContext/index.js

@@ -7,6 +7,8 @@ exports.HistoryDiffContext = void 0;
 var react_1 = __importDefault(require("react"));
 exports.HistoryDiffContext = react_1.default.createContext({
     appearance: undefined,
-    attributes: undefined
+    attributes: undefined,
+    roles: undefined,
+    tags: undefined
 });
 exports.HistoryDiffContext.displayName = 'HistoryDiffContext';

package/esm/components/SideIconPanel/SideButtonsPanel.d.ts

@@ -3,11 +3,11 @@ declare type Props = {
     buttonsProps: {
         icon: ElementType;
         tooltipTitle: string;
-        id: string;
+        id: number;
     }[];
-    activeIndex: number;
+    activeIndexId: number;
     className?: string;
-    onButtonClick: (index: number) => void;
+    onButtonClick: (id: number) => void;
 };
 export declare const SideButtonsPanel: VFC<Props>;
 export {};

package/esm/components/SideIconPanel/SideButtonsPanel.js

@@ -25,11 +25,11 @@ import classnames from 'classnames';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { useStyles } from './styles';
 export var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndex = _a.activeIndex, className = _a.className, onButtonClick = _a.onButtonClick;
+    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
     var styles = useStyles();
-    return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a, index) {
+    return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames((_b = {}, _b[styles.active] = activeIndex === index, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(index); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
+        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
     })));
 };

package/esm/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode, VFC } from 'react';
 declare type HeaderProps = {
-    mainTitle: string;
-    secondTitle: string;
+    mainTitle?: string;
+    secondTitle?: string;
+    content?: ReactNode;
     rightContent?: ReactNode;
 };
 declare type Props = HeaderProps & {

package/esm/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.js

@@ -6,12 +6,13 @@ import Divider from '@material-ui/core/Divider';
 import i18n from 'ui-i18n';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 export var SidePanelContentHeader = function (_a) {
-    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, rightContent = _a.rightContent;
+    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.container },
         React.createElement(SmallIconButtonWithTooltip, { size: "S", icon: CloseIcon, onClick: onClose, className: styles.icon, tooltipTitle: i18n.text('Close') }),
-        React.createElement(Typography, { variant: "h6" }, mainTitle),
-        React.createElement(Divider, { orientation: "vertical", flexItem: true, className: styles.divider }),
-        React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
-        rightContent));
+        content || (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: "h6" }, mainTitle),
+            React.createElement(Divider, { orientation: "vertical", flexItem: true, className: styles.divider }),
+            React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
+            rightContent))));
 };

package/esm/components/attributes/AttributesView/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import mdm from '@reltio/mdm-module';
 import AttributesView from './AttributesView';
 var mapStateToProps = function (state, ownProps) { return ({
-    entity: ownProps.entity || mdm.selectors.getEntity(state),
+    entity: ownProps.entity || mdm.selectors.getEntityWithDiff(state),
     mode: ownProps.mode || mdm.selectors.getMode(state)
 }); };
 export { AttributesView };

package/esm/components/history/HistoryTree/HistoryTree.js

@@ -10,12 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ReactResizeDetector from 'react-resize-detector';
 import i18n from 'ui-i18n';
 import { isNil } from 'ramda';
 import classnames from 'classnames';
-import { profile } from '@reltio/mdm-module';
+import { Mode } from '@reltio/mdm-sdk';
+import mdm, { profile } from '@reltio/mdm-module';
 import Button from '@material-ui/core/Button';
 import HistoryRow from '../HistoryRow/HistoryRow';
 import HistoryGraph from '../HistoryGraph/HistoryGraph';
@@ -26,6 +27,7 @@ var HistoryTree = function (_a) {
     var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, entityUri = _a.entityUri, historyEvent = _a.historyEvent, findPreviousChange = _a.findPreviousChange;
     var styles = useStyles();
     var dispatch = useDispatch();
+    var isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
     var _c = useState({ historyLanes: {}, rows: [] }), graphData = _c[0], setGraphData = _c[1];
     var _d = useState(false), isScrollable = _d[0], setIsScrollable = _d[1];
     var _e = useState(-1), selectedIndex = _e[0], setSelectedIndex = _e[1];
@@ -54,6 +56,14 @@ var HistoryTree = function (_a) {
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
     var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if (isEditableMode) {
+            if (window.confirm(i18n.text('Are you sure you want to go in history mode? All your changes will be lost.'))) {
+                dispatch(profile.mode.actions.modeUpdated(Mode.Viewing));
+            }
+            else {
+                return;
+            }
+        }
         if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
             dispatch(profile.history.actions.clearHistoryEvent());
             setSelectedIndex(0);

package/esm/components/history/hooks/useHistory.d.ts

@@ -12,5 +12,6 @@ export declare const useHistory: ({ entityUri, enabled }: Props) => {
     historyWithTotal: import("@reltio/mdm-sdk").HistoryWithTotal;
     historyFilter: HistoryFilter;
     setHistoryFilter: import("react").Dispatch<import("react").SetStateAction<HistoryFilter>>;
+    reloadHistory: () => void;
 };
 export {};

package/esm/components/history/hooks/useHistory.js

@@ -18,7 +18,7 @@ export var useHistory = function (_a) {
         offset: historyPage * MAX_HISTORY_ROWS,
         order: 'desc',
         showAll: true
-    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore;
+    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore, loadData = _e.loadData;
     var canLoadMore = useMemo(function () { return (historyPage + 1) * MAX_HISTORY_ROWS <= (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total); }, [
         historyWithTotal,
         historyPage
@@ -29,6 +29,10 @@ export var useHistory = function (_a) {
         loadMore((historyPage + 1) * MAX_HISTORY_ROWS);
         setHistoryPage(historyPage + 1);
     }, [loadMore, historyPage, canLoadMore]);
+    var reloadHistory = useCallback(function () {
+        loadData();
+        setHistoryPage(0);
+    }, [loadData]);
     return {
         isLoading: isHistoryLoading || isHistoricUrisLoading,
         canLoadMore: canLoadMore,
@@ -36,6 +40,7 @@ export var useHistory = function (_a) {
         historicUris: historicUris,
         historyWithTotal: historyWithTotal,
         historyFilter: historyFilter,
-        setHistoryFilter: setHistoryFilter
+        setHistoryFilter: setHistoryFilter,
+        reloadHistory: reloadHistory
     };
 };

package/esm/components/history/hooks/useHistoryDiff.d.ts

@@ -0,0 +1,2 @@
+import { HistoryDiff } from '@reltio/mdm-sdk';
+export declare const useHistoryDiff: () => HistoryDiff;

package/esm/components/history/hooks/useHistoryDiff.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { evolve, map } from 'ramda';
+import { entity as History, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
+import mdmModule, { HistoryMode, profile } from '@reltio/mdm-module';
+var defaultHistoryDiff = {
+    appearance: {},
+    attributes: {},
+    roles: [],
+    tags: []
+};
+var fixRefEntity = evolve({
+    refEntity: wrapInArrayIfNeeded,
+    refRelation: wrapInArrayIfNeeded
+});
+var prepareHistorySlice = function (historySlice) {
+    if (historySlice) {
+        return evolve({
+            attributes: map(map(fixRefEntity))
+        })(historySlice);
+    }
+    return historySlice;
+};
+export var useHistoryDiff = function () {
+    var dispatch = useDispatch();
+    var historySlice = useSelector(mdmModule.selectors.getHistorySlice);
+    var historyDiff = useSelector(mdmModule.selectors.getHistoryDiff);
+    var historyMode = useSelector(mdmModule.selectors.getHistoryMode);
+    var entity = useSelector(mdmModule.selectors.getEntity);
+    useEffect(function () {
+        if (historySlice) {
+            var aEntity = historySlice.aEntity, bEntity = historySlice.bEntity;
+            var historyManager = History.HistoryManager.createHistoryManager(History.AttributesDiff);
+            var historyDiff_1 = historyManager.computeEntityHistoryDiff(prepareHistorySlice(historyMode === HistoryMode.Current ? entity : bEntity), prepareHistorySlice(aEntity));
+            dispatch(profile.history.actions.setHistoryDiff(historyDiff_1));
+        }
+    }, [historySlice, historyMode, dispatch, entity]);
+    return historyDiff || defaultHistoryDiff;
+};

package/esm/components/history/hooks/useHistoryWithTotal.d.ts

@@ -13,5 +13,6 @@ export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, .
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     loadMore: (offset: number) => void;
+    loadData: () => void;
 };
 export {};

package/esm/components/history/hooks/useHistoryWithTotal.js

@@ -71,5 +71,5 @@ export var useHistoryWithTotal = function (_a) {
             loadData();
         }
     }, [loadData, enabled]);
-    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore };
+    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore, loadData: loadData };
 };

package/esm/components/history/index.d.ts

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/esm/components/history/index.js

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/esm/contexts/HistoryAppearanceContext/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 export var HistoryDiffContext = React.createContext({
     appearance: undefined,
-    attributes: undefined
+    attributes: undefined,
+    roles: undefined,
+    tags: undefined
 });
 HistoryDiffContext.displayName = 'HistoryDiffContext';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.915",
+  "version": "1.4.916",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "^2.7.0",
-    "@reltio/mdm-module": "^1.4.915",
-    "@reltio/mdm-sdk": "^1.4.915",
+    "@reltio/mdm-module": "^1.4.916",
+    "@reltio/mdm-sdk": "^1.4.916",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",