@reltio/graph 1.4.1586-mui5 → 1.4.1586-mui5-2

package/package.json

@@ -1,30 +1,14 @@
 {
   "name": "@reltio/graph",
-  "version": "1.4.1586-mui5",
-  "description": "",
-  "main": "index.ts",
-  "author": "",
+  "version": "1.4.1586-mui5-2",
   "license": "SEE LICENSE IN LICENSE FILE",
-  "scripts": {
-    "build": "cross-env NODE_ENV=production webpack && node ./scripts/build",
-    "postinstall": "cross-env NODE_ENV=production webpack",
-    "prepublishOnly": "npm run build",
-    "watch": "webpack -w",
-    "dev": "webpack serve",
-    "test": "tsc && jest --config=../../jest.config.js",
-    "test:ci": "tsc && jest --config=../../jest.config.js --maxWorkers=50%",
-    "i18n": "ui-i18n bundle --src=./src/**/*.js --out=./baseline.json",
-    "analyze": "cross-env NODE_ENV=production webpack --analyze"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
+  "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",
+    "@reltio/hierarchy-tree": "^1.4.1586-mui5-2",
+    "@reltio/mdm-module": "^1.4.1586-mui5-2",
+    "@reltio/mdm-sdk": "^1.4.1586-mui5-2",
     "classnames": "^2.2.5",
     "graphology": "^0.25.1",
     "graphology-layout": "^0.6.1",
@@ -39,8 +23,7 @@
     "sigma": "^2.4.0",
     "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
   },
-  "devDependencies": {
-    "@reltio/components": "^1.4.1586-mui5"
-  },
-  "gitHead": "746e04a2ebbd1e190caf6e7b504eede0fd54d100"
-}
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/index.ts

@@ -1 +0,0 @@
-export {default as GraphView} from './src';

package/public/package.json

@@ -1,29 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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
-);