@reltio/components 1.4.1526 → 1.4.1528

package/cjs/components/MatchRulesBlock/MatchRulesBlock.js

@@ -25,8 +25,8 @@ var MatchRulesBlock = function (_a) {
     var showSimple = !isTransitive && !hasNotMatch;
     var showNotMatch = hasNotMatch && variant !== types_1.MatchRuleVariant.excludeNotMatch;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        isTransitive ? (react_1.default.createElement(TransitiveMatchBlock_1.default, { transitiveMatchRules: (0, mdm_sdk_1.getTransitiveMatchRules)(metadata, match, entitiesMap) })) : null,
-        showSimple ? (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { variant: variant, matchRules: matchRules, Component: SimpleMatchRulesBlock_1.default })) : null,
+        isTransitive ? (react_1.default.createElement(TransitiveMatchBlock_1.default, { transitiveMatchRules: (0, mdm_sdk_1.getTransitiveMatchRules)(metadata, match, entitiesMap), matchRuleSummaries: match.matchRuleSummaries })) : null,
+        showSimple ? (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { variant: variant, matchRules: matchRules, matchRuleSummaries: match.matchRuleSummaries, Component: SimpleMatchRulesBlock_1.default })) : null,
         showNotMatch ? react_1.default.createElement(NotMatchRule_1.default, null) : null));
 };
 exports.default = MatchRulesBlock;

package/cjs/components/MatchRulesBlock/SimpleMatchRules/SimpleMatchRules.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 declare type Props = {
     isMlMatch?: boolean;
     matchRules: MatchRules;
     className?: string;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const SimpleMatchRules: ({ isMlMatch, matchRules, className }: Props) => JSX.Element;
+declare const SimpleMatchRules: ({ isMlMatch, matchRules, className, matchRuleSummaries }: Props) => JSX.Element;
 export default SimpleMatchRules;

package/cjs/components/MatchRulesBlock/SimpleMatchRules/SimpleMatchRules.js

@@ -5,17 +5,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var MatchRulesTitle_1 = __importDefault(require("../MatchRulesTitle"));
 var styles_1 = __importDefault(require("./styles"));
 var NegativeRuleIcon_1 = __importDefault(require("../../../icons/NegativeRuleIcon"));
 var SimpleMatchRules = function (_a) {
-    var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className;
+    var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = (0, styles_1.default)();
     return (react_1.default.createElement("div", { "data-reltio-id": "simple-match-rules", className: (0, classnames_1.default)(styles.container, className) },
         react_1.default.createElement("div", { className: styles.title },
             react_1.default.createElement(MatchRulesTitle_1.default, { isMlMatch: isMlMatch })),
-        react_1.default.createElement("div", { className: styles.labelsContainer }, matchRules.map(function (match) { return (react_1.default.createElement("div", { key: match.uri },
-            '- ',
-            match.negativeRule && react_1.default.createElement(NegativeRuleIcon_1.default, { className: styles.negativeRuleIcon }), "".concat(match.label))); }))));
+        react_1.default.createElement("div", { className: styles.labelsContainer }, matchRules.map(function (matchRule) {
+            var matchRuleSummary = (0, mdm_sdk_1.getMatchRuleSummary)(matchRuleSummaries, matchRule.uri);
+            var relevancePercentage = (0, mdm_sdk_1.formatRelevanceScore)(matchRuleSummary);
+            return (react_1.default.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
+                react_1.default.createElement("div", { className: styles.matchRuleLabel },
+                    '- ',
+                    matchRule.negativeRule && react_1.default.createElement(NegativeRuleIcon_1.default, { className: styles.negativeRuleIcon }), "".concat(matchRule.label)),
+                relevancePercentage && (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Relevance score') },
+                    react_1.default.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));
+        }))));
 };
 exports.default = SimpleMatchRules;

package/cjs/components/MatchRulesBlock/SimpleMatchRules/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "negativeRuleIcon" | "labelsContainer">;
+declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel" | "relevanceScore">;
 export default styles;

