yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-31 04:25:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(lineage): some ux improvements to lineage interactions (#3478)

Browse Source
This commit is contained in:
Gabe Lyons 2021-10-29 11:20:02 -07:00 committed by GitHub
parent ab491c7347
commit 06548a68f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
datahub-web-react/src/app/lineage/LineageEntityNode.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import { Group } from '@vx/group';
import { LinkHorizontal } from '@vx/shape';
import styled from 'styled-components';
@ -76,6 +76,9 @@ export default function LineageEntityNode({
direction: Direction;
nodesToRenderByUrn: Record<string, VizNode>;
}) {
const [isExpanding, setIsExpanding] = useState(false);
const [expandHover, setExpandHover] = useState(false);
const entityRegistry = useEntityRegistry();
const unexploredHiddenChildren =
node?.data?.countercurrentChildrenUrns?.filter((urn) => !(urn in nodesToRenderByUrn))?.length || 0;
@ -119,28 +122,55 @@ export default function LineageEntityNode({
})}
</Group>
) : null}
{node.data.unexploredChildren ? (
<Group
onClick={() => {
onExpandClick({ urn: node.data.urn, type: node.data.type, direction });
}}
>
<circle
fill="white"
cy={centerY + height / 2}
cx={direction === Direction.Upstream ? centerX - 10 : centerX + width + 10}
r="20"
/>
{node.data.unexploredChildren &&
(!isExpanding ? (
<Group
onClick={() => {
setIsExpanding(true);
onExpandClick({ urn: node.data.urn, type: node.data.type, direction });
}}
onMouseOver={() => {
setExpandHover(true);
}}
onMouseOut={() => {
setExpandHover(false);
}}
pointerEvents="bounding-box"
>
<circle
fill="none"
cy={centerY + height / 2}
cx={direction === Direction.Upstream ? centerX - 10 : centerX + width + 10}
r="20"
/>
<circle
fill="none"
cy={centerY + height / 2}
cx={direction === Direction.Upstream ? centerX - 30 : centerX + width + 30}
r="30"
/>
<g
fill={expandHover ? ANTD_GRAY[5] : ANTD_GRAY[6]}
transform={`translate(${
direction === Direction.Upstream ? centerX - 52 : width / 2 + 10
} -21.5) scale(0.04 0.04)`}
>
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z" />
</g>
</Group>
) : (
<g
fill={ANTD_GRAY[6]}
transform={`translate(${
direction === Direction.Upstream ? centerX - 52 : width / 2 + 10
} -21.5) scale(0.04 0.04)`}
>
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z" />
<path
className="lineageExpandLoading"
d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
/>
</g>
</Group>
) : null}
))}
<Group
onDoubleClick={() => onEntityCenter({ urn: node.data.urn, type: node.data.type })}
onClick={(event) => {

19
datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx
View File

@ -26,6 +26,19 @@ const ZoomButton = styled(Button)`
const RootSvg = styled.svg<{ isDragging: boolean } & SVGProps<SVGSVGElement>>`
cursor: ${(props) => (props.isDragging ? 'grabbing' : 'grab')};
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.lineageExpandLoading {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: spin 2s linear infinite;
}
`;
type Props = {
@ -78,6 +91,12 @@ export default function LineageVizInsideZoom({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [entityAndType?.entity?.urn]);
// we want to clear all the dragged nodes after recentering
useEffect(() => {
setDraggedNodes({});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [entityAndType?.entity?.urn]);
return (
<ZoomContainer>
<ZoomControls>