@reltio/components 1.4.1844 → 1.4.1845

package/esm/features/graph/hooks/useCircleLayout.d.ts

@@ -0,0 +1,9 @@
+import Graph from 'graphology';
+type Props = {
+    graph: Graph;
+    newNodesIds?: string[];
+    animationDuration?: number;
+    relayoutTrigger?: unknown;
+};
+export declare const useCircleLayout: ({ graph, newNodesIds, animationDuration, relayoutTrigger }: Props) => void;
+export {};

package/esm/features/graph/hooks/useCircleLayout.js

@@ -0,0 +1,43 @@
+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);
+};
+import { useMemo } from 'react';
+import circular from 'graphology-layout/circular';
+import forceAtlas2 from 'graphology-layout-forceatlas2';
+import FA2Layout from 'graphology-layout-forceatlas2/worker';
+import { useAnimatedGraphLayout } from './useAnimatedGraphLayout';
+import { useDidUpdateEffect } from '../../../hooks';
+export var useCircleLayout = function (_a) {
+    var graph = _a.graph, newNodesIds = _a.newNodesIds, animationDuration = _a.animationDuration, relayoutTrigger = _a.relayoutTrigger;
+    var layoutSettings = useMemo(function () {
+        circular.assign(graph);
+        return {
+            settings: __assign(__assign({}, forceAtlas2.inferSettings(graph)), { gravity: 1 })
+        };
+    }, [graph]);
+    useDidUpdateEffect(function () {
+        if (newNodesIds === null || newNodesIds === void 0 ? void 0 : newNodesIds.length) {
+            var tempGraph_1 = graph.copy();
+            circular.assign(tempGraph_1);
+            newNodesIds.forEach(function (id) {
+                graph.setNodeAttribute(id, 'x', tempGraph_1.getNodeAttribute(id, 'x'));
+                graph.setNodeAttribute(id, 'y', tempGraph_1.getNodeAttribute(id, 'y'));
+            });
+        }
+    }, [newNodesIds]);
+    useAnimatedGraphLayout({
+        workerLayout: FA2Layout,
+        layoutSettings: layoutSettings,
+        animationDuration: animationDuration,
+        graph: graph,
+        relayoutTrigger: relayoutTrigger
+    });
+};

package/esm/features/graph/hooks/useLoopRenderer.d.ts

@@ -0,0 +1,5 @@
+import Graph from 'graphology';
+export declare const useLoopRenderer: (graph: Graph) => {
+    selfRelationsPathsMap: Record<string, Path2D>;
+    selfRelationLoopsCanvas: import("..").Canvas;
+};

package/esm/features/graph/hooks/useLoopRenderer.js

