@reltio/components 1.4.902 → 1.4.906

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

@@ -1,8 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import { HistoryChange } from '@reltio/mdm-sdk';
 declare type Props = {
     change: HistoryChange;
     isCurrent?: boolean;
+    isSelected: boolean;
+    onClick: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ change, isCurrent }: Props) => JSX.Element>;
-export default _default;
+declare const HistoryRow: ({ change, isCurrent, isSelected, onClick }: Props) => JSX.Element;
+export default HistoryRow;

package/cjs/components/history/HistoryRow/HistoryRow.js

@@ -1,28 +1,9 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -30,11 +11,12 @@ var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var activities_1 = require("../../activityLog/utils/activities");
 var styles_1 = require("./styles");
 var HistoryRow = function (_a) {
-    var change = _a.change, isCurrent = _a.isCurrent;
+    var _b;
+    var change = _a.change, isCurrent = _a.isCurrent, isSelected = _a.isSelected, onClick = _a.onClick;
     var uri = change.uri, type = change.type, matchGroups = change.matchGroups, user = change.user, timestamp = change.timestamp;
     var color = mdm_sdk_1.getContributorColor(uri);
     var styles = styles_1.useStyles({ color: color });
-    return (react_1.default.createElement("div", { className: styles.historyRow },
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.historyRow, (_b = {}, _b[styles.selected] = isSelected, _b)), onClick: onClick },
         react_1.default.createElement("div", { className: styles.rowHeader },
             react_1.default.createElement("div", { className: styles.badge }),
             react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.title, { bold: isCurrent }) }, isCurrent ? ui_i18n_1.default.text('Current view') : activities_1.getActivityLabel(type)),
@@ -45,4 +27,4 @@ var HistoryRow = function (_a) {
             matchGroups.join(', '))),
         react_1.default.createElement(Typography_1.default, { className: styles.user }, user)));
 };
-exports.default = react_1.memo(HistoryRow);
+exports.default = HistoryRow;

package/cjs/components/history/HistoryRow/styles.d.ts

@@ -1,5 +1,5 @@
 declare type Type = {
     color?: string;
 };
-export declare const useStyles: (props: Type) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "date" | "user" | "badge" | "historyRow" | "rowHeader">;
+export declare const useStyles: (props: Type) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "date" | "selected" | "user" | "badge" | "historyRow" | "rowHeader">;
 export {};

package/cjs/components/history/HistoryRow/styles.js

