@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/public/bundle.js.LICENSE.txt

@@ -0,0 +1,88 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/material v5.13.4
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.13.2
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/public/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@reltio/graph",
+  "version": "1.4.1586-mui5",
+  "license": "SEE LICENSE IN LICENSE FILE",
+  "main": "bundle.js",
+  "dependencies": {
+    "@date-io/moment": "^1.3.13",
+    "@react-sigma/core": "^3.1.0",
+    "@reltio/hierarchy-tree": "^1.4.1586-mui5",
+    "@reltio/mdm-module": "^1.4.1586-mui5",
+    "@reltio/mdm-sdk": "^1.4.1586-mui5",
+    "classnames": "^2.2.5",
+    "graphology": "^0.25.1",
+    "graphology-layout": "^0.6.1",
+    "graphology-layout-forceatlas2": "^0.10.1",
+    "graphology-operators": "^1.6.0",
+    "graphology-shortest-path": "^2.0.1",
+    "graphology-types": "^0.24.5",
+    "ramda": "^0.28.0",
+    "react-redux": "^7.2.3",
+    "react-resize-detector": "^4.2.0",
+    "redux": "^4.1.2",
+    "sigma": "^2.4.0",
+    "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/build/index.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const fs = require('fs');
+
+const outputDir = path.resolve(process.cwd(), 'public');
+const generatePackageJson = () => {
+    const packageJson = require('../../package.json');
+    const result = {
+        name: packageJson.name,
+        version: packageJson.version,
+        license: 'SEE LICENSE IN LICENSE FILE',
+        main: 'bundle.js',
+        dependencies: packageJson.dependencies,
+        peerDependencies: packageJson.peerDependencies,
+        publishConfig: packageJson.publishConfig
+    };
+    const source = JSON.stringify(result, null, 2);
+    fs.writeFileSync(path.join(outputDir, 'package.json'), source);
+};
+
+generatePackageJson();

package/src/__tests__/GraphView.test.tsx

@@ -0,0 +1,25 @@
+import GraphView from '../';
+import {shallow} from 'enzyme';
+import {Store} from 'redux';
+import React from 'react';
+import {Provider} from 'react-redux';
+import {ErrorPopup} from '@reltio/components';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import GraphPerspectiveView from '../components/GraphPerspectiveView/GraphPerspectiveView';
+
+const store = {} as Store;
+const setUp = () => shallow(<GraphView store={store} />);
+
+describe('graph view test', () => {
+    it('should render redux provider, StylesProvider, LocalizationProvider', () => {
+        const component = setUp();
+        expect(component.find(Provider)).toHaveLength(1);
+        expect(component.find(Provider).prop('store')).toBe(store);
+        expect(component.find(GraphPerspectiveView)).toHaveLength(1);
+        expect(component.find(ErrorPopup)).toHaveLength(1);
+        expect(component.find(ErrorPopup).prop('showErrorFromStore')).toBe(true);
+        expect(component.find(LocalizationProvider)).toHaveLength(1);
+        expect(component.find(LocalizationProvider).prop('dateAdapter')).toBe(AdapterMoment);
+    });
+});

package/src/components/CircleLayout/CircleLayout.tsx

@@ -0,0 +1,76 @@
+import {useMemo} from 'react';
+import circular from 'graphology-layout/circular';
+import forceAtlas2 from 'graphology-layout-forceatlas2';
+import FA2Layout from 'graphology-layout-forceatlas2/worker';
+import Graph from 'graphology';
+import {difference, prop} from 'ramda';
+import {HopsResponse, GraphLayout} from '@reltio/mdm-sdk';
+import {useDidUpdateEffect, usePrevious} from '@reltio/components';
+
+import {useGraphLayout} from '../../hooks/useGraphLayout';
+import {GraphPathType, Filters} from '../../types/graphDataTypes';
+
+type CircleLayoutProps = {
+    data: HopsResponse;
+    graph: Graph;
+    selectedNode: string;
+    onNodeClick: (node: string) => void;
+    onNodeCollapse: (node: string, path: GraphPathType) => void;
+    onNodeExpand: (node: string) => void;
+    layout: GraphLayout;
+    filters?: Filters;
+};
+
+export const CircleLayout = ({
+    data,
+    graph,
+    selectedNode,
+    layout,
+    onNodeClick,
+    onNodeCollapse,
+    onNodeExpand,
+    filters
+}: CircleLayoutProps) => {
+    const prevData: HopsResponse = usePrevious(data);
+
+    useDidUpdateEffect(() => {
+        if (prevData) {
+            const newNodesIds = difference(data.entities.map(prop('uri')), prevData.entities.map(prop('uri')));
+            if (newNodesIds.length) {
+                const tempGraph = graph.copy();
+                circular.assign(tempGraph);
+                newNodesIds.forEach((id) => {
+                    graph.setNodeAttribute(id, 'x', tempGraph.getNodeAttribute(id, 'x'));
+                    graph.setNodeAttribute(id, 'y', tempGraph.getNodeAttribute(id, 'y'));
+                });
+            }
+        }
+    }, [data]);
+
+    const layoutSettings = useMemo(() => {
+        circular.assign(graph);
+        return {
+            settings: {
+                ...forceAtlas2.inferSettings(graph),
+                gravity: 1
+            }
+        };
+    }, [graph]);
+
+    useGraphLayout({
+        workerLayout: FA2Layout,
+        layoutSettings,
+        data,
+        graph,
+        selectedNode,
+        onNodeClick,
+        isDirected: layout === GraphLayout.DIRECTED_NETWORK,
+        onNodeCollapse,
+        onNodeExpand,
+        filters
+    });
+
+    return null;
+};
+
+export default CircleLayout;

package/src/components/CircleLayout/__tests__/CircleLayout.test.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {MultiGraph} from 'graphology';
+import FA2Layout from 'graphology-layout-forceatlas2/worker';
+import {HopsResponse, GraphLayout} from '@reltio/mdm-sdk';
+
+import CircleLayout from '../CircleLayout';
+import * as useGraphLayoutImport from '../../../hooks/useGraphLayout';
+import {useGraphLayout} from '../../../hooks/useGraphLayout';
+import {fillGraphWithHopsResponse} from '../../../utils/graph';
+
+jest.mock('../../../hooks/useGraphLayout', () => ({
+    ...(jest.requireActual('../../../hooks/useGraphLayout') as Record<string, unknown>),
+    useGraphLayout: jest.fn()
+}));
+
+describe('CircleLayout tests', () => {
+    const data: HopsResponse = {
+        entities: [
+            {uri: 'node1', type: ''},
+            {uri: 'node2', type: ''},
+            {uri: 'node3', type: ''},
+            {uri: 'node4', type: ''}
+        ],
+        relations: [
+            {
+                uri: 'r1',
+                type: '',
+                startObject: {
+                    objectURI: 'node1'
+                },
+                endObject: {
+                    objectURI: 'node2'
+                }
+            },
+            {
+                uri: 'r2',
+                type: '',
+                startObject: {
+                    objectURI: 'node2'
+                },
+                endObject: {
+                    objectURI: 'node3'
+                }
+            },
+            {
+                uri: 'r3',
+                type: '',
+                startObject: {
+                    objectURI: 'node2'
+                },
+                endObject: {
+                    objectURI: 'node4'
+                }
+            }
+        ]
+    };
+    const graph = new MultiGraph();
+    fillGraphWithHopsResponse(graph, data);
+    const basicProps = {
+        data,
+        graph,
+        selectedNode: 'entities/uri1',
+        onNodeClick: jest.fn(),
+        onNodeCollapse: jest.fn(),
+        onNodeExpand: jest.fn(),
+        filters: {entityTypesUris: ['hcp'], relationTypesUris: []}
+    };
+
+    beforeAll(() => {
+        jest.spyOn(useGraphLayoutImport, 'useGraphLayout').mockReturnValue(undefined);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call useGraphLayout with correctly params if layout is not directed network', () => {
+        const props = {
+            ...basicProps,
+            layout: GraphLayout.SIMPLE_NETWORK
+        };
+        mount(<CircleLayout {...props} />);
+        expect(useGraphLayout).toHaveBeenCalledWith({
+            workerLayout: FA2Layout,
+            layoutSettings: {
+                settings: {
+                    barnesHutOptimize: false,
+                    gravity: 1,
+                    scalingRatio: 10,
+                    slowDown: expect.any(Number),
+                    strongGravityMode: true
+                }
+            },
+            isDirected: false,
+            filters: {
+                entityTypesUris: ['hcp'],
+                relationTypesUris: []
+            },
+            graph,
+            data: props.data,
+            onNodeClick: props.onNodeClick,
+            onNodeCollapse: props.onNodeCollapse,
+            onNodeExpand: props.onNodeExpand,
+            selectedNode: props.selectedNode
+        });
+    });
+
+    it('should call useGraphLayout with correctly params if layout is directed network', () => {
+        const props = {
+            ...basicProps,
+            layout: GraphLayout.DIRECTED_NETWORK
+        };
+        mount(<CircleLayout {...props} />);
+        expect(useGraphLayout).toHaveBeenCalledWith({
+            workerLayout: FA2Layout,
+            layoutSettings: {
+                settings: {
+                    barnesHutOptimize: false,
+                    gravity: 1,
+                    scalingRatio: 10,
+                    slowDown: expect.any(Number),
+                    strongGravityMode: true
+                }
+            },
+            isDirected: true,
+            graph,
+            data: props.data,
+            onNodeClick: props.onNodeClick,
+            onNodeExpand: props.onNodeExpand,
+            onNodeCollapse: props.onNodeCollapse,
+            selectedNode: props.selectedNode,
+            filters: props.filters
+        });
+    });
+
+    it('should assign circular layout for new nodes if new nodes were added to data', () => {
+        const props = {
+            ...basicProps,
+            layout: GraphLayout.SIMPLE_NETWORK
+        };
+        const component = mount(<CircleLayout {...props} />);
+
+        const newData = {
+            entities: [...data.entities, {uri: 'node5', type: ''}, {uri: 'node6', type: ''}],
+            relations: [
+                ...data.relations,
+                {
+                    uri: 'r4',
+                    type: '',
+                    startObject: {
+                        objectURI: 'node4'
+                    },
+                    endObject: {
+                        objectURI: 'node5'
+                    }
+                },
+                {
+                    uri: 'r5',
+                    type: '',
+                    startObject: {
+                        objectURI: 'node4'
+                    },
+                    endObject: {
+                        objectURI: 'node6'
+                    }
+                }
+            ]
+        };
+
+        const newGraph = new MultiGraph();
+        fillGraphWithHopsResponse(newGraph, newData);
+        expect(newGraph.getNodeAttributes('node5')).toMatchObject({
+            x: 1,
+            y: 1
+        });
+        expect(newGraph.getNodeAttributes('node6')).toMatchObject({
+            x: 1,
+            y: 1
+        });
+
+        component.setProps({...props, data: newData, graph: newGraph});
+        component.update();
+
+        expect(newGraph.getNodeAttributes('node5')).toMatchObject({
+            x: -0.5000000000000004,
+            y: -0.8660254037844385
+        });
+        expect(newGraph.getNodeAttributes('node6')).toMatchObject({
+            x: 0.5000000000000001,
+            y: -0.8660254037844386
+        });
+    });
+});

package/src/components/GotoButton/GotoButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {useCamera} from '@react-sigma/core';
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import IconButton from '@mui/material/IconButton';
+
+import {useStyles} from './styles';
+
+type Props = {
+    node: string;
+};
+
+const GotoButton = ({node}: Props) => {
+    const styles = useStyles();
+    const {gotoNode} = useCamera();
+
+    return (
+        <IconButton className={styles.button} onClick={() => gotoNode(node)} size="large">
+            <MyLocationIcon className={styles.icon} />
+        </IconButton>
+    );
+};
+
+export default GotoButton;

package/src/components/GotoButton/__tests__/GotoButton.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {useCamera} from '@react-sigma/core';
+import IconButton from '@mui/material/IconButton';
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import GotoButton from '../GotoButton';
+
+jest.mock('@react-sigma/core', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@react-sigma/core'),
+    useCamera: jest.fn().mockReturnValue({
+        gotoNode: jest.fn()
+    })
+}));
+
+describe('GotoButton tests', () => {
+    it('should render main parts', () => {
+        const component = shallow(<GotoButton node={undefined} />);
+        expect(component.find(IconButton)).toHaveLength(1);
+        expect(component.find(MyLocationIcon)).toHaveLength(1);
+    });
+
+    it('should call gotoNode on click', () => {
+        const nodeUri = 'testUri';
+        const component = shallow(<GotoButton node={nodeUri} />);
+        expect(component.find(IconButton)).toHaveLength(1);
+        act(() => {
+            component.find(IconButton).simulate('click');
+        });
+
+        expect(useCamera().gotoNode).toHaveBeenCalledWith(nodeUri);
+    });
+});

