@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsFiltersDialog/__tests__/RelationshipsFilterDialog.test.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {EntityTypesSelector, RelationTypesSelector} from '@reltio/components';
+import RelationshipsFiltersDialog from '../RelationshipsFiltersDialog';
+import {GraphStateContext} from '../../../../../../contexts/GraphStateContext';
+import {GraphState, Filters} from '../../../../../../types/graphDataTypes';
+import Button from '@mui/material/Button';
+import {act} from 'react-dom/test-utils';
+
+jest.mock('@reltio/components', () => {
+    const originalModule = jest.requireActual('@reltio/components');
+    return {
+        ...originalModule,
+        EntityTypesSelector: () => null,
+        RelationTypesSelector: () => null
+    };
+});
+
+const onFilter = jest.fn() as (filters: Filters) => void;
+
+const entityTypes = [
+    {
+        uri: 'configuration/entityTypes/HCP',
+        label: 'HCP',
+        extendsTypeURI: 'configuration/entityTypes/Individual',
+        abstract: false
+    },
+    {
+        uri: 'configuration/entityTypes/Individual',
+        label: 'Individual',
+        extendsTypeURI: 'configuration/entityTypes/Party',
+        abstract: false
+    }
+];
+
+const relationTypes = [
+    {
+        uri: 'configuration/relationTypes/Family',
+        label: 'Family',
+        startObject: {
+            uri: 'configuration/relationTypes/Family/startObject',
+            objectTypeURI: 'configuration/entityTypes/Individual'
+        },
+        endObject: {
+            uri: 'configuration/relationTypes/Family/endObject',
+            objectTypeURI: 'configuration/entityTypes/Individual'
+        }
+    },
+    {
+        uri: 'configuration/relationTypes/HeadMatMgmnt',
+        label: 'Head of Materials Management',
+        startObject: {
+            uri: 'configuration/relationTypes/HeadMatMgmnt/startObject',
+            objectTypeURI: 'configuration/entityTypes/HCP'
+        },
+        endObject: {
+            uri: 'configuration/relationTypes/HeadMatMgmnt/endObject',
+            objectTypeURI: 'configuration/entityTypes/HCO'
+        }
+    }
+];
+
+const setUp = ({
+    open = true,
+    graphTypeUri = null,
+    filters = {entityTypesUris: [], relationTypesUris: []},
+    onClose = jest.fn()
+} = {}) =>
+    mount(
+        <GraphStateContext.Provider
+            value={
+                {
+                    graphTypeUri,
+                    relationshipTable: {
+                        filters,
+                        onFilter,
+                        entityTypesOptions: entityTypes,
+                        relationTypesOptions: relationTypes
+                    }
+                } as GraphState
+            }
+        >
+            <RelationshipsFiltersDialog onClose={onClose} open={open} />
+        </GraphStateContext.Provider>
+    );
+
+describe('RelationshipsFilterDialog tests', () => {
+    it('should render RelationTypesSelector with correctly relationTypes', () => {
+        const component = setUp();
+        expect(component.find(RelationTypesSelector).prop('relationTypes')).toEqual(relationTypes);
+    });
+
+    it('should render EntityTypesSelector with correctly entityTypes', () => {
+        const component = setUp();
+        expect(component.find(EntityTypesSelector).prop('entityTypes')).toEqual(entityTypes);
+    });
+
+    it('handleCancel handler should work correctly', () => {
+        const onClose = jest.fn();
+        const component = setUp({onClose});
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([]);
+
+        act(() => {
+            component.find(EntityTypesSelector).prop('onChange')(['configuration/entityTypes/HCP']);
+            component.find(RelationTypesSelector).prop('onChange')(['configuration/relationTypes/Family']);
+        });
+
+        component.update();
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([
+            'configuration/entityTypes/HCP'
+        ]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([
+            'configuration/relationTypes/Family'
+        ]);
+
+        act(() => {
+            component.find('.footer').find(Button).at(1).prop('onClick')(null);
+        });
+
+        component.update();
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([]);
+
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('handleClear handler should work correctly', () => {
+        const onClose = jest.fn();
+        const component = setUp({onClose});
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([]);
+
+        act(() => {
+            component.find(EntityTypesSelector).prop('onChange')(['configuration/entityTypes/HCP']);
+            component.find(RelationTypesSelector).prop('onChange')(['configuration/relationTypes/Family']);
+        });
+
+        component.update();
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([
+            'configuration/entityTypes/HCP'
+        ]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([
+            'configuration/relationTypes/Family'
+        ]);
+
+        act(() => {
+            component.find('.footer').find(Button).at(0).prop('onClick')(null);
+        });
+
+        component.update();
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([]);
+    });
+
+    it('handleApply handler should work correctly', () => {
+        const onClose = jest.fn();
+        const component = setUp({onClose});
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([]);
+
+        act(() => {
+            component.find(EntityTypesSelector).prop('onChange')(['configuration/entityTypes/HCP']);
+            component.find(RelationTypesSelector).prop('onChange')(['configuration/relationTypes/Family']);
+        });
+
+        component.update();
+
+        expect(component.find(EntityTypesSelector).prop('selectedEntityTypes')).toEqual([
+            'configuration/entityTypes/HCP'
+        ]);
+        expect(component.find(RelationTypesSelector).prop('selectedRelationTypes')).toEqual([
+            'configuration/relationTypes/Family'
+        ]);
+
+        act(() => {
+            component.find('.footer').find(Button).at(2).prop('onClick')(null);
+        });
+
+        expect(onFilter).toHaveBeenCalledWith({
+            entityTypesUris: ['configuration/entityTypes/HCP'],
+            relationTypesUris: ['configuration/relationTypes/Family']
+        });
+    });
+});

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsFiltersDialog/styles.ts

@@ -0,0 +1,34 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    dialogPaper: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '12px 16px 8px'
+    },
+    title: {
+        marginBottom: '21px',
+        fontWeight: 500,
+        fontSize: '20px',
+        lineHeight: '23px',
+        letterSpacing: '0.25px',
+        color: theme.palette.text.primary
+    },
+    entityTypesSelector: {
+        width: '468px',
+        marginBottom: '20px'
+    },
+    relationTypesSelector: {
+        width: '468px',
+        marginBottom: '32px'
+    },
+    footer: {
+        display: 'flex'
+    },
+    clearAllButton: {
+        marginRight: 'auto'
+    },
+    cancelButton: {
+        marginRight: '8px'
+    }
+}));

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsSearchTextField/RelationshipsSearchTextField.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {pipe, pick, prop} from 'ramda';
+import {SearchInput, withContext} from '@reltio/components';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {useStyles} from './styles';
+import {RelationshipTableState} from '../../../../../types/graphDataTypes';
+
+type Props = Partial<Pick<RelationshipTableState, 'searchText' | 'onChangeSearchText'>>;
+
+const RelationshipsSearchTextField = ({searchText, onChangeSearchText}: Props) => {
+    const styles = useStyles();
+
+    return (
+        <SearchInput
+            fullWidth
+            height={40}
+            autofocus={false}
+            value={searchText}
+            onSearch={onChangeSearchText}
+            placeholder={i18n.text('Search profiles')}
+            classes={{input: styles.input}}
+        />
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    pipe(prop('relationshipTable'), pick(['searchText', 'onChangeSearchText'])),
+    RelationshipsSearchTextField
+);

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsSearchTextField/__tests__/RelationshipsSearchTextField.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {SearchInput} from '@reltio/components';
+import RelationshipsSearchTextField from '../RelationshipsSearchTextField';
+import {GraphStateContext} from '../../../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../../../types/graphDataTypes';
+import {act} from 'react-dom/test-utils';
+
+const onChangeSearchText = jest.fn();
+
+const setUp = ({searchText = ''} = {}) =>
+    mount(
+        <GraphStateContext.Provider
+            value={
+                {
+                    relationshipTable: {
+                        searchText,
+                        onChangeSearchText: onChangeSearchText as (value: string) => void
+                    }
+                } as GraphState
+            }
+        >
+            <RelationshipsSearchTextField />
+        </GraphStateContext.Provider>
+    );
+
+describe('RelationshipsSearchTextField tests', () => {
+    it('should pass searchText correctly', () => {
+        const searchText = 'some value';
+        const component = setUp({searchText});
+        expect(component.find(SearchInput).prop('value')).toBe(searchText);
+    });
+
+    it('onChangeTextFilter handler should work correctly', () => {
+        const component = setUp();
+
+        act(() => {
+            component.find(SearchInput).prop('onSearch')('changed value');
+        });
+
+        expect(onChangeSearchText).toHaveBeenCalledWith('changed value');
+    });
+});

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsSearchTextField/styles.ts

@@ -0,0 +1,17 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    inactiveSearchIcon: {
+        color: theme.palette.text.secondary
+    },
+    activeSearchIcon: {
+        color: theme.palette.text.primary
+    },
+    input: {
+        fontSize: '14px',
+        '&::placeholder': {
+            color: `${theme.palette.text.secondary} !important`,
+            opacity: 1
+        }
+    }
+}));

