@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/SankeyChart/sankey.ts

@@ -0,0 +1,322 @@
+import {sum, map, pipe, groupBy, toPairs, sort, nth, prop, reduce, last} from 'ramda';
+import {SankeyLink, SankeyData} from '../../types/SankeyChartData';
+
+const sumValues = (links: SankeyLink[]): number => pipe(map(prop('value')), sum)(links);
+const interpolateNumber = (a: number, b: number) => ((a = +a), (b = +b), (t) => a * (1 - t) + b * t);
+
+export default function Sankey() {
+    const lastLinksSize = 22;
+
+    let nodeWidth = 24,
+        smallestNodeMaxHeight = 15,
+        smallestNodeMinHeight = 10,
+        nodePadding = 8,
+        size = [1, 1] as [number, number];
+
+    function sankey({nodes, links}: SankeyData) {
+        const graph = {nodes, links};
+        computeNodeLinks(graph);
+        computeNodeValues(graph);
+        computeNodeBreadths(graph);
+        computeNodeDepths(graph);
+        computeLinkDepths(graph);
+        correctNodesDepth(graph);
+        return graph;
+    }
+
+    sankey.nodeWidth = () => nodeWidth;
+    sankey.setNodeWidth = (width: number) => ((nodeWidth = +width), sankey);
+
+    sankey.nodePadding = () => nodePadding;
+    sankey.setNodePadding = (padding: number) => ((nodePadding = +padding), sankey);
+
+    sankey.smallestNodeMaxHeight = () => smallestNodeMaxHeight;
+    sankey.setSmallestNodeMaxHeight = (height: number) => ((smallestNodeMaxHeight = +height), sankey);
+
+    sankey.smallestNodeMinHeight = () => smallestNodeMinHeight;
+    sankey.setSmallestNodeMinHeight = (height: number) => ((smallestNodeMinHeight = +height), sankey);
+
+    sankey.size = () => size;
+    sankey.setSize = (newSize: [number, number]) => ((size = newSize), sankey);
+
+    sankey.update = (graph) => {
+        computeLinkDepths(graph);
+        return graph;
+    };
+
+    sankey.link = () => {
+        let curvature = 0.5;
+
+        function link(d) {
+            const lastLine = !d.target.sourceLinks || d.target.sourceLinks.length == 0;
+            const addPixels = 0.13;
+            const x0 = d.source.x + d.source.dx,
+                x1 = d.target.x,
+                xi = interpolateNumber(x0, x1),
+                x2 = xi(curvature),
+                x3 = xi(1 - curvature),
+                y0 = d.source.y + d.sy - addPixels,
+                y1 = d.target.y + d.ty - addPixels;
+            const appendix = !lastLine
+                ? `L${x1 + nodeWidth},${y1} L${x1 + nodeWidth},${y1 + d.dy + 2 * addPixels}`
+                : '';
+
+            return y0 === y1
+                ? `M${x0},${y0} 
+                   L${x1},${y1}${appendix} 
+                   L${x1},${y1 + d.dy + 2 * addPixels} 
+                   L${x0},${y0 + d.dy + 2 * addPixels} Z`
+                : `M${x0},${y0}
+                   C${x2},${y0} ${x3},${y1} ${x1},${y1}${appendix} 
+                   L${x1},${y1 + d.dy + 2 * addPixels} 
+                   C${x3},${y1 + d.dy + 2 * addPixels} ${x2},${y0 + d.dy + 2 * addPixels} 
+                   ${x0},${y0 + d.dy + 2 * addPixels} Z`;
+        }
+
+        link.curvature = function (_) {
+            if (!arguments.length) return curvature;
+            curvature = +_;
+            return link;
+        };
+
+        return link;
+    };
+
+    // Populate the sourceLinks and targetLinks for each node.
+    function computeNodeLinks({nodes, links}: SankeyData) {
+        nodes.forEach((node) => {
+            node.sourceLinks = [];
+            node.targetLinks = [];
+        });
+        links.forEach((link) => {
+            link.source.sourceLinks.push(link);
+            link.target.targetLinks.push(link);
+        });
+    }
+
+    // Compute the value (size) of each node by summing the associated links.
+    function computeNodeValues({nodes}: SankeyData) {
+        nodes.forEach((node) => {
+            node.value = Math.max(sumValues(node.sourceLinks), sumValues(node.targetLinks));
+        });
+    }
+
+    // Iteratively assign the breadth (x-position) for each node.
+    // Nodes are assigned the maximum breadth of incoming neighbors plus one;
+    // nodes with no incoming links are assigned breadth zero, while
+    // nodes with no outgoing links are assigned the maximum breadth.
+    function computeNodeBreadths({nodes}: SankeyData) {
+        if (!nodes.length) return;
+        let remainingNodes = [nodes[0]],
+            nextNodes,
+            x = 0;
+
+        while (remainingNodes.length) {
+            nextNodes = [];
+            remainingNodes.forEach((node) => {
+                node.x = x;
+                node.dx = nodeWidth;
+                node.targetLinks.forEach((link) => {
+                    if (nextNodes.indexOf(link.source) < 0) {
+                        nextNodes.push(link.source);
+                    }
+                });
+            });
+            remainingNodes = nextNodes;
+            ++x;
+        }
+
+        nodes.forEach((node) => {
+            node.x = x - 1 - node.x;
+        });
+
+        if (x > 2) {
+            const w = (size[0] - 2 * nodeWidth - lastLinksSize) / (x - 2);
+            nodes.forEach((node) => {
+                if (!node.sourceLinks || node.sourceLinks.length == 0) node.x = size[0] - nodeWidth;
+                else node.x *= w;
+            });
+        } else {
+            nodes[0].x = size[0] - nodeWidth;
+            nodes[1].x = nodes[0].x - lastLinksSize - nodeWidth;
+        }
+    }
+
+    function computeNodeDepths({nodes, links}: SankeyData) {
+        const nodesByBreadth = pipe(
+            groupBy(prop('x')),
+            toPairs,
+            sort((a, b) => a[0] - b[0]),
+            map(nth(1))
+        )(nodes);
+
+        //
+        initializeNodeDepth();
+        resolveCollisions();
+
+        const max = pipe(
+            map((nodes) => (nodes.length - 1) * nodePadding + sum(map((node) => node.dy, nodes))),
+            reduce(Math.max, 0)
+        )(nodesByBreadth);
+
+        const y1 = (size[1] - max) / 2;
+
+        nodesByBreadth.forEach((nodes) => {
+            const {y, dy} = last(nodes);
+            const y0 = size[1] - (y + dy);
+            nodes.forEach((node) => {
+                node.y += y0;
+                if (y1 > 0) node.y -= y1;
+            });
+        });
+
+        function initializeNodeDepth() {
+            let ky = pipe(
+                map((nodes) => (size[1] - (nodes.length - 1) * nodePadding) / sumValues(nodes)),
+                reduce(Math.min, Infinity)
+            )(nodesByBreadth);
+
+            const min = pipe(
+                map((node) => node.value / (node.targetLinks?.length || 1)),
+                reduce(Math.min, Infinity)
+            )(nodes);
+
+            ky = Math.max(Math.min(ky, smallestNodeMaxHeight / min), smallestNodeMinHeight / min);
+
+            nodesByBreadth.forEach((nodes) => {
+                nodes.forEach((node, i) => {
+                    node.y = i;
+                    node.dy = node.value * ky;
+                });
+            });
+
+            links.forEach((link) => {
+                link.dy = link.value * ky;
+            });
+        }
+
+        function resolveCollisions() {
+            nodesByBreadth.forEach((nodes) => {
+                let node,
+                    dy,
+                    y0 = 0,
+                    i;
+                const n = nodes.length;
+
+                // Push any overlapping nodes down.
+                nodes.sort((a, b) => a.y - b.y);
+                for (i = 0; i < n; ++i) {
+                    node = nodes[i];
+                    dy = y0 - node.y;
+                    if (dy > 0) node.y += dy;
+                    y0 = node.y + node.dy + nodePadding;
+                }
+
+                // If the bottommost node goes outside the bounds, push it back up.
+                dy = y0 - nodePadding - size[1];
+                if (dy > 0) {
+                    y0 = node.y -= dy;
+
+                    // Push any overlapping nodes back up.
+                    for (i = n - 2; i >= 0; --i) {
+                        node = nodes[i];
+                        dy = node.y + node.dy + nodePadding - y0;
+                        if (dy > 0) node.y -= dy;
+                        y0 = node.y;
+                    }
+                }
+            });
+        }
+    }
+
+    function computeLinkDepths({nodes}: SankeyData) {
+        const nodesByBreadth = pipe(
+            groupBy(prop('x')),
+            toPairs,
+            sort((a: number, b: number) => a[0] - b[0]),
+            map(nth(1))
+        )(nodes);
+
+        nodesByBreadth.forEach((nodes) => {
+            nodes.forEach((node) => {
+                if (node.targetLinks?.length) {
+                    const result = [];
+                    const linksByUuid = node.targetLinks.map((l) => l.crosswalk.uuid);
+                    const sourceNodes = [];
+                    node.targetLinks.forEach(function (l) {
+                        if (this.indexOf(l.source) == -1) this.push(l.source);
+                    }, sourceNodes);
+                    for (let i = 0; i < sourceNodes.length; i++)
+                        for (let j = 0; j < sourceNodes[i].sourceLinks.length; j++) {
+                            const index = linksByUuid.indexOf(sourceNodes[i].sourceLinks[j].crosswalk.uuid);
+                            if (index != -1) result.push(node.targetLinks[index]);
+                        }
+                    node.targetLinks = result;
+                }
+
+                if (node.sourceLinks?.length) {
+                    const result = [];
+                    if (node.targetLinks?.length) {
+                        const linksByUuid = node.sourceLinks.map((l) => l.crosswalk.uuid);
+                        for (let i = 0; i < node.targetLinks.length; i++) {
+                            const index = linksByUuid.indexOf(node.targetLinks[i].crosswalk.uuid);
+                            if (index != -1) result.push(node.sourceLinks[index]);
+                        }
+                    }
+
+                    const resultByUuid = result.map((l) => l.crosswalk.uuid);
+                    const newSources = node.sourceLinks.filter(function (l) {
+                        return this.indexOf(l.crosswalk.uuid) == -1;
+                    }, resultByUuid);
+
+                    node.sourceLinks = newSources.concat(result);
+                    if (result.length > 0) {
+                        let sizeForNewSources = 0;
+                        for (let i = 0; i < newSources.length; i++) sizeForNewSources += newSources[i].dy;
+                        node.sizeForNewSources = sizeForNewSources;
+                    }
+                }
+            });
+        });
+
+        nodes.forEach((node) => {
+            let sy = 0,
+                ty = node.sizeForNewSources || 0;
+            delete node.sizeForNewSources;
+            node.sourceLinks.forEach((link) => {
+                link.sy = sy;
+                sy += link.dy;
+            });
+            node.targetLinks.forEach((link) => {
+                link.ty = ty;
+                ty += link.dy;
+            });
+        });
+    }
+
+    function correctNodesDepth({nodes}: SankeyData) {
+        const nodesByBreadth = pipe(
+            groupBy(prop('x')),
+            toPairs,
+            sort((a: number, b: number) => b[0] - a[0]),
+            map(nth(1))
+        )(nodes);
+
+        nodesByBreadth.forEach((nodes) => {
+            nodes = nodes.concat().sort((a, b) => a.y - b.y);
+            nodes.forEach((node, i) => {
+                if (node.sourceLinks?.length) {
+                    const {target, ty, dy} = last(node.sourceLinks);
+                    let y0 = target.y + ty + dy - node.dy;
+                    if (nodes[i - 1]?.x == node.x && y0 < nodes[i - 1]?.y + nodes[i - 1]?.dy + nodePadding)
+                        y0 = nodes[i - 1].y + nodes[i - 1].dy + nodePadding;
+                    if (node.y > y0) {
+                        node.y = y0;
+                    }
+                }
+            });
+        });
+    }
+
+    return sankey;
+}

