@reltio/components 1.4.1852 → 1.4.1854

package/cjs/constants/prop-types.js

@@ -3,66 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QueryBuilderAttributeType = exports.QueryBuilderAttributeDataType = exports.GroupedColumnsDataType = exports.ColumnsDataType = exports.ColumnFilterType = exports.SortingType = exports.ColumnDataType = exports.DropDownGroupEntryType = exports.DropDownEntryType = exports.SelectValueType = void 0;
+exports.QueryBuilderAttributeType = exports.SortingType = void 0;
 var prop_types_1 = __importDefault(require("prop-types"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var SelectValueType = prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number, prop_types_1.default.object]);
-exports.SelectValueType = SelectValueType;
-var DropDownEntryType = prop_types_1.default.shape({
-    value: SelectValueType.isRequired,
-    label: prop_types_1.default.string
-});
-exports.DropDownEntryType = DropDownEntryType;
-var DropDownGroupEntryType = prop_types_1.default.shape({
-    label: prop_types_1.default.string.isRequired,
-    values: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired
-});
-exports.DropDownGroupEntryType = DropDownGroupEntryType;
-var ColumnDataType = prop_types_1.default.shape({
-    id: prop_types_1.default.string,
-    label: prop_types_1.default.string,
-    dataTypeDefinition: prop_types_1.default.object,
-    resizable: prop_types_1.default.bool,
-    sortable: prop_types_1.default.bool,
-    filterable: prop_types_1.default.bool,
-    headCellRenderer: prop_types_1.default.func,
-    rowCellValueRenderer: prop_types_1.default.func,
-    nestedPath: prop_types_1.default.arrayOf(prop_types_1.default.string)
-});
-exports.ColumnDataType = ColumnDataType;
 var SortingType = prop_types_1.default.shape({
     field: prop_types_1.default.string,
-    order: mdm_sdk_1.SortOrderType
+    order: prop_types_1.default.oneOf(['asc', 'desc'])
 });
 exports.SortingType = SortingType;
-var ColumnFilterType = prop_types_1.default.shape({
-    value: prop_types_1.default.oneOfType([mdm_sdk_1.FilterValueType, prop_types_1.default.arrayOf(mdm_sdk_1.FilterValueType)]),
-    filter: prop_types_1.default.string
-});
-exports.ColumnFilterType = ColumnFilterType;
-var PlainColumnsDataType = prop_types_1.default.arrayOf(prop_types_1.default.shape({
-    id: prop_types_1.default.string,
-    label: prop_types_1.default.string,
-    dataTypeDefinition: prop_types_1.default.object
-}));
-var GroupedColumnsDataType = prop_types_1.default.arrayOf(prop_types_1.default.shape({
-    id: prop_types_1.default.string,
+var AttrType = prop_types_1.default.shape({
     label: prop_types_1.default.string,
-    columns: PlainColumnsDataType
-}));
-exports.GroupedColumnsDataType = GroupedColumnsDataType;
-var ColumnsDataType = prop_types_1.default.oneOfType([PlainColumnsDataType, GroupedColumnsDataType]);
-exports.ColumnsDataType = ColumnsDataType;
+    name: prop_types_1.default.string,
+    description: prop_types_1.default.string,
+    type: prop_types_1.default.string,
+    hidden: prop_types_1.default.bool,
+    faceted: prop_types_1.default.bool,
+    searchable: prop_types_1.default.bool,
+    uri: prop_types_1.default.string,
+    access: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    cardinality: prop_types_1.default.shape({
+        minValue: prop_types_1.default.number,
+        maxValue: prop_types_1.default.number
+    })
+});
 var QueryBuilderAttributeDataType = prop_types_1.default.shape({
     title: prop_types_1.default.string,
     pathToTitle: prop_types_1.default.arrayOf(prop_types_1.default.string),
     fieldName: prop_types_1.default.string,
     entityTypeUri: prop_types_1.default.string,
-    attrType: mdm_sdk_1.AttributeTypeType,
+    attrType: AttrType,
     uri: prop_types_1.default.string,
     groupName: prop_types_1.default.string
 });