package/src/components/RightPanelRelationship/components/RelationshipsFilters/__tests__/RelationshipsFilters.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {EmptyStub} from '@reltio/components';
+import IconButton from '@mui/material/IconButton';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import RelationshipsFilters from '../RelationshipsFilters';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../../types/graphDataTypes';
+import RelationshipsFiltersDialog from '../RelationshipsFiltersDialog/RelationshipsFiltersDialog';
+import RelationshipsSearchTextField from '../RelationshipsSearchTextField/RelationshipsSearchTextField';
+import {act} from 'react-dom/test-utils';
+
+jest.mock('../RelationshipsFiltersDialog/RelationshipsFiltersDialog', () => jest.fn());
+jest.mock('../RelationshipsSearchTextField/RelationshipsSearchTextField', () => jest.fn());
+jest.mock('@mui/icons-material/FilterList', () => jest.fn());
+
+const setUp = ({filters = {entityTypesUris: [], relationTypesUris: []}} = {}) =>
+    mount(
+        <GraphStateContext.Provider
+            value={
+                {
+                    relationshipTable: {
+                        filters
+                    }
+                } as GraphState
+            }
+        >
+            <RelationshipsFilters />
+        </GraphStateContext.Provider>
+    );
+
+describe('Relationships tests', () => {
+    beforeAll(() => {
+        ((RelationshipsFiltersDialog as unknown) as jest.Mock).mockImplementation(EmptyStub);
+        ((RelationshipsSearchTextField as unknown) as jest.Mock).mockImplementation(EmptyStub);
+        ((FilterListIcon as unknown) as jest.Mock).mockImplementation(EmptyStub);
+    });
+
+    it('should render main parts correctly', () => {
+        const component = setUp();
+        expect(component.find(RelationshipsFiltersDialog)).toHaveLength(1);
+        expect(component.find(RelationshipsSearchTextField)).toHaveLength(1);
+        expect(component.find(IconButton)).toHaveLength(1);
+    });
+
+    it('should apply correct className for FilterListIcon if has applied filters', () => {
+        const component = setUp({filters: {entityTypesUris: ['configuration/entityTypes/HCP'], relationTypesUris: []}});
+        expect(component.find(FilterListIcon).prop('className')).toBe('activeFiltersIcon');
+    });
+
+    it('should apply correct className for FilterListIcon if has not applied filters', () => {
+        const component = setUp();
+        expect(component.find(FilterListIcon).prop('className')).toBe('inactiveFiltersIcon');
+    });
+
+    it('handleOpenDialog and handleCloseDialog handlers should work correctly', () => {
+        const component = setUp();
+        expect(component.find(RelationshipsFiltersDialog).prop('open')).toBe(false);
+
+        act(() => {
+            component.find(IconButton).prop('onClick')(null);
+        });
+
+        component.update();
+
+        expect(component.find(RelationshipsFiltersDialog).prop('open')).toBe(true);
+
+        act(() => {
+            component.find(RelationshipsFiltersDialog).prop('onClose')();
+        });
+
+        component.update();
+
+        expect(component.find(RelationshipsFiltersDialog).prop('open')).toBe(false);
+    });
+});

