Add relevent terms relation in term details page

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

@@ -0,0 +1,145 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { APIRequestContext, Browser, expect, Page } from '@playwright/test';
+import { SidebarItem } from '../constant/sidebar';
+import { Glossary } from '../support/glossary/Glossary';
+import { GlossaryTerm } from '../support/glossary/GlossaryTerm';
+import { getAuthContext, getToken, redirectToHomePage } from '../utils/common';
+import { sidebarClick } from '../utils/sidebar';
+
+export async function applyGlossaryFilter(page: Page, glossaryId: string) {
+  await page.getByTestId('search-dropdown-Glossary').click();
+  await page.getByTestId(glossaryId).click();
+  await page.getByTestId('update-btn').click();
+}
+
+export async function navigateToOntologyExplorer(page: Page) {
+  await redirectToHomePage(page);
+  const glossaryResponse = page.waitForResponse('/api/v1/glossaries*');
+  await sidebarClick(page, SidebarItem.ONTOLOGY_EXPLORER);
+  await glossaryResponse;
+}
+
+export async function waitForGraphLoaded(page: Page) {
+  await expect(page.getByTestId('ontology-graph-loading')).not.toBeVisible({
+    timeout: 30000,
+  });
+}
+
+export async function readNodePositions(
+  page: Page
+): Promise<Record<string, { x: number; y: number }>> {
+  await page.waitForFunction(
+    () => {
+      const el = document.querySelector<HTMLElement>('.ontology-g6-container');
+      const pos = el?.dataset.nodePositions;
+      if (!pos) {
+        return false;
+      }
+      try {
+        return Object.keys(JSON.parse(pos)).length > 0;
+      } catch {
+        return false;
+      }
+    },
+    { timeout: 20000 }
+  );
+
+  return page
+    .locator('.ontology-g6-container')
+    .evaluate(
+      (el: HTMLElement) =>
+        JSON.parse(el.dataset.nodePositions ?? '{}') as Record<
+          string,
+          { x: number; y: number }
+        >
+    );
+}
+
+export async function clickFirstGraphNode(page: Page): Promise<void> {
+  const positions = await readNodePositions(page);
+  const firstPos = Object.values(positions)[0];
+  await page.mouse.click(firstPos.x, firstPos.y);
+}
+
+export async function createApiContext(browser: Browser) {
+  const page = await browser.newPage({
+    storageState: 'playwright/.auth/admin.json',
+  });
+  await redirectToHomePage(page);
+  const token = await getToken(page);
+  const apiContext = await getAuthContext(token);
+
+  return { page, apiContext };
+}
+
+export async function disposeApiContext(
+  page: Page,
+  apiContext: APIRequestContext
+) {
+  await apiContext.dispose();
+  await page.close();
+}
+
+export async function deleteEntities(
+  apiContext: APIRequestContext,
+  ...entities: Array<Glossary | GlossaryTerm>
+) {
+  for (const entity of entities) {
+    if (entity.responseData?.id) {
+      await entity.delete(apiContext);
+    }
+  }
+}
+
+export async function addTermRelation(
+  apiContext: APIRequestContext,
+  fromTerm: GlossaryTerm,
+  toTerm: GlossaryTerm,
+  relationType: string
+) {
+  await fromTerm.patch(apiContext, [
+    {
+      op: 'add',
+      path: '/relatedTerms/0',
+      value: {
+        relationType,
+        term: {
+          id: toTerm.responseData.id,
+          type: 'glossaryTerm',
+          name: toTerm.responseData.name,
+          displayName: toTerm.responseData.displayName,
+          fullyQualifiedName: toTerm.responseData.fullyQualifiedName,
+        },
+      },
+    },
+  ]);
+}
+
+export async function navigateAndFilterByGlossary(
+  page: Page,
+  glossaryId: string
+) {
+  await navigateToOntologyExplorer(page);
+  await waitForGraphLoaded(page);
+  await applyGlossaryFilter(page, glossaryId);
+  await waitForGraphLoaded(page);
+}
+
+export async function applyRelationTypeFilter(page: Page, typeName: string) {
+  await page.getByTestId('search-dropdown-Relationship Type').click();
+  await page.getByTestId('drop-down-menu').getByText(typeName).click();
+  await page.getByTestId('update-btn').click();
+  await waitForGraphLoaded(page);
+}

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

