@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,202 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {identity} from 'ramda';
+import {act} from 'react-dom/test-utils';
+import {MultiGraph} from 'graphology';
+import {GraphLayout} from '@reltio/mdm-sdk';
+
+import GraphArea from '../GraphArea';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import {SigmaGraphContainer} from '../../SigmaGraphContainer/SigmaGraphContainer';
+import CircleLayout from '../../CircleLayout/CircleLayout';
+import {GraphState} from '../../../types/graphDataTypes';
+import GraphTypeSelector from '../../GraphTypeSelector/GraphTypeSelector';
+import GraphLayoutSelector from '../../GraphLayoutSelector/GraphLayoutSelector';
+import HierarchyLayout from '../../HierarchyLayout/HierarchyLayout';
+import SigmaGraphResizer from '../../SigmaGraphResizer/SigmaGraphResizer';
+import ZoomSlider from '../../ZoomSlider/ZoomSlider';
+import GotoButton from '../../GotoButton/GotoButton';
+import TreeLayout from '../../TreeLayout/TreeLayout';
+
+jest.mock('../../SigmaGraphContainer/SigmaGraphContainer', () => ({
+    SigmaGraphContainer: ({children}) => <div>{children}</div> //eslint-disable-line
+}));
+
+jest.mock('../../GraphTypeSelector/GraphTypeSelector', () => () => null);
+
+jest.mock('../../CircleLayout/CircleLayout', () => () => null);
+jest.mock('../../HierarchyLayout/HierarchyLayout', () => () => null);
+jest.mock('../../SigmaGraphResizer/SigmaGraphResizer', () => () => null);
+
+jest.mock('../../ZoomSlider/ZoomSlider', () => () => null);
+jest.mock('../../GotoButton/GotoButton', () => () => null);
+jest.mock('../../TreeLayout/TreeLayout', () => () => null);
+
+const setUp = ({
+    data = null,
+    graphologyGraph = null,
+    selectedEntity = null,
+    onEntitySelect = identity,
+    onExpandEntity = identity,
+    onCollapseEntity = identity,
+    filters = {},
+    layout = null,
+    setLayout = identity,
+    graphTypeUri = null
+} = {}) =>
+    mount(
+        <GraphStateContext.Provider
+            value={
+                {
+                    data,
+                    graphologyGraph,
+                    selectedEntity,
+                    onEntitySelect,
+                    onExpandEntity,
+                    onCollapseEntity,
+                    relationshipTable: {filters},
+                    layout,
+                    setLayout,
+                    graphTypeUri
+                } as GraphState
+            }
+        >
+            <GraphArea />
+        </GraphStateContext.Provider>
+    );
+
+describe('GraphArea tests', () => {
+    it('should not render anything if GraphStateContext.Provider.value.data is not defined', () => {
+        const component = setUp();
+        expect(component.find(SigmaGraphContainer)).toHaveLength(0);
+        expect(component.find(CircleLayout)).toHaveLength(0);
+        expect(component.find(SigmaGraphResizer)).toHaveLength(0);
+        expect(component.find(ZoomSlider)).toHaveLength(0);
+        expect(component.find(GotoButton)).toHaveLength(0);
+    });
+
+    it('should render SigmaGraphContainer and CircleLayout if GraphStateContext.Provider.value.graphologyGraph is defined and layout is tree', () => {
+        const data = {
+            entities: [{uri: 'uri1'}, {uri: 'uri2'}],
+            relations: []
+        };
+        const graphologyGraph = new MultiGraph();
+        const selectedEntity = {uri: 'uri2'};
+        const onEntitySelect = jest.fn();
+        const onExpandEntity = jest.fn();
+        const onCollapseEntity = jest.fn();
+        const filters = {entityTypesUris: ['hcp'], relationTypesUris: []};
+        const setLayout = jest.fn();
+        const component = setUp({
+            data,
+            graphologyGraph,
+            selectedEntity,
+            onEntitySelect,
+            onExpandEntity,
+            onCollapseEntity,
+            filters,
+            layout: GraphLayout.SIMPLE_NETWORK,
+            setLayout
+        });
+        expect(component.find(SigmaGraphContainer)).toHaveLength(1);
+
+        const findCircleLayout = () => component.find(SigmaGraphContainer).find(CircleLayout);
+
+        const circleLayout = findCircleLayout();
+        expect(circleLayout).toHaveLength(1);
+        expect(circleLayout.prop('data')).toBe(data);
+        expect(circleLayout.prop('graph')).toBe(graphologyGraph);
+        expect(circleLayout.prop('selectedNode')).toBe(selectedEntity.uri);
+        expect(circleLayout.prop('onNodeClick')).toBe(onEntitySelect);
+        expect(circleLayout.prop('onNodeExpand')).toBe(onExpandEntity);
+        expect(circleLayout.prop('onNodeCollapse')).toBe(onCollapseEntity);
+        expect(circleLayout.prop('filters')).toBe(filters);
+        expect(circleLayout.prop('layout')).toBe(GraphLayout.SIMPLE_NETWORK);
+
+        expect(component.find(SigmaGraphContainer).find(SigmaGraphResizer)).toHaveLength(1);
+
+        const graphLayoutSelector = component.find(GraphLayoutSelector);
+        act(() => {
+            graphLayoutSelector.prop('onChangeHandler')(GraphLayout.DIRECTED_NETWORK);
+        });
+        expect(setLayout).toHaveBeenCalledWith(GraphLayout.DIRECTED_NETWORK);
+    });
+
+    it('should render HierarchyLayout if HierarchyLayout is selected', () => {
+        const data = {
+            entities: [{uri: 'uri1'}, {uri: 'uri2'}],
+            relations: []
+        };
+        const graphologyGraph = new MultiGraph();
+        const selectedEntity = {uri: 'uri2'};
+        const onEntitySelect = jest.fn();
+        const onExpandEntity = jest.fn();
+        const onCollapseEntity = jest.fn();
+        const filters = {entityTypesUris: ['hcp'], relationTypesUris: ['rel1']};
+        const component = setUp({
+            data,
+            graphologyGraph,
+            selectedEntity,
+            onEntitySelect,
+            onExpandEntity,
+            onCollapseEntity,
+            filters,
+            layout: GraphLayout.VERTICAL_TB
+        });
+        const graphLayoutSelector = component.find(GraphLayoutSelector);
+        expect(graphLayoutSelector).toHaveLength(1);
+        expect(graphLayoutSelector.prop('value')).toBe(GraphLayout.VERTICAL_TB);
+        expect(component.find(SigmaGraphContainer)).toHaveLength(1);
+        const circleLayout = component.find(SigmaGraphContainer).find(CircleLayout);
+        const hierarchyLayout = component.find(SigmaGraphContainer).find(HierarchyLayout);
+        expect(circleLayout).toHaveLength(0);
+        expect(hierarchyLayout).toHaveLength(1);
+        expect(hierarchyLayout.prop('data')).toBe(data);
+        expect(hierarchyLayout.prop('graph')).toBe(graphologyGraph);
+        expect(hierarchyLayout.prop('selectedNode')).toBe(selectedEntity.uri);
+        expect(hierarchyLayout.prop('onNodeClick')).toBe(onEntitySelect);
+        expect(hierarchyLayout.prop('layout')).toEqual(GraphLayout.VERTICAL_TB);
+        expect(hierarchyLayout.prop('onNodeExpand')).toBe(onExpandEntity);
+        expect(hierarchyLayout.prop('onNodeCollapse')).toBe(onCollapseEntity);
+        expect(hierarchyLayout.prop('filters')).toBe(filters);
+        expect(component.find(SigmaGraphContainer).find(SigmaGraphResizer)).toHaveLength(1);
+    });
+
+    it('should render TreeLayout if TreeLayout is selected', () => {
+        const component = setUp({
+            layout: GraphLayout.TREE
+        });
+        const graphLayoutSelector = component.find(GraphLayoutSelector);
+        expect(graphLayoutSelector).toHaveLength(1);
+        expect(graphLayoutSelector.prop('value')).toBe(GraphLayout.TREE);
+        expect(component.find(SigmaGraphContainer)).toHaveLength(0);
+        const treeLayout = component.find(TreeLayout);
+        expect(treeLayout).toHaveLength(1);
+    });
+
+    it('should render GraphTypeSelector', () => {
+        const component = setUp();
+        expect(component.find(GraphTypeSelector)).toHaveLength(1);
+    });
+
+    it('should render GraphLayoutSelector', () => {
+        const graphTypeUri = 'graphTypeUri';
+        const component = setUp({graphTypeUri});
+        expect(component.find(GraphLayoutSelector)).toHaveLength(1);
+        expect(component.find(GraphLayoutSelector).prop('graphTypeUri')).toBe(graphTypeUri);
+    });
+
+    it('should render ZoomSlider', () => {
+        const graphologyGraph = new MultiGraph();
+        const component = setUp({graphologyGraph});
+        expect(component.find(ZoomSlider)).toHaveLength(1);
+    });
+
+    it('should render GotoButton', () => {
+        const graphologyGraph = new MultiGraph();
+        const selectedEntity = {uri: 'uri2'};
+        const component = setUp({graphologyGraph, selectedEntity});
+        expect(component.find(GotoButton)).toHaveLength(1);
+        expect(component.find(GotoButton).prop('node')).toBe(selectedEntity.uri);
+    });
+});