@@ -4,7 +4,21 @@ exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles(function () { return ({
     historyRow: {
-        padding: '8px 12px 16px'
+        position: 'relative',
+        padding: '8px 12px 16px',
+        cursor: 'pointer'
+    },
+    selected: {
+        background: 'rgba(0,0,0,0.05)',
+        '&:before': {
+            content: '""',
+            background: 'rgba(0,0,0,0.05)',
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            left: '-100%',
+            top: 0
+        }
     },
     rowHeader: {
         display: 'flex',

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { HistoryData } from '../types';
+import { HistoryEvent } from '@reltio/mdm-module';
+import { HistoryData, HistoryRowData } from '../types';
 declare type Props = {
     historyData: HistoryData;
     canLoadMore: boolean;
     onLoadMore: () => void;
     isLoading: boolean;
+    entityUri: string;
+    historyEvent: HistoryEvent;
+    findPreviousChange: (index: number, uri: string) => HistoryRowData;
 };
-declare const HistoryTree: ({ historyData, isLoading, canLoadMore, onLoadMore }: Props) => JSX.Element;
+declare const HistoryTree: ({ historyData, isLoading, canLoadMore, onLoadMore, entityUri, historyEvent, findPreviousChange }: Props) => JSX.Element;
 export default HistoryTree;

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

@@ -34,10 +34,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
 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 Button_1 = __importDefault(require("@material-ui/core/Button"));
 var HistoryRow_1 = __importDefault(require("../HistoryRow/HistoryRow"));
 var HistoryGraph_1 = __importDefault(require("../HistoryGraph/HistoryGraph"));
@@ -45,11 +47,24 @@ var LinearLoadIndicator_1 = __importDefault(require("../../LinearLoadIndicator/L
 var styles_1 = require("./styles");
 var HistoryTree = function (_a) {
     var _b;
-    var _c;
-    var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
+    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 _d = react_1.useState({ historyLanes: {}, rows: [] }), graphData = _d[0], setGraphData = _d[1];
-    var _e = react_1.useState(false), isScrollable = _e[0], setIsScrollable = _e[1];
+    var dispatch = react_redux_1.useDispatch();
+    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];
+    react_1.useEffect(function () {
+        if (ramda_1.isNil(historyEvent)) {
+            setSelectedIndex(0);
+            return;
+        }
+        var isCurrentEventChange = function (change) {
+            return (change === null || change === void 0 ? void 0 : change.uri) === ((historyEvent === null || historyEvent === void 0 ? void 0 : historyEvent.overrideUri) || entityUri) && (change === null || change === void 0 ? void 0 : change.timestamp) === (historyEvent === null || historyEvent === void 0 ? void 0 : historyEvent.aStamp);
+        };
+        var selectedChangeByIndex = selectedIndex !== -1 ? historyData.rows[selectedIndex] : null;
+        var currentEventChangeIndex = historyData.rows.findIndex(function (change) { return isCurrentEventChange(change); });
+        setSelectedIndex(isCurrentEventChange(selectedChangeByIndex) ? selectedIndex : currentEventChangeIndex);
+    }, [historyData.rows, historyEvent]);
     var graphRef = react_1.useRef(null);
     var rowsRef = react_1.useCallback(function (node) {
         var _a;
@@ -62,12 +77,31 @@ var HistoryTree = function (_a) {
         var _a = (graphRef === null || graphRef === void 0 ? void 0 : graphRef.current) || {}, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollLeft = _a.scrollLeft;
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
+    var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
+            dispatch(mdm_module_1.profile.history.actions.clearHistoryEvent());
+            setSelectedIndex(0);
+        }
+        else if (!isCurrent && !isSelected) {
+            var aChange = findPreviousChange(index - 1, change.uri || entityUri);
+            var bChange = findPreviousChange(index, change.uri || entityUri);
+            var aStamp = aChange === null || aChange === void 0 ? void 0 : aChange.timestamp;
+            var bStamp = bChange === null || bChange === void 0 ? void 0 : bChange.timestamp;
+            var overrideUri = (change === null || change === void 0 ? void 0 : change.uri) === entityUri ? null : change === null || change === void 0 ? void 0 : change.uri;
+            dispatch(mdm_module_1.profile.history.actions.setHistoryEvent({ aStamp: aStamp, bStamp: bStamp, overrideUri: overrideUri }));
+            setSelectedIndex(index);
+        }
+    };
     return (react_1.default.createElement("div", { className: styles.historyTree },
         isLoading && react_1.default.createElement(LinearLoadIndicator_1.default, null),
         react_1.default.createElement("div", { className: classnames_1.default(styles.graph, (_b = {}, _b[styles.shadow] = isScrollable, _b)), onScroll: handleGraphScroll, ref: graphRef },
             react_1.default.createElement(HistoryGraph_1.default, { graphData: graphData }),
             react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: handleGraphScroll })),
-        react_1.default.createElement("div", { ref: rowsRef, className: styles.history }, (_c = historyData.rows) === null || _c === void 0 ? void 0 : _c.map(function (change, i) { return (react_1.default.createElement(HistoryRow_1.default, { key: "row-" + i, change: change, isCurrent: i === 0 })); })),
+        react_1.default.createElement("div", { ref: rowsRef, className: styles.history }, historyData.rows.map(function (change, i) {
+            var isSelected = i === selectedIndex;
+            var isCurrent = i === 0;
+            return (react_1.default.createElement(HistoryRow_1.default, { key: "row-" + i, change: change, isCurrent: isCurrent, isSelected: isSelected, onClick: function () { return handleHistoryRowClick(i, change, isSelected, isCurrent); } }));
+        })),
         canLoadMore && (react_1.default.createElement("div", { className: styles.buttonContainer },
             react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onLoadMore(); } }, ui_i18n_1.default.text('Show more'))))));
 };

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { HistoryWithTotal } from '@reltio/mdm-sdk';
+import { HistoryEvent } from '@reltio/mdm-module';
 declare type Props = {
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     contributorsUris: string[];
     entityUri: string;
+    historyEvent: HistoryEvent;
     canLoadMore: boolean;
     onLoadMore: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal, contributorsUris, entityUri, canLoadMore, onLoadMore }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal, contributorsUris, entityUri, canLoadMore, onLoadMore, historyEvent }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/history/HistoryView/HistoryView.js

@@ -28,15 +28,19 @@ var ContributorsPanel_1 = __importDefault(require("../ContributorsPanel/Contribu
 var useHistoryTree_1 = require("../hooks/useHistoryTree");
 var styles_1 = require("./styles");
 var HistoryView = function (_a) {
-    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
+    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, historyEvent = _a.historyEvent;
     var styles = styles_1.useStyles();
     var _b = react_1.useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
     react_1.useEffect(function () {
         setSelectedUris(contributorsUris);
     }, [contributorsUris]);
-    var historyData = useHistoryTree_1.useHistoryTree({ entityUri: entityUri, historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes, selectedUris: selectedUris });
+    var _c = useHistoryTree_1.useHistoryTree({
+        entityUri: entityUri,
+        historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes,
+        selectedUris: selectedUris
+    }), historyData = _c.historyData, findPreviousChange = _c.findPreviousChange;
     return (react_1.default.createElement("div", { className: styles.root },
         react_1.default.createElement(ContributorsPanel_1.default, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
-        react_1.default.createElement(HistoryTree_1.default, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore })));
+        react_1.default.createElement(HistoryTree_1.default, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore, entityUri: entityUri, historyEvent: historyEvent, findPreviousChange: findPreviousChange })));
 };
 exports.default = react_1.memo(HistoryView);

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

