@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/HierarchyPathsView/__tests__/Node.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import {render, screen, fireEvent} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {ui} from '@reltio/mdm-module';
+import {UrlGeneratorsContext} from '@reltio/components';
+import {Node} from '../Node';
+import {ConfigContext} from '../ConfigContext';
+import DEFAULT_ICON from '../defaultTypeIcon.png';
+
+const {ProfileViewTypes} = mdmSdk;
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getEntity: jest.fn()
+}));
+
+const config = {
+    id: 'com.reltio.plugins.entity.HierarchyPathsView.78fe-51a8-c9d00c59',
+    class: ProfileViewTypes.HierarchyPaths,
+    caption: 'caption',
+    graph: {
+        type: 'configuration/graphTypes/PharmaCompanyHierarchy'
+    }
+};
+
+const entity = {
+    uri: 'entities/1HonRdLo',
+    type: 'configuration/entityTypes/OrganizationM',
+    label: 'NATALINE DILCHAND',
+    secondaryLabel: 'secondary label'
+};
+
+const node = {
+    entity,
+    nodeId: 31,
+    expanded: false,
+    root: false,
+    children: []
+};
+
+const setUp = (ui) => {
+    const user = userEvent.setup();
+    const generateEntityUrl = ({uri, screen = 'profile'}) => `nui/aleant/${screen}?entityUri=${uri}`;
+    const urlGenerators = {generateEntityUrl};
+
+    const Providers = ({children}: {children: React.ReactNode}) => {
+        return (
+            <UrlGeneratorsContext.Provider value={urlGenerators}>
+                <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+            </UrlGeneratorsContext.Provider>
+        );
+    };
+
+    return {user, ...render(ui, {wrapper: Providers})};
+};
+
+describe('Node', () => {
+    const dispatch = jest.fn();
+    let store;
+
+    beforeEach(() => {
+        store = {
+            metadata: {
+                sokol: {
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/OrganizationM',
+                            typeGraphIcon: 'images/graphIcon/Client.png'
+                        },
+                        {
+                            uri: 'configuration/entityTypes/HCP'
+                        }
+                    ]
+                }
+            },
+            tenant: {
+                id: 'sokol'
+            },
+            profile: {entity},
+            ui: {
+                paths: {
+                    uiPath: 'http://localhost:3000/ui/sokol/',
+                    imagePath: 'https://s3.amazonaws.com/reltio.images/api'
+                }
+            }
+        };
+        jest.spyOn(mdmSdk, 'getEntity').mockResolvedValue(entity);
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should show entityTypeGraphIcon if entityType has it', () => {
+        setUp(<Node node={node} />);
+        const expectedImageSrc = 'https://s3.amazonaws.com/reltio.images/api/images/graphIcon/Client.png';
+        expect(screen.getByAltText('Node icon')).toHaveAttribute('src', expectedImageSrc);
+    });
+
+    it('should show default pic if an error occurred during the download image', () => {
+        setUp(<Node node={node} />);
+        fireEvent.error(screen.getByAltText('Node icon'));
+        expect(screen.getByAltText('Node icon')).toHaveAttribute('src', DEFAULT_ICON);
+    });
+
+    it('should show default pic if entityType has not typeGraphIcon', () => {
+        const newEntity = {...entity, type: 'configuration/entityTypes/HCP', uri: 'entities/123'};
+        const newNode = {...node, entity: newEntity};
+        store.profile.entity = newEntity;
+        setUp(<Node node={newNode} />);
+        expect(screen.getByAltText('Node icon')).toHaveAttribute('src', DEFAULT_ICON);
+    });
+
+    it('should show popup with entity details on hover on title', async () => {
+        const {user} = setUp(<Node node={node} />);
+        await user.hover(screen.getByText('NATALINE DILCHAND'));
+        await screen.findByRole('tooltip');
+    });
+
+    it('should display anchor with correct title and link', () => {
+        setUp(<Node node={node} />);
+        expect(screen.getByRole('link')).toHaveTextContent('NATALINE DILCHAND');
+        expect(screen.getByRole('link')).toHaveAttribute('href', 'nui/aleant/profile?entityUri=entities/1HonRdLo');
+    });
+
+    it('should call dispatch with correct payload', async () => {
+        const {user} = setUp(<Node node={node} />);
+        await user.click(screen.getByRole('link'));
+        expect(dispatch).toHaveBeenCalledWith(ui.actions.openEntity({uri: entity.uri, viewId: config.id}));
+    });
+
+    it('should select title if node uri is equal to current entity uri', () => {
+        setUp(<Node node={node} />);
+        expect(screen.getByTestId('reltio-hierarchy-node-title')).toHaveClass('selected');
+    });
+
+    it('should not select title if node uri is not equal to current entity uri', () => {
+        const newNode = {...node, entity: {...node.entity, uri: 'entities/other'}};
+        setUp(<Node node={newNode} />);
+        expect(screen.getByTestId('reltio-hierarchy-node-title')).not.toHaveClass('selected');
+    });
+
+    it('should set <No label> title if there is no label in the entity', () => {
+        const newNode = {...node, entity: {...node.entity, label: ''}};
+        setUp(<Node node={newNode} />);
+        expect(screen.getByRole('link')).toHaveTextContent('<No label>');
+    });
+});

