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

datahub-web-react/src/app/lineage/LineageEntityNode.tsx

@@ -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,20 +122,35 @@ export default function LineageEntityNode({
                     })}
                 </Group>
             ) : null}
-            {node.data.unexploredChildren ? (
+            {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="white"
+                            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={ANTD_GRAY[6]}
+                            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)`}
@@ -140,7 +158,19 @@ export default function LineageEntityNode({
                             <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>
-            ) : null}
+                ) : (
+                    <g
+                        fill={ANTD_GRAY[6]}
+                        transform={`translate(${
+                            direction === Direction.Upstream ? centerX - 52 : width / 2 + 10
+                        } -21.5) scale(0.04 0.04)`}
+                    >
+                        <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
                 onDoubleClick={() => onEntityCenter({ urn: node.data.urn, type: node.data.type })}
                 onClick={(event) => {

datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx

@@ -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>