From e59510c34b3155d3f96cda68d7d6b2aea60d2604 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Sat, 25 Jun 2022 22:08:11 +0530 Subject: [PATCH] Updated lineage styling as per new mock and miner bug fixes (#5642) --- .../components/EntityLineage/CustomNode.component.tsx | 6 ++---- .../EntityLineage/EntityLineage.component.tsx | 8 +++++++- .../EntityLineage/EntityLineage.interface.ts | 1 + .../DashboardDetailsPage.component.tsx | 2 +- .../DatasetDetailsPage.component.tsx | 2 +- .../PipelineDetails/PipelineDetailsPage.component.tsx | 2 +- .../src/main/resources/ui/src/styles/x-master.css | 11 ++++++----- .../resources/ui/src/utils/EntityLineageUtils.tsx | 8 ++++++-- 8 files changed, 25 insertions(+), 15 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx index e46c71f6c86..154ccc3276a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx @@ -216,9 +216,7 @@ const CustomNode = (props: NodeProps) => {
{/* Node label could be simple text or reactNode */}
{getHandle(type, isConnectable, isNewNode)} {label}{' '} @@ -231,7 +229,7 @@ const CustomNode = (props: NodeProps) => { {isExpanded && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx index d0bcf57dc85..25f70394338 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx @@ -108,6 +108,7 @@ const Entitylineage: FunctionComponent = ({ loadNodeHandler, lineageLeafNodes, isNodeLoading, + isLoading, deleted, addLineageHandler, removeLineageHandler, @@ -682,6 +683,7 @@ const Entitylineage: FunctionComponent = ({ source: `${params.source}`, target: `${params.target}`, type: isEditMode ? 'buttonedge' : 'custom', + style: { strokeWidth: '2px' }, markerEnd: { type: MarkerType.ArrowClosed, }, @@ -1278,6 +1280,10 @@ const Entitylineage: FunctionComponent = ({ } }, [entityLineage]); + if (isLoading) { + return ; + } + return deleted ? ( getDeletedLineagePlaceholder() ) : ( @@ -1306,7 +1312,7 @@ const Entitylineage: FunctionComponent = ({ onDrop={onDrop} onEdgesChange={onEdgesChange} onInit={(reactFlowInstance: ReactFlowInstance) => { - onLoad(reactFlowInstance); + onLoad(reactFlowInstance, nodes.length); setReactFlowInstance(reactFlowInstance); }} onNodeClick={(_e, node) => onNodeClick(node)} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts index 2b68a84a649..6a665909c9c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.interface.ts @@ -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; removeLineageHandler: (data: EdgeData) => void; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx index 6a90451112c..72f580d7f84 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx @@ -422,7 +422,7 @@ const DashboardDetailsPage = () => { const fetchTabSpecificData = (tabField = '') => { switch (tabField) { case TabSpecificField.LINEAGE: { - if (!isEmpty(dashboardDetails) && !deleted) { + if (!deleted) { if (isEmpty(entityLineage)) { getLineageData(); } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx index 39692ef9546..f2f2eed7bd2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx @@ -410,7 +410,7 @@ const DatasetDetailsPage: FunctionComponent = () => { } case TabSpecificField.LINEAGE: { - if (!isEmpty(tableDetails) && !deleted) { + if (!deleted) { if (isEmpty(entityLineage)) { getLineageData(); } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx index 135d2054985..c44cd87493a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx @@ -347,7 +347,7 @@ const PipelineDetailsPage = () => { const fetchTabSpecificData = (tabField = '') => { switch (tabField) { case TabSpecificField.LINEAGE: { - if (!isEmpty(pipelineDetails) && !deleted) { + if (!deleted) { if (isEmpty(entityLineage)) { getLineageData(); } diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css index f9a65e56dc4..4cf76278f0c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css @@ -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 */ diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx index a03eb28bad1..9e024363b69 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx @@ -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, },