@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/HierarchyLayout/HierarchyLayout.ts

@@ -0,0 +1,102 @@
+import {useCallback} from 'react';
+import Graph from 'graphology';
+import {rotation} from 'graphology-layout';
+import {HopsResponse, GraphLayout} from '@reltio/mdm-sdk';
+import {Filters, GraphPathType} from '../../types/graphDataTypes';
+import {buildHierarchyNodes, extractDataFromGraph} from './buildHierarchy';
+import {useGraphLayout} from '../../hooks/useGraphLayout';
+import {
+    calculateXPos,
+    calculateYPos,
+    getAngleOfRotation,
+    getMaxLvlSize,
+    getMaxQuantityNodesOnOneLvl,
+    isSimpleGraph
+} from './calculations';
+
+type HierarchyLayoutProps = {
+    data: HopsResponse;
+    graph: Graph;
+    selectedNode: string;
+    layout: GraphLayout;
+    onNodeClick: (node: string) => void;
+    onNodeCollapse: (node: string, path: GraphPathType) => void;
+    onNodeExpand: (node: string) => void;
+    filters?: Filters;
+};
+
+export const HierarchyLayout = ({
+    data,
+    graph,
+    selectedNode,
+    layout,
+    onNodeClick,
+    onNodeCollapse,
+    onNodeExpand,
+    filters
+}: HierarchyLayoutProps) => {
+    const hierarchicalLayout = useCallback(
+        (graph: Graph) => {
+            const tempGraph = graph.copy();
+            const angleOfRotation = getAngleOfRotation(layout);
+            const graphData = extractDataFromGraph(tempGraph);
+            const nodesLength = graphData.nodes.length;
+            const shouldUseCheckboardPattern = !isSimpleGraph(nodesLength);
+            const maxQuantityNodesOnOneLvl = getMaxQuantityNodesOnOneLvl(nodesLength, layout);
+            const nodesHierarchy = buildHierarchyNodes(graphData, selectedNode, maxQuantityNodesOnOneLvl);
+            const maxLvlSize = getMaxLvlSize(nodesHierarchy);
+            for (let i = 0; i < nodesHierarchy.length; ++i) {
+                const isEvenRow = i % 2 === 0;
+                const quantityAtLvl = nodesHierarchy[i].length;
+
+                for (let j = 0; j < quantityAtLvl; ++j) {
+                    const isEvenItem = j % 2 === 0;
+
+                    const xPos = calculateXPos({
+                        quantityAtLvl,
+                        posAtLvl: j,
+                        max: maxLvlSize,
+                        isEvenRow,
+                        layout,
+                        shouldUseCheckboardPattern
+                    });
+
+                    const yPos = calculateYPos({
+                        quantityAtLvl,
+                        rowNumber: i,
+                        isEvenItem,
+                        layout,
+                        shouldUseCheckboardPattern
+                    });
+
+                    tempGraph.setNodeAttribute(nodesHierarchy[i][j], 'x', xPos);
+                    tempGraph.setNodeAttribute(nodesHierarchy[i][j], 'y', yPos);
+                }
+            }
+            rotation.assign(tempGraph, angleOfRotation, {degrees: true});
+            return tempGraph.reduceNodes(
+                (result, id, {x, y}) => ({
+                    ...result,
+                    [id]: {x, y}
+                }),
+                {}
+            );
+        },
+        [layout, selectedNode]
+    );
+
+    useGraphLayout({
+        syncLayout: hierarchicalLayout,
+        data,
+        graph,
+        selectedNode,
+        onNodeClick,
+        onNodeCollapse,
+        onNodeExpand,
+        filters
+    });
+
+    return null;
+};
+
+export default HierarchyLayout;

