Fix: relation filter only show nessary node connection (#27659)

* Fix: relation filter only show nessary node connection

* fix lint issue

* nit

Author: anuj-kumary

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

@@ -124,10 +124,6 @@ export interface OntologyGraphProps {
     }
   ) => void;
   onNodeDoubleClick: (node: OntologyNode) => void;
-  onNodeContextMenu: (
-    node: OntologyNode,
-    position: { x: number; y: number }
-  ) => void;
   onPaneClick: () => void;
   onScrollNearEdge?: () => void;
 }
@@ -147,15 +143,6 @@ export interface GraphSettingsPanelProps {
   onSettingsChange: (settings: GraphSettings) => void;
 }
 
-export interface NodeContextMenuProps {
-  node: OntologyNode;
-  position: { x: number; y: number };
-  onClose: () => void;
-  onFocus: (node: OntologyNode) => void;
-  onViewDetails: (node: OntologyNode) => void;
-  onOpenInNewTab: (node: OntologyNode) => void;
-}
-
 export interface OntologyControlButtonsProps {
   onZoomIn: () => void;
   onZoomOut: () => void;

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

@@ -33,7 +33,6 @@ import {
   DEFAULT_FILTERS,
   useOntologyExplorer,
 } from './hooks/useOntologyExplorer';
-import NodeContextMenu from './NodeContextMenu';
 import OntologyControlButtons from './OntologyControlButtons';
 import { withoutOntologyAutocompleteAll } from './OntologyExplorer.constants';
 import {
@@ -99,7 +98,6 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
     filters,
     explorationMode,
     selectedNode,
-    contextMenu,
     expandedTermIds,
     rdfEnabled,
     graphDataToShow,
@@ -125,13 +123,8 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
     handleScrollNearEdge,
     handleSettingsChange,
     handleFiltersChange,
-    handleContextMenuClose,
-    handleContextMenuFocus,
-    handleContextMenuViewDetails,
-    handleContextMenuOpenInNewTab,
     handleGraphNodeClick,
     handleGraphNodeDoubleClick,
-    handleGraphNodeContextMenu,
     handleGraphPaneClick,
   } = useOntologyExplorer({
     scope,
@@ -271,7 +264,6 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
             }
             settings={settings}
             onNodeClick={handleGraphNodeClick}
-            onNodeContextMenu={handleGraphNodeContextMenu}
             onNodeDoubleClick={handleGraphNodeDoubleClick}
             onPaneClick={handleGraphPaneClick}
             onScrollNearEdge={handleScrollNearEdge}
@@ -454,17 +446,6 @@ const OntologyExplorer: React.FC<OntologyExplorerProps> = ({
               )}
             </SlideoutMenu>
           )}
-
-          {contextMenu && (
-            <NodeContextMenu
-              node={contextMenu.node}
-              position={contextMenu.position}
-              onClose={handleContextMenuClose}
-              onFocus={handleContextMenuFocus}
-              onOpenInNewTab={handleContextMenuOpenInNewTab}
-              onViewDetails={handleContextMenuViewDetails}
-            />
-          )}
         </div>
       </div>
     </div>

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

@@ -13,6 +13,7 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -38,6 +39,20 @@ function writeNodePositions(
   }
 }
 
