@reltio/components 1.4.1851 → 1.4.1853

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/cjs/features/graph/DataModelGraph/DataModelGraph.d.ts +6 -5
  2. package/cjs/features/graph/DataModelGraph/DataModelGraph.js +4 -3
  3. package/cjs/features/graph/DataModelGraph/DataModelGraph.test.js +3 -8
  4. package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.d.ts → DataModelCircleLayout.d.ts} +2 -2
  5. package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js} +5 -7
  6. package/cjs/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js +4 -2
  7. package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts +6 -5
  8. package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js +43 -13
  9. package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js +39 -17
  10. package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js +4 -3
  11. package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js +3 -3
  12. package/cjs/features/graph/index.d.ts +1 -1
  13. package/cjs/features/graph/rendering/canvas/label.js +1 -1
  14. package/cjs/features/graph/types/graphDataTypes.d.ts +2 -1
  15. package/esm/features/graph/DataModelGraph/DataModelGraph.d.ts +6 -5
  16. package/esm/features/graph/DataModelGraph/DataModelGraph.js +4 -3
  17. package/esm/features/graph/DataModelGraph/DataModelGraph.test.js +3 -8
  18. package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.d.ts → DataModelCircleLayout.d.ts} +2 -2
  19. package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js} +3 -5
  20. package/esm/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js +4 -2
  21. package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts +6 -5
  22. package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js +44 -14
  23. package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js +40 -18
  24. package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js +4 -3
  25. package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js +3 -3
  26. package/esm/features/graph/index.d.ts +1 -1
  27. package/esm/features/graph/rendering/canvas/label.js +1 -1
  28. package/esm/features/graph/types/graphDataTypes.d.ts +2 -1
  29. package/package.json +2 -2
package/cjs/features/graph/DataModelGraph/DataModelGraph.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
2
  import Graph from 'graphology';
3
+ import { DataModelGraphEdgeAttributes, DataModelGraphNodeAttributes } from '../types/graphDataTypes';
3
4
  type Props = {
4
- graph?: Graph;
5
+ graph: Graph<Partial<DataModelGraphNodeAttributes>, Partial<DataModelGraphEdgeAttributes>>;
5
6
  children?: React.ReactNode;
6
7
  selectedNode?: string;
7
- onNodeClick: (nodeId: string) => void;
8
- selectedEdge: string;
9
- onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
8
+ onNodeClick?: (nodeId: string) => void;
9
+ selectedEdges?: string[];
10
+ onEdgeLabelClick?: (edgeId: string, event: MouseEvent) => void;
10
11
  hideInteractionTypes?: boolean;
11
12
  };
12
- export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
13
+ export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
13
14
  export default DataModelGraph;
package/cjs/features/graph/DataModelGraph/DataModelGraph.js CHANGED
@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.DataModelGraph = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
+ var core_1 = require("../../../core");
8
9
  var SigmaGraphContainer_1 = require("../SigmaGraphContainer/SigmaGraphContainer");
9
- var DataModelCircleLayuot_1 = require("./components/DataModelCircleLayout/DataModelCircleLayuot");
10
+ var DataModelCircleLayout_1 = require("./components/DataModelCircleLayout/DataModelCircleLayout");
10
11
  var ZoomSlider_1 = require("../ZoomSlider");
11
12
  var styles_1 = require("./styles");
