@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,373 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import * as reactRedux from 'react-redux';
+import {Entity, getEntity, getHops, Metadata} from '@reltio/mdm-sdk';
+import {ui} from '@reltio/mdm-module';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import GraphPerspectiveView from '../GraphPerspectiveView';
+
+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: () => 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 = {} as Metadata}: CreateStoreProps = {}) => ({
+    profile: {
+        entity: entity || {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        }
+    },
+    tenant: {
+        id: 't1'
+    },
+    metadata: {
+        t1: metadata
+    }
+});
+
+describe('useSelectedEntity behavior', () => {
+    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 request entity on onEntitySelect and set value to GraphStateContext.Provider', async () => {
+        const mainEntity = {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        };
+        const entity = {
+            uri: 'entities/1',
+            type: '123'
+        };
+        const data = {entities: [{uri: '1'}], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        (getEntity as jest.Mock).mockReturnValue(Promise.resolve(entity));
+        const component = setUp(mount, createStore({entity: mainEntity}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: null,
+            selectedEntityLoading: true
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: mainEntity, // main entity is selected by default
+            selectedEntityLoading: false
+        });
+        expect(getHops).toHaveBeenCalled();
+        expect(getEntity).not.toHaveBeenCalled();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: mainEntity,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith(entity.uri);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity,
+            selectedEntityLoading: false
+        });
+    });
+
+    it('should dispatch an error in case of failed entity request', async () => {
+        const error = {errorMessage: 'Error!!'};
+        const mainEntity = {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        };
+        (getEntity as jest.Mock).mockReturnValue(Promise.reject(error));
+        const component = setUp(mount, createStore({entity: mainEntity}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(getEntity).not.toHaveBeenCalled();
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect('entities/some');
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: null,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith('entities/some');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: mainEntity,
+            selectedEntityLoading: false
+        });
+        expect(dispatch).toHaveBeenCalledWith(ui.actions.errorSet(error.errorMessage));
+    });
+
+    it('should use brief entity info from "data" and set it as selectedEntity before entity request', async () => {
+        const mainEntity = {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        };
+        const briefEntityInfo = {
+            uri: 'entities/1',
+            type: '123'
+        };
+        const entity = {
+            uri: 'entities/1',
+            type: '123',
+            attributes: {}
+        };
+        const data = {entities: [{uri: '1'}, briefEntityInfo], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        (getEntity as jest.Mock).mockReturnValue(Promise.resolve(entity));
+        const component = setUp(mount, createStore({entity: mainEntity}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: null,
+            selectedEntityLoading: true
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: mainEntity,
+            selectedEntityLoading: false
+        });
+        expect(getHops).toHaveBeenCalled();
+        expect(getEntity).not.toHaveBeenCalled();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: briefEntityInfo,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith(entity.uri);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity,
+            selectedEntityLoading: false
+        });
+    });
+
+    it('should make request for each uniq entity only once', async () => {
+        const mainEntity = {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        };
+        const briefEntityInfo = {
+            uri: 'entities/1',
+            type: '123'
+        };
+        const briefEntityInfo2 = {
+            uri: 'entities/2',
+            type: '123'
+        };
+        const entity = {
+            uri: 'entities/1',
+            type: '123',
+            attributes: {}
+        };
+        const entity2 = {
+            uri: 'entities/2',
+            type: '123',
+            attributes: {}
+        };
+        const data = {entities: [{uri: '1'}, briefEntityInfo, briefEntityInfo2], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        (getEntity as jest.Mock).mockReturnValue(Promise.resolve(entity));
+        const component = setUp(mount, createStore({entity: mainEntity}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(getHops).toHaveBeenCalled();
+        expect(getEntity).not.toHaveBeenCalled();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        // first entity selection
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: briefEntityInfo,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith(entity.uri);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity,
+            selectedEntityLoading: false
+        });
+
+        // first entity2 selection
+        (getEntity as jest.Mock).mockReturnValue(Promise.resolve(entity2));
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity2.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: briefEntityInfo2,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith(entity2.uri);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity2,
+            selectedEntityLoading: false
+        });
+
+        //second entity selection
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: briefEntityInfo,
+            selectedEntityLoading: true
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity,
+            selectedEntityLoading: false
+        });
+
+        //second entity2 selection
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity2.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: briefEntityInfo2,
+            selectedEntityLoading: true
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity2,
+            selectedEntityLoading: false
+        });
+
+        expect(getEntity).toHaveBeenCalledTimes(2);
+    });
+
+    it('should set current entity if no selected entity in the new data', async () => {
+        const mainEntity = {
+            uri: 'entities/uri1',
+            type: 'configuration/entityTypes/HCO'
+        };
+        const entityInfo = {
+            uri: 'entities/1',
+            type: '123'
+        };
+        const entityInfo2 = {
+            uri: 'entities/2',
+            type: '123'
+        };
+        const entity = {
+            uri: 'entities/1',
+            type: '123',
+            attributes: {}
+        };
+        const data = {entities: [{uri: '1'}, entityInfo, entityInfo2], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(data));
+        (getEntity as jest.Mock).mockReturnValue(Promise.resolve(entity));
+
+        const component = setUp(mount, createStore({entity: mainEntity}));
+        expect(component.find(GraphStateContext.Provider)).toHaveLength(1);
+        expect(getHops).toHaveBeenCalled();
+        expect(getEntity).not.toHaveBeenCalled();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+
+        // entity selection
+        component.find(GraphStateContext.Provider).prop('value').onEntitySelect(entity.uri);
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entityInfo,
+            selectedEntityLoading: true
+        });
+        expect(getEntity).toHaveBeenCalledWith(entity.uri);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: entity,
+            selectedEntityLoading: false
+        });
+
+        // new data
+        const newData = {entities: [{uri: '1'}], relations: []};
+        (getHops as jest.Mock).mockReturnValue(Promise.resolve(newData));
+        // reload data
+        component
+            .find(GraphStateContext.Provider)
+            .prop('value')
+            .setGraphTypeUri('configuration/graphTypes/FamilyGraph');
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(GraphStateContext.Provider).prop('value')).toMatchObject({
+            selectedEntity: mainEntity,
+            selectedEntityLoading: false
+        });
+    });
+});