package/cjs/components/MatchRulesBlock/SimpleMatchRules/styles.js

@@ -18,6 +18,18 @@ var styles = (0, styles_1.makeStyles)(function (theme) { return ({
         position: 'relative',
         marginRight: '4px',
         top: '1px'
+    },
+    matchRuleInfo: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between'
+    },
+    matchRuleLabel: {
+        wordBreak: 'break-word'
+    },
+    relevanceScore: {
+        marginLeft: '8px',
+        color: theme.palette.text.secondary
     }
 }); });
 exports.default = styles;

package/cjs/components/MatchRulesBlock/SimpleMatchRulesBlock/SimpleMatchRulesBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
     tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
@@ -15,6 +16,7 @@ export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<
 declare type Props = {
     isMlMatch?: boolean;
     matchRules: MatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const SimpleMatchRulesBlock: ({ isMlMatch, matchRules }: Props) => JSX.Element;
+declare const SimpleMatchRulesBlock: ({ isMlMatch, matchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default SimpleMatchRulesBlock;

package/cjs/components/MatchRulesBlock/SimpleMatchRulesBlock/SimpleMatchRulesBlock.js

@@ -37,14 +37,14 @@ var MlMatch_1 = __importDefault(require("../../../icons/MlMatch"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 exports.MatchRuleBadgeWithTooltip = (0, HOCs_1.withTooltip)(MatchRulesBadge_1.default);
 var SimpleMatchRulesBlock = function (_a) {
-    var _b = _a.isMlMatch, isMlMatch = _b === void 0 ? false : _b, matchRules = _a.matchRules;
+    var _b = _a.isMlMatch, isMlMatch = _b === void 0 ? false : _b, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = (0, styles_1.default)();
     var _c = (0, react_1.useState)(false), expanded = _c[0], setExpanded = _c[1];
     var handleOnExpand = (0, react_1.useCallback)(function () { return setExpanded(function (expand) { return !expand; }); }, []);
-    return (react_1.default.createElement("div", { className: styles.container },
+    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "simple-match-rules-block" },
         react_1.default.createElement(exports.MatchRuleBadgeWithTooltip, { tooltipTitle: react_1.default.createElement(MatchRulesTooltip_1.default, { matchRules: matchRules, isMlMatch: isMlMatch }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, isMlMatch ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(MlMatch_1.default, { className: styles.icon }),
             ui_i18n_1.default.text('Match IQ'))) : (ui_i18n_1.default.text('Rules'))),
-        expanded ? (react_1.default.createElement(SimpleMatchRules_1.default, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch })) : null));
+        expanded ? (react_1.default.createElement(SimpleMatchRules_1.default, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch, matchRuleSummaries: matchRuleSummaries })) : null));
 };
 exports.default = SimpleMatchRulesBlock;

package/cjs/components/MatchRulesBlock/SimpleMatchRulesBlock/styles.js