-exports.QueryBuilderAttributeDataType = QueryBuilderAttributeDataType;
 var QueryBuilderAttributeType = prop_types_1.default.shape({
     id: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
     values: prop_types_1.default.array,

package/cjs/constants/textField.d.ts

@@ -1,6 +1,6 @@
 export declare const COMMON_TEXT_FIELD_PROPS: {
-    variant: string;
-    size: string;
+    variant: "filled";
+    size: "small";
     InputProps: {
         hiddenLabel: boolean;
     };

package/cjs/contexts/ScrollToElementContext/index.d.ts

@@ -6,7 +6,7 @@ export declare enum ScrollType {
     NewView = "NewView"
 }
 type ScrollToElementContextProps = {
-    element: unknown;
+    element: AttributeError | AttributeType | string;
     type: ScrollType;
     highlightError?: (element: AttributeError) => void;
     highlightAttribute?: (element: AttributeType) => void;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import Graph from 'graphology';
+import { DataModelGraphEdgeAttributes, DataModelGraphNodeAttributes } from '../types/graphDataTypes';
 type Props = {
-    graph?: Graph;
+    graph: Graph<Partial<DataModelGraphNodeAttributes>, Partial<DataModelGraphEdgeAttributes>>;
     children?: React.ReactNode;
     selectedNode?: string;
-    onNodeClick: (nodeId: string) => void;
-    selectedEdge: string;
-    onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+    onNodeClick?: (nodeId: string) => void;
+    selectedEdges?: string[];
+    onEdgeLabelClick?: (edgeId: string, event: MouseEvent) => void;
     hideInteractionTypes?: boolean;
 };
-export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
+export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => JSX.Element;
 export default DataModelGraph;

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

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataModelGraph = void 0;
 var react_1 = __importDefault(require("react"));
+var core_1 = require("../../../core");
 var SigmaGraphContainer_1 = require("../SigmaGraphContainer/SigmaGraphContainer");
-var DataModelCircleLayuot_1 = require("./components/DataModelCircleLayout/DataModelCircleLayuot");
+var DataModelCircleLayout_1 = require("./components/DataModelCircleLayout/DataModelCircleLayout");
 var ZoomSlider_1 = require("../ZoomSlider");
 var styles_1 = require("./styles");
 var settings = {
@@ -14,12 +15,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, hideInteractionTypes = _a.hideInteractionTypes;
+    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;
     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, hideInteractionTypes: hideInteractionTypes }),
+                react_1.default.createElement(DataModelCircleLayout_1.DataModelCircleLayout, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, 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

@@ -8,7 +8,6 @@ var graphology_1 = __importDefault(require("graphology"));
 var react_2 = require("@testing-library/react");
 var DataModelGraph_1 = require("../DataModelGraph");
 var useDataModelGraphAppearance_1 = require("./hooks/useDataModelGraphAppearance");
-var useFakeCenterNode_1 = require("./hooks/useFakeCenterNode");
 var useCircleLayout_1 = require("../hooks/useCircleLayout");
 jest.mock('@react-sigma/core', function () { return ({
     SigmaContainer: function (_a) {
@@ -29,9 +28,6 @@ jest.mock('../hooks/useSigmaCustomRenderers', function () { return ({
 jest.mock('./hooks/useDataModelGraphAppearance', function () { return ({
     useDataModelGraphAppearance: jest.fn()
 }); });
-jest.mock('./hooks/useFakeCenterNode', function () { return ({
-    useFakeCenterNode: jest.fn()
-}); });
 jest.mock('../ZoomSlider', function () { return ({
     ZoomSlider: function () { return react_1.default.createElement("div", null, "ZoomSlider"); }
 }); });
@@ -39,10 +35,10 @@ describe('DataModelGraph tests', function () {
     var graph = new graphology_1.default();
     var selectedNode = 'node1';
     var onNodeClick = jest.fn();
-    var selectedEdge = 'edge1';
+    var selectedEdges = ['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, hideInteractionTypes: false }));
+        (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
     };
     afterEach(function () {
         jest.clearAllMocks();
@@ -52,11 +48,10 @@ describe('DataModelGraph tests', function () {
         expect(useDataModelGraphAppearance_1.useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
             graph: graph,
             selectedNode: selectedNode,
-            selectedEdge: selectedEdge,
+            selectedEdges: selectedEdges,
             onNodeClick: onNodeClick,
             onEdgeLabelClick: onEdgeLabelClick
         }));
-        expect(useFakeCenterNode_1.useFakeCenterNode).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, timeout: 3100 }));
         expect(useCircleLayout_1.useCircleLayout).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, animationDuration: 3000 }));
         expect(react_2.screen.getByText('ZoomSlider')).toBeInTheDocument();
     });

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

@@ -3,10 +3,10 @@ type Props = {
     graph: Graph;
     selectedNode?: string;
     onNodeClick: (nodeId: string) => void;
-    selectedEdge: string;
+    selectedEdges?: 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, hideInteractionTypes }: Props) => any;
+export declare const DataModelCircleLayout: ({ graph, selectedNode, onNodeClick, selectedEdges, onEdgeLabelClick, hideInteractionTypes }: Props) => any;
 export {};

package/cjs/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js}

@@ -1,22 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataModelCircleLayuot = exports.LAYOUT_ANIMATION_DURATION = void 0;
+exports.DataModelCircleLayout = exports.LAYOUT_ANIMATION_DURATION = void 0;
 var useCircleLayout_1 = require("../../../hooks/useCircleLayout");
-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, hideInteractionTypes = _a.hideInteractionTypes;
-    (0, useFakeCenterNode_1.useFakeCenterNode)({ graph: graph, timeout: exports.LAYOUT_ANIMATION_DURATION + 100 });
+var DataModelCircleLayout = function (_a) {
+    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdges = _a.selectedEdges, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     (0, useCircleLayout_1.useCircleLayout)({ graph: graph, animationDuration: exports.LAYOUT_ANIMATION_DURATION });
     (0, useDataModelGraphAppearance_1.useDataModelGraphAppearance)({
         graph: graph,
         selectedNode: selectedNode,
-        selectedEdge: selectedEdge,
+        selectedEdges: selectedEdges,
         onNodeClick: onNodeClick,
         onEdgeLabelClick: onEdgeLabelClick,
         hideInteractionTypes: hideInteractionTypes
     });
     return null;
 };
-exports.DataModelCircleLayuot = DataModelCircleLayuot;
+exports.DataModelCircleLayout = DataModelCircleLayout;

package/cjs/features/graph/DataModelGraph/hooks/defaultGraph.test-data.js

@@ -39,10 +39,12 @@ var createDefaultGraph = function () {
         y: 200
     });
     graph.addEdgeWithKey('hcp->hca', 'hcp', 'hca', {
-        label: '1'
+        label: '1',
+        relationTypes: [{ uri: 'relType1' }]
     });
     graph.addEdgeWithKey('hca->gpo', 'hca', 'gpo', {
-        label: '2'
+        label: '2',
+        relationTypes: [{ uri: 'relType2' }]
     });
     graph.addEdgeWithKey('hcp->prescriptions', 'hcp', 'prescriptions', {
         type: 'dashed'

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

@@ -1,6 +1,6 @@
 import Graph from 'graphology';
-export declare const EDGE_COLOR = "rgba(130, 130, 130, 1)";
-export declare const DASHED_EDGE_COLOR = "rgba(189, 189, 189, 1)";
+export declare const EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
+export declare const DASHED_EDGE_COLOR = "rgba(0, 0, 0, 0.2)";
 export declare const INACTIVE_EDGE_COLOR = "rgba(224, 224, 224, 1)";
 export declare const SELECTED_EDGE_COLOR = "rgba(79, 79, 79, 1)";
 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)";
 export declare const INACTIVE_LABEL_COLOR = "rgba(0, 0, 0, 0.38)";
 type Props = {
     graph: Graph;
-    selectedNode: string;
-    selectedEdge: string;
+    selectedNode?: string;
+    selectedEdges?: string[];
     onNodeClick: (node: string) => void;
     onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
     hideInteractionTypes?: boolean;
+    relationEdgesLabelsAmountThreshold?: number;
 };
-export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick, hideInteractionTypes }: Props) => void;
+export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdges, onNodeClick, onEdgeLabelClick, hideInteractionTypes, relationEdgesLabelsAmountThreshold }: Props) => void;
 export {};

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

@@ -36,25 +36,35 @@ var DEFAULT_NODE_STYLE = {
     color: 'rgba(55, 71, 79, 1)'
 };
 var DEFAULT_EDGE_STYLE = {
-    size: 2
+    size: 1
 };
-exports.EDGE_COLOR = 'rgba(130, 130, 130, 1)';
-exports.DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
+exports.EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
+exports.DASHED_EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
 exports.INACTIVE_EDGE_COLOR = 'rgba(224, 224, 224, 1)';
 exports.SELECTED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
 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 RELATION_EDGES_LABELS_AMOUNT_THRESHOLD = 29;
 var useDataModelGraphAppearance = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
+    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;
     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];
+    var _c = (0, react_1.useState)(null), hoveredNode = _c[0], setHoveredNode = _c[1];
     var registerEvents = (0, core_2.useRegisterEvents)();
     var setSettings = (0, core_2.useSetSettings)();
     (0, useLoopRenderer_1.useLoopRenderer)(graph);
     var hoveredEdge = (0, useEdgeLabelsRenderer_1.useEdgeLabelsRenderer)({ graph: graph, onEdgeLabelClick: onEdgeLabelClick });
     (0, useSelectedNodeRenderer_1.useSelectedNodeRenderer)(graph);
+    var relationsEdgesAmount = (0, react_1.useMemo)(function () {
+        return graph.reduceEdges(function (count, _edgeId, edgeData) {
+            var _a;
+            if (((_a = edgeData.relationTypes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                return count + 1;
+            }
+            return count;
+        }, 0);
+    }, [graph]);
     (0, react_1.useEffect)(function () {
         registerEvents({
             enterNode: function (_a) {
@@ -88,7 +98,8 @@ var useDataModelGraphAppearance = function (_a) {
                 var isInactiveNode = (selectedNode &&
                     selectedNodeNeighbours &&
                     __spreadArray(__spreadArray([], selectedNodeNeighbours, true), [selectedNode], false).every(function (n) { return n !== node; })) ||
-                    (selectedEdge && !graph.hasExtremity(selectedEdge, node)) ||
+                    ((selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) > 0 &&
+                        selectedEdges.every(function (selectedEdge) { return !graph.hasExtremity(selectedEdge, node); })) ||
                     false;
                 var newData = __assign(__assign({}, DEFAULT_NODE_STYLE), data);
                 if (data.nodeType === graphDataTypes_1.DataModelGraphNodeType.interactionType) {
@@ -115,9 +126,9 @@ var useDataModelGraphAppearance = function (_a) {
             edgeReducer: function (edge, data) {
                 var isDashedLine = data.type === 'dashed';
                 var newData = __assign(__assign({}, DEFAULT_EDGE_STYLE), data);
-                if (selectedEdge === edge) {
-                    newData.selected = true;
-                }
+                var isSelected = selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.includes(edge);
+                newData.selected = isSelected;
+                var showOnlyRelatedEdgesLabels = relationsEdgesAmount > relationEdgesLabelsAmountThreshold;
                 if (selectedNode) {
                     if (graph.hasExtremity(edge, selectedNode)) {
                         newData.color = isDashedLine ? exports.RELATED_DASHED_EDGE_COLOR : exports.RELATED_EDGE_COLOR;
@@ -125,18 +136,37 @@ var useDataModelGraphAppearance = function (_a) {
                     else {
                         newData.color = exports.INACTIVE_EDGE_COLOR;
                         newData.labelColor = exports.INACTIVE_LABEL_COLOR;
+                        if (showOnlyRelatedEdgesLabels) {
+                            delete newData.label;
+                        }
                     }
                 }
-                else if (selectedEdge) {
-                    newData.color = edge === selectedEdge ? exports.SELECTED_EDGE_COLOR : exports.INACTIVE_EDGE_COLOR;
-                    newData.labelColor = edge === selectedEdge ? undefined : exports.INACTIVE_LABEL_COLOR;
+                else if (selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) {
+                    newData.color = isSelected ? exports.SELECTED_EDGE_COLOR : exports.INACTIVE_EDGE_COLOR;
+                    newData.labelColor = isSelected ? undefined : exports.INACTIVE_LABEL_COLOR;
+                    if (showOnlyRelatedEdgesLabels && !isSelected) {
+                        delete newData.label;
+                    }
                 }
                 else {
                     newData.color = isDashedLine ? exports.DASHED_EDGE_COLOR : exports.EDGE_COLOR;
+                    if (showOnlyRelatedEdgesLabels) {
+                        delete newData.label;
+                    }
                 }
                 return newData;
             }
         });
-    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode, hideInteractionTypes]);
+    }, [
+        sigma,
+        setSettings,
+        selectedNode,
+        selectedEdges,
+        hoveredEdge,
+        hoveredNode,
+        relationsEdgesAmount,
+        relationEdgesLabelsAmountThreshold,
+        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(), hideInteractionTypes: false }, props)
+            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdges: null, onEdgeLabelClick: jest.fn(), hideInteractionTypes: false }, props)
         }));
     };
     var setSettings = jest.fn();
@@ -150,8 +150,8 @@ 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 }));
             expect(result.error).toBeUndefined();
         });
