From e723f88bc6c384b1b3c7df6ec43e4432a6c7c1fb Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Tue, 20 Sep 2022 17:19:42 +0530 Subject: [PATCH 1/5] Worked on the dynamic column width of stats table --- .../tabs/Dataset/Schema/SchemaTable.tsx | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx index 3b1f0dde99039..47b0b20af1094 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx @@ -107,13 +107,13 @@ export default function SchemaTable({ title: 'Field', dataIndex: 'fieldPath', key: 'fieldPath', - width: 300, + width: '30%', render: schemaTitleRenderer, filtered: true, }; const tagColumn = { - width: 125, + width: '20%', title: 'Tags', dataIndex: 'globalTags', key: 'tag', @@ -122,7 +122,7 @@ export default function SchemaTable({ }; const termColumn = { - width: 125, + width: '20%', title: 'Terms', dataIndex: 'globalTags', key: 'tag', @@ -130,25 +130,18 @@ export default function SchemaTable({ onCell: onTagTermCell, }; - const usageColumn = { - width: 50, - title: 'Usage', - dataIndex: 'fieldPath', - key: 'usage', - render: usageStatsRenderer, - }; const descriptionColumn = { title: 'Description', dataIndex: 'description', key: 'description', render: descriptionRender, - width: 300, + width: '30%', }; const blameColumn = { dataIndex: 'fieldPath', key: 'fieldPath', - width: 75, + width: '7%', render(record: SchemaField) { return { props: { @@ -159,6 +152,14 @@ export default function SchemaTable({ }, }; + const usageColumn = { + width: '5%', + title: 'Usage', + dataIndex: 'fieldPath', + key: 'usage', + render: usageStatsRenderer, + }; + let allColumns: ColumnsType = [fieldColumn, descriptionColumn, tagColumn, termColumn]; if (hasUsageStats) { From e500dd6c097ca4151a0a6c8c8a5a33a04df84379 Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Wed, 21 Sep 2022 08:55:08 +0530 Subject: [PATCH 2/5] Worked on the Entity title with ellipsis addition --- .../tabs/Dataset/Schema/SchemaTable.tsx | 22 +++++++------- .../src/app/preview/DefaultPreviewCard.tsx | 30 +++++++++++++++++-- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx index 47b0b20af1094..1511c8d8c43b6 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx @@ -104,14 +104,22 @@ export default function SchemaTable({ }); const fieldColumn = { + width: '15%', title: 'Field', dataIndex: 'fieldPath', key: 'fieldPath', - width: '30%', render: schemaTitleRenderer, filtered: true, }; + const descriptionColumn = { + width: '15%', + title: 'Description', + dataIndex: 'description', + key: 'description', + render: descriptionRender, + }; + const tagColumn = { width: '20%', title: 'Tags', @@ -130,18 +138,10 @@ export default function SchemaTable({ onCell: onTagTermCell, }; - const descriptionColumn = { - title: 'Description', - dataIndex: 'description', - key: 'description', - render: descriptionRender, - width: '30%', - }; - const blameColumn = { + width: '10%', dataIndex: 'fieldPath', key: 'fieldPath', - width: '7%', render(record: SchemaField) { return { props: { @@ -153,7 +153,7 @@ export default function SchemaTable({ }; const usageColumn = { - width: '5%', + width: '10%', title: 'Usage', dataIndex: 'fieldPath', key: 'usage', diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index d323e6f4c700a..496003bc30753 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -73,6 +73,24 @@ const EntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` } `; +const CardEntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` + display: block; + width: 350px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + &&&:hover { + text-decoration: underline; + } + + &&& { + margin-right 8px; + font-size: ${(props) => props.$titleSizePx || 16}px; + font-weight: 600; + vertical-align: middle; + } +`; + const PlatformText = styled(Typography.Text)` font-size: 12px; line-height: 20px; @@ -271,9 +289,15 @@ export default function DefaultPreviewCard({ /> - - {name || ' '} - + {previewType === PreviewType.HOVER_CARD ? ( + + {name || ' '} + + ) : ( + + {name || ' '} + + )} {deprecation?.deprecated && } {externalUrl && ( From e48a7cadfbb69d8292d3237619c74e32f692bf5f Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Wed, 21 Sep 2022 22:09:32 +0530 Subject: [PATCH 3/5] Changes on ui bugs --- .../app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx | 8 ++++---- datahub-web-react/src/app/preview/DefaultPreviewCard.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx index 1511c8d8c43b6..79cbc9afc3861 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx @@ -104,7 +104,7 @@ export default function SchemaTable({ }); const fieldColumn = { - width: '15%', + width: '20%', title: 'Field', dataIndex: 'fieldPath', key: 'fieldPath', @@ -113,7 +113,7 @@ export default function SchemaTable({ }; const descriptionColumn = { - width: '15%', + width: '20%', title: 'Description', dataIndex: 'description', key: 'description', @@ -121,7 +121,7 @@ export default function SchemaTable({ }; const tagColumn = { - width: '20%', + width: '15%', title: 'Tags', dataIndex: 'globalTags', key: 'tag', @@ -130,7 +130,7 @@ export default function SchemaTable({ }; const termColumn = { - width: '20%', + width: '15%', title: 'Terms', dataIndex: 'globalTags', key: 'tag', diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 496003bc30753..024708a882a94 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -75,7 +75,7 @@ const EntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` const CardEntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` display: block; - width: 350px; + max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -291,7 +291,7 @@ export default function DefaultPreviewCard({ {previewType === PreviewType.HOVER_CARD ? ( - {name || ' '} + {'Test Demo test Demo Test Demo Test Demo Chareacter her' || name || ' '} ) : ( From 838b3ced9caabd6654e9746e02d065c5b6edd225 Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Wed, 21 Sep 2022 22:13:16 +0530 Subject: [PATCH 4/5] Added percentage Changes on ui bugs --- .../app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx index 79cbc9afc3861..1676880064036 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx @@ -104,7 +104,7 @@ export default function SchemaTable({ }); const fieldColumn = { - width: '20%', + width: '22%', title: 'Field', dataIndex: 'fieldPath', key: 'fieldPath', @@ -113,7 +113,7 @@ export default function SchemaTable({ }; const descriptionColumn = { - width: '20%', + width: '22%', title: 'Description', dataIndex: 'description', key: 'description', @@ -121,7 +121,7 @@ export default function SchemaTable({ }; const tagColumn = { - width: '15%', + width: '13%', title: 'Tags', dataIndex: 'globalTags', key: 'tag', @@ -130,7 +130,7 @@ export default function SchemaTable({ }; const termColumn = { - width: '15%', + width: '13%', title: 'Terms', dataIndex: 'globalTags', key: 'tag', From 041f0a29d778685254a9e745e5d9dc83e1037cad Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Thu, 22 Sep 2022 21:13:55 +0530 Subject: [PATCH 5/5] Worked on the PR comments --- .../src/app/preview/DefaultPreviewCard.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 024708a882a94..731f5cb53b8cd 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -73,22 +73,11 @@ const EntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` } `; -const CardEntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>` - display: block; +const CardEntityTitle = styled(EntityTitle)` max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - &&&:hover { - text-decoration: underline; - } - - &&& { - margin-right 8px; - font-size: ${(props) => props.$titleSizePx || 16}px; - font-weight: 600; - vertical-align: middle; - } `; const PlatformText = styled(Typography.Text)` @@ -291,7 +280,7 @@ export default function DefaultPreviewCard({ {previewType === PreviewType.HOVER_CARD ? ( - {'Test Demo test Demo Test Demo Test Demo Chareacter her' || name || ' '} + {name || ' '} ) : (