package/src/components/SankeyChart/styles.ts

@@ -0,0 +1,41 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    tooltipTitle: {
+        fontWeight: 500,
+        fontSize: '16px',
+        lineHeight: '24px',
+        letterSpacing: '0.15px',
+        marginBottom: '8px',
+        userSelect: 'none'
+    },
+    tooltipRow: {
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: '13px',
+        lineHeight: '15px',
+        fontWeight: 'normal',
+        '&:not(:last-child)': {
+            marginBottom: '4px'
+        }
+    },
+    tooltipIcon: {
+        fontSize: '18px',
+        color: 'rgba(0, 0, 0, 0.54)',
+        marginRight: '8px'
+    },
+    node: {
+        stroke: '#000000',
+        strokeWidth: 1,
+        strokeOpacity: 0.38
+    },
+    rootNode: {
+        transform: 'rotate(90deg)',
+        userSelect: 'none',
+        fontSize: '13px'
+    },
+    popupContainer: {
+        padding: 5,
+        boxSizing: 'border-box'
+    }
+});

package/src/components/SankeyChart/useSankey.tsx

@@ -0,0 +1,44 @@
+import {useMemo} from 'react';
+import {SankeyData, SankeyNode} from '../../types/SankeyChartData';
+import sankey from './sankey';
+
+type Props = {
+    width: number;
+    height: number;
+    data: SankeyData;
+};
+
+const useSankey = ({data, width, height}: Props) =>
+    useMemo(() => {
+        if (!width || !height) return {nodes: [], links: []};
+
+        const shallowCopy = (data: SankeyData): SankeyData => {
+            const safeNodes = data.nodes.map((node) => ({...node}));
+            const getSafeNode = (originalNode: SankeyNode) => {
+                const index = data.nodes.indexOf(originalNode);
+                return safeNodes[index];
+            };
+
+            const safeLinks = data.links.map((link) => ({
+                ...link,
+                source: getSafeNode(link.source),
+                target: getSafeNode(link.target)
+            }));
+            return {nodes: safeNodes, links: safeLinks};
+        };
+
+        const sankeyLayout = sankey()
+            .setNodeWidth(14)
+            .setNodePadding(20)
+            .setSize([height - 2, width - 2]);
+
+        const nodeWidth = sankeyLayout.nodeWidth();
+        const path = sankeyLayout.link();
+
+        const safeData = shallowCopy(data);
+        const {nodes, links}: SankeyData = sankeyLayout(safeData);
+
+        return {nodes, links, nodeWidth, path};
+    }, [data, height, width]);
+
+export default useSankey;

