diff --git a/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx b/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx index c9a58d165d0af..27aca79d07931 100644 --- a/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx +++ b/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx @@ -11,6 +11,8 @@ function ChildrenTab() { const { entityData } = useEntityData(); const entityRegistry = useEntityRegistry(); + if (!entityData) return <>; + const childNodes = entityData?.children?.relationships .filter((child) => child.entity?.type === EntityType.GlossaryNode) .sort((nodeA, nodeB) => sortGlossaryNodes(entityRegistry, nodeA.entity, nodeB.entity)) diff --git a/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx b/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx index b51093cf67738..f1af3f20b44a8 100644 --- a/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx +++ b/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx @@ -1,4 +1,4 @@ -import { FolderOutlined, RightOutlined, DownOutlined } from '@ant-design/icons'; +import { FolderOutlined, RightOutlined, DownOutlined, LoadingOutlined } from '@ant-design/icons'; import styled from 'styled-components/macro'; import React, { useState, useEffect } from 'react'; import { ANTD_GRAY } from '../../entity/shared/constants'; @@ -45,6 +45,17 @@ const ChildrenWrapper = styled.div` padding-left: 12px; `; +const LoadingWrapper = styled.div` + padding: 8px; + display: flex; + justify-content: center; + + svg { + height: 15px; + width: 15px; + } +`; + interface Props { node: GlossaryNode; isSelecting?: boolean; @@ -63,7 +74,7 @@ function NodeItem(props: Props) { const [areChildrenVisible, setAreChildrenVisible] = useState(false); const entityRegistry = useEntityRegistry(); const { entityData } = useEntityData(); - const { data } = useGetGlossaryNodeQuery({ + const { data, loading } = useGetGlossaryNodeQuery({ variables: { urn: node.urn }, skip: !areChildrenVisible || shouldHideNode, }); @@ -126,24 +137,33 @@ function NodeItem(props: Props) { )} - {areChildrenVisible && data && data.glossaryNode && ( - - {(childNodes as GlossaryNode[]).map((child) => ( - - ))} - {!hideTerms && - (childTerms as GlossaryTerm[]).map((child) => ( - - ))} - + {areChildrenVisible && ( + <> + {!data && loading && ( + + + + )} + {data && data.glossaryNode && ( + + {(childNodes as GlossaryNode[]).map((child) => ( + + ))} + {!hideTerms && + (childTerms as GlossaryTerm[]).map((child) => ( + + ))} + + )} + )} ); diff --git a/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx b/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx index ad95acba11844..dc606d525e79c 100644 --- a/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx +++ b/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx @@ -27,7 +27,7 @@ function GlossaryEntitiesList(props: Props) { name={node.properties?.name || ''} urn={node.urn} type={node.type} - count={(node as GlossaryNodeFragment).children?.count} + count={(node as GlossaryNodeFragment).children?.total} /> ))} {terms.map((term) => ( diff --git a/datahub-web-react/src/graphql/fragments.graphql b/datahub-web-react/src/graphql/fragments.graphql index 5019621f79a47..20d6f86d858c9 100644 --- a/datahub-web-react/src/graphql/fragments.graphql +++ b/datahub-web-react/src/graphql/fragments.graphql @@ -19,8 +19,8 @@ fragment glossaryNode on GlossaryNode { properties { name } - children: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 1000 }) { - count + children: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 10000 }) { + total } } diff --git a/datahub-web-react/src/graphql/glossaryNode.graphql b/datahub-web-react/src/graphql/glossaryNode.graphql index 586c9167ee260..b0d4d8fc7f3c7 100644 --- a/datahub-web-react/src/graphql/glossaryNode.graphql +++ b/datahub-web-react/src/graphql/glossaryNode.graphql @@ -1,3 +1,11 @@ +fragment childGlossaryTerm on GlossaryTerm { + name + hierarchicalName + properties { + name + } +} + query getGlossaryNode($urn: String!) { glossaryNode(urn: $urn) { urn @@ -17,19 +25,19 @@ query getGlossaryNode($urn: String!) { types: ["IsPartOf"] direction: INCOMING start: 0 - count: 1000 + count: 10000 } ) { - count relationships { direction entity { type + urn ... on GlossaryNode { ...glossaryNode } ... on GlossaryTerm { - ...glossaryTerm + ...childGlossaryTerm } } }