+function writeSearchHighlightIds(
+  container: HTMLDivElement | null,
+  ids: readonly string[] | null
+) {
+  if (!container) {
+    return;
+  }
+  if (ids) {
+    container.dataset.searchHighlightIds = JSON.stringify(ids);
+  } else {
+    delete container.dataset.searchHighlightIds;
+  }
+}
+
 const OntologyGraph = forwardRef<OntologyGraphHandle, OntologyGraphProps>(
   (
     {
@@ -54,7 +69,6 @@ const OntologyGraph = forwardRef<OntologyGraphHandle, OntologyGraphProps>(
       focusNodeId,
       onNodeClick,
       onNodeDoubleClick,
-      onNodeContextMenu,
       onPaneClick,
       onScrollNearEdge,
       nodePositions,
@@ -111,7 +125,6 @@ const OntologyGraph = forwardRef<OntologyGraphHandle, OntologyGraphProps>(
       dataSignature,
       onNodeClick,
       onNodeDoubleClick,
-      onNodeContextMenu,
       onPaneClick,
       onScrollNearEdge,
       setClickedEdgeId,
@@ -195,6 +208,15 @@ const OntologyGraph = forwardRef<OntologyGraphHandle, OntologyGraphProps>(
       [explorationMode, extractNodePositions, graphRef, suppressEdgeCheck]
     );
 
+    useEffect(() => {
+      writeSearchHighlightIds(
+        containerRef.current,
+        graphSearchHighlight?.active
+          ? graphSearchHighlight.highlightedNodeIds
+          : null
+      );
+    }, [graphSearchHighlight]);
+
     return (
       <div
         className="tw:w-full tw:h-full tw:relative ontology-g6-container"

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

@@ -268,10 +268,6 @@ export function useOntologyExplorer({
   const [filters, setFilters] = useState<GraphFilters>(DEFAULT_FILTERS);
   const [explorationMode, setExplorationMode] =
     useState<ExplorationMode>('model');
-  const [contextMenu, setContextMenu] = useState<{
-    node: OntologyNode;
-    position: { x: number; y: number };
-  } | null>(null);
   const [termAssetCounts, setTermAssetCounts] = useState<
     Record<string, number>
   >({});
@@ -1216,19 +1212,6 @@ export function useOntologyExplorer({
     [filters, graphData]
   );
 
-  const handleContextMenuClose = useCallback(() => {
-    setContextMenu(null);
-  }, []);
-
-  const handleContextMenuFocus = useCallback((node: OntologyNode) => {
-    setSelectedNode(node);
-    graphRef.current?.focusNode(node.id);
-  }, []);
-
-  const handleContextMenuViewDetails = useCallback((node: OntologyNode) => {
-    setSelectedNode(node);
-  }, []);
-
   const getNodePath = useCallback((node: OntologyNode) => {
     if (node.entityRef?.type && node.entityRef?.fullyQualifiedName) {
       const entityType = Object.values(EntityType).find(
@@ -1251,17 +1234,6 @@ export function useOntologyExplorer({
     return '';
   }, []);
 
-  const handleContextMenuOpenInNewTab = useCallback(
-    (node: OntologyNode) => {
-      const path = getNodePath(node);
-      if (!path) {
-        return;
-      }
-      window.open(path, '_blank');
-    },
-    [getNodePath]
-  );
-
   const handleRefresh = useCallback(() => {
     if (explorationMode === 'data') {
       if (scope === 'global') {
@@ -1375,7 +1347,6 @@ export function useOntologyExplorer({
         dataModeLoadMoreBadgeClick?: boolean;
       }
     ) => {
-      setContextMenu(null);
       if (explorationMode === 'data' && isTermNode(node)) {
         if (meta?.dataModeLoadMoreBadgeClick) {
           const loaded = node.loadedAssetCount ?? 0;
@@ -1429,15 +1400,7 @@ export function useOntologyExplorer({
     [getNodePath]
   );
 
-  const handleGraphNodeContextMenu = useCallback(
-    (node: OntologyNode, position: { x: number; y: number }) => {
-      setContextMenu({ node, position });
-    },
-    []
-  );
-
   const handleGraphPaneClick = useCallback(() => {
-    setContextMenu(null);
     setSelectedNode(null);
   }, []);
 
@@ -1451,7 +1414,6 @@ export function useOntologyExplorer({
     filters,
     explorationMode,
     selectedNode,
-    contextMenu,
     expandedTermIds,
     rdfEnabled,
     graphDataToShow,
@@ -1477,13 +1439,8 @@ export function useOntologyExplorer({
     handleScrollNearEdge,
     handleSettingsChange,
     handleFiltersChange,
-    handleContextMenuClose,
-    handleContextMenuFocus,
-    handleContextMenuViewDetails,
-    handleContextMenuOpenInNewTab,
     handleGraphNodeClick,
     handleGraphNodeDoubleClick,
-    handleGraphNodeContextMenu,
     handleGraphPaneClick,
   };
 }