package/src/components/GotoButton/styles.ts

@@ -0,0 +1,15 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    button: {
+        background: '#FFFFFF',
+        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)',
+        width: '28px',
+        height: '28px',
+        borderRadius: '4px'
+    },
+    icon: {
+        width: '18px',
+        height: '18px'
+    }
+});

package/src/components/GraphArea/GraphArea.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import Graph from 'graphology';
+import {withContext} from '@reltio/components';
+import {HopsResponse, GraphLayout} from '@reltio/mdm-sdk';
+import {SigmaGraphContainer} from '../SigmaGraphContainer/SigmaGraphContainer';
+import CircleLayout from '../CircleLayout/CircleLayout';
+import HierarchyLayout from '../HierarchyLayout/HierarchyLayout';
+import {GraphStateContext} from '../../contexts/GraphStateContext';
+import {Filters, GraphPathType} from '../../types/graphDataTypes';
+import GraphTypeSelector from '../GraphTypeSelector/GraphTypeSelector';
+import GraphLayoutSelector from '../GraphLayoutSelector/GraphLayoutSelector';
+import SigmaGraphResizer from '../SigmaGraphResizer/SigmaGraphResizer';
+import ZoomSlider from '../ZoomSlider/ZoomSlider';
+import GotoButton from '../GotoButton/GotoButton';
+import TreeLayout from '../TreeLayout/TreeLayout';
+import {useStyles} from './styles';
+
+type Props = {
+    data?: HopsResponse;
+    graph?: Graph;
+    selectedNode?: string;
+    onNodeSelect?: (uri: string) => void;
+    onNodeCollapse?: (uri: string, path: GraphPathType) => void;
+    onNodeExpand?: (uri: string) => void;
+    filters?: Filters;
+    graphTypeUri?: string;
+    layout?: GraphLayout;
+    setLayout?: (layout: GraphLayout) => void;
+};
+
+const GraphArea = ({
+    data,
+    graph,
+    selectedNode,
+    onNodeSelect,
+    onNodeCollapse,
+    onNodeExpand,
+    filters,
+    graphTypeUri,
+    layout,
+    setLayout
+}: Props) => {
+    const styles = useStyles();
+
+    const commonProps = {
+        data,
+        graph,
+        selectedNode,
+        layout,
+        onNodeClick: onNodeSelect,
+        onNodeCollapse,
+        onNodeExpand,
+        filters
+    };
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.selectors}>
+                <GraphTypeSelector />
+                <GraphLayoutSelector value={layout} onChangeHandler={setLayout} graphTypeUri={graphTypeUri} />
+            </div>
+            <div className={styles.graph}>
+                {layout === GraphLayout.TREE ? (
+                    <TreeLayout graphTypeUri={graphTypeUri} />
+                ) : (
+                    graph && (
+                        <SigmaGraphContainer>
+                            <>
+                                <SigmaGraphResizer />
+                                {layout === GraphLayout.SIMPLE_NETWORK || layout === GraphLayout.DIRECTED_NETWORK ? (
+                                    <CircleLayout {...commonProps} />
+                                ) : (
+                                    <HierarchyLayout {...commonProps} />
+                                )}
+                                <div className={styles.rightBottomControls}>
+                                    <ZoomSlider className={styles.zoomSlider} min={30} max={300} />
+                                    <GotoButton node={selectedNode} />
+                                </div>
+                            </>
+                        </SigmaGraphContainer>
+                    )
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    ({
+        data,
+        graphologyGraph,
+        selectedEntity,
+        onEntitySelect,
+        onCollapseEntity,
+        onExpandEntity,
+        relationshipTable: {filters},
+        graphTypeUri,
+        layout,
+        setLayout
+    }) => ({
+        data,
+        graph: graphologyGraph,
+        selectedNode: selectedEntity?.uri,
+        onNodeSelect: onEntitySelect,
+        onNodeCollapse: onCollapseEntity,
+        onNodeExpand: onExpandEntity,
+        filters,
+        graphTypeUri,
+        layout,
+        setLayout
+    }),
+    GraphArea
+);