@@ -0,0 +1,43 @@
+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);
+};
+import { useEffect, useRef } from 'react';
+import { useSigma } from '@react-sigma/core';
+import { useSigmaCustomRenderers } from '../contexts/SigmaCustomRenderersContext';
+import { drawSelfRelationLoop } from '../rendering/canvas/selfRelationLoop';
+export var useLoopRenderer = function (graph) {
+    var sigma = useSigma();
+    var _a = useSigmaCustomRenderers(), addCustomRenderers = _a.addRenderers, canvases = _a.canvases;
+    var selfRelationsPathsMap = useRef({});
+    var selfRelationLoopsCanvas = canvases.selfRelationLoops;
+    useEffect(function () {
+        addCustomRenderers({
+            selfRelationLoops: {
+                renderer: function (context) {
+                    graph.forEachEdge(function (edgeId, edgeData, sourceId) {
+                        if (edgeData.loop) {
+                            delete selfRelationsPathsMap.current[edgeId];
+                            var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+                            var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
+                            var isHidden = edgeDisplayData.hidden || sourceDisplayData.hidden;
+                            if (isHidden)
+                                return;
+                            var path = drawSelfRelationLoop(context, __assign(__assign({}, edgeDisplayData), { size: sigma.scaleSize(edgeDisplayData.size) }), __assign(__assign(__assign({}, sourceDisplayData), sigma.framedGraphToViewport(sourceDisplayData)), { size: sigma.scaleSize(sourceDisplayData.size) }));
+                            selfRelationsPathsMap.current[edgeId] = path;
+                        }
+                    });
+                },
+                insertBefore: 'edges'
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+    return { selfRelationsPathsMap: selfRelationsPathsMap.current, selfRelationLoopsCanvas: selfRelationLoopsCanvas };
+};

package/esm/features/graph/hooks/useLoopRenderer.test.d.ts

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

package/esm/features/graph/hooks/useLoopRenderer.test.js

@@ -0,0 +1,219 @@
+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);
+};
+import { renderHook, act } from '@testing-library/react-hooks';
+import { MultiGraph } from 'graphology';
+import { useSigma } from '@react-sigma/core';
+import { RelationTypeDirection } from '@reltio/mdm-sdk';
+import { useLoopRenderer } from './useLoopRenderer';
+import { useSigmaCustomRenderers } from '../contexts/SigmaCustomRenderersContext';
+import { drawSelfRelationLoop } from '../rendering/canvas/selfRelationLoop';
+jest.mock('@react-sigma/core');
+jest.mock('../contexts/SigmaCustomRenderersContext');
+jest.mock('../rendering/canvas/selfRelationLoop');
+var graphJson = {
+    attributes: {},
+    nodes: [
+        {
+            key: 'node1',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hcp',
+                traversedRelationsCount: 2,
+                untraversedRelationsCount: 0,
+                x: 1,
+                y: 1
+            }
+        },
+        {
+            key: 'node2',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hcp',
+                traversedRelationsCount: 3,
+                untraversedRelationsCount: 2,
+                x: 1,
+                y: 1
+            }
+        },
+        {
+            key: 'node3',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hca',
+                traversedRelationsCount: 1,
+                untraversedRelationsCount: 0,
+                x: 1,
+                y: 1
+            }
+        }
+    ],
+    edges: [
+        {
+            key: 'r1',
+            source: 'node1',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: false,
+                loop: false,
+                relationTypeUri: 'relType1',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r2',
+            source: 'node3',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: false,
+                loop: false,
+                relationTypeUri: 'relType2',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r3',
+            source: 'node2',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: true,
+                loop: true,
+                relationTypeUri: 'relType3',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r4',
+            source: 'node1',
+            target: 'node1',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: true,
+                loop: true,
+                relationTypeUri: 'relType4',
+                direction: 'directed'
+            }
+        }
+    ]
+};
+var edges = {
+    r1: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType1',
+        direction: RelationTypeDirection.directed
+    },
+    r2: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType2',
+        direction: RelationTypeDirection.directed
+    },
+    r3: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        hidden: true,
+        loop: true,
+        relationTypeUri: 'relType3',
+        direction: RelationTypeDirection.directed
+    },
+    r4: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        relationTypeUri: 'relType4',
+        direction: RelationTypeDirection.directed
+    }
+};
+var nodes = {
+    node1: {
+        size: 12,
+        label: 'node 1',
+        x: 0.5,
+        y: 0.4
+    },
+    node2: {
+        size: 12,
+        label: 'node 2',
+        x: 0.6,
+        y: 0.6
+    },
+    node3: {
+        size: 12,
+        label: 'node 3',
+        x: 0.8,
+        y: 0.7
+    }
+};
+var startHook = function (graph) { return renderHook(useLoopRenderer, { initialProps: graph }); };
+var createGraph = function () {
+    var graph = new MultiGraph();
+    graph.import(graphJson);
+    return graph;
+};
+describe('useLoopRenderer tests', function () {
+    var getEdgeDisplayData = jest.fn().mockImplementation(function (edgeId) { return edges[edgeId]; });
+    var getNodeDisplayData = jest.fn().mockImplementation(function (nodeId) { return nodes[nodeId]; });
+    var scaleSize = jest.fn().mockImplementation(function (size) { return size * 2; });
+    var framedGraphToViewport = jest.fn().mockImplementation(function (_a) {
+        var x = _a.x, y = _a.y;
+        return ({ x: x * 100, y: y * 100 });
+    });
+    var addRenderers = jest.fn();
+    var canvases = { selfRelationLoops: {} };
+    beforeAll(function () {
+        drawSelfRelationLoop.mockImplementation(function (_context, edgeData) { return "path-".concat(edgeData.relationTypeUri); });
+        useSigmaCustomRenderers.mockReturnValue({
+            addRenderers: addRenderers,
+            canvases: canvases
+        });
+        useSigma.mockReturnValue({
+            getEdgeDisplayData: getEdgeDisplayData,
+            getNodeDisplayData: getNodeDisplayData,
+            scaleSize: scaleSize,
+            framedGraphToViewport: framedGraphToViewport
+        });
+    });
+    var getSelfRelationLoopsRenderer = function () {
+        return addRenderers.mock.calls[addRenderers.mock.calls.length - 1][0].selfRelationLoops;
+    };
+    it('should draw self relations correctly and with correctly setting paths', function () {
+        var graph = createGraph();
+        var result = startHook(graph).result;
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: {},
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+        var renderer = getSelfRelationLoopsRenderer().renderer;
+        act(function () {
+            renderer('canvas');
+        });
+        expect(drawSelfRelationLoop).toHaveBeenCalledTimes(1);
+        expect(drawSelfRelationLoop).toHaveBeenCalledWith('canvas', __assign(__assign({}, edges.r4), { size: 2 }), __assign(__assign({}, nodes.node1), { size: 24, x: 50, y: 40 }));
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: { r4: 'path-relType4' },
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+    });
+});

