@reltio/components 1.4.1847 → 1.4.1849

package/cjs/features/graph/DataModelGraph/DataModelGraph.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onNodeClick: (nodeId: string) => void;
     selectedEdge: string;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
-export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => JSX.Element;
+export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
 export default DataModelGraph;

package/cjs/features/graph/DataModelGraph/DataModelGraph.js

@@ -14,12 +14,12 @@ var settings = {
     zIndex: true
 };
 var DataModelGraph = function (_a) {
-    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement("div", { className: styles.wrapper },
         react_1.default.createElement("div", { className: styles.graph }, graph && (react_1.default.createElement(SigmaGraphContainer_1.SigmaGraphContainer, { initialSettings: settings },
             react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(DataModelCircleLayuot_1.DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }),
+                react_1.default.createElement(DataModelCircleLayuot_1.DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
                 react_1.default.createElement("div", { className: styles.rightBottomControls },
                     react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
         children));

package/cjs/features/graph/DataModelGraph/DataModelGraph.test.js

@@ -42,7 +42,7 @@ describe('DataModelGraph tests', function () {
     var selectedEdge = 'edge1';
     var onEdgeLabelClick = jest.fn();
     var setUp = function () {
-        (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }));
+        (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
     };
     afterEach(function () {
         jest.clearAllMocks();

package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.d.ts

@@ -5,7 +5,8 @@ type Props = {
     onNodeClick: (nodeId: string) => void;
     selectedEdge: string;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
 export declare const LAYOUT_ANIMATION_DURATION = 3000;
-export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => any;
+export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
 export {};

package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.js

@@ -6,7 +6,7 @@ var useFakeCenterNode_1 = require("../../hooks/useFakeCenterNode");
 var useDataModelGraphAppearance_1 = require("../../hooks/useDataModelGraphAppearance");
 exports.LAYOUT_ANIMATION_DURATION = 3000;
 var DataModelCircleLayuot = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     (0, useFakeCenterNode_1.useFakeCenterNode)({ graph: graph, timeout: exports.LAYOUT_ANIMATION_DURATION + 100 });
     (0, useCircleLayout_1.useCircleLayout)({ graph: graph, animationDuration: exports.LAYOUT_ANIMATION_DURATION });
     (0, useDataModelGraphAppearance_1.useDataModelGraphAppearance)({
@@ -14,7 +14,8 @@ var DataModelCircleLayuot = function (_a) {
         selectedNode: selectedNode,
         selectedEdge: selectedEdge,
         onNodeClick: onNodeClick,
-        onEdgeLabelClick: onEdgeLabelClick
+        onEdgeLabelClick: onEdgeLabelClick,
+        hideInteractionTypes: hideInteractionTypes
     });
     return null;
 };

package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts

@@ -12,6 +12,7 @@ type Props = {
     selectedEdge: string;
     onNodeClick: (node: string) => void;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
-export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick }: Props) => void;
+export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick, hideInteractionTypes }: Props) => void;
 export {};

package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js

@@ -46,7 +46,7 @@ exports.RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
 exports.RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
 exports.INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
 var useDataModelGraphAppearance = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     var sigma = (0, core_2.useSigma)();
     var container = (0, core_1.useSigmaContext)().container;
     var _b = (0, react_1.useState)(null), hoveredNode = _b[0], setHoveredNode = _b[1];
@@ -107,6 +107,9 @@ var useDataModelGraphAppearance = function (_a) {
                 if (hoveredNode !== node && !isSelectedNode) {
                     delete newData.secondaryLabel;
                 }
+                if (data.nodeType === graphDataTypes_1.DataModelGraphNodeType.interactionType && hideInteractionTypes) {
+                    newData.hidden = true;
+                }
                 return newData;
             },
             edgeReducer: function (edge, data) {
@@ -134,6 +137,6 @@ var useDataModelGraphAppearance = function (_a) {
                 return newData;
             }
         });
-    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode]);
+    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode, hideInteractionTypes]);
 };
 exports.useDataModelGraphAppearance = useDataModelGraphAppearance;

package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js

@@ -88,7 +88,7 @@ describe('useDataModelGraphAppearance tests', function () {
             getGraph: function () { return graph; }
         });
         return __assign({ graph: graph }, (0, react_hooks_1.renderHook)(useDataModelGraphAppearance_1.useDataModelGraphAppearance, {
-            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn() }, props)
+            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
         }));
     };
     var setSettings = jest.fn();