@@ -8,7 +8,8 @@ var styles = (0, styles_1.makeStyles)({
         alignItems: 'flex-start'
     },
     rulesContainer: {
-        marginLeft: '16px'
+        marginLeft: '16px',
+        width: 'calc(100% - 16px)'
     },
     icon: {
         height: '17px',

package/cjs/components/MatchRulesBlock/SimpleMatchRulesBuilder/SimpleMatchRulesBuilder.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules, MatchRuleVariant } from '../types';
 declare type Props = {
     matchRules: MatchRules;
     Component: React.ElementType;
     className?: string;
     variant?: MatchRuleVariant;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
 declare const SimpleMatchRulesBuilder: {
     ({ matchRules, Component, variant, ...otherProps }: Props): JSX.Element;

package/cjs/components/MatchRulesBlock/TransitiveMatchBlock/TransitiveMatchBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { TransitiveMatchRules } from '../types';
 export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
     tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
@@ -14,6 +15,7 @@ export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<
 } & React.RefAttributes<HTMLDivElement>>;
 declare type Props = {
     transitiveMatchRules: TransitiveMatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const TransitiveMatchBlock: ({ transitiveMatchRules }: Props) => JSX.Element;
+declare const TransitiveMatchBlock: ({ transitiveMatchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default TransitiveMatchBlock;

package/cjs/components/MatchRulesBlock/TransitiveMatchBlock/TransitiveMatchBlock.js

@@ -47,7 +47,7 @@ var HOCs_1 = require("../../../HOCs");
 var TransitiveMatchRulesTooltip_1 = __importDefault(require("../TransitiveMatchRulesTooltip/TransitiveMatchRulesTooltip"));
 exports.MatchRuleBadgeWithTooltip = (0, HOCs_1.withTooltip)(MatchRulesBadge_1.default);
 var TransitiveMatchBlock = function (_a) {
-    var transitiveMatchRules = _a.transitiveMatchRules;
+    var transitiveMatchRules = _a.transitiveMatchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = (0, styles_1.default)();
     var _b = (0, react_1.useState)(false), expanded = _b[0], setExpanded = _b[1];
     var handleOnExpand = (0, react_1.useCallback)(function () { return setExpanded(function (expand) { return !expand; }); }, []);
@@ -55,7 +55,7 @@ var TransitiveMatchBlock = function (_a) {
         react_1.default.createElement(exports.MatchRuleBadgeWithTooltip, { tooltipTitle: react_1.default.createElement(TransitiveMatchRulesTooltip_1.default, { transitiveMatchRules: transitiveMatchRules }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, ui_i18n_1.default.text('Transitive matches')),
         expanded
             ? transitiveMatchRules.map(function (match, index) {
-                return react_1.default.createElement(TransitiveMatchRule_1.default, __assign({ key: index }, match));
+                return react_1.default.createElement(TransitiveMatchRule_1.default, __assign({ key: index }, match, { matchRuleSummaries: matchRuleSummaries }));
             })
             : null));
 };

package/cjs/components/MatchRulesBlock/TransitiveMatchRules/TransitiveMatchRule.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 declare type Props = {
     label: string;
     matchRules: MatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const TransitiveMatchRule: ({ label, matchRules }: Props) => JSX.Element;
+declare const TransitiveMatchRule: ({ label, matchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default TransitiveMatchRule;

package/cjs/components/MatchRulesBlock/TransitiveMatchRules/TransitiveMatchRule.js

@@ -32,7 +32,7 @@ var SimpleMatchRules_1 = __importDefault(require("../SimpleMatchRules/SimpleMatc
 var SimpleMatchRulesBuilder_1 = __importDefault(require("../SimpleMatchRulesBuilder/SimpleMatchRulesBuilder"));
 var styles_1 = __importDefault(require("./styles"));
 var TransitiveMatchRule = function (_a) {
-    var label = _a.label, matchRules = _a.matchRules;
+    var label = _a.label, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = (0, styles_1.default)();
     var _b = (0, react_1.useState)(false), expanded = _b[0], setExpanded = _b[1];
     var handleOnExpand = (0, react_1.useCallback)(function () { return setExpanded(function (expand) { return !expand; }); }, []);
@@ -40,6 +40,6 @@ var TransitiveMatchRule = function (_a) {
         react_1.default.createElement("div", { onClick: handleOnExpand, className: styles.badge },
             react_1.default.createElement(ArrowExpandButton_1.default, { expanded: expanded }),
             react_1.default.createElement("div", { className: styles.label }, label)),
-        expanded ? (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { Component: SimpleMatchRules_1.default, matchRules: matchRules, className: styles.matchLabels })) : null));
+        expanded ? (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { Component: SimpleMatchRules_1.default, matchRules: matchRules, matchRuleSummaries: matchRuleSummaries, className: styles.matchLabels })) : null));
 };
 exports.default = TransitiveMatchRule;

package/cjs/components/SidePanel/SidePanel.js

@@ -9,7 +9,7 @@ var styles_1 = require("./styles");
 var SidePanel = function (_a) {
     var width = _a.width, open = _a.open, children = _a.children;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement("div", { className: styles.contentWrapper, style: {
+    return (react_1.default.createElement("div", { className: styles.contentWrapper, "data-reltio-id": "side-panel", style: {
             width: width ? "".concat(open ? width : 0, "px") : '100%'
         } }, open && react_1.default.createElement(react_1.default.Fragment, null, children)));
 };

package/esm/components/MatchRulesBlock/MatchRulesBlock.js

@@ -20,8 +20,8 @@ var MatchRulesBlock = function (_a) {
     var showSimple = !isTransitive && !hasNotMatch;
     var showNotMatch = hasNotMatch && variant !== MatchRuleVariant.excludeNotMatch;
     return (React.createElement(React.Fragment, null,
-        isTransitive ? (React.createElement(TransitiveMatchBlock, { transitiveMatchRules: getTransitiveMatchRules(metadata, match, entitiesMap) })) : null,
-        showSimple ? (React.createElement(SimpleMatchRulesBuilder, { variant: variant, matchRules: matchRules, Component: SimpleMatchRulesBlock })) : null,
+        isTransitive ? (React.createElement(TransitiveMatchBlock, { transitiveMatchRules: getTransitiveMatchRules(metadata, match, entitiesMap), matchRuleSummaries: match.matchRuleSummaries })) : null,
+        showSimple ? (React.createElement(SimpleMatchRulesBuilder, { variant: variant, matchRules: matchRules, matchRuleSummaries: match.matchRuleSummaries, Component: SimpleMatchRulesBlock })) : null,
         showNotMatch ? React.createElement(NotMatchRule, null) : null));
 };
 export default MatchRulesBlock;

package/esm/components/MatchRulesBlock/SimpleMatchRules/SimpleMatchRules.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 declare type Props = {
     isMlMatch?: boolean;
     matchRules: MatchRules;
     className?: string;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const SimpleMatchRules: ({ isMlMatch, matchRules, className }: Props) => JSX.Element;
+declare const SimpleMatchRules: ({ isMlMatch, matchRules, className, matchRuleSummaries }: Props) => JSX.Element;
 export default SimpleMatchRules;

package/esm/components/MatchRulesBlock/SimpleMatchRules/SimpleMatchRules.js

@@ -1,16 +1,26 @@
 import React from 'react';
 import classnames from 'classnames';
+import { getMatchRuleSummary, formatRelevanceScore } from '@reltio/mdm-sdk';
+import Tooltip from '@material-ui/core/Tooltip';
+import i18n from 'ui-i18n';
 import MatchRulesTitle from '../MatchRulesTitle';
 import useStyles from './styles';
 import NegativeRuleIcon from '../../../icons/NegativeRuleIcon';
 var SimpleMatchRules = function (_a) {
-    var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className;
+    var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = useStyles();
     return (React.createElement("div", { "data-reltio-id": "simple-match-rules", className: classnames(styles.container, className) },
         React.createElement("div", { className: styles.title },
             React.createElement(MatchRulesTitle, { isMlMatch: isMlMatch })),
-        React.createElement("div", { className: styles.labelsContainer }, matchRules.map(function (match) { return (React.createElement("div", { key: match.uri },
-            '- ',
-            match.negativeRule && React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon }), "".concat(match.label))); }))));
+        React.createElement("div", { className: styles.labelsContainer }, matchRules.map(function (matchRule) {
+            var matchRuleSummary = getMatchRuleSummary(matchRuleSummaries, matchRule.uri);
+            var relevancePercentage = formatRelevanceScore(matchRuleSummary);
+            return (React.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
+                React.createElement("div", { className: styles.matchRuleLabel },
+                    '- ',
+                    matchRule.negativeRule && React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon }), "".concat(matchRule.label)),
+                relevancePercentage && (React.createElement(Tooltip, { title: i18n.text('Relevance score') },
+                    React.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));
+        }))));
 };
 export default SimpleMatchRules;

package/esm/components/MatchRulesBlock/SimpleMatchRules/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "negativeRuleIcon" | "labelsContainer">;
+declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "container" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel" | "relevanceScore">;
 export default styles;

package/esm/components/MatchRulesBlock/SimpleMatchRules/styles.js

@@ -16,6 +16,18 @@ var styles = makeStyles(function (theme) { return ({
         position: 'relative',
         marginRight: '4px',
         top: '1px'
+    },
+    matchRuleInfo: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between'
+    },
+    matchRuleLabel: {
+        wordBreak: 'break-word'
+    },
+    relevanceScore: {
+        marginLeft: '8px',
+        color: theme.palette.text.secondary
     }
 }); });
 export default styles;

package/esm/components/MatchRulesBlock/SimpleMatchRulesBlock/SimpleMatchRulesBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
     tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
@@ -15,6 +16,7 @@ export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<
 declare type Props = {
     isMlMatch?: boolean;
     matchRules: MatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const SimpleMatchRulesBlock: ({ isMlMatch, matchRules }: Props) => JSX.Element;
+declare const SimpleMatchRulesBlock: ({ isMlMatch, matchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default SimpleMatchRulesBlock;

package/esm/components/MatchRulesBlock/SimpleMatchRulesBlock/SimpleMatchRulesBlock.js

@@ -8,14 +8,14 @@ import MLMatchIcon from '../../../icons/MlMatch';
 import i18n from 'ui-i18n';
 export var MatchRuleBadgeWithTooltip = withTooltip(MatchRulesBadge);
 var SimpleMatchRulesBlock = function (_a) {
-    var _b = _a.isMlMatch, isMlMatch = _b === void 0 ? false : _b, matchRules = _a.matchRules;
+    var _b = _a.isMlMatch, isMlMatch = _b === void 0 ? false : _b, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = useStyles();
     var _c = useState(false), expanded = _c[0], setExpanded = _c[1];
     var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
-    return (React.createElement("div", { className: styles.container },
+    return (React.createElement("div", { className: styles.container, "data-reltio-id": "simple-match-rules-block" },
         React.createElement(MatchRuleBadgeWithTooltip, { tooltipTitle: React.createElement(MatchRulesTooltip, { matchRules: matchRules, isMlMatch: isMlMatch }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, isMlMatch ? (React.createElement(React.Fragment, null,
             React.createElement(MLMatchIcon, { className: styles.icon }),
             i18n.text('Match IQ'))) : (i18n.text('Rules'))),
-        expanded ? (React.createElement(SimpleMatchRules, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch })) : null));
+        expanded ? (React.createElement(SimpleMatchRules, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch, matchRuleSummaries: matchRuleSummaries })) : null));
 };
 export default SimpleMatchRulesBlock;

package/esm/components/MatchRulesBlock/SimpleMatchRulesBlock/styles.js

@@ -6,7 +6,8 @@ var styles = makeStyles({
         alignItems: 'flex-start'
     },
     rulesContainer: {
-        marginLeft: '16px'
+        marginLeft: '16px',
+        width: 'calc(100% - 16px)'
     },
     icon: {
         height: '17px',

package/esm/components/MatchRulesBlock/SimpleMatchRulesBuilder/SimpleMatchRulesBuilder.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules, MatchRuleVariant } from '../types';
 declare type Props = {
     matchRules: MatchRules;
     Component: React.ElementType;
     className?: string;
     variant?: MatchRuleVariant;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
 declare const SimpleMatchRulesBuilder: {
     ({ matchRules, Component, variant, ...otherProps }: Props): JSX.Element;

package/esm/components/MatchRulesBlock/TransitiveMatchBlock/TransitiveMatchBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { TransitiveMatchRules } from '../types';
 export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
     tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
@@ -14,6 +15,7 @@ export declare const MatchRuleBadgeWithTooltip: React.ForwardRefExoticComponent<
 } & React.RefAttributes<HTMLDivElement>>;
 declare type Props = {
     transitiveMatchRules: TransitiveMatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const TransitiveMatchBlock: ({ transitiveMatchRules }: Props) => JSX.Element;
+declare const TransitiveMatchBlock: ({ transitiveMatchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default TransitiveMatchBlock;

package/esm/components/MatchRulesBlock/TransitiveMatchBlock/TransitiveMatchBlock.js

@@ -18,7 +18,7 @@ import { withTooltip } from '../../../HOCs';
 import TransitiveMatchRulesTooltip from '../TransitiveMatchRulesTooltip/TransitiveMatchRulesTooltip';
 export var MatchRuleBadgeWithTooltip = withTooltip(MatchRulesBadge);
 var TransitiveMatchBlock = function (_a) {
-    var transitiveMatchRules = _a.transitiveMatchRules;
+    var transitiveMatchRules = _a.transitiveMatchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = useStyles();
     var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
     var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
@@ -26,7 +26,7 @@ var TransitiveMatchBlock = function (_a) {
         React.createElement(MatchRuleBadgeWithTooltip, { tooltipTitle: React.createElement(TransitiveMatchRulesTooltip, { transitiveMatchRules: transitiveMatchRules }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, i18n.text('Transitive matches')),
         expanded
             ? transitiveMatchRules.map(function (match, index) {
-                return React.createElement(TransitiveMatchRule, __assign({ key: index }, match));
+                return React.createElement(TransitiveMatchRule, __assign({ key: index }, match, { matchRuleSummaries: matchRuleSummaries }));
             })
             : null));
 };

package/esm/components/MatchRulesBlock/TransitiveMatchRules/TransitiveMatchRule.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { MatchRuleSummary } from '@reltio/mdm-sdk';
 import { MatchRules } from '../types';
 declare type Props = {
     label: string;
     matchRules: MatchRules;
+    matchRuleSummaries?: MatchRuleSummary[];
 };
-declare const TransitiveMatchRule: ({ label, matchRules }: Props) => JSX.Element;
+declare const TransitiveMatchRule: ({ label, matchRules, matchRuleSummaries }: Props) => JSX.Element;
 export default TransitiveMatchRule;

package/esm/components/MatchRulesBlock/TransitiveMatchRules/TransitiveMatchRule.js

@@ -4,7 +4,7 @@ import SimpleMatchRules from '../SimpleMatchRules/SimpleMatchRules';
 import SimpleMatchRulesBuilder from '../SimpleMatchRulesBuilder/SimpleMatchRulesBuilder';
 import useStyles from './styles';
 var TransitiveMatchRule = function (_a) {
-    var label = _a.label, matchRules = _a.matchRules;
+    var label = _a.label, matchRules = _a.matchRules, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = useStyles();
     var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
     var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
@@ -12,6 +12,6 @@ var TransitiveMatchRule = function (_a) {
         React.createElement("div", { onClick: handleOnExpand, className: styles.badge },
             React.createElement(ArrowExpandButton, { expanded: expanded }),
             React.createElement("div", { className: styles.label }, label)),
-        expanded ? (React.createElement(SimpleMatchRulesBuilder, { Component: SimpleMatchRules, matchRules: matchRules, className: styles.matchLabels })) : null));
+        expanded ? (React.createElement(SimpleMatchRulesBuilder, { Component: SimpleMatchRules, matchRules: matchRules, matchRuleSummaries: matchRuleSummaries, className: styles.matchLabels })) : null));
 };
 export default TransitiveMatchRule;

package/esm/components/SidePanel/SidePanel.js

@@ -3,7 +3,7 @@ import { useStyles } from './styles';
 export var SidePanel = function (_a) {
     var width = _a.width, open = _a.open, children = _a.children;
     var styles = useStyles();
-    return (React.createElement("div", { className: styles.contentWrapper, style: {
+    return (React.createElement("div", { className: styles.contentWrapper, "data-reltio-id": "side-panel", style: {
             width: width ? "".concat(open ? width : 0, "px") : '100%'
         } }, open && React.createElement(React.Fragment, null, children)));
 };

package/package.json

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