Integrate entity relationships in flyout popover

Author: albertoblaz

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/filters/filter_store.ts

@@ -25,11 +25,26 @@ export interface FilterToggleEvent {
   action: 'show' | 'hide';
 }
 
+/**
+ * Event emitted when an entity relationship toggle action is requested.
+ * Components emit these events to expand/collapse entity relationships in the graph.
+ * FilterStore instances subscribe and handle events for their scopeId.
+ */
+export interface EntityRelationshipEvent {
+  scopeId: string;
+  entityId: string;
+  action: 'show' | 'hide';
+}
+
 // Global event bus for filter toggle actions
 const filterToggleEvents$ = new Subject<FilterToggleEvent>();
 
+// Global event bus for entity relationship toggle actions
+const entityRelationshipEvents$ = new Subject<EntityRelationshipEvent>();
+
 // Store emitted events for testing purposes
 const emittedFilterEvents: FilterToggleEvent[] = [];
+const emittedEntityRelationshipEvents: EntityRelationshipEvent[] = [];
 
 /**
  * Emit a filter toggle event. Any FilterStore listening for this scopeId
@@ -61,6 +76,40 @@ export const emitFilterToggle = (
   filterToggleEvents$.next(event);
 };
 
+/**
+ * Emit an entity relationship toggle event. Any FilterStore listening for this scopeId
+ * will receive the event and update its expanded entity IDs state.
+ *
+ * @param scopeId - Unique identifier for the graph instance
+ * @param entityId - The entity ID to expand/collapse
+ * @param action - 'show' to expand, 'hide' to collapse
+ */
+export const emitEntityRelationshipToggle = (
+  scopeId: string,
+  entityId: string,
+  action: 'show' | 'hide'
+): void => {
+  const event: EntityRelationshipEvent = { scopeId, entityId, action };
+  emittedEntityRelationshipEvents.push(event);
+  entityRelationshipEvents$.next(event);
+};
+
+/**
+ * Check if an entity's relationships are expanded for the given scope.
+ * Returns false gracefully if no store exists.
+ *
+ * @param scopeId - Unique identifier for the graph instance
+ * @param entityId - The entity ID to check
+ * @returns true if the entity's relationships are expanded
+ */
+export const isEntityRelationshipExpandedForScope = (
+  scopeId: string,
+  entityId: string
+): boolean => {
+  const store = stores.get(scopeId);
+  return store?.isEntityRelationshipExpanded(entityId) ?? false;
+};
+
 /**
  * Check if a filter is active for the given scope, field, and value.
  * Returns false gracefully if no store exists (no warning logged).
@@ -95,6 +144,20 @@ export const __clearEmittedFilterEvents = (): void => {
   emittedFilterEvents.length = 0;
 };
 
+/**
+ * Get all emitted entity relationship events. Primarily for testing.
+ */
+export const __getEmittedEntityRelationshipEvents = (): EntityRelationshipEvent[] => {
+  return [...emittedEntityRelationshipEvents];
+};
+
+/**
+ * Clear all emitted entity relationship events. Primarily for testing.
+ */
+export const __clearEmittedEntityRelationshipEvents = (): void => {
+  emittedEntityRelationshipEvents.length = 0;
+};
+
 // =============================================================================
 // FilterStore Class
 // =============================================================================
