@reltio/components 1.4.1844 → 1.4.1845

package/cjs/EmptyState/EmptyState.d.ts

@@ -9,6 +9,7 @@ export declare const EMPTY_STATE_ICONS: {
     SELECT_ATTRIBUTES: React.FC<React.SVGProps<SVGSVGElement>>;
     NO_DATA: React.FC<React.SVGProps<SVGSVGElement>>;
     ERROR: React.FC<React.SVGProps<SVGSVGElement>>;
+    LOADING: React.FC<React.SVGProps<SVGSVGElement>>;
 };
 type Props = {
     variant?: EMPTY_STATE_VARIANTS;

package/cjs/EmptyState/EmptyState.js

@@ -14,6 +14,7 @@ var SelectAttributes_1 = __importDefault(require("../icons/SelectAttributes"));
 var NoData_1 = __importDefault(require("../icons/NoData"));
 var Error_1 = __importDefault(require("../icons/Error"));
 var styles_1 = require("./styles");
+var EmptyLoading_1 = __importDefault(require("../icons/EmptyLoading"));
 var EMPTY_STATE_VARIANTS;
 (function (EMPTY_STATE_VARIANTS) {
     EMPTY_STATE_VARIANTS["full"] = "full";
@@ -24,7 +25,8 @@ exports.EMPTY_STATE_ICONS = {
     SEARCH_RESULTS: EmptySearchResults_1.default,
     SELECT_ATTRIBUTES: SelectAttributes_1.default,
     NO_DATA: NoData_1.default,
-    ERROR: Error_1.default
+    ERROR: Error_1.default,
+    LOADING: EmptyLoading_1.default
 };
 var EmptyState = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? EMPTY_STATE_VARIANTS.full : _b, _c = _a.LogoRenderer, LogoRenderer = _c === void 0 ? exports.EMPTY_STATE_ICONS.SEARCH_RESULTS : _c, text = _a.text, secondaryText = _a.secondaryText, buttonTitle = _a.buttonTitle, _d = _a.onClick, onClick = _d === void 0 ? ramda_1.identity : _d, access = _a.access;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Graph from 'graphology';
+type Props = {
+    graph?: Graph;
+    children?: React.ReactNode;
+    selectedNode?: string;
+    onNodeClick: (nodeId: string) => void;
+    selectedEdge: string;
+    onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+};
+export declare const DataModelGraph: ({ graph, children, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => JSX.Element;
+export default DataModelGraph;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataModelGraph = void 0;
+var react_1 = __importDefault(require("react"));
+var SigmaGraphContainer_1 = require("../SigmaGraphContainer/SigmaGraphContainer");
+var DataModelCircleLayuot_1 = require("./components/DataModelCircleLayout/DataModelCircleLayuot");
+var ZoomSlider_1 = require("../ZoomSlider");
+var styles_1 = require("./styles");
+var settings = {
+    labelRenderedSizeThreshold: 11,
+    zIndex: true
+};
+var DataModelGraph = function (_a) {
+    var graph = _a.graph, children = _a.children, selectedNode = _a.selectedNode, onNodeClick = _a.onNodeClick, selectedEdge = _a.selectedEdge, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement("div", { className: styles.wrapper },
+        react_1.default.createElement("div", { className: styles.graph }, graph && (react_1.default.createElement(SigmaGraphContainer_1.SigmaGraphContainer, { initialSettings: settings },
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(DataModelCircleLayuot_1.DataModelCircleLayuot, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }),
+                react_1.default.createElement("div", { className: styles.rightBottomControls },
+                    react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: styles.zoomSlider, min: 30, max: 300 })))))),
+        children));
+};
+exports.DataModelGraph = DataModelGraph;
+exports.default = exports.DataModelGraph;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+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) {
+        var children = _a.children;
+        return react_1.default.createElement("div", null, children);
+    },
+    useSigma: jest.fn().mockReturnValue({
+        refresh: jest.fn()
+    }),
+    useLoadGraph: jest.fn().mockReturnValue(jest.fn())
+}); });
+jest.mock('../hooks/useCircleLayout', function () { return ({
+    useCircleLayout: jest.fn()
+}); });
+jest.mock('../hooks/useSigmaCustomRenderers', function () { return ({
+    useSigmaCustomRenderers: jest.fn().mockReturnValue({ addRenderers: jest.fn() })
+}); });
+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"); }
+}); });
+describe('DataModelGraph tests', function () {
+    var graph = new graphology_1.default();
+    var selectedNode = 'node1';
+    var onNodeClick = jest.fn();
+    var selectedEdge = 'edge1';
+    var onEdgeLabelClick = jest.fn();
+    var setUp = function () {
+        (0, react_2.render)(react_1.default.createElement(DataModelGraph_1.DataModelGraph, { graph: graph, selectedNode: selectedNode, onNodeClick: onNodeClick, selectedEdge: selectedEdge, onEdgeLabelClick: onEdgeLabelClick }));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('renders call hooks with correct props', function () {
+        setUp();
+        expect(useDataModelGraphAppearance_1.useDataModelGraphAppearance).toHaveBeenCalledWith(expect.objectContaining({
+            graph: graph,
+            selectedNode: selectedNode,
+            selectedEdge: selectedEdge,
+            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

@@ -0,0 +1,11 @@
+import Graph from 'graphology';
+type Props = {
+    graph: Graph;
+    selectedNode?: string;
+    onNodeClick: (nodeId: string) => void;
+    selectedEdge: string;
+    onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+};
+export declare const LAYOUT_ANIMATION_DURATION = 3000;
+export declare const DataModelCircleLayuot: ({ graph, selectedNode, onNodeClick, selectedEdge, onEdgeLabelClick }: Props) => any;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataModelCircleLayuot = 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;
+    (0, useFakeCenterNode_1.useFakeCenterNode)({ graph: graph, timeout: exports.LAYOUT_ANIMATION_DURATION + 100 });
+    (0, useCircleLayout_1.useCircleLayout)({ graph: graph, animationDuration: exports.LAYOUT_ANIMATION_DURATION });
+    (0, useDataModelGraphAppearance_1.useDataModelGraphAppearance)({
+        graph: graph,
+        selectedNode: selectedNode,
+        selectedEdge: selectedEdge,
+        onNodeClick: onNodeClick,
+        onEdgeLabelClick: onEdgeLabelClick
+    });
+    return null;
+};
+exports.DataModelCircleLayuot = DataModelCircleLayuot;

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

@@ -0,0 +1,9 @@
+import Sigma from 'sigma/sigma';
+export declare const getBezierCenter: (x1: number, y1: number, x2: number, y2: number, cx1: number, cy1: number, cx2: number, cy2: number) => {
+    x: number;
+    y: number;
+};
+export declare const getEdgeCenter: (edgeId: string, sourceId: string, targetId: string, sigma: Sigma) => {
+    x: any;
+    y: any;
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEdgeCenter = exports.getBezierCenter = void 0;
+var selfRelationLoop_1 = require("../../rendering/canvas/selfRelationLoop");
+var getBezierCenter = function (x1, y1, x2, y2, cx1, cy1, cx2, cy2) {
+    var t = 0.5;
+    var Bt = (1 - t) * (1 - t) * (1 - t);
+    var Ct = 3 * ((1 - t) * (1 - t)) * t;
+    var Dt = 3 * (1 - t) * (t * t);
+    var Et = t * t * t;
+    var x = Bt * x1 + Ct * cx1 + Dt * cx2 + Et * x2;
+    var y = Bt * y1 + Ct * cy1 + Dt * cy2 + Et * y2;
+    return { x: x, y: y };
+};
+exports.getBezierCenter = getBezierCenter;
+var getEdgeCenter = function (edgeId, sourceId, targetId, sigma) {
+    var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+    var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
+    var targetDisplayData = sigma.getNodeDisplayData(targetId);
+    var sourceCenter = sigma.framedGraphToViewport({
+        x: sourceDisplayData.x,
+        y: sourceDisplayData.y
+    });
+    var targetCenter = sigma.framedGraphToViewport({
+        x: targetDisplayData.x,
+        y: targetDisplayData.y
+    });
+    var getLoopCenter = function () {
+        var _a = (0, selfRelationLoop_1.getSelfLoopControlPoints)(sourceCenter.x, sourceCenter.y, sigma.scaleSize(sourceDisplayData.size) * selfRelationLoop_1.LOOP_SCALE), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
+        return (0, exports.getBezierCenter)(sourceCenter.x, sourceCenter.y, sourceCenter.x, sourceCenter.y, x1, y1, x2, y2);
+    };
+    var loopCenter = edgeDisplayData.loop && getLoopCenter();
+    var getEdgeCenter = function (coord) { return sourceCenter[coord] + (targetCenter[coord] - sourceCenter[coord]) / 2; };
+    var x = edgeDisplayData.loop ? loopCenter.x : getEdgeCenter('x');
+    var y = edgeDisplayData.loop ? loopCenter.y : getEdgeCenter('y');
+    return { x: x, y: y };
+};
+exports.getEdgeCenter = getEdgeCenter;

package/cjs/features/graph/DataModelGraph/helpers/edgeLabelHelpers.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var edgeLabelHelpers_1 = require("./edgeLabelHelpers");
+describe('getEdgeCenter tests', function () {
+    var edgeId = 'edge1';
+    var sourceId = 'source1';
+    var targetId = 'target1';
+    var sigma = {
+        getEdgeDisplayData: jest.fn(),
+        getNodeDisplayData: jest.fn(),
+        framedGraphToViewport: jest.fn(),
+        scaleSize: jest.fn(function (x) { return x; })
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should calculate the regular edge center', function () {
+        var edgeDisplayData = {
+            loop: false
+        };
+        var sourceDisplayData = {
+            x: 1,
+            y: 2,
+            size: 10
+        };
+        var targetDisplayData = {
+            x: 3,
+            y: 4
+        };
+        var expectedX = 2;
+        var expectedY = 3;
+        sigma.getEdgeDisplayData.mockReturnValue(edgeDisplayData);
+        sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
+        sigma.getNodeDisplayData.mockReturnValueOnce(targetDisplayData);
+        sigma.framedGraphToViewport.mockImplementation(function (_a) {
+            var x = _a.x, y = _a.y;
+            return ({ x: x, y: y });
+        });
+        var result = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma);
+        expect(result.x).toBe(expectedX);
+        expect(result.y).toBe(expectedY);
+        expect(sigma.getEdgeDisplayData).toHaveBeenCalledWith(edgeId);
+        expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(sourceId);
+        expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(targetId);
+        expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 1, y: 2 });
+        expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 3, y: 4 });
+    });
+    it('should calculate the edge center with loop', function () {
+        var edgeDisplayData = {
+            loop: true
+        };
+        var sourceDisplayData = {
+            x: 100,
+            y: 100,
+            size: 10
+        };
+        var expectedX = 84.25;
+        var expectedY = 115.75;
+        sigma.getEdgeDisplayData.mockReturnValue(edgeDisplayData);
+        sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
+        sigma.getNodeDisplayData.mockReturnValueOnce(sourceDisplayData);
+        sigma.framedGraphToViewport.mockImplementation(function (_a) {
+            var x = _a.x, y = _a.y;
+            return ({ x: x, y: y });
+        });
+        var result = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, sourceId, sigma);
+        expect(result.x).toBe(expectedX);
+        expect(result.y).toBe(expectedY);
+        expect(sigma.getEdgeDisplayData).toHaveBeenCalledWith(edgeId);
+        expect(sigma.getNodeDisplayData).toHaveBeenCalledWith(sourceId);
+        expect(sigma.framedGraphToViewport).toHaveBeenCalledWith({ x: 100, y: 100 });
+        expect(sigma.scaleSize).toHaveBeenCalledWith(sourceDisplayData.size);
+    });
+});

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

@@ -0,0 +1,2 @@
+import Graph from 'graphology';
+export declare const createDefaultGraph: () => Graph<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;

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

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultGraph = void 0;
+var graphology_1 = __importDefault(require("graphology"));
+var graphDataTypes_1 = require("../../types/graphDataTypes");
+var createDefaultGraph = function () {
+    var graph = new graphology_1.default();
+    graph.addNode('hcp', {
+        nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType,
+        label: 'HCP',
+        secondaryLabel: '12 attributes',
+        image: 'HCP.svg',
+        x: 100,
+        y: 100
+    });
+    graph.addNode('hca', {
+        nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType,
+        label: 'HCA',
+        secondaryLabel: '10 attributes',
+        image: 'HCA.svg',
+        x: 200,
+        y: 100
+    });
+    graph.addNode('gpo', {
+        nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType,
+        label: 'GPO',
+        secondaryLabel: '1 attribute',
+        x: 300,
+        y: 100
+    });
+    graph.addNode('prescriptions', {
+        nodeType: graphDataTypes_1.DataModelGraphNodeType.interactionType,
+        label: 'Prescriptions',
+        secondaryLabel: '2 attributes',
+        x: 100,
+        y: 200
+    });
+    graph.addEdgeWithKey('hcp->hca', 'hcp', 'hca', {
+        label: '1'
+    });
+    graph.addEdgeWithKey('hca->gpo', 'hca', 'gpo', {
+        label: '2'
+    });
+    graph.addEdgeWithKey('hcp->prescriptions', 'hcp', 'prescriptions', {
+        type: 'dashed'
+    });
+    return graph;
+};
+exports.createDefaultGraph = createDefaultGraph;

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

@@ -0,0 +1,17 @@
+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 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)";
+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;
+    onNodeClick: (node: string) => void;
+    onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+};
+export declare const useDataModelGraphAppearance: ({ graph, selectedNode, selectedEdge, onNodeClick, onEdgeLabelClick }: Props) => void;
+export {};

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

