@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/RulesestsSelector/RulesetOption/__tests__/RulesetOption.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import MenuItem from '@mui/material/MenuItem';
+import {RulesetOption} from '../RulesetOption';
+
+describe('RulesetOption tests', () => {
+    it('should render all parts correctly', () => {
+        const innerRef = React.createRef<HTMLLIElement>();
+        const innerProps = {onClick: jest.fn()};
+        const data = {
+            uri: 'uri1',
+            mapping: [],
+            label: 'some label',
+            description: 'some description'
+        };
+        const component = shallow(<RulesetOption innerRef={innerRef} innerProps={innerProps} data={data} />);
+        const menuItemComponent = component.find(MenuItem);
+        expect(menuItemComponent.props()).toMatchObject({
+            className: 'root',
+            onClick: innerProps.onClick
+        });
+        expect(menuItemComponent.find('.label').text()).toBe(data.label);
+        expect(menuItemComponent.find('.description').text()).toBe(data.description);
+    });
+});

package/src/components/RulesestsSelector/RulesetOption/styles.ts

@@ -0,0 +1,27 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        paddingTop: '14px',
+        paddingBottom: '13px',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+        whiteSpace: 'normal',
+        '&:last-child': {
+            borderBottom: 'none'
+        }
+    },
+    label: {
+        marginBottom: '2px',
+        fontSize: '16px',
+        lineHeight: '24px',
+        color: theme.palette.text.primary
+    },
+    description: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        color: theme.palette.text.secondary
+    }
+}));

package/src/components/RulesestsSelector/RulesetsMenuList/RulesetsMenuList.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {MenuListComponentProps} from 'react-select';
+
+export const RulesetsMenuList = <OptionType, IsMulti extends boolean>(
+    props: MenuListComponentProps<OptionType, IsMulti>
+) => {
+    const {innerRef, getStyles, children} = props;
+    const styles = {...getStyles('menuList', props), maxHeight: '500px', padding: 0};
+    return (
+        <div ref={innerRef} style={styles}>
+            {children}
+        </div>
+    );
+};

package/src/components/RulesestsSelector/__tests__/RulesetsSelector.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import {shallow} from 'enzyme';
+import {DropDownSelector} from '@reltio/components';
+import {RulesetsSelector} from '../RulesestsSelector';
+import {RulesetOption} from '../RulesetOption/RulesetOption';
+import {RulesetsMenuList} from '../RulesetsMenuList/RulesetsMenuList';
+
+describe('RulesetsSelector tests', () => {
+    const survivorshipGroups = [
+        {
+            uri: 'uri1',
+            mapping: [],
+            label: 'label 1',
+            description: 'description 1'
+        },
+        {
+            uri: 'uri2',
+            mapping: [],
+            label: 'label 2'
+        },
+        {
+            uri: 'uri3',
+            mapping: []
+        }
+    ];
+
+    it('should render RulesetsSelector with correct props', () => {
+        const survivorshipGroupUri = 'uri3';
+        const onChange = jest.fn();
+
+        const component = shallow(
+            <RulesetsSelector
+                survivorshipGroups={survivorshipGroups}
+                currentSurvivorshipGroupUri={survivorshipGroupUri}
+                onChange={onChange}
+            />
+        );
+
+        expect(component.find(DropDownSelector).props()).toEqual({
+            height: 40,
+            className: 'root',
+            components: {Option: RulesetOption, MenuList: RulesetsMenuList},
+            label: 'Rulesets',
+            options: [
+                {
+                    description: 'description 1',
+                    label: 'label 1',
+                    mapping: [],
+                    uri: 'uri1'
+                },
+                {
+                    label: 'label 2',
+                    mapping: [],
+                    uri: 'uri2'
+                },
+                {
+                    label: '<No label>',
+                    mapping: [],
+                    uri: 'uri3'
+                }
+            ],
+            value: {
+                label: '<No label>',
+                mapping: [],
+                uri: 'uri3'
+            },
+            onChange: expect.any(Function)
+        });
+    });
+
+    it('onChange handler should work correctly', () => {
+        const survivorshipGroupUri = 'uri1';
+        const onChange = jest.fn();
+
+        const component = shallow(
+            <RulesetsSelector
+                survivorshipGroups={survivorshipGroups}
+                currentSurvivorshipGroupUri={survivorshipGroupUri}
+                onChange={onChange}
+            />
+        );
+
+        act(() => {
+            const survivorshipGroup = {label: 'label 2', mapping: [], uri: 'uri2'};
+            component.find(DropDownSelector).prop('onChange')(survivorshipGroup);
+        });
+
+        expect(onChange).toHaveBeenCalledWith('uri2');
+    });
+});

