@reltio/components 1.4.1852 → 1.4.1854

package/esm/components/ReactSelect/withMuiSkin.js

@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import skinComponents from './commonComponents';
 import useStyles from './styles';
 import { mergeClasses } from '../../core/utils';
@@ -38,54 +37,5 @@ export default function withMuiSkin(SelectComponent) {
         components: {},
         classes: {}
     };
-    WrappedSelectComponent.propTypes = {
-        /* You could redefine any of these components */
-        components: PropTypes.shape({
-            ClearIndicator: PropTypes.func,
-            Control: PropTypes.func,
-            DropdownIndicator: PropTypes.func,
-            DownChevron: PropTypes.func,
-            CrossIcon: PropTypes.func,
-            Group: PropTypes.func,
-            GroupHeading: PropTypes.func,
-            IndicatorsContainer: PropTypes.func,
-            IndicatorSeparator: PropTypes.func,
-            Input: PropTypes.func,
-            LoadingIndicator: PropTypes.func,
-            Menu: PropTypes.func,
-            MenuList: PropTypes.func,
-            MenuPortal: PropTypes.func,
-            LoadingMessage: PropTypes.func,
-            NoOptionsMessage: PropTypes.func,
-            MultiValue: PropTypes.func,
-            MultiValueContainer: PropTypes.func,
-            MultiValueLabel: PropTypes.func,
-            MultiValueRemove: PropTypes.func,
-            Option: PropTypes.func,
-            Placeholder: PropTypes.func,
-            SelectContainer: PropTypes.func,
-            SingleValue: PropTypes.func,
-            ValueContainer: PropTypes.func
-        }),
-        /* Classes are passed to mui skin components. Provided classes will be merged with existing ones. */
-        classes: PropTypes.shape({
-            control: PropTypes.string,
-            valueContainer: PropTypes.string,
-            multiValue: PropTypes.string,
-            noOptionsMessage: PropTypes.string,
-            singleValue: PropTypes.string,
-            placeholder: PropTypes.string,
-            menu: PropTypes.string,
-            clearIndicator: PropTypes.string,
-            dropdownIndicator: PropTypes.string,
-            option: PropTypes.string,
-            'option--selected': PropTypes.string
-        }),
-        /* Props from https://material-ui.com/api/text-field/ */
-        TextFieldProps: PropTypes.object,
-        error: PropTypes.bool,
-        /* Plus all necessary props for wrapped react-select component. See docs on https://react-select.com */
-        innerRef: PropTypes.object
-    };
     return WrappedSelectComponent;
 }

package/esm/components/ReactSortableTree/node-renderer-default.d.ts