12
13
  var settings = {
@@ -14,12 +15,12 @@ var settings = {
14
15
  zIndex: true
15
16
  };
16
17
  var DataModelGraph = function (_a) {
17
- var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
18
+ var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, _b = _a.onNodeClick, onNodeClick = _b === void 0 ? core_1.noop : _b, selectedEdges = _a.selectedEdges, _c = _a.onEdgeLabelClick, onEdgeLabelClick = _c === void 0 ? core_1.noop : _c, hideInteractionTypes = _a.hideInteractionTypes;
18
19
  var styles = (0, styles_1.useStyles)();
19
20
  return (react_1.default.createElement("div", { className: styles.wrapper },
20
21
  react_1.default.createElement("div", { className: styles.graph }, graph && (react_1.default.createElement(SigmaGraphContainer_1.SigmaGraphContainer, { initialSettings: settings },
21
22
  react_1.default.createElement(react_1.default.Fragment, null,
22
- react_1.default.createElement(DataModelCircleLayuot_1.DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
23
+ react_1.default.createElement(DataModelCircleLayout_1.DataModelCircleLayout, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
23
24
  react_1.default.createElement("div", { className: styles.rightBottomControls },
24
25
  react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
25
26
  children));
package/cjs/features/graph/DataModelGraph/DataModelGraph.test.js CHANGED
@@ -8,7 +8,6 @@ var graphology_1 = __importDefault(require("graphology"));
8
8
  var react_2 = require("@testing-library/react");
9
9
  var DataModelGraph_1 = require("../DataModelGraph");
10
10
  var useDataModelGraphAppearance_1 = require("./hooks/useDataModelGraphAppearance");
11
- var useFakeCenterNode_1 = require("./hooks/useFakeCenterNode");
12
11
  var useCircleLayout_1 = require("../hooks/useCircleLayout");
13
12
  jest.mock('@react-sigma/core', function () { return ({
14
13
  SigmaContainer: function (_a) {
@@ -29,9 +28,6 @@ jest.mock('../hooks/useSigmaCustomRenderers', function () { return ({
29
28
  jest.mock('./hooks/useDataModelGraphAppearance', function () { return ({
30
29
  useDataModelGraphAppearance: jest.fn()
31
30
  }); });
32
- jest.mock('./hooks/useFakeCenterNode', function () { return ({
33
- useFakeCenterNode: jest.fn()
34
- }); });
35
31
  jest.mock('../ZoomSlider', function () { return ({
36
32
  ZoomSlider: function () { return react_1.default.createElement("div", null, "ZoomSlider"); }
37
33
  }); });
@@ -39,10 +35,10 @@ describe('DataModelGraph tests', function () {
39
35
  var graph = new graphology_1.default();
40
36
  var selectedNode = 'node1';
41
37
  var onNodeClick = jest.fn();
42
- var selectedEdge = 'edge1';
38
+ var selectedEdges = ['edge1'];
43
39
  var onEdgeLabelClick = jest.fn();
44
40
  var setUp = function () {
45
- (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
41
+ (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
46
42
  };
47
43
  afterEach(function () {
48
44
  jest.clearAllMocks();
@@ -52,11 +48,10 @@ describe('DataModelGraph tests', function () {
52
48
  expect(useDataModelGraphAppearance_1.useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
53
49
  graph: graph,
54
50
  selectedNode: selectedNode,
55
- selectedEdge: selectedEdge,
51
+ selectedEdges: selectedEdges,
56
52
  onNodeClick: onNodeClick,
57
53
  onEdgeLabelClick: onEdgeLabelClick
58
54
  }));
59
- expect(useFakeCenterNode_1.useFakeCenterNode).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, timeout: 3100 }));
60
55
  expect(useCircleLayout_1.useCircleLayout).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, animationDuration: 3000 }));
61
56
  expect(react_2.screen.getByText('ZoomSlider')).toBeInTheDocument();
62
57
  });
package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.d.ts → DataModelCircleLayout.d.ts} RENAMED
@@ -3,10 +3,10 @@ type Props = {
3
3
  graph: Graph;
4
4
  selectedNode?: string;
5
5
  onNodeClick: (nodeId: string) => void;
6
- selectedEdge: string;
6
+ selectedEdges?: string[];
7
7
  onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
8
8
  hideInteractionTypes?: boolean;
9
9
  };
10
10
  export declare const LAYOUT_ANIMATION_DURATION = 3000;
11
- export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
11
+ export declare const DataModelCircleLayout: ({ graph, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
12
12
  export {};
package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js} RENAMED
@@ -1,22 +1,20 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DataModelCircleLayuot = exports.LAYOUT_ANIMATION_DURATION = void 0;
3
+ exports.DataModelCircleLayout = exports.LAYOUT_ANIMATION_DURATION = void 0;
4
4
  var useCircleLayout_1 = require("../../../hooks/useCircleLayout");
5
- var useFakeCenterNode_1 = require("../../hooks/useFakeCenterNode");
6
5
  var useDataModelGraphAppearance_1 = require("../../hooks/useDataModelGraphAppearance");
7
6
  exports.LAYOUT_ANIMATION_DURATION = 3000;
8
- var DataModelCircleLayuot = function (_a) {
9
- var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
10
- (0, useFakeCenterNode_1.useFakeCenterNode)({ graph: graph, timeout: exports.LAYOUT_ANIMATION_DURATION + 100 });
7
+ var DataModelCircleLayout = function (_a) {
8
+ var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdges = _a.selectedEdges, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
11
9
  (0, useCircleLayout_1.useCircleLayout)({ graph: graph, animationDuration: exports.LAYOUT_ANIMATION_DURATION });
12
10
  (0, useDataModelGraphAppearance_1.useDataModelGraphAppearance)({
13
11
  graph: graph,
14
12
  selectedNode: selectedNode,
15
- selectedEdge: selectedEdge,
13
+ selectedEdges: selectedEdges,
16
14
  onNodeClick: onNodeClick,
17
15
  onEdgeLabelClick: onEdgeLabelClick,
18
16
  hideInteractionTypes: hideInteractionTypes
19
17
  });
20
18
  return null;
21
19
  };
22
- exports.DataModelCircleLayuot = DataModelCircleLayuot;
20
+ exports.DataModelCircleLayout = DataModelCircleLayout;
package/cjs/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js CHANGED
@@ -39,10 +39,12 @@ var createDefaultGraph = function () {
39
39
  y: 200
40
40
  });
41
41
  graph.addEdgeWithKey('hcp->hca', 'hcp', 'hca', {
42
- label: '1'
42
+ label: '1',
43
+ relationTypes: [{ uri: 'relType1' }]
43
44
  });
44
45
  graph.addEdgeWithKey('hca->gpo', 'hca', 'gpo', {
45
- label: '2'
46
+ label: '2',
47
+ relationTypes: [{ uri: 'relType2' }]
46
48
  });
47
49
  graph.addEdgeWithKey('hcp->prescriptions', 'hcp', 'prescriptions', {
48
50
  type: 'dashed'
package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import Graph from 'graphology';
2
- export declare const EDGE_COLOR = "rgba(130, 130, 130, 1)";
3
- export declare const DASHED_EDGE_COLOR = "rgba(189, 189, 189, 1)";
2
+ export declare const EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
3
+ export declare const DASHED_EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
4
4
  export declare const INACTIVE_EDGE_COLOR = "rgba(224, 224, 224, 1)";
5
5
  export declare const SELECTED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
6
6
  export declare const RELATED_EDGE_COLOR = "rgba(130, 130, 130, 1)";
@@ -8,11 +8,12 @@ export declare const RELATED_DASHED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
8
8
  export declare const INACTIVE_LABEL_COLOR = "rgba(0, 0, 0, 0.38)";
9
9
  type Props = {
10
10
  graph: Graph;
11
- selectedNode: string;
12
- selectedEdge: string;
11
+ selectedNode?: string;
12
+ selectedEdges?: string[];
13
13
  onNodeClick: (node: string) => void;
14
14
  onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
15
15
  hideInteractionTypes?: boolean;
16
+ relationEdgesLabelsAmountThreshold?: number;
16
17
  };
17
- export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick, hideInteractionTypes }: Props) => void;
18
+ export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdges, onNodeClick, onEdgeLabelClick, hideInteractionTypes, relationEdgesLabelsAmountThreshold }: Props) => void;
18
19
  export {};
package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js CHANGED
@@ -36,25 +36,35 @@ var DEFAULT_NODE_STYLE = {
36
36
  color: 'rgba(55, 71, 79, 1)'
37
37
  };
38
38
  var DEFAULT_EDGE_STYLE = {
39
- size: 2
39
+ size: 1
40
40
  };
41
- exports.EDGE_COLOR = 'rgba(130, 130, 130, 1)';
42
- exports.DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
41
+ exports.EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
42
+ exports.DASHED_EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
43
43
  exports.INACTIVE_EDGE_COLOR = 'rgba(224, 224, 224, 1)';
44
44
  exports.SELECTED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
45
45
  exports.RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
46
46
  exports.RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
47
47
  exports.INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
48
+ var RELATION_EDGES_LABELS_AMOUNT_THRESHOLD = 29;
48
49
  var useDataModelGraphAppearance = function (_a) {
49
- var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
50
+ var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdges = _a.selectedEdges, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes, _b = _a.relationEdgesLabelsAmountThreshold, relationEdgesLabelsAmountThreshold = _b === void 0 ? RELATION_EDGES_LABELS_AMOUNT_THRESHOLD : _b;
50
51
  var sigma = (0, core_2.useSigma)();
51
52
  var container = (0, core_1.useSigmaContext)().container;
52
- var _b = (0, react_1.useState)(null), hoveredNode = _b[0], setHoveredNode = _b[1];
53
+ var _c = (0, react_1.useState)(null), hoveredNode = _c[0], setHoveredNode = _c[1];
53
54
  var registerEvents = (0, core_2.useRegisterEvents)();
54
55
  var setSettings = (0, core_2.useSetSettings)();
55
56
  (0, useLoopRenderer_1.useLoopRenderer)(graph);
56
57
  var hoveredEdge = (0, useEdgeLabelsRenderer_1.useEdgeLabelsRenderer)({ graph: graph, onEdgeLabelClick: onEdgeLabelClick });
57
58
  (0, useSelectedNodeRenderer_1.useSelectedNodeRenderer)(graph);
59
+ var relationsEdgesAmount = (0, react_1.useMemo)(function () {
60
+ return graph.reduceEdges(function (count, _edgeId, edgeData) {
61
+ var _a;
62
+ if (((_a = edgeData.relationTypes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
63
+ return count + 1;
64
+ }
65
+ return count;
66
+ }, 0);
67
+ }, [graph]);
58
68
  (0, react_1.useEffect)(function () {
59
69
  registerEvents({
60
70
  enterNode: function (_a) {
@@ -88,7 +98,8 @@ var useDataModelGraphAppearance = function (_a) {
88
98
  var isInactiveNode = (selectedNode &&
89
99
  selectedNodeNeighbours &&
90
100
  __spreadArray(__spreadArray([], selectedNodeNeighbours, true), [selectedNode], false).every(function (n) { return n !== node; })) ||
91
- (selectedEdge && !graph.hasExtremity(selectedEdge, node)) ||
101
+ ((selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) > 0 &&
102
+ selectedEdges.every(function (selectedEdge) { return !graph.hasExtremity(selectedEdge, node); })) ||
92
103
  false;
93
104
  var newData = __assign(__assign({}, DEFAULT_NODE_STYLE), data);
94
105
  if (data.nodeType === graphDataTypes_1.DataModelGraphNodeType.interactionType) {
@@ -115,9 +126,9 @@ var useDataModelGraphAppearance = function (_a) {
115
126
  edgeReducer: function (edge, data) {
116
127
  var isDashedLine = data.type === 'dashed';
117
128
  var newData = __assign(__assign({}, DEFAULT_EDGE_STYLE), data);
118
- if (selectedEdge === edge) {
119
- newData.selected = true;
120
- }
129
+ var isSelected = selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.includes(edge);
130
+ newData.selected = isSelected;
131
+ var showOnlyRelatedEdgesLabels = relationsEdgesAmount > relationEdgesLabelsAmountThreshold;
121
132
  if (selectedNode) {
122
133
  if (graph.hasExtremity(edge, selectedNode)) {
123
134
  newData.color = isDashedLine ? exports.RELATED_DASHED_EDGE_COLOR : exports.RELATED_EDGE_COLOR;
@@ -125,18 +136,37 @@ var useDataModelGraphAppearance = function (_a) {
125
136
  else {
126
137
  newData.color = exports.INACTIVE_EDGE_COLOR;
127
138
  newData.labelColor = exports.INACTIVE_LABEL_COLOR;
139
+ if (showOnlyRelatedEdgesLabels) {
140
+ delete newData.label;
141
+ }
128
142
  }
129
143
  }
130
- else if (selectedEdge) {
131
- newData.color = edge === selectedEdge ? exports.SELECTED_EDGE_COLOR : exports.INACTIVE_EDGE_COLOR;
132
- newData.labelColor = edge === selectedEdge ? undefined : exports.INACTIVE_LABEL_COLOR;
144
+ else if (selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) {
145
+ newData.color = isSelected ? exports.SELECTED_EDGE_COLOR : exports.INACTIVE_EDGE_COLOR;
146
+ newData.labelColor = isSelected ? undefined : exports.INACTIVE_LABEL_COLOR;
147
+ if (showOnlyRelatedEdgesLabels && !isSelected) {
148
+ delete newData.label;
149
+ }
133
150
  }
134
151
  else {
135
152
  newData.color = isDashedLine ? exports.DASHED_EDGE_COLOR : exports.EDGE_COLOR;
153
+ if (showOnlyRelatedEdgesLabels) {
154
+ delete newData.label;
155
+ }
136
156
  }
137
157
  return newData;
138
158
  }
139
159
  });
140
- }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode, hideInteractionTypes]);
160
+ }, [
161
+ sigma,
162
+ setSettings,
163
+ selectedNode,
164
+ selectedEdges,
165
+ hoveredEdge,
166
+ hoveredNode,
167
+ relationsEdgesAmount,
168
+ relationEdgesLabelsAmountThreshold,
169
+ hideInteractionTypes
170
+ ]);
141
171
  };
142
172
  exports.useDataModelGraphAppearance = useDataModelGraphAppearance;
package/cjs/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js CHANGED
@@ -88,7 +88,7 @@ describe('useDataModelGraphAppearance tests', function () {
88
88
  getGraph: function () { return graph; }
89
89
  });
90
90
  return __assign({ graph: graph }, (0, react_hooks_1.renderHook)(useDataModelGraphAppearance_1.useDataModelGraphAppearance, {
91
- initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
91
+ initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdges: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
92
92
  }));
93
93
  };
94
94
  var setSettings = jest.fn();
@@ -150,8 +150,8 @@ describe('useDataModelGraphAppearance tests', function () {
150
150
  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 }));
151
151
  expect(result.error).toBeUndefined();
152
152
  });
153
- it('should apply correct styles when selectedEdge is specified', function () {
154
- var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
153
+ it('should apply correct styles when selectedEdges is specified', function () {
154
+ var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
155
155
  var nodeReducer = getNodeReducer();
156
156
  expect(nodeReducer('hcp', graph.getNodeAttributes('hcp'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hcp'))), { image: 'HCP.svg', label: 'HCP', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType }));
157
157
  expect(nodeReducer('hca', graph.getNodeAttributes('hca'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hca'))), { image: 'HCA.svg', label: 'HCA', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType }));
@@ -167,31 +167,53 @@ describe('useDataModelGraphAppearance tests', function () {
167
167
  });
168
168
  });
169
169
  describe('edges reducer behavior', function () {
170
- var defaultEdgeStyle = {
171
- size: 2
172
- };
170
+ var getDefaultEdgeAttributes = function (attributes) { return (__assign(__assign({}, attributes), { size: 1 })); };
173
171
  it('should apply default edge style', function () {
174
172
  var _a = setUp(), result = _a.result, graph = _a.graph;
175
173
  var edgeReducer = getEdgeReducer();
176
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.EDGE_COLOR }));
177
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: useDataModelGraphAppearance_1.EDGE_COLOR }));
178
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
174
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
175
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
176
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
179
177
  expect(result.error).toBeUndefined();
180
178
  });
181
179
  it('should apply correct styles when selectedNode is specified', function () {
182
180
  var _a = setUp({ selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
183
181
  var edgeReducer = getEdgeReducer();
184
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
185
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
186
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: useDataModelGraphAppearance_1.RELATED_DASHED_EDGE_COLOR }));
182
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
183
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
184
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.RELATED_DASHED_EDGE_COLOR }));
185
+ expect(result.error).toBeUndefined();
186
+ });
187
+ it('should apply correct styles when selectedEdges is specified', function () {
188
+ var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
189
+ var edgeReducer = getEdgeReducer();
190
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
191
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { selected: false, color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
192
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', selected: false, color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
193
+ expect(result.error).toBeUndefined();
194
+ });
195
+ it('should remove edge label prop when relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
196
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1 }), graph = _a.graph, result = _a.result;
197
+ var edgeReducer = getEdgeReducer();
198
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, (0, ramda_1.omit)(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca')))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
199
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, (0, ramda_1.omit)(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
200
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
201
+ expect(result.error).toBeUndefined();
202
+ });
203
+ it('should keep edge label prop for edge related with selected node even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
204
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
205
+ var edgeReducer = getEdgeReducer();
206
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
207
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, (0, ramda_1.omit)(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
208
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.RELATED_DASHED_EDGE_COLOR }));
187
209
  expect(result.error).toBeUndefined();
188
210
  });
189
- it('should apply correct styles when selectedEdge is specified', function () {
190
- var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
211
+ it('should keep edge label prop for selected edge even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
212
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
191
213
  var edgeReducer = getEdgeReducer();
192
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
193
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
194
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
214
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
215
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, (0, ramda_1.omit)(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { selected: false, color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
216
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', selected: false, color: useDataModelGraphAppearance_1.INACTIVE_EDGE_COLOR, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
195
217
  expect(result.error).toBeUndefined();
196
218
  });
197
219
  });
package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js CHANGED
@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.useEdgeLabelsRenderer = exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = exports.EDGE_DOTS_CANVAS_NAME = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME = void 0;
15
15
  var react_1 = require("react");
16
16
  var core_1 = require("@react-sigma/core");
17
+ var mdm_sdk_1 = require("@reltio/mdm-sdk");
17
18
  var useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
18
19
  var graphDataTypes_1 = require("../../types/graphDataTypes");
19
20
  var label_1 = require("../../rendering/canvas/label");
@@ -37,7 +38,7 @@ var useEdgeLabelsRenderer = function (_a) {
37
38
  var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
38
39
  var targetDisplayData = sigma.getNodeDisplayData(targetId);
39
40
  var relationEdge = [sourceDisplayData.nodeType, targetDisplayData.nodeType].every(function (type) { return type === graphDataTypes_1.DataModelGraphNodeType.entityType; });
40
- return relationEdge && !edgeDisplayData.hidden;
41
+ return relationEdge && !edgeDisplayData.hidden && edgeDisplayData.label;
41
42
  }, [sigma]);
42
43
  var drawEdgeLabel = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
43
44
  delete edgeLabelsPathsMap.current[edgeId];
@@ -68,11 +69,11 @@ var useEdgeLabelsRenderer = function (_a) {
68
69
  var isHovered = hoveredEdgeLabel === edgeId;
69
70
  var isSelected = edgeDisplayData.selected;
70
71
  var dotScale = isHovered || isSelected ? 1.4 : 1;
71
- var circleRadius = sigma.scaleSize(2.5 * dotScale);
72
+ var circleRadius = sigma.scaleSize(2 * dotScale);
72
73
  var _a = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
73
74
  context.beginPath();
74
75
  context.arc(x, y, circleRadius, 0, Math.PI * 2);
75
- context.fillStyle = edgeDisplayData.color;
76
+ context.fillStyle = (0, mdm_sdk_1.rgbaToRgb)(edgeDisplayData.color);
76
77
  context.fill();
77
78
  }
78
79
  }, [sigma, hoveredEdgeLabel, shouldRenderLabels]);
package/cjs/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js CHANGED
@@ -107,8 +107,8 @@ describe('useEdgeLabelsRenderer tests', function () {
107
107
  'arc',
108
108
  'fill'
109
109
  ]);
110
- expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2.5, 0, 2 * Math.PI);
111
- expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2.5, 0, 2 * Math.PI);
110
+ expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2, 0, 2 * Math.PI);
111
+ expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2, 0, 2 * Math.PI);
112
112
  });
113
113
  it('should correctly draw a hover state of edge', function () {
114
114
  setUp();
@@ -129,7 +129,7 @@ describe('useEdgeLabelsRenderer tests', function () {
129
129
  });
130
130
  expect(getCanvasContextEventTypes(hoversCanvasContext)).toEqual(expect.arrayContaining(['beginPath', 'arc', 'fill']));
131
131
  expect(hoversCanvasContext.arc).toBeCalledTimes(1);
132
- expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 3.5, 0, 2 * Math.PI);
132
+ expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 2.8, 0, 2 * Math.PI);
133
133
  expect(label_1.drawLabel).toBeCalledTimes(1);
134
134
  expect(label_1.drawLabel).toHaveBeenCalledWith(hoversCanvasContext, { label: '1', size: 4, x: 150, y: 100 }, { labelColor: 'black', labelSize: 12 * 1.2 }, { backgroundColor: 'rgba(250, 250, 250, 1)' });
135
135
  });
package/cjs/features/graph/index.d.ts CHANGED
@@ -11,6 +11,6 @@ export { NodeBorderProgram } from './rendering/webgl/node.border';
11
11
  export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
12
12
  export { WebGLImageLoader } from './rendering/webgl/image';
13
13
  export { getCanvasMousePos } from './rendering/canvas/utils';
14
- export type { GraphNodeAttributes, GraphEdgeAttributes } from './types/graphDataTypes';
14
+ export type { GraphNodeAttributes, GraphEdgeAttributes, DataModelGraphNodeAttributes, DataModelGraphEdgeAttributes } from './types/graphDataTypes';
15
15
  export { DataModelGraphNodeType } from './types/graphDataTypes';
16
16
  export type { Canvas } from './types/sigmaCustomRenderersTypes';
package/cjs/features/graph/rendering/canvas/label.js CHANGED
@@ -9,6 +9,7 @@ var drawLabel = function (context, data, settings, _a) {
9
9
  return;
10
10
  var size = settings.labelSize, font = settings.labelFont, weight = settings.labelWeight, marginLeft = data.selected ? 6 : 2, lineHeight = size * 1.2;
11
11
  var PERMANENT_MARGIN_LEFT = 9;
12
+ context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
12
13
  var labelBackgroundPath = (0, labelBackground_1.drawLabelBackground)(context, data, settings, {
13
14
  backgroundColor: data.selected ? '#FFF' : backgroundColor,
14
15
  marginLeft: marginLeft,
@@ -18,7 +19,6 @@ var drawLabel = function (context, data, settings, _a) {
18
19
  context.fillStyle = ((_b = settings.labelColor) === null || _b === void 0 ? void 0 : _b.attribute)
19
20
  ? data[settings.labelColor.attribute] || settings.labelColor.color || '#000'
20
21
  : settings.labelColor.color;
21
- context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
22
22
  var y = data.secondaryLabel ? data.y - size / (3 * 1.25) : data.y + size / 3;
23
23
  context.fillText(data.label, data.x + data.size + PERMANENT_MARGIN_LEFT + marginLeft, y);
24
24
  if (data.secondaryLabel) {
package/cjs/features/graph/types/graphDataTypes.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import Graph from 'graphology';
2
2
  import { NodeDisplayData, EdgeDisplayData } from 'sigma/types';
3
3
  import { Settings } from 'sigma/settings';
4
+ import { TRelationType } from '@reltio/mdm-sdk';
4
5
  export type GraphEdgeAttributes = EdgeDisplayData & {
5
6
  loop: boolean;
6
7
  arrowSizeRatio?: number;
@@ -21,7 +22,7 @@ export declare enum DataModelGraphNodeType {
21
22
  interactionType = "interactionType"
22
23
  }
23
24
  export type DataModelGraphEdgeAttributes = GraphEdgeAttributes & {
24
- edgeType: string;
25
+ relationTypes: TRelationType[];
25
26
  };
26
27
  export type DataModelGraphNodeAttributes = GraphNodeAttributes & {
27
28
  nodeType: DataModelGraphNodeType;
package/esm/features/graph/DataModelGraph/DataModelGraph.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
2
  import Graph from 'graphology';
3
+ import { DataModelGraphEdgeAttributes, DataModelGraphNodeAttributes } from '../types/graphDataTypes';
3
4
  type Props = {
4
- graph?: Graph;
5
+ graph: Graph<Partial<DataModelGraphNodeAttributes>, Partial<DataModelGraphEdgeAttributes>>;
5
6
  children?: React.ReactNode;
6
7
  selectedNode?: string;
7
- onNodeClick: (nodeId: string) => void;
8
- selectedEdge: string;
9
- onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
8
+ onNodeClick?: (nodeId: string) => void;
9
+ selectedEdges?: string[];
10
+ onEdgeLabelClick?: (edgeId: string, event: MouseEvent) => void;
10
11
  hideInteractionTypes?: boolean;
11
12
  };
12
- export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
13
+ export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
13
14
  export default DataModelGraph;
package/esm/features/graph/DataModelGraph/DataModelGraph.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
+ import { noop } from '../../../core';
2
3
  import { SigmaGraphContainer } from '../SigmaGraphContainer/SigmaGraphContainer';
3
- import { DataModelCircleLayuot } from './components/DataModelCircleLayout/DataModelCircleLayuot';
4
+ import { DataModelCircleLayout } from './components/DataModelCircleLayout/DataModelCircleLayout';
4
5
  import { ZoomSlider } from '../ZoomSlider';
5
6
  import { useStyles } from './styles';
6
7
  var settings = {
@@ -8,12 +9,12 @@ var settings = {
8
9
  zIndex: true
9
10
  };
10
11
  export var DataModelGraph = function (_a) {
11
- var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
12
+ var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, _b = _a.onNodeClick, onNodeClick = _b === void 0 ? noop : _b, selectedEdges = _a.selectedEdges, _c = _a.onEdgeLabelClick, onEdgeLabelClick = _c === void 0 ? noop : _c, hideInteractionTypes = _a.hideInteractionTypes;
12
13
  var styles = useStyles();
13
14
  return (React.createElement("div", { className: styles.wrapper },
14
15
  React.createElement("div", { className: styles.graph }, graph && (React.createElement(SigmaGraphContainer, { initialSettings: settings },
15
16
  React.createElement(React.Fragment, null,
16
- React.createElement(DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
17
+ React.createElement(DataModelCircleLayout, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
17
18
  React.createElement("div", { className: styles.rightBottomControls },
18
19
  React.createElement(ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
19
20
  children));
package/esm/features/graph/DataModelGraph/DataModelGraph.test.js CHANGED
@@ -3,7 +3,6 @@ import Graph from 'graphology';
3
3
  import { render, screen } from '@testing-library/react';
4
4
  import { DataModelGraph } from '../DataModelGraph';
5
5
  import { useDataModelGraphAppearance } from './hooks/useDataModelGraphAppearance';
6
- import { useFakeCenterNode } from './hooks/useFakeCenterNode';
7
6
  import { useCircleLayout } from '../hooks/useCircleLayout';
8
7
  jest.mock('@react-sigma/core', function () { return ({
9
8
  SigmaContainer: function (_a) {
@@ -24,9 +23,6 @@ jest.mock('../hooks/useSigmaCustomRenderers', function () { return ({
24
23
  jest.mock('./hooks/useDataModelGraphAppearance', function () { return ({
25
24
  useDataModelGraphAppearance: jest.fn()
26
25
  }); });
27
- jest.mock('./hooks/useFakeCenterNode', function () { return ({
28
- useFakeCenterNode: jest.fn()
29
- }); });
30
26
  jest.mock('../ZoomSlider', function () { return ({
31
27
  ZoomSlider: function () { return React.createElement("div", null, "ZoomSlider"); }
32
28
  }); });
@@ -34,10 +30,10 @@ describe('DataModelGraph tests', function () {
34
30
  var graph = new Graph();
35
31
  var selectedNode = 'node1';
36
32
  var onNodeClick = jest.fn();
37
- var selectedEdge = 'edge1';
33
+ var selectedEdges = ['edge1'];
38
34
  var onEdgeLabelClick = jest.fn();
39
35
  var setUp = function () {
40
- render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
36
+ render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
41
37
  };
42
38
  afterEach(function () {
43
39
  jest.clearAllMocks();
@@ -47,11 +43,10 @@ describe('DataModelGraph tests', function () {
47
43
  expect(useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
48
44
  graph: graph,
49
45
  selectedNode: selectedNode,
50
- selectedEdge: selectedEdge,
46
+ selectedEdges: selectedEdges,
51
47
  onNodeClick: onNodeClick,
52
48
  onEdgeLabelClick: onEdgeLabelClick
53
49
  }));
54
- expect(useFakeCenterNode).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, timeout: 3100 }));
55
50
  expect(useCircleLayout).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, animationDuration: 3000 }));
56
51
  expect(screen.getByText('ZoomSlider')).toBeInTheDocument();
57
52
  });
package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.d.ts → DataModelCircleLayout.d.ts} RENAMED
@@ -3,10 +3,10 @@ type Props = {
3
3
  graph: Graph;
4
4
  selectedNode?: string;
5
5
  onNodeClick: (nodeId: string) => void;
6
- selectedEdge: string;
6
+ selectedEdges?: string[];
7
7
  onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
8
8
  hideInteractionTypes?: boolean;
9
9
  };
10
10
  export declare const LAYOUT_ANIMATION_DURATION = 3000;
11
- export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
11
+ export declare const DataModelCircleLayout: ({ graph, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
12
12
  export {};
package/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js} RENAMED
@@ -1,15 +1,13 @@
1
1
  import { useCircleLayout } from '../../../hooks/useCircleLayout';
2
- import { useFakeCenterNode } from '../../hooks/useFakeCenterNode';
3
2
  import { useDataModelGraphAppearance } from '../../hooks/useDataModelGraphAppearance';
4
3
  export var LAYOUT_ANIMATION_DURATION = 3000;
5
- export var DataModelCircleLayuot = function (_a) {
6
- var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
7
- useFakeCenterNode({ graph: graph, timeout: LAYOUT_ANIMATION_DURATION + 100 });
4
+ export var DataModelCircleLayout = function (_a) {
5
+ var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdges = _a.selectedEdges, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
8
6
  useCircleLayout({ graph: graph, animationDuration: LAYOUT_ANIMATION_DURATION });
9
7
  useDataModelGraphAppearance({
10
8
  graph: graph,
11
9
  selectedNode: selectedNode,
12
- selectedEdge: selectedEdge,
10
+ selectedEdges: selectedEdges,
13
11
  onNodeClick: onNodeClick,
14
12
  onEdgeLabelClick: onEdgeLabelClick,
15
13
  hideInteractionTypes: hideInteractionTypes
package/esm/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js CHANGED
@@ -33,10 +33,12 @@ export var createDefaultGraph = function () {
33
33
  y: 200
34
34
  });
35
35
  graph.addEdgeWithKey('hcp->hca', 'hcp', 'hca', {
36
- label: '1'
36
+ label: '1',
37
+ relationTypes: [{ uri: 'relType1' }]
37
38
  });
38
39
  graph.addEdgeWithKey('hca->gpo', 'hca', 'gpo', {
39
- label: '2'
40
+ label: '2',
41
+ relationTypes: [{ uri: 'relType2' }]
40
42
  });
41
43
  graph.addEdgeWithKey('hcp->prescriptions', 'hcp', 'prescriptions', {
42
44
  type: 'dashed'
package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import Graph from 'graphology';
2
- export declare const EDGE_COLOR = "rgba(130, 130, 130, 1)";
3
- export declare const DASHED_EDGE_COLOR = "rgba(189, 189, 189, 1)";
2
+ export declare const EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
3
+ export declare const DASHED_EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
4
4
  export declare const INACTIVE_EDGE_COLOR = "rgba(224, 224, 224, 1)";
5
5
  export declare const SELECTED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
6
6
  export declare const RELATED_EDGE_COLOR = "rgba(130, 130, 130, 1)";
@@ -8,11 +8,12 @@ export declare const RELATED_DASHED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
8
8
  export declare const INACTIVE_LABEL_COLOR = "rgba(0, 0, 0, 0.38)";
9
9
  type Props = {
10
10
  graph: Graph;
11
- selectedNode: string;
12
- selectedEdge: string;
11
+ selectedNode?: string;
12
+ selectedEdges?: string[];
13
13
  onNodeClick: (node: string) => void;
14
14
  onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
15
15
  hideInteractionTypes?: boolean;
16
+ relationEdgesLabelsAmountThreshold?: number;
16
17
  };
17
- export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick, hideInteractionTypes }: Props) => void;
18
+ export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdges, onNodeClick, onEdgeLabelClick, hideInteractionTypes, relationEdgesLabelsAmountThreshold }: Props) => void;
18
19
  export {};
package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js CHANGED
@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
18
18
  }
19
19
  return to.concat(ar || Array.prototype.slice.call(from));
20
20
  };
21
- import { useEffect, useState } from 'react';
21
+ import { useEffect, useMemo, useState } from 'react';
22
22
  import { useSigmaContext } from '@react-sigma/core';
23
23
  import { useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core';
24
24
  import { svg2Url } from '@reltio/mdm-sdk';
@@ -33,25 +33,35 @@ var DEFAULT_NODE_STYLE = {
33
33
  color: 'rgba(55, 71, 79, 1)'
34
34
  };
35
35
  var DEFAULT_EDGE_STYLE = {
36
- size: 2
36
+ size: 1
37
37
  };
38
- export var EDGE_COLOR = 'rgba(130, 130, 130, 1)';
39
- export var DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
38
+ export var EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
39
+ export var DASHED_EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
40
40
  export var INACTIVE_EDGE_COLOR = 'rgba(224, 224, 224, 1)';
41
41
  export var SELECTED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
42
42
  export var RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
43
43
  export var RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
44
44
  export var INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
45
+ var RELATION_EDGES_LABELS_AMOUNT_THRESHOLD = 29;
45
46
  export var useDataModelGraphAppearance = function (_a) {
46
- var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
47
+ var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdges = _a.selectedEdges, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes, _b = _a.relationEdgesLabelsAmountThreshold, relationEdgesLabelsAmountThreshold = _b === void 0 ? RELATION_EDGES_LABELS_AMOUNT_THRESHOLD : _b;
47
48
  var sigma = useSigma();
48
49
  var container = useSigmaContext().container;
49
- var _b = useState(null), hoveredNode = _b[0], setHoveredNode = _b[1];
50
+ var _c = useState(null), hoveredNode = _c[0], setHoveredNode = _c[1];
50
51
  var registerEvents = useRegisterEvents();
51
52
  var setSettings = useSetSettings();
52
53
  useLoopRenderer(graph);
53
54
  var hoveredEdge = useEdgeLabelsRenderer({ graph: graph, onEdgeLabelClick: onEdgeLabelClick });
54
55
  useSelectedNodeRenderer(graph);
56
+ var relationsEdgesAmount = useMemo(function () {
57
+ return graph.reduceEdges(function (count, _edgeId, edgeData) {
58
+ var _a;
59
+ if (((_a = edgeData.relationTypes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
60
+ return count + 1;
61
+ }
62
+ return count;
63
+ }, 0);
64
+ }, [graph]);
55
65
  useEffect(function () {
56
66
  registerEvents({
57
67
  enterNode: function (_a) {
@@ -85,7 +95,8 @@ export var useDataModelGraphAppearance = function (_a) {
85
95
  var isInactiveNode = (selectedNode &&
86
96
  selectedNodeNeighbours &&
87
97
  __spreadArray(__spreadArray([], selectedNodeNeighbours, true), [selectedNode], false).every(function (n) { return n !== node; })) ||
88
- (selectedEdge && !graph.hasExtremity(selectedEdge, node)) ||
98
+ ((selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) > 0 &&
99
+ selectedEdges.every(function (selectedEdge) { return !graph.hasExtremity(selectedEdge, node); })) ||
89
100
  false;
90
101
  var newData = __assign(__assign({}, DEFAULT_NODE_STYLE), data);
91
102
  if (data.nodeType === DataModelGraphNodeType.interactionType) {
@@ -112,9 +123,9 @@ export var useDataModelGraphAppearance = function (_a) {
112
123
  edgeReducer: function (edge, data) {
113
124
  var isDashedLine = data.type === 'dashed';
114
125
  var newData = __assign(__assign({}, DEFAULT_EDGE_STYLE), data);
115
- if (selectedEdge === edge) {
116
- newData.selected = true;
117
- }
126
+ var isSelected = selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.includes(edge);
127
+ newData.selected = isSelected;
128
+ var showOnlyRelatedEdgesLabels = relationsEdgesAmount > relationEdgesLabelsAmountThreshold;
118
129
  if (selectedNode) {
119
130
  if (graph.hasExtremity(edge, selectedNode)) {
120
131
  newData.color = isDashedLine ? RELATED_DASHED_EDGE_COLOR : RELATED_EDGE_COLOR;
@@ -122,17 +133,36 @@ export var useDataModelGraphAppearance = function (_a) {
122
133
  else {
123
134
  newData.color = INACTIVE_EDGE_COLOR;
124
135
  newData.labelColor = INACTIVE_LABEL_COLOR;
136
+ if (showOnlyRelatedEdgesLabels) {
137
+ delete newData.label;
138
+ }
125
139
  }
126
140
  }
127
- else if (selectedEdge) {
128
- newData.color = edge === selectedEdge ? SELECTED_EDGE_COLOR : INACTIVE_EDGE_COLOR;
129
- newData.labelColor = edge === selectedEdge ? undefined : INACTIVE_LABEL_COLOR;
141
+ else if (selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) {
142
+ newData.color = isSelected ? SELECTED_EDGE_COLOR : INACTIVE_EDGE_COLOR;
143
+ newData.labelColor = isSelected ? undefined : INACTIVE_LABEL_COLOR;
144
+ if (showOnlyRelatedEdgesLabels && !isSelected) {
145
+ delete newData.label;
146
+ }
130
147
  }
131
148
  else {
132
149
  newData.color = isDashedLine ? DASHED_EDGE_COLOR : EDGE_COLOR;
150
+ if (showOnlyRelatedEdgesLabels) {
151
+ delete newData.label;
152
+ }
133
153
  }
134
154
  return newData;
135
155
  }
136
156
  });
137
- }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode, hideInteractionTypes]);
157
+ }, [
158
+ sigma,
159
+ setSettings,
160
+ selectedNode,
161
+ selectedEdges,
162
+ hoveredEdge,
163
+ hoveredNode,
164
+ relationsEdgesAmount,
165
+ relationEdgesLabelsAmountThreshold,
166
+ hideInteractionTypes
167
+ ]);
138
168
  };
package/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.test.js CHANGED
@@ -57,7 +57,7 @@ var __rest = (this && this.__rest) || function (s, e) {
57
57
  return t;
58
58
  };
59
59
  import { renderHook, act } from '@testing-library/react-hooks';
60
- import { last } from 'ramda';
60
+ import { last, omit } from 'ramda';
61
61
  import { useSigma, useSetSettings, useRegisterEvents } from '@react-sigma/core';
62
62
  import { DASHED_EDGE_COLOR, EDGE_COLOR, INACTIVE_EDGE_COLOR, INACTIVE_LABEL_COLOR, RELATED_DASHED_EDGE_COLOR, RELATED_EDGE_COLOR, SELECTED_EDGE_COLOR, useDataModelGraphAppearance } from './useDataModelGraphAppearance';
63
63
  import { DataModelGraphNodeType } from '../../types/graphDataTypes';
@@ -86,7 +86,7 @@ describe('useDataModelGraphAppearance tests', function () {
86
86
  getGraph: function () { return graph; }
87
87
  });
88
88
  return __assign({ graph: graph }, renderHook(useDataModelGraphAppearance, {
89
- initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
89
+ initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdges: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
90
90
  }));
91
91
  };
92
92
  var setSettings = jest.fn();
@@ -148,8 +148,8 @@ describe('useDataModelGraphAppearance tests', function () {
148
148
  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 }));
149
149
  expect(result.error).toBeUndefined();
150
150
  });
151
- it('should apply correct styles when selectedEdge is specified', function () {
152
- var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
151
+ it('should apply correct styles when selectedEdges is specified', function () {
152
+ var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
153
153
  var nodeReducer = getNodeReducer();
154
154
  expect(nodeReducer('hcp', graph.getNodeAttributes('hcp'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hcp'))), { image: 'HCP.svg', label: 'HCP', nodeType: DataModelGraphNodeType.entityType }));
155
155
  expect(nodeReducer('hca', graph.getNodeAttributes('hca'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hca'))), { image: 'HCA.svg', label: 'HCA', nodeType: DataModelGraphNodeType.entityType }));
@@ -165,31 +165,53 @@ describe('useDataModelGraphAppearance tests', function () {
165
165
  });
166
166
  });
167
167
  describe('edges reducer behavior', function () {
168
- var defaultEdgeStyle = {
169
- size: 2
170
- };
168
+ var getDefaultEdgeAttributes = function (attributes) { return (__assign(__assign({}, attributes), { size: 1 })); };
171
169
  it('should apply default edge style', function () {
172
170
  var _a = setUp(), result = _a.result, graph = _a.graph;
173
171
  var edgeReducer = getEdgeReducer();
174
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: EDGE_COLOR }));
175
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: EDGE_COLOR }));
176
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: DASHED_EDGE_COLOR }));
172
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: EDGE_COLOR }));
173
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { color: EDGE_COLOR }));
174
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: DASHED_EDGE_COLOR }));
177
175
  expect(result.error).toBeUndefined();
178
176
  });
179
177
  it('should apply correct styles when selectedNode is specified', function () {
180
178
  var _a = setUp({ selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
181
179
  var edgeReducer = getEdgeReducer();
182
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: RELATED_EDGE_COLOR }));
183
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
184
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: RELATED_DASHED_EDGE_COLOR }));
180
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: RELATED_EDGE_COLOR }));
181
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
182
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: RELATED_DASHED_EDGE_COLOR }));
183
+ expect(result.error).toBeUndefined();
184
+ });
185
+ it('should apply correct styles when selectedEdges is specified', function () {
186
+ var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
187
+ var edgeReducer = getEdgeReducer();
188
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: SELECTED_EDGE_COLOR, selected: true }));
189
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { selected: false, color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
190
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', selected: false, color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
191
+ expect(result.error).toBeUndefined();
192
+ });
193
+ it('should remove edge label prop when relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
194
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1 }), graph = _a.graph, result = _a.result;
195
+ var edgeReducer = getEdgeReducer();
196
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, omit(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca')))), { color: EDGE_COLOR }));
197
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, omit(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { color: EDGE_COLOR }));
198
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: DASHED_EDGE_COLOR }));
199
+ expect(result.error).toBeUndefined();
200
+ });
201
+ it('should keep edge label prop for edge related with selected node even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
202
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
203
+ var edgeReducer = getEdgeReducer();
204
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: RELATED_EDGE_COLOR }));
205
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, omit(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
206
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: RELATED_DASHED_EDGE_COLOR }));
185
207
  expect(result.error).toBeUndefined();
