@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/ZoomSlider/ZoomSlider.tsx

@@ -0,0 +1,90 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import classnames from 'classnames';
+import {clamp, omit} from 'ramda';
+import {useCamera, useRegisterEvents, useSigma, useSetSettings} from '@react-sigma/core';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import Slider from '@mui/material/Slider';
+import IconButton from '@mui/material/IconButton';
+
+import {useStyles} from './styles';
+
+const percentsToRatio = (percent: number): number => Math.pow(100 / percent, 2);
+const ratioToPercents = (ratio: number): number => 100 / Math.sqrt(ratio);
+
+const SliderThumb = (props) => {
+    const styles = useStyles();
+    const thumbProps = omit(['className'], props);
+
+    return (
+        <div className={styles.thumb} {...thumbProps}>
+            <RemoveIcon className={classnames(styles.icon, styles.thumbIcon)} />
+        </div>
+    );
+};
+
+type Props = {
+    className?: string;
+    max: number;
+    min: number;
+};
+
+const ZoomSlider = ({className, max, min}: Props) => {
+    const styles = useStyles();
+
+    const setSettings = useSetSettings();
+    const registerEvents = useRegisterEvents();
+    const camera = useSigma().getCamera();
+    const {zoomIn, zoomOut} = useCamera({factor: 1.2});
+    const [value, setValue] = useState(clamp(min, max, ratioToPercents(camera.getState().ratio)));
+
+    const maxCameraRatio = useMemo(() => (min > 0 ? percentsToRatio(min) : null), [min]);
+    const minCameraRatio = useMemo(() => (max > 0 ? percentsToRatio(max) : null), [max]);
+
+    useEffect(() => {
+        setSettings({
+            maxCameraRatio,
+            minCameraRatio
+        });
+
+        return () => {
+            setSettings({
+                maxCameraRatio: null,
+                minCameraRatio: null
+            });
+        };
+    }, [setSettings, minCameraRatio, maxCameraRatio]);
+
+    useEffect(() => {
+        registerEvents({
+            updated: (event) => setValue(ratioToPercents(event.ratio))
+        });
+    }, [registerEvents]);
+
+    const handleChange = (event, newValue) =>
+        camera.setState({ratio: camera.getBoundedRatio(percentsToRatio(newValue))});
+
+    return (
+        <div className={classnames(styles.container, className)}>
+            <IconButton className={styles.minButton} onClick={() => zoomOut()} size="large">
+                <RemoveIcon className={styles.icon} />
+            </IconButton>
+            <Slider
+                components={{
+                    Thumb: SliderThumb
+                }}
+                classes={{root: styles.sliderRoot, rail: styles.rail}}
+                track={false}
+                value={value}
+                min={min}
+                max={max}
+                onChange={handleChange}
+            />
+            <IconButton className={styles.maxButton} onClick={() => zoomIn()} size="large">
+                <AddIcon className={styles.icon} />
+            </IconButton>
+        </div>
+    );
+};
+
+export default ZoomSlider;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {useCamera, useSetSettings, useRegisterEvents} from '@react-sigma/core';
+import ZoomSlider from '../ZoomSlider';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import Slider from '@mui/material/Slider';
+
+jest.mock('@react-sigma/core', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@react-sigma/core'),
+    useCamera: jest.fn().mockReturnValue({
+        zoomOut: jest.fn(),
+        zoomIn: jest.fn()
+    }),
+    useSigma: jest.fn().mockReturnValue({
+        getCamera: () => ({
+            setState: () => {},
+            getState: () => ({ratio: 1}),
+            getBoundedRatio: jest.fn()
+        })
+    }),
+    useSetSettings: jest.fn().mockReturnValue(jest.fn()),
+    useRegisterEvents: jest.fn().mockReturnValue(jest.fn())
+}));
+
+describe('ZoomSlider tests', () => {
+    it('should render main parts', () => {
+        const component = shallow(<ZoomSlider className="testClass" min={30} max={300} />);
+
+        expect(component.find(IconButton)).toHaveLength(2);
+        expect(component.find(AddIcon)).toHaveLength(1);
+        expect(component.find(RemoveIcon)).toHaveLength(1);
+
+        const slider = component.find(Slider);
+        expect(slider).toHaveLength(1);
+        expect(slider.props()).toEqual({
+            ThumbComponent: expect.any(Function),
+            classes: {root: 'sliderRoot', rail: 'rail'},
+            track: false,
+            value: 100,
+            min: 30,
+            max: 300,
+            onChange: expect.any(Function)
+        });
+    });
+
+    it('should call registerEvents and setSettings', () => {
+        const setSettings = useSetSettings();
+        const registerEvents = useRegisterEvents();
+
+        mount(<ZoomSlider className="testClass" min={50} max={200} />);
+        expect(setSettings).toHaveBeenCalledWith({
+            maxCameraRatio: 4,
+            minCameraRatio: 0.25
+        });
+        expect(registerEvents).toHaveBeenCalledWith({
+            updated: expect.any(Function)
+        });
+    });
+
+    it('should call zoomOut on min button click', () => {
+        const component = shallow(<ZoomSlider className="testClass" min={30} max={300} />);
+        const {zoomOut} = useCamera();
+
+        act(() => {
+            component.find(IconButton).at(0).simulate('click');
+        });
+
+        expect(zoomOut).toHaveBeenCalled();
+    });
+
+    it('should call zoomIn on max button click', () => {
+        const component = shallow(<ZoomSlider className="testClass" min={30} max={300} />);
+        const {zoomIn} = useCamera();
+
+        act(() => {
+            component.find(IconButton).at(1).simulate('click');
+        });
+
+        expect(zoomIn).toHaveBeenCalled();
+    });
+});