package/src/components/HierarchyPathsView/__tests__/data/metadata.data.ts

@@ -0,0 +1,33 @@
+export const getMetadata = ({tenant}) => ({
+    [tenant]: {
+        uri: 'configuration',
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+                        name: 'FirstLevelNested',
+                        type: 'Nested',
+                        attributes: [
+                            {
+                                label: 'FirstLevelNestedSub1_HCP',
+                                name: 'FirstLevelNestedSub1',
+                                uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+                                type: 'String',
+                                required: true
+                            }
+                        ]
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        name: 'CountryCode',
+                        type: 'String'
+                    }
+                ],
+                analyticsAttributes: []
+            }
+        ],
+        relationTypes: []
+    }
+});

package/src/components/HierarchyPathsView/__tests__/data/store.data.ts

@@ -0,0 +1,37 @@
+import {Mode} from '@reltio/mdm-sdk';
+import {getMetadata} from './metadata.data';
+
+export const createInitialState = ({mode = Mode.Viewing} = {}) => {
+    const tenant = 't1';
+    return {
+        metadata: getMetadata({tenant}),
+        profile: {
+            entity: {
+                uri: 'entities/1HonRdLo',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'NATALINE DILCHAND'
+            },
+            modifiedEntities: {},
+            views: [],
+            history: {},
+            mode
+        },
+        tenant: {
+            id: tenant
+        },
+        ui: {
+            paths: {
+                apiPath: 'https://tst-01.reltio.com/reltio'
+            }
+        },
+        search: {
+            searchOptions: {
+                searchByOv: true,
+                ovOnly: true
+            },
+            globalFilter: {
+                query: null
+            }
+        }
+    };
+};

package/src/components/HierarchyPathsView/__tests__/data/treePaths.data.ts

@@ -0,0 +1,63 @@
+export const createTreePaths = () => {
+    return {
+        entities: {
+            'entities/1HonRdLo': {
+                uri: 'entities/1HonRdLo',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'NATALINE DILCHAND'
+            },
+            'entities/1WFdeovr': {
+                uri: 'entities/1WFdeovr',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'MainRoot Test 100 levels'
+            },
+            'entities/1WFdfAF9': {
+                uri: 'entities/1WFdfAF9',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'PHILIS AURELIO\r'
+            },
+            'entities/1WFdf1id': {
+                uri: 'entities/1WFdf1id',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'JANINE GSTOHL\r'
+            },
+            'entities/pO7S74k': {
+                uri: 'entities/pO7S74k',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'Name_0_1'
+            },
+            'entities/1WFdfEVP': {
+                uri: 'entities/1WFdfEVP',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'AME HANINGTON\r'
+            }
+        },
+        parentPaths: [
+            [
+                {
+                    entityUri: 'entities/1HonRdLo'
+                },
+                {
+                    entityUri: 'entities/1WFdfAF9'
+                },
+                {
+                    entityUri: 'entities/1WFdf1id'
+                },
+                {
+                    entityUri: 'entities/1WFdeovr'
+                }
+            ],
+            [
+                {
+                    entityUri: 'entities/1HonRdLo'
+                },
+                {
+                    entityUri: 'entities/pO7S74k'
+                },
+                {
+                    entityUri: 'entities/1WFdfEVP'
+                }
+            ]
+        ]
+    };
+};

package/src/components/HierarchyPathsView/helpers.ts

@@ -0,0 +1,3 @@
+import {Node} from './types';
+
+export const getNodeKey = ({node}: {node: Node}) => node.nodeId;

package/src/components/HierarchyPathsView/hooks/useDynamicNodesHeights.ts

