fix(glossary) Improve business glossary loading performance (#6208)

datahub-project · Oct 14, 2022 · 034f2e9 · 034f2e9
1 parent 5a2bdea
commit 034f2e9
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 26 deletions.
diff --git 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
@@ -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) {
                     </NameWrapper>
                 )}
             </NodeWrapper>
-            {areChildrenVisible && data && data.glossaryNode && (
-                <ChildrenWrapper>
-                    {(childNodes as GlossaryNode[]).map((child) => (
-                        <NodeItem
-                            node={child}
-                            isSelecting={isSelecting}
-                            hideTerms={hideTerms}
-                            openToEntity={openToEntity}
-                            nodeUrnToHide={nodeUrnToHide}
-                            selectTerm={selectTerm}
-                            selectNode={selectNode}
-                        />
-                    ))}
-                    {!hideTerms &&
-                        (childTerms as GlossaryTerm[]).map((child) => (
-                            <TermItem term={child} isSelecting={isSelecting} selectTerm={selectTerm} />
-                        ))}
-                </ChildrenWrapper>
+            {areChildrenVisible && (
+                <>
+                    {!data && loading && (
+                        <LoadingWrapper>
+                            <LoadingOutlined />
+                        </LoadingWrapper>
+                    )}
+                    {data && data.glossaryNode && (
+                        <ChildrenWrapper>
+                            {(childNodes as GlossaryNode[]).map((child) => (
+                                <NodeItem
+                                    node={child}
+                                    isSelecting={isSelecting}
+                                    hideTerms={hideTerms}
+                                    openToEntity={openToEntity}
+                                    nodeUrnToHide={nodeUrnToHide}
+                                    selectTerm={selectTerm}
+                                    selectNode={selectNode}
+                                />
+                            ))}
+                            {!hideTerms &&
+                                (childTerms as GlossaryTerm[]).map((child) => (
+                                    <TermItem term={child} isSelecting={isSelecting} selectTerm={selectTerm} />
+                                ))}
+                        </ChildrenWrapper>
+                    )}
+                </>
             )}
         </ItemWrapper>
     );

diff --git 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
@@ -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
@@ -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
                     }
                 }
             }