-        it('should apply correct styles when selectedEdge is specified', function () {
-            var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
+        it('should apply correct styles when selectedEdges is specified', function () {
+            var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
             var nodeReducer = getNodeReducer();
             expect(nodeReducer('hcp', graph.getNodeAttributes('hcp'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hcp'))), { image: 'HCP.svg', label: 'HCP', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType }));
             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 () {
         });
     });
     describe('edges reducer behavior', function () {
-        var defaultEdgeStyle = {
-            size: 2
-        };
+        var getDefaultEdgeAttributes = function (attributes) { return (__assign(__assign({}, attributes), { size: 1 })); };
         it('should apply default edge style', function () {
             var _a = setUp(), result = _a.result, graph = _a.graph;
             var edgeReducer = getEdgeReducer();
-            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.EDGE_COLOR }));
-            expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '2', color: useDataModelGraphAppearance_1.EDGE_COLOR }));
-            expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
+            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
+            expect(edgeReducer('hca->gpo', graph.getEdgeAttributes('hca->gpo'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hca->gpo'))), { color: useDataModelGraphAppearance_1.EDGE_COLOR }));
+            expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
             expect(result.error).toBeUndefined();
         });
         it('should apply correct styles when selectedNode is specified', function () {
             var _a = setUp({ selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
             var edgeReducer = getEdgeReducer();
-            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
-            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 }));
-            expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { type: 'dashed', color: useDataModelGraphAppearance_1.RELATED_DASHED_EDGE_COLOR }));
+            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
+            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 }));
+            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 }));
+            expect(result.error).toBeUndefined();
+        });
+        it('should apply correct styles when selectedEdges is specified', function () {
+            var _a = setUp({ selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
+            var edgeReducer = getEdgeReducer();
+            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
+            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 }));
+            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 }));
+            expect(result.error).toBeUndefined();
+        });
+        it('should remove edge label prop when relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
+            var _a = setUp({ relationEdgesLabelsAmountThreshold: 1 }), graph = _a.graph, result = _a.result;
+            var edgeReducer = getEdgeReducer();
+            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 }));
+            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 }));
+            expect(edgeReducer('hcp->prescriptions', graph.getEdgeAttributes('hcp->prescriptions'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->prescriptions'))), { type: 'dashed', color: useDataModelGraphAppearance_1.DASHED_EDGE_COLOR }));
+            expect(result.error).toBeUndefined();
+        });
+        it('should keep edge label prop for edge related with selected node even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
+            var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedNode: 'hcp' }), graph = _a.graph, result = _a.result;
+            var edgeReducer = getEdgeReducer();
+            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.RELATED_EDGE_COLOR }));
+            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 }));
+            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 }));
             expect(result.error).toBeUndefined();
         });