@@ -43,9 +43,9 @@ declare namespace NodeRendererDefault {
     }
     namespace propTypes {
         export let node: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-        let title_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let title_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { title_1 as title };
-        let subtitle_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let subtitle_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { subtitle_1 as subtitle };
         export let path: PropTypes.Validator<NonNullable<string | number>[]>;
         export let treeIndex: PropTypes.Validator<number>;

package/esm/components/ReadableSearchQuery/ReadableSearchQuery.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { ReadableQueryPrimitive } from '@reltio/mdm-sdk';
-type Props = {
+declare const ReadableSearchQuery: React.ForwardRefExoticComponent<{
     readableQuery?: ReadableQueryPrimitive[];
-    className?: string;
-};
-declare const ReadableSearchQuery: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLElement>>;
 export default ReadableSearchQuery;

package/esm/components/SearchInput/SearchInput.d.ts

@@ -3,7 +3,7 @@ import { InputProps } from '@mui/material/Input';
 export type SearchInputProps = InputProps & {
     value?: string;
     autofocus?: boolean;
-    onSearch: (value?: string) => void;
+    onSearch?: (value?: string) => void;
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
     placeholder?: string;

package/esm/components/SelectionPopup/SelectionPopup.d.ts

@@ -7,7 +7,7 @@ type Props = {
     children: React.ReactNode;
     PaperProps?: Record<string, unknown>;
     searchInputOnKeyDown: (event: React.KeyboardEvent) => void;
-    onSearch: (value?: string) => void;
+    onSearch?: (value?: string) => void;
     className?: string;
     hideTitle?: boolean;
     hideSearchInput?: boolean;

package/esm/constants/index.d.ts

@@ -1,4 +1,4 @@
-export { SortingType, ColumnFilterType, ColumnsDataType, QueryBuilderAttributeType, QueryBuilderAttributeDataType } from './prop-types';
+export { SortingType, QueryBuilderAttributeType } from './prop-types';
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from './classnames';
 export { ALWAYS_VISIBLE_TYPE_URIS } from './attributes';
 export { MAP_DRAWING_MODES, DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from './map';

package/esm/constants/index.js

@@ -1,4 +1,4 @@
-export { SortingType, ColumnFilterType, ColumnsDataType, QueryBuilderAttributeType, QueryBuilderAttributeDataType } from './prop-types';
+export { SortingType, QueryBuilderAttributeType } from './prop-types';
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from './classnames';
 export { ALWAYS_VISIBLE_TYPE_URIS } from './attributes';
 export { MAP_DRAWING_MODES, DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from './map';

package/esm/constants/prop-types.d.ts

@@ -1,88 +1,7 @@
-export const SelectValueType: PropTypes.Requireable<NonNullable<string | number | object>>;
-export const DropDownEntryType: PropTypes.Requireable<PropTypes.InferProps<{
-    value: PropTypes.Validator<NonNullable<NonNullable<string | number | object>>>;
-    label: PropTypes.Requireable<string>;
-}>>;
-export const DropDownGroupEntryType: PropTypes.Requireable<PropTypes.InferProps<{
-    label: PropTypes.Validator<string>;
-    values: PropTypes.Validator<object[]>;
-}>>;
-export const ColumnDataType: PropTypes.Requireable<PropTypes.InferProps<{
-    id: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    dataTypeDefinition: PropTypes.Requireable<object>;
-    resizable: PropTypes.Requireable<boolean>;
-    sortable: PropTypes.Requireable<boolean>;
-    filterable: PropTypes.Requireable<boolean>;
-    headCellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    rowCellValueRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    nestedPath: PropTypes.Requireable<string[]>;
-}>>;
 export const SortingType: PropTypes.Requireable<PropTypes.InferProps<{
     field: PropTypes.Requireable<string>;
     order: PropTypes.Requireable<string>;
 }>>;
-export const ColumnFilterType: PropTypes.Requireable<PropTypes.InferProps<{
-    value: PropTypes.Requireable<NonNullable<NonNullable<NonNullable<string | number | boolean | PropTypes.InferProps<{
-        value: PropTypes.Requireable<string>;
-        lookupCode: PropTypes.Requireable<string>;
-    }>> | NonNullable<string | number | boolean | PropTypes.InferProps<{
-        value: PropTypes.Requireable<string>;
-        lookupCode: PropTypes.Requireable<string>;
-    }>>[]> | NonNullable<NonNullable<string | number | boolean | PropTypes.InferProps<{
-        value: PropTypes.Requireable<string>;
-        lookupCode: PropTypes.Requireable<string>;
-    }>> | NonNullable<string | number | boolean | PropTypes.InferProps<{
-        value: PropTypes.Requireable<string>;
-        lookupCode: PropTypes.Requireable<string>;
-    }>>[]>[]>>;
-    filter: PropTypes.Requireable<string>;
-}>>;
-export const ColumnsDataType: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
-    id: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    dataTypeDefinition: PropTypes.Requireable<object>;
-}>[] | PropTypes.InferProps<{
-    id: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    columns: PropTypes.Requireable<PropTypes.InferProps<{
-        id: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        dataTypeDefinition: PropTypes.Requireable<object>;
-    }>[]>;
-}>[]>>;
-export const GroupedColumnsDataType: PropTypes.Requireable<PropTypes.InferProps<{
-    id: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<string>;
-    columns: PropTypes.Requireable<PropTypes.InferProps<{
-        id: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        dataTypeDefinition: PropTypes.Requireable<object>;
-    }>[]>;
-}>[]>;
-export const QueryBuilderAttributeDataType: PropTypes.Requireable<PropTypes.InferProps<{
-    title: PropTypes.Requireable<string>;
-    pathToTitle: PropTypes.Requireable<string[]>;
-    fieldName: PropTypes.Requireable<string>;
-    entityTypeUri: PropTypes.Requireable<string>;
-    attrType: PropTypes.Requireable<PropTypes.InferProps<{
-        label: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        description: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        hidden: PropTypes.Requireable<boolean>;
-        faceted: PropTypes.Requireable<boolean>;
-        searchable: PropTypes.Requireable<boolean>;
-        uri: PropTypes.Requireable<string>;
-        access: PropTypes.Requireable<string[]>;
-        cardinality: PropTypes.Requireable<PropTypes.InferProps<{
-            minValue: PropTypes.Requireable<number>;
-            maxValue: PropTypes.Requireable<number>;
-        }>>;
-    }>>;
-    uri: PropTypes.Requireable<string>;
-    groupName: PropTypes.Requireable<string>;
-}>>;
 export const QueryBuilderAttributeType: PropTypes.Requireable<PropTypes.InferProps<{
     id: PropTypes.Requireable<NonNullable<string | number>>;
     values: PropTypes.Requireable<any[]>;

package/esm/constants/prop-types.js

@@ -1,50 +1,29 @@
 import PropTypes from 'prop-types';
-import { AttributeTypeType, FilterValueType, SortOrderType } from '@reltio/mdm-sdk';
-var SelectValueType = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]);
-var DropDownEntryType = PropTypes.shape({
-    value: SelectValueType.isRequired,
-    label: PropTypes.string
-});
-var DropDownGroupEntryType = PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    values: PropTypes.arrayOf(PropTypes.object).isRequired
-});
-var ColumnDataType = PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string,
-    dataTypeDefinition: PropTypes.object,
-    resizable: PropTypes.bool,
-    sortable: PropTypes.bool,
-    filterable: PropTypes.bool,
-    headCellRenderer: PropTypes.func,
-    rowCellValueRenderer: PropTypes.func,
-    nestedPath: PropTypes.arrayOf(PropTypes.string)
-});
 var SortingType = PropTypes.shape({
     field: PropTypes.string,
-    order: SortOrderType
+    order: PropTypes.oneOf(['asc', 'desc'])
 });