186
208
  });
187
- it('should apply correct styles when selectedEdge is specified', function () {
188
- var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
209
+ it('should keep edge label prop for selected edge even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
210
+ var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
189
211
  var edgeReducer = getEdgeReducer();
190
- expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: SELECTED_EDGE_COLOR, selected: true }));
191
- expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
192
- expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
212
+ expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: SELECTED_EDGE_COLOR, selected: true }));
213
+ expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, omit(['label'], getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo')))), { selected: false, color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
214
+ expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', selected: false, color: INACTIVE_EDGE_COLOR, labelColor: INACTIVE_LABEL_COLOR }));
193
215
  expect(result.error).toBeUndefined();
194
216
  });
195
217
  });
package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.js CHANGED
@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import { useEffect, useState, useRef, useCallback } from 'react';
13
13
  import { useRegisterEvents, useSigma } from '@react-sigma/core';
14
+ import { rgbaToRgb } from '@reltio/mdm-sdk';
14
15
  import { useSigmaCustomRenderers } from '../../hooks/useSigmaCustomRenderers';
15
16
  import { DataModelGraphNodeType } from '../../types/graphDataTypes';
16
17
  import { drawLabel } from '../../rendering/canvas/label';
@@ -34,7 +35,7 @@ export var useEdgeLabelsRenderer = function (_a) {
34
35
  var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
35
36
  var targetDisplayData = sigma.getNodeDisplayData(targetId);
36
37
  var relationEdge = [sourceDisplayData.nodeType, targetDisplayData.nodeType].every(function (type) { return type === DataModelGraphNodeType.entityType; });
37
- return relationEdge && !edgeDisplayData.hidden;
38
+ return relationEdge && !edgeDisplayData.hidden && edgeDisplayData.label;
38
39
  }, [sigma]);