package/src/components/RightPanelRelationship/components/RelationshipsFilters/styles.ts

@@ -0,0 +1,19 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: '16px',
+        paddingRight: '2px'
+    },
+    iconButton: {
+        marginLeft: '4px'
+    },
+    activeFiltersIcon: {
+        color: theme.palette.primary.main
+    },
+    inactiveFiltersIcon: {
+        color: theme.palette.text.secondary
+    }
+}));

package/src/components/RightPanelRelationship/styles.ts

@@ -0,0 +1,20 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    caption: {
+        marginLeft: '16px',
+        marginTop: '12px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '14px',
+        fontSize: '16px',
+        lineHeight: '24px'
+    },
+    wrapper: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        height: 0
+    }
+});

package/src/components/SigmaCustomRenderers/SigmaCustomRenderersContainer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {useSigmaCustomRenderers} from '../../hooks/useSigmaCustomRenderers';
+import {SigmaCustomRenderersContext} from '../../contexts/SigmaCustomRenderersContext';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const SigmaCustomRenderersContainer = ({children}: Props) => {
+    const sigmaCustomRenderers = useSigmaCustomRenderers();
+    return (
+        <SigmaCustomRenderersContext.Provider value={sigmaCustomRenderers}>
+            {children}
+        </SigmaCustomRenderersContext.Provider>
+    );
+};