-var ColumnFilterType = PropTypes.shape({
-    value: PropTypes.oneOfType([FilterValueType, PropTypes.arrayOf(FilterValueType)]),
-    filter: PropTypes.string
-});
-var PlainColumnsDataType = PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string,
-    dataTypeDefinition: PropTypes.object
-}));
-var GroupedColumnsDataType = PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
+var AttrType = PropTypes.shape({
     label: PropTypes.string,
-    columns: PlainColumnsDataType
-}));
-var ColumnsDataType = PropTypes.oneOfType([PlainColumnsDataType, GroupedColumnsDataType]);
+    name: PropTypes.string,
+    description: PropTypes.string,
+    type: PropTypes.string,
+    hidden: PropTypes.bool,
+    faceted: PropTypes.bool,
+    searchable: PropTypes.bool,
+    uri: PropTypes.string,
+    access: PropTypes.arrayOf(PropTypes.string),
+    cardinality: PropTypes.shape({
+        minValue: PropTypes.number,
+        maxValue: PropTypes.number
+    })
+});
 var QueryBuilderAttributeDataType = PropTypes.shape({
     title: PropTypes.string,
     pathToTitle: PropTypes.arrayOf(PropTypes.string),
     fieldName: PropTypes.string,
     entityTypeUri: PropTypes.string,
-    attrType: AttributeTypeType,
+    attrType: AttrType,
     uri: PropTypes.string,
     groupName: PropTypes.string
 });
@@ -55,4 +34,4 @@ var QueryBuilderAttributeType = PropTypes.shape({
     filter: PropTypes.string,
     operator: PropTypes.string
 });