39
40
  var drawEdgeLabel = useCallback(function (context, edgeId, sourceId, targetId) {
40
41
  delete edgeLabelsPathsMap.current[edgeId];
@@ -65,11 +66,11 @@ export var useEdgeLabelsRenderer = function (_a) {
65
66
  var isHovered = hoveredEdgeLabel === edgeId;
66
67
  var isSelected = edgeDisplayData.selected;
67
68
  var dotScale = isHovered || isSelected ? 1.4 : 1;
68
- var circleRadius = sigma.scaleSize(2.5 * dotScale);
69
+ var circleRadius = sigma.scaleSize(2 * dotScale);
69
70
  var _a = getEdgeCenter(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
70
71
  context.beginPath();
71
72
  context.arc(x, y, circleRadius, 0, Math.PI * 2);
72
- context.fillStyle = edgeDisplayData.color;
73
+ context.fillStyle = rgbaToRgb(edgeDisplayData.color);
73
74
  context.fill();
74
75
  }
75
76
  }, [sigma, hoveredEdgeLabel, shouldRenderLabels]);
package/esm/features/graph/DataModelGraph/hooks/useEdgeLabelsRenderer.test.js CHANGED
@@ -105,8 +105,8 @@ describe('useEdgeLabelsRenderer tests', function () {
105
105
  'arc',
106
106
  'fill'
107
107
  ]);
108
- expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2.5, 0, 2 * Math.PI);
109
- expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2.5, 0, 2 * Math.PI);
108
+ expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2, 0, 2 * Math.PI);
109
+ expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2, 0, 2 * Math.PI);
110
110
  });
