feat(lineage): show fully qualified dataset name on expansion (#4562)

* show fully qualified dataset name on expansion

* also pull qualified name

datahub-web-react/src/Mocks.tsx

@@ -519,7 +519,8 @@ export const dataset6 = {
     name: 'Sixth Test Dataset',
     urn: 'urn:li:dataset:6',
     properties: {
-        name: 'Sixth Test Dataset',
+        name: 'Display Name of Sixth',
+        qualifiedName: 'Fully Qualified Name of Sixth Test Dataset',
         description: 'This and here we have yet another Dataset (YAN). Are there more?',
         origin: 'PROD',
         customProperties: [{ key: 'propertyAKey', value: 'propertyAValue' }],

datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx

@@ -255,9 +255,10 @@ export class DatasetEntity implements Entity<Dataset> {
     getLineageVizConfig = (entity: Dataset) => {
         return {
             urn: entity?.urn,
-            name: entity.properties?.name || entity.name,
+            name: entity?.properties?.name || entity.name,
+            expandedName: entity?.properties?.qualifiedName || entity.name,
             type: EntityType.Dataset,
-            subtype: entity.subTypes?.typeNames?.[0] || undefined,
+            subtype: entity?.subTypes?.typeNames?.[0] || undefined,
             icon: entity?.platform?.properties?.logoUrl || undefined,
             platform: entity?.platform?.name,
         };

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

@@ -104,7 +104,7 @@ export default function LineageEntityNode({
         [],
     );
 
-    const nodeHeight = nodeHeightFromTitleLength(expandTitles ? node.data.name : undefined);
+    const nodeHeight = nodeHeightFromTitleLength(expandTitles ? node.data.expandedName || node.data.name : undefined);
 
     return (
         <PointerGroup data-testid={`node-${node.data.urn}-${direction}`} top={node.x} left={node.y}>
@@ -268,7 +268,7 @@ export default function LineageEntityNode({
                     </UnselectableText>
                     {expandTitles ? (
                         <foreignObject x={textX} width="125" height="200">
-                            <MultilineTitleText>{node.data.name}</MultilineTitleText>
+                            <MultilineTitleText>{node.data.expandedName || node.data.name}</MultilineTitleText>
                         </foreignObject>
                     ) : (
                         <UnselectableText

datahub-web-react/src/app/lineage/__tests__/constructTree.test.ts

@@ -27,6 +27,7 @@ describe('constructTree', () => {
             ),
         ).toEqual({
             name: 'Yet Another Dataset',
+            expandedName: 'Yet Another Dataset',
             urn: 'urn:li:dataset:3',
             type: EntityType.Dataset,
             unexploredChildren: 0,
@@ -60,7 +61,8 @@ describe('constructTree', () => {
                 testEntityRegistry,
             ),
         ).toEqual({
-            name: 'Sixth Test Dataset',
+            name: 'Display Name of Sixth',
+            expandedName: 'Fully Qualified Name of Sixth Test Dataset',
             urn: 'urn:li:dataset:6',
             type: EntityType.Dataset,
             unexploredChildren: 0,
@@ -69,6 +71,7 @@ describe('constructTree', () => {
             children: [
                 {
                     name: 'Fourth Test Dataset',
+                    expandedName: 'Fourth Test Dataset',
                     type: EntityType.Dataset,
                     unexploredChildren: 0,
                     urn: 'urn:li:dataset:4',
@@ -106,7 +109,8 @@ describe('constructTree', () => {
                 testEntityRegistry,
             ),
         ).toEqual({
-            name: 'Sixth Test Dataset',
+            name: 'Display Name of Sixth',
+            expandedName: 'Fully Qualified Name of Sixth Test Dataset',
             urn: 'urn:li:dataset:6',
             type: EntityType.Dataset,
             unexploredChildren: 0,
@@ -116,6 +120,7 @@ describe('constructTree', () => {
                 {
                     countercurrentChildrenUrns: [],
                     name: 'Fifth Test Dataset',
+                    expandedName: 'Fifth Test Dataset',
                     type: EntityType.Dataset,
                     unexploredChildren: 0,
                     urn: 'urn:li:dataset:5',
@@ -154,6 +159,7 @@ describe('constructTree', () => {
             ),
         ).toEqual({
             name: 'Yet Another Dataset',
+            expandedName: 'Yet Another Dataset',
             urn: 'urn:li:dataset:3',
             type: EntityType.Dataset,
             unexploredChildren: 0,
@@ -162,6 +168,7 @@ describe('constructTree', () => {
             children: [
                 {
                     name: 'Fourth Test Dataset',
+                    expandedName: 'Fourth Test Dataset',
                     type: EntityType.Dataset,
                     unexploredChildren: 0,
                     urn: 'urn:li:dataset:4',
@@ -171,7 +178,8 @@ describe('constructTree', () => {
                     status: null,
                     children: [
                         {
-                            name: 'Sixth Test Dataset',
+                            name: 'Display Name of Sixth',
+                            expandedName: 'Fully Qualified Name of Sixth Test Dataset',
                             type: 'DATASET',
                             unexploredChildren: 0,
                             urn: 'urn:li:dataset:6',
@@ -182,6 +190,7 @@ describe('constructTree', () => {
                             children: [
                                 {
                                     name: 'Fifth Test Dataset',
+                                    expandedName: 'Fifth Test Dataset',
                                     type: EntityType.Dataset,
                                     unexploredChildren: 0,
                                     urn: 'urn:li:dataset:5',
@@ -199,6 +208,7 @@ describe('constructTree', () => {
                         },
                         {
                             name: 'Fifth Test Dataset',
+                            expandedName: 'Fifth Test Dataset',
                             type: EntityType.Dataset,
                             unexploredChildren: 0,
                             urn: 'urn:li:dataset:5',
@@ -267,6 +277,7 @@ describe('constructTree', () => {
             ),
         ).toEqual({
             name: 'Yet Another Dataset',
+            expandedName: 'Yet Another Dataset',
             urn: 'urn:li:dataset:3',
             type: EntityType.Dataset,
             unexploredChildren: 0,
@@ -275,6 +286,7 @@ describe('constructTree', () => {
             children: [
                 {
                     name: 'Fourth Test Dataset',
+                    expandedName: 'Fourth Test Dataset',
                     type: EntityType.Dataset,
                     unexploredChildren: 2,
                     urn: 'urn:li:dataset:4',

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

@@ -27,6 +27,8 @@ export type LineageExpandParams = {
 export type FetchedEntity = {
     urn: string;
     name: string;
+    // name to be shown on expansion if available
+    expandedName?: string;
     type: EntityType;
     subtype?: string;
     icon?: string;
@@ -41,6 +43,8 @@ export type FetchedEntity = {
 export type NodeData = {
     urn?: string;
     name: string;
+    // name to be shown on expansion if available
+    expandedName?: string;
     type?: EntityType;
     subtype?: string;
     children?: Array<NodeData>;

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

@@ -21,6 +21,7 @@ export default function constructFetchedNode(
     if (fetchedNode && !constructedNodes[urn]) {
         const node: NodeData = {
             name: fetchedNode.name,
+            expandedName: fetchedNode.expandedName,
             urn: fetchedNode.urn,
             type: fetchedNode.type,
             subtype: fetchedNode.subtype,

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

@@ -15,6 +15,7 @@ export default function constructTree(
 
     const root: NodeData = {
         name: fetchedEntity?.name || '',
+        expandedName: fetchedEntity?.expandedName || '',
         urn: fetchedEntity?.urn,
         type: fetchedEntity?.type,
         subtype: fetchedEntity?.subtype,

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

@@ -51,7 +51,7 @@ export default function layoutTree(
         const layerSize = filteredNodesInCurrentLayer.length;
 
         const layerHeight = filteredNodesInCurrentLayer
-            .map(({ node }) => nodeHeightFromTitleLength(expandTitles ? node.name : undefined))
+            .map(({ node }) => nodeHeightFromTitleLength(expandTitles ? node.expandedName || node.name : undefined))
             .reduce((acc, height) => acc + height, 0);
 
         maxHeight = Math.max(maxHeight, layerHeight);
@@ -87,7 +87,8 @@ export default function layoutTree(
                               y: HORIZONTAL_SPACE_PER_LAYER * currentLayer * xModifier,
                           };
                 currentXPosition +=
-                    nodeHeightFromTitleLength(expandTitles ? node.name : undefined) + VERTICAL_SPACE_BETWEEN_NODES;
+                    nodeHeightFromTitleLength(expandTitles ? node.expandedName || node.name : undefined) +
+                    VERTICAL_SPACE_BETWEEN_NODES;
 
                 nodesByUrn[node.urn] = vizNodeForNode;
                 nodesToRender.push(vizNodeForNode);