@@ -1,4 +1,11 @@
-export declare const useHistorySlice: () => {
+import { HistoryEvent } from '@reltio/mdm-module';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    historyEvent: HistoryEvent;
+};
+export declare const useHistorySlice: ({ entity, historyEvent }: Props) => {
     isLoading: boolean;
     historySlice: import("@reltio/mdm-module").HistorySlice;
 };
+export {};

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

@@ -25,17 +25,16 @@ var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var hooks_1 = require("../../../hooks");
-var useHistorySlice = function () {
-    var _a = react_1.useState(false), isLoading = _a[0], setIsLoading = _a[1];
-    var historyEvent = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryEvent);
+var useHistorySlice = function (_a) {
+    var entity = _a.entity, historyEvent = _a.historyEvent;
+    var _b = react_1.useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var historySlice = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistorySlice);
-    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
     var dispatch = react_redux_1.useDispatch();
     var safePromise = hooks_1.useSafePromise();
-    var _b = historyEvent || {}, aStamp = _b.aStamp, bStamp = _b.bStamp, overrideUri = _b.overrideUri;
+    var _c = historyEvent || {}, aStamp = _c.aStamp, bStamp = _c.bStamp, overrideUri = _c.overrideUri;
     var entityUri = overrideUri || (entity === null || entity === void 0 ? void 0 : entity.uri);
     react_1.useEffect(function () {
-        if (!historySlice && historyEvent && entityUri) {
+        if (historyEvent && entityUri) {
             setIsLoading(true);
             safePromise(Promise.all([
                 mdm_sdk_1.getEntityTimeSlice(entityUri, aStamp),

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

@@ -1,9 +1,20 @@
 import { HistoryChange } from '@reltio/mdm-sdk';
-import { HistoryData } from './../types';
+import { HistoryRowData } from './../types';
 declare type Props = {
     entityUri: string;
     historyChanges: HistoryChange[];
     selectedUris: string[];
 };
-export declare const useHistoryTree: ({ entityUri, historyChanges, selectedUris }: Props) => HistoryData;
+export declare const useHistoryTree: ({ entityUri, historyChanges, selectedUris }: Props) => {
+    historyData: {
+        historyLanes: {
+            [x: string]: {
+                index: number;
+                lifeTime: any[];
+            };
+        };
+        rows: HistoryRowData[];
+    };
+    findPreviousChange: (index: number, uri: string) => any;
+};
 export {};

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

@@ -42,9 +42,12 @@ var useHistoryTree = function (_a) {
             }
             return null;
         });
-        var findPreviousChange = function (index, involvedUris) {
+        var findNextChange = function (index, involvedUris) {
             return ramda_1.pipe(ramda_1.slice(0, index - 1), ramda_1.reverse, ramda_1.find(checkChange(involvedUris)))(historyChanges);
         };
+        var findPreviousChange = function (index, uri) {
+            return ramda_1.pipe(ramda_1.slice(index + 1, Infinity), ramda_1.find(checkChange(uri)))(rows);
+        };
         var checkLaneUri = function (uri) {
             var contributorLane = historyLanes[uri];
             if (!contributorLane && (!selectedUris || selectedUris.includes(uri))) {
@@ -135,13 +138,13 @@ var useHistoryTree = function (_a) {
             var _a;
             switch (change.type) {
                 case types_1.HistoryChangeTypes.ENTITIES_SPLITTED:
-                    if (!findPreviousChange(index, change.uri || entityUri)) {
+                    if (!findNextChange(index, change.uri || entityUri)) {
                         return;
                     }
                     else {
                         var uri = change.uri;
                         var involvedUris = change.uris ? [change.uris, uri] : [uri];
-                        var lostMergeChange = findPreviousChange(index, involvedUris);
+                        var lostMergeChange = findNextChange(index, involvedUris);
                         if (lostMergeChange && (!uri || uri === lostMergeChange.uri))
                             return;
                     }
@@ -217,7 +220,10 @@ var useHistoryTree = function (_a) {
             row.index = i;
             row.uri = row.uri || entityUri;
         });
-        return { historyLanes: historyLanes, rows: rows };
+        return {
+            historyData: { historyLanes: historyLanes, rows: rows },
+            findPreviousChange: findPreviousChange
+        };
     }, [entityUri, historyChanges, selectedUris]);
 };
 exports.useHistoryTree = useHistoryTree;

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

@@ -1,8 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import { HistoryChange } from '@reltio/mdm-sdk';
 declare type Props = {
     change: HistoryChange;
     isCurrent?: boolean;
+    isSelected: boolean;
+    onClick: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ change, isCurrent }: Props) => JSX.Element>;
-export default _default;
+declare const HistoryRow: ({ change, isCurrent, isSelected, onClick }: Props) => JSX.Element;
+export default HistoryRow;

package/esm/components/history/HistoryRow/HistoryRow.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import { getContributorColor } from '@reltio/mdm-sdk';
@@ -6,11 +6,12 @@ import Typography from '@material-ui/core/Typography';
 import { getActivityLabel } from '../../activityLog/utils/activities';
 import { useStyles } from './styles';
 var HistoryRow = function (_a) {
-    var change = _a.change, isCurrent = _a.isCurrent;
+    var _b;
+    var change = _a.change, isCurrent = _a.isCurrent, isSelected = _a.isSelected, onClick = _a.onClick;
     var uri = change.uri, type = change.type, matchGroups = change.matchGroups, user = change.user, timestamp = change.timestamp;
     var color = getContributorColor(uri);
     var styles = useStyles({ color: color });
-    return (React.createElement("div", { className: styles.historyRow },
+    return (React.createElement("div", { className: classnames(styles.historyRow, (_b = {}, _b[styles.selected] = isSelected, _b)), onClick: onClick },
         React.createElement("div", { className: styles.rowHeader },
             React.createElement("div", { className: styles.badge }),
             React.createElement(Typography, { className: classnames(styles.title, { bold: isCurrent }) }, isCurrent ? i18n.text('Current view') : getActivityLabel(type)),
@@ -21,4 +22,4 @@ var HistoryRow = function (_a) {
             matchGroups.join(', '))),
         React.createElement(Typography, { className: styles.user }, user)));
 };
-export default memo(HistoryRow);
+export default HistoryRow;

package/esm/components/history/HistoryRow/styles.d.ts

@@ -1,5 +1,5 @@
 declare type Type = {
     color?: string;
 };
-export declare const useStyles: (props: Type) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "date" | "user" | "badge" | "historyRow" | "rowHeader">;
+export declare const useStyles: (props: Type) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "date" | "selected" | "user" | "badge" | "historyRow" | "rowHeader">;
 export {};

package/esm/components/history/HistoryRow/styles.js

@@ -1,7 +1,21 @@
 import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles(function () { return ({
     historyRow: {
-        padding: '8px 12px 16px'
+        position: 'relative',
+        padding: '8px 12px 16px',
+        cursor: 'pointer'
+    },
+    selected: {
+        background: 'rgba(0,0,0,0.05)',
+        '&:before': {
+            content: '""',
+            background: 'rgba(0,0,0,0.05)',
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            left: '-100%',
+            top: 0
+        }
     },
     rowHeader: {
         display: 'flex',

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { HistoryData } from '../types';
+import { HistoryEvent } from '@reltio/mdm-module';
+import { HistoryData, HistoryRowData } from '../types';
 declare type Props = {
     historyData: HistoryData;
     canLoadMore: boolean;
     onLoadMore: () => void;
     isLoading: boolean;
+    entityUri: string;
+    historyEvent: HistoryEvent;
+    findPreviousChange: (index: number, uri: string) => HistoryRowData;
 };
-declare const HistoryTree: ({ historyData, isLoading, canLoadMore, onLoadMore }: Props) => JSX.Element;
+declare const HistoryTree: ({ historyData, isLoading, canLoadMore, onLoadMore, entityUri, historyEvent, findPreviousChange }: Props) => JSX.Element;
 export default HistoryTree;

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

@@ -9,11 +9,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch } 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 Button from '@material-ui/core/Button';
 import HistoryRow from '../HistoryRow/HistoryRow';
 import HistoryGraph from '../HistoryGraph/HistoryGraph';
@@ -21,11 +23,24 @@ import LinearLoadIndicator from '../../LinearLoadIndicator/LinearLoadIndicator';
 import { useStyles } from './styles';
 var HistoryTree = function (_a) {
     var _b;
-    var _c;
-    var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
+    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 _d = useState({ historyLanes: {}, rows: [] }), graphData = _d[0], setGraphData = _d[1];
-    var _e = useState(false), isScrollable = _e[0], setIsScrollable = _e[1];
+    var dispatch = useDispatch();
+    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];
+    useEffect(function () {
+        if (isNil(historyEvent)) {
+            setSelectedIndex(0);
+            return;
+        }
+        var isCurrentEventChange = function (change) {
+            return (change === null || change === void 0 ? void 0 : change.uri) === ((historyEvent === null || historyEvent === void 0 ? void 0 : historyEvent.overrideUri) || entityUri) && (change === null || change === void 0 ? void 0 : change.timestamp) === (historyEvent === null || historyEvent === void 0 ? void 0 : historyEvent.aStamp);
+        };
+        var selectedChangeByIndex = selectedIndex !== -1 ? historyData.rows[selectedIndex] : null;
+        var currentEventChangeIndex = historyData.rows.findIndex(function (change) { return isCurrentEventChange(change); });
+        setSelectedIndex(isCurrentEventChange(selectedChangeByIndex) ? selectedIndex : currentEventChangeIndex);
+    }, [historyData.rows, historyEvent]);
     var graphRef = useRef(null);
     var rowsRef = useCallback(function (node) {
         var _a;
@@ -38,12 +53,31 @@ var HistoryTree = function (_a) {
         var _a = (graphRef === null || graphRef === void 0 ? void 0 : graphRef.current) || {}, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollLeft = _a.scrollLeft;
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
+    var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
+            dispatch(profile.history.actions.clearHistoryEvent());
+            setSelectedIndex(0);
+        }
+        else if (!isCurrent && !isSelected) {
+            var aChange = findPreviousChange(index - 1, change.uri || entityUri);
+            var bChange = findPreviousChange(index, change.uri || entityUri);
+            var aStamp = aChange === null || aChange === void 0 ? void 0 : aChange.timestamp;
+            var bStamp = bChange === null || bChange === void 0 ? void 0 : bChange.timestamp;
+            var overrideUri = (change === null || change === void 0 ? void 0 : change.uri) === entityUri ? null : change === null || change === void 0 ? void 0 : change.uri;
+            dispatch(profile.history.actions.setHistoryEvent({ aStamp: aStamp, bStamp: bStamp, overrideUri: overrideUri }));
+            setSelectedIndex(index);
+        }
+    };
     return (React.createElement("div", { className: styles.historyTree },
         isLoading && React.createElement(LinearLoadIndicator, null),
         React.createElement("div", { className: classnames(styles.graph, (_b = {}, _b[styles.shadow] = isScrollable, _b)), onScroll: handleGraphScroll, ref: graphRef },
             React.createElement(HistoryGraph, { graphData: graphData }),
             React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleGraphScroll })),
-        React.createElement("div", { ref: rowsRef, className: styles.history }, (_c = historyData.rows) === null || _c === void 0 ? void 0 : _c.map(function (change, i) { return (React.createElement(HistoryRow, { key: "row-" + i, change: change, isCurrent: i === 0 })); })),
+        React.createElement("div", { ref: rowsRef, className: styles.history }, historyData.rows.map(function (change, i) {
+            var isSelected = i === selectedIndex;
+            var isCurrent = i === 0;
+            return (React.createElement(HistoryRow, { key: "row-" + i, change: change, isCurrent: isCurrent, isSelected: isSelected, onClick: function () { return handleHistoryRowClick(i, change, isSelected, isCurrent); } }));
+        })),
         canLoadMore && (React.createElement("div", { className: styles.buttonContainer },
             React.createElement(Button, { color: "primary", onClick: function () { return onLoadMore(); } }, i18n.text('Show more'))))));
 };

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { HistoryWithTotal } from '@reltio/mdm-sdk';
+import { HistoryEvent } from '@reltio/mdm-module';
 declare type Props = {
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     contributorsUris: string[];
     entityUri: string;
+    historyEvent: HistoryEvent;
     canLoadMore: boolean;
     onLoadMore: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal, contributorsUris, entityUri, canLoadMore, onLoadMore }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isLoading, historyWithTotal, contributorsUris, entityUri, canLoadMore, onLoadMore, historyEvent }: Props) => JSX.Element>;
 export default _default;

package/esm/components/history/HistoryView/HistoryView.js

@@ -4,15 +4,19 @@ import ContributorsPanel from '../ContributorsPanel/ContributorsPanel';
 import { useHistoryTree } from '../hooks/useHistoryTree';
 import { useStyles } from './styles';
 var HistoryView = function (_a) {
-    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore;
+    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, historyEvent = _a.historyEvent;
     var styles = useStyles();
     var _b = useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
     useEffect(function () {
         setSelectedUris(contributorsUris);
     }, [contributorsUris]);
-    var historyData = useHistoryTree({ entityUri: entityUri, historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes, selectedUris: selectedUris });
+    var _c = useHistoryTree({
+        entityUri: entityUri,
+        historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes,
+        selectedUris: selectedUris
+    }), historyData = _c.historyData, findPreviousChange = _c.findPreviousChange;
     return (React.createElement("div", { className: styles.root },
         React.createElement(ContributorsPanel, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
-        React.createElement(HistoryTree, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore })));
+        React.createElement(HistoryTree, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore, entityUri: entityUri, historyEvent: historyEvent, findPreviousChange: findPreviousChange })));
 };
 export default memo(HistoryView);

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

@@ -1,4 +1,11 @@
-export declare const useHistorySlice: () => {
+import { HistoryEvent } from '@reltio/mdm-module';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    historyEvent: HistoryEvent;
+};
+export declare const useHistorySlice: ({ entity, historyEvent }: Props) => {
     isLoading: boolean;
     historySlice: import("@reltio/mdm-module").HistorySlice;
 };
+export {};

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

@@ -3,17 +3,16 @@ import { useSelector, useDispatch } from 'react-redux';
 import mdmModule, { profile } from '@reltio/mdm-module';
 import { getEntityTimeSlice } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../../../hooks';
-export var useHistorySlice = function () {
-    var _a = useState(false), isLoading = _a[0], setIsLoading = _a[1];
-    var historyEvent = useSelector(mdmModule.selectors.getHistoryEvent);
+export var useHistorySlice = function (_a) {
+    var entity = _a.entity, historyEvent = _a.historyEvent;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var historySlice = useSelector(mdmModule.selectors.getHistorySlice);
-    var entity = useSelector(mdmModule.selectors.getEntity);
     var dispatch = useDispatch();
     var safePromise = useSafePromise();
-    var _b = historyEvent || {}, aStamp = _b.aStamp, bStamp = _b.bStamp, overrideUri = _b.overrideUri;
+    var _c = historyEvent || {}, aStamp = _c.aStamp, bStamp = _c.bStamp, overrideUri = _c.overrideUri;
     var entityUri = overrideUri || (entity === null || entity === void 0 ? void 0 : entity.uri);
     useEffect(function () {
-        if (!historySlice && historyEvent && entityUri) {
+        if (historyEvent && entityUri) {
             setIsLoading(true);
             safePromise(Promise.all([
                 getEntityTimeSlice(entityUri, aStamp),

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

@@ -1,9 +1,20 @@
 import { HistoryChange } from '@reltio/mdm-sdk';
-import { HistoryData } from './../types';
+import { HistoryRowData } from './../types';
 declare type Props = {
     entityUri: string;
     historyChanges: HistoryChange[];
     selectedUris: string[];
 };
-export declare const useHistoryTree: ({ entityUri, historyChanges, selectedUris }: Props) => HistoryData;
+export declare const useHistoryTree: ({ entityUri, historyChanges, selectedUris }: Props) => {
+    historyData: {
+        historyLanes: {
+            [x: string]: {
+                index: number;
+                lifeTime: any[];
+            };
+        };
+        rows: HistoryRowData[];
+    };
+    findPreviousChange: (index: number, uri: string) => any;
+};
 export {};

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

@@ -39,9 +39,12 @@ export var useHistoryTree = function (_a) {
             }
             return null;
         });
-        var findPreviousChange = function (index, involvedUris) {
+        var findNextChange = function (index, involvedUris) {
             return pipe(slice(0, index - 1), reverse, find(checkChange(involvedUris)))(historyChanges);
         };
+        var findPreviousChange = function (index, uri) {
+            return pipe(slice(index + 1, Infinity), find(checkChange(uri)))(rows);
+        };
         var checkLaneUri = function (uri) {
             var contributorLane = historyLanes[uri];
             if (!contributorLane && (!selectedUris || selectedUris.includes(uri))) {
@@ -132,13 +135,13 @@ export var useHistoryTree = function (_a) {
             var _a;
             switch (change.type) {
                 case HistoryChangeTypes.ENTITIES_SPLITTED:
-                    if (!findPreviousChange(index, change.uri || entityUri)) {
+                    if (!findNextChange(index, change.uri || entityUri)) {
                         return;
                     }
                     else {
                         var uri = change.uri;
                         var involvedUris = change.uris ? [change.uris, uri] : [uri];
-                        var lostMergeChange = findPreviousChange(index, involvedUris);
+                        var lostMergeChange = findNextChange(index, involvedUris);
                         if (lostMergeChange && (!uri || uri === lostMergeChange.uri))
                             return;
                     }
@@ -214,7 +217,10 @@ export var useHistoryTree = function (_a) {
             row.index = i;
             row.uri = row.uri || entityUri;
         });
-        return { historyLanes: historyLanes, rows: rows };
+        return {
+            historyData: { historyLanes: historyLanes, rows: rows },
+            findPreviousChange: findPreviousChange
+        };
     }, [entityUri, historyChanges, selectedUris]);
 };
 var findClosestLife = function (lifeTime, timestamp) {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.902",
+  "version": "1.4.906",
   "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.902",
-    "@reltio/mdm-sdk": "^1.4.902",
+    "@reltio/mdm-module": "^1.4.906",
+    "@reltio/mdm-sdk": "^1.4.906",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",