package/src/components/RulesestsSelector/styles.ts

@@ -0,0 +1,7 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    root: {
+        width: '280px'
+    }
+});

package/src/components/SankeyChart/Link.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useCrosswalkColor, useCrosswalkHighlight} from '@reltio/components';
+import {SankeyLink} from '../../types/SankeyChartData';
+
+type Props = {
+    link: SankeyLink;
+    path: string;
+    highlightEnabled: boolean;
+    isColored: boolean;
+};
+
+export const Link = ({link, path, highlightEnabled, isColored}: Props) => {
+    const {crosswalk} = link;
+    const color = useCrosswalkColor(crosswalk);
+    const {isDimmed, highlightCrosswalk, removeHighlight} = useCrosswalkHighlight(crosswalk);
+    return (
+        <path
+            d={path}
+            fill={isColored ? (isDimmed ? 'rgba(0, 0, 0, 0.12)' : color) : '#F0F0F0'}
+            opacity={highlightEnabled && isDimmed ? 0.19 : 1}
+            onMouseEnter={() => {
+                if (highlightEnabled) highlightCrosswalk();
+            }}
+            onMouseLeave={() => {
+                if (highlightEnabled) removeHighlight();
+            }}
+        />
+    );
+};
+
+export default Link;

package/src/components/SankeyChart/MergeTooltip.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {LightArrowTooltip} from '@reltio/components';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import PersonIcon from '@mui/icons-material/Person';
+import {useStyles} from './styles';
+
+type Props = {
+    user: string;
+    time: number;
+    children: React.ReactElement;
+};
+
+export const MergeTooltip = ({user, time, children}: Props) => {
+    const styles = useStyles();
+    const tooltipTitle = (
+        <div>
+            <span className={styles.tooltipTitle}>{i18n.text('Merge details')}</span>
+            <div className={styles.tooltipRow}>
+                <CalendarTodayIcon className={styles.tooltipIcon} />
+                {i18n.date(time, 'L LTS')}
+            </div>
+            <div className={styles.tooltipRow}>
+                <PersonIcon className={styles.tooltipIcon} />
+                {user}
+            </div>
+        </div>
+    );
+
+    return (
+        <LightArrowTooltip title={tooltipTitle} placement={'top'}>
+            {children}
+        </LightArrowTooltip>
+    );
+};
+
+export default MergeTooltip;

package/src/components/SankeyChart/Node.tsx