@@ -114,17 +177,26 @@ export class FilterStore {
   readonly scopeId: string;
   private dataViewId?: string;
   private readonly filters$ = new BehaviorSubject<Filter[]>([]);
-  private readonly eventSubscription: Subscription;
+  private readonly expandedEntityIds$ = new BehaviorSubject<Set<string>>(new Set());
+  private readonly filterEventSubscription: Subscription;
+  private readonly entityRelationshipEventSubscription: Subscription;
 
   constructor(scopeId: string) {
     this.scopeId = scopeId;
 
     // Subscribe to filter toggle events for this scopeId
-    this.eventSubscription = filterToggleEvents$
+    this.filterEventSubscription = filterToggleEvents$
       .pipe(rxFilter((event) => event.scopeId === this.scopeId))
       .subscribe((event) => {
         this.toggleFilter(event.field, event.value, event.action);
       });
+
+    // Subscribe to entity relationship toggle events for this scopeId
+    this.entityRelationshipEventSubscription = entityRelationshipEvents$
+      .pipe(rxFilter((event) => event.scopeId === this.scopeId))
+      .subscribe((event) => {
+        this.toggleEntityRelationship(event.entityId, event.action);
+      });
   }
 
   /**
@@ -183,20 +255,65 @@ export class FilterStore {
     return containsFilter(this.filters$.value, field, value);
   }
 
+  // ===========================================================================
+  // Entity Relationship State
+  // ===========================================================================
+
+  /**
+   * Toggle an entity's relationship expansion state.
+   * @param entityId - The entity ID to expand/collapse
+   * @param action - 'show' to expand, 'hide' to collapse
+   */
+  toggleEntityRelationship(entityId: string, action: 'show' | 'hide'): void {
+    const next = new Set(this.expandedEntityIds$.value);
+    if (action === 'show') {
+      next.add(entityId);
+    } else {
+      next.delete(entityId);
+    }
+    this.expandedEntityIds$.next(next);
+  }
+
+  /**
+   * Check if an entity's relationships are currently expanded.
+   */
+  isEntityRelationshipExpanded(entityId: string): boolean {
+    return this.expandedEntityIds$.value.has(entityId);
+  }
+
+  /**
+   * Get the current set of expanded entity IDs.
+   */
+  getExpandedEntityIds(): Set<string> {
+    return this.expandedEntityIds$.value;
+  }
+
+  /**
+   * Subscribe to expanded entity IDs changes.
+   * @param callback - Function called when expanded entity IDs change
+   * @returns Subscription that should be unsubscribed on cleanup
+   */
+  subscribeToExpandedEntityIds(callback: (expandedEntityIds: Set<string>) => void): Subscription {
+    return this.expandedEntityIds$.subscribe(callback);
+  }
+
   /**
    * Reset the filter store to empty state.
    */
   reset(): void {
     this.filters$.next([]);
+    this.expandedEntityIds$.next(new Set());
   }
 
   /**
-   * Clean up the store by completing the BehaviorSubject and unsubscribing from events.
+   * Clean up the store by completing the BehaviorSubjects and unsubscribing from events.
    * Called when the graph instance unmounts.
    */
   destroy(): void {
-    this.eventSubscription.unsubscribe();
+    this.filterEventSubscription.unsubscribe();
+    this.entityRelationshipEventSubscription.unsubscribe();
     this.filters$.complete();
+    this.expandedEntityIds$.complete();
   }
 }
 

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/filters/use_graph_filters.ts

@@ -7,26 +7,40 @@
 
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';
 import type { Filter } from '@kbn/es-query';
-import { getOrCreateFilterStore, destroyFilterStore } from './filter_store';
+import {
+  getOrCreateFilterStore,
+  destroyFilterStore,
+  emitEntityRelationshipToggle,
+} from './filter_store';
+import type { NodeProps } from '../types';
 
 /**
  * Hook that manages graph filter state for a specific scope.
  *
  * This hook:
  * 1. Creates or retrieves a FilterStore for the given scopeId
  * 2. Subscribes to filter changes from the store using useSyncExternalStore
- * 3. Automatically re-renders when filters change (from action buttons or SearchBar)
- * 4. Provides setSearchFilters for SearchBar's onFiltersUpdated callback
- * 5. Cleans up and destroys the store on unmount
+ * 3. Subscribes to expanded entity IDs from the store using useSyncExternalStore
+ * 4. Automatically re-renders when filters or entity relationships change
+ * 5. Provides setSearchFilters for SearchBar's onFiltersUpdated callback
+ * 6. Provides onToggleEntityRelationships for entity relationship toggle
+ * 7. Computes entityIdsForApi from expandedEntityIds for graph data fetching
+ * 8. Cleans up and destroys the store on unmount
  *
  * @param scopeId - Unique identifier for the graph instance
  * @param dataViewId - The data view ID used when constructing new filters
- * @returns Object containing searchFilters and setSearchFilters
+ * @returns Object containing searchFilters, setSearchFilters, expandedEntityIds, onToggleEntityRelationships, entityIdsForApi
  */
 export const useGraphFilters = (
   scopeId: string,
   dataViewId: string
-): { searchFilters: Filter[]; setSearchFilters: (filters: Filter[]) => void } => {
+): {
+  searchFilters: Filter[];
+  setSearchFilters: (filters: Filter[]) => void;
+  expandedEntityIds: Set<string>;
+  onToggleEntityRelationships: (node: NodeProps, action: 'show' | 'hide') => void;
+  entityIdsForApi: Array<{ id: string; isOrigin: boolean }> | undefined;
+} => {
   // Get or create the FilterStore for this scopeId
   const store = useMemo(() => getOrCreateFilterStore(scopeId), [scopeId]);
 
@@ -42,7 +56,7 @@ export const useGraphFilters = (
     };
   }, [scopeId]);
 