package/src/components/HierarchyLayout/__tests__/HierarchyLayout.spec.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {MultiGraph} from 'graphology';
+import {rotation} from 'graphology-layout';
+import {useSetSettings, useSigma} from '@react-sigma/core';
+import * as reactRedux from 'react-redux';
+import {animateNodes} from 'sigma/utils/animate';
+import {HopsResponse, GraphLayout, RelationTypeDirection} from '@reltio/mdm-sdk';
+
+import {HierarchyLayout} from '../HierarchyLayout';
+import {fillGraphWithHopsResponse} from '../../../utils/graph';
+import {useGraphLayout} from '../../../hooks/useGraphLayout';
+
+jest.mock('sigma/utils/animate', () => ({
+    animateNodes: jest.fn()
+}));
+
+jest.mock('@react-sigma/core', () => {
+    const sigma = jest.requireActual('@react-sigma/core');
+    return {
+        ...sigma,
+        useSigma: jest.fn().mockReturnValue({
+            getCamera: () => ({
+                setState: () => {}
+            }),
+            getGraph: () => ({})
+        }),
+        useLoadGraph: jest.fn().mockReturnValue(jest.fn()),
+        useRegisterEvents: jest.fn().mockReturnValue(jest.fn()),
+        useSetSettings: jest.fn().mockReturnValue(jest.fn())
+    };
+});
+
+jest.mock('../../../hooks/useGraphLayout', () => ({
+    ...(jest.requireActual('../../../hooks/useGraphLayout') as Record<string, unknown>),
+    useGraphLayout: jest.fn().mockImplementation(jest.requireActual('../../../hooks/useGraphLayout').useGraphLayout)
+}));
+
+jest.mock('../../../hooks/useSelfRelationLoopsRenderer', () => ({
+    ...jest.requireActual<Record<string, unknown>>('../../../hooks/useSelfRelationLoopsRenderer'),
+    useSelfRelationLoopsRenderer: jest.fn().mockReturnValue({selfRelationsPathsMap: {}, selfRelationLoopsCanvas: null})
+}));
+
+const data: HopsResponse = {
+    entities: [
+        {uri: 'node1', type: 'hcp'},
+        {uri: 'node2', type: 'hcp'},
+        {uri: 'node3', type: 'hca'},
+        {uri: 'node4', type: 'hco'}
+    ],
+    relations: [
+        {
+            uri: 'r1',
+            type: 'relType1',
+            startObject: {
+                objectURI: 'node1'
+            },
+            endObject: {
+                objectURI: 'node2'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r2',
+            type: 'relType2',
+            startObject: {
+                objectURI: 'node2'
+            },
+            endObject: {
+                objectURI: 'node3'
+            },
+            direction: RelationTypeDirection.directed
+        },
+        {
+            uri: 'r3',
+            type: 'relType3',
+            startObject: {
+                objectURI: 'node2'
+            },
+            endObject: {
+                objectURI: 'node4'
+            },
+            direction: RelationTypeDirection.bidirectional
+        }
+    ]
+};
+
+describe('HierarchyLayout functions behavior', () => {
+    const store = {
+        profile: {
+            entity: {
+                uri: 'node1',
+                type: 'hcp'
+            }
+        },
+        tenant: {id: 't1'},
+        metadata: {
+            t1: {
+                entityTypes: [],
+                relationTypes: []
+            }
+        }
+    };
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should set correct x and y coordinate for each node', () => {
+        jest.spyOn(rotation, 'assign').mockImplementation(jest.fn());
+        const graph = new MultiGraph();
+        fillGraphWithHopsResponse(graph, data);
+        (useSigma as jest.Mock).mockReturnValue({
+            getCamera: () => ({
+                setState: () => {}
+            }),
+            getGraph: () => graph
+        });
+        mount(
+            <HierarchyLayout
+                data={data}
+                graph={graph}
+                selectedNode={'node1'}
+                onNodeClick={jest.fn()}
+                onNodeCollapse={jest.fn()}
+                onNodeExpand={jest.fn()}
+                layout={GraphLayout.HORIZONTAL_LR}
+            />
+        );
+        expect(animateNodes).toHaveBeenCalledWith(
+            graph,
+            {
+                node1: {
+                    x: 5,
+                    y: 0
+                },
+                node2: {
+                    x: 5,
+                    y: 10
+                },
+                node3: {
+                    x: 0,
+                    y: 20
+                },
+                node4: {
+                    x: 10,
+                    y: 20
+                }
+            },
+            {duration: 1000}
+        );
+    });
+
+    it('should call useGraphLayout with params', () => {
+        const graph = new MultiGraph();
+        fillGraphWithHopsResponse(graph, data);
+        const props = {
+            data,
+            graph,
+            layout: GraphLayout.HORIZONTAL_LR,
+            selectedNode: 'node1',
+            onNodeClick: jest.fn(),
+            onNodeCollapse: jest.fn(),
+            onNodeExpand: jest.fn(),
+            filters: {entityTypesUris: ['hcp'], relationTypesUris: []}
+        };
+
+        mount(<HierarchyLayout {...props} />);
+        expect(useGraphLayout).toHaveBeenCalledWith({
+            syncLayout: expect.any(Function),
+            graph: props.graph,
+            data: props.data,
+            onNodeClick: props.onNodeClick,
+            selectedNode: props.selectedNode,
+            onNodeCollapse: props.onNodeCollapse,
+            onNodeExpand: props.onNodeExpand,
+            filters: props.filters
+        });
+    });
+
+    describe('Filters behavior', () => {
+        const graph = new MultiGraph();
+        fillGraphWithHopsResponse(graph, data);
+        const props = {
+            data,
+            graph,
+            layout: GraphLayout.HORIZONTAL_LR,
+            selectedNode: 'node2',
+            onNodeClick: jest.fn(),
+            onNodeCollapse: jest.fn(),
+            onNodeExpand: jest.fn(),
+            filters: {entityTypesUris: ['hca'], relationTypesUris: ['relType3']}
+        };
+        const setSettings = jest.fn();
+        beforeAll(() => {
+            (useSetSettings as jest.Mock).mockReturnValue(setSettings);
+        });
+
+        it('should filter nodes in nodeReducer', () => {
+            mount(<HierarchyLayout {...props} />);
+            expect(setSettings).toHaveBeenCalled();
+            const nodeReducer = setSettings.mock.calls[setSettings.mock.calls.length - 1][0].nodeReducer;
+            // main entity node shouldn't be filtered
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1')).hidden).toBeFalsy();
+            // selected entity node shouldn't be filtered
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2')).hidden).toBeFalsy();
+            expect(nodeReducer('node3', graph.getNodeAttributes('node3')).hidden).toBeFalsy();
+            expect(nodeReducer('node4', graph.getNodeAttributes('node4')).hidden).toBe(true);
+        });
+
+        it('should not filter nodes if filters.entityTypesUris is empty', () => {
+            mount(<HierarchyLayout {...props} filters={{entityTypesUris: [], relationTypesUris: ['relType3']}} />);
+            expect(setSettings).toHaveBeenCalled();
+            const nodeReducer = setSettings.mock.calls[setSettings.mock.calls.length - 1][0].nodeReducer;
+            expect(nodeReducer('node1', graph.getNodeAttributes('node1')).hidden).toBeFalsy();
+            expect(nodeReducer('node2', graph.getNodeAttributes('node2')).hidden).toBeFalsy();
+            expect(nodeReducer('node3', graph.getNodeAttributes('node3')).hidden).toBeFalsy();
+            expect(nodeReducer('node4', graph.getNodeAttributes('node4')).hidden).toBeFalsy();
+        });
+
+        it('should filter edges in edgeReducer', () => {
+            mount(<HierarchyLayout {...props} />);
+            expect(setSettings).toHaveBeenCalled();
+            const edgeReducer = setSettings.mock.calls[setSettings.mock.calls.length - 1][0].edgeReducer;
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).hidden).toBe(true);
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).hidden).toBe(true);
+            expect(edgeReducer('r3', graph.getEdgeAttributes('r3')).hidden).toBeFalsy();
+        });
+
+        it('should not filter edges if filters.relationTypesUris is empty', () => {
+            mount(<HierarchyLayout {...props} filters={{entityTypesUris: ['hca'], relationTypesUris: []}} />);
+            expect(setSettings).toHaveBeenCalled();
+            const edgeReducer = setSettings.mock.calls[setSettings.mock.calls.length - 1][0].edgeReducer;
+            expect(edgeReducer('r1', graph.getEdgeAttributes('r1')).hidden).toBeFalsy();
+            expect(edgeReducer('r2', graph.getEdgeAttributes('r2')).hidden).toBeFalsy();
+            expect(edgeReducer('r3', graph.getEdgeAttributes('r3')).hidden).toBeFalsy();
+        });
+    });
+});