@@ -0,0 +1,137 @@
+import React, {MouseEvent, useEffect, useRef, useState} from 'react';
+import i18n from 'ui-i18n';
+import Popover from '@mui/material/Popover';
+import MergeTooltip from './MergeTooltip';
+import {SankeyNode} from '../../types/SankeyChartData';
+import {SmallIconButtonWithTooltip, noop, useCrosswalkColor, useCrosswalkHighlight} from '@reltio/components';
+import {groupBy, prop, pipe, map, head, last, max, min} from 'ramda';
+import UnmergeIcon from '../../icons/notMatch.svg';
+import {useStyles} from './styles';
+
+type Props = {
+    nodeWidth: number;
+    node: SankeyNode;
+    highlightEnabled: boolean;
+    isColored: boolean;
+    disableUnmerge: boolean;
+    onUnmerge: (contributorUri: string) => void;
+    isDragging: boolean;
+};
+
+export const Node = ({node, nodeWidth, highlightEnabled, isColored, disableUnmerge, onUnmerge, isDragging}: Props) => {
+    const styles = useStyles();
+    const [labelX, setLabelX] = useState(0);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const textRef = useRef(null);
+    const {
+        x,
+        y,
+        name,
+        label,
+        targetLinks,
+        sourceLinks,
+        entity: {crosswalks = [], merges}
+    } = node;
+    const [firstCrosswalk] = crosswalks;
+    const {isDimmed, highlightCrosswalk, removeHighlight} = useCrosswalkHighlight(firstCrosswalk);
+    const color = useCrosswalkColor(firstCrosswalk);
+    const startNodeHeight = crosswalks?.length
+        ? sourceLinks[crosswalks.length - 1].sy + sourceLinks[crosswalks.length - 1].dy
+        : 0;
+
+    const renderMergeNodes = () => {
+        const timeMap = pipe(map(prop('source')), groupBy(prop('time')))(targetLinks);
+
+        return merges?.map(({time, user}, index) => {
+            const sources = timeMap[time];
+            if (!sources) return;
+
+            const [start, end] = sources.reduce(
+                (acc, {sourceLinks}) => [
+                    min(head(sourceLinks).ty, acc[0]),
+                    max(last(sourceLinks).ty + last(sourceLinks).dy, acc[1])
+                ],
+                [Infinity, 0]
+            );
+
+            return (
+                <MergeTooltip user={user} time={time} key={'node-' + index}>
+                    <rect
+                        transform={`translate(0,${start})`}
+                        height={end - start}
+                        width={nodeWidth}
+                        className={styles.node}
+                        fillOpacity={0.54}
+                        fill={'#F0F0F0'}
+                        opacity={highlightEnabled && isDimmed ? 0.38 : 1}
+                    />
+                </MergeTooltip>
+            );
+        });
+    };
+
+    const openPopup = (e: MouseEvent<SVGRectElement>) => setAnchorEl(e.currentTarget);
+    const closePopup = () => setAnchorEl(null);
+    const handleUnmerge = () => {
+        onUnmerge(name);
+        closePopup();
+    };
+
+    useEffect(() => {
+        const nodeHeight = node.dy;
+        const textWidth = textRef?.current?.clientWidth || 0;
+        if (nodeHeight < textWidth) setLabelX(nodeHeight / 2 - textWidth / 2);
+    }, []);
+
+    useEffect(() => {
+        if (isDragging && !!anchorEl) closePopup();
+    }, [isDragging]);
+
+    return (
+        <g transform={`translate(${x},${y})`}>
+            {name === 'ROOT' ? (
+                <text dy={-5} dx={labelX} ref={textRef} className={styles.rootNode}>
+                    {label || ''}
+                </text>
+            ) : (
+                <>
+                    <rect
+                        height={startNodeHeight}
+                        width={14}
+                        className={styles.node}
+                        fill={isColored ? (isDimmed ? 'rgba(0, 0, 0, 0.12)' : color) : '#F0F0F0'}
+                        key={'node-main'}
+                        opacity={highlightEnabled && isDimmed ? 0.19 : 1}
+                        onMouseEnter={() => {
+                            if (highlightEnabled) highlightCrosswalk();
+                        }}
+                        onMouseLeave={() => {
+                            if (highlightEnabled) removeHighlight();
+                        }}
+                        onClick={disableUnmerge ? noop : openPopup}
+                        cursor={disableUnmerge ? 'default' : 'pointer'}
+                        data-reltio-id="reltio-sankey-chart-node"
+                    />
+                    <Popover
+                        open={!!anchorEl}
+                        anchorEl={anchorEl}
+                        anchorOrigin={{vertical: 'top', horizontal: 'right'}}
+                        onClose={closePopup}
+                        classes={{paper: styles.popupContainer}}
+                        data-reltio-id="reltio-unmerge-popup"
+                    >
+                        <SmallIconButtonWithTooltip
+                            size="XS"
+                            tooltipTitle={i18n.text('Unmerge')}
+                            icon={UnmergeIcon}
+                            onClick={handleUnmerge}
+                        />
+                    </Popover>
+                    {!!targetLinks?.length && renderMergeNodes()}
+                </>
+            )}
+        </g>
+    );
+};
+
+export default Node;

