Add graph layout option with propr support (#27392)

* Refactor permission issue for ontology data mode

* nit

* fix specs

* nit

* fix lint issue

* nit

* Removed untitled autocomplete with antd

* nit

* fix lint issue

* Added missing test converage

* nit

* Revert font-size support from Select and SelectItem context

Removes fontSize from SelectContext so it can be shipped as a standalone
feature in a separate PR, keeping this branch focused on permission fixes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add graph layout option with propr support

* Addressed comments

* fix lint issue

* fix lint issue

* fix spacing in layout

* fix test issue

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: anuj-kumary

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/OntologyExplorer.spec.ts

@@ -377,29 +377,25 @@ test.describe('Ontology Explorer', () => {
       await expect(toggle).toHaveAttribute('data-selected', 'true');
     });
 
-    test('should change layout to Radial and back to Hierarchical', async ({
+    test('should change layout to Circular and back to Hierarchical', async ({
       page,
     }) => {
       await waitForGraphLoaded(page);
       await page.getByTestId('ontology-graph-settings').click();
       await expect(page.getByTestId('graph-settings-close')).toBeVisible();
 
-      await page.getByTestId('graph-settings-layout-button').click();
+      const layoutSelect = page.getByTestId('graph-settings-layout-select');
+      await layoutSelect.click();
       await expect(
-        page.getByRole('menuitemradio', { name: 'Radial' })
+        page.getByRole('option', { name: 'Circular' })
       ).toBeVisible();
-      await page.getByRole('menuitemradio', { name: 'Radial' }).click();
-
-      await expect(
-        page.getByTestId('graph-settings-layout-button')
-      ).toContainText('Radial');
+      await page.getByRole('option', { name: 'Circular' }).click();
+      await expect(layoutSelect).toContainText('Circular');
       await waitForGraphLoaded(page);
 
-      await page.getByTestId('graph-settings-layout-button').click();
-      await page.getByRole('menuitemradio', { name: 'Hierarchical' }).click();
-      await expect(
-        page.getByTestId('graph-settings-layout-button')
-      ).toContainText('Hierarchical');
+      await layoutSelect.click();
+      await page.getByRole('option', { name: 'Hierarchical' }).click();
+      await expect(layoutSelect).toContainText('Hierarchical');
     });
   });
 
@@ -800,6 +796,8 @@ test.describe('Ontology Explorer', () => {
     test('should show hierarchy empty state when no hierarchical relations', async ({
       page,
     }) => {
+      await waitForGraphLoaded(page);
+      await applyGlossaryFilter(page, glossary.responseData.id);
       await waitForGraphLoaded(page);
       await page.getByTestId('view-mode-select').click();
       await page.getByRole('option', { name: 'Hierarchy' }).click();

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

@@ -93,7 +93,7 @@ const ExportGraphPanel: React.FC<ExportGraphPanelProps> = ({
         size="sm">
         {t('label.export-graph')}
       </Button>
-      <Dropdown.Popover aria-label={t('label.export-graph')}>
+      <Dropdown.Popover aria-label={t('label.export-graph')} placement="top">
         <Dropdown.Menu items={menuItems} onAction={handleAction}>
           {(item) => <Dropdown.Item id={item.id} label={item.label} />}
         </Dropdown.Menu>

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

@@ -146,7 +146,7 @@ const FilterToolbar: React.FC<FilterToolbarProps> = ({
   );
 
   return (
-    <div className="tw:flex tw:w-full tw:items-center tw:gap-5">
+    <div className="tw:flex tw:w-full tw:items-center tw:gap-5 tw:pl-2">
       {/* View Mode dropdown — disabled in data mode */}
       <div
         className={

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

@@ -15,10 +15,11 @@ import {
   Button,
   ButtonUtility,
   Dropdown,
+  Select,
   Toggle,
   Typography,
 } from '@openmetadata/ui-core-components';
-import { ChevronDown, Settings01, X } from '@untitledui/icons';
+import { Settings01, X } from '@untitledui/icons';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LayoutType } from './OntologyExplorer.constants';
@@ -51,7 +52,6 @@ const GraphSettingsPanel: React.FC<GraphSettingsPanelProps> = ({
   const layoutItems = useMemo(
     () => [
       { id: LayoutType.Hierarchical, label: t('label.hierarchical') },
-      { id: LayoutType.Radial, label: t('label.radial') },
       { id: LayoutType.Circular, label: t('label.circular') },
     ],
     [t]
@@ -81,32 +81,23 @@ const GraphSettingsPanel: React.FC<GraphSettingsPanelProps> = ({
             className="tw:text-xs tw:font-semibold tw:text-gray-500">
             {t('label.layout')}
           </Typography>
-          <Dropdown.Root>
-            <Button
-              className="tw:w-full tw:justify-between"
-              color="secondary"
-              data-testid="graph-settings-layout-button"
-              iconTrailing={ChevronDown}
-              size="sm">
-              {layoutItems.find((i) => i.id === settings.layout)?.label ??
-                t('label.layout')}
-            </Button>
-            <Dropdown.Popover className="tw:w-72 tw:min-w-0">
-              <Dropdown.Menu
-                className="tw:w-full"
-                items={layoutItems}
-                onAction={(key) => {
-                  const layout = layoutItems.find((i) => i.id === key)?.id;
-                  if (layout) {
-                    handleLayoutChange(layout);
-                  }
-                }}>
-                {(item) => (
-                  <Dropdown.Item id={item.id} label={item.label ?? ''} />
-                )}
-              </Dropdown.Menu>
-            </Dropdown.Popover>
-          </Dropdown.Root>
+          <Select
+            className="tw:w-full"
+            data-testid="graph-settings-layout-select"
+            fontSize="sm"
+            items={layoutItems}
+            size="sm"
+            value={settings.layout}
+            onChange={(key) => {
+              const layout = layoutItems.find((i) => i.id === key)?.id;
+              if (layout) {
+                handleLayoutChange(layout);
+              }
+            }}>
+            {(item) => (
+              <Select.Item id={item.id} key={item.id} label={item.label} />
+            )}
+          </Select>
         </div>
         <div className="tw:flex tw:flex-col tw:gap-3 tw:py-4">
           <Toggle
@@ -129,7 +120,7 @@ const GraphSettingsPanel: React.FC<GraphSettingsPanelProps> = ({
         iconLeading={<Settings01 height={20} width={20} />}
         size="sm"
       />
-      <Dropdown.Popover aria-label={t('label.graph-settings')}>
+      <Dropdown.Popover aria-label={t('label.graph-settings')} placement="top">
         {popoverContent}
       </Dropdown.Popover>
     </Dropdown.Root>

openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyExplorer.constants.ts

@@ -438,13 +438,11 @@ export const MODEL_ANTV_DAGRE_RANKSEP_WITH_COMBOS = 100;
 
 export enum LayoutType {
   Hierarchical = 'hierarchical',
-  Radial = 'radial',
   Circular = 'circular',
 }
 
 export enum LayoutEngine {
   Dagre = 'dagre',
-  Radial = 'radial',
   Circular = 'circular',
 }
 

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

@@ -144,6 +144,7 @@ export interface FilterToolbarProps {
 export interface GraphSettingsPanelProps {
   settings: GraphSettings;
   onSettingsChange: (settings: GraphSettings) => void;
+  isDataMode?: boolean;
 }
 
 export interface NodeContextMenuProps {
@@ -172,7 +173,7 @@ export interface MergedEdge {
 }
 
 export interface LayoutConfig {
-  type: 'antv-dagre' | 'dagre' | 'radial' | 'circular';
+  type: 'antv-dagre' | 'dagre' | 'radial' | 'circular' | 'preset';
   [key: string]: unknown;
 }
 

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

@@ -531,7 +531,7 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
       return undefined;
     }
     const engine = toLayoutEngineType(settings.layout);
-    if (engine !== LayoutEngine.Circular && engine !== LayoutEngine.Radial) {
+    if (engine !== LayoutEngine.Circular) {
       return undefined;
     }
 
@@ -1937,6 +1937,7 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
 
     if (
       explorationMode === 'data' ||
+      filters.viewMode !== 'overview' ||
       activeGlossaryFilter ||
       !hasMoreTerms ||
       isLoadingMoreRef.current ||
@@ -1986,6 +1987,7 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
   }, [
     explorationMode,
     filters.glossaryIds,
+    filters.viewMode,
     hasMoreTerms,
     scope,
     loadNextTermPage,
@@ -2349,6 +2351,7 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
               }
             />
             <GraphSettingsPanel
+              isDataMode={explorationMode === 'data'}
               settings={settings}
               onSettingsChange={handleSettingsChange}
             />

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

@@ -22,7 +22,6 @@ import {
   DIMMED_EDGE_OPACITY,
   EDGE_LINE_APPEND_WIDTH,
   EDGE_STROKE_COLOR,
-  LayoutEngine,
   NODE_BORDER_COLOR,
   RELATION_COLORS,
 } from '../OntologyExplorer.constants';
@@ -359,7 +358,7 @@ export function useGraphDataBuilder({
             nodesForGraph.filter(
               (n) => n.type !== 'dataAsset' && n.type !== 'metric'
             ),
-            LayoutEngine.Dagre,
+            layoutType,
             termHSpacing,
             termVSpacing
           )