feat(react): add icons on entities, updated styling in LineageViz (#2366)

datahub-web-react/src/app/browse/BrowsePath.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { Breadcrumb, Row } from 'antd';
 import styled from 'styled-components';
+import { IconBaseProps } from 'react-icons/lib';
 import { VscRepoForked, VscPreview } from 'react-icons/vsc';
 import { blue, grey } from '@ant-design/colors';
 
@@ -23,7 +24,9 @@ const LineageIconGroup = styled.div`
     justify-content: space-between;
 `;
 
-const HoverableVscPreview = styled(VscPreview)<{ isSelected: boolean }>`
+const HoverableVscPreview = styled(({ isSelected: _, ...props }: IconBaseProps & { isSelected: boolean }) => (
+    <VscPreview {...props} />
+))`
     color: ${(props) => (props.isSelected ? 'black' : grey[2])};
     &:hover {
         color: ${(props) => (props.isSelected ? 'black' : blue[4])};
@@ -31,7 +34,9 @@ const HoverableVscPreview = styled(VscPreview)<{ isSelected: boolean }>`
     }
 `;
 
-const HoverableVscRepoForked = styled(VscRepoForked)<{ isSelected: boolean }>`
+const HoverableVscRepoForked = styled(({ isSelected: _, ...props }: IconBaseProps & { isSelected: boolean }) => (
+    <VscRepoForked {...props} />
+))`
     color: ${(props) => (props.isSelected ? 'black' : grey[2])};
     &:hover {
         color: ${(props) => (props.isSelected ? 'black' : blue[4])};
@@ -64,7 +69,7 @@ export const BrowsePath = ({ type, path, lineageSupported }: Props) => {
     const baseBrowsePath = `${PageRoutes.BROWSE}/${entityRegistry.getPathName(type)}`;
 
     const pathCrumbs = path.map((part, index) => (
-        <Breadcrumb.Item>
+        <Breadcrumb.Item key={`${part || index}`}>
             <Link to={`${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`}>{part}</Link>
         </Breadcrumb.Item>
     ));

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

@@ -14,10 +14,15 @@ function truncate(input, length) {
     return input;
 }
 
-export const width = 140;
+export const width = 212;
 export const height = 80;
+const iconWidth = 42;
+const iconHeight = 42;
+const iconX = -width / 2 + 8;
+const iconY = -iconHeight / 2;
 const centerX = -width / 2;
 const centerY = -height / 2;
+const textX = iconX + iconWidth + 8;
 
 const PointerGroup = styled(Group)`
     cursor: pointer;
@@ -49,7 +54,7 @@ export default function LineageEntityNode({
 
     return (
         <PointerGroup data-testid={`node-${node.data.urn}-${direction}`} top={node.x} left={node.y}>
-            {unexploredHiddenChildren && (
+            {unexploredHiddenChildren ? (
                 <Group>
                     {[...Array(unexploredHiddenChildren)].map((_, index) => {
                         const link = {
@@ -72,8 +77,8 @@ export default function LineageEntityNode({
                         );
                     })}
                 </Group>
-            )}
-            {node.data.unexploredChildren && (
+            ) : null}
+            {node.data.unexploredChildren ? (
                 <Group
                     onClick={() => {
                         onExpandClick({ urn: node.data.urn, type: EntityType.Dataset, direction });
@@ -88,13 +93,13 @@ export default function LineageEntityNode({
                     <g
                         fill="grey"
                         transform={`translate(${
-                            direction === Direction.Upstream ? -1 * width + 37 : width / 2 - 10
+                            direction === Direction.Upstream ? centerX - 32 : 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>
-            )}
+            ) : null}
             <Group
                 onClick={() => {
                     onEntityClick({ urn: node.data.urn, type: EntityType.Dataset });
@@ -118,15 +123,26 @@ export default function LineageEntityNode({
                     strokeOpacity={1}
                     rx={10}
                 />
-                <text dy=".33em" fontSize={14} fontFamily="Arial" textAnchor="middle" fill="black">
+                {node.data.icon ? (
+                    <image href={node.data.icon} height={iconHeight} width={iconWidth} x={iconX} y={iconY} />
+                ) : null}
+                <text dy=".33em" x={textX} fontSize={16} fontFamily="Arial" textAnchor="start" fill="black">
                     {truncate(node.data.name?.split('.').slice(-1)[0], 16)}
                 </text>
-                {unexploredHiddenChildren && isHovered && (
-                    <text dy=".33em" fontSize={14} fontFamily="Arial" textAnchor="middle" fill="black" y={centerY - 20}>
+                {unexploredHiddenChildren && isHovered ? (
+                    <text
+                        dy=".33em"
+                        dx={textX}
+                        fontSize={16}
+                        fontFamily="Arial"
+                        textAnchor="middle"
+                        fill="black"
+                        y={centerY - 20}
+                    >
                         {unexploredHiddenChildren} hidden {direction === Direction.Upstream ? 'downstream' : 'upstream'}{' '}
                         {unexploredHiddenChildren > 1 ? 'dependencies' : 'dependency'}
                     </text>
-                )}
+                ) : null}
             </Group>
         </PointerGroup>
     );

datahub-web-react/src/app/lineage/types.ts

@@ -16,6 +16,7 @@ export type FetchedEntity = {
     urn: string;
     name: string;
     type: EntityType;
+    icon?: string;
     // children?: Array<string>;
     upstreamChildren?: Array<string>;
     downstreamChildren?: Array<string>;
@@ -28,6 +29,7 @@ export type NodeData = {
     type?: EntityType;
     children?: Array<NodeData>;
     unexploredChildren?: number;
+    icon?: string;
     // Hidden children are unexplored but in the opposite direction of the flow of the graph.
     // Currently our visualization does not support expanding in two directions
     countercurrentChildrenUrns?: string[];

datahub-web-react/src/app/lineage/utils/constructFetchedNode.ts

@@ -17,6 +17,7 @@ export default function constructFetchedNode(
             name: fetchedNode.name,
             urn: fetchedNode.urn,
             type: fetchedNode.type,
+            icon: fetchedNode.icon,
             unexploredChildren:
                 fetchedNode?.[direction === Direction.Upstream ? 'upstreamChildren' : 'downstreamChildren']?.filter(
                     (childUrn) => !(childUrn in fetchedEntities),

datahub-web-react/src/app/lineage/utils/constructTree.ts

@@ -16,6 +16,7 @@ export default function constructTree(
         name: dataset?.name,
         urn: dataset?.urn,
         type: dataset?.type,
+        icon: dataset?.platform?.info?.logoUrl || undefined,
         unexploredChildren: 0,
     };
     root.children = getChildren(dataset as Dataset, direction)

datahub-web-react/src/app/lineage/utils/extendAsyncEntities.ts

@@ -16,6 +16,7 @@ export default function extendAsyncEntities(
             urn: entity.urn,
             name: entity.name,
             type: entity.type,
+            icon: entity.platform.info?.logoUrl || undefined,
             upstreamChildren: getChildren(entity, Direction.Upstream).map((child) => child.dataset.urn),
             downstreamChildren: getChildren(entity, Direction.Downstream).map((child) => child.dataset.urn),
             fullyFetched,

datahub-web-react/src/graphql/dataset.graphql

@@ -136,6 +136,9 @@ query getDataset($urn: String!) {
         uri
         platform {
             name
+            info {
+                logoUrl
+            }
         }
         platformNativeType
         tags