package/src/components/GraphArea/styles.ts

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        height: '100%',
+        position: 'relative'
+    },
+    selectors: {
+        display: 'flex',
+        position: 'absolute',
+        top: '12px',
+        right: '16px',
+        zIndex: 2
+    },
+    graph: {
+        height: 'calc(100% - 5px)'
+    },
+    rightBottomControls: {
+        position: 'absolute',
+        zIndex: 100,
+        right: '18px',
+        bottom: '16px',
+        display: 'flex',
+        width: '200px'
+    },
+    zoomSlider: {
+        flexGrow: 1,
+        marginRight: '8px'
+    }
+});

package/src/components/GraphLayoutSelector/GraphLayoutSelector.tsx

@@ -0,0 +1,43 @@
+import React, {memo} from 'react';
+import i18n from 'ui-i18n';
+import {propEq} from 'ramda';
+import {DropDownSelector} from '@reltio/components';
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {useStyles} from './styles';
+
+type Props = {
+    value: GraphLayout;
+    onChangeHandler: (value: GraphLayout) => void;
+    graphTypeUri?: string;
+};
+
+const GraphLayoutSelector = ({value, onChangeHandler, graphTypeUri}: Props) => {
+    const styles = useStyles();
+    const layouts = [
+        {label: i18n.text('Simple network'), value: GraphLayout.SIMPLE_NETWORK},
+        {label: i18n.text('Vertical hierarchy'), value: GraphLayout.VERTICAL_TB},
+        {label: i18n.text('Horizontal hierarchy'), value: GraphLayout.HORIZONTAL_LR},
+        {label: i18n.text('Directed network'), value: GraphLayout.DIRECTED_NETWORK},
+        {label: i18n.text('Tree'), value: GraphLayout.TREE}
+    ];
+    const options = graphTypeUri ? layouts : layouts.filter((layout) => layout.value !== GraphLayout.TREE);
+    return (
+        <DropDownSelector
+            className={styles.graphLayoutSelector}
+            label={i18n.text('Graph layout')}
+            value={layouts.find(propEq('value', value))}
+            options={options}
+            onChange={(value) => onChangeHandler(value.value)}
+            TextFieldProps={{
+                InputProps: {
+                    disableUnderline: true,
+                    classes: {
+                        root: styles.filledInputRoot
+                    }
+                }
+            }}
+        />
+    );
+};
+
+export default memo(GraphLayoutSelector);

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import i18n from 'ui-i18n';
+import {GraphLayout} from '@reltio/mdm-sdk';
+import {DropDownSelector} from '@reltio/components';
+import GraphLayoutSelector from '../GraphLayoutSelector';
+
+const props = {
+    value: GraphLayout.HORIZONTAL_LR,
+    onChangeHandler: jest.fn()
+};
+
+describe('GraphLayoutSelector tests', () => {
+    const layouts = [
+        {label: i18n.text('Simple network'), value: GraphLayout.SIMPLE_NETWORK},
+        {label: i18n.text('Vertical hierarchy'), value: GraphLayout.VERTICAL_TB},
+        {label: i18n.text('Horizontal hierarchy'), value: GraphLayout.HORIZONTAL_LR},
+        {label: i18n.text('Directed network'), value: GraphLayout.DIRECTED_NETWORK},
+        {label: i18n.text('Tree'), value: GraphLayout.TREE}
+    ];
+    it('should render DropDownSelector', () => {
+        const optionsWithoutTreeLayout = layouts.filter((layout) => layout.value !== GraphLayout.TREE);
+        const graphTypeComponent = shallow(<GraphLayoutSelector {...props} />);
+        const dropDownComponent = graphTypeComponent.find(DropDownSelector);
+        expect(dropDownComponent).toHaveLength(1);
+        expect(dropDownComponent.prop('label')).toBe('Graph layout');
+        expect(dropDownComponent.prop('value')).toEqual({value: props.value, label: props.value});
+        expect(dropDownComponent.prop('options')).toEqual(optionsWithoutTreeLayout);
+    });
+
+    it('should call onChangeHandler after selecting option', () => {
+        const graphTypeComponent = shallow(<GraphLayoutSelector {...props} />);
+        const dropDownComponent = graphTypeComponent.find(DropDownSelector);
+        dropDownComponent.prop('onChange')({label: GraphLayout.SIMPLE_NETWORK, value: GraphLayout.SIMPLE_NETWORK});
+        expect(props.onChangeHandler).toBeCalledWith(GraphLayout.SIMPLE_NETWORK);
+    });
+
+    it('should add tree layout in options if graphTypeUri exist', () => {
+        const propsWithGraphType = {...props, graphTypeUri: 'graphTypeUri'};
+        const graphTypeComponent = shallow(<GraphLayoutSelector {...propsWithGraphType} />);
+        const dropDownComponent = graphTypeComponent.find(DropDownSelector);
+        expect(dropDownComponent.prop('options')).toEqual(layouts);
+    });
+});