111
111
  it('should correctly draw a hover state of edge', function () {
112
112
  setUp();
@@ -127,7 +127,7 @@ describe('useEdgeLabelsRenderer tests', function () {
127
127
  });
128
128
  expect(getCanvasContextEventTypes(hoversCanvasContext)).toEqual(expect.arrayContaining(['beginPath', 'arc', 'fill']));
129
129
  expect(hoversCanvasContext.arc).toBeCalledTimes(1);
130
- expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 3.5, 0, 2 * Math.PI);
130
+ expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 2.8, 0, 2 * Math.PI);
131
131
  expect(drawLabel).toBeCalledTimes(1);
132
132
  expect(drawLabel).toHaveBeenCalledWith(hoversCanvasContext, { label: '1', size: 4, x: 150, y: 100 }, { labelColor: 'black', labelSize: 12 * 1.2 }, { backgroundColor: 'rgba(250, 250, 250, 1)' });
133
133
  });
package/esm/features/graph/index.d.ts CHANGED
@@ -11,6 +11,6 @@ export { NodeBorderProgram } from './rendering/webgl/node.border';
11
11
  export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
12
12
  export { WebGLImageLoader } from './rendering/webgl/image';
13
13
  export { getCanvasMousePos } from './rendering/canvas/utils';
