yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-25 06:28:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated lineage styling as per new mock and miner bug fixes (#5642)

Browse Source
This commit is contained in:
Shailesh Parmar 2022-06-25 22:08:11 +05:30 committed by GitHub
parent 07d882ee50
commit e59510c34b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx
View File

@ -216,9 +216,7 @@ const CustomNode = (props: NodeProps) => {
<div className="nowheel">
{/* Node label could be simple text or reactNode */}
<div
className={classNames('tw-px-2 tw-bg-primary-lite tw-relative ', {
'tw-border-b': !isEmpty(columns),
})}
className="tw--mx-2 tw--my-0.5 tw-px-2 tw-bg-primary-lite tw-relative tw-border tw-border-primary-hover tw-rounded-md"
data-testid="node-label">
{getHandle(type, isConnectable, isNewNode)}
{label}{' '}
@ -231,7 +229,7 @@ const CustomNode = (props: NodeProps) => {
{isExpanded && (
<div
className={classNames('tw-bg-border-lite-60', {
className={classNames('tw-bg-border-lite-60 tw-border', {
'tw-py-3': !isEmpty(columns),
})}>
<section className={classNames('tw-px-3')} id="table-columns">

8
openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
View File

@ -108,6 +108,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
loadNodeHandler,
lineageLeafNodes,
isNodeLoading,
isLoading,
deleted,
addLineageHandler,
removeLineageHandler,
@ -682,6 +683,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
source: `${params.source}`,
target: `${params.target}`,
type: isEditMode ? 'buttonedge' : 'custom',
style: { strokeWidth: '2px' },
markerEnd: {
type: MarkerType.ArrowClosed,
},
@ -1278,6 +1280,10 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
}
}, [entityLineage]);
if (isLoading) {
return <Loader />;
}
return deleted ? (
getDeletedLineagePlaceholder()
) : (
@ -1306,7 +1312,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
onDrop={onDrop}
onEdgesChange={onEdgesChange}
onInit={(reactFlowInstance: ReactFlowInstance) => {
onLoad(reactFlowInstance);
onLoad(reactFlowInstance, nodes.length);
setReactFlowInstance(reactFlowInstance);
}}
onNodeClick={(_e, node) => onNodeClick(node)}

1
openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts
View File

@ -34,6 +34,7 @@ export interface EntityLineageProp {
entityLineage: EntityLineage;
deleted?: boolean;
isOwner?: boolean;
isLoading?: boolean;
loadNodeHandler: (node: EntityReference, pos: LineagePos) => void;
addLineageHandler: (edge: Edge) => Promise<void>;
removeLineageHandler: (data: EdgeData) => void;

2
openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
View File

@ -422,7 +422,7 @@ const DashboardDetailsPage = () => {
const fetchTabSpecificData = (tabField = '') => {
switch (tabField) {
case TabSpecificField.LINEAGE: {
if (!isEmpty(dashboardDetails) && !deleted) {
if (!deleted) {
if (isEmpty(entityLineage)) {
getLineageData();
}

2
openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
View File

@ -410,7 +410,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
}
case TabSpecificField.LINEAGE: {
if (!isEmpty(tableDetails) && !deleted) {
if (!deleted) {
if (isEmpty(entityLineage)) {
getLineageData();
}

2
openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
View File

@ -347,7 +347,7 @@ const PipelineDetailsPage = () => {
const fetchTabSpecificData = (tabField = '') => {
switch (tabField) {
case TabSpecificField.LINEAGE: {
if (!isEmpty(pipelineDetails) && !deleted) {
if (!deleted) {
if (isEmpty(entityLineage)) {
getLineageData();
}

11
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -766,10 +766,6 @@ body .profiler-graph .recharts-active-dot circle {
background-color: #7147e8 !important;
}
.react-flow__edge .react-flow__edge-path {
stroke-width: 2px;
}
.react-flow__edge.selected .react-flow__edge-path {
stroke: #7147e8;
}
@ -779,7 +775,12 @@ body .profiler-graph .recharts-active-dot circle {
.react-flow__node-input,
.react-flow__node-output {
padding: 0 !important;
border: 2px solid rgb(229, 231, 235) !important;
border: 0 !important;
border-radius: 0px !important;
}
.react-flow__attribution > a {
color: #fff !important;
}
/* EntityVersion */

8
openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx
View File

@ -88,9 +88,12 @@ export const getHeaderLabel = (
);
};
export const onLoad = (reactFlowInstance: ReactFlowInstance) => {
export const onLoad = (
reactFlowInstance: ReactFlowInstance,
length?: number
) => {
reactFlowInstance.fitView();
reactFlowInstance.zoomTo(zoomValue);
length && length <= 1 && reactFlowInstance.zoomTo(zoomValue);
};
/* eslint-disable-next-line */
export const onNodeMouseEnter = (_event: ReactMouseEvent, _node: Node) => {
@ -217,6 +220,7 @@ export const getLineageDataV1 = (
source: `${edge.fromEntity}`,
target: `${edge.toEntity}`,
type: isEditMode ? edgeType : 'custom',
style: { strokeWidth: '2px' },
markerEnd: {
type: MarkerType.ArrowClosed,
},