package/src/components/HierarchyLayout/__tests__/buildHierarchy.spec.ts

@@ -0,0 +1,130 @@
+import {buildHierarchyNodes} from '../buildHierarchy';
+import {GraphologyGraphData} from '../../../types/graphDataTypes';
+
+export const graphData = {
+    nodes: [
+        {id: 'node1', name: 'node1'},
+        {id: 'node2', name: 'node2'},
+        {id: 'node3', name: 'node3'},
+        {id: 'node4', name: 'node4'}
+    ],
+    edges: [
+        {from: 'node1', to: 'node2'},
+        {from: 'node2', to: 'node3'},
+        {from: 'node2', to: 'node4'}
+    ]
+} as GraphologyGraphData;
+
+const graphDataWithLargeNumberOfNodesOnSameLvl = {
+    nodes: [
+        {id: 'node1', name: 'node1'},
+        {id: 'node2', name: 'node2'},
+        {id: 'node3', name: 'node3'},
+        {id: 'node4', name: 'node4'},
+        {id: 'node5', name: 'node5'},
+        {id: 'node6', name: 'node6'},
+        {id: 'node7', name: 'node7'},
+        {id: 'node8', name: 'node8'},
+        {id: 'node9', name: 'node9'},
+        {id: 'node10', name: 'node10'},
+        {id: 'node11', name: 'node11'},
+        {id: 'node12', name: 'node12'}
+    ],
+    edges: [
+        {from: 'node1', to: 'node2'},
+        {from: 'node1', to: 'node3'},
+        {from: 'node1', to: 'node4'},
+        {from: 'node1', to: 'node5'},
+        {from: 'node1', to: 'node6'},
+        {from: 'node1', to: 'node7'},
+        {from: 'node1', to: 'node8'},
+        {from: 'node1', to: 'node9'},
+        {from: 'node1', to: 'node10'},
+        {from: 'node1', to: 'node11'},
+        {from: 'node1', to: 'node12'}
+    ]
+} as GraphologyGraphData;
+
+const nodesWithLoop = {
+    nodes: [
+        {id: 'node1', name: 'node1'},
+        {id: 'node2', name: 'node2'},
+        {id: 'node3', name: 'node3'}
+    ],
+    edges: [
+        {from: 'node1', to: 'node2'},
+        {from: 'node2', to: 'node3'},
+        {from: 'node3', to: 'node1'}
+    ]
+} as GraphologyGraphData;
+
+const tenNodesOnTheSameLvl = {
+    nodes: [
+        {id: 'node1', name: 'node1'},
+        {id: 'node2', name: 'node2'},
+        {id: 'node3', name: 'node3'},
+        {id: 'node4', name: 'node4'},
+        {id: 'node5', name: 'node5'},
+        {id: 'node6', name: 'node6'},
+        {id: 'node7', name: 'node7'},
+        {id: 'node8', name: 'node8'},
+        {id: 'node9', name: 'node9'},
+        {id: 'node10', name: 'node10'},
+        {id: 'node11', name: 'node11'}
+    ],
+    edges: [
+        {from: 'node1', to: 'node2'},
+        {from: 'node1', to: 'node3'},
+        {from: 'node1', to: 'node4'},
+        {from: 'node1', to: 'node5'},
+        {from: 'node1', to: 'node6'},
+        {from: 'node1', to: 'node7'},
+        {from: 'node1', to: 'node8'},
+        {from: 'node1', to: 'node9'},
+        {from: 'node1', to: 'node10'},
+        {from: 'node1', to: 'node11'}
+    ]
+} as GraphologyGraphData;
+
+describe('BuildHierarchyNodes behavior', () => {
+    it('should build correct nodes hierarchy', () => {
+        expect(buildHierarchyNodes(graphData, 'node1')).toEqual([['node1'], ['node2'], ['node3', 'node4']]);
+        expect(buildHierarchyNodes(graphData, 'node1', 1)).toEqual([['node1'], ['node2'], ['node3'], ['node4']]);
+    });
+
+    it('should build correct nodes hierarchy if there are a lot of nodes on the same lvl', () => {
+        expect(buildHierarchyNodes(graphDataWithLargeNumberOfNodesOnSameLvl, 'node1')).toEqual([
+            ['node1'],
+            ['node2', 'node3', 'node4', 'node5', 'node6', 'node7', 'node8', 'node9', 'node10', 'node11'],
+            ['node12']
+        ]);
+        expect(buildHierarchyNodes(graphDataWithLargeNumberOfNodesOnSameLvl, 'node1', 3)).toEqual([
+            ['node1'],
+            ['node2', 'node3', 'node4'],
+            ['node5', 'node6', 'node7'],
+            ['node8', 'node9', 'node10'],
+            ['node11', 'node12']
+        ]);
+        expect(buildHierarchyNodes(graphDataWithLargeNumberOfNodesOnSameLvl, 'node1', 5)).toEqual([
+            ['node1'],
+            ['node2', 'node3', 'node4', 'node5', 'node6'],
+            ['node7', 'node8', 'node9', 'node10', 'node11'],
+            ['node12']
+        ]);
+    });
+
+    it('should build correct nodes hierarchy if all nodes have parent', () => {
+        const expectedNodesHierarchy = [['node1'], ['node2'], ['node3']];
+        const hierarchy = buildHierarchyNodes(nodesWithLoop, 'node1');
+        expect(hierarchy).toEqual(expectedNodesHierarchy);
+    });
+
+    it('should build correct nodes hierarchy if there are only 10 of nodes on the same lvl', () => {
+        const expectedNodesHierarchy = [
+            ['node1'],
+            ['node2', 'node3', 'node4', 'node5', 'node6', 'node7', 'node8', 'node9', 'node10', 'node11']
+        ];
+        const hierarchy = buildHierarchyNodes(tenNodesOnTheSameLvl, 'node1');
+        expect(hierarchy).toEqual(expectedNodesHierarchy);
+    });
+});