@@ -0,0 +1,33 @@
+import {useCallback, useState} from 'react';
+import {assoc} from 'ramda';
+
+import {theme} from '../theme';
+import {Node} from '../types';
+import {getNodeKey} from '../helpers';
+
+type HeightsCache = {[nodeId: Node['nodeId']]: number};
+
+const getCacheKey = (node: Node) => getNodeKey({node});
+
+export const useDynamicNodesHeights = () => {
+    const [heightsCache, setHeightsCache] = useState<HeightsCache>({});
+    const clearHeightsCache = useCallback(() => {
+        setHeightsCache({});
+    }, []);
+    const onResize = useCallback(
+        (node: Node) => (_, height) => {
+            setHeightsCache((prevCache) =>
+                prevCache[getCacheKey(node)] !== height ? assoc(getCacheKey(node), height, prevCache) : prevCache
+            );
+        },
+        []
+    );
+    const getRowHeight = useCallback(
+        ({node}: {node: Node}): number =>
+            heightsCache[getCacheKey(node)]
+                ? Math.max(heightsCache[getCacheKey(node)], theme.rowHeight)
+                : theme.rowHeight,
+        [heightsCache]
+    );
+    return {onResize, getRowHeight, clearHeightsCache};
+};

package/src/components/HierarchyPathsView/hooks/useLoadPaths.ts

@@ -0,0 +1,76 @@
+import {useEffect, useState} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {pick, prop} from 'ramda';
+import {Entity, getPathsTree, getRequestErrorMessage, isTempUri, updateTreesWithNewEntity} from '@reltio/mdm-sdk';
+import {useDidUpdateEffect, useSafePromise} from '@reltio/components';
+import {Response, Node} from '../types';
+
+let nodeCounter = 0;
+export const generateId = () => nodeCounter++;
+
+const processResponse = (response: Response) => {
+    const fakeRoot = {
+        children: [] as Node[],
+        nodeId: generateId()
+    };
+    if (response.parentPaths) {
+        for (let i = 0; i < response.parentPaths.length; i++) {
+            const path = response.parentPaths[i];
+            let nextRoot = fakeRoot;
+            for (let j = path.length - 1; j >= 0; j--) {
+                const nextParent = path[j];
+                const entity = response.entities[nextParent.entityUri];
+                const isRoot = j === path.length - 1;
+                const node: Node = {
+                    entity,
+                    children: [],
+                    nodeId: generateId(),
+                    expanded: true,
+                    rootIndex: isRoot ? i + 1 : undefined
+                };
+                if (isRoot) {
+                    node.root = isRoot;
+                }
+                nextRoot.children.push(node);
+                nextRoot = node;
+            }
+        }
+    }
+    return fakeRoot.children;
+};
+export const useLoadPaths = (entityUri: string, graphUri: string) => {
+    const safePromise = useSafePromise();
+    const [isLoading, setIsLoading] = useState(false);
+    const [treeData, setTreeData] = useState<Node[]>([]);
+    const [errorMessage, setErrorMessage] = useState<string>(null);
+    const entity: Entity = useSelector(mdmModule.selectors.getEntity);
+    useDidUpdateEffect(() => {
+        const forest = treeData
+            .map((tree, index) => ({tree, index}))
+            .reduce((acc, tree) => ({...acc, [tree.index]: {root: tree.tree}}), {});
+        const newTrees = updateTreesWithNewEntity(pick(['uri', 'label', 'secondaryLabel', 'type'], entity), forest);
+        setTreeData(newTrees.map(prop('root')));
+    }, [entity?.updatedTime]);
+    useEffect(() => {
+        if (!isTempUri(entityUri)) {
+            setErrorMessage(null);
+            setIsLoading(true);
+            safePromise(getPathsTree({uri: entityUri, graphUri}))
+                .then(processResponse)
+                .then(setTreeData)
+                .catch((e) => {
+                    console.warn(e);
+                    setErrorMessage(getRequestErrorMessage(e, i18n.text('Something went wrong')));
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        }
+        return () => {
+            setTreeData([]);
+        };
+    }, [entityUri, graphUri, safePromise]);
+    return {isLoading, treeData, setTreeData, errorMessage};
+};

package/src/components/HierarchyPathsView/icons/ShowGraph.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
+    <title>Combined Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.54">
+        <path d="M14.5,5 C13.6715729,5 13,4.32842712 13,3.5 C13,2.67157288 13.6715729,2 14.5,2 C15.3284271,2 16,2.67157288 16,3.5 C16,4.32842712 15.3284271,5 14.5,5 Z M18.5,10 C17.6715729,10 17,9.32842712 17,8.5 C17,7.67157288 17.6715729,7 18.5,7 C19.3284271,7 20,7.67157288 20,8.5 C20,9.32842712 19.3284271,10 18.5,10 Z M1.5,11 C0.671572875,11 0,10.3284271 0,9.5 C0,8.67157288 0.671572875,8 1.5,8 C2.32842712,8 3,8.67157288 3,9.5 C3,10.3284271 2.32842712,11 1.5,11 Z M4,4 C2.8954305,4 2,3.1045695 2,2 C2,0.8954305 2.8954305,0 4,0 C5.1045695,0 6,0.8954305 6,2 C6,3.1045695 5.1045695,4 4,4 Z M5,20 C3.8954305,20 3,19.1045695 3,18 C3,16.8954305 3.8954305,16 5,16 C6.1045695,16 7,16.8954305 7,18 C7,19.1045695 6.1045695,20 5,20 Z M9.5,14 C7.01471863,14 5,11.9852814 5,9.5 C5,7.01471863 7.01471863,5 9.5,5 C11.9852814,5 14,7.01471863 14,9.5 C14,11.9852814 11.9852814,14 9.5,14 Z M9.5,12 C10.8807119,12 12,10.8807119 12,9.5 C12,8.11928813 10.8807119,7 9.5,7 C8.11928813,7 7,8.11928813 7,9.5 C7,10.8807119 8.11928813,12 9.5,12 Z M15.5,17 C14.6715729,17 14,16.3284271 14,15.5 C14,14.6715729 14.6715729,14 15.5,14 C16.3284271,14 17,14.6715729 17,15.5 C17,16.3284271 16.3284271,17 15.5,17 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/src/components/HierarchyPathsView/index.ts

@@ -0,0 +1 @@
+export {HierarchyPathsView} from './HierarchyPathsView';

package/src/components/HierarchyPathsView/styles.ts

@@ -0,0 +1,60 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    container: {
+        fontSize: '13px',
+        display: 'flex',
+        paddingTop: '6px',
+        position: 'relative'
+    },
+    title: {
+        flexGrow: 1,
+        minHeight: '15px',
+        color: theme.palette.primary.main,
+        lineHeight: '15px'
+    },
+    wrapper: {
+        width: '100%'
+    },
+    avatar: {
+        height: '16px',
+        width: '16px',
+        marginRight: '8px',
+        marginLeft: '8px'
+    },
+    header: {
+        padding: '0 4px 0 16px'
+    },
+    treeContainer: {
+        flexGrow: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: '372px',
+        maxHeight: '507px',
+        overflow: 'auto'
+    },
+    tree: {
+        flexGrow: 1,
+        height: 0
+    },
+    buttonsContainer: {
+        flexShrink: 0,
+        marginLeft: 'auto',
+        '& > * + *': {
+            marginLeft: '-4px'
+        }
+    },
+    button: {
+        padding: '8px'
+    },
+    errorMessage: {
+        fontSize: '13px',
+        margin: '0 16px 0',
+        lineHeight: '1.4',
+        color: theme.palette.text.secondary
+    },
+    linearIndicator: {
+        top: '42px'
+    }
+}));