package/src/components/SigmaGraphContainer/SigmaGraphContainer.tsx

@@ -0,0 +1,55 @@
+import React, {useMemo} from 'react';
+import {MultiGraph} from 'graphology';
+import {SigmaContainer} from '@react-sigma/core';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import {createNodeCompoundProgram} from 'sigma/rendering/webgl/programs/common/node';
+import {createEdgeCompoundProgram} from 'sigma/rendering/webgl/programs/common/edge';
+import LineEdgeProgram from 'sigma/rendering/webgl/programs/edge';
+import {SigmaCustomRenderersContainer} from '../SigmaCustomRenderers/SigmaCustomRenderersContainer';
+import {drawHover} from '../../rendering/canvas/hover';
+import {drawLabel} from '../../rendering/canvas/label';
+import NodeProgramBorder from '../../rendering/webgl/node.border';
+import NodeImageProgram from '../../rendering/webgl/node.image';
+import NodeButtonsProgram from '../../rendering/webgl/node.buttons';
+import EdgeArrowHeadProgram from '../../rendering/webgl/edge.arrowHead';
+import EdgeReversedArrowHeadProgram from '../../rendering/webgl/edge.reversedArrowHead';
+import EdgeClampedProgram from '../../rendering/webgl/edge.clamped';
+
+type Props = {
+    children: React.ReactElement;
+};
+
+export const SigmaGraphContainer = ({children}: Props) => {
+    const initialSettings = useMemo(
+        () => ({
+            allowInvalidContainer: true,
+            defaultNodeType: 'image',
+            hoverRenderer: drawHover,
+            labelRenderer: drawLabel,
+            nodeProgramClasses: {
+                image: createNodeCompoundProgram([NodeImageProgram, NodeProgramBorder, NodeButtonsProgram])
+            },
+            edgeProgramClasses: {
+                line: LineEdgeProgram,
+                arrow: createEdgeCompoundProgram([EdgeClampedProgram, EdgeArrowHeadProgram]),
+                doubleArrow: createEdgeCompoundProgram([
+                    EdgeClampedProgram,
+                    EdgeArrowHeadProgram,
+                    EdgeReversedArrowHeadProgram
+                ])
+            },
+            labelFont: 'Roboto',
+            labelSize: 13,
+            labelColor: {
+                color: 'rgba(0, 0, 0, 0.87)'
+            }
+        }),
+        []
+    );
+
+    return (
+        <SigmaContainer graph={MultiGraph} style={{background: 'transparent'}} settings={initialSettings}>
+            <SigmaCustomRenderersContainer>{children}</SigmaCustomRenderersContainer>
+        </SigmaContainer>
+    );
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SigmaContainer} from '@react-sigma/core';
+import {MultiGraph} from 'graphology';
+import {SigmaGraphContainer} from '../SigmaGraphContainer';
+import {SigmaCustomRenderersContainer} from '../../SigmaCustomRenderers/SigmaCustomRenderersContainer';
+
+const children = <div className="children">children</div>;
+
+const setUp = () => shallow(<SigmaGraphContainer>{children}</SigmaGraphContainer>);
+
+describe('SigmaGraphContainer behavior', () => {
+    it('should render SigmaContainer with passed children', () => {
+        const component = setUp();
+        expect(component.find(SigmaContainer)).toHaveLength(1);
+        expect(component.find(SigmaContainer).prop('graph')).toBe(MultiGraph);
+        expect(component.find(SigmaContainer).find(SigmaCustomRenderersContainer).prop('children')).toBe(children);
+    });
+
+    it('should render SigmaContainer with initialSettings', () => {
+        const component = setUp();
+        expect(component.find(SigmaContainer)).toHaveLength(1);
+        expect(component.find(SigmaContainer).prop('settings')).not.toBeUndefined();
+    });
+});

package/src/components/SigmaGraphResizer/SigmaGraphResizer.tsx