-export { SelectValueType, DropDownEntryType, DropDownGroupEntryType, ColumnDataType, SortingType, ColumnFilterType, ColumnsDataType, GroupedColumnsDataType, QueryBuilderAttributeDataType, QueryBuilderAttributeType };
+export { SortingType, QueryBuilderAttributeType };

package/esm/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/esm/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/esm/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/esm/features/graph/DataModelGraph/DataModelGraph.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { noop } from '../../../core';
 import { SigmaGraphContainer } from '../SigmaGraphContainer/SigmaGraphContainer';
-import { DataModelCircleLayuot } from './components/DataModelCircleLayout/DataModelCircleLayuot';
+import { DataModelCircleLayout } from './components/DataModelCircleLayout/DataModelCircleLayout';
 import { ZoomSlider } from '../ZoomSlider';
 import { useStyles } from './styles';
 var settings = {
@@ -8,12 +9,12 @@ var settings = {
     zIndex: true
 };
 export var DataModelGraph = function (_a) {
-    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
+    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;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.wrapper },
         React.createElement("div", { className: styles.graph }, graph && (React.createElement(SigmaGraphContainer, { initialSettings: settings },
             React.createElement(React.Fragment, null,
-                React.createElement(DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
+                React.createElement(DataModelCircleLayout, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: hideInteractionTypes }),
                 React.createElement("div", { className: styles.rightBottomControls },
                     React.createElement(ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
         children));

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

@@ -3,7 +3,6 @@ import Graph from 'graphology';
 import { render, screen } from '@testing-library/react';
 import { DataModelGraph } from '../DataModelGraph';
 import { useDataModelGraphAppearance } from './hooks/useDataModelGraphAppearance';
-import { useFakeCenterNode } from './hooks/useFakeCenterNode';
 import { useCircleLayout } from '../hooks/useCircleLayout';
 jest.mock('@react-sigma/core', function () { return ({
     SigmaContainer: function (_a) {
@@ -24,9 +23,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.createElement("div", null, "ZoomSlider"); }
 }); });
@@ -34,10 +30,10 @@ describe('DataModelGraph tests', function () {
     var graph = new Graph();
     var selectedNode = 'node1';
     var onNodeClick = jest.fn();
-    var selectedEdge = 'edge1';
+    var selectedEdges = ['edge1'];
     var onEdgeLabelClick = jest.fn();
     var setUp = function () {
-        render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
+        render(React.createElement(DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdges: selectedEdges, onEdgeLabelClick: onEdgeLabelClick, hideInteractionTypes: false }));
     };
     afterEach(function () {
         jest.clearAllMocks();
@@ -47,11 +43,10 @@ describe('DataModelGraph tests', function () {
         expect(useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
             graph: graph,
             selectedNode: selectedNode,
-            selectedEdge: selectedEdge,
+            selectedEdges: selectedEdges,
             onNodeClick: onNodeClick,
             onEdgeLabelClick: onEdgeLabelClick
         }));
-        expect(useFakeCenterNode).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, timeout: 3100 }));
         expect(useCircleLayout).toHaveBeenCalledWith(expect.objectContaining({ graph: graph, animationDuration: 3000 }));
         expect(screen.getByText('ZoomSlider')).toBeInTheDocument();
     });

package/esm/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/esm/features/graph/DataModelGraph/components/DataModelCircleLayout/{DataModelCircleLayuot.js → DataModelCircleLayout.js}

@@ -1,15 +1,13 @@
 import { useCircleLayout } from '../../../hooks/useCircleLayout';
-import { useFakeCenterNode } from '../../hooks/useFakeCenterNode';
 import { useDataModelGraphAppearance } from '../../hooks/useDataModelGraphAppearance';
 export var LAYOUT_ANIMATION_DURATION = 3000;
-export var DataModelCircleLayuot = function (_a) {
-    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
-    useFakeCenterNode({ graph: graph, timeout: LAYOUT_ANIMATION_DURATION + 100 });
+export var DataModelCircleLayout = function (_a) {
+    var graph = _a.graph, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdges = _a.selectedEdges, onEdgeLabelClick = _a.onEdgeLabelClick, hideInteractionTypes = _a.hideInteractionTypes;
     useCircleLayout({ graph: graph, animationDuration: LAYOUT_ANIMATION_DURATION });
     useDataModelGraphAppearance({
         graph: graph,
         selectedNode: selectedNode,
-        selectedEdge: selectedEdge,
+        selectedEdges: selectedEdges,
         onNodeClick: onNodeClick,
         onEdgeLabelClick: onEdgeLabelClick,
         hideInteractionTypes: hideInteractionTypes

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

@@ -33,10 +33,12 @@ export 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/esm/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/esm/features/graph/DataModelGraph/hooks/useDataModelGraphAppearance.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSigmaContext } from '@react-sigma/core';
 import { useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core';
 import { svg2Url } from '@reltio/mdm-sdk';
@@ -33,25 +33,35 @@ var DEFAULT_NODE_STYLE = {
     color: 'rgba(55, 71, 79, 1)'
 };
 var DEFAULT_EDGE_STYLE = {
-    size: 2
+    size: 1
 };
-export var EDGE_COLOR = 'rgba(130, 130, 130, 1)';
-export var DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
+export var EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
+export var DASHED_EDGE_COLOR = 'rgba(0, 0, 0, 0.2)';
 export var INACTIVE_EDGE_COLOR = 'rgba(224, 224, 224, 1)';
 export var SELECTED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
 export var RELATED_EDGE_COLOR = 'rgba(130, 130, 130, 1)';
 export var RELATED_DASHED_EDGE_COLOR = 'rgba(79, 79, 79, 1)';
 export var INACTIVE_LABEL_COLOR = 'rgba(0, 0, 0, 0.38)';
+var RELATION_EDGES_LABELS_AMOUNT_THRESHOLD = 29;
 export 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 = useSigma();
     var container = useSigmaContext().container;
-    var _b = useState(null), hoveredNode = _b[0], setHoveredNode = _b[1];
+    var _c = useState(null), hoveredNode = _c[0], setHoveredNode = _c[1];
     var registerEvents = useRegisterEvents();
     var setSettings = useSetSettings();
     useLoopRenderer(graph);
     var hoveredEdge = useEdgeLabelsRenderer({ graph: graph, onEdgeLabelClick: onEdgeLabelClick });
     useSelectedNodeRenderer(graph);
+    var relationsEdgesAmount = 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]);
     useEffect(function () {
         registerEvents({
             enterNode: function (_a) {
@@ -85,7 +95,8 @@ export 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 === DataModelGraphNodeType.interactionType) {
@@ -112,9 +123,9 @@ export 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 ? RELATED_DASHED_EDGE_COLOR : RELATED_EDGE_COLOR;
@@ -122,17 +133,36 @@ export var useDataModelGraphAppearance = function (_a) {
                     else {
                         newData.color = INACTIVE_EDGE_COLOR;
                         newData.labelColor = INACTIVE_LABEL_COLOR;
+                        if (showOnlyRelatedEdgesLabels) {
+                            delete newData.label;
+                        }
                     }
                 }
-                else if (selectedEdge) {
-                    newData.color = edge === selectedEdge ? SELECTED_EDGE_COLOR : INACTIVE_EDGE_COLOR;
-                    newData.labelColor = edge === selectedEdge ? undefined : INACTIVE_LABEL_COLOR;
+                else if (selectedEdges === null || selectedEdges === void 0 ? void 0 : selectedEdges.length) {
+                    newData.color = isSelected ? SELECTED_EDGE_COLOR : INACTIVE_EDGE_COLOR;
+                    newData.labelColor = isSelected ? undefined : INACTIVE_LABEL_COLOR;
+                    if (showOnlyRelatedEdgesLabels && !isSelected) {
+                        delete newData.label;
+                    }
                 }
                 else {
                     newData.color = isDashedLine ? DASHED_EDGE_COLOR : 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
+    ]);
 };