@@ -56,8 +56,8 @@ const ONTOLOGY_TOOLBAR_CARD_CLASS =
 const ONTOLOGY_ENTITY_SUMMARY_SLIDEOUT_WIDTH = 576;
 
 interface GraphEmptyStateProps {
-  message: string;
-  testId: string;
+  readonly message: string;
+  readonly testId: string;
 }
 
 function GraphEmptyState({ message, testId }: GraphEmptyStateProps) {
@@ -104,7 +104,6 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
     filteredGraphData,
     hierarchyGraphData,
     hierarchyBakedPositions,
-    graphSearchHighlight,
     glossaryColorMap,
     isHierarchyView,
     exportableGlossaryId,
@@ -223,71 +222,59 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
     }
 
     return (
-      <>
-        {filters.searchQuery.trim() ? (
-          <div
-            aria-hidden
-            className="tw:pointer-events-none tw:absolute tw:inset-0 tw:z-1 tw:bg-gray-950/6"
-            data-testid="ontology-search-overlay"
-          />
-        ) : null}
-        <div className="tw:relative tw:z-1 tw:h-full tw:w-full tw:min-h-0">
-          <OntologyGraph
-            edges={graphDataToShow.edges}
-            expandedTermIds={
-              explorationMode === 'data' ? expandedTermIds : undefined
-            }
-            explorationMode={isHierarchyView ? 'hierarchy' : explorationMode}
-            focusNodeId={
-              explorationMode === 'data'
-                ? selectedNode?.id ?? entityId
-                : entityId
-            }
-            glossaries={glossaries}
-            glossaryColorMap={glossaryColorMap}
-            graphSearchHighlight={graphSearchHighlight}
-            hierarchyCombos={
-              isHierarchyView && hierarchyGraphData
-                ? hierarchyGraphData.combos.map((c) => ({
-                    glossaryId: c.glossaryId,
-                    id: c.id,
-                    label: c.label,
-                  }))
-                : undefined
-            }
-            nodePositions={hierarchyBakedPositions}
-            nodes={graphDataToShow.nodes}
-            ref={graphRef}
-            selectedNodeId={
-              explorationMode === 'data' && expandedTermIds.size > 1
-                ? null
-                : selectedNode?.id
-            }
-            settings={settings}
-            onNodeClick={handleGraphNodeClick}
-            onNodeDoubleClick={handleGraphNodeDoubleClick}
-            onPaneClick={handleGraphPaneClick}
-            onScrollNearEdge={handleScrollNearEdge}
-          />
-          {isLoadingMore && (
-            <>
-              <div className="tw:absolute tw:inset-0 tw:z-1 tw:cursor-wait" />
-              <div className="tw:pointer-events-none tw:absolute tw:bottom-20 tw:left-1/2 tw:z-2 tw:-translate-x-1/2">
-                <div className="tw:flex tw:items-center tw:gap-2 tw:rounded-full tw:border tw:border-utility-gray-blue-100 tw:bg-white tw:px-4 tw:py-2 tw:shadow-md">
-                  <div
-                    aria-label={t('label.loading')}
-                    className="tw:h-4 tw:w-4 tw:animate-spin tw:rounded-full tw:border-2 tw:border-border-secondary tw:border-t-(--color-bg-brand-solid)"
-                    role="status"
-                  />
-                  <Typography size="text-sm" weight="medium">
-                    {t('label.loading-more-terms')}
-                  </Typography>
-                </div>
+      <div className="tw:relative tw:z-1 tw:h-full tw:w-full tw:min-h-0">
+        <OntologyGraph
+          edges={graphDataToShow.edges}
+          expandedTermIds={
+            explorationMode === 'data' ? expandedTermIds : undefined
+          }
+          explorationMode={isHierarchyView ? 'hierarchy' : explorationMode}
+          focusNodeId={
+            explorationMode === 'data' ? selectedNode?.id ?? entityId : entityId
+          }
+          glossaries={glossaries}
+          glossaryColorMap={glossaryColorMap}
+          hierarchyCombos={
+            isHierarchyView && hierarchyGraphData
+              ? hierarchyGraphData.combos.map((c) => ({
+                  glossaryId: c.glossaryId,
+                  id: c.id,
+                  label: c.label,
+                }))
+              : undefined
+          }
+          nodePositions={hierarchyBakedPositions}
+          nodes={graphDataToShow.nodes}
+          ref={graphRef}
+          selectedNodeId={
+            explorationMode === 'data' && expandedTermIds.size > 1
+              ? null
+              : selectedNode?.id
+          }
+          settings={settings}
+          onNodeClick={handleGraphNodeClick}
+          onNodeDoubleClick={handleGraphNodeDoubleClick}
+          onPaneClick={handleGraphPaneClick}
+          onScrollNearEdge={handleScrollNearEdge}
+        />
+        {isLoadingMore && (
+          <>
+            <div className="tw:absolute tw:inset-0 tw:z-1 tw:cursor-wait" />
+            <div className="tw:pointer-events-none tw:absolute tw:bottom-20 tw:left-1/2 tw:z-2 tw:-translate-x-1/2">
+              <div className="tw:flex tw:items-center tw:gap-2 tw:rounded-full tw:border tw:border-utility-gray-blue-100 tw:bg-white tw:px-4 tw:py-2 tw:shadow-md">
+                <div
+                  aria-label={t('label.loading')}
+                  className="tw:h-4 tw:w-4 tw:animate-spin tw:rounded-full tw:border-2 tw:border-border-secondary tw:border-t-(--color-bg-brand-solid)"
+                  role="status"
+                />
+                <Typography size="text-sm" weight="medium">
+                  {t('label.loading-more-terms')}
+                </Typography>
               </div>
-            </>
-          )}
-        </div>
-      </>
+            </div>
+          </>
+        )}
+      </div>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useOntologyExplorer.ts

@@ -332,6 +332,7 @@ export function useOntologyExplorer({
     relationTypes,
     settings,
     scope,
+    entityId,
     glossaryId,
     termGlossaryId,
     dataSource,
@@ -1192,6 +1193,7 @@ export function useOntologyExplorer({
         const nextFilters: GraphFilters = {
           ...filters,
           viewMode: 'overview' satisfies GraphViewMode,
+          showCrossGlossaryOnly: false,
         };
         if (graphData) {
           dataModeInitialLoadUsesSpinnerRef.current = true;
@@ -1207,6 +1209,7 @@ export function useOntologyExplorer({
         setFilters({
           ...filters,
           viewMode: modelFiltersRef.current.viewMode,
+          showCrossGlossaryOnly: modelFiltersRef.current.showCrossGlossaryOnly,
         });
         setTermAssetCounts({});
       }