@reltio/components 1.4.1843 → 1.4.1845

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

@@ -0,0 +1,192 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var ramda_1 = require("ramda");
+var core_1 = require("@react-sigma/core");
+var useDataModelGraphAppearance_1 = require("./useDataModelGraphAppearance");
+var graphDataTypes_1 = require("../../types/graphDataTypes");
+var defaultGraph_test_data_1 = require("./defaultGraph.test-data");
+jest.mock('@react-sigma/core', function () {
+    var sigma = jest.requireActual('@react-sigma/core');
+    return __assign(__assign({}, sigma), { useSigma: jest.fn(), useRegisterEvents: jest.fn().mockReturnValue(jest.fn()), useSetSettings: jest.fn().mockReturnValue(jest.fn()), useSigmaContext: jest.fn().mockReturnValue({
+            container: {
+                style: {}
+            }
+        }) });
+});
+jest.mock('../../hooks/useLoopRenderer', function () { return ({
+    useLoopRenderer: jest.fn()
+}); });
+jest.mock('./useEdgeLabelsRenderer', function () { return ({
+    useEdgeLabelsRenderer: jest.fn()
+}); });
+jest.mock('./useSelectedNodeRenderer', function () { return ({
+    useSelectedNodeRenderer: jest.fn()
+}); });
+describe('useDataModelGraphAppearance tests', function () {
+    var setUp = function (props) {
+        var graph = (0, defaultGraph_test_data_1.createDefaultGraph)();
+        core_1.useSigma.mockReturnValue({
+            getGraph: function () { return graph; }
+        });
+        return __assign({ graph: graph }, (0, react_hooks_1.renderHook)(useDataModelGraphAppearance_1.useDataModelGraphAppearance, {
+            initialProps: __assign({ graph: graph, selectedNode: null, onNodeClick: jest.fn(), selectedEdge: null, onEdgeLabelClick: jest.fn() }, props)
+        }));
+    };
+    var setSettings = jest.fn();
+    var registerEvents = jest.fn();
+    beforeAll(function () {
+        core_1.useSetSettings.mockReturnValue(setSettings);
+        core_1.useRegisterEvents.mockReturnValue(registerEvents);
+    });
+    var getNodeReducer = function () { return (0, ramda_1.last)(setSettings.mock.calls)[0].nodeReducer; };
+    var getEdgeReducer = function () { return (0, ramda_1.last)(setSettings.mock.calls)[0].edgeReducer; };
+    var getEnterNode = function () { return (0, ramda_1.last)(registerEvents.mock.calls)[0].enterNode; };
+    var getClickNode = function () { return (0, ramda_1.last)(registerEvents.mock.calls)[0].clickNode; };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should call onNodeClick on clickNode event', function () {
+        var onNodeClick = jest.fn();
+        setUp({ onNodeClick: onNodeClick });
+        var clickNode = getClickNode();
+        (0, react_hooks_1.act)(function () {
+            clickNode({ node: 'hca' });
+        });
+        expect(onNodeClick).toHaveBeenCalledWith('hca');
+    });
+    describe('nodes reducer behavior', function () {
+        var getDefaultNodeAttributes = function (_a) {
+            var _secondaryLabel = _a.secondaryLabel, attributes = __rest(_a, ["secondaryLabel"]);
+            return (__assign(__assign({}, attributes), { type: 'image', size: 28, color: 'rgba(55, 71, 79, 1)' }));
+        };
+        it('should apply default node style', function () {
+            var _a = setUp(), result = _a.result, graph = _a.graph;
+            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 }));
+            expect(nodeReducer('gpo', graph.getNodeAttributes('gpo'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('gpo'))), { label: 'GPO', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType }));
+            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 hovered node style', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, graph, result, enterNode, nodeReducer;
+            return __generator(this, function (_b) {
+                _a = setUp(), graph = _a.graph, result = _a.result;
+                enterNode = getEnterNode();
+                (0, react_hooks_1.act)(function () {
+                    enterNode({ node: 'hcp' });
+                });
+                nodeReducer = getNodeReducer();
+                expect(nodeReducer('hcp', graph.getNodeAttributes('hcp'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('hcp'))), { image: 'HCP.svg', label: 'HCP', secondaryLabel: '12 attributes', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType }));
+                expect(result.error).toBeUndefined();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should apply correct styles when selectedNode is specified', function () {
+            var _a = setUp({ selectedNode: 'hcp' }), 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', secondaryLabel: '12 attributes', selected: true, zIndex: 100, 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 }));
+            expect(nodeReducer('gpo', graph.getNodeAttributes('gpo'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('gpo'))), { label: 'GPO', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType, inactive: true, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR, secondaryLabelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
+            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;
+            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 }));
+            expect(nodeReducer('gpo', graph.getNodeAttributes('gpo'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('gpo'))), { label: 'GPO', nodeType: graphDataTypes_1.DataModelGraphNodeType.entityType, inactive: true, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR, secondaryLabelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
+            expect(nodeReducer('prescriptions', graph.getNodeAttributes('prescriptions'))).toEqual(__assign(__assign({}, getDefaultNodeAttributes(graph.getNodeAttributes('prescriptions'))), { hasBorder: true, image: expect.stringContaining('data:image/svg+xml'), label: 'Prescriptions', nodeType: graphDataTypes_1.DataModelGraphNodeType.interactionType, inactive: true, labelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR, secondaryLabelColor: useDataModelGraphAppearance_1.INACTIVE_LABEL_COLOR }));
+            expect(result.error).toBeUndefined();
+        });
+    });
+    describe('edges reducer behavior', function () {
+        var defaultEdgeStyle = {
+            size: 2
+        };
+        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(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(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;
+            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(result.error).toBeUndefined();
+        });
+    });
+});

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

