From 5d8ea051dd80ae37f7251a0649304f23537b7edf Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Wed, 7 Sep 2022 16:26:11 +0530 Subject: [PATCH 1/5] Worked on pop-over of matched entity --- .../src/app/entity/dataset/DatasetEntity.tsx | 10 ++++-- .../app/entity/dataset/shared/TagSummary.tsx | 31 +++++++++++++++++++ .../app/entity/dataset/shared/TermSummary.tsx | 29 +++++++++++++++++ 3 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx create mode 100644 datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index b1f94859d0c162..9b1109ea72edd7 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -28,6 +28,8 @@ import { OperationsTab } from './profile/OperationsTab'; import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown'; import { SidebarSiblingsSection } from '../shared/containers/profile/sidebar/SidebarSiblingsSection'; import { DatasetStatsSummarySubHeader } from './profile/stats/stats/DatasetStatsSummarySubHeader'; +import { TagSummary } from './shared/TagSummary'; +import { TermSummary } from './shared/TermSummary'; const SUBTYPES = { VIEW: 'view', @@ -253,6 +255,11 @@ export class DatasetEntity implements Entity { renderSearch = (result: SearchResult) => { const data = result.entity as Dataset; const genericProperties = this.getGenericEntityProperties(data); + const snippet = result.matchedFields[0].value.includes('urn:li:tag') ? ( + + ) : ( + + ); return ( { result.matchedFields.length > 0 && result.matchedFields.every((field) => FIELDS_TO_HIGHLIGHT.has(field.name)) && ( - Matches {FIELDS_TO_HIGHLIGHT.get(result.matchedFields[0].name)}{' '} - {result.matchedFields[0].value} + Matches {FIELDS_TO_HIGHLIGHT.get(result.matchedFields[0].name)} {snippet} ) } diff --git a/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx new file mode 100644 index 00000000000000..a5a21b8af4debd --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import styled from 'styled-components'; +import { useGetTagQuery } from '../../../../graphql/tag.generated'; +import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip'; +import { StyledTag } from '../../shared/components/styled/StyledTag'; + +const TagLink = styled.span` + display: inline-block; +`; + +type Props = { + urn: string; +}; + +export const TagSummary = ({ urn }: Props) => { + const { data } = useGetTagQuery({ variables: { urn } }); + return ( + + + + {data?.tag?.properties?.name} + + + + ); +}; diff --git a/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx new file mode 100644 index 00000000000000..ffe687451b8ac6 --- /dev/null +++ b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Tag } from 'antd'; +import { BookOutlined } from '@ant-design/icons'; +import styled from 'styled-components'; +import { useGetGlossaryTermQuery } from '../../../../graphql/glossaryTerm.generated'; +import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip'; + +const TermLink = styled.span` + display: inline-block; +`; + +type Props = { + urn: string; +}; + +export const TermSummary = ({ urn }: Props) => { + const { data } = useGetGlossaryTermQuery({ variables: { urn } }); + + return ( + + + + + {data?.glossaryTerm?.name} + + + + ); +}; From af3c404de2e95f3172b30b87f401ddb9c8ba073b Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Thu, 8 Sep 2022 14:44:23 +0530 Subject: [PATCH 2/5] Worked on the matched tag , term on search result --- .../src/app/entity/dataset/DatasetEntity.tsx | 15 ++++++---- .../app/entity/dataset/shared/TagSummary.tsx | 29 +++++++++++-------- .../app/entity/dataset/shared/TermSummary.tsx | 21 +++++++++----- .../glossaryNode/GlossaryNodeEntity.tsx | 1 - datahub-web-react/src/graphql/tag.graphql | 1 + 5 files changed, 41 insertions(+), 26 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 9b1109ea72edd7..58427465cd6719 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -255,11 +255,16 @@ export class DatasetEntity implements Entity { renderSearch = (result: SearchResult) => { const data = result.entity as Dataset; const genericProperties = this.getGenericEntityProperties(data); - const snippet = result.matchedFields[0].value.includes('urn:li:tag') ? ( - - ) : ( - - ); + + let snippet: React.ReactNode; + if (result.matchedFields[0].value.includes('urn:li:tag')) { + snippet = ; + } else if (result.matchedFields[0].value.includes('urn:li:term')) { + snippet = ; + } else { + snippet = {result.matchedFields[0].value}; + } + return ( { const { data } = useGetTagQuery({ variables: { urn } }); return ( - - - - {data?.tag?.properties?.name} - - - + <> + {data && ( + + + + {data?.tag?.properties?.name} + + + + )} + ); }; diff --git a/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx index ffe687451b8ac6..1691f792d28094 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx @@ -4,6 +4,7 @@ import { BookOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import { useGetGlossaryTermQuery } from '../../../../graphql/glossaryTerm.generated'; import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip'; +import { GlossaryTerm } from '../../../../types.generated'; const TermLink = styled.span` display: inline-block; @@ -17,13 +18,17 @@ export const TermSummary = ({ urn }: Props) => { const { data } = useGetGlossaryTermQuery({ variables: { urn } }); return ( - - - - - {data?.glossaryTerm?.name} - - - + <> + {data && ( + + + + + {data?.glossaryTerm?.name} + + + + )} + ); }; diff --git a/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx index 54a29b3fd048f2..d2011d99971500 100644 --- a/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx +++ b/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx @@ -114,7 +114,6 @@ class GlossaryNodeEntity implements Entity { }; renderPreview = (_: PreviewType, data: GlossaryNode) => { - console.log(data); return ( Date: Thu, 8 Sep 2022 22:06:44 +0530 Subject: [PATCH 3/5] Added a condition to check the matched vale lenght --- .../src/app/entity/dataset/DatasetEntity.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 58427465cd6719..71051dc93a7333 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -257,12 +257,15 @@ export class DatasetEntity implements Entity { const genericProperties = this.getGenericEntityProperties(data); let snippet: React.ReactNode; - if (result.matchedFields[0].value.includes('urn:li:tag')) { - snippet = ; - } else if (result.matchedFields[0].value.includes('urn:li:term')) { - snippet = ; - } else { - snippet = {result.matchedFields[0].value}; + + if (result.matchedFields.length > 0) { + if (result.matchedFields[0].value.includes('urn:li:tag')) { + snippet = ; + } else if (result.matchedFields[0].value.includes('urn:li:term')) { + snippet = ; + } else { + snippet = {result.matchedFields[0].value}; + } } return ( From f5b5a24af107d399e712d5a5a3e1c215264ba82c Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Mon, 19 Sep 2022 22:22:28 +0530 Subject: [PATCH 4/5] Removed the type from the graphQl --- datahub-web-react/src/graphql/tag.graphql | 1 - 1 file changed, 1 deletion(-) diff --git a/datahub-web-react/src/graphql/tag.graphql b/datahub-web-react/src/graphql/tag.graphql index f3c83daa80dfda..37aaebc2650322 100644 --- a/datahub-web-react/src/graphql/tag.graphql +++ b/datahub-web-react/src/graphql/tag.graphql @@ -1,6 +1,5 @@ query getTag($urn: String!) { tag(urn: $urn) { - type urn name description From 6326a924b40bb3c7590df25d4d3b50c2689c7b12 Mon Sep 17 00:00:00 2001 From: Ankit Keshari Date: Tue, 20 Sep 2022 16:05:13 +0530 Subject: [PATCH 5/5] worked on the PR comments --- datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx | 2 +- .../src/app/entity/dataset/shared/TagSummary.tsx | 6 ++++-- .../src/app/entity/dataset/shared/TermSummary.tsx | 6 ++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 71051dc93a7333..0953d40605e225 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -261,7 +261,7 @@ export class DatasetEntity implements Entity { if (result.matchedFields.length > 0) { if (result.matchedFields[0].value.includes('urn:li:tag')) { snippet = ; - } else if (result.matchedFields[0].value.includes('urn:li:term')) { + } else if (result.matchedFields[0].value.includes('urn:li:glossaryTerm')) { snippet = ; } else { snippet = {result.matchedFields[0].value}; diff --git a/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx index f60c4ba65a2354..106cc298fb58c4 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx @@ -1,8 +1,9 @@ import React from 'react'; import styled from 'styled-components'; import { useGetTagQuery } from '../../../../graphql/tag.generated'; -import { Tag } from '../../../../types.generated'; +import { EntityType, Tag } from '../../../../types.generated'; import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip'; +import { useEntityRegistry } from '../../../useEntityRegistry'; import { StyledTag } from '../../shared/components/styled/StyledTag'; const TagLink = styled.span` @@ -14,6 +15,7 @@ type Props = { }; export const TagSummary = ({ urn }: Props) => { + const entityRegistry = useEntityRegistry(); const { data } = useGetTagQuery({ variables: { urn } }); return ( <> @@ -26,7 +28,7 @@ export const TagSummary = ({ urn }: Props) => { $color={data?.tag?.properties?.colorHex} closable={false} > - {data?.tag?.properties?.name} + {entityRegistry.getDisplayName(EntityType.Tag, data?.tag)} diff --git a/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx index 1691f792d28094..cc1274693a3420 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx @@ -4,7 +4,8 @@ import { BookOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import { useGetGlossaryTermQuery } from '../../../../graphql/glossaryTerm.generated'; import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip'; -import { GlossaryTerm } from '../../../../types.generated'; +import { EntityType, GlossaryTerm } from '../../../../types.generated'; +import { useEntityRegistry } from '../../../useEntityRegistry'; const TermLink = styled.span` display: inline-block; @@ -15,6 +16,7 @@ type Props = { }; export const TermSummary = ({ urn }: Props) => { + const entityRegistry = useEntityRegistry(); const { data } = useGetGlossaryTermQuery({ variables: { urn } }); return ( @@ -24,7 +26,7 @@ export const TermSummary = ({ urn }: Props) => { - {data?.glossaryTerm?.name} + {entityRegistry.getDisplayName(EntityType.GlossaryTerm, data?.glossaryTerm)}