-        it('should apply correct styles when selectedEdge is specified', function () {
-            var _a = setUp({ selectedEdge: 'hcp->hca' }), graph = _a.graph, result = _a.result;
+        it('should keep edge label prop for selected edge even if relations edges amount bigger than relationEdgesLabelsAmountThreshold', function () {
+            var _a = setUp({ relationEdgesLabelsAmountThreshold: 1, selectedEdges: ['hcp->hca'] }), graph = _a.graph, result = _a.result;
             var edgeReducer = getEdgeReducer();
-            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, defaultEdgeStyle), { label: '1', color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
-            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 }));
-            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 }));
+            expect(edgeReducer('hcp->hca', graph.getEdgeAttributes('hcp->hca'))).toEqual(__assign(__assign({}, getDefaultEdgeAttributes(graph.getEdgeAttributes('hcp->hca'))), { color: useDataModelGraphAppearance_1.SELECTED_EDGE_COLOR, selected: true }));
+            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 }));
+            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 }));
             expect(result.error).toBeUndefined();
         });
     });

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

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEdgeLabelsRenderer = exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = exports.EDGE_DOTS_CANVAS_NAME = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME = void 0;
 var react_1 = require("react");
 var core_1 = require("@react-sigma/core");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
 var graphDataTypes_1 = require("../../types/graphDataTypes");
 var label_1 = require("../../rendering/canvas/label");