package/src/components/GraphPerspectiveView/styles.ts

@@ -0,0 +1,34 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    perspectiveView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.default
+    },
+    graphWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        flexGrow: 1
+    },
+    graphContainer: {
+        display: 'flex',
+        overflow: 'hidden',
+        flexGrow: 1
+    },
+    '@global div[role=tooltip]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    '@global div[role=presentation]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    }
+}));

package/src/components/GraphRightSidePanel/GraphRightSidePanel.tsx

@@ -0,0 +1,27 @@
+import React, {memo} from 'react';
+import {isNil} from 'ramda';
+import {RightPanelTab, SidePanel} from '@reltio/components';
+import RightPanelProfileBand from '../RightPanelProfileBand/RightPanelProfileBand';
+
+export enum ActivePanel {
+    Relationship,
+    EntityDetails
+}
+
+type Props = {
+    active?: number;
+    tabs: RightPanelTab[];
+};
+
+export const GraphRightSidePanel = memo(({active, tabs}: Props) => {
+    const isOpen = !isNil(active);
+
+    return (
+        <SidePanel open={isOpen}>
+            <RightPanelProfileBand />
+            {tabs[active]?.content}
+        </SidePanel>
+    );
+});
+
+GraphRightSidePanel.displayName = 'GraphRightSidePanel';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {GraphRightSidePanel} from '../GraphRightSidePanel';
+import {SidePanel} from '@reltio/components';
+import RightPanelProfileBand from '../../RightPanelProfileBand/RightPanelProfileBand';
+
+const setUp = (props = {tabs: []}) => shallow(<GraphRightSidePanel {...props} />);
+
+describe('GraphRightSidePanel tests', () => {
+    it('should render main components', () => {
+        const component = setUp();
+        expect(component.find(SidePanel)).toHaveLength(1);
+        expect(component.find(SidePanel).prop('open')).toBe(false);
+        expect(component.find(SidePanel).find(RightPanelProfileBand)).toHaveLength(1);
+        expect(component.find(SidePanel).children()).toHaveLength(1);
+    });
+});