@@ -0,0 +1,10 @@
+import Graph from 'graphology';
+export declare const CUSTOM_EDGE_LABELS_CANVAS_NAME = "customEdgeLabels";
+export declare const EDGE_DOTS_CANVAS_NAME = "edgeDots";
+export declare const HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = "customEdgeLabelsHovers";
+type Props = {
+    graph: Graph;
+    onEdgeLabelClick: (edgeId: string, event: MouseEvent) => void;
+};
+export declare const useEdgeLabelsRenderer: ({ graph, onEdgeLabelClick }: Props) => string;
+export {};

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

@@ -0,0 +1,171 @@
+"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);
+};
+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 useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
+var graphDataTypes_1 = require("../../types/graphDataTypes");
+var label_1 = require("../../rendering/canvas/label");
+var utils_1 = require("../../rendering/canvas/utils");
+var edgeLabelHelpers_1 = require("../helpers/edgeLabelHelpers");
+exports.CUSTOM_EDGE_LABELS_CANVAS_NAME = 'customEdgeLabels';
+exports.EDGE_DOTS_CANVAS_NAME = 'edgeDots';
+exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = 'customEdgeLabelsHovers';
+var useEdgeLabelsRenderer = function (_a) {
+    var graph = _a.graph, onEdgeLabelClick = _a.onEdgeLabelClick;
+    var sigma = (0, core_1.useSigma)();
+    var settings = sigma.getSettings();
+    var registerEvents = (0, core_1.useRegisterEvents)();
+    var _b = (0, useSigmaCustomRenderers_1.useSigmaCustomRenderers)(), addCustomRenderers = _b.addRenderers, canvasesRef = _b.canvasesRef;
+    var _c = canvasesRef.current, _d = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME, canvas = _c[_d];
+    var edgeLabelsPathsMap = (0, react_1.useRef)({});
+    var _e = (0, react_1.useState)(), hoveredEdgeLabel = _e[0], setHoveredEdgeLabel = _e[1];
+    var _f = (0, react_1.useState)(false), canvasIsAdded = _f[0], setCanvasIsAdded = _f[1];
+    var shouldRenderLabels = (0, react_1.useCallback)(function (edgeId, sourceId, targetId) {
+        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+        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;
+    }, [sigma]);
+    var drawEdgeLabel = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
+        delete edgeLabelsPathsMap.current[edgeId];
+        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+        if (shouldRenderLabels(edgeId, sourceId, targetId)) {
+            var isHovered = hoveredEdgeLabel === edgeId;
+            var isSelected = edgeDisplayData.selected;
+            var fontScale = isHovered ? 1.2 : 1;
+            var _a = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
+            var path = (0, label_1.drawLabel)(context, {
+                label: edgeDisplayData.label,
+                labelColor: edgeDisplayData.labelColor,
+                x: x,
+                y: y,
+                size: sigma.scaleSize(4)
+            }, __assign(__assign({}, settings), { labelSize: settings.labelSize * fontScale }), {
+                backgroundColor: "rgba(250, 250, 250, ".concat(isSelected || isHovered ? '1' : '0.9', ")"),
+                borderColor: isSelected ? '#0072CE' : undefined
+            });
+            edgeLabelsPathsMap.current[edgeId] = path;
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sigma, hoveredEdgeLabel, shouldRenderLabels]);
+    var drawEdgeDot = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
+        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+        if (shouldRenderLabels(edgeId, sourceId, targetId)) {
+            var isHovered = hoveredEdgeLabel === edgeId;
+            var isSelected = edgeDisplayData.selected;
+            var dotScale = isHovered || isSelected ? 1.4 : 1;
+            var circleRadius = sigma.scaleSize(2.5 * 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.fill();
+        }
+    }, [sigma, hoveredEdgeLabel, shouldRenderLabels]);
+    (0, react_1.useEffect)(function () {
+        var timer;
+        var checkCanvas = function () {
+            var _a = canvasesRef.current, _b = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME, canvas = _a[_b];
+            if (canvas) {
+                setCanvasIsAdded(true);
+            }
+            else {
+                timer = setTimeout(checkCanvas, 100);
+            }
+        };
+        checkCanvas();
+        return function () {
+            clearTimeout(timer);
+        };
+    }, [canvasesRef]);
+    (0, react_1.useEffect)(function () {
+        registerEvents({
+            click: function (event) {
+                if (hoveredEdgeLabel) {
+                    onEdgeLabelClick(hoveredEdgeLabel, event.original);
+                    setHoveredEdgeLabel(null);
+                }
+            },
+            mousemove: function (event) {
+                if (!canvas)
+                    return;
+                var context = canvas.context, canvasElement = canvas.canvasElement;
+                var _a = (0, utils_1.getCanvasMousePos)(canvasElement, event.original), x = _a.x, y = _a.y;
+                var hoveredEdgeLabel = null;
+                for (var id in edgeLabelsPathsMap.current) {
+                    var path = edgeLabelsPathsMap.current[id];
+                    if (context.isPointInPath(path, x, y)) {
+                        hoveredEdgeLabel = id;
+                        break;
+                    }
+                    else {
+                        hoveredEdgeLabel = null;
+                    }
+                }
+                setHoveredEdgeLabel(hoveredEdgeLabel);
+            }
+        });
+    }, [sigma, canvas, registerEvents, hoveredEdgeLabel, onEdgeLabelClick, canvasIsAdded]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        addCustomRenderers((_a = {},
+            _a[exports.CUSTOM_EDGE_LABELS_CANVAS_NAME] = {
+                renderer: function (context) {
+                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
+                        if (edgeId !== hoveredEdgeLabel) {
+                            drawEdgeLabel(context, edgeId, sourceId, targetId);
+                        }
+                    });
+                },
+                insertBefore: 'labels'
+            },
+            _a));
+    }, [addCustomRenderers, graph, drawEdgeLabel, hoveredEdgeLabel]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        addCustomRenderers((_a = {},
+            _a[exports.EDGE_DOTS_CANVAS_NAME] = {
+                renderer: function (context) {
+                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
+                        if (edgeId !== hoveredEdgeLabel) {
+                            drawEdgeDot(context, edgeId, sourceId, targetId);
+                        }
+                    });
+                },
+                insertBefore: 'edgeLabels'
+            },
+            _a));
+    }, [addCustomRenderers, graph, drawEdgeDot, hoveredEdgeLabel]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        addCustomRenderers((_a = {},
+            _a[exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME] = {
+                renderer: function (context) {
+                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
+                        if (edgeId === hoveredEdgeLabel) {
+                            drawEdgeLabel(context, edgeId, sourceId, targetId);
+                            drawEdgeDot(context, edgeId, sourceId, targetId);
+                        }
+                    });
+                },
+                insertBefore: 'hovers'
+            },
+            _a));
+    }, [addCustomRenderers, graph, drawEdgeLabel, drawEdgeDot, hoveredEdgeLabel]);
+    return hoveredEdgeLabel;
+};
+exports.useEdgeLabelsRenderer = useEdgeLabelsRenderer;

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

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

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

