fix(UI) Fix multiple UI usability issues (#4975)

datahub-project · May 23, 2022 · 3aa841c · 3aa841c
1 parent 39fb7e5
commit 3aa841c
Show file tree

Hide file tree

Showing 18 changed files with 289 additions and 98 deletions.
diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx
@@ -1774,6 +1774,14 @@ export const mocks = [
                             displayName: 'origin',
                             aggregations: [{ value: 'PROD', count: 3, entity: null }],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -1837,6 +1845,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             __typename: 'FacetMetadata',
                             field: 'platform',
@@ -1895,6 +1911,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -1987,6 +2011,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2143,6 +2175,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2208,6 +2248,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2490,6 +2538,26 @@ export const mocks = [
                                 },
                             ],
                         },
+                        // {
+                        //     displayName: 'Domain',
+                        //     field: 'domains',
+                        //     __typename: 'FacetMetadata',
+                        //     aggregations: [
+                        //         {
+                        //             value: 'urn:li:domain:baedb9f9-98ef-4846-8a0c-2a88680f213e',
+                        //             count: 1,
+                        //             __typename: 'AggregationMetadata',
+                        //         },
+                        //     ],
+                        // },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             __typename: 'FacetMetadata',
                             field: 'platform',
@@ -2665,6 +2733,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2730,6 +2806,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2796,6 +2880,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -2862,6 +2954,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',
@@ -3096,6 +3196,14 @@ export const mocks = [
                                 },
                             ],
                         },
