Live data display

Refactor CustomerGraphContext and Graph components to support hypernodes and layout modes. Introduced relation labels for filtering pivots, updated GraphSettingsPanel for relation management, and enhanced GraphImpl to handle hypernode visibility. Removed deprecated test graph data and improved type definitions for better clarity.

Author: william-schlegel

packages/app-builder/src/components/Graph/CustomerGraphContext.tsx

@@ -1,37 +1,23 @@
 import { createSimpleContext } from '@app-builder/utils/create-context';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { type GraphObjectRef } from './graph-keys';
-
-export const GRAPH_ATTRIBUTES = ['ip', 'iban', 'device', 'email'] as const;
-export type GraphAttribute = (typeof GRAPH_ATTRIBUTES)[number];
-
-export const GRAPH_ATTRIBUTE_LABELS: Record<GraphAttribute, string> = {
-  ip: 'IP',
-  iban: 'IBAN',
-  device: 'Device',
-  email: 'Email',
-};
-
-/** Pivot `rawType` → the attribute filter governing it. Unlisted pivot types are always shown. */
-export const PIVOT_TYPE_ATTRIBUTES: Record<string, GraphAttribute> = {
-  same_ip: 'ip',
-  same_iban: 'iban',
-  same_device: 'device',
-  same_email: 'email',
-};
+import { type GraphLayoutMode } from './graph-layout';
 
 /** Branch sizes a subtree must exceed to collapse into a cluster chip. `0` disables clustering. */
 export const CLUSTER_THRESHOLD_OPTIONS = [0, 2, 5, 7, 10, 15, 30, 50] as const;
 export type ClusterThreshold = (typeof CLUSTER_THRESHOLD_OPTIONS)[number];
 export const DEFAULT_CLUSTER_THRESHOLD: ClusterThreshold = 10;
 
+export const LAYOUT_MODE_OPTIONS = ['rad-dagre', 'balanced', 'radial'] as const satisfies readonly GraphLayoutMode[];
+
 /**
  * The node backing the settings panel's detail card. `persons` are the selection's
  * connected persons, or the folded members of a cluster.
  */
 export type SelectedGraphObject = GraphObjectRef & { persons: GraphObjectRef[] } & (
     | { nodeType: 'person' | 'pivot' }
     | { nodeType: 'cluster'; nodeCount: number; internalEdgeCount: number }
+    | { nodeType: 'hypernode'; hypernodeCount: number }
   );
 
 /**
@@ -54,10 +40,13 @@ export type CustomerGraphContextValue = {
   showCompanies: boolean;
   setShowCompanies: (value: boolean) => void;
 
-  // Attribute filters (pivots)
-  attributes: GraphAttribute[];
-  setAttributes: (value: GraphAttribute[]) => void;
-  toggleAttribute: (attribute: GraphAttribute) => void;
+  /** Configured relation labels available for filtering pivots. */
+  relationLabels: string[];
+  setRelationLabels: (labels: string[]) => void;
+  /** Selected relation labels (pivots matching these labels are shown). */
+  selectedRelationLabels: string[];
+  setSelectedRelationLabels: (labels: string[]) => void;
+  toggleRelationLabel: (label: string) => void;
 
   // Display options
   showRiskScore: boolean;