@@ -0,0 +1,176 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var ramda_1 = require("ramda");
+var core_1 = require("@react-sigma/core");
+var useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
+var label_1 = require("../../rendering/canvas/label");
+var utils_1 = require("../../rendering/canvas/utils");
+var useEdgeLabelsRenderer_1 = require("./useEdgeLabelsRenderer");
+var defaultGraph_test_data_1 = require("./defaultGraph.test-data");
+jest.mock('@react-sigma/core');
+jest.mock('../../hooks/useSigmaCustomRenderers', function () { return ({
+    useSigmaCustomRenderers: jest.fn()
+}); });
+jest.mock('../../rendering/canvas/utils', function () { return ({
+    getCanvasMousePos: jest.fn()
+}); });
+jest.mock('../../rendering/canvas/label', function () { return ({
+    drawLabel: jest.fn().mockImplementation(jest.requireActual('../../rendering/canvas/label').drawLabel)
+}); });
+describe('useEdgeLabelsRenderer tests', function () {
+    var graph;
+    var setUp = function (props) {
+        graph = (props === null || props === void 0 ? void 0 : props.graph) || (0, defaultGraph_test_data_1.createDefaultGraph)();
+        return (0, react_hooks_1.renderHook)(useEdgeLabelsRenderer_1.useEdgeLabelsRenderer, {
+            initialProps: __assign({ graph: graph, onEdgeLabelClick: jest.fn() }, props)
+        });
+    };
+    var getEdgeDisplayData = jest.fn().mockImplementation(function (edgeId) { return graph.getEdgeAttributes(edgeId); });
+    var getNodeDisplayData = jest.fn().mockImplementation(function (nodeId) { return graph.getNodeAttributes(nodeId); });
+    var renderers = {};
+    var addRenderers = function (rendererObject) { return Object.assign(renderers, rendererObject); };
+    var registerEvents = jest.fn();
+    var canvas = document.createElement('canvas');
+    var canvasContext = canvas.getContext('2d');
+    beforeEach(function () {
+        var _a;
+        useSigmaCustomRenderers_1.useSigmaCustomRenderers.mockReturnValue({
+            addRenderers: addRenderers,
+            canvasesRef: {
+                current: (_a = {},
+                    _a[useEdgeLabelsRenderer_1.CUSTOM_EDGE_LABELS_CANVAS_NAME] = {
+                        canvasElement: canvas,
+                        context: canvasContext
+                    },
+                    _a)
+            }
+        });
+        core_1.useSigma.mockReturnValue({
+            getEdgeDisplayData: getEdgeDisplayData,
+            getNodeDisplayData: getNodeDisplayData,
+            framedGraphToViewport: function (x) { return x; },
+            getSettings: function () { return ({
+                labelSize: 12,
+                labelColor: 'black'
+            }); },
+            scaleSize: function (x) { return x; }
+        });
+        core_1.useRegisterEvents.mockReturnValue(registerEvents);
+        utils_1.getCanvasMousePos.mockImplementation(function (_canvas, event) { return ({ x: event.clientX, y: event.clientY }); });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var getEdgesLabelsRenderer = function () { return renderers[useEdgeLabelsRenderer_1.CUSTOM_EDGE_LABELS_CANVAS_NAME]; };
+    var getDotsRenderer = function () { return renderers[useEdgeLabelsRenderer_1.EDGE_DOTS_CANVAS_NAME]; };
+    var getHoversRenderer = function () { return renderers[useEdgeLabelsRenderer_1.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME]; };
+    var getMousemove = function () { return (0, ramda_1.last)(registerEvents.mock.calls)[0].mousemove; };
+    var getClick = function () { return (0, ramda_1.last)(registerEvents.mock.calls)[0].click; };
+    var getCanvasContextEventTypes = function (context) {
+        return context._events.map(function (event) { return event.type; });
+    };
+    it('should call drawLabel with correct params', function () {
+        setUp();
+        var renderer = getEdgesLabelsRenderer().renderer;
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+        });
+        expect(label_1.drawLabel).toHaveBeenCalledTimes(2);
+        expect(label_1.drawLabel).toHaveBeenCalledWith(canvasContext, { label: '1', size: 4, x: 150, y: 100 }, { labelColor: 'black', labelSize: 12 }, { backgroundColor: 'rgba(250, 250, 250, 0.9)' });
+        expect(label_1.drawLabel).toHaveBeenCalledWith(canvasContext, { label: '2', size: 4, x: 250, y: 100 }, { labelColor: 'black', labelSize: 12 }, { backgroundColor: 'rgba(250, 250, 250, 0.9)' });
+    });
+    it('should draw dot in the center of edge', function () {
+        setUp();
+        var canvas = document.createElement('canvas');
+        var canvasContext = canvas.getContext('2d');
+        var renderer = getDotsRenderer().renderer;
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+        });
+        expect(getCanvasContextEventTypes(canvasContext)).toEqual([
+            'beginPath',
+            'arc',
+            'fill',
+            'beginPath',
+            '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);
+    });
+    it('should correctly draw a hover state of edge', function () {
+        setUp();
+        var hoversCanvas = document.createElement('canvas');
+        var hoversCanvasContext = hoversCanvas.getContext('2d');
+        var edgeLabelsRenderer = getEdgesLabelsRenderer().renderer;
+        (0, react_hooks_1.act)(function () {
+            edgeLabelsRenderer(canvasContext);
+            var mousemove = getMousemove();
+            var event = { original: { clientX: 170, clientY: 105 } };
+            canvasContext.isPointInPath.mockReturnValueOnce(true);
+            mousemove(event);
+        });
+        label_1.drawLabel.mockClear();
+        (0, react_hooks_1.act)(function () {
+            var hoversRenderer = getHoversRenderer().renderer;
+            hoversRenderer(hoversCanvasContext);
+        });
+        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(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)' });
+    });
+    it('mousemove event should work correctly if cursor over edge caption', function () {
+        var onEdgeLabelClick = jest.fn();
+        var result = setUp({ onEdgeLabelClick: onEdgeLabelClick }).result;
+        var renderer = getEdgesLabelsRenderer().renderer;
+        expect(result.current).toBe(undefined);
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+            var mousemove = getMousemove();
+            var event = { original: { clientX: 170, clientY: 105 } };
+            canvasContext.isPointInPath.mockReturnValueOnce(true);
+            mousemove(event);
+        });
+        expect(result.current).toBe('hcp->hca');
+        expect(onEdgeLabelClick).not.toHaveBeenCalled();
+        (0, react_hooks_1.act)(function () {
+            var click = getClick();
+            click({ original: { clientX: 170, clientY: 105 } });
+        });
+        expect(onEdgeLabelClick).toHaveBeenCalledWith('hcp->hca', { clientX: 170, clientY: 105 });
+    });
+    it('mousemove event should work correctly if cursor not over edge caption', function () {
+        var onEdgeLabelClick = jest.fn();
+        var result = setUp({ onEdgeLabelClick: onEdgeLabelClick }).result;
+        var renderer = getEdgesLabelsRenderer().renderer;
+        expect(result.current).toBe(undefined);
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+            var mousemove = getMousemove();
+            var event = { original: { clientX: 0, clientY: 0 } };
+            canvasContext.isPointInPath.mockReturnValueOnce(false);
+            mousemove(event);
+        });
+        expect(result.current).toBe(null);
+        expect(onEdgeLabelClick).not.toHaveBeenCalled();
+        (0, react_hooks_1.act)(function () {
+            var click = getClick();
+            click({ original: { clientX: 0, clientY: 0 } });
+        });
+        expect(onEdgeLabelClick).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,8 @@
+import Graph from 'graphology';
+export declare const FAKE_CENTER_NODE_ID = "fakeCenterNodeId";
+type Props = {
+    graph: Graph;
+    timeout?: number;
+};
+export declare const useFakeCenterNode: ({ graph, timeout }: Props) => void;
+export {};

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFakeCenterNode = exports.FAKE_CENTER_NODE_ID = void 0;
+var react_1 = require("react");
+var core_1 = require("@react-sigma/core");
+var graphDataTypes_1 = require("../../types/graphDataTypes");
+exports.FAKE_CENTER_NODE_ID = 'fakeCenterNodeId';
+var useFakeCenterNode = function (_a) {
+    var graph = _a.graph, timeout = _a.timeout;
+    var sigma = (0, core_1.useSigma)();
+    (0, react_1.useEffect)(function () {
+        graph.addNode(exports.FAKE_CENTER_NODE_ID, {
+            type: 'circle',
+            hidden: true,
+            size: 0,
+            x: 1,
+            y: 1
+        });
+        graph.forEachNode(function (node) {
+            var nodeData = graph.getNodeAttributes(node);
+            if (nodeData.nodeType === graphDataTypes_1.DataModelGraphNodeType.entityType) {
+                graph.addEdge(node, exports.FAKE_CENTER_NODE_ID, {
+                    hidden: true
+                });
+            }
+        });
+        var timer = setTimeout(function () {
+            graph.dropNode(exports.FAKE_CENTER_NODE_ID);
+            sigma.getGraph().dropNode(exports.FAKE_CENTER_NODE_ID);
+        }, timeout);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, [sigma, graph, timeout]);
+};
+exports.useFakeCenterNode = useFakeCenterNode;

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var core_1 = require("@react-sigma/core");
+var useFakeCenterNode_1 = require("./useFakeCenterNode");
+var defaultGraph_test_data_1 = require("./defaultGraph.test-data");
+jest.mock('@react-sigma/core', function () { return ({
+    useSigma: jest.fn()
+}); });
+describe('useFakeCenterNode tests', function () {
+    var graph, sigmaGraph;
+    var setUp = function () {
+        graph = (0, defaultGraph_test_data_1.createDefaultGraph)();
+        return (0, react_hooks_1.renderHook)(useFakeCenterNode_1.useFakeCenterNode, {
+            initialProps: { graph: graph, timeout: 1000 }
+        });
+    };
+    var sigma = {
+        getGraph: jest.fn(function () { return sigmaGraph; })
+    };
+    beforeEach(function () {
+        core_1.useSigma.mockReturnValue(sigma);
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should add fake center node and edges on mount and drop it after timeout', function () {
+        jest.useFakeTimers();
+        setUp();
+        expect(graph.hasNode(useFakeCenterNode_1.FAKE_CENTER_NODE_ID)).toBe(true);
+        sigmaGraph = graph.copy();
+        (0, react_hooks_1.act)(function () {
+            jest.advanceTimersByTime(1000);
+        });
+        expect(graph.hasNode(useFakeCenterNode_1.FAKE_CENTER_NODE_ID)).toBe(false);
+    });
+});

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

@@ -0,0 +1,2 @@
+import Graph from 'graphology';
+export declare const useSelectedNodeRenderer: (graph: Graph) => void;