+                        {
+                            field: 'entity',
+                            displayName: 'Type',
+                            aggregations: [
+                                { count: 37, entity: null, value: 'DATASET', __typename: 'AggregationMetadata' },
+                                { count: 7, entity: null, value: 'CHART', __typename: 'AggregationMetadata' },
+                            ],
+                        },
                         {
                             field: 'platform',
                             displayName: 'platform',

diff --git a/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx b/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx
@@ -8,19 +8,24 @@ import getAvatarColor from '../../../shared/avatar/getAvatarColor';
 
 export type Props = {
     users?: (UserUsageCounts | null)[] | null;
+    maxNumberDisplayed?: number;
 };
 
 const AvatarStyled = styled(Avatar)<{ backgroundColor: string }>`
     color: #fff;
     background-color: ${(props) => props.backgroundColor};
 `;
 
-export default function UsageFacepile({ users }: Props) {
+export default function UsageFacepile({ users, maxNumberDisplayed }: Props) {
     const sortedUsers = useMemo(() => users?.slice().sort((a, b) => (b?.count || 0) - (a?.count || 0)), [users]);
+    let displayedUsers = sortedUsers;
+    if (maxNumberDisplayed) {
+        displayedUsers = displayedUsers?.slice(0, maxNumberDisplayed);
+    }
 
     return (
         <SpacedAvatarGroup maxCount={2}>
-            {sortedUsers?.map((user) => (
+            {displayedUsers?.map((user) => (
                 <Tooltip title={user?.userEmail}>
                     <AvatarStyled backgroundColor={getAvatarColor(user?.userEmail || undefined)}>
                         {user?.userEmail?.charAt(0).toUpperCase()}

diff --git a/...eb-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx b/...eb-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx
@@ -100,7 +100,7 @@ export const SidebarStatsSection = () => {
                 ) : null}
                 {(usageStats?.aggregations?.users?.length || 0) > 0 ? (
                     <InfoItem title="Top Users" width={INFO_ITEM_WIDTH_PX}>
-                        <UsageFacepile users={usageStats?.aggregations?.users} />
+                        <UsageFacepile users={usageStats?.aggregations?.users} maxNumberDisplayed={10} />
                     </InfoItem>
                 ) : null}
             </StatsRow>

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/snapshot/TableStats.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/snapshot/TableStats.tsx
@@ -70,7 +70,7 @@ export default function TableStats({
                 {users && (
                     <InfoItem title="Top Users">
                         <div style={{ paddingTop: 8 }}>
-                            <UsageFacepile users={users} />
+                            <UsageFacepile users={users} maxNumberDisplayed={10} />
                         </div>
                     </InfoItem>
                 )}

diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -38,7 +38,7 @@ const styles = {
     navBar: { padding: '24px' },
     searchContainer: { width: '100%', marginTop: '40px' },
     logoImage: { width: 140 },
-    searchBox: { width: '40vw', minWidth: 400, margin: '40px 0px', marginBottom: '12px' },
+    searchBox: { width: '47vw', minWidth: 400, margin: '40px 0px', marginBottom: '12px', maxWidth: '650px' },
     subtitle: { marginTop: '28px', color: '#FFFFFF', fontSize: 12 },
 };
 
@@ -58,8 +58,9 @@ const NavGroup = styled.div`
 `;
 
 const SuggestionsContainer = styled.div`
-    padding: 0px 30px;
-    max-width: 540px;
+    margin: 0px 30px;
+    max-width: 650px;
+    width: 47vw;
     display: flex;
     flex-direction: column;
     justify-content: left;

diff --git a/datahub-web-react/src/app/lineage/LineageEntityNode.tsx b/datahub-web-react/src/app/lineage/LineageEntityNode.tsx
@@ -1,15 +1,16 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Group } from '@vx/group';
 import { LinkHorizontal } from '@vx/shape';
 import styled from 'styled-components';
 
 import { useEntityRegistry } from '../useEntityRegistry';
 import { IconStyleType } from '../entity/Entity';
-import { NodeData, Direction, VizNode, EntitySelectParams } from './types';
+import { NodeData, Direction, VizNode, EntitySelectParams, EntityAndType } from './types';
 import { ANTD_GRAY } from '../entity/shared/constants';
 import { capitalizeFirstLetter } from '../shared/textUtil';
 import { nodeHeightFromTitleLength } from './utils/nodeHeightFromTitleLength';
 import { LineageExplorerContext } from './utils/LineageExplorerContext';
+import useLazyGetEntityQuery from './utils/useLazyGetEntityQuery';
 
 const CLICK_DELAY_THRESHOLD = 1000;
 const DRAG_DISTANCE_THRESHOLD = 20;
@@ -81,13 +82,20 @@ export default function LineageEntityNode({
     onEntityCenter: (EntitySelectParams) => void;
     onHover: (EntitySelectParams) => void;
     onDrag: (params: EntitySelectParams, event: React.MouseEvent) => void;
-    onExpandClick: (LineageExpandParams) => void;
+    onExpandClick: (data: EntityAndType) => void;
     direction: Direction;
     nodesToRenderByUrn: Record<string, VizNode>;
 }) {
     const { expandTitles } = useContext(LineageExplorerContext);
     const [isExpanding, setIsExpanding] = useState(false);
     const [expandHover, setExpandHover] = useState(false);
+    const { getAsyncEntity, asyncData } = useLazyGetEntityQuery();
+
+    useEffect(() => {
+        if (asyncData) {
+            onExpandClick(asyncData);
+        }
+    }, [asyncData, onExpandClick]);
 
     const entityRegistry = useEntityRegistry();
     const unexploredHiddenChildren =
@@ -139,7 +147,9 @@ export default function LineageEntityNode({
                     <Group
                         onClick={() => {
                             setIsExpanding(true);
-                            onExpandClick({ urn: node.data.urn, type: node.data.type, direction });
+                            if (node.data.urn && node.data.type) {
+                                getAsyncEntity(node.data.urn, node.data.type);
+                            }
                         }}
                         onMouseOver={() => {
                             setExpandHover(true);

diff --git a/datahub-web-react/src/app/lineage/LineageExplorer.tsx b/datahub-web-react/src/app/lineage/LineageExplorer.tsx
@@ -8,10 +8,9 @@ import styled from 'styled-components';
 import { Message } from '../shared/Message';
 import { useEntityRegistry } from '../useEntityRegistry';
 import CompactContext from '../shared/CompactContext';
-import { EntityAndType, EntitySelectParams, FetchedEntities, LineageExpandParams } from './types';
+import { EntityAndType, EntitySelectParams, FetchedEntities } from './types';
 import LineageViz from './LineageViz';
 import extendAsyncEntities from './utils/extendAsyncEntities';
-import useLazyGetEntityQuery from './utils/useLazyGetEntityQuery';
 import useGetEntityQuery from './utils/useGetEntityQuery';
 import { EntityType } from '../../types.generated';
 import { capitalizeFirstLetter } from '../shared/textUtil';
@@ -58,7 +57,6 @@ export default function LineageExplorer({ urn, type }: Props) {
     const entityRegistry = useEntityRegistry();
 
     const { loading, error, data } = useGetEntityQuery(urn, type);
-    const { getAsyncEntity, asyncData } = useLazyGetEntityQuery();
 
     const [isDrawerVisible, setIsDrawVisible] = useState(false);
     const [selectedEntity, setSelectedEntity] = useState<EntitySelectParams | undefined>(undefined);
@@ -94,10 +92,7 @@ export default function LineageExplorer({ urn, type }: Props) {
         if (type && data) {
             maybeAddAsyncLoadedEntity(data);
         }
-        if (asyncData) {
-            maybeAddAsyncLoadedEntity(asyncData);
-        }
-    }, [data, asyncData, asyncEntities, setAsyncEntities, maybeAddAsyncLoadedEntity, urn, previousUrn, type]);
+    }, [data, asyncEntities, setAsyncEntities, maybeAddAsyncLoadedEntity, urn, previousUrn, type]);
 
     if (error || (!loading && !error && !data)) {
         return <Alert type="error" message={error?.message || 'Entity failed to load'} />;
@@ -124,8 +119,8 @@ export default function LineageExplorer({ urn, type }: Props) {
                                 `${entityRegistry.getEntityUrl(params.type, params.urn)}/?is_lineage_mode=true`,
                             );
                         }}
-                        onLineageExpand={(params: LineageExpandParams) => {
-                            getAsyncEntity(params.urn, params.type);
+                        onLineageExpand={(asyncData: EntityAndType) => {
+                            maybeAddAsyncLoadedEntity(asyncData);
                         }}
                     />
                 </div>

diff --git a/datahub-web-react/src/app/lineage/LineageTree.tsx b/datahub-web-react/src/app/lineage/LineageTree.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { TransformMatrix } from '@vx/zoom/lib/types';
 
-import { NodeData, Direction, EntitySelectParams, TreeProps } from './types';
+import { NodeData, Direction, EntitySelectParams, TreeProps, EntityAndType } from './types';
 import LineageTreeNodeAndEdgeRenderer from './LineageTreeNodeAndEdgeRenderer';
 import layoutTree from './utils/layoutTree';
 import { LineageExplorerContext } from './utils/LineageExplorerContext';
@@ -13,7 +13,7 @@ type LineageTreeProps = {
     };
     onEntityClick: (EntitySelectParams) => void;
     onEntityCenter: (EntitySelectParams) => void;
-    onLineageExpand: (LineageExpandParams) => void;
+    onLineageExpand: (data: EntityAndType) => void;
     selectedEntity?: EntitySelectParams;
     hoveredEntity?: EntitySelectParams;
     setHoveredEntity: (EntitySelectParams) => void;

diff --git a/datahub-web-react/src/app/lineage/LineageTreeNodeAndEdgeRenderer.tsx b/datahub-web-react/src/app/lineage/LineageTreeNodeAndEdgeRenderer.tsx
@@ -4,7 +4,7 @@ import { curveBasis } from '@vx/curve';
 import { LinePath } from '@vx/shape';
 import { TransformMatrix } from '@vx/zoom/lib/types';
 
-import { NodeData, Direction, EntitySelectParams, TreeProps, VizNode, VizEdge } from './types';
+import { NodeData, Direction, EntitySelectParams, TreeProps, VizNode, VizEdge, EntityAndType } from './types';
 import LineageEntityNode from './LineageEntityNode';
 import { ANTD_GRAY } from '../entity/shared/constants';
 
@@ -15,7 +15,7 @@ type Props = {
     };
     onEntityClick: (EntitySelectParams) => void;
     onEntityCenter: (EntitySelectParams) => void;
-    onLineageExpand: (LineageExpandParams) => void;
+    onLineageExpand: (data: EntityAndType) => void;
     selectedEntity?: EntitySelectParams;
     hoveredEntity?: EntitySelectParams;
     setHoveredEntity: (EntitySelectParams) => void;

diff --git a/datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx b/datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx
@@ -68,7 +68,7 @@ type Props = {
     fetchedEntities: { [x: string]: FetchedEntity };
     onEntityClick: (EntitySelectParams) => void;
     onEntityCenter: (EntitySelectParams) => void;
-    onLineageExpand: (LineageExpandParams) => void;
+    onLineageExpand: (data: EntityAndType) => void;
     selectedEntity?: EntitySelectParams;
     zoom: ProvidedZoom & {
         transformMatrix: TransformMatrix;