ui: add lineage section in overview tab in right panel (#24768)

* ui: add lineage section in overview tab in right panel

* add tests

* fix failing tests

* fix loader

* add tests around loader

* fix failing specs

* fix loader issue

* address copilot comment

* address comments

* fix infinite loader issue

* address comments

Author: harsh-vador

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/RightEntityPanelFlow.spec.ts

@@ -475,6 +475,18 @@ test.describe('Right Entity Panel - Admin User Flow', () => {
 
   test('Lineage Tab - No Lineage', async ({ adminPage }) => {
     const summaryPanel = adminPage.locator('.entity-summary-panel-container');
+
+    const lineageSection = summaryPanel.locator(
+      '[data-testid="lineage-section"]'
+    );
+
+    if (await lineageSection.isVisible()) {
+      await expect(
+        summaryPanel.getByText(/no lineage connections found/i)
+      ).toBeVisible();
+    }
+
+    // Now test the Lineage tab
     const lineageTab = summaryPanel.getByRole('menuitem', {
       name: /lineage/i,
     });
@@ -512,6 +524,51 @@ test.describe('Right Entity Panel - Admin User Flow', () => {
       await navigateToExploreAndSelectTable(adminPage);
 
       const summaryPanel = adminPage.locator('.entity-summary-panel-container');
+
+      // First verify the Overview tab shows lineage counts in LineageSection
+      await summaryPanel.getByRole('menuitem', {
+        name: /overview/i,
+      }).click();
+
+      await adminPage.waitForSelector('[data-testid="loader"]', {
+        state: 'detached',
+      });
+
+      const lineageSection = summaryPanel.locator(
+        '[data-testid="upstream-lineage"]'
+      );
+
+      if (await lineageSection.isVisible()) {
+        // Verify upstream and downstream counts are visible
+        const upstreamText = summaryPanel.getByText(/upstream:/i);
+        const downstreamText = summaryPanel.getByText(/downstream:/i);
+
+        await expect(upstreamText).toBeVisible();
+        await expect(downstreamText).toBeVisible();
+
+        // Verify the actual counts (should be 1 upstream and 1 downstream)
+        const upstreamCountElement = summaryPanel.locator(
+          '[data-testid="upstream-count"]'
+        );
+        const downstreamCountElement = summaryPanel.locator(
+          '[data-testid="downstream-count"]'
+        );
+
+        await expect(upstreamCountElement).toHaveText('1');
+        await expect(downstreamCountElement).toHaveText('1');
+
+        // Click on lineage section to navigate to lineage page
+        await lineageSection.click();
+
+        // Verify navigation to lineage route
+        await adminPage.waitForURL(/.*\/lineage$/);
+        expect(adminPage.url()).toContain('/lineage');
+
+        // Navigate back to explore and reopen the entity panel
+        await navigateToExploreAndSelectTable(adminPage);
+      }
+
+      // Now test the Lineage tab
       const lineageTab = summaryPanel.getByRole('menuitem', {
         name: /lineage/i,
       });

openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts

@@ -1986,7 +1986,7 @@ export const checkExploreSearchFilter = async (
   const queryRes = page.waitForResponse(querySearchURL);
   await page.click('[data-testid="update-btn"]');
   await queryRes;
-  await page.waitForSelector('[data-testid="loader"]', { state: 'detached' });
+  await waitForAllLoadersToDisappear(page);
 
   await expect(
     page.getByTestId(

openmetadata-ui/src/main/resources/ui/playwright/utils/entityPanel.ts

@@ -94,11 +94,11 @@ export const editTags = async (
     .locator('[data-testid="selectable-list"]')
     .scrollIntoViewIfNeeded();
 
-    const searchTagResponse = page.waitForResponse(
-      `/api/v1/search/query?q=*${encodeURIComponent(
-        tagName
-      )}*index=tag_search_index*`
-    );
+  const searchTagResponse = page.waitForResponse(
+    `/api/v1/search/query?q=*${encodeURIComponent(
+      tagName
+    )}*index=tag_search_index*`
+  );
   const searchBar = page.locator('[data-testid="tag-select-search-bar"]');
   await searchBar.fill(tagName);
   await searchTagResponse;

openmetadata-ui/src/main/resources/ui/src/components/DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.interface.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 import { EntityTags } from 'Models';
+import { LineageData } from '../../components/Lineage/Lineage.interface';
 import { EntityType } from '../../enums/entity.enum';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -30,6 +31,8 @@ export type DataAssetSummaryPanelProps = {
   entityType: EntityType;
   isDomainVisible?: boolean;
   isLineageView?: boolean;
+  lineageData?: LineageData | null;
+  isLineageLoading?: boolean;
   onOwnerUpdate?: (updatedOwners: EntityReference[]) => void;
   onDomainUpdate?: (updatedDomains: EntityReference[]) => void;
   onTierUpdate?: (updatedTier?: TagLabel) => void;
@@ -38,6 +41,7 @@ export type DataAssetSummaryPanelProps = {
   onGlossaryTermsUpdate?: (updatedGlossaryTerms: TagLabel[]) => void;
   onDescriptionUpdate?: (updatedDescription: string) => void;
   onLinkClick?: () => void;
+  onLineageClick?: () => void;
 };
 
 export interface TestCaseStatusCounts {

openmetadata-ui/src/main/resources/ui/src/components/DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.tsx

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { isEmpty } from 'lodash';
+import { isEmpty, isNil } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@@ -19,15 +19,16 @@ import {
   ResourceEntity,
 } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { useTourProvider } from '../../context/TourProvider/TourProvider';
-import {
-  getCurrentMillis,
-  getEpochMillisForPastDays,
-} from '../../utils/date-time/DateTimeUtils';
+import { getUpstreamDownstreamNodesEdges } from '../../utils/EntityLineageUtils';
 import { getEntityChildDetails } from '../../utils/EntitySummaryPanelUtils';
 import {
   DRAWER_NAVIGATION_OPTIONS,
   getEntityOverview,
 } from '../../utils/EntityUtils';
+import {
+  getCurrentMillis,
+  getEpochMillisForPastDays,
+} from '../../utils/date-time/DateTimeUtils';
 
 import { AxiosError } from 'axios';
 import { Operation } from 'fast-json-patch';
@@ -45,21 +46,23 @@ import { fetchCharts } from '../../utils/DashboardDetailsUtils';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import { generateEntityLink, getTierTags } from '../../utils/TableUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
+import {
+  DataAssetSummaryPanelProps,
+  TestCaseStatusCounts,
+} from '../DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.interface';
+import { ENTITY_RIGHT_PANEL_LINEAGE_TABS } from '../Entity/EntityRightPanel/EntityRightPanelVerticalNav.constants';
 import DataProductsSection from '../common/DataProductsSection/DataProductsSection';
 import DataQualitySection from '../common/DataQualitySection/DataQualitySection';
 import DescriptionSection from '../common/DescriptionSection/DescriptionSection';
 import DomainsSection from '../common/DomainsSection/DomainsSection';
 import GlossaryTermsSection from '../common/GlossaryTermsSection/GlossaryTermsSection';
+import LineageSection from '../common/LineageSection/LineageSection';
 import Loader from '../common/Loader/Loader';
 import OverviewSection from '../common/OverviewSection/OverviewSection';
 import OwnersSection from '../common/OwnersSection/OwnersSection';
 import SummaryPanelSkeleton from '../common/Skeleton/SummaryPanelSkeleton/SummaryPanelSkeleton.component';
 import TagsSection from '../common/TagsSection/TagsSection';
 import TierSection from '../common/TierSection/TierSection';
-import {
-  DataAssetSummaryPanelProps,
-  TestCaseStatusCounts,
-} from '../DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.interface';
 
 export const DataAssetSummaryPanelV1 = ({
   dataAsset,
@@ -77,6 +80,9 @@ export const DataAssetSummaryPanelV1 = ({
   onGlossaryTermsUpdate,
   onDescriptionUpdate,
   onLinkClick,
+  lineageData,
+  isLineageLoading = false,
+  onLineageClick,
 }: DataAssetSummaryPanelProps) => {
   const { t } = useTranslation();
   const { getEntityPermission } = usePermissionProvider();
@@ -164,6 +170,48 @@ export const DataAssetSummaryPanelV1 = ({
     );
   }, [dataAsset, entityType, highlights, charts, chartsDetailsLoading]);
 
+  const { upstreamCount, downstreamCount, shouldShowLineageSection } =
+    useMemo(() => {
+      if (!ENTITY_RIGHT_PANEL_LINEAGE_TABS.includes(entityType)) {
+        return {
+          upstreamCount: 0,
+          downstreamCount: 0,
+          shouldShowLineageSection: false,
+        };
+      }
+
+      if (
+        isLineageLoading ||
+        isNil(lineageData) ||
+        isEmpty(dataAsset.fullyQualifiedName)
+      ) {
+        return {
+          upstreamCount: 0,
+          downstreamCount: 0,
+          shouldShowLineageSection: true,
+        };
+      }
+
+      const nodes = Object.values(lineageData.nodes).map((node) => node.entity);
+      const edges = [
+        ...Object.values(lineageData.upstreamEdges),
+        ...Object.values(lineageData.downstreamEdges),
+      ];
+
+      const { upstreamNodes, downstreamNodes } =
+        getUpstreamDownstreamNodesEdges(
+          edges,
+          nodes,
+          dataAsset.fullyQualifiedName!
+        );
+
+      return {
+        upstreamCount: upstreamNodes.length,
+        downstreamCount: downstreamNodes.length,
+        shouldShowLineageSection: true,
+      };
+    }, [lineageData, entityType, dataAsset.fullyQualifiedName, isLineageLoading]);
+
   const fetchIncidentCount = useCallback(async () => {
     if (
       dataAsset?.fullyQualifiedName &&
@@ -445,6 +493,14 @@ export const DataAssetSummaryPanelV1 = ({
                 />
               )
             )}
+            {shouldShowLineageSection && (
+              <LineageSection
+                downstreamCount={downstreamCount}
+                isLoading={isLineageLoading}
+                upstreamCount={upstreamCount}
+                onLineageClick={onLineageClick}
+              />
+            )}
             <div>
               <OwnersSection
                 entityId={dataAsset.id}