package/esm/features/graph/hooks/useSigmaCustomRenderers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Canvases, Renderers } from '../types/sigmaCustomRenderersTypes';
+export declare const useSigmaCustomRenderers: () => {
+    addRenderers: (renderers: Renderers) => void;
+    canvases: Canvases;
+    canvasesRef: import("react").MutableRefObject<Canvases>;
+};

package/esm/features/graph/hooks/useSigmaCustomRenderers.js

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { mergeLeft } from 'ramda';
+import { useSigmaContext } from '@react-sigma/core';
+import { getPixelRatio } from 'sigma/utils';
+import { isEmptyValue } from '@reltio/mdm-sdk';
+var createCanvasContext = function (canvas) {
+    var contextOptions = { preserveDrawingBuffer: false, antialias: false };
+    return canvas.getContext('2d', contextOptions);
+};
+var createCanvas = function (id) {
+    var canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.setAttribute('class', "sigma-".concat(id));
+    return canvas;
+};
+export var useSigmaCustomRenderers = function () {
+    var _a = useSigmaContext(), container = _a.container, sigma = _a.sigma;
+    var _b = useState({}), renderers = _b[0], setRenderers = _b[1];
+    var canvasesRef = useRef({});
+    var widthRef = useRef(0);
+    var heightRef = useRef(0);
+    var addRenderers = useCallback(function (renderers) {
+        setRenderers(mergeLeft(renderers));
+    }, []);
+    var resize = useCallback(function () {
+        widthRef.current = container.offsetWidth;
+        heightRef.current = container.offsetHeight;
+        var pixelRatio = getPixelRatio();
+        for (var id in canvasesRef.current) {
+            var _a = canvasesRef.current[id], canvas = _a.canvasElement, context = _a.context;
+            canvas.style.width = widthRef.current + 'px';
+            canvas.style.height = heightRef.current + 'px';
+            canvas.setAttribute('width', widthRef.current * pixelRatio + 'px');
+            canvas.setAttribute('height', heightRef.current * pixelRatio + 'px');
+            if (pixelRatio !== 1) {
+                context.scale(pixelRatio, pixelRatio);
+            }
+        }
+    }, [container.offsetHeight, container.offsetWidth]);
+    var afterRender = useCallback(function () {
+        for (var id in renderers) {
+            var context = canvasesRef.current[id].context;
+            context.clearRect(0, 0, widthRef.current, heightRef.current);
+            var renderer = renderers[id].renderer;
+            renderer(context);
+        }
+    }, [renderers]);
+    var beforeRender = useCallback(function () {
+        for (var id in renderers) {
+            var shouldCreateCanvas = isEmptyValue(canvasesRef.current[id]);
+            if (!shouldCreateCanvas)
+                continue;
+            var insertBefore = renderers[id].insertBefore;
+            var sigmaContainer = container.querySelector('.sigma-container');
+            var canvas = createCanvas(id);
+            var context = createCanvasContext(canvas);
+            sigmaContainer.insertBefore(canvas, sigmaContainer.querySelector(".sigma-".concat(insertBefore)));
+            canvasesRef.current[id] = { canvasElement: canvas, context: context };
+            resize();
+        }
+    }, [renderers, container, resize]);
+    useEffect(function () {
+        sigma.addListener('beforeRender', beforeRender);
+        return function () {
+            sigma.off('beforeRender', beforeRender);
+        };
+    }, [sigma, beforeRender]);
+    useEffect(function () {
+        sigma.addListener('afterRender', afterRender);
+        return function () {
+            sigma.off('afterRender', afterRender);
+        };
+    }, [sigma, afterRender]);
+    useEffect(function () {
+        sigma.addListener('resize', resize);
+        return function () {
+            sigma.off('resize', resize);
+        };
+    }, [sigma, resize]);
+    useEffect(function () {
+        var canvases = canvasesRef.current;
+        return function () {
+            for (var id in canvases) {
+                var canvas = canvases[id];
+                canvas.canvasElement.remove();
+                delete canvases[id];
+            }
+        };
+    }, []);
+    return { addRenderers: addRenderers, canvases: canvasesRef.current, canvasesRef: canvasesRef };
+};

