@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/hooks/useSelectedEntity.ts

@@ -0,0 +1,89 @@
+import {useEffect, useState, useRef, useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import {propEq} from 'ramda';
+import i18n from 'ui-i18n';
+import {Entity, getEntity, getRequestErrorMessage, HopsResponse} from '@reltio/mdm-sdk';
+import {ui} from '@reltio/mdm-module';
+import {useSafePromise} from '@reltio/components';
+
+import {GraphState} from '../types/graphDataTypes';
+
+const MAX_CACHE_SIZE = 50;
+
+const addToEntitiesMap = (entitiesMap, entity) => {
+    const newEntitiesMap = {
+        ...entitiesMap,
+        [entity?.uri]: entity
+    };
+    const keys = Object.keys(newEntitiesMap);
+    if (keys.length > MAX_CACHE_SIZE) {
+        delete newEntitiesMap[keys[0]];
+    }
+    return newEntitiesMap;
+};
+
+export const useSelectedEntity = (
+    entity: Entity,
+    data: HopsResponse
+): Pick<GraphState, 'selectedEntity' | 'onEntitySelect' | 'selectedEntityLoading'> => {
+    const safePromise = useSafePromise();
+    const dispatch = useDispatch();
+    const [selectedEntity, setSelectedEntity] = useState<Entity>(null);
+    const entitiesMap = useRef<Record<string, Entity>>({});
+    const [loading, setLoading] = useState(false);
+
+    const getCachedEntity = useCallback((uri) => {
+        const cachedEntity = entitiesMap.current[uri];
+        return cachedEntity
+            ? Promise.resolve(cachedEntity)
+            : getEntity(uri).then((entity) => {
+                entitiesMap.current = addToEntitiesMap(entitiesMap.current, entity);
+                return entity;
+            });
+    }, []);
+
+    const onEntitySelect = useCallback(
+        (selectedEntityUri) => {
+            const briefEntityInfo = data?.entities?.find(propEq('uri', selectedEntityUri));
+            if (briefEntityInfo) {
+                setSelectedEntity(briefEntityInfo);
+            }
+            setLoading(true);
+            safePromise(getCachedEntity(selectedEntityUri))
+                .then(setSelectedEntity)
+                .catch((error) => {
+                    dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))));
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        },
+        [dispatch, data, safePromise, getCachedEntity]
+    );
+
+    useEffect(() => {
+        if (entity?.uri) {
+            entitiesMap.current = addToEntitiesMap({}, entity);
+            onEntitySelect(entity.uri);
+        }
+    }, [entity?.uri]); //eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        const isActualSelectedEntity = data?.entities.find((entity) => selectedEntity?.uri === entity.uri);
+        if (!isActualSelectedEntity) {
+            if (entity?.uri) {
+                entitiesMap.current = addToEntitiesMap({}, entity);
+                onEntitySelect(entity.uri);
+            } else {
+                entitiesMap.current = {};
+                setSelectedEntity(null);
+            }
+        }
+    }, [data]); //eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        selectedEntityLoading: loading,
+        selectedEntity,
+        onEntitySelect
+    };
+};

package/src/hooks/useSelfRelationLoopsRenderer.ts