@@ -37,7 +38,7 @@ var useEdgeLabelsRenderer = function (_a) {
         var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
         var targetDisplayData = sigma.getNodeDisplayData(targetId);
         var relationEdge = [sourceDisplayData.nodeType, targetDisplayData.nodeType].every(function (type) { return type === graphDataTypes_1.DataModelGraphNodeType.entityType; });
-        return relationEdge && !edgeDisplayData.hidden;
+        return relationEdge && !edgeDisplayData.hidden && edgeDisplayData.label;
     }, [sigma]);
     var drawEdgeLabel = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
         delete edgeLabelsPathsMap.current[edgeId];
@@ -68,11 +69,11 @@ var useEdgeLabelsRenderer = function (_a) {
             var isHovered = hoveredEdgeLabel === edgeId;
             var isSelected = edgeDisplayData.selected;
             var dotScale = isHovered || isSelected ? 1.4 : 1;
-            var circleRadius = sigma.scaleSize(2.5 * dotScale);
+            var circleRadius = sigma.scaleSize(2 * dotScale);
             var _a = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
             context.beginPath();
             context.arc(x, y, circleRadius, 0, Math.PI * 2);
-            context.fillStyle = edgeDisplayData.color;
+            context.fillStyle = (0, mdm_sdk_1.rgbaToRgb)(edgeDisplayData.color);
             context.fill();
         }
     }, [sigma, hoveredEdgeLabel, shouldRenderLabels]);

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