package/esm/features/graph/hooks/useSigmaCustomRenderers.test.d.ts

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

package/esm/features/graph/hooks/useSigmaCustomRenderers.test.js

@@ -0,0 +1,198 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useSigmaContext } from '@react-sigma/core';
+import { pipe, findLast, path, nth, equals } from 'ramda';
+import { useSigmaCustomRenderers } from './useSigmaCustomRenderers';
+import { getPixelRatio } from 'sigma/utils';
+jest.mock('@react-sigma/core');
+jest.mock('sigma/utils');
+describe('useSigmaCustomRenderers tests', function () {
+    var addListener = jest.fn();
+    var off = jest.fn();
+    var getRendererByEventName = function (eventName) {
+        return pipe(path(['mock', 'calls']), findLast(pipe(nth(0), equals(eventName))), nth(1))(addListener);
+    };
+    var sigmaContainerElement = {
+        querySelector: function (val) { return val; },
+        insertBefore: jest.fn()
+    };
+    var sigmaElement = {
+        querySelector: jest.fn(function () { return sigmaContainerElement; }),
+        offsetWidth: 200,
+        offsetHeight: 300
+    };
+    var context = {
+        scale: jest.fn(),
+        clearRect: jest.fn()
+    };
+    var canvas = {
+        style: {},
+        setAttribute: jest.fn(),
+        getContext: jest.fn(function () { return context; }),
+        remove: jest.fn()
+    };
+    beforeEach(function () {
+        useSigmaContext.mockReturnValue({
+            sigma: { addListener: addListener, off: off },
+            container: sigmaElement
+        });
+    });
+    afterEach(function () {
+        jest.restoreAllMocks();
+        jest.clearAllMocks();
+        canvas.style = {};
+    });
+    it('should add listeners', function () {
+        renderHook(useSigmaCustomRenderers);
+        expect(addListener).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+    it('should remove listeners after unmount component', function () {
+        var unmount = renderHook(useSigmaCustomRenderers).unmount;
+        unmount();
+        expect(off).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+    it('beforeRender should work correctly', function () {
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledWith('.sigma-container');
+        expect(canvas.style.position).toBe('absolute');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('class', 'sigma-customRenderer');
+        expect(canvas.getContext).toHaveBeenCalledWith('2d', { preserveDrawingBuffer: false, antialias: false });
+        expect(sigmaContainerElement.insertBefore).toHaveBeenCalledWith(canvas, '.sigma-element');
+        var canvases = { customRenderer: { canvasElement: canvas, context: context } };
+        expect(result.current).toEqual({
+            addRenderers: expect.any(Function),
+            canvases: canvases,
+            canvasesRef: { current: canvases }
+        });
+        expect(getPixelRatio).toHaveBeenCalled();
+    });
+    it('beforeRender should work correctly if canvas already has been created', function () {
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+        act(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+    });
+    it('resize should work correctly if canvases is empty', function () {
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var resize = getRendererByEventName('resize');
+        act(function () {
+            resize();
+        });
+        expect(getPixelRatio).toHaveBeenCalled();
+        expect(canvas.setAttribute).not.toHaveBeenCalled();
+    });
+    it('resize should work correctly if canvas exists and pixelRatio equals 1', function () {
+        getPixelRatio.mockReturnValue(1);
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var resize = getRendererByEventName('resize');
+        jest.clearAllMocks();
+        act(function () {
+            resize();
+        });
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '200px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '300px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).not.toHaveBeenCalled();
+    });
+    it('resize should work correctly if canvas exists and pixelRatio does not equal 1', function () {
+        getPixelRatio.mockReturnValue(0.9);
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var resize = getRendererByEventName('resize');
+        jest.clearAllMocks();
+        act(function () {
+            resize();
+        });
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '180px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '270px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).toHaveBeenCalledWith(0.9, 0.9);
+    });
+    it('afterRender should work correctly', function () {
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        var customRenderer = jest.fn();
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: customRenderer, insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var afterRender = getRendererByEventName('afterRender');
+        jest.clearAllMocks();
+        act(function () {
+            afterRender();
+        });
+        expect(context.clearRect).toHaveBeenCalledWith(0, 0, 200, 300);
+        expect(customRenderer).toHaveBeenCalledWith(context);
+    });
+    it('should remove canvas element from DOM and clear canvases ref if component has been unmounted', function () {
+        var _a = renderHook(useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender, unmount = _a.unmount;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        act(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        act(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        unmount();
+        expect(canvas.remove).toHaveBeenCalled();
+        expect(result.current.canvases).toEqual({});
+    });
+});

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

@@ -0,0 +1,16 @@
+export { SigmaGraphContainer } from './SigmaGraphContainer';
+export { ZoomSlider } from './ZoomSlider';
+export { DataModelGraph } from './DataModelGraph';
+export { useSigmaCustomRenderers } from './hooks/useSigmaCustomRenderers';
+export { useLoopRenderer } from './hooks/useLoopRenderer';
+export { useAnimatedGraphLayout } from './hooks/useAnimatedGraphLayout';
+export { useCircleLayout } from './hooks/useCircleLayout';
+export { drawTooltip } from './rendering/canvas/tooltip';
+export { NodeImageProgram } from './rendering/webgl/node.image';
+export { NodeBorderProgram } from './rendering/webgl/node.border';
+export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
+export { WebGLImageLoader } from './rendering/webgl/image';
+export { getCanvasMousePos } from './rendering/canvas/utils';
+export type { GraphNodeAttributes, GraphEdgeAttributes } from './types/graphDataTypes';
+export { DataModelGraphNodeType } from './types/graphDataTypes';
+export type { Canvas } from './types/sigmaCustomRenderersTypes';

package/esm/features/graph/index.js

@@ -0,0 +1,17 @@
+// components
+export { SigmaGraphContainer } from './SigmaGraphContainer';
+export { ZoomSlider } from './ZoomSlider';
+export { DataModelGraph } from './DataModelGraph';
+// hooks
+export { useSigmaCustomRenderers } from './hooks/useSigmaCustomRenderers';
+export { useLoopRenderer } from './hooks/useLoopRenderer';
+export { useAnimatedGraphLayout } from './hooks/useAnimatedGraphLayout';
+export { useCircleLayout } from './hooks/useCircleLayout';
+// renderers
+export { drawTooltip } from './rendering/canvas/tooltip';
+export { NodeImageProgram } from './rendering/webgl/node.image';
+export { NodeBorderProgram } from './rendering/webgl/node.border';
+export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
+export { WebGLImageLoader } from './rendering/webgl/image';
+export { getCanvasMousePos } from './rendering/canvas/utils';
+export { DataModelGraphNodeType } from './types/graphDataTypes';

package/esm/features/graph/rendering/canvas/hover.d.ts

@@ -0,0 +1,2 @@
+import { GraphContainerSettings, GraphNodeAttributes } from '../../types/graphDataTypes';
+export declare const drawHover: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected'>, settings: GraphContainerSettings) => void;

package/esm/features/graph/rendering/canvas/hover.js

@@ -0,0 +1,6 @@
+import { drawLabel } from './label';
+import { drawTwoArcs } from './nodeArc';
+export var drawHover = function (context, data, settings) {
+    drawTwoArcs(context, data);
+    drawLabel(context, data, settings, { backgroundColor: '#FFF' });
+};