package/src/components/SelectableTree/SelectableTree.tsx

@@ -0,0 +1,46 @@
+import React, {useCallback} from 'react';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/Info';
+import {CrosswalksDisplayProvider, noop} from '@reltio/components';
+import {
+    CrosswalkBase,
+    CrosswalkTree,
+    getCrosswalkColor as getUniqueCrosswalkColor,
+    getCrosswalkId
+} from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import CrosswalkTreeView from '../CrosswalkTreeView/CrosswalkTreeView';
+import {useStyles} from './styles';
+
+type Props = {
+    coloredCrosswalks: string[];
+    crosswalkTree: CrosswalkTree;
+    selected: boolean;
+    title: string;
+    onSelect?: () => void;
+};
+
+export const SelectableTree = ({coloredCrosswalks, crosswalkTree, selected, title, onSelect = noop}: Props) => {
+    const styles = useStyles();
+    const getCrosswalkColor = useCallback(
+        (crosswalk: CrosswalkBase) => {
+            return coloredCrosswalks.includes(crosswalk.uri)
+                ? getUniqueCrosswalkColor(getCrosswalkId(crosswalk))
+                : '#CACCD1';
+        },
+        [coloredCrosswalks]
+    );
+    return (
+        <CrosswalksDisplayProvider getCrosswalkColor={getCrosswalkColor}>
+            <div className={styles.container} onClick={onSelect}>
+                <span className={styles.title}>
+                    {title} <InfoIcon className={styles.hintIcon} />
+                </span>
+                <div className={classnames(styles.graph, {[`${styles.selectedTree}`]: selected})}>
+                    {selected && <CheckCircleIcon className={styles.checkedIcon} />}
+                    <CrosswalkTreeView crosswalkTree={crosswalkTree} disableUnmerge={true} />
+                </div>
+            </div>
+        </CrosswalksDisplayProvider>
+    );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {SelectableTree} from '../SelectableTree';
+import {crosswalkTree} from '../../UnmergeDialog/__tests__/testData.data';
+
+describe('SelectableTree', () => {
+    const props = {
+        onSelect: jest.fn(),
+        title: 'the name',
+        coloredCrosswalks: [],
+        crosswalkTree
+    };
+    it('should render component correctly', () => {
+        const {asFragment} = render(<SelectableTree {...props} selected={true} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should render CheckCircleIcon if selected === true', () => {
+        const {container} = render(<SelectableTree {...props} selected={true} />);
+        expect(container.querySelector('.checkedIcon')).toBeInTheDocument();
+        expect(container.querySelector('.title').textContent).toBe('the name ');
+    });
+
+    it('should not render CheckCircleIcon if selected === false', () => {
+        const {container} = render(<SelectableTree {...props} selected={false} />);
+        expect(container.querySelector('.checkedIcon')).not.toBeInTheDocument();
+    });
+});

package/src/components/SelectableTree/__tests__/__snapshots__/SelectableTree.test.tsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectableTree should render component correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <span
+      class="title"
+    >
+      the name 
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium hintIcon css-i4bv87-MuiSvgIcon-root"
+        data-testid="InfoIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="graph selectedTree"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium checkedIcon css-i4bv87-MuiSvgIcon-root"
+        data-testid="CheckCircleIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        />
+      </svg>
+      <div
+        class="graph"
+        data-reltio-id="reltio-crosswalk-tree"
+      >
+        <svg
+          cursor="auto"
+          height="200"
+          width="0"
+        >
+          <g
+            pointer-events="auto"
+            transform="translate(0,199) rotate(-90)"
+          >
+            <g />
+            <g />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/SelectableTree/styles.ts

@@ -0,0 +1,42 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        '& + &': {
+            marginLeft: '16px'
+        }
+    },
+    title: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        color: '#666666',
+        marginBottom: '7px'
+    },
+    hintIcon: {
+        width: '16px',
+        height: '16px',
+        verticalAlign: 'middle'
+    },
+    graph: {
+        width: '400px',
+        height: '300px',
+        borderRadius: '8px',
+        background: 'rgba(0, 0, 0, 0.03)',
+        border: '1px solid rgba(0, 0, 0, 0.03)',
+        position: 'relative'
+    },
+    checkedIcon: {
+        position: 'absolute',
+        height: '20px',
+        width: '20px',
+        right: '10px',
+        top: '10px',
+        color: theme.palette.primary.main
+    },
+    selectedTree: {
+        border: `1px solid ${theme.palette.primary.main}`,
+        background: 'rgba(0, 114, 206, 0.05)'
+    }
+}));