@@ -159,6 +159,12 @@ describe('useDataModelGraphAppearance tests', function () {
             expect(nodeReducer('prescriptions', graph.getNodeAttributes('prescriptions'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('prescriptions'))), { hasBorder: true, image: expect.stringContaining('data:image/svg+xml'), label: 'Prescriptions', nodeType: graphDataTypes_1.DataModelGraphNodeType.interactionType, inactive: true, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR, secondaryLabelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
             expect(result.error).toBeUndefined();
         });
+        it('should hide interaction types when hideInteractionTypes is true', function () {
+            var _a = setUp({ hideInteractionTypes: true }), graph = _a.graph, result = _a.result;
+            var nodeReducer = getNodeReducer();
+            expect(nodeReducer('prescriptions', graph.getNodeAttributes('prescriptions'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('prescriptions'))), { hasBorder: true, image: expect.stringContaining('data:image/svg+xml'), label: 'Prescriptions', nodeType: graphDataTypes_1.DataModelGraphNodeType.interactionType, hidden: true }));
+            expect(result.error).toBeUndefined();
+        });
     });
     describe('edges reducer behavior', function () {
         var defaultEdgeStyle = {

package/esm/features/graph/DataModelGraph/DataModelGraph.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onNodeClick: (nodeId: string) => void;
     selectedEdge: string;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
-export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => JSX.Element;
+export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
 export default DataModelGraph;

package/esm/features/graph/DataModelGraph/DataModelGraph.js

@@ -8,12 +8,12 @@ var settings = {
     zIndex: true
 };
 export var DataModelGraph = function (_a) {
-    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.wrapper },
         React.createElement("div", { className: styles.graph }, graph && (React.createElement(SigmaGraphContainer, { initialSettings: settings },
             React.createElement(React.Fragment, null,
-                React.createElement(DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }),
+                React.createElement(DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
                 React.createElement("div", { className: styles.rightBottomControls },
                     React.createElement(ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
         children));

package/esm/features/graph/DataModelGraph/DataModelGraph.test.js

@@ -37,7 +37,7 @@ describe('DataModelGraph tests', function () {
     var selectedEdge = 'edge1';
     var onEdgeLabelClick = jest.fn();
     var setUp = function () {
-        render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }));
+        render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
     };
     afterEach(function () {
         jest.clearAllMocks();

package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.d.ts

@@ -5,7 +5,8 @@ type Props = {
     onNodeClick: (nodeId: string) => void;
     selectedEdge: string;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
 export declare const LAYOUT_ANIMATION_DURATION = 3000;
-export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => any;
+export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
 export {};

package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/DataModelCircleLayuot.js

@@ -3,7 +3,7 @@ import { useFakeCenterNode } from '../../hooks/useFakeCenterNode';
 import { useDataModelGraphAppearance } from '../../hooks/useDataModelGraphAppearance';
 export var LAYOUT_ANIMATION_DURATION = 3000;
 export var DataModelCircleLayuot = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     useFakeCenterNode({ graph: graph, timeout: LAYOUT_ANIMATION_DURATION + 100 });
     useCircleLayout({ graph: graph, animationDuration: LAYOUT_ANIMATION_DURATION });
     useDataModelGraphAppearance({
@@ -11,7 +11,8 @@ export var DataModelCircleLayuot = function (_a) {
         selectedNode: selectedNode,
         selectedEdge: selectedEdge,
         onNodeClick: onNodeClick,
-        onEdgeLabelClick: onEdgeLabelClick
+        onEdgeLabelClick: onEdgeLabelClick,
+        hideInteractionTypes: hideInteractionTypes
     });
     return null;
 };

package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts

@@ -12,6 +12,7 @@ type Props = {
     selectedEdge: string;
     onNodeClick: (node: string) => void;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    hideInteractionTypes?: boolean;
 };
-export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick }: Props) => void;
+export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick, hideInteractionTypes }: Props) => void;
 export {};

package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js

@@ -43,7 +43,7 @@ export var RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
 export var RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
 export var INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
 export var useDataModelGraphAppearance = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     var sigma = useSigma();
     var container = useSigmaContext().container;
     var _b = useState(null), hoveredNode = _b[0], setHoveredNode = _b[1];
@@ -104,6 +104,9 @@ export var useDataModelGraphAppearance = function (_a) {
                 if (hoveredNode !== node && !isSelectedNode) {
                     delete newData.secondaryLabel;
                 }
+                if (data.nodeType === DataModelGraphNodeType.interactionType && hideInteractionTypes) {
+                    newData.hidden = true;
+                }
                 return newData;
             },
             edgeReducer: function (edge, data) {
@@ -131,5 +134,5 @@ export var useDataModelGraphAppearance = function (_a) {
                 return newData;
             }
         });
-    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode]);
+    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode, hideInteractionTypes]);
 };

package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js

@@ -86,7 +86,7 @@ describe('useDataModelGraphAppearance tests', function () {
             getGraph: function () { return graph; }
         });
         return __assign({ graph: graph }, renderHook(useDataModelGraphAppearance, {
-            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn() }, props)
+            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
         }));
     };
     var setSettings = jest.fn();
@@ -157,6 +157,12 @@ describe('useDataModelGraphAppearance tests', function () {
             expect(nodeReducer('prescriptions', graph.getNodeAttributes('prescriptions'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('prescriptions'))), { hasBorder: true, image: expect.stringContaining('data:image/svg+xml'), label: 'Prescriptions', nodeType: DataModelGraphNodeType.interactionType, inactive: true, labelColor: INACTIVE_LABEL_COLOR, secondaryLabelColor: INACTIVE_LABEL_COLOR }));
             expect(result.error).toBeUndefined();
         });
+        it('should hide interaction types when hideInteractionTypes is true', function () {
+            var _a = setUp({ hideInteractionTypes: true }), graph = _a.graph, result = _a.result;
+            var nodeReducer = getNodeReducer();
+            expect(nodeReducer('prescriptions', graph.getNodeAttributes('prescriptions'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('prescriptions'))), { hasBorder: true, image: expect.stringContaining('data:image/svg+xml'), label: 'Prescriptions', nodeType: DataModelGraphNodeType.interactionType, hidden: true }));
+            expect(result.error).toBeUndefined();
+        });
     });
     describe('edges reducer behavior', function () {
         var defaultEdgeStyle = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1847",
+  "version": "1.4.1849",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1797",
+    "@reltio/mdm-sdk": "^1.4.1798",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",