package/src/components/ZoomSlider/styles.ts

@@ -0,0 +1,57 @@
+import {makeStyles} from '@mui/styles';
+
+const boxShadow = '0 1px 1px rgba(0,0,0,0.14), 0 2px 1px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.2)';
+
+const buttonStyle = {
+    background: '#FFFFFF',
+    boxShadow,
+    width: '28px',
+    height: '28px'
+};
+
+export const useStyles = makeStyles({
+    container: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    maxButton: {
+        ...buttonStyle,
+        borderRadius: '2px 4px 4px 2px'
+    },
+    minButton: {
+        ...buttonStyle,
+        borderRadius: '4px 2px 2px 4px'
+    },
+    thumb: {
+        position: 'absolute',
+        boxShadow,
+        borderRadius: '2px',
+        width: '8px',
+        height: '28px',
+        marginTop: '-13px',
+        marginLeft: '1px',
+        color: 'rgba(0,0,0,0.54)',
+        backgroundColor: '#FFFFFF',
+        boxSizing: 'border-box',
+        outline: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    thumbIcon: {
+        transform: 'rotate(90deg)'
+    },
+    icon: {
+        width: '18px',
+        height: '18px'
+    },
+    rail: {
+        opacity: 1,
+        height: '4px',
+        paddingRight: '10px'
+    },
+    sliderRoot: {
+        color: '#EDEDED',
+        marginRight: '10px'
+    }
+});

package/src/constants/index.ts

@@ -0,0 +1 @@
+export const ROWS_PER_PAGE_OPTIONS = [25, 50, 100];

package/src/contexts/GraphStateContext.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {GraphState} from '../types/graphDataTypes';
+
+export const GraphStateContext = React.createContext<GraphState>({
+    graphLoading: false,
+    data: null,
+    graphologyGraph: null,
+    selectedEntityLoading: false,
+    selectedEntity: null,
+    onEntitySelect: () => {},
+    relationshipTable: {},
+    onCollapseEntity: () => {},
+    onExpandEntity: () => {},
+    layout: null,
+    setLayout: () => {}
+});
+
+GraphStateContext.displayName = 'GraphStateContext';

package/src/contexts/SigmaCustomRenderersContext.ts

@@ -0,0 +1,20 @@
+import {createContext, useContext} from 'react';
+import {noop} from '@reltio/components';
+import {Renderers, Canvases} from '../types/sigmaCustomRenderersTypes';
+
+type Props = {
+    addRenderers: (renderers: Renderers) => void;
+    canvases: Canvases;
+};
+
+export const SigmaCustomRenderersContext = createContext<Props>({
+    addRenderers: noop,
+    canvases: {}
+});
+
+export const useSigmaCustomRenderers = () => {
+    const sigmaCustomRenderers = useContext(SigmaCustomRenderersContext);
+    return sigmaCustomRenderers;
+};
+
+SigmaCustomRenderersContext.displayName = 'SigmaCustomRenderersContext';

package/src/helpers/relationsHelpers.ts

@@ -0,0 +1,9 @@
+import {generateNewRelationUri, EditingConnection} from '@reltio/mdm-sdk';
+
+export const createNewConnection = (): EditingConnection => ({
+    relation: {
+        uri: generateNewRelationUri(),
+        type: null,
+        attributes: {}
+    }
+});