package/src/components/SankeyChart/SankeyChart.tsx

@@ -0,0 +1,103 @@
+import React, {useMemo, useState, useEffect} from 'react';
+import useSankey from './useSankey';
+import Node from './Node';
+import Link from './Link';
+import {SankeyData} from '../../types/SankeyChartData';
+
+type Props = {
+    width: number;
+    height: number;
+    data: SankeyData;
+    accentContributors?: boolean;
+    disableUnmerge: boolean;
+    onUnmerge: (contributorUri: string) => void;
+};
+
+const SankeyChart = ({width, height, data, accentContributors, onUnmerge, disableUnmerge}: Props) => {
+    const [isDragging, setDragging] = useState(false);
+    const [isMouseDown, setMouseDown] = useState(false);
+    const [previousPageX, setPreviousPageX] = useState(0);
+    const [offsetX, setOffsetX] = useState(0);
+    const {links, nodes, nodeWidth, path} = useSankey({data, width, height});
+
+    useEffect(() => {
+        setOffsetX(0);
+        setPreviousPageX(0);
+    }, [width, height]);
+
+    const sankeyNodes = useMemo(
+        () =>
+            nodes.map((node, index) => (
+                <Node
+                    highlightEnabled={accentContributors}
+                    isColored={accentContributors}
+                    node={node}
+                    nodeWidth={nodeWidth}
+                    key={`SankeyNode-${index}`}
+                    disableUnmerge={disableUnmerge}
+                    onUnmerge={onUnmerge}
+                    isDragging={isDragging}
+                />
+            )),
+        [nodes, accentContributors, nodeWidth, width, height, isDragging]
+    );
+
+    const sankeyLinks = useMemo(
+        () =>
+            links.map((link, index) => (
+                <Link
+                    highlightEnabled={!accentContributors}
+                    isColored={!accentContributors}
+                    link={link}
+                    path={path(link)}
+                    key={`SankeyLink-${index}`}
+                />
+            )),
+        [accentContributors, links, path]
+    );
+
+    const extractPositionDelta = (event: React.MouseEvent) => {
+        const left = event.pageX;
+        const offsetX = left - previousPageX;
+        setPreviousPageX(left);
+        return offsetX;
+    };
+
+    const onDown = (event: React.MouseEvent) => {
+        event.preventDefault();
+        setMouseDown(true);
+        extractPositionDelta(event);
+    };
+    const onMove = (event: React.MouseEvent) => {
+        if (!isMouseDown) return;
+        setDragging(true);
+        const left = extractPositionDelta(event);
+        setOffsetX(offsetX + left);
+    };
+    const onUp = () => {
+        setMouseDown(false);
+        setDragging(false);
+    };
+
+    const pointerEvents = isDragging ? 'none' : 'auto';
+    const cursor = isDragging ? 'move' : 'auto';
+
+    return (
+        <svg
+            width={width}
+            height={height}
+            cursor={cursor}
+            onMouseDown={onDown}
+            onMouseMove={onMove}
+            onMouseUp={onUp}
+            onMouseLeave={onUp}
+        >
+            <g transform={`translate(${offsetX},${height - 1}) rotate(-90)`} pointerEvents={pointerEvents}>
+                <g>{sankeyLinks}</g>
+                <g>{sankeyNodes}</g>
+            </g>
+        </svg>
+    );
+};
+
+export default SankeyChart;