@@ -0,0 +1,13 @@
+import React, {useCallback} from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import {useSigma} from '@react-sigma/core';
+
+const SigmaGraphResizer = () => {
+    const sigma = useSigma();
+    const onResize = useCallback(() => {
+        sigma.refresh();
+    }, [sigma]);
+    return <ReactResizeDetector handleWidth onResize={onResize} />;
+};
+
+export default SigmaGraphResizer;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import ReactResizeDetector from 'react-resize-detector';
+import {useSigma} from '@react-sigma/core';
+import SigmaGraphResizer from '../SigmaGraphResizer';
+
+jest.mock('@react-sigma/core', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@react-sigma/core'),
+    useSigma: jest.fn().mockReturnValue({
+        refresh: jest.fn()
+    })
+}));
+
+const setUp = () => shallow(<SigmaGraphResizer />);
+
+describe('SigmaGraphResizer behavior', () => {
+    it('should render ReactResizeDetector', () => {
+        const component = setUp();
+        expect(component.find(ReactResizeDetector)).toHaveLength(1);
+    });
+
+    it('should refresh sigma instance on resize', () => {
+        const component = setUp();
+        expect(useSigma().refresh).not.toHaveBeenCalled();
+        (component.find(ReactResizeDetector).prop('onResize') as () => void)();
+        expect(useSigma().refresh).toHaveBeenCalled();
+    });
+});

package/src/components/TreeLayout/TreeLayout.tsx

@@ -0,0 +1,33 @@
+import React, {useContext, useMemo} from 'react';
+import {ReactReduxContext, useSelector} from 'react-redux';
+import {propEq} from 'ramda';
+import {Entity, getGraphTypesForEntityType, ProfileViewTypes} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import {HierarchyTreeView} from '@reltio/hierarchy-tree';
+import {useStyles} from './styles';
+
+type Props = {
+    graphTypeUri: string;
+};
+
+const TreeLayout = ({graphTypeUri}: Props) => {
+    const styles = useStyles();
+    const {store} = useContext(ReactReduxContext);
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entity: Entity = useSelector(mdmModule.selectors.getEntity);
+    const caption = getGraphTypesForEntityType(metadata, entity.type).find(propEq('uri', graphTypeUri))?.label;
+    const config = useMemo(
+        () => ({
+            id: '___graphView___',
+            class: ProfileViewTypes.HierarchyTree,
+            graph: {
+                type: graphTypeUri
+            },
+            caption
+        }),
+        [caption, graphTypeUri]
+    );
+    return <HierarchyTreeView config={config} store={store} className={styles.hierarchyTree} isGraphView={true} />;
+};
+
+export default TreeLayout;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {HierarchyTreeView} from '@reltio/hierarchy-tree';
+import TreeLayout from '../TreeLayout';
+import {ProfileViewTypes} from '@reltio/mdm-sdk';
+
+const store = {};
+const graphTypeUri = 'graphTypeUri';
+const label = 'graph type label';
+
+jest.mock('react', () => ({
+    ...jest.requireActual<Record<string, unknown>>('react'),
+    useContext: () => ({
+        store
+    })
+}));
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getGraphTypesForEntityType: jest.fn().mockReturnValue([{uri: 'graphTypeUri', label}])
+}));
+
+describe('TreeLayout tests', () => {
+    it('should render HierarchyTreeView', () => {
+        jest.spyOn(reactRedux, 'useSelector').mockReturnValue({});
+        const config = {
+            id: '___graphView___',
+            class: ProfileViewTypes.HierarchyTree,
+            graph: {
+                type: graphTypeUri
+            },
+            caption: label
+        };
+        const treeLayoutComponent = shallow(<TreeLayout graphTypeUri={graphTypeUri} />);
+        const hierarchyTreeViewComponent = treeLayoutComponent.find(HierarchyTreeView);
+        expect(hierarchyTreeViewComponent).toHaveLength(1);
+        expect(hierarchyTreeViewComponent.prop('config')).toEqual(config);
+        expect(hierarchyTreeViewComponent.prop('store')).toEqual(store);
+        expect(hierarchyTreeViewComponent.prop('isGraphView')).toBeTruthy();
+    });
+});

package/src/components/TreeLayout/styles.ts

@@ -0,0 +1,10 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    hierarchyTree: {
+        position: 'relative',
+        width: 'calc(100% - 190px)',
+        margin: '80px 95px 0',
+        height: 'calc(100% - 100px)'
+    }
+});