@@ -0,0 +1,52 @@
+import {useEffect, useRef} from 'react';
+import Graph from 'graphology';
+import {useSigma} from '@react-sigma/core';
+import {useSigmaCustomRenderers} from '../contexts/SigmaCustomRenderersContext';
+import {drawSelfRelationLoop} from '../rendering/canvas/selfRelationLoop';
+import {EdgeAttributes, NodeAttributes} from '../types/graphDataTypes';
+
+export const useSelfRelationLoopsRenderer = (graph: Graph) => {
+    const sigma = useSigma();
+    const {addRenderers: addCustomRenderers, canvases} = useSigmaCustomRenderers();
+    const selfRelationsPathsMap = useRef<Record<string, Path2D>>({});
+    const {selfRelationLoops: selfRelationLoopsCanvas} = canvases;
+
+    useEffect(() => {
+        addCustomRenderers({
+            selfRelationLoops: {
+                renderer: (context) => {
+                    graph.forEachEdge((edgeId, edgeData, sourceId) => {
+                        if (edgeData.loop) {
+                            delete selfRelationsPathsMap.current[edgeId];
+
+                            const edgeDisplayData = sigma.getEdgeDisplayData(edgeId) as EdgeAttributes;
+                            const sourceDisplayData = sigma.getNodeDisplayData(sourceId) as NodeAttributes;
+
+                            const isHidden = edgeDisplayData.hidden || sourceDisplayData.hidden;
+
+                            if (isHidden) return;
+
+                            const path = drawSelfRelationLoop(
+                                context,
+                                {
+                                    ...edgeDisplayData,
+                                    size: sigma.scaleSize(edgeDisplayData.size)
+                                },
+                                {
+                                    ...sourceDisplayData,
+                                    ...sigma.framedGraphToViewport(sourceDisplayData),
+                                    size: sigma.scaleSize(sourceDisplayData.size)
+                                }
+                            );
+
+                            selfRelationsPathsMap.current[edgeId] = path;
+                        }
+                    });
+                },
+                insertBefore: 'edges'
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+
+    return {selfRelationsPathsMap: selfRelationsPathsMap.current, selfRelationLoopsCanvas};
+};

package/src/hooks/useSigmaCustomRenderers.ts

@@ -0,0 +1,112 @@
+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';
+import {Canvases, Renderers} from '../types/sigmaCustomRenderersTypes';
+
+const createCanvasContext = (canvas: HTMLCanvasElement) => {
+    const contextOptions = {preserveDrawingBuffer: false, antialias: false};
+    return canvas.getContext('2d', contextOptions) as CanvasRenderingContext2D;
+};
+
+const createCanvas = (id: string) => {
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.setAttribute('class', `sigma-${id}`);
+    return canvas;
+};
+
+export const useSigmaCustomRenderers = () => {
+    const {container, sigma} = useSigmaContext();
+
+    const [renderers, setRenderers] = useState<Renderers>({});
+
+    const canvasesRef = useRef<Canvases>({});
+    const widthRef = useRef<number>(0);
+    const heightRef = useRef<number>(0);
+
+    const addRenderers = useCallback((renderers: Renderers) => {
+        setRenderers(mergeLeft(renderers));
+    }, []);
+
+    const resize = useCallback(() => {
+        widthRef.current = container.offsetWidth;
+        heightRef.current = container.offsetHeight;
+        const pixelRatio = getPixelRatio();
+
+        for (const id in canvasesRef.current) {
+            const {canvasElement: canvas, context} = canvasesRef.current[id];
+
+            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]);
+
+    const afterRender = useCallback(() => {
+        for (const id in renderers) {
+            const {context} = canvasesRef.current[id];
+            context.clearRect(0, 0, widthRef.current, heightRef.current);
+            const {renderer} = renderers[id];
+            renderer(context);
+        }
+    }, [renderers]);
+
+    const beforeRender = useCallback(() => {
+        for (const id in renderers) {
+            const shouldCreateCanvas = isEmptyValue(canvasesRef.current[id]);
+
+            if (!shouldCreateCanvas) continue;
+
+            const {insertBefore} = renderers[id];
+            const sigmaContainer = container.querySelector('.sigma-container');
+            const canvas = createCanvas(id);
+            const context = createCanvasContext(canvas);
+            sigmaContainer.insertBefore(canvas, sigmaContainer.querySelector(`.sigma-${insertBefore}`));
+            canvasesRef.current[id] = {canvasElement: canvas, context: context};
+            resize();
+        }
+    }, [renderers, container, resize]);
+
+    useEffect(() => {
+        sigma.addListener('beforeRender', beforeRender);
+        return () => {
+            sigma.off('beforeRender', beforeRender);
+        };
+    }, [sigma, beforeRender]);
+
+    useEffect(() => {
+        sigma.addListener('afterRender', afterRender);
+        return () => {
+            sigma.off('afterRender', afterRender);
+        };
+    }, [sigma, afterRender]);
+
+    useEffect(() => {
+        sigma.addListener('resize', resize);
+        return () => {
+            sigma.off('resize', resize);
+        };
+    }, [sigma, resize]);
+
+    useEffect(() => {
+        const canvases = canvasesRef.current;
+
+        return () => {
+            for (const id in canvases) {
+                const canvas = canvases[id];
+                canvas.canvasElement.remove();
+                delete canvases[id];
+            }
+        };
+    }, []);
+
+    return {addRenderers, canvases: canvasesRef.current};
+};

package/src/hooks/useTooltipRenderer.ts

@@ -0,0 +1,80 @@
+import {useEffect, useState, useRef} from 'react';
+import Graph from 'graphology';
+import {useRegisterEvents, useSigma} from '@react-sigma/core';
+import {useSigmaCustomRenderers} from '../contexts/SigmaCustomRenderersContext';
+import {getMousePos} from '../utils/graphLayout';
+import {EdgeAttributes, NodeAttributes} from '../types/graphDataTypes';
+import {drawTooltip} from '../rendering/canvas/tooltip';
+import {Canvas} from '../types/sigmaCustomRenderersTypes';
+
+type PointerCoordinates = {
+    x: number;
+    y: number;
+};
+
+export const useTooltipRenderer = (
+    graph: Graph,
+    selfRelationLoopsCanvas: Canvas,
+    selfRelationsPathsMap: Record<string, Path2D>
+) => {
+    const sigma = useSigma();
+    const registerEvents = useRegisterEvents();
+    const {addRenderers: addCustomRenderers} = useSigmaCustomRenderers();
+
+    const pointerCoordinates = useRef<PointerCoordinates>({x: 0, y: 0});
+
+    const [hoveredNormalEdge, setHoveredNormalEdge] = useState<string>(null);
+    const [hoveredSelfRelationEdge, setHoveredSelfRelationEdge] = useState<string>(null);
+
+    const hoveredEdge = hoveredNormalEdge || hoveredSelfRelationEdge;
+
+    useEffect(() => {
+        registerEvents({
+            enterEdge: ({edge}) => {
+                setHoveredNormalEdge(edge);
+            },
+            leaveEdge: () => {
+                setHoveredNormalEdge(null);
+            },
+            mousemove: (event) => {
+                pointerCoordinates.current.x = event.x;
+                pointerCoordinates.current.y = event.y;
+
+                if (!selfRelationLoopsCanvas) return;
+
+                const {context, canvasElement} = selfRelationLoopsCanvas;
+                const {x, y} = getMousePos(canvasElement, event.original);
+
+                for (const id in selfRelationsPathsMap) {
+                    const path = selfRelationsPathsMap[id];
+                    if (context.isPointInStroke(path, x, y)) {
+                        setHoveredSelfRelationEdge(id);
+                        break;
+                    } else {
+                        setHoveredSelfRelationEdge(null);
+                    }
+                }
+            }
+        });
+    }, [sigma, registerEvents, selfRelationLoopsCanvas, selfRelationsPathsMap]);
+
+    useEffect(() => {
+        addCustomRenderers({
+            tooltips: {
+                renderer: (context) => {
+                    graph.forEachEdge((edgeId, _edgeData, sourceId) => {
+                        const edgeDisplayData = sigma.getEdgeDisplayData(edgeId) as EdgeAttributes;
+                        const sourceDisplayData = sigma.getNodeDisplayData(sourceId) as NodeAttributes;
+                        if (!edgeDisplayData.hovered || sourceDisplayData.highlighted) return;
+                        const {x, y} = pointerCoordinates.current;
+                        const yOffset = 15;
+                        drawTooltip(context, x, y - yOffset, edgeDisplayData.relationLabel);
+                    });
+                },
+                insertBefore: 'mouse'
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+
+    return hoveredEdge;
+};

package/src/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {Store} from 'redux';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
+import StylesProvider from '@mui/styles/StylesProvider';
+import {ErrorPopup} from '@reltio/components';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import {GraphLayout} from '@reltio/mdm-sdk';
+import GraphPerspectiveView from './components/GraphPerspectiveView/GraphPerspectiveView';
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: 'graph',
+    disableGlobal: true,
+    seed: 'grp'
+});
+
+type Props = {
+    store: Store<unknown>;
+    graphTypeUri?: string;
+    graphLayout?: GraphLayout;
+};
+
+const GraphPerspective = ({store, graphTypeUri, graphLayout}: Props) => {
+    return (
+        <Provider store={store}>
+            <StylesProvider generateClassName={generateClassName}>
+                <LocalizationProvider dateAdapter={AdapterMoment}>
+                    <GraphPerspectiveView graphTypeUri={graphTypeUri} graphLayout={graphLayout} />
+                    <ErrorPopup showErrorFromStore={true} />
+                </LocalizationProvider>
+            </StylesProvider>
+        </Provider>
+    );
+};
+
+export default GraphPerspective;

package/src/rendering/canvas/__tests__/hover.spec.ts

@@ -0,0 +1,31 @@
+import {Settings} from 'sigma/settings';
+import {drawHover} from '../hover';
+import {drawLabel} from '../label';
+import {drawNodeBackground} from '../nodeBackground';
+
+jest.mock('../label', () => ({
+    drawLabel: jest.fn()
+}));
+
+jest.mock('../nodeBackground', () => ({
+    drawNodeBackground: jest.fn()
+}));
+
+describe('drawHover tests', () => {
+    const context = ({} as unknown) as CanvasRenderingContext2D;
+
+    const settings = {} as Settings;
+
+    const data = {
+        x: 1,
+        y: 1,
+        size: 12,
+        label: 'Test label'
+    };
+
+    it('should call drawNodeBackground and drawLabel', () => {
+        drawHover(context, data, settings);
+        expect(drawNodeBackground).toHaveBeenCalledWith(context, data, settings, true);
+        expect(drawLabel).toHaveBeenCalledWith(context, data, settings, false);
+    });
+});

package/src/rendering/canvas/__tests__/label.spec.ts

@@ -0,0 +1,64 @@
+import {Settings} from 'sigma/settings';
+import {drawLabel} from '../label';
+import {drawNodeBackground} from '../nodeBackground';
+
+jest.mock('../nodeBackground', () => ({
+    drawNodeBackground: jest.fn()
+}));
+
+describe('drawLabel tests', () => {
+    const context = ({
+        fillText: jest.fn()
+    } as unknown) as CanvasRenderingContext2D;
+
+    const settings = {
+        labelFont: 'Roboto',
+        labelSize: 12,
+        labelColor: {
+            color: 'rgba(0, 0, 0, 0.87)'
+        },
+        labelWeight: 'normal'
+    } as Settings;
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should not call context.fillText if label is empty', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: ''
+        };
+        drawLabel(context, data, settings);
+        expect(context.fillText).not.toHaveBeenCalled();
+    });
+
+    it('should call context.fillText if label is not empty', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+
+        drawLabel(context, data, settings, false);
+        expect(context.font).toBe('normal 12px Roboto');
+        expect(context.fillStyle).toBe(settings.labelColor.color);
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 24, 5);
+        expect(drawNodeBackground).not.toHaveBeenCalled();
+    });
+
+    it('should call drawNodeBackground to show background', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        drawLabel(context, data, settings, true);
+        expect(drawNodeBackground).toHaveBeenCalledWith(context, data, settings, false);
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 24, 5);
+    });
+});

package/src/rendering/canvas/__tests__/nodeBackground.spec.ts

@@ -0,0 +1,99 @@
+import {Settings} from 'sigma/settings';
+import {drawNodeBackground} from '../nodeBackground';
+
+describe('drawNodeBackground tests', () => {
+    const context = ({
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        arc: jest.fn(),
+        closePath: jest.fn(),
+        fill: jest.fn(),
+        measureText: jest.fn().mockReturnValue({
+            width: 100
+        }),
+        fillText: jest.fn(),
+        quadraticCurveTo: jest.fn()
+    } as unknown) as CanvasRenderingContext2D;
+
+    const settings = {
+        labelFont: 'Roboto',
+        labelSize: 12,
+        labelColor: {
+            color: 'rgba(0, 0, 0, 0.87)'
+        },
+        labelWeight: 'normal'
+    } as Settings;
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call context methods if label is string (hover behavior)', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        drawNodeBackground(context, data, settings, true);
+        expect(context.beginPath).toHaveBeenCalled();
+        expect(context.moveTo).toHaveBeenCalled();
+        expect(context.lineTo).toHaveBeenCalledTimes(3);
+        expect(context.quadraticCurveTo).toHaveBeenCalledTimes(4);
+        expect(context.arc).toHaveBeenCalled();
+        expect(context.closePath).toHaveBeenCalled();
+        expect(context.fill).toHaveBeenCalled();
+    });
+
+    it('should call context methods if label is not string (hover behavior)', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: null
+        };
+        drawNodeBackground(context, data, settings, true);
+        expect(context.beginPath).toHaveBeenCalled();
+        expect(context.moveTo).not.toHaveBeenCalled();
+        expect(context.lineTo).not.toHaveBeenCalled();
+        expect(context.quadraticCurveTo).not.toHaveBeenCalled();
+        expect(context.arc).toHaveBeenCalled();
+        expect(context.closePath).toHaveBeenCalled();
+        expect(context.fill).toHaveBeenCalled();
+    });
+
+    it('should call context methods if label is string and drawNodeArc is false', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        drawNodeBackground(context, data, settings, false);
+        expect(context.beginPath).toHaveBeenCalled();
+        expect(context.moveTo).toHaveBeenCalled();
+        expect(context.lineTo).toHaveBeenCalledTimes(3);
+        expect(context.quadraticCurveTo).toHaveBeenCalledTimes(4);
+        expect(context.arc).not.toHaveBeenCalled();
+        expect(context.closePath).toHaveBeenCalled();
+        expect(context.fill).toHaveBeenCalled();
+    });
+
+    it('should not call context methods if label is not string and drawNodeArc is false', () => {
+        const data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: null
+        };
+        drawNodeBackground(context, data, settings, false);
+        expect(context.beginPath).not.toHaveBeenCalled();
+        expect(context.moveTo).not.toHaveBeenCalled();
+        expect(context.lineTo).not.toHaveBeenCalled();
+        expect(context.quadraticCurveTo).not.toHaveBeenCalled();
+        expect(context.arc).not.toHaveBeenCalled();
+        expect(context.closePath).not.toHaveBeenCalled();
+        expect(context.fill).not.toHaveBeenCalled();
+    });
+});

package/src/rendering/canvas/__tests__/selfRelationLoop.spec.ts

@@ -0,0 +1,88 @@
+import {drawSelfRelationLoop} from '../selfRelationLoop';
+
+describe('Graph selfRelationLoop behavior', () => {
+    const context = {
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        bezierCurveTo: jest.fn(),
+        stroke: jest.fn(),
+        closePath: jest.fn(),
+        fill: jest.fn()
+    } as unknown as CanvasRenderingContext2D;
+
+    const pathInstance = {
+        moveTo: jest.fn(),
+        bezierCurveTo: jest.fn()
+    };
+
+    const edgeData = {
+        key: 'id_47',
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        hidden: false,
+        label: '',
+        type: 'line',
+        zIndex: 1
+    };
+
+    const sourceData = {
+        x: 20,
+        y: 30,
+        size: 1
+    };
+
+    beforeEach(() => {
+        jest.spyOn(window, 'Path2D').mockImplementation(() => {
+            return pathInstance as any;
+        });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call context methods for not arrow edge', () => {
+        drawSelfRelationLoop(context, edgeData, sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, sourceData.y);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(15.8, 30, 20, 34.2, sourceData.x, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+    });
+
+    it('should call context methods for arrow edge correctly', () => {
+        drawSelfRelationLoop(context, {...edgeData, type: 'arrow'}, sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, sourceData.y);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(sourceData.x, 34.2, 15.8, 30, 16.8, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+        expect(context.beginPath).toHaveBeenCalled();
+        expect(context.moveTo).toHaveBeenCalledWith(19, 30);
+        expect(context.lineTo).toHaveBeenNthCalledWith(1, 16.8, 29.12);
+        expect(context.lineTo).toHaveBeenNthCalledWith(2, 16.8, 30.88);
+        expect(context.lineTo).toHaveBeenNthCalledWith(3, 19, 30);
+        expect(context.closePath).toHaveBeenCalled();
+        expect(context.fill).toHaveBeenCalled();
+    });
+
+    it('should call context methods for doubleArrow edge correctly', () => {
+        drawSelfRelationLoop(context, {...edgeData, type: 'doubleArrow'}, sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(context.beginPath).toHaveBeenCalledTimes(2);
+        expect(context.fill).toHaveBeenCalledTimes(2);
+        expect(context.closePath).toHaveBeenCalledTimes(2);
+        expect(context.moveTo).toHaveBeenNthCalledWith(1, sourceData.x, 31);
+        expect(context.lineTo).toHaveBeenNthCalledWith(1, 19.119999999999997, 33.2);
+        expect(context.lineTo).toHaveBeenNthCalledWith(2, 20.880000000000003, 33.2);
+        expect(context.lineTo).toHaveBeenNthCalledWith(3, sourceData.x, 31);
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, 33.2);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(sourceData.x, 34.2, 15.8, 30, 16.8, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+        expect(context.moveTo).toHaveBeenNthCalledWith(2, 19, sourceData.y);
+        expect(context.lineTo).toHaveBeenNthCalledWith(4, 16.8, 29.12);
+        expect(context.lineTo).toHaveBeenNthCalledWith(5, 16.8, 30.88);
+        expect(context.lineTo).toHaveBeenNthCalledWith(6, 19, sourceData.y);
+    });
+});

package/src/rendering/canvas/__tests__/tooltip.spec.ts

@@ -0,0 +1,33 @@
+import {drawTooltip} from '../tooltip';
+
+describe('tests', () => {
+    const context = {
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        fill: jest.fn(),
+        measureText: jest.fn((text) => ({width: text.length * 5})),
+        arcTo: jest.fn(),
+        fillText: jest.fn()
+    } as unknown as CanvasRenderingContext2D;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('drawTooltip should work correctly', () => {
+        const label = 'label';
+        drawTooltip(context, 600, 600, label);
+        expect(context.beginPath).toHaveBeenCalledTimes(1);
+        expect(context.measureText).toHaveBeenCalledWith(label);
+        expect(context.moveTo).toHaveBeenCalledWith(579.5, 592);
+        expect(context.arcTo).toHaveBeenNthCalledWith(1, 579.5, 612, 583.5, 612, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(2, 620.5, 612, 620.5, 608, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(3, 620.5, 588, 616.5, 588, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(4, 579.5, 588, 579.5, 592, 4);
+        expect(context.fill).toHaveBeenCalled();
+        expect(context.fillText).toHaveBeenCalledWith(label, 600, 600);
+        expect(context.font).toBe('normal 10px Roboto');
+        expect(context.textAlign).toBe('center');
+        expect(context.textBaseline).toBe('middle');
+    });
+});