14
- export type { GraphNodeAttributes, GraphEdgeAttributes } from './types/graphDataTypes';
14
+ export type { GraphNodeAttributes, GraphEdgeAttributes, DataModelGraphNodeAttributes, DataModelGraphEdgeAttributes } from './types/graphDataTypes';
15
15
  export { DataModelGraphNodeType } from './types/graphDataTypes';
16
16
  export type { Canvas } from './types/sigmaCustomRenderersTypes';
package/esm/features/graph/rendering/canvas/label.js CHANGED
@@ -6,6 +6,7 @@ export var drawLabel = function (context, data, settings, _a) {
6
6
  return;
7
7
  var size = settings.labelSize, font = settings.labelFont, weight = settings.labelWeight, marginLeft = data.selected ? 6 : 2, lineHeight = size * 1.2;
8
8
  var PERMANENT_MARGIN_LEFT = 9;
9
+ context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
9
10
  var labelBackgroundPath = drawLabelBackground(context, data, settings, {
10
11
  backgroundColor: data.selected ? '#FFF' : backgroundColor,
11
12
  marginLeft: marginLeft,
@@ -15,7 +16,6 @@ export var drawLabel = function (context, data, settings, _a) {
15
16
  context.fillStyle = ((_b = settings.labelColor) === null || _b === void 0 ? void 0 : _b.attribute)
16
17
  ? data[settings.labelColor.attribute] || settings.labelColor.color || '#000'
17
18
  : settings.labelColor.color;
18
- context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
19
19
  var y = data.secondaryLabel ? data.y - size / (3 * 1.25) : data.y + size / 3;
20
20
  context.fillText(data.label, data.x + data.size + PERMANENT_MARGIN_LEFT + marginLeft, y);
21
21
  if (data.secondaryLabel) {
package/esm/features/graph/types/graphDataTypes.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import Graph from 'graphology';
2
2
  import { NodeDisplayData, EdgeDisplayData } from 'sigma/types';
3
3
  import { Settings } from 'sigma/settings';
4
+ import { TRelationType } from '@reltio/mdm-sdk';
4
5
  export type GraphEdgeAttributes = EdgeDisplayData & {
5
6
  loop: boolean;
6
7
  arrowSizeRatio?: number;
@@ -21,7 +22,7 @@ export declare enum DataModelGraphNodeType {
21
22
  interactionType = "interactionType"
22
23
  }
23
24
  export type DataModelGraphEdgeAttributes = GraphEdgeAttributes & {
24
- edgeType: string;
25
+ relationTypes: TRelationType[];
25
26
  };
26
27
  export type DataModelGraphNodeAttributes = GraphNodeAttributes & {
27
28
  nodeType: DataModelGraphNodeType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1851",
3
+ "version": "1.4.1853",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
@@ -8,7 +8,7 @@
8
8
  "@fluentui/react-context-selector": "^9.1.26",
9
9
  "@react-google-maps/api": "2.7.0",
10
10
  "@react-sigma/core": "3.4.0",
11
- "@reltio/mdm-sdk": "^1.4.1799",
11
+ "@reltio/mdm-sdk": "^1.4.1801",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",