-  // Subscribe function for useSyncExternalStore
+  // Subscribe function for useSyncExternalStore (filters)
   const subscribe = useCallback(
     (onStoreChange: () => void) => {
       const subscription = store.subscribe(onStoreChange);
@@ -51,12 +65,30 @@ export const useGraphFilters = (
     [store]
   );
 
-  // Snapshot function for useSyncExternalStore
+  // Snapshot function for useSyncExternalStore (filters)
   const getSnapshot = useCallback(() => store.getFilters(), [store]);
 
   // Use React 18's useSyncExternalStore for optimal concurrent rendering support
   const searchFilters = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
+  // Subscribe function for useSyncExternalStore (expanded entity IDs)
+  const subscribeToExpandedEntityIds = useCallback(
+    (onStoreChange: () => void) => {
+      const subscription = store.subscribeToExpandedEntityIds(onStoreChange);
+      return () => subscription.unsubscribe();
+    },
+    [store]
+  );
+
+  // Snapshot function for useSyncExternalStore (expanded entity IDs)
+  const getExpandedEntityIdsSnapshot = useCallback(() => store.getExpandedEntityIds(), [store]);
+
+  const expandedEntityIds = useSyncExternalStore(
+    subscribeToExpandedEntityIds,
+    getExpandedEntityIdsSnapshot,
+    getExpandedEntityIdsSnapshot
+  );
+
   // Callback for SearchBar's onFiltersUpdated - sets filters directly in store
   const setSearchFilters = useCallback(
     (filters: Filter[]) => {
@@ -65,5 +97,29 @@ export const useGraphFilters = (
     [store]
   );
 
-  return { searchFilters, setSearchFilters };
+  // Toggle handler for entity relationships - emits event to event bus
+  const onToggleEntityRelationships = useCallback(
+    (node: NodeProps, action: 'show' | 'hide') => {
+      emitEntityRelationshipToggle(scopeId, node.id, action);
+    },
+    [scopeId]
+  );
+
+  // Convert expandedEntityIds Set to API format
+  const entityIdsForApi = useMemo(() => {
+    if (expandedEntityIds.size === 0) return undefined;
+
+    return Array.from(expandedEntityIds).map((id) => ({
+      id,
+      isOrigin: false, // User-expanded entities are not the graph origin
+    }));
+  }, [expandedEntityIds]);
+
+  return {
+    searchFilters,
+    setSearchFilters,
+    expandedEntityIds,
+    onToggleEntityRelationships,
+    entityIdsForApi,
+  };
 };

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_grouped_node_preview_panel/components/grouped_item/parts/entity_actions_button.tsx

@@ -16,7 +16,12 @@ import {
 } from '../../../test_ids';
 import type { EntityItem } from '../types';
 import { getEntityExpandItems } from '../../../../popovers/node_expand/get_entity_expand_items';
-import { emitFilterToggle, isFilterActiveForScope } from '../../../../filters/filter_store';
+import {
+  emitFilterToggle,
+  isFilterActiveForScope,
+  emitEntityRelationshipToggle,
+  isEntityRelationshipExpandedForScope,
+} from '../../../../filters/filter_store';
 import { GenericEntityPanelKey, GENERIC_ENTITY_PREVIEW_BANNER } from '../../../constants';
 
 const actionsButtonAriaLabel = i18n.translate(
@@ -69,11 +74,15 @@ export const EntityActionsButton = ({ item, scopeId }: EntityActionsButtonProps)
     isFilterActive: (field, value) => isFilterActiveForScope(scopeId, field, value),
     toggleFilter: (field, value, action) => emitFilterToggle(scopeId, field, value, action),
     shouldRender: {
+      showEntityRelationships: true,
       showActionsByEntity: true,
       showActionsOnEntity: true,
       showRelatedEvents: true,
       showEntityDetails: !!item.availableInEntityStore,
     },
+    isEntityRelationshipsExpanded: isEntityRelationshipExpandedForScope(scopeId, item.id),
+    toggleEntityRelationships: (action) => emitEntityRelationshipToggle(scopeId, item.id, action),
+    showEntityRelationshipsDisabled: !item.availableInEntityStore,
   });
 
   return (