From 0e4aa3e391995cf02379a7c312411d5de43713ad Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Mon, 18 Aug 2025 19:27:38 +0530 Subject: [PATCH] fix the lineage layers not visible upfront (#22958) * fix the lineage layers not visible upfront * fix the platform lineage height, added tooltip on radio buttons and remove the new node styling for the root node * commented out the lineage view as we will re-design it * remove unwanted code and fix the playwright removing the table test portion * fix the sonar test --- .../ui/playwright/e2e/Pages/Lineage.spec.ts | 13 ------ .../resources/ui/playwright/utils/lineage.ts | 2 +- .../CustomControls.component.tsx | 42 +------------------ .../Entity/EntityLineage/custom-node.less | 14 ------- .../EntityLineage/entity-lineage.style.less | 17 ++++---- .../PlatformLineage/platform-lineage.less | 8 +++- .../ui/src/styles/components/radio.less | 4 -- 7 files changed, 17 insertions(+), 83 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts index 9c6d5e0c4a6..7e67b08537c 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts @@ -168,22 +168,9 @@ for (const EntityClass of entities) { await verifyExportLineagePNG(page); }); - await test.step('Verify Lineage Table', async () => { - await page.getByTestId('lineage-table-view-icon').click(); - - await page.waitForSelector('[data-testid="loader"]', { - state: 'detached', - }); - - await expect(page.getByTestId('lineage-table')).toBeVisible(); - - await expect(page.locator('.ant-table-row')).toHaveCount(9); - }); - await test.step( 'Remove lineage between nodes for the entity', async () => { - await page.getByTestId('lineage-diagram-view-icon').click(); await editLineage(page); await performZoomOut(page); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts index cc891e3570b..63c973ee0d9 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts @@ -103,7 +103,7 @@ export const performZoomOut = async (page: Page) => { const zoomOutBtn = page.getByTestId('zoom-out'); const enabled = await zoomOutBtn.isEnabled(); if (enabled) { - for (const _ of Array.from({ length: 8 })) { + for (const _ of Array.from({ length: 10 })) { await zoomOutBtn.dispatchEvent('click'); } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx index 866043e8a56..a74465e7f8e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx @@ -12,18 +12,12 @@ */ import { RightOutlined } from '@ant-design/icons'; -import { Button, Dropdown, Radio, Space } from 'antd'; +import { Button, Dropdown, Space } from 'antd'; import { ItemType } from 'antd/lib/menu/hooks/useItems'; import classNames from 'classnames'; import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { ReactComponent as TableViewIcon } from '../../../assets/svg/ic-column.svg'; -import { ReactComponent as DiagramViewIcon } from '../../../assets/svg/ic-platform-lineage.svg'; -import { DATA_ASSET_ICON_DIMENSION } from '../../../constants/constants'; -import { - LINEAGE_DEFAULT_QUICK_FILTERS, - LINEAGE_TAB_VIEW, -} from '../../../constants/Lineage.constants'; +import { LINEAGE_DEFAULT_QUICK_FILTERS } from '../../../constants/Lineage.constants'; import { useLineageProvider } from '../../../context/LineageProvider/LineageProvider'; import { SearchIndex } from '../../../enums/search.enum'; import { getAssetsPageQuickFilters } from '../../../utils/AdvancedSearchUtils'; @@ -36,8 +30,6 @@ import LineageSearchSelect from './LineageSearchSelect/LineageSearchSelect'; const CustomControls: FC = ({ onlyShowTabSwitch, - activeViewTab, - handleActiveViewTabChange, }: LineageControlProps) => { const { t } = useTranslation(); const { onQueryFilterUpdate, nodes } = useLineageProvider(); @@ -174,36 +166,6 @@ const CustomControls: FC = ({ )} - - - ), - value: LINEAGE_TAB_VIEW.TABLE_VIEW, - }, - { - label: ( - - ), - value: LINEAGE_TAB_VIEW.DIAGRAM_VIEW, - }, - ]} - value={activeViewTab} - onChange={handleActiveViewTabChange} - /> ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less index 472d80f54fa..b4784f0dd47 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less @@ -109,20 +109,6 @@ } } -.lineage-base-node { - border: 1px solid @blue-41; - .lineage-node-content { - .label-container, - .column-container { - background: @grey-15; - - .custom-node-header-tracing { - background: @primary-50; - } - } - } -} - .react-flow__node-default, .react-flow__node-group, .react-flow__node-input, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less index 83c678b418a..4beb674d093 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less @@ -15,7 +15,7 @@ @lineage-breadcrumb-panel: 50px; @lineage-toolbar-height: 12px; -@lineage-card-header-height: 74px; +@lineage-card-header-height: 74px; // Card header in Flow Chart .custom-react-flow { .react-flow__node-input.selectable.selected { @@ -260,7 +260,9 @@ // lineage .lineage-card { .ant-card-body { - height: calc(100vh - 350px); + height: calc( + 100vh - @om-navbar-height - @lineage-card-header-height - 280px + ); // 280 for DataAsset header } // lineage and it's children's always should be ltr @@ -290,10 +292,9 @@ .lineage-card { .ant-card-body { - // removed extra 14px to have some empty space at the bottom of the card height: calc( - 100vh - @om-navbar-height - @lineage-card-header-height - 14px - ); + 100vh - @om-navbar-height - 120px; + ); // 120px for card header and breadcrumb } overflow-y: scroll; } @@ -308,11 +309,7 @@ } .lineage-container { - // remove extra 16px to match the height of the card - height: calc( - 100vh - @om-navbar-height - @lineage-breadcrumb-panel - - @lineage-card-header-height - 16px - ); + height: 100%; } } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/platform-lineage.less b/openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/platform-lineage.less index ea573b58d3e..1f3e406e5a8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/platform-lineage.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/platform-lineage.less @@ -19,15 +19,21 @@ height: calc( 100vh - @om-navbar-height - @platform-page-header-height - @size-md ); + + .ant-card-body { + height: 100%; + } } .full-screen-lineage { + height: calc(100vh - @om-navbar-height - @size-md); + .lineage-card { height: calc(100vh - @om-navbar-height - @size-md); } .lineage-container { - height: calc(100vh - @om-navbar-height); + height: calc(100vh - @om-navbar-height - @size-md); } } } diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less index 748bc87d6ee..f554077819a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less @@ -93,10 +93,6 @@ .ant-radio-button-wrapper, .ant-radio-button-wrapper-checked { border: none; - - &::before { - background: transparent; - } } .ant-radio-button-wrapper:first-child {