Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(UI) Fix multiple UI usability issues #4975

Merged
merged 6 commits into from
May 23, 2022
Merged

fix(UI) Fix multiple UI usability issues #4975

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e6fc159
only display top 10 for top users
May 22, 2022
555d92b
increase the size of the homepage search bar
May 22, 2022
315fc78
expand searchable page search bar if screen is small
May 23, 2022
8ba63f9
simplify the search filter panel
May 23, 2022
bcc94b2
fix hanging lineage hanging requests
May 23, 2022
9296102
PR edits and fix broken test
May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions datahub-web-react/src/app/lineage/LineageEntityNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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]);
Comment on lines +94 to +98
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice! this is a surprisingly small change

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I was pleasantly surprised!


const entityRegistry = useEntityRegistry();
const unexploredHiddenChildren =
Expand Down Expand Up @@ -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);
Expand Down
13 changes: 4 additions & 9 deletions datahub-web-react/src/app/lineage/LineageExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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'} />;
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions datahub-web-react/src/app/lineage/LineageTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions datahub-web-react/src/app/lineage/LineageTreeNodeAndEdgeRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -15,7 +15,7 @@ type Props = {
};
onEntityClick: (EntitySelectParams) => void;
onEntityCenter: (EntitySelectParams) => void;
onLineageExpand: (LineageExpandParams) => void;
onLineageExpand: (daat: EntityAndType) => void;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

daat!

selectedEntity?: EntitySelectParams;
hoveredEntity?: EntitySelectParams;
setHoveredEntity: (EntitySelectParams) => void;
Expand Down
2 changes: 1 addition & 1 deletion datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion datahub-web-react/src/app/lineage/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export type TreeProps = {
fetchedEntities: { [x: string]: FetchedEntity };
onEntityClick: (EntitySelectParams) => void;
onEntityCenter: (EntitySelectParams) => void;
onLineageExpand: (LineageExpandParams) => void;
onLineageExpand: (data: EntityAndType) => void;
selectedEntity?: EntitySelectParams;
hoveredEntity?: EntitySelectParams;
};
Expand Down