@@ -69,6 +58,9 @@ export type CustomerGraphContextValue = {
   showEdgeLabels: boolean;
   setShowEdgeLabels: (value: boolean) => void;
 
+  layoutMode: GraphLayoutMode;
+  setLayoutMode: (value: GraphLayoutMode) => void;
+
   // Clustering (branch size at which a subtree collapses; `0` disables)
   clusterThreshold: ClusterThreshold;
   setClusterThreshold: (value: ClusterThreshold) => void;
@@ -123,19 +115,35 @@ export function CustomerGraphProvider({
   initialSelectedObject = null,
   clusterThreshold: controlledClusterThreshold,
   onClusterThresholdChange,
+  layoutMode: controlledLayoutMode,
+  onLayoutModeChange,
 }: {
   children: ReactNode;
   initialSelectedObject?: SelectedGraphObject | null;
   /** When provided with `onClusterThresholdChange`, survives provider remounts (e.g. graph regenerate). */
   clusterThreshold?: ClusterThreshold;
   onClusterThresholdChange?: (value: ClusterThreshold) => void;
+  layoutMode?: GraphLayoutMode;
+  onLayoutModeChange?: (value: GraphLayoutMode) => void;
 }) {
   const [showPersons, setShowPersons] = useState(true);
   const [showCompanies, setShowCompanies] = useState(true);
-  const [attributes, setAttributes] = useState<GraphAttribute[]>([...GRAPH_ATTRIBUTES]);
+  const [relationLabels, setRelationLabels] = useState<string[]>([]);
+  const [selectedRelationLabels, setSelectedRelationLabels] = useState<string[]>([]);
   const [showRiskScore, setShowRiskScore] = useState(false);
   const [showTags, setShowTags] = useState(false);
   const [showEdgeLabels, setShowEdgeLabels] = useState(false);
+  const [uncontrolledLayoutMode, setUncontrolledLayoutMode] = useState<GraphLayoutMode>('rad-dagre');
+  const layoutMode = controlledLayoutMode ?? uncontrolledLayoutMode;
+  const setLayoutMode = useCallback(
+    (value: GraphLayoutMode) => {
+      onLayoutModeChange?.(value);
+      if (controlledLayoutMode === undefined) {
+        setUncontrolledLayoutMode(value);
+      }
+    },
+    [controlledLayoutMode, onLayoutModeChange],
+  );
   const [uncontrolledClusterThreshold, setUncontrolledClusterThreshold] =
     useState<ClusterThreshold>(DEFAULT_CLUSTER_THRESHOLD);
   const clusterThreshold = controlledClusterThreshold ?? uncontrolledClusterThreshold;
@@ -170,8 +178,22 @@ export function CustomerGraphProvider({
     setExpandedRootIds((prev) => toggleInSet(prev, rootId));
   }, []);
 
-  const toggleAttribute = useCallback((attribute: GraphAttribute) => {
-    setAttributes((prev) => (prev.includes(attribute) ? prev.filter((a) => a !== attribute) : [...prev, attribute]));
+  const toggleRelationLabel = useCallback((label: string) => {
+    setSelectedRelationLabels((prev) =>
+      prev.includes(label) ? prev.filter((item) => item !== label) : [...prev, label],
+    );
+  }, []);
+
+  const syncRelationLabels = useCallback((labels: string[]) => {
+    const uniqueLabels = [...new Set(labels)];
+    setRelationLabels(uniqueLabels);
+    setSelectedRelationLabels((prev) => {
+      // First load → select all; otherwise keep selection and auto-select newly added labels.
+      if (prev.length === 0) return uniqueLabels;
+      const kept = prev.filter((label) => uniqueLabels.includes(label));
+      const added = uniqueLabels.filter((label) => !prev.includes(label));
+      return [...kept, ...added];
+    });
   }, []);
 
   const clearCheckedNodes = useCallback(() => {
@@ -200,16 +222,20 @@ export function CustomerGraphProvider({
       setShowPersons,
       showCompanies,
       setShowCompanies,
-      attributes,
-      setAttributes,
-      toggleAttribute,
+      relationLabels,
+      setRelationLabels: syncRelationLabels,
+      selectedRelationLabels,
+      setSelectedRelationLabels,
+      toggleRelationLabel,
       showRiskScore,
       setShowRiskScore,
       showTags,
       setShowTags,
       nodeTagsVisible: showTags || selectionMode,
       showEdgeLabels,
       setShowEdgeLabels,
+      layoutMode,
+      setLayoutMode,
       clusterThreshold,
       setClusterThreshold,
       selectedObject,
@@ -234,11 +260,15 @@ export function CustomerGraphProvider({
     [
       showPersons,
       showCompanies,
-      attributes,
-      toggleAttribute,
+      relationLabels,
+      syncRelationLabels,
+      selectedRelationLabels,
+      toggleRelationLabel,
       showRiskScore,
       showTags,
       showEdgeLabels,
+      layoutMode,
+      setLayoutMode,
       clusterThreshold,
       setClusterThreshold,
       selectedObject,

packages/app-builder/src/components/Graph/GraphComponents.tsx

@@ -21,6 +21,7 @@ import { rootNodeId } from './graph-keys';
 import {
   type ClusterRfNode,
   type GraphRfEdge,
+  type HypernodeRfNode,
   type PersonRfData,
   type PersonRfNode,
   type PivotRfNode,
@@ -326,6 +327,25 @@ function PivotNode({ id, data }: NodeProps<PivotRfNode>) {
   );
 }
 
+function HypernodeNode({ id, data }: NodeProps<HypernodeRfNode>) {
+  const { selectionMode, hoveredNodeId } = useCustomerGraph();
+  const highlighted = useNodeHighlighted(id);
+  const isHovered = !selectionMode && hoveredNodeId === id;
+
+  return (
+    <div
+      className={cn(
+        'border-grey-border bg-grey-white text-grey-primary relative flex w-fit items-center rounded-full border px-sm py-xs text-xs shadow-sm cursor-pointer transition-opacity duration-200',
+        isHovered && 'ring-2 ring-grey-primary ring-offset-2',
+        !highlighted && 'opacity-60',
+      )}
+    >
+      <FourHandles />
+      <span className="font-medium tabular-nums">{data.count}</span>
+    </div>
+  );
+}
+
 const EDGE_APPEARANCE = {
   link: {
     dash: undefined,
@@ -432,6 +452,7 @@ function GraphEdge({
 export const graphNodeTypes = {
   person: PersonNode,
   pivot: PivotNode,
+  hypernode: HypernodeNode,
   cluster: ClusterNode,
 };
 

packages/app-builder/src/components/Graph/GraphImpl.tsx

@@ -1,5 +1,6 @@
 import { AutoLayoutControlButton, useLayoutInitializedNodes } from '@app-builder/components/ReactFlow';
 import { type DataModel } from '@app-builder/models/data-model';
+import { type GraphData } from '@app-builder/models/graph';
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -13,13 +14,7 @@ import {
 import { reachableNodeIds } from 'ego-graph';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from 'ui-icons';
-import { type GraphData } from '../../routes/_app/_builder/test-graph/-data';
-import {
-  type CustomerGraphContextValue,
-  type GraphAttribute,
-  PIVOT_TYPE_ATTRIBUTES,
-  useCustomerGraph,
-} from './CustomerGraphContext';
+import { type CustomerGraphContextValue, useCustomerGraph } from './CustomerGraphContext';
 import { createGraphTypeHelpers } from './data-model-map';
 import { graphEdgeTypes, graphNodeTypes } from './GraphComponents';
 import { type GraphObjectRef, nodeKey, parseNodeKey } from './graph-keys';
@@ -48,7 +43,7 @@ export type GraphImplProps = {
    * `0` (default) explores the full reachable graph; `N > 0` stops after N hops.
    */
   maxExplorationHops?: number;
-  /** Layout algorithm for A/B testing on the test-graph page. Defaults to rad1. */
+  /** Layout algorithm. Defaults to rad-dagre; can also be controlled via CustomerGraphContext. */
   layoutMode?: GraphLayoutMode;
 };
 
@@ -59,12 +54,13 @@ function resolveStartKey(nodes: GraphRfNode[], fallback: string): string {
 
 type VisibilityFilters = Pick<
   CustomerGraphContextValue,
-  'showPersons' | 'showCompanies' | 'attributes' | 'hiddenNodeIds'
+  'showPersons' | 'showCompanies' | 'relationLabels' | 'selectedRelationLabels' | 'hiddenNodeIds'
 >;
 
-function attributeAllowsPivot(rawType: string, attributes: GraphAttribute[]): boolean {
-  const attribute = PIVOT_TYPE_ATTRIBUTES[rawType];
-  return attribute == null || attributes.includes(attribute);
+function relationAllowsPivot(rawType: string, relationLabels: string[], selectedRelationLabels: string[]): boolean {
+  // Pivots that don't match any configured relation label stay visible.
+  if (!relationLabels.includes(rawType)) return true;
+  return selectedRelationLabels.includes(rawType);
 }
 
 function isNodeVisible(node: GraphRfNode, filters: VisibilityFilters): boolean {
@@ -79,9 +75,10 @@ function isNodeVisible(node: GraphRfNode, filters: VisibilityFilters): boolean {
 
   if (node.type === 'pivot') {
     if (filters.hiddenNodeIds.has(node.id)) return false;
-    return attributeAllowsPivot(node.data.rawType, filters.attributes);
+    return relationAllowsPivot(node.data.rawType, filters.relationLabels, filters.selectedRelationLabels);
   }
 
+  // Hypernodes and clusters are not relation-filtered.
   return !filters.hiddenNodeIds.has(node.id);
 }
 
@@ -114,11 +111,12 @@ function sameRefs(a: GraphObjectRef[], b: GraphObjectRef[]): boolean {
   );
 }
 
-export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode = 'rad-dagre' }: GraphImplProps) {
+export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode: layoutModeProp }: GraphImplProps) {
   const {
     showPersons,
     showCompanies,
-    attributes,
+    relationLabels,
+    selectedRelationLabels,
     showEdgeLabels,
     setShowEdgeLabels,
     selectedObject,
@@ -130,7 +128,9 @@ export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode
     checkedNodeIds,
     setGraphStats,
     clusterThreshold,
+    layoutMode: layoutModeFromContext,
   } = useCustomerGraph();
+  const layoutMode = layoutModeProp ?? layoutModeFromContext;
 
   const typeHelpers = useMemo(() => createGraphTypeHelpers(dataModel), [dataModel]);
 
@@ -140,8 +140,8 @@ export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode
   );
 
   const typeFilters = useMemo(
-    () => ({ showPersons, showCompanies, attributes }),
-    [showPersons, showCompanies, attributes],
+    () => ({ showPersons, showCompanies, relationLabels, selectedRelationLabels }),
+    [showPersons, showCompanies, relationLabels, selectedRelationLabels],
   );
 
   const visibleGraph = useMemo(
@@ -229,7 +229,7 @@ export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode
   // Keep person/pivot neighbor lists in sync when the graph remounts or filters change
   // (e.g. initial selection before the first click).
   useEffect(() => {
-    if (!selectedObject || selectedObject.nodeType === 'cluster') return;
+    if (!selectedObject || selectedObject.nodeType === 'cluster' || selectedObject.nodeType === 'hypernode') return;
 
     const nodeId = nodeKey(selectedObject.objectType, selectedObject.objectId);
     if (!nodes.some((n) => n.id === nodeId)) return;
@@ -265,6 +265,17 @@ export function GraphImpl({ data, dataModel, maxExplorationHops = 0, layoutMode
         return;
       }
 
+      if (node.type === 'hypernode') {
+        setSelectedObject({
+          nodeType: 'hypernode',
+          objectType: node.data.objectType,
+          objectId: node.data.objectId,
+          hypernodeCount: node.data.count,
+          persons: [],
+        });
+        return;
+      }
+
       setSelectedObject({
         nodeType: 'pivot',
         objectType: node.data.rawType,