@reltio/components 1.4.1844 → 1.4.1845

package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.js

@@ -0,0 +1,37 @@
+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 } from 'react';
+import { useSigma } from '@react-sigma/core';
+import { drawTwoArcs } from '../../rendering/canvas/nodeArc';
+import { useSigmaCustomRenderers } from '../../hooks/useSigmaCustomRenderers';
+import { CUSTOM_EDGE_LABELS_CANVAS_NAME } from './useEdgeLabelsRenderer';
+export var useSelectedNodeRenderer = function (graph) {
+    var sigma = useSigma();
+    var addCustomRenderers = useSigmaCustomRenderers().addRenderers;
+    useEffect(function () {
+        addCustomRenderers({
+            selectedNodeBorder: {
+                renderer: function (context) {
+                    graph.forEachNode(function (nodeId) {
+                        var data = sigma.getNodeDisplayData(nodeId);
+                        if (!data.selected)
+                            return;
+                        var scaledData = __assign(__assign(__assign({}, data), sigma.framedGraphToViewport(data)), { size: sigma.scaleSize(data.size) });
+                        drawTwoArcs(context, scaledData);
+                    });
+                },
+                // we need to have "selected" node renderer layer before 'labels' layer to have labels of other nodes on top of it in case of overlapping
+                insertBefore: CUSTOM_EDGE_LABELS_CANVAS_NAME
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+};

package/esm/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.d.ts

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

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

@@ -0,0 +1,61 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useSigma } from '@react-sigma/core';
+import { useSigmaCustomRenderers } from '../../hooks/useSigmaCustomRenderers';
+import { useSelectedNodeRenderer } from './useSelectedNodeRenderer';
+import { createDefaultGraph } from './defaultGraph.test-data';
+import { drawTwoArcs } from '../../rendering/canvas/nodeArc';
+jest.mock('@react-sigma/core');
+jest.mock('../../hooks/useSigmaCustomRenderers', function () { return ({
+    useSigmaCustomRenderers: jest.fn()
+}); });
+jest.mock('../../rendering/canvas/nodeArc', function () { return ({
+    drawTwoArcs: jest.fn().mockImplementation(jest.requireActual('../../rendering/canvas/nodeArc').drawTwoArcs)
+}); });
+describe('useSelectedNodeRenderer tests', function () {
+    var graph;
+    var setUp = function (graphArg) {
+        graph = graphArg || createDefaultGraph();
+        return renderHook(useSelectedNodeRenderer, {
+            initialProps: graph
+        });
+    };
+    var getNodeDisplayData = jest.fn().mockImplementation(function (nodeId) { return graph.getNodeAttributes(nodeId); });
+    var renderers = {};
+    var addRenderers = function (rendererObject) { return Object.assign(renderers, rendererObject); };
+    beforeEach(function () {
+        useSigmaCustomRenderers.mockReturnValue({
+            addRenderers: addRenderers
+        });
+        useSigma.mockReturnValue({
+            getNodeDisplayData: getNodeDisplayData,
+            framedGraphToViewport: function (x) { return x; },
+            scaleSize: function (x) { return x; }
+        });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var getRenderer = function () { return renderers.selectedNodeBorder; };
+    it('should not draw 2 arcs for regular node', function () {
+        setUp();
+        var renderer = getRenderer().renderer;
+        var canvas = document.createElement('canvas');
+        var canvasContext = canvas.getContext('2d');
+        act(function () {
+            renderer(canvasContext);
+        });
+        expect(drawTwoArcs).not.toHaveBeenCalled();
+    });
+    it('should draw 2 arcs for selected node', function () {
+        var graph = createDefaultGraph();
+        graph.setNodeAttribute('hcp', 'selected', true);
+        setUp(graph);
+        var renderer = getRenderer().renderer;
+        var canvas = document.createElement('canvas');
+        var canvasContext = canvas.getContext('2d');
+        act(function () {
+            renderer(canvasContext);
+        });
+        expect(drawTwoArcs).toHaveBeenCalledTimes(1);
+    });
+});

package/esm/features/graph/DataModelGraph/icons/interaction.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const interactionIcon = "\n<svg id=\"123\" width=\"500px\" height=\"500px\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"#E7EAED\" stroke=\"#E7EAED\" stroke-width=\"0\"/>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M26 26.1458C26.1784 26.3176 26.3127 26.5349 26.3841 26.7791L28.7321 28.1346C28.9712 28.2727 29.0531 28.5785 28.9151 28.8177L28.4151 29.6837C28.277 29.9228 27.9712 30.0048 27.7321 29.8667L25.4564 28.5529C25.313 28.6007 25.1595 28.6266 25 28.6266C24.8405 28.6266 24.687 28.6007 24.5436 28.5529L22.2679 29.8667C22.0288 30.0048 21.723 29.9228 21.5849 29.6837L21.0849 28.8177C20.9469 28.5785 21.0288 28.2727 21.2679 28.1346L23.6159 26.7791C23.6873 26.5349 23.8216 26.3176 24 26.1458V23.8846C24 23.6085 24.2239 23.3846 24.5 23.3846H25.5C25.7761 23.3846 26 23.6085 26 23.8846V26.1458ZM24.8 22.3846C23.1431 22.3846 21.8 21.0415 21.8 19.3846C21.8 17.7278 23.1431 16.3846 24.8 16.3846C26.4569 16.3846 27.8 17.7278 27.8 19.3846C27.8 21.0415 26.4569 22.3846 24.8 22.3846ZM18 34.3846C16.3431 34.3846 15 33.0415 15 31.3846C15 29.7278 16.3431 28.3846 18 28.3846C19.6569 28.3846 21 29.7278 21 31.3846C21 33.0415 19.6569 34.3846 18 34.3846ZM32 34.3846C30.3431 34.3846 29 33.0415 29 31.3846C29 29.7278 30.3431 28.3846 32 28.3846C33.6569 28.3846 35 29.7278 35 31.3846C35 33.0415 33.6569 34.3846 32 34.3846Z\" fill=\"#37474F\"/>\n</svg>\n";

package/esm/features/graph/DataModelGraph/icons/interaction.inline.svg.js

@@ -0,0 +1 @@
+export var interactionIcon = "\n<svg id=\"123\" width=\"500px\" height=\"500px\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"#E7EAED\" stroke=\"#E7EAED\" stroke-width=\"0\"/>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M26 26.1458C26.1784 26.3176 26.3127 26.5349 26.3841 26.7791L28.7321 28.1346C28.9712 28.2727 29.0531 28.5785 28.9151 28.8177L28.4151 29.6837C28.277 29.9228 27.9712 30.0048 27.7321 29.8667L25.4564 28.5529C25.313 28.6007 25.1595 28.6266 25 28.6266C24.8405 28.6266 24.687 28.6007 24.5436 28.5529L22.2679 29.8667C22.0288 30.0048 21.723 29.9228 21.5849 29.6837L21.0849 28.8177C20.9469 28.5785 21.0288 28.2727 21.2679 28.1346L23.6159 26.7791C23.6873 26.5349 23.8216 26.3176 24 26.1458V23.8846C24 23.6085 24.2239 23.3846 24.5 23.3846H25.5C25.7761 23.3846 26 23.6085 26 23.8846V26.1458ZM24.8 22.3846C23.1431 22.3846 21.8 21.0415 21.8 19.3846C21.8 17.7278 23.1431 16.3846 24.8 16.3846C26.4569 16.3846 27.8 17.7278 27.8 19.3846C27.8 21.0415 26.4569 22.3846 24.8 22.3846ZM18 34.3846C16.3431 34.3846 15 33.0415 15 31.3846C15 29.7278 16.3431 28.3846 18 28.3846C19.6569 28.3846 21 29.7278 21 31.3846C21 33.0415 19.6569 34.3846 18 34.3846ZM32 34.3846C30.3431 34.3846 29 33.0415 29 31.3846C29 29.7278 30.3431 28.3846 32 28.3846C33.6569 28.3846 35 29.7278 35 31.3846C35 33.0415 33.6569 34.3846 32 34.3846Z\" fill=\"#37474F\"/>\n</svg>\n";

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

@@ -0,0 +1 @@
+export { DataModelGraph } from './DataModelGraph';

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

@@ -0,0 +1 @@
+export { DataModelGraph } from './DataModelGraph';

package/esm/features/graph/DataModelGraph/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "graph" | "rightBottomControls" | "zoomSlider">;

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

@@ -0,0 +1,23 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    wrapper: {
+        height: '100%',
+        position: 'relative',
+        background: 'rgb(245, 245, 245)'
+    },
+    graph: {
+        height: '100%'
+    },
+    rightBottomControls: {
+        position: 'absolute',
+        zIndex: 100,
+        right: '18px',
+        bottom: '16px',
+        display: 'flex',
+        width: '200px'
+    },
+    zoomSlider: {
+        flexGrow: 1,
+        marginRight: '8px'
+    }
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+export declare const SigmaCustomRenderersContainer: ({ children }: Props) => JSX.Element;
+export {};

package/esm/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useSigmaCustomRenderers } from '../hooks/useSigmaCustomRenderers';
+import { SigmaCustomRenderersContext } from '../contexts/SigmaCustomRenderersContext';
+export var SigmaCustomRenderersContainer = function (_a) {
+    var children = _a.children;
+    var sigmaCustomRenderers = useSigmaCustomRenderers();
+    return (React.createElement(SigmaCustomRenderersContext.Provider, { value: sigmaCustomRenderers }, children));
+};

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

@@ -0,0 +1 @@
+export { SigmaCustomRenderersContainer } from './SigmaCustomRenderersContainer';

package/esm/features/graph/SigmaCustomRenderersContainer/index.js

@@ -0,0 +1 @@
+export { SigmaCustomRenderersContainer } from './SigmaCustomRenderersContainer';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import { GraphContainerSettings } from '../types/graphDataTypes';
+type Props = {
+    children?: React.ReactElement;
+    initialSettings?: GraphContainerSettings;
+};
+export declare const SigmaGraphContainer: ({ children, initialSettings: initialSettingsProp }: Props) => JSX.Element;
+export {};

package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.js

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { MultiGraph } from 'graphology';
+import { mergeDeepRight } from 'ramda';
+import { SigmaContainer } from '@react-sigma/core';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import { createNodeCompoundProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { createEdgeCompoundProgram } from 'sigma/rendering/webgl/programs/common/edge';
+import LineEdgeProgram from 'sigma/rendering/webgl/programs/edge';
+import { SigmaCustomRenderersContainer } from '../SigmaCustomRenderersContainer';
+import { SigmaGraphResizer } from '../SigmaGraphResizer';
+import { drawHover } from '../rendering/canvas/hover';
+import { drawLabel } from '../rendering/canvas/label';
+import { NodeDashedBorderProgram } from '../rendering/webgl/node.dashed.border';
+import { NodeImageProgram } from '../rendering/webgl/node.image';
+import EdgeArrowHeadProgram from '../rendering/webgl/edge.arrowHead';
+import EdgeReversedArrowHeadProgram from '../rendering/webgl/edge.reversedArrowHead';
+import EdgeClampedProgram from '../rendering/webgl/edge.clamped';
+import DashedEdgeProgram from '../rendering/webgl/edge.dashed';
+export var SigmaGraphContainer = function (_a) {
+    var children = _a.children, initialSettingsProp = _a.initialSettings;
+    var initialSettings = useMemo(function () {
+        return mergeDeepRight({
+            allowInvalidContainer: true,
+            defaultNodeType: 'image',
+            hoverRenderer: drawHover,
+            labelRenderer: drawLabel,
+            nodeProgramClasses: {
+                image: createNodeCompoundProgram([NodeImageProgram, NodeDashedBorderProgram])
+            },
+            edgeProgramClasses: {
+                line: LineEdgeProgram,
+                arrow: createEdgeCompoundProgram([EdgeClampedProgram, EdgeArrowHeadProgram]),
+                doubleArrow: createEdgeCompoundProgram([
+                    EdgeClampedProgram,
+                    EdgeArrowHeadProgram,
+                    EdgeReversedArrowHeadProgram
+                ]),
+                dashed: DashedEdgeProgram
+            },
+            labelFont: 'Roboto',
+            labelSize: 13,
+            labelColor: {
+                color: 'rgba(0, 0, 0, 0.87)',
+                attribute: 'labelColor'
+            },
+            secondaryLabelColor: {
+                color: 'rgba(0, 0, 0, 0.54)',
+                attribute: 'secondaryLabelColor'
+            }
+        }, initialSettingsProp || {});
+    }, [initialSettingsProp]);
+    return (React.createElement(SigmaContainer, { graph: MultiGraph, style: { background: 'transparent' }, settings: initialSettings },
+        React.createElement(SigmaCustomRenderersContainer, null,
+            React.createElement(SigmaGraphResizer, null),
+            children)));
+};

package/esm/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.d.ts

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { SigmaContainer } from '@react-sigma/core';
+import { MultiGraph } from 'graphology';
+import { SigmaGraphContainer } from './SigmaGraphContainer';
+import { SigmaCustomRenderersContainer } from '../SigmaCustomRenderersContainer';
+var children = React.createElement("div", { className: "children" }, "children");
+var setUp = function () { return shallow(React.createElement(SigmaGraphContainer, null, children)); };
+describe('SigmaGraphContainer behavior', function () {
+    it('should render SigmaContainer with passed children', function () {
+        var component = setUp();
+        expect(component.find(SigmaContainer)).toHaveLength(1);
+        expect(component.find(SigmaContainer).prop('graph')).toBe(MultiGraph);
+        expect(component.find(SigmaContainer).find(SigmaCustomRenderersContainer).find('.children')).toHaveLength(1);
+    });
+    it('should render SigmaContainer with initialSettings', function () {
+        var component = setUp();
+        expect(component.find(SigmaContainer)).toHaveLength(1);
+        expect(component.find(SigmaContainer).prop('settings')).not.toBeUndefined();
+    });
+});

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

@@ -0,0 +1 @@
+export { SigmaGraphContainer } from './SigmaGraphContainer';

package/esm/features/graph/SigmaGraphContainer/index.js

@@ -0,0 +1 @@
+export { SigmaGraphContainer } from './SigmaGraphContainer';

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

@@ -0,0 +1 @@
+export declare const SigmaGraphResizer: () => JSX.Element;

package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.js

@@ -0,0 +1,10 @@
+import React, { useCallback } from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import { useSigma } from '@react-sigma/core';
+export var SigmaGraphResizer = function () {
+    var sigma = useSigma();
+    var onResize = useCallback(function () {
+        sigma.refresh();
+    }, [sigma]);
+    return React.createElement(ReactResizeDetector, { handleWidth: true, onResize: onResize });
+};

package/esm/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.d.ts

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

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

@@ -0,0 +1,32 @@
+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 React from 'react';
+import { shallow } from 'enzyme';
+import ReactResizeDetector from 'react-resize-detector';
+import { useSigma } from '@react-sigma/core';
+import { SigmaGraphResizer } from './SigmaGraphResizer';
+jest.mock('@react-sigma/core', function () { return (__assign(__assign({}, jest.requireActual('@react-sigma/core')), { useSigma: jest.fn().mockReturnValue({
+        refresh: jest.fn()
+    }) })); });
+var setUp = function () { return shallow(React.createElement(SigmaGraphResizer, null)); };
+describe('SigmaGraphResizer behavior', function () {
+    it('should render ReactResizeDetector', function () {
+        var component = setUp();
+        expect(component.find(ReactResizeDetector)).toHaveLength(1);
+    });
+    it('should refresh sigma instance on resize', function () {
+        var component = setUp();
+        expect(useSigma().refresh).not.toHaveBeenCalled();
+        component.find(ReactResizeDetector).prop('onResize')();
+        expect(useSigma().refresh).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export { SigmaGraphResizer } from './SigmaGraphResizer';

package/esm/features/graph/SigmaGraphResizer/index.js

@@ -0,0 +1 @@
+export { SigmaGraphResizer } from './SigmaGraphResizer';

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

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    max: number;
+    min: number;
+};
+export declare const ZoomSlider: ({ className, max, min }: Props) => JSX.Element;
+export {};

package/esm/features/graph/ZoomSlider/ZoomSlider.js

@@ -0,0 +1,83 @@
+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 __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;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import { clamp } from 'ramda';
+import { useCamera, useRegisterEvents, useSigma, useSetSettings } from '@react-sigma/core';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import Slider, { SliderThumb } from '@mui/material/Slider';
+import IconButton from '@mui/material/IconButton';
+import { useStyles } from './styles';
+var percentsToRatio = function (percent) { return Math.pow(100 / percent, 2); };
+var ratioToPercents = function (ratio) { return 100 / Math.sqrt(ratio); };
+var ZoomSliderThumb = function (props) {
+    var children = props.children, other = __rest(props, ["children"]);
+    var styles = useStyles();
+    return (React.createElement(SliderThumb, __assign({}, other),
+        children,
+        React.createElement(RemoveIcon, { className: classnames(styles.icon, styles.thumbIcon) })));
+};
+export var ZoomSlider = function (_a) {
+    var className = _a.className, max = _a.max, min = _a.min;
+    var styles = useStyles();
+    var setSettings = useSetSettings();
+    var registerEvents = useRegisterEvents();
+    var camera = useSigma().getCamera();
+    var _b = useCamera({ factor: 1.2 }), zoomIn = _b.zoomIn, zoomOut = _b.zoomOut;
+    var _c = useState(clamp(min, max, ratioToPercents(camera.getState().ratio))), value = _c[0], setValue = _c[1];
+    var maxCameraRatio = useMemo(function () { return (min > 0 ? percentsToRatio(min) : null); }, [min]);
+    var minCameraRatio = useMemo(function () { return (max > 0 ? percentsToRatio(max) : null); }, [max]);
+    useEffect(function () {
+        setSettings({
+            maxCameraRatio: maxCameraRatio,
+            minCameraRatio: minCameraRatio
+        });
+        return function () {
+            setSettings({
+                maxCameraRatio: null,
+                minCameraRatio: null
+            });
+        };
+    }, [setSettings, minCameraRatio, maxCameraRatio]);
+    useEffect(function () {
+        registerEvents({
+            updated: function (event) { return setValue(ratioToPercents(event.ratio)); }
+        });
+    }, [registerEvents]);
+    var handleChange = function (event, newValue) {
+        return camera.setState({ ratio: camera.getBoundedRatio(percentsToRatio(newValue)) });
+    };
+    return (React.createElement("div", { className: classnames(styles.container, className) },
+        React.createElement(IconButton, { className: styles.minButton, onClick: function () { return zoomOut(); }, size: "large" },
+            React.createElement(RemoveIcon, { className: styles.icon })),
+        React.createElement(Slider, { slots: {
+                thumb: ZoomSliderThumb
+            }, slotProps: {
+                thumb: {
+                    className: styles.thumb
+                }
+            }, classes: { root: styles.sliderRoot, rail: styles.rail }, track: false, value: value, min: min, max: max, onChange: handleChange }),
+        React.createElement(IconButton, { className: styles.maxButton, onClick: function () { return zoomIn(); }, size: "large" },
+            React.createElement(AddIcon, { className: styles.icon }))));
+};

package/esm/features/graph/ZoomSlider/ZoomSlider.test.d.ts

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

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

@@ -0,0 +1,78 @@
+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 React from 'react';
+import { shallow, mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { useCamera, useSetSettings, useRegisterEvents } from '@react-sigma/core';
+import { ZoomSlider } from './ZoomSlider';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import Slider from '@mui/material/Slider';
+jest.mock('@react-sigma/core', function () { return (__assign(__assign({}, jest.requireActual('@react-sigma/core')), { useCamera: jest.fn().mockReturnValue({
+        zoomOut: jest.fn(),
+        zoomIn: jest.fn()
+    }), useSigma: jest.fn().mockReturnValue({
+        getCamera: function () { return ({
+            setState: function () { },
+            getState: function () { return ({ ratio: 1 }); },
+            getBoundedRatio: jest.fn()
+        }); }
+    }), useSetSettings: jest.fn().mockReturnValue(jest.fn()), useRegisterEvents: jest.fn().mockReturnValue(jest.fn()) })); });
+describe('ZoomSlider tests', function () {
+    it('should render main parts', function () {
+        var component = shallow(React.createElement(ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        expect(component.find(IconButton)).toHaveLength(2);
+        expect(component.find(AddIcon)).toHaveLength(1);
+        expect(component.find(RemoveIcon)).toHaveLength(1);
+        var slider = component.find(Slider);
+        expect(slider).toHaveLength(1);
+        expect(slider.props()).toEqual({
+            slots: { thumb: expect.any(Function) },
+            classes: { root: 'sliderRoot', rail: 'rail' },
+            slotProps: { thumb: { className: 'thumb' } },
+            track: false,
+            value: 100,
+            min: 30,
+            max: 300,
+            onChange: expect.any(Function)
+        });
+    });
+    it('should call registerEvents and setSettings', function () {
+        var setSettings = useSetSettings();
+        var registerEvents = useRegisterEvents();
+        mount(React.createElement(ZoomSlider, { className: "testClass", min: 50, max: 200 }));
+        expect(setSettings).toHaveBeenCalledWith({
+            maxCameraRatio: 4,
+            minCameraRatio: 0.25
+        });
+        expect(registerEvents).toHaveBeenCalledWith({
+            updated: expect.any(Function)
+        });
+    });
+    it('should call zoomOut on min button click', function () {
+        var component = shallow(React.createElement(ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        var zoomOut = useCamera().zoomOut;
+        act(function () {
+            component.find(IconButton).at(0).simulate('click');
+        });
+        expect(zoomOut).toHaveBeenCalled();
+    });
+    it('should call zoomIn on max button click', function () {
+        var component = shallow(React.createElement(ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        var zoomIn = useCamera().zoomIn;
+        act(function () {
+            component.find(IconButton).at(1).simulate('click');
+        });
+        expect(zoomIn).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export { ZoomSlider } from './ZoomSlider';

package/esm/features/graph/ZoomSlider/index.js

@@ -0,0 +1 @@
+export { ZoomSlider } from './ZoomSlider';

package/esm/features/graph/ZoomSlider/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "icon" | "thumb" | "maxButton" | "minButton" | "thumbIcon" | "rail" | "sliderRoot">;

package/esm/features/graph/ZoomSlider/styles.js

@@ -0,0 +1,60 @@
+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 { makeStyles } from '@mui/styles';
+var boxShadow = '0 1px 1px rgba(0,0,0,0.14), 0 2px 1px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.2)';
+var buttonStyle = {
+    background: '#FFFFFF',
+    boxShadow: boxShadow,
+    width: '28px',
+    height: '28px'
+};
+export var useStyles = makeStyles({
+    container: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    maxButton: __assign(__assign({}, buttonStyle), { borderRadius: '2px 4px 4px 2px' }),
+    minButton: __assign(__assign({}, buttonStyle), { borderRadius: '4px 2px 2px 4px' }),
+    thumb: {
+        boxShadow: boxShadow,
+        borderRadius: '2px',
+        width: '8px',
+        height: '28px',
+        marginLeft: '5px',
+        color: 'rgba(0,0,0,0.54)',
+        backgroundColor: '#FFFFFF',
+        '&.MuiSlider-thumb.Mui-focusVisible, &:hover': {
+            boxShadow: boxShadow
+        },
+        '&:before': {
+            boxShadow: 'none'
+        }
+    },
+    thumbIcon: {
+        transform: 'rotate(90deg)'
+    },
+    icon: {
+        width: '18px',
+        height: '18px'
+    },
+    rail: {
+        opacity: 1,
+        height: '4px',
+        paddingRight: '10px',
+        marginTop: '1px'
+    },
+    sliderRoot: {
+        color: '#EDEDED',
+        marginRight: '10px',
+        height: '2px'
+    }
+});

package/esm/features/graph/contexts/SigmaCustomRenderersContext.d.ts

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

package/esm/features/graph/contexts/SigmaCustomRenderersContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+import { noop } from '../../../core';
+export var SigmaCustomRenderersContext = createContext({
+    addRenderers: noop,
+    canvases: {}
+});
+export var useSigmaCustomRenderers = function () {
+    var sigmaCustomRenderers = useContext(SigmaCustomRenderersContext);
+    return sigmaCustomRenderers;
+};
+SigmaCustomRenderersContext.displayName = 'SigmaCustomRenderersContext';

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

@@ -0,0 +1,13 @@
+import Graph from 'graphology';
+import { GraphologyLayout, GraphologyWorkerLayoutConstructor } from '../types/graphDataTypes';
+type Props = {
+    graph: Graph;
+    syncLayout?: GraphologyLayout<Record<string, unknown>>;
+    workerLayout?: GraphologyWorkerLayoutConstructor<Record<string, unknown>>;
+    layoutSettings?: Record<string, unknown>;
+    initialCameraRatio?: number;
+    animationDuration?: number;
+    relayoutTrigger?: unknown;
+};
+export declare const useAnimatedGraphLayout: ({ graph, syncLayout, workerLayout, layoutSettings, initialCameraRatio, animationDuration, relayoutTrigger }: Props) => void;
+export {};

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

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useLoadGraph, useSigma } from '@react-sigma/core';
+import { animateNodes } from 'sigma/utils/animate';
+var WORKER_LAYOUT_ANIMATION_DURATION = 5000;
+var SYNC_LAYOUT_ANIMATION_DURATION = 1000;
+export var useAnimatedGraphLayout = function (_a) {
+    var graph = _a.graph, syncLayout = _a.syncLayout, workerLayout = _a.workerLayout, layoutSettings = _a.layoutSettings, _b = _a.initialCameraRatio, initialCameraRatio = _b === void 0 ? 1.2 : _b, animationDuration = _a.animationDuration, relayoutTrigger = _a.relayoutTrigger;
+    var sigma = useSigma();
+    var loadGraph = useLoadGraph();
+    useEffect(function () {
+        sigma.getCamera().setState({ ratio: initialCameraRatio });
+    }, [graph, sigma, initialCameraRatio]);
+    useEffect(function () {
+        loadGraph(graph);
+        if (syncLayout) {
+            var positions = syncLayout(sigma.getGraph(), layoutSettings);
+            animateNodes(sigma.getGraph(), positions, { duration: animationDuration || SYNC_LAYOUT_ANIMATION_DURATION });
+        }
+        if (workerLayout) {
+            var worker_1 = new workerLayout(sigma.getGraph(), layoutSettings);
+            worker_1.start();
+            var timer_1 = setTimeout(function () {
+                worker_1.stop();
+            }, animationDuration || WORKER_LAYOUT_ANIMATION_DURATION);
+            return function () {
+                clearTimeout(timer_1);
+                worker_1.kill();
+            };
+        }
+    }, [graph, layoutSettings, loadGraph, sigma, syncLayout, workerLayout, animationDuration, relayoutTrigger]);
+};