@@ -0,0 +1,139 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataModelGraphAppearance = exports.INACTIVE_LABEL_COLOR = exports.RELATED_DASHED_EDGE_COLOR = exports.RELATED_EDGE_COLOR = exports.SELECTED_EDGE_COLOR = exports.INACTIVE_EDGE_COLOR = exports.DASHED_EDGE_COLOR = exports.EDGE_COLOR = void 0;
+var react_1 = require("react");
+var core_1 = require("@react-sigma/core");
+var core_2 = require("@react-sigma/core");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var graphDataTypes_1 = require("../../types/graphDataTypes");
+var useLoopRenderer_1 = require("../../hooks/useLoopRenderer");
+var useEdgeLabelsRenderer_1 = require("./useEdgeLabelsRenderer");
+var useSelectedNodeRenderer_1 = require("./useSelectedNodeRenderer");
+var interaction_inline_svg_1 = require("../icons/interaction.inline.svg");
+var DEFAULT_NODE_STYLE = {
+    type: 'image',
+    size: 28,
+    color: 'rgba(55, 71, 79, 1)'
+};
+var DEFAULT_EDGE_STYLE = {
+    size: 2
+};
+exports.EDGE_COLOR = 'rgba(130, 130, 130, 1)';
+exports.DASHED_EDGE_COLOR = 'rgba(189, 189, 189, 1)';
+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 useDataModelGraphAppearance = function (_a) {
+    var graph = _a.graph, selectedNode = _a.selectedNode, selectedEdge = _a.selectedEdge, onNodeClick = _a.onNodeClick, onEdgeLabelClick = _a.onEdgeLabelClick;
+    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 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);
+    (0, react_1.useEffect)(function () {
+        registerEvents({
+            enterNode: function (_a) {
+                var node = _a.node;
+                setHoveredNode(node);
+            },
+            leaveNode: function () {
+                setHoveredNode(null);
+            },
+            clickNode: function (_a) {
+                var node = _a.node;
+                onNodeClick(node);
+            }
+        });
+    }, [sigma, registerEvents, onNodeClick]);
+    (0, react_1.useEffect)(function () {
+        container.style.cursor = hoveredNode || hoveredEdge ? 'pointer' : 'default';
+    }, [container, hoveredNode, hoveredEdge]);
+    (0, react_1.useEffect)(function () {
+        var graph = sigma.getGraph();
+        var selectedNodeNeighbours;
+        try {
+            selectedNodeNeighbours = graph.neighbors(selectedNode);
+        }
+        catch (e) {
+            //do nothing
+        }
+        setSettings({
+            nodeReducer: function (node, data) {
+                var isSelectedNode = node === selectedNode;
+                var isInactiveNode = (selectedNode &&
+                    selectedNodeNeighbours &&
+                    __spreadArray(__spreadArray([], selectedNodeNeighbours, true), [selectedNode], false).every(function (n) { return n !== node; })) ||
+                    (selectedEdge && !graph.hasExtremity(selectedEdge, node)) ||
+                    false;
+                var newData = __assign(__assign({}, DEFAULT_NODE_STYLE), data);
+                if (data.nodeType === graphDataTypes_1.DataModelGraphNodeType.interactionType) {
+                    newData.hasBorder = true;
+                    newData.image = (0, mdm_sdk_1.svg2Url)(interaction_inline_svg_1.interactionIcon);
+                }
+                if (isInactiveNode) {
+                    newData.inactive = true;
+                    newData.labelColor = exports.INACTIVE_LABEL_COLOR;
+                    newData.secondaryLabelColor = exports.INACTIVE_LABEL_COLOR;
+                }
+                if (isSelectedNode) {
+                    newData.selected = true;
+                    newData.zIndex = 100;
+                }
+                if (hoveredNode !== node && !isSelectedNode) {
+                    delete newData.secondaryLabel;
+                }
+                return newData;
+            },
+            edgeReducer: function (edge, data) {
+                var isDashedLine = data.type === 'dashed';
+                var newData = __assign(__assign({}, DEFAULT_EDGE_STYLE), data);
+                if (selectedEdge === edge) {
+                    newData.selected = true;
+                }
+                if (selectedNode) {
+                    if (graph.hasExtremity(edge, selectedNode)) {
+                        newData.color = isDashedLine ? exports.RELATED_DASHED_EDGE_COLOR : exports.RELATED_EDGE_COLOR;
+                    }
+                    else {
+                        newData.color = exports.INACTIVE_EDGE_COLOR;
+                        newData.labelColor = exports.INACTIVE_LABEL_COLOR;
+                    }
+                }
+                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 {
+                    newData.color = isDashedLine ? exports.DASHED_EDGE_COLOR : exports.EDGE_COLOR;
+                }
+                return newData;
+            }
+        });
+    }, [sigma, setSettings, selectedNode, selectedEdge, hoveredEdge, hoveredNode]);
+};
+exports.useDataModelGraphAppearance = useDataModelGraphAppearance;

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

@@ -0,0 +1 @@
+export {};