@@ -107,8 +107,8 @@ describe('useEdgeLabelsRenderer tests', function () {
             'arc',
             'fill'
         ]);
-        expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2.5, 0, 2 * Math.PI);
-        expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2.5, 0, 2 * Math.PI);
+        expect(canvasContext.arc).toHaveBeenCalledWith(150, 100, 2, 0, 2 * Math.PI);
+        expect(canvasContext.arc).toHaveBeenCalledWith(250, 100, 2, 0, 2 * Math.PI);
     });
     it('should correctly draw a hover state of edge', function () {
         setUp();
@@ -129,7 +129,7 @@ describe('useEdgeLabelsRenderer tests', function () {
         });
         expect(getCanvasContextEventTypes(hoversCanvasContext)).toEqual(expect.arrayContaining(['beginPath', 'arc', 'fill']));
         expect(hoversCanvasContext.arc).toBeCalledTimes(1);
-        expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 3.5, 0, 2 * Math.PI);
+        expect(hoversCanvasContext.arc).toHaveBeenCalledWith(150, 100, 2.8, 0, 2 * Math.PI);
         expect(label_1.drawLabel).toBeCalledTimes(1);
         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)' });
     });

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

@@ -11,6 +11,6 @@ export { NodeBorderProgram } from './rendering/webgl/node.border';
 export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
 export { WebGLImageLoader } from './rendering/webgl/image';
 export { getCanvasMousePos } from './rendering/canvas/utils';