package/src/components/GraphLayoutSelector/styles.ts

@@ -0,0 +1,15 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    graphLayoutSelector: {
+        minWidth: '202px',
+        backgroundColor: '#FAFAFA',
+        opacity: 1,
+        marginLeft: '10px'
+    },
+
+    filledInputRoot: {
+        borderRadius: '4px',
+        height: '42px'
+    }
+});

package/src/components/GraphPerspectiveView/GraphPerspectiveView.tsx

@@ -0,0 +1,58 @@
+import React, {memo} from 'react';
+import {useSelector} from 'react-redux';
+import {pluck} from 'ramda';
+import mdm from '@reltio/mdm-module';
+import {Entity, GraphLayout} from '@reltio/mdm-sdk';
+import {LinearLoadIndicator, ProfileResizablePanes, ScreenProfileBand} from '@reltio/components';
+
+import {useGraphState} from '../../hooks/useGraphState';
+import {useGraphRightSidePanelElements} from '../../hooks/useGraphRightSidePanelElements';
+import {GraphStateContext} from '../../contexts/GraphStateContext';
+import {GraphRightSidePanel} from '../GraphRightSidePanel/GraphRightSidePanel';
+import GraphArea from '../GraphArea/GraphArea';
+
+import {useStyles} from './styles';
+
+type Props = {
+    graphTypeUri?: string;
+    graphLayout?: GraphLayout;
+};
+
+const perspectiveId = 'graph';
+
+const GraphPerspectiveView = memo(({graphTypeUri, graphLayout}: Props) => {
+    const styles = useStyles();
+    const entity: Entity = useSelector(mdm.selectors.getEntity);
+    const graphState = useGraphState(entity, graphTypeUri, graphLayout);
+    const {graphLoading, layout} = graphState;
+
+    const buttonsDisabled = layout === GraphLayout.TREE;
+    const {tabs} = useGraphRightSidePanelElements();
+
+    return (
+        <GraphStateContext.Provider value={graphState}>
+            <div className={styles.perspectiveView}>
+                {graphLoading && <LinearLoadIndicator />}
+                {entity?.uri && (
+                    <div className={styles.graphContainer}>
+                        <ProfileResizablePanes
+                            disabled={buttonsDisabled}
+                            perspectiveId={perspectiveId}
+                            buttonsProps={pluck('buttonProps', tabs)}
+                        >
+                            <div className={styles.graphWrapper}>
+                                <ScreenProfileBand entity={entity} />
+                                <GraphArea />
+                            </div>
+                            <GraphRightSidePanel tabs={tabs} />
+                        </ProfileResizablePanes>
+                    </div>
+                )}
+            </div>
+        </GraphStateContext.Provider>
+    );
+});
+
+GraphPerspectiveView.displayName = 'GraphPerspectiveView';
+
+export default GraphPerspectiveView;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {LinearLoadIndicator, ScreenProfileBand} from '@reltio/components';
+import {Entity, Metadata} from '@reltio/mdm-sdk';
+
+import GraphPerspectiveView from '../GraphPerspectiveView';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import GraphArea from '../../GraphArea/GraphArea';
+import {GraphRightSidePanel} from '../../GraphRightSidePanel/GraphRightSidePanel';
+
+jest.mock('../../GraphArea/GraphArea', () => () => null);
+
+jest.mock('../../GraphRightSidePanel/GraphRightSidePanel', () => ({
+    ...(jest.requireActual('../../GraphRightSidePanel/GraphRightSidePanel') as Record<string, unknown>),
+    default: () => null
+}));
+
+jest.mock('../../../contexts/GraphStateContext', () => ({
+    GraphStateContext: {
+        Provider: jest.fn().mockImplementation(({children}) => <div id="graphStateContextMock">{children}</div>)
+    }
+}));
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ScreenProfileBand: jest.fn(() => null)
+}));
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    removeRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    createRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    getHops: jest.fn().mockReturnValue(Promise.resolve({})),
+    getEntity: jest.fn().mockReturnValue(Promise.resolve({})),
+    getRelation: jest.fn().mockReturnValue(Promise.resolve({})),
+    updateRelation: jest.fn().mockReturnValue(Promise.resolve())
+}));
+
+type CreateStoreProps = {
+    entity?: Entity;
+    metadata?: Metadata;
+};
+const createStore = ({entity, metadata}: CreateStoreProps = {}) => ({
+    profile: {
+        entity: entity || {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        }
+    },
+    tenant: {
+        id: 't1'
+    },
+    metadata: {
+        t1: metadata
+    }
+});
+
+describe('GraphPerspectiveView tests', () => {
+    const dispatch = jest.fn();
+    let store;
+
+    const setUp = (method: typeof shallow | typeof mount = shallow, customStore?) => {
+        store = customStore || createStore();
+        return (method as typeof shallow)(<GraphPerspectiveView />);
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should not render main components if entity uri is not defined in store', () => {
+        const component = setUp(
+            shallow,
+            createStore({
+                entity: {} as Entity
+            })
+        );
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphLoading: false,
+            selectedEntityLoading: false,
+            selectedEntity: null,
+            onEntitySelect: expect.any(Function),
+            graphTypeUri: null
+        });
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(ScreenProfileBand)).toHaveLength(0);
+        expect(component.find(GraphArea)).toHaveLength(0);
+        expect(component.find(GraphRightSidePanel)).toHaveLength(0);
+    });
+
+    it('should render main components if entity uri is defined in store', () => {
+        const component = setUp();
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            data: null,
+            graphTypeUri: null,
+            graphLoading: false,
+            selectedEntityLoading: false,
+            selectedEntity: null,
+            onEntitySelect: expect.any(Function)
+        });
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(ScreenProfileBand)).toHaveLength(1);
+        expect(component.find(GraphArea)).toHaveLength(1);
+        expect(component.find(GraphRightSidePanel)).toHaveLength(1);
+    });
+});