package/src/components/HierarchyPathsView/theme/__tests__/node-content-renderer.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import NodeContentRenderer from '../node-content-renderer';
+
+const node = {
+    entity: {
+        uri: 'entities/1HonRdLo',
+        type: 'configuration/entityTypes/OrganizationM',
+        label: 'NATALINE DILCHAND'
+    },
+    children: [
+        {
+            entity: {
+                uri: 'entities/child',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'CHILD'
+            },
+            children: [],
+            nodeId: 19,
+            expanded: false,
+            root: false
+        }
+    ],
+    nodeId: 31,
+    expanded: false,
+    root: false
+};
+
+const setUp = (expanded = false, withChildren = true) =>
+    shallow(
+        <NodeContentRenderer
+            treeIndex={0}
+            scaffoldBlockPxWidth={16}
+            node={{...node, expanded, children: withChildren ? node.children : []}}
+            path={[1]}
+            title={<>Node</>}
+            toggleChildrenVisibility={jest.fn()}
+        />
+    );
+
+describe('NodeContentRenderer test', () => {
+    it('should render title', () => {
+        const component = setUp();
+        expect(component.find('.rowTitle').html()).toBe('<div class="rowTitle">Node</div>');
+        expect(component.find('.lineChildren')).toHaveLength(0);
+    });
+
+    it('should render line children if node expanded', () => {
+        const component = setUp(true);
+        expect(component.find('.lineChildren')).toHaveLength(1);
+    });
+
+    it('should render expanded button if expanded', () => {
+        const component = setUp(true);
+        expect(component.find('.buttonWrapper')).toHaveLength(1);
+        expect(component.find('.button')).toHaveLength(1);
+        expect(component.find('.expandedButton')).toHaveLength(1);
+        expect(component.find('.collapsedButton')).toHaveLength(0);
+    });
+
+    it('should render collapsed button if collapsed', () => {
+        const component = setUp(false);
+        expect(component.find('.buttonWrapper')).toHaveLength(1);
+        expect(component.find('.button')).toHaveLength(1);
+        expect(component.find('.collapsedButton')).toHaveLength(1);
+        expect(component.find('.expandedButton')).toHaveLength(0);
+        expect(component.find('.lineChildren')).toHaveLength(0);
+    });
+
+    it('should not render lineChildren and expanded button if no children', () => {
+        const component = setUp(true, false);
+        expect(component.find('.buttonWrapper')).toHaveLength(0);
+        expect(component.find('.button')).toHaveLength(0);
+        expect(component.find('.collapsedButton')).toHaveLength(0);
+        expect(component.find('.expandedButton')).toHaveLength(0);
+        expect(component.find('.lineChildren')).toHaveLength(0);
+    });
+});

package/src/components/HierarchyPathsView/theme/__tests__/tree-node-data-renderer.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import TreeNodeRenderer from '../tree-node-data-renderer';
+
+const node = {
+    entity: {
+        uri: 'entities/1HonRdLo',
+        type: 'configuration/entityTypes/OrganizationM',
+        label: 'NATALINE DILCHAND'
+    },
+    children: [
+        {
+            entity: {
+                uri: 'entities/child',
+                type: 'configuration/entityTypes/OrganizationM',
+                label: 'CHILD'
+            },
+            children: [],
+            nodeId: 19,
+            expanded: false,
+            root: false
+        }
+    ],
+    nodeId: 31,
+    expanded: false,
+    root: false
+};
+
+const scaffoldBlockPxWidth = 16;
+const style = {height: '28px'};
+
+const setUp = (root = false) =>
+    shallow(
+        <TreeNodeRenderer
+            scaffoldBlockPxWidth={scaffoldBlockPxWidth}
+            node={{...node, root}}
+            lowerSiblingCounts={root ? [2] : [2, 5]}
+            style={style}
+        >
+            <>Node</>
+        </TreeNodeRenderer>
+    );
+
+describe('TreeNodeRenderer test', () => {
+    it('should render node, nodeContent, scaffold', () => {
+        const component = setUp();
+        expect(component.find('.node')).toHaveLength(1);
+        const scaffoldWidth = scaffoldBlockPxWidth * 2;
+        expect(component.find('.node').prop('style')).toEqual({...style, width: `${scaffoldWidth + 250}px`});
+        expect(component.find('.nodeContent')).toHaveLength(1);
+        expect(component.find('.nodeContent').prop('style')).toEqual({
+            left: scaffoldWidth,
+            width: `calc(100% - ${scaffoldWidth}px`
+        });
+        expect(component.find('.lineBlock')).toHaveLength(2);
+        expect(component.find('.verticalLine')).toHaveLength(1);
+        expect(component.find('.horizontalLineRight')).toHaveLength(1);
+        expect(component.find('.rootIndex')).toHaveLength(0);
+    });
+
+    it('should render root properly', () => {
+        const component = setUp(true);
+        expect(component.find('.node')).toHaveLength(1);
+        expect(component.find('.node').prop('style')).toEqual({...style, width: '254px'});
+        expect(component.find('.nodeContent')).toHaveLength(1);
+        expect(component.find('.nodeContent').prop('style')).toEqual({left: 4, width: 'calc(100% - 4px'});
+        expect(component.find('.lineBlock')).toHaveLength(1);
+        expect(component.find('.verticalLine')).toHaveLength(0);
+        expect(component.find('.horizontalLineRight')).toHaveLength(0);
+        expect(component.find('.rootIndex')).toHaveLength(1);
+    });
+});

package/src/components/HierarchyPathsView/theme/index.ts

@@ -0,0 +1,8 @@
+import treeNodeRenderer from './tree-node-data-renderer';
+import nodeContentRenderer from './node-content-renderer';
+
+const scaffoldBlockPxWidth = 16;
+const rowHeight = 28;
+const slideRegionSize = 50;
+
+export const theme = {nodeContentRenderer, treeNodeRenderer, scaffoldBlockPxWidth, rowHeight, slideRegionSize};