package/src/components/GraphRightSidePanel/icons/relationship-icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V9H8V7H6ZM6 11V13H8V11H6ZM6 15V17H8V15H6ZM10 7V9H16.5H18V7H10ZM20 5V10.0193C20.8055 10.5342 21.4895 11.2219 22 12.0304V5V3.5V3H2V3.5V5V19V20V21H13.0276C12.2202 20.4894 11.5333 19.8054 11.019 19H4V5H20ZM10.4967 13C10.8078 12.2522 11.2545 11.5753 11.8061 11H10V13H10.4967ZM10 15.5C10 15.3317 10.0064 15.165 10.0189 15H10V15.5ZM10 15.5C10 16.0163 10.06 16.5185 10.1734 17H10V15.5ZM20.3 17.89L23.42 21L22 22.42L18.88 19.3C18.19 19.74 17.37 20 16.49 20C14.01 20 12 17.99 12 15.5C12 13.01 14.01 11 16.5 11C18.99 11 21 13.01 21 15.5C21 16.38 20.74 17.19 20.3 17.89ZM16.5 18C17.88 18 19 16.88 19 15.5C19 14.12 17.88 13 16.5 13C15.12 13 14 14.12 14 15.5C14 16.88 15.12 18 16.5 18Z" fill="currentColor"/>
+</svg>

package/src/components/GraphRightSidePanel/styles.ts

@@ -0,0 +1,8 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        overflow: 'hidden'
+    }
+});

package/src/components/GraphTypeSelector/GraphTypeSelector.tsx