package/src/components/SankeyChart/__tests__/Link.spec.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import {render} from '@testing-library/react';
+import {Link} from '../Link';
+import * as reltioComponents from '@reltio/components';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    useCrosswalkColor: jest.fn(),
+    useCrosswalkHighlight: jest.fn()
+}));
+
+describe('Sankey link', () => {
+    const highlightCrosswalk = jest.fn();
+    const removeHighlight = jest.fn();
+    let user;
+
+    beforeAll(() => {
+        jest.spyOn(reltioComponents, 'useCrosswalkColor').mockReturnValue('#FF0000');
+        jest.spyOn(reltioComponents, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: true,
+            isDimmed: false,
+            highlightCrosswalk,
+            removeHighlight
+        });
+    });
+
+    beforeEach(() => {
+        user = userEvent.setup({delay: null});
+    });
+
+    const props = {
+        link: {
+            value: 10,
+            source: {
+                entity: {uri: 'testUri'},
+                name: 'test',
+                time: 1234
+            },
+            target: {
+                entity: {uri: 'test1Uri'},
+                name: 'test1',
+                time: 1234
+            },
+            crosswalk: {type: 'testType', uri: 'crosswalkUri', value: '20'}
+        },
+        path: 'M10 10 H 90 V 90 H 10 L 10 10',
+        highlightEnabled: false,
+        isColored: false
+    };
+
+    it('should render Link correctly', () => {
+        const {asFragment} = render(<Link {...props} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <path
+                d="M10 10 H 90 V 90 H 10 L 10 10"
+                fill="#F0F0F0"
+                opacity="1"
+              />
+            </DocumentFragment>
+        `);
+    });
+
+    it('should not work highlighting if highlightEnabled = false', async () => {
+        const {container} = render(<Link {...props} />);
+        const path = container.querySelector('path');
+        await user.hover(path);
+        expect(highlightCrosswalk).toBeCalledTimes(0);
+        await user.unhover(path);
+        expect(removeHighlight).toBeCalledTimes(0);
+    });
+
+    it('should work highlighting if highlightEnabled = true', async () => {
+        const {container} = render(<Link {...props} highlightEnabled={true} />);
+        const path = container.querySelector('path');
+        await user.hover(path);
+        expect(highlightCrosswalk).toBeCalledTimes(1);
+        await user.unhover(path);
+        expect(removeHighlight).toBeCalledTimes(1);
+    });
+
+    it('should not color link if isColored = false', () => {
+        const {asFragment} = render(<Link {...props} isColored={false} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+                    <DocumentFragment>
+                      <path
+                        d="M10 10 H 90 V 90 H 10 L 10 10"
+                        fill="#F0F0F0"
+                        opacity="1"
+                      />
+                    </DocumentFragment>
+            `);
+    });
+
+    it('should not color link if isColored = true', () => {
+        const {asFragment} = render(<Link {...props} isColored={true} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <path
+                d="M10 10 H 90 V 90 H 10 L 10 10"
+                fill="#FF0000"
+                opacity="1"
+              />
+            </DocumentFragment>
+        `);
+    });
+
+    it('should be dimmed if isDimmed and highlightCrosswalk = true', () => {
+        jest.spyOn(reltioComponents, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: true,
+            isDimmed: true,
+            highlightCrosswalk,
+            removeHighlight
+        });
+        const {asFragment} = render(<Link {...props} highlightEnabled={true} isColored={true} />);
+        expect(asFragment()).toMatchInlineSnapshot(`
+            <DocumentFragment>
+              <path
+                d="M10 10 H 90 V 90 H 10 L 10 10"
+                fill="rgba(0, 0, 0, 0.12)"
+                opacity="0.19"
+              />
+            </DocumentFragment>
+        `);
+    });
+});

package/src/components/SankeyChart/__tests__/MergeTooltip.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {LightArrowTooltip} from '@reltio/components';
+import {MergeTooltip} from '../MergeTooltip';
+
+describe('MergeTooltip', () => {
+    it('should render MergeTooltip', () => {
+        const wrapper = shallow(
+            <MergeTooltip user={'TestUser'} time={1620711408828}>
+                <span>Text</span>
+            </MergeTooltip>
+        );
+
+        expect(wrapper.find('span').text()).toBe('Text');
+
+        const title = wrapper.find(LightArrowTooltip).prop('title') as React.ReactElement;
+        const titleWrapper = shallow(title);
+
+        const rows = titleWrapper.find('.tooltipRow');
+        expect(rows.at(1).text()).toBe('TestUser');
+    });
+});