-export type { GraphNodeAttributes, GraphEdgeAttributes } from './types/graphDataTypes';
+export type { GraphNodeAttributes, GraphEdgeAttributes, DataModelGraphNodeAttributes, DataModelGraphEdgeAttributes } from './types/graphDataTypes';
 export { DataModelGraphNodeType } from './types/graphDataTypes';
 export type { Canvas } from './types/sigmaCustomRenderersTypes';

package/cjs/features/graph/rendering/canvas/label.js

@@ -9,6 +9,7 @@ var drawLabel = function (context, data, settings, _a) {
         return;
     var size = settings.labelSize, font = settings.labelFont, weight = settings.labelWeight, marginLeft = data.selected ? 6 : 2, lineHeight = size * 1.2;
     var PERMANENT_MARGIN_LEFT = 9;
+    context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
     var labelBackgroundPath = (0, labelBackground_1.drawLabelBackground)(context, data, settings, {
         backgroundColor: data.selected ? '#FFF' : backgroundColor,
         marginLeft: marginLeft,
@@ -18,7 +19,6 @@ var drawLabel = function (context, data, settings, _a) {
     context.fillStyle = ((_b = settings.labelColor) === null || _b === void 0 ? void 0 : _b.attribute)
         ? data[settings.labelColor.attribute] || settings.labelColor.color || '#000'
         : settings.labelColor.color;
-    context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
     var y = data.secondaryLabel ? data.y - size / (3 * 1.25) : data.y + size / 3;
     context.fillText(data.label, data.x + data.size + PERMANENT_MARGIN_LEFT + marginLeft, y);
     if (data.secondaryLabel) {

package/cjs/features/graph/types/graphDataTypes.d.ts

@@ -1,6 +1,7 @@
 import Graph from 'graphology';
 import { NodeDisplayData, EdgeDisplayData } from 'sigma/types';
 import { Settings } from 'sigma/settings';
+import { TRelationType } from '@reltio/mdm-sdk';
 export type GraphEdgeAttributes = EdgeDisplayData & {
     loop: boolean;
     arrowSizeRatio?: number;
@@ -21,7 +22,7 @@ export declare enum DataModelGraphNodeType {
     interactionType = "interactionType"
 }
 export type DataModelGraphEdgeAttributes = GraphEdgeAttributes & {
-    edgeType: string;
+    relationTypes: TRelationType[];
 };
 export type DataModelGraphNodeAttributes = GraphNodeAttributes & {
     nodeType: DataModelGraphNodeType;

package/cjs/helpers/basicTable.d.ts

@@ -1,4 +1,4 @@
-import { DataTypes } from '@reltio/mdm-sdk';
+import { FacetFilter } from '@reltio/mdm-sdk';
 import { ColumnData, ColumnFilter } from '../types/basicTable';
 export declare const defaultGetRowCellHeight: ({ columnData, cell }: {
     columnData: any;
@@ -9,10 +9,5 @@ export declare const defaultRenderRowCell: ({ cell, CellValueRenderer, ...otherP
     cell: any;
     CellValueRenderer: any;
 }) => any;
-export declare const columnFilterToMdmFilter: (columnData: Pick<ColumnData, 'id' | 'dataTypeDefinition'>, columnFilter?: ColumnFilter) => {
-    fieldName: string;
-    filter: string;
-    values: import("@reltio/mdm-sdk").SearchValue[];
-    type: DataTypes;
-};
+export declare const columnFilterToMdmFilter: (columnData: Pick<ColumnData, 'id' | 'dataTypeDefinition'>, columnFilter?: ColumnFilter) => FacetFilter;
 export declare const buildColumnsFilter: (columnsData: ColumnData[], filters?: Record<string, ColumnFilter>) => string;