@@ -0,0 +1,56 @@
+import {DropDownSelector, withContext} from '@reltio/components';
+import i18n from 'ui-i18n';
+import React, {useMemo} from 'react';
+import {useStyles} from './styles';
+import {GraphStateContext} from '../../contexts/GraphStateContext';
+import {GraphState} from '../../types/graphDataTypes';
+import {Entity, getGraphTypesForEntityType} from '@reltio/mdm-sdk';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+
+type Props = Partial<Pick<GraphState, 'graphTypeUri' | 'setGraphTypeUri'>>;
+
+const GraphTypeSelector = ({graphTypeUri, setGraphTypeUri}: Props) => {
+    const styles = useStyles();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entity: Entity = useSelector(mdmModule.selectors.getEntity);
+    const graphTypeOptions = useMemo(
+        () => [
+            {label: i18n.text('All'), value: null},
+            ...getGraphTypesForEntityType(metadata, entity.type).map(({uri, label}) => ({value: uri, label}))
+        ],
+        [entity, metadata]
+    );
+    const value = useMemo(
+        () => graphTypeOptions.find((opt) => opt.value === graphTypeUri),
+        [graphTypeOptions, graphTypeUri]
+    );
+    return (
+        <DropDownSelector
+            classes={{valueContainer: styles.valueContainer}}
+            className={styles.graphTypeSelector}
+            height={42}
+            label={i18n.text('Graph type')}
+            value={value}
+            options={graphTypeOptions}
+            onChange={(opt) => setGraphTypeUri(opt.value)}
+            TextFieldProps={{
+                InputProps: {
+                    disableUnderline: true,
+                    classes: {
+                        root: styles.filledInputRoot
+                    }
+                }
+            }}
+        />
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    ({graphTypeUri, setGraphTypeUri}) => ({
+        setGraphTypeUri,
+        graphTypeUri
+    }),
+    GraphTypeSelector
+);

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import GraphTypeSelector from '../GraphTypeSelector';
+import {GraphStateContext} from '../../../contexts/GraphStateContext';
+import {DropDownSelector} from '@reltio/components';
+import * as reactRedux from 'react-redux';
+import {GraphState} from '../../../types/graphDataTypes';
+
+const onChangeGraphType = jest.fn();
+
+const setUp = ({graphTypeUri = null} = {}) =>
+    mount(
+        <GraphStateContext.Provider
+            value={
+                {
+                    graphTypeUri,
+                    setGraphTypeUri: onChangeGraphType as (graphType: string) => void
+                } as GraphState
+            }
+        >
+            <GraphTypeSelector />
+        </GraphStateContext.Provider>
+    );
+
+const tenant = 'uitest1';
+
+const store = () => ({
+    tenant: {id: tenant},
+    metadata: {
+        [tenant]: {
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP',
+                    extendsTypeURI: 'configuration/entityTypes/Individual'
+                },
+                {
+                    uri: 'configuration/entityTypes/Individual',
+                    extendsTypeURI: 'configuration/entityTypes/Party'
+                },
+                {
+                    uri: 'configuration/entityTypes/Party'
+                }
+            ],
+            graphTypes: [
+                {
+                    uri: 'configuration/graphTypes/FamilyGraph',
+                    label: 'FamilyGraph',
+                    relationshipTypeURIs: ['configuration/relationTypes/Family']
+                },
+                {
+                    uri: 'configuration/graphTypes/CompanyHierarchy',
+                    relationshipTypeURIs: [
+                        'configuration/relationTypes/Leased',
+                        'configuration/relationTypes/Subsidiary',
+                        'configuration/relationTypes/Owned'
+                    ]
+                }
+            ],
+            relationTypes: [
+                {
+                    uri: 'configuration/relationTypes/Family',
+                    startObject: {
+                        uri: 'configuration/relationTypes/Affiliation/startObject',
+                        objectTypeURI: 'configuration/entityTypes/Party'
+                    }
+                },
+                {
+                    uri: 'configuration/relationTypes/Assistant',
+                    startObject: {
+                        objectTypeURI: 'configuration/entityTypes/Individual',
+                        uri: 'configuration/relationTypes/Assistant/startObject'
+                    }
+                }
+            ]
+        }
+    },
+    profile: {
+        entity: {
+            uri: 'entities/1IPdCSY1',
+            type: 'configuration/entityTypes/HCP'
+        }
+    }
+});
+
+describe('Graph tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store()));
+    });
+
+    it('should render DropDownSelector with options for graphType', () => {
+        const component = setUp();
+        expect(component.find(DropDownSelector)).toHaveLength(1);
+        expect(component.find(DropDownSelector).prop('label')).toEqual('Graph type');
+        expect(component.find(DropDownSelector).prop('value')).toEqual({value: null, label: 'All'});
+        expect(component.find(DropDownSelector).prop('options')).toEqual([
+            {value: null, label: 'All'},
+            {
+                value: 'configuration/graphTypes/FamilyGraph',
+                label: 'FamilyGraph'
+            }
+        ]);
+        expect(onChangeGraphType).not.toHaveBeenCalled();
+        component.find(DropDownSelector).prop('onChange')({
+            value: 'configuration/graphTypes/FamilyGraph',
+            label: 'FamilyGraph'
+        });
+        expect(onChangeGraphType).toHaveBeenCalledWith('configuration/graphTypes/FamilyGraph');
+    });
+});

package/src/components/GraphTypeSelector/styles.ts

@@ -0,0 +1,17 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    graphTypeSelector: {
+        minWidth: '200px',
+        backgroundColor: '#FAFAFA',
+        opacity: 1,
+        height: '40px'
+    },
+    filledInputRoot: {
+        borderRadius: '4px'
+    },
+    valueContainer: {
+        width: 'auto',
+        marginLeft: '16px'
+    }
+});