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

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);
 

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');
     }
   }

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 { LINEAGE_DEFAULT_QUICK_FILTERS } from '../../../constants/Lineage.constants';
-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 { 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<LineageControlProps> = ({
   onlyShowTabSwitch,
-  activeViewTab,
-  handleActiveViewTabChange,
 }: LineageControlProps) => {
   const { t } = useTranslation();
   const { onQueryFilterUpdate, nodes } = useLineageProvider();
@@ -174,36 +166,6 @@ const CustomControls: FC<LineageControlProps> = ({
           </Space>
         </div>
       )}
-
-      <Radio.Group
-        className="new-radio-group"
-        data-testid="lineage-view-switch"
-        optionType="button"
-        options={[
-          {
-            label: (
-              <TableViewIcon
-                className="align-middle"
-                data-testid="lineage-table-view-icon"
-                style={DATA_ASSET_ICON_DIMENSION}
-              />
-            ),
-            value: LINEAGE_TAB_VIEW.TABLE_VIEW,
-          },
-          {
-            label: (
-              <DiagramViewIcon
-                className="align-middle"
-                data-testid="lineage-diagram-view-icon"
-                style={DATA_ASSET_ICON_DIMENSION}
-              />
-            ),
-            value: LINEAGE_TAB_VIEW.DIAGRAM_VIEW,
-          },
-        ]}
-        value={activeViewTab}
-        onChange={handleActiveViewTabChange}
-      />
     </div>
   );
 };

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,

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: 100%;
-    height: calc(
-      100vh - @om-navbar-height - @lineage-breadcrumb-panel -
-        @lineage-card-header-height - 16px
-    );
   }
 }
 

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);
     }
   }
 }

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 {