@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/hooks/__tests__/useTooltipRenderer.test.ts

@@ -0,0 +1,289 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import {useSigma, useRegisterEvents} from '@react-sigma/core';
+import {MultiGraph} from 'graphology';
+import {HopsResponse, RelationTypeDirection} from '@reltio/mdm-sdk';
+import {drawTooltip} from '../../rendering/canvas/tooltip';
+import {useSigmaCustomRenderers} from '../../contexts/SigmaCustomRenderersContext';
+import {fillGraphWithHopsResponse} from '../../utils/graph';
+import {useTooltipRenderer} from '../useTooltipRenderer';
+import {getMousePos} from '../../utils/graphLayout';
+
+jest.mock('@react-sigma/core');
+jest.mock('../../contexts/SigmaCustomRenderersContext');
+jest.mock('../../rendering/canvas/tooltip');
+jest.mock('../../utils/graphLayout');
+
+const data: HopsResponse = {
+    entities: [
+        {uri: 'node1', type: 'hcp', traversedRelations: 2, untraversedRelations: 0},
+        {uri: 'node2', type: 'hcp', traversedRelations: 3, untraversedRelations: 2},
+        {uri: 'node3', type: 'hca', traversedRelations: 1, untraversedRelations: 0}
+    ],
+    relations: [
+        {
+            uri: 'r1',
+            type: 'relType1',
+            startObject: {
+                objectURI: 'node1'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r2',
+            type: 'relType2',
+            startObject: {
+                objectURI: 'node2'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r3',
+            type: 'relType3',
+            startObject: {
+                objectURI: 'node2'
+            },
+            endObject: {
+                objectURI: 'node3'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r4',
+            type: 'relType4',
+            startObject: {
+                objectURI: 'node3'
+            },
+            endObject: {
+                objectURI: 'node3'
+            },
+            direction: RelationTypeDirection.directed
+        }
+    ]
+};
+
+const edges = {
+    r1: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType1',
+        direction: RelationTypeDirection.directed,
+        relationLabel: 'relation label 1'
+    },
+    r2: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: true,
+        hovered: true,
+        relationTypeUri: 'relType2',
+        direction: RelationTypeDirection.directed,
+        relationLabel: 'relation label 2'
+    },
+    r3: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType3',
+        direction: RelationTypeDirection.directed,
+        relationLabel: 'relation label 3'
+    },
+    r4: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        hovered: true,
+        relationTypeUri: 'relType4',
+        direction: RelationTypeDirection.directed,
+        relationLabel: 'relation label 4'
+    }
+};
+
+const 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,
+        highlighted: true
+    }
+};
+
+const startHook = (graph, selfRelationLoopsCanvas?, selfRelationsPathsMap?) =>
+    renderHook(
+        ({graph, selfRelationLoopsCanvas, selfRelationsPathsMap}) =>
+            useTooltipRenderer(graph, selfRelationLoopsCanvas, selfRelationsPathsMap),
+        {initialProps: {graph, selfRelationLoopsCanvas, selfRelationsPathsMap}}
+    );
+
+const createGraph = () => {
+    const graph = new MultiGraph();
+    fillGraphWithHopsResponse(graph, data);
+    return graph;
+};
+
+describe('useTooltipRenderer tests', () => {
+    const getEdgeDisplayData = jest.fn().mockImplementation((edgeId) => edges[edgeId]);
+    const getNodeDisplayData = jest.fn().mockImplementation((nodeId) => nodes[nodeId]);
+
+    const addRenderers = jest.fn();
+    const registerEvents = jest.fn();
+
+    beforeEach(() => {
+        (useSigmaCustomRenderers as jest.Mock).mockReturnValue({addRenderers});
+        (useSigma as jest.Mock).mockReturnValue({getEdgeDisplayData, getNodeDisplayData});
+        (useRegisterEvents as jest.Mock).mockReturnValue(registerEvents);
+        (getMousePos as jest.Mock).mockImplementation((_canvas, event) => ({x: event.clientX, y: event.clientY}));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const getTooltipsRenderer = () => addRenderers.mock.calls[addRenderers.mock.calls.length - 1][0].tooltips;
+    const getEnterEdge = () => registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].enterEdge;
+    const getLeaveEdge = () => registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].leaveEdge;
+    const getMousemove = () => registerEvents.mock.calls[registerEvents.mock.calls.length - 1][0].mousemove;
+
+    it('enterEdge event should work correctly', () => {
+        const graph = createGraph();
+        const {result} = startHook(graph);
+        const enterEdge = getEnterEdge();
+
+        expect(result.current).toBe(null);
+
+        act(() => {
+            enterEdge({edge: 'r1'});
+        });
+
+        expect(result.current).toBe('r1');
+    });
+
+    it('leaveEdge event should work correctly', () => {
+        const graph = createGraph();
+        const {result} = startHook(graph);
+        const enterEdge = getEnterEdge();
+        const leaveEdge = getLeaveEdge();
+
+        act(() => {
+            enterEdge({edge: 'r1'});
+        });
+
+        expect(result.current).toBe('r1');
+
+        act(() => {
+            leaveEdge();
+        });
+
+        expect(result.current).toBe(null);
+    });
+
+    it('mousemove event should work correctly if cursor over self relation loop', () => {
+        const selfRelationsPathsMap = {
+            r1: 'path1',
+            r2: 'path2'
+        };
+
+        const selfRelationLoopsCanvas = {
+            canvasElement: 'canvas',
+            context: {
+                isPointInStroke: jest.fn((val) => (val === 'path2' ? true : false))
+            }
+        };
+
+        const graph = createGraph();
+        const {result} = startHook(graph, selfRelationLoopsCanvas, selfRelationsPathsMap);
+        const mousemove = getMousemove();
+
+        expect(result.current).toBe(null);
+
+        act(() => {
+            const event = {x: 100, y: 100, original: {clientX: 120, clientY: 120}};
+            mousemove(event);
+        });
+
+        expect(result.current).toBe('r2');
+    });
+
+    it('mousemove event should work correctly if cursor not over self relation loop', () => {
+        const selfRelationsPathsMap = {
+            r1: 'path1',
+            r2: 'path2'
+        };
+
+        const selfRelationLoopsCanvas = {
+            canvasElement: 'canvas',
+            context: {
+                isPointInStroke: jest.fn().mockReturnValue(false)
+            }
+        };
+
+        const graph = createGraph();
+        const {result} = startHook(graph, selfRelationLoopsCanvas, selfRelationsPathsMap);
+        const mousemove = getMousemove();
+
+        expect(result.current).toBe(null);
+
+        act(() => {
+            const event = {x: 100, y: 100, original: {clientX: 120, clientY: 120}};
+            mousemove(event);
+        });
+
+        expect(result.current).toBe(null);
+    });
+
+    it('mousemove event should work correctly if selfRelationLoopsCanvas does not exists', () => {
+        const graph = createGraph();
+        const {result} = startHook(graph);
+        const mousemove = getMousemove();
+
+        act(() => {
+            const event = {x: 100, y: 100, original: {clientX: 120, clientY: 120}};
+            mousemove(event);
+        });
+
+        expect(getMousePos).toHaveBeenCalledTimes(0);
+        expect(result.current).toBe(null);
+    });
+
+    it('should draw tooltip correctly', () => {
+        const graph = createGraph();
+
+        startHook(graph);
+
+        const {renderer} = getTooltipsRenderer();
+        const mousemove = getMousemove();
+
+        act(() => {
+            mousemove({x: 100, y: 100, original: {clientX: 120, clientY: 120}});
+        });
+
+        act(() => {
+            renderer('context');
+        });
+
+        expect(drawTooltip).toHaveBeenCalledTimes(1);
+        expect(drawTooltip).toHaveBeenCalledWith('context', 100, 85, 'relation label 2');
+    });
+});

package/src/hooks/useGraphLayout.ts

@@ -0,0 +1,308 @@
+import {useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
+import {memoizeWith} from 'ramda';
+import {useLoadGraph, useRegisterEvents, useSetSettings, useSigma} from '@react-sigma/core';
+import Graph from 'graphology';
+import {animateNodes} from 'sigma/utils/animate';
+import {toUndirected} from 'graphology-operators';
+import {
+    Entity,
+    HopsResponse,
+    RelationTypeDirection,
+    getRelationType,
+    getLabel,
+    getEntityImage,
+    getRelationTypePropWithInheritance
+} from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import {
+    EdgeAttributes,
+    Filters,
+    GraphologyLayout,
+    GraphologyWorkerLayoutConstructor,
+    GraphPathType,
+    NodeAttributes
+} from '../types/graphDataTypes';
+import {directionTypeToEdgeType, getPathToNode, mouseIsOnNode} from '../utils/graphLayout';
+import {useSelfRelationLoopsRenderer} from './useSelfRelationLoopsRenderer';
+import {useTooltipRenderer} from './useTooltipRenderer';
+
+const memoizedGetEntityImage = memoizeWith((metadata, storagePath, entity) => entity.type, getEntityImage);
+
+const SELECTED_NODE: Partial<NodeAttributes> = {
+    size: 24,
+    buttonSize: 8,
+    buttonOffset: [19, 19]
+};
+
+const DEFAULT_NODE: Partial<NodeAttributes> = {
+    size: 12,
+    buttonSize: 6,
+    buttonOffset: [8, 13]
+};
+
+const WORKER_LAYOUT_ANIMATION_DURATION = 5000;
+const SYNC_LAYOUT_ANIMATION_DURATION = 1000;
+
+type Props = {
+    data: HopsResponse;
+    graph: Graph;
+    syncLayout?: GraphologyLayout<Record<string, unknown>>;
+    workerLayout?: GraphologyWorkerLayoutConstructor<Record<string, unknown>>;
+    layoutSettings?: Record<string, unknown>;
+    isDirected?: boolean;
+    selectedNode: string;
+    onNodeClick: (node: string) => void;
+    onNodeCollapse: (node: string, path: GraphPathType) => void;
+    onNodeExpand: (node: string) => void;
+    filters?: Filters;
+};
+
+export const useGraphLayout = ({
+    data,
+    graph,
+    syncLayout,
+    workerLayout,
+    layoutSettings,
+    selectedNode,
+    isDirected = false,
+    onNodeClick,
+    onNodeCollapse,
+    onNodeExpand,
+    filters
+}: Props): void => {
+    const sigma = useSigma();
+    const loadGraph = useLoadGraph();
+    const registerEvents = useRegisterEvents();
+    const setSettings = useSetSettings();
+
+    const {selfRelationsPathsMap, selfRelationLoopsCanvas} = useSelfRelationLoopsRenderer(graph);
+    const hoveredEdge = useTooltipRenderer(graph, selfRelationLoopsCanvas, selfRelationsPathsMap);
+
+    const entity: Entity = useSelector(mdm.selectors.getEntity);
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const absoluteImagePath = useSelector(mdm.selectors.getAbsoluteImagePath) || '';
+
+    const [hoveredNode, setHoveredNode] = useState<string>(undefined);
+    const [undirectedGraph, setUndirectedGraph] = useState<Graph>(null);
+    const [selectedPath, setSelectedPath] = useState<GraphPathType>({});
+
+    const entityUri = entity?.uri;
+
+    useEffect(() => {
+        sigma.getCamera().setState({ratio: 1.2});
+    }, [graph, sigma]);
+
+    useEffect(() => {
+        setUndirectedGraph(toUndirected(graph));
+        loadGraph(graph);
+        if (syncLayout) {
+            const positions = syncLayout(sigma.getGraph(), layoutSettings);
+            animateNodes(sigma.getGraph(), positions, {duration: SYNC_LAYOUT_ANIMATION_DURATION});
+        }
+        if (workerLayout) {
+            const worker = new workerLayout(sigma.getGraph(), layoutSettings);
+            worker.start();
+            const timer = setTimeout(() => {
+                worker.stop();
+            }, WORKER_LAYOUT_ANIMATION_DURATION);
+            return () => {
+                clearTimeout(timer);
+                worker.kill();
+            };
+        }
+    }, [data, graph, syncLayout, workerLayout, sigma, layoutSettings, loadGraph, isDirected]);
+
+    useEffect(() => {
+        const pathToNode = getPathToNode({
+            graph: sigma.getGraph(),
+            undirectedGraph,
+            selectedNode,
+            rootNodeUri: entityUri
+        });
+        setSelectedPath(pathToNode);
+    }, [selectedNode, entityUri, sigma, undirectedGraph]);
+
+    useEffect(() => {
+        registerEvents({
+            enterNode: ({node}) => {
+                setHoveredNode(node);
+            },
+            leaveNode: () => {
+                setHoveredNode(undefined);
+            },
+            clickNode: ({node}) => {
+                onNodeClick(node);
+            },
+            click: (event) => {
+                const findClosestNode = ({x, y}) => {
+                    const coordForGraph = sigma.viewportToGraph({x, y});
+                    const graph = sigma.getGraph();
+                    const closestNodes = graph
+                        .nodes()
+                        .map((nodeId) => {
+                            const attrs = graph.getNodeAttributes(nodeId);
+                            const distance =
+                                Math.pow(coordForGraph.x - attrs.x, 2) + Math.pow(coordForGraph.y - attrs.y, 2);
+                            return {nodeId, distance, hidden: attrs.hidden};
+                        })
+                        .sort((a, b) => a.distance - b.distance)
+                        .filter(({hidden}) => !hidden);
+
+                    return closestNodes.length > 0 ? closestNodes[0].nodeId : null;
+                };
+
+                const nodeId = findClosestNode(event);
+
+                if (!nodeId) return;
+
+                const closestNode = sigma.getNodeDisplayData(nodeId) as NodeAttributes;
+
+                const center = sigma.framedGraphToViewport({
+                    x: closestNode.x,
+                    y: closestNode.y
+                });
+
+                const dx = sigma.scaleSize(closestNode.buttonOffset[0]);
+                const dy = sigma.scaleSize(closestNode.buttonOffset[1]);
+                const buttonSize = sigma.scaleSize(closestNode.buttonSize);
+
+                const isExpandClicked = mouseIsOnNode(event.x, event.y, center.x + dx, center.y - dy, buttonSize);
+                const isCollapseClicked = mouseIsOnNode(event.x, event.y, center.x + dx, center.y + dy, buttonSize);
+
+                if (closestNode.showExpand && isExpandClicked) {
+                    onNodeExpand(nodeId);
+                    onNodeClick(nodeId);
+                }
+
+                if (closestNode.showCollapse && isCollapseClicked) {
+                    const pathToNode = getPathToNode({
+                        graph: sigma.getGraph(),
+                        undirectedGraph,
+                        selectedNode: nodeId,
+                        rootNodeUri: entityUri
+                    });
+                    onNodeCollapse(nodeId, pathToNode);
+                    onNodeClick(nodeId);
+                }
+            }
+        });
+    }, [sigma, registerEvents, onNodeClick, onNodeCollapse, onNodeExpand, entityUri, undirectedGraph]);
+
+    useEffect(() => {
+        const graph = sigma.getGraph();
+        let selectedNodeNeighbours: string[] | undefined;
+        try {
+            selectedNodeNeighbours = graph.neighbors(selectedNode);
+        } catch (e) {
+            //do nothing
+        }
+
+        setSettings({
+            nodeReducer: (node: string, data: NodeAttributes) => {
+                const {entityTypesUris = []} = filters || {};
+                const pathToIcon = memoizedGetEntityImage(metadata, absoluteImagePath, {type: data.entityTypeUri});
+
+                const neighbors = graph.neighbors(node);
+                const hiddenNeighborsCount = neighbors
+                    .map((nodeId) => graph.getNodeAttribute(nodeId, 'hidden'))
+                    .filter((x) => !!x).length;
+
+                const isNodeInPath = (selectedPath.nodes || []).includes(node);
+                const isHoveredNode = hoveredNode === node;
+                const isRootNode = node === entityUri;
+                const isSelectedNode = node === selectedNode;
+                const isInactiveNode =
+                    selectedNodeNeighbours &&
+                    !selectedNodeNeighbours.includes(node) &&
+                    selectedNode !== node &&
+                    selectedNode !== entityUri &&
+                    !isNodeInPath;
+                const isHiddenNode =
+                    ![selectedNode, entityUri].includes(node) &&
+                    entityTypesUris.length > 0 &&
+                    !entityTypesUris.includes(data.entityTypeUri);
+
+                const nodeProps = node === selectedNode ? SELECTED_NODE : DEFAULT_NODE;
+
+                const newData: NodeAttributes = {
+                    ...data,
+                    ...nodeProps,
+                    color: '#0072CE',
+                    image: pathToIcon,
+                    showExpand: data.untraversedRelationsCount > 0 || hiddenNeighborsCount > 0,
+                    showCollapse: data.traversedRelationsCount > 1 && neighbors.length - hiddenNeighborsCount > 1
+                };
+
+                if (isNodeInPath || isSelectedNode || isRootNode) {
+                    newData.inPath = true;
+                    newData.color = isRootNode ? '#00FFFF' : data.color;
+                } else if (isInactiveNode) {
+                    newData.label = !isHoveredNode ? '' : data.label;
+                    newData.inactive = true;
+                }
+
+                if (isHoveredNode) {
+                    newData.highlighted = true;
+                }
+
+                if (isHiddenNode) {
+                    newData.hidden = true;
+                }
+
+                return newData;
+            },
+            edgeReducer: (edge: string, data: EdgeAttributes) => {
+                const {relationTypesUris = []} = filters || {};
+                const newData: EdgeAttributes = {...data, hidden: false};
+                const isEdgeInPath = (selectedPath.edges || []).includes(edge);
+                const relationType = getRelationType(metadata, data.relationTypeUri);
+                const relationTypeColor = getRelationTypePropWithInheritance(metadata, relationType, 'typeColor');
+                const selectedNodeIsNotRoot = selectedNode && selectedNode !== entityUri;
+                const isHiddenEdge =
+                    (selectedNodeIsNotRoot && !graph.hasExtremity(edge, selectedNode) && !isEdgeInPath) ||
+                    (relationTypesUris.length > 0 && !relationTypesUris.includes(data.relationTypeUri));
+
+                if (relationTypeColor) {
+                    newData.color = relationTypeColor;
+                }
+
+                if (hoveredEdge === edge) {
+                    newData.hovered = true;
+                }
+
+                if (isHiddenEdge) {
+                    newData.hidden = true;
+                }
+
+                if (isDirected) {
+                    newData.arrowSizeRatio = 4;
+                }
+
+                if (isEdgeInPath) {
+                    newData.color = '#0072CE';
+                    newData.size = 4;
+                    newData.arrowSizeRatio = isDirected ? 1.4 : data.arrowSizeRatio;
+                }
+
+                newData.type = directionTypeToEdgeType(isDirected ? data.direction : RelationTypeDirection.undirected);
+                newData.relationLabel = getLabel(relationType?.label);
+
+                return newData;
+            },
+            enableEdgeHoverEvents: true
+        });
+    }, [
+        sigma,
+        setSettings,
+        hoveredNode,
+        selectedNode,
+        selectedPath,
+        entityUri,
+        metadata,
+        absoluteImagePath,
+        isDirected,
+        filters,
+        hoveredEdge
+    ]);
+};

package/src/hooks/useGraphLayoutSelector.ts

@@ -0,0 +1,19 @@
+import {useState, useEffect} from 'react';
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {GraphState} from '../types/graphDataTypes';
+
+export const useGraphLayoutSelector = (graphLayout?: GraphLayout): Pick<GraphState, 'layout' | 'setLayout'> => {
+    const [layout, setLayout] = useState<GraphLayout>(GraphLayout.SIMPLE_NETWORK);
+
+    useEffect(() => {
+        const isCorrectGraphLayout = Object.values(GraphLayout).some((layout) => graphLayout === layout);
+        if (isCorrectGraphLayout) {
+            setLayout(graphLayout);
+        }
+    }, [graphLayout]);
+
+    return {
+        layout,
+        setLayout
+    };
+};