@codeyam/codeyam-cli 0.1.0-staging.596f0eb → 0.1.0-staging.62d4615

package/analyzer-template/packages/ai/src/lib/dataStructure/equivalencyManagers/frameworks/MuiManager.ts

@@ -0,0 +1,976 @@
+import { ScopeDataStructure, ScopeNode } from '../../ScopeDataStructure';
+import {
+  AddEquivalenciesInfo,
+  EquivalencyManager,
+} from '../EquivalencyManager';
+
+/**
+ * Framework manager for MUI (Material UI) components.
+ *
+ * Handles patterns where MUI component callbacks receive data from array props:
+ *
+ * 1. DataGrid: `rows` array → `columns[].renderCell` callback receives `params.row`
+ * 2. Autocomplete: `options` array → `renderOption`/`getOptionLabel` callbacks receive option
+ *
+ * Example DataGrid:
+ * ```tsx
+ * <DataGrid
+ *   rows={data}
+ *   columns={[{ renderCell: (params) => <Cell value={params.row.id} /> }]}
+ * />
+ * ```
+ *
+ * Example Autocomplete:
+ * ```tsx
+ * <Autocomplete
+ *   options={users}
+ *   getOptionLabel={(option) => option.name}
+ *   renderOption={(props, option) => <li {...props}>{option.email}</li>}
+ * />
+ * ```
+ */
+export class MuiManager implements EquivalencyManager {
+  postProcess(scopeNode: ScopeNode, scopeDataStructure: ScopeDataStructure) {
+    // Check this scope for DataGrid patterns when it's post-processed
+    this.processDataGridCallbacks(scopeNode, scopeDataStructure);
+
+    // Check for Autocomplete patterns
+    this.processAutocompleteCallbacks(scopeNode, scopeDataStructure);
+
+    // Also check if this scope is inside a DataGrid callback and propagate row property accesses
+    this.propagateFromChildScope(scopeNode, scopeDataStructure);
+
+    // NOTE: processGridApiContext, processCreateTheme, and processGridSelector
+    // are now called from finalize() instead of here.
+    // This is because external function calls are only added AFTER postProcess()
+    // runs (in trackFunctionCalls), so getExternalFunctionCallInfo() would return
+    // undefined during postProcess(). See Issue 23.
+  }
+
+  /**
+   * Handle useGridApiContext() calls by adding the expected apiRef structure to the schema.
+   *
+   * useGridApiContext() returns an apiRef that has internal state used by useGridSelector.
+   * When useGridSelector(apiRef, selector) is called, it accesses apiRef.current.state
+   * to extract data like filterModel, sortModel, etc.
+   *
+   * We add the state structure directly to the external function call's schema
+   * to ensure mocks include the necessary paths.
+   */
+  private processGridApiContext(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find the external function call for useGridApiContext
+    const gridApiContextCall =
+      scopeDataStructure.getExternalFunctionCallInfo('useGridApiContext');
+
+    if (!gridApiContextCall) {
+      return;
+    }
+
+    // Add the state structure that useGridSelector needs to the external function call's schema
+    // useGridSelector reads from apiRef.current.state internally
+    // gridFilterModelSelector reads state.filter.filterModel
+    const basePath = 'useGridApiContext().functionCallReturnValue.current';
+    const statePaths: Record<string, string> = {
+      [`${basePath}.state`]: 'object',
+      [`${basePath}.state.filter`]: 'object',
+      [`${basePath}.state.filter.filterModel`]: 'object',
+      [`${basePath}.state.filter.filterModel.items`]: 'array',
+      // Also add common state paths that might be needed by other selectors
+      [`${basePath}.state.sorting`]: 'object',
+      [`${basePath}.state.sorting.sortModel`]: 'array',
+      [`${basePath}.state.pagination`]: 'object',
+      [`${basePath}.state.pagination.paginationModel`]: 'object',
+      [`${basePath}.state.pagination.paginationModel.page`]: 'number',
+      [`${basePath}.state.pagination.paginationModel.pageSize`]: 'number',
+      [`${basePath}.state.rows`]: 'object',
+      [`${basePath}.state.rows.dataRowIds`]: 'array',
+      [`${basePath}.state.columns`]: 'object',
+      [`${basePath}.state.columns.all`]: 'array',
+    };
+
+    // Add each path to the external function call's schema if it doesn't exist
+    for (const [path, type] of Object.entries(statePaths)) {
+      if (!gridApiContextCall.schema[path]) {
+        gridApiContextCall.schema[path] = type;
+      }
+    }
+  }
+
+  /**
+   * Handle createTheme() calls by adding required MUI theme properties to the schema.
+   *
+   * MUI's ThemeProvider and related components check for specific properties:
+   * - `'$$material' in theme` - validates it's a MUI theme object
+   * - `'colorSchemes' in theme` - checks for color scheme support (MUI v6+)
+   *
+   * Without these properties, ThemeProvider throws:
+   * "TypeError: Cannot use 'in' operator to search for '$$material' in object"
+   * "TypeError: Cannot use 'in' operator to search for 'colorSchemes' in true"
+   *
+   * We add these properties to the createTheme return value schema
+   * to ensure mocks include the necessary properties.
+   */
+  private processCreateTheme(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find the external function call for createTheme
+    const createThemeCall =
+      scopeDataStructure.getExternalFunctionCallInfo('createTheme');
+
+    if (!createThemeCall) {
+      return;
+    }
+
+    // Use the actual call signature to construct the path
+    // createTheme can be called with various arguments:
+    // - createTheme()
+    // - createTheme(options)
+    // - createTheme(getTheme(false), { components: {} })
+    const callSignature = createThemeCall.callSignature;
+    const basePath = `${callSignature}.functionCallReturnValue`;
+
+    // Add required MUI theme properties
+    const themeProperties: Record<string, string> = {
+      [`${basePath}.$$material`]: 'boolean',
+      [`${basePath}.colorSchemes`]: 'object',
+    };
+
+    for (const [path, type] of Object.entries(themeProperties)) {
+      if (!createThemeCall.schema[path]) {
+        createThemeCall.schema[path] = type;
+      }
+    }
+  }
+
+  /**
+   * Handle useGridSelector(apiRef, selector) calls by adding return value schema.
+   *
+   * useGridSelector is a MUI X Data Grid hook that extracts data from the grid's
+   * internal state using a selector function. It's unique because:
+   * 1. It takes arguments (apiRef and selector), so it's not automatically mocked
+   * 2. But its return value depends on which selector is used
+   * 3. The selector reads from apiRef.current.state
+   *
+   * Common selectors and their return types:
+   * - gridFilterModelSelector -> { items: GridFilterItem[] }
+   * - gridSortModelSelector -> GridSortItem[]
+   * - gridPaginationModelSelector -> { page: number, pageSize: number }
+   * - gridRowCountSelector -> number
+   *
+   * We detect which selector is used from the call signature and add the
+   * appropriate return value schema.
+   */
+  private processGridSelector(
+    _scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find external function calls for useGridSelector
+    const gridSelectorCall =
+      scopeDataStructure.getExternalFunctionCallInfo('useGridSelector');
+
+    if (!gridSelectorCall) {
+      return;
+    }
+
+    const callSignature = gridSelectorCall.callSignature;
+    const basePath = `${callSignature}.functionCallReturnValue`;
+
+    // Determine which selector is being used and add appropriate schema
+    if (callSignature.includes('gridFilterModelSelector')) {
+      // gridFilterModelSelector returns { items: GridFilterItem[] }
+      const filterPaths: Record<string, string> = {
+        [basePath]: 'object',
+        [`${basePath}.items`]: 'array',
+        [`${basePath}.items[]`]: 'object',
+        [`${basePath}.items[].field`]: 'string',
+        [`${basePath}.items[].operator`]: 'string',
+        [`${basePath}.items[].value`]: 'array',
+        [`${basePath}.items[].value[]`]: 'string',
+      };
+
+      for (const [path, type] of Object.entries(filterPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridSortModelSelector')) {
+      // gridSortModelSelector returns GridSortItem[]
+      const sortPaths: Record<string, string> = {
+        [basePath]: 'array',
+        [`${basePath}[]`]: 'object',
+        [`${basePath}[].field`]: 'string',
+        [`${basePath}[].sort`]: 'string',
+      };
+
+      for (const [path, type] of Object.entries(sortPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridPaginationModelSelector')) {
+      // gridPaginationModelSelector returns { page: number, pageSize: number }
+      const paginationPaths: Record<string, string> = {
+        [basePath]: 'object',
+        [`${basePath}.page`]: 'number',
+        [`${basePath}.pageSize`]: 'number',
+      };
+
+      for (const [path, type] of Object.entries(paginationPaths)) {
+        if (!gridSelectorCall.schema[path]) {
+          gridSelectorCall.schema[path] = type;
+        }
+      }
+    } else if (callSignature.includes('gridRowCountSelector')) {
+      // gridRowCountSelector returns number
+      if (!gridSelectorCall.schema[basePath]) {
+        gridSelectorCall.schema[basePath] = 'number';
+      }
+    } else {
+      // Unknown selector - add generic object return type
+      // This ensures the hook is at least mocked with some structure
+      if (!gridSelectorCall.schema[basePath]) {
+        gridSelectorCall.schema[basePath] = 'object';
+      }
+    }
+  }
+
+  private processDataGridCallbacks(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Find DataGrid calls and link renderCell callbacks to rows
+    for (const [path, equivalencies] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      // Case 1: Look for DataGrid().signature[0].columns equivalency pointing to a columns variable
+      const dataGridMatch = path.match(
+        /^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns$/,
+      );
+      if (dataGridMatch) {
+        const dataGridCall = dataGridMatch[1];
+
+        // Find what columns is equivalent to (e.g., "columns" variable)
+        for (const equiv of equivalencies) {
+          const columnsVar = equiv.schemaPath;
+
+          // Find renderCell callbacks, following equivalency chains if needed
+          const callbackScopes = this.findRenderCellCallbacks(
+            columnsVar,
+            scopeNode,
+            new Set(),
+            scopeDataStructure,
+          );
+
+          for (const callbackScopeName of callbackScopes) {
+            this.addRowEquivalencyToCallback(
+              callbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
+          }
+        }
+        continue;
+      }
+
+      // Case 2: Look for inline array props where DataGrid().signature[0].columns[N].renderCell
+      // directly points to a callback scope (e.g., DataGrid().signature[0].columns[0].renderCell → cyScope1())
+      // Also handles columns[].renderCell for normalized paths
+      const inlineRenderCellMatch = path.match(
+        /^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns\[(?:\d+|)\]\.renderCell$/,
+      );
+
+      if (inlineRenderCellMatch) {
+        const dataGridCall = inlineRenderCellMatch[1];
+
+        for (const equiv of equivalencies) {
+          // Check if the equivalency points to a callback scope (cyScope*)
+          // Could be cyScope1() or cyScope1().functionCallReturnValue
+          const callbackMatch = equiv.schemaPath.match(
+            /^(cyScope[0-9A-Fa-f]+)\(\)(?:\.functionCallReturnValue)?$/,
+          );
+          if (callbackMatch) {
+            // Try both naming conventions:
+            // 1. Just the cyScope name (e.g., "cyScope1")
+            // 2. Parent____cyScope name (e.g., "CustomersPage____cyScope1")
+            const callbackScopeName = callbackMatch[1];
+            const prefixedCallbackScopeName = `${scopeNode.name}____${callbackMatch[1]}`;
+            // Try unprefixed name first, then prefixed
+            this.addRowEquivalencyToCallback(
+              callbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
+            // Also try prefixed version in case it exists
+            this.addRowEquivalencyToCallback(
+              prefixedCallbackScopeName,
+              dataGridCall,
+              scopeNode,
+              scopeDataStructure,
+            );
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Helper to add the signature[0].row → DataGrid().signature[0].rows[] equivalency
+   */
+  private addRowEquivalencyToCallback(
+    callbackScopeName: string,
+    dataGridCall: string,
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    const callbackScopeNode =
+      scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+    if (!callbackScopeNode) {
+      return;
+    }
+
+    // Add equivalency: signature[0].row ≡ DataGrid().signature[0].rows[]
+    const callbackParamRowPath = 'signature[0].row';
+    const rowsArrayElementPath = `${dataGridCall}.signature[0].rows[]`;
+
+    scopeDataStructure.addEquivalency(
+      callbackParamRowPath,
+      rowsArrayElementPath,
+      scopeNode.name,
+      callbackScopeNode as ScopeNode,
+      'MUI DataGrid renderCell params.row equivalency',
+    );
+  }
+
+  /**
+   * Process Autocomplete callbacks to link option parameters to options array.
+   *
+   * Autocomplete has two callback props that receive individual options:
+   * - getOptionLabel(option) - param 0 is the option
+   * - renderOption(props, option, state) - param 1 is the option
+   */
+  private processAutocompleteCallbacks(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    for (const [path, equivalencies] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      // Look for Autocomplete().signature[0].options equivalency
+      const autocompleteMatch = path.match(
+        /^(Autocomplete\(\))\.signature\[0\]\.options$/,
+      );
+      if (!autocompleteMatch) continue;
+
+      const autocompleteCall = autocompleteMatch[1];
+
+      // Find callback props: getOptionLabel, renderOption
+      for (const callbackProp of ['getOptionLabel', 'renderOption']) {
+        const callbackPath = `${autocompleteCall}.signature[0].${callbackProp}`;
+        const callbackEquivs = scopeNode.equivalencies[callbackPath];
+
+        if (callbackEquivs) {
+          for (const callbackEquiv of callbackEquivs) {
+            const callbackMatch = callbackEquiv.schemaPath.match(
+              /^(cyScope[0-9A-Fa-f]+)\(\)\.functionCallReturnValue$/,
+            );
+            if (!callbackMatch) continue;
+
+            const callbackScopeName = callbackMatch[1];
+            const callbackScopeNode =
+              scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+            if (!callbackScopeNode) continue;
+
+            // Determine which parameter index receives the option
+            // getOptionLabel: (option) => ... → param 0
+            // renderOption: (props, option, state) => ... → param 1
+            const paramIndex = callbackProp === 'renderOption' ? 1 : 0;
+
+            const callbackParamPath = `signature[${paramIndex}]`;
+            const optionsArrayElementPath = `${autocompleteCall}.signature[0].options[]`;
+
+            scopeDataStructure.addEquivalency(
+              callbackParamPath,
+              optionsArrayElementPath,
+              scopeNode.name,
+              callbackScopeNode as ScopeNode,
+              `MUI Autocomplete ${callbackProp} option equivalency`,
+            );
+            // Note: Property accesses are propagated in finalize() after all scopes are established
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Propagate property accesses from Autocomplete callback scope.
+   * When we find usages like `option.email`, create equivalencies to `options[].email`
+   * and trace back to the original data source (e.g., `users[].email`).
+   */
+  private propagateAutocompletePropertyAccesses(
+    callbackScope: ScopeNode,
+    autocompleteCall: string,
+    optionParamIndex: number,
+    parentScopeName: string,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+      parentScopeName,
+    ) as ScopeNode;
+    if (!parentScope) return;
+
+    // Find what options is equivalent to (e.g., "users")
+    const optionsPath = `${autocompleteCall}.signature[0].options`;
+    const optionsEquivs = parentScope.equivalencies?.[optionsPath];
+    const dataSourcePath = optionsEquivs?.[0]?.schemaPath;
+
+    // Check for property accesses on the option parameter in the schema
+    // The schema contains entries like "signature[1].email" for property accesses
+    for (const schemaPath of Object.keys(callbackScope.schema || {})) {
+      // Match patterns like signature[0].name, signature[1].email (depending on param index)
+      const optionPropertyMatch = schemaPath.match(
+        new RegExp(`^signature\\[${optionParamIndex}\\]\\.(\\w+)$`),
+      );
+
+      if (optionPropertyMatch) {
+        const propertyName = optionPropertyMatch[1];
+
+        // Create equivalency: schemaPath → options[].propertyName
+        const optionsPropertyPath = `${autocompleteCall}.signature[0].options[].${propertyName}`;
+
+        scopeDataStructure.addEquivalency(
+          schemaPath,
+          optionsPropertyPath,
+          parentScopeName,
+          callbackScope,
+          'MUI Autocomplete option property equivalency',
+        );
+
+        // Also create equivalency to the data source (e.g., users[].email)
+        if (dataSourcePath) {
+          const dataPropertyPath = `${dataSourcePath}[].${propertyName}`;
+
+          // Add to parent scope's schema
+          if (!parentScope.schema[dataPropertyPath]) {
+            parentScope.schema[dataPropertyPath] = 'unknown';
+          }
+
+          // Create bidirectional equivalencies to ensure propagation
+          scopeDataStructure.addEquivalency(
+            schemaPath,
+            dataPropertyPath,
+            parentScopeName,
+            callbackScope,
+            'MUI Autocomplete option property equivalency',
+          );
+
+          scopeDataStructure.addEquivalency(
+            dataPropertyPath,
+            schemaPath,
+            parentScopeName,
+            parentScope,
+            'MUI Autocomplete option property equivalency',
+          );
+        }
+      }
+    }
+  }
+
+  /**
+   * Find renderCell callbacks for a columns variable, following equivalency chains.
+   * For example: tableColumns → allColumns → allColumns[].renderCell → cyScope
+   *
+   * Also handles useMemo patterns where:
+   * - tableColumns → useMemo(cyScope(), [allColumns]).functionCallReturnValue
+   * - And allColumns[].renderCell → cyScope()
+   */
+  private findRenderCellCallbacks(
+    columnsVar: string,
+    scopeNode: ScopeNode,
+    visited: Set<string>,
+    scopeDataStructure?: ScopeDataStructure,
+  ): string[] {
+    if (visited.has(columnsVar)) return [];
+    visited.add(columnsVar);
+
+    const callbackScopes: string[] = [];
+
+    // Try direct path: columnsVar[].renderCell - check both current scope and parent scopes
+    // Also check for indexed paths like columnsVar[3].renderCell (with specific indices)
+    const renderCellPath = `${columnsVar}[].renderCell`;
+    let renderCellEquivs = scopeNode.equivalencies[renderCellPath];
+
+    // If not found in current scope, check parent scopes (via scopeNode.tree)
+    if (!renderCellEquivs && scopeDataStructure && scopeNode.tree) {
+      for (const parentScopeName of scopeNode.tree) {
+        const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+          parentScopeName,
+        ) as ScopeNode;
+        if (parentScope?.equivalencies?.[renderCellPath]) {
+          renderCellEquivs = parentScope.equivalencies[renderCellPath];
+          break;
+        }
+      }
+    }
+
+    // Also look for indexed paths like tableColumns[3].renderCell, tableColumns[5].renderCell, etc.
+    // This is needed because column definitions often have specific indices
+    const indexedRenderCellPattern = new RegExp(
+      `^${columnsVar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[\\d+\\]\\.renderCell$`,
+    );
+    const allScopesToCheck = [scopeNode];
+    if (scopeDataStructure && scopeNode.tree) {
+      for (const parentScopeName of scopeNode.tree) {
+        const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+          parentScopeName,
+        ) as ScopeNode;
+        if (parentScope) allScopesToCheck.push(parentScope);
+      }
+    }
+
+    for (const scope of allScopesToCheck) {
+      for (const [path, equivs] of Object.entries(scope.equivalencies || {})) {
+        if (indexedRenderCellPattern.test(path)) {
+          for (const equiv of equivs) {
+            const callbackMatch = equiv.schemaPath.match(
+              /^(cyScope\d+)\(\)\.functionCallReturnValue$/,
+            );
+            if (callbackMatch && !callbackScopes.includes(callbackMatch[1])) {
+              callbackScopes.push(callbackMatch[1]);
+            }
+          }
+        }
+      }
+    }
+
+    if (renderCellEquivs) {
+      for (const renderCellEquiv of renderCellEquivs) {
+        // Check if it points to a callback (cyScope().functionCallReturnValue)
+        const callbackMatch = renderCellEquiv.schemaPath.match(
+          /^(cyScope\d+)\(\)\.functionCallReturnValue$/,
+        );
+        if (callbackMatch && !callbackScopes.includes(callbackMatch[1])) {
+          callbackScopes.push(callbackMatch[1]);
+        }
+      }
+    }
+
+    // If no direct callbacks found, follow equivalency chains
+    if (callbackScopes.length === 0) {
+      // Look for what columnsVar is equivalent to - check current scope and parent scopes
+      let varEquivs = scopeNode.equivalencies[columnsVar];
+      let equivScopeNode = scopeNode;
+
+      // If not found or only self-reference, check parent scopes (via scopeNode.tree)
+      if (
+        (!varEquivs ||
+          (varEquivs.length === 1 && varEquivs[0].schemaPath === columnsVar)) &&
+        scopeDataStructure &&
+        scopeNode.tree
+      ) {
+        for (const parentScopeName of scopeNode.tree) {
+          const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+            parentScopeName,
+          ) as ScopeNode;
+          if (parentScope?.equivalencies?.[columnsVar]) {
+            const parentEquivs = parentScope.equivalencies[columnsVar];
+            // Check if it has non-self-reference equivalencies
+            if (
+              parentEquivs.some((e) => e.schemaPath !== columnsVar) ||
+              parentEquivs.some((e) => e.schemaPath.includes('useMemo'))
+            ) {
+              varEquivs = parentEquivs;
+              equivScopeNode = parentScope;
+              break;
+            }
+          }
+        }
+      }
+
+      if (varEquivs) {
+        for (const varEquiv of varEquivs) {
+          const schemaPath = varEquiv.schemaPath;
+
+          // Handle useMemo pattern: useMemo(cyScope(), [allColumns]).functionCallReturnValue
+          // The second argument [allColumns] tells us what's being passed to useMemo
+          const useMemoMatch = schemaPath.match(
+            /^useMemo\(cyScope\d+\(\), \[([^\]]+)\]\)\.functionCallReturnValue$/,
+          );
+          if (useMemoMatch) {
+            // The array in the dependency list often contains the actual columns variable
+            const depsList = useMemoMatch[1];
+            // Parse the deps - could be comma-separated
+            const deps = depsList.split(',').map((d) => d.trim());
+            for (const dep of deps) {
+              const nestedCallbacks = this.findRenderCellCallbacks(
+                dep,
+                equivScopeNode,
+                visited,
+                scopeDataStructure,
+              );
+              callbackScopes.push(...nestedCallbacks);
+            }
+            continue;
+          }
+
+          // Skip other function calls and internal paths
+          if (schemaPath.includes('()') || schemaPath.includes('[')) {
+            continue;
+          }
+
+          // Skip self-references
+          if (schemaPath === columnsVar) {
+            continue;
+          }
+
+          // Recursively search in the equivalent variable
+          const nestedCallbacks = this.findRenderCellCallbacks(
+            schemaPath,
+            equivScopeNode,
+            visited,
+            scopeDataStructure,
+          );
+          callbackScopes.push(...nestedCallbacks);
+        }
+      }
+    }
+
+    return callbackScopes;
+  }
+
+  /**
+   * Propagate row property accesses from callback scope and its children.
+   * When we find usages like `params.row.id`, create equivalencies to `rows[].id`.
+   */
+  private propagateRowPropertyAccesses(
+    callbackScope: ScopeNode,
+    dataGridCall: string,
+    parentScopeName: string,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Check all scopes (callback and its children) for params.row.* accesses
+    const scopesToCheck = [callbackScope];
+
+    // Find child scopes by looking for scopes whose tree includes the callback scope
+    const callbackScopeName = callbackScope.name;
+    for (const [scopeName, scope] of Object.entries(
+      scopeDataStructure.scopeNodes,
+    )) {
+      if (
+        scope.tree &&
+        scope.tree.includes(callbackScopeName) &&
+        scopeName !== callbackScopeName
+      ) {
+        scopesToCheck.push(scope);
+      }
+    }
+
+    for (const scope of scopesToCheck) {
+      // Find equivalencies that reference params.row.* or signature[0].row.*
+      for (const [path, equivs] of Object.entries(scope.equivalencies)) {
+        for (const equiv of equivs) {
+          const schemaPath = equiv.schemaPath;
+
+          // Match patterns like params.row.id, params.row.flagged, signature[0].row.status
+          const rowPropertyMatch = schemaPath.match(
+            /^(?:params|signature\[0\])\.row\.(\w+)$/,
+          );
+
+          if (rowPropertyMatch) {
+            const propertyName = rowPropertyMatch[1];
+
+            // Create equivalency: the path accessing params.row.X → rows[].X
+            // e.g., updateStatus().signature[0].id → DataGrid().signature[0].rows[].id
+            const rowsPropertyPath = `${dataGridCall}.signature[0].rows[].${propertyName}`;
+
+            scopeDataStructure.addEquivalency(
+              path,
+              rowsPropertyPath,
+              parentScopeName,
+              scope,
+              'MUI DataGrid renderCell params.row equivalency',
+            );
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Process from child scope perspective: look for params.row.* accesses
+   * and trace back to find DataGrid rows equivalency in parent scopes.
+   */
+  private propagateFromChildScope(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Look for equivalencies in this scope that reference params.row.*
+    for (const [path, equivs] of Object.entries(scopeNode.equivalencies)) {
+      for (const equiv of equivs) {
+        const schemaPath = equiv.schemaPath;
+
+        // Match patterns like params.row.id, params.row.status
+        const rowPropertyMatch = schemaPath.match(/^params\.row\.(\w+)$/);
+
+        if (rowPropertyMatch) {
+          const propertyName = rowPropertyMatch[1];
+
+          // Look in parent scopes for DataGrid rows equivalency
+          // The pattern we're looking for is: signature[0].row → DataGrid().signature[0].rows[]
+          const dataGridCall = this.findDataGridInParentScopes(
+            scopeNode,
+            scopeDataStructure,
+          );
+
+          if (dataGridCall) {
+            // Find the parent scope that has the DataGrid
+            const parentScopeName = this.findDataGridScopeName(
+              scopeNode,
+              scopeDataStructure,
+            );
+            const parentScope = parentScopeName
+              ? (scopeDataStructure.getScopeOrFunctionCallInfo(
+                  parentScopeName,
+                ) as ScopeNode)
+              : undefined;
+
+            // Find what DataGrid().signature[0].rows is equivalent to (e.g., "data.quotes")
+            const rowsPath = `${dataGridCall}.signature[0].rows`;
+            const rowsEquivs = parentScope?.equivalencies?.[rowsPath];
+            const dataSourcePath = rowsEquivs?.[0]?.schemaPath;
+
+            if (dataSourcePath && parentScope) {
+              // Create equivalency: path → dataSource[].propertyName (e.g., data.quotes[].id)
+              const dataPropertyPath = `${dataSourcePath}[].${propertyName}`;
+
+              // Add equivalency in child scope
+              scopeDataStructure.addEquivalency(
+                path,
+                dataPropertyPath,
+                parentScopeName || scopeNode.name,
+                scopeNode,
+                'MUI DataGrid renderCell params.row equivalency',
+              );
+
+              // Also add the property access to the parent scope's schema
+              // This ensures that data.quotes[].id shows up as an accessed property
+              if (!parentScope.schema[dataPropertyPath]) {
+                parentScope.schema[dataPropertyPath] = 'unknown';
+              }
+
+              // And create an equivalency FROM the data path so it propagates to returnValue
+              scopeDataStructure.addEquivalency(
+                dataPropertyPath,
+                path,
+                parentScopeName!,
+                parentScope,
+                'MUI DataGrid renderCell params.row equivalency',
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Find the DataGrid call in parent scopes by looking for signature[0].row → DataGrid().signature[0].rows[]
+   */
+  private findDataGridInParentScopes(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ): string | undefined {
+    // Check the scope tree (parent scopes)
+    if (!scopeNode.tree) return undefined;
+
+    for (const parentScopeName of scopeNode.tree) {
+      const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+        parentScopeName,
+      ) as ScopeNode;
+      if (!parentScope?.equivalencies) continue;
+
+      // Look for signature[0].row → DataGrid().signature[0].rows[]
+      const rowEquivs = parentScope.equivalencies['signature[0].row'];
+      if (rowEquivs) {
+        for (const equiv of rowEquivs) {
+          const match = equiv.schemaPath.match(
+            /^(DataGrid(?:Pro|Premium)?)\(\)\.signature\[0\]\.rows\[\]$/,
+          );
+          if (match) {
+            return `${match[1]}()`;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Find the scope name that contains the DataGrid call
+   */
+  private findDataGridScopeName(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ): string | undefined {
+    if (!scopeNode.tree) return undefined;
+
+    for (const parentScopeName of scopeNode.tree) {
+      const parentScope = scopeDataStructure.getScopeOrFunctionCallInfo(
+        parentScopeName,
+      ) as ScopeNode;
+      if (!parentScope?.equivalencies) continue;
+
+      // Look for DataGrid().signature[0].columns
+      for (const path of Object.keys(parentScope.equivalencies)) {
+        if (
+          path.match(/^DataGrid(?:Pro|Premium)?\(\)\.signature\[0\]\.columns$/)
+        ) {
+          return parentScopeName;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  isInterestedInSubpath(
+    subPathParts: string[],
+    _scopeNode: ScopeNode,
+    _scopeDataStructure: ScopeDataStructure,
+  ): boolean {
+    // We're interested in MUI component paths (DataGrid variants and Autocomplete)
+    const hasMuiComponent = subPathParts.some((part) =>
+      part.match(/^(DataGrid(Pro|Premium)?|Autocomplete)\(/),
+    );
+    return hasMuiComponent;
+  }
+
+  addEquivalencies(_addEquivalenciesInfo: AddEquivalenciesInfo): boolean {
+    // We handle DataGrid in finalize() instead, since we need to scan
+    // for all equivalencies after they've been established
+    return false;
+  }
+
+  finalize(_scopeNode: ScopeNode, scopeDataStructure: ScopeDataStructure) {
+    // Process external function call schemas ONCE (not per-scope) since they
+    // are global. These were moved from postProcess() because external function
+    // calls are only available AFTER postProcess() runs (in trackFunctionCalls).
+    // See Issue 23.
+    this.processGridApiContext(_scopeNode, scopeDataStructure);
+    this.processCreateTheme(_scopeNode, scopeDataStructure);
+    this.processGridSelector(_scopeNode, scopeDataStructure);
+
+    // Iterate through all scopes (finalize is only called on root)
+    for (const [scopeName, scopeNode] of Object.entries(
+      scopeDataStructure.scopeNodes,
+    )) {
+      this.finalizeScope(scopeNode, scopeDataStructure);
+    }
+  }
+
+  private finalizeScope(
+    scopeNode: ScopeNode,
+    scopeDataStructure: ScopeDataStructure,
+  ) {
+    // Propagate row property accesses after all scopes are established
+    // Find DataGrid calls in this scope and link renderCell params.row.* to rows[].*
+    for (const [path, equivalencies] of Object.entries(
+      scopeNode.equivalencies,
+    )) {
+      // Look for DataGrid().signature[0].columns equivalency
+      const dataGridMatch = path.match(
+        /^(DataGrid(?:Pro|Premium)?\(\))\.signature\[0\]\.columns$/,
+      );
+      if (dataGridMatch) {
+        const dataGridCall = dataGridMatch[1];
+
+        // Find what columns is equivalent to
+        for (const equiv of equivalencies) {
+          const columnsVar = equiv.schemaPath;
+
+          // Find renderCell callbacks
+          const callbackScopes = this.findRenderCellCallbacks(
+            columnsVar,
+            scopeNode,
+            new Set(),
+            scopeDataStructure,
+          );
+
+          for (const callbackScopeName of callbackScopes) {
+            const callbackScopeNode =
+              scopeDataStructure.getScopeOrFunctionCallInfo(callbackScopeName);
+            if (!callbackScopeNode) continue;
+
+            // Propagate sub-property accesses from params.row.*
+            this.propagateRowPropertyAccesses(
+              callbackScopeNode as ScopeNode,
+              dataGridCall,
+              scopeNode.name,
+              scopeDataStructure,
+            );
+          }
+        }
+        continue;
+      }
+
+      // Look for Autocomplete().signature[0].options equivalency
+      const autocompleteMatch = path.match(
+        /^(Autocomplete\(\))\.signature\[0\]\.options$/,
+      );
+      if (autocompleteMatch) {
+        const autocompleteCall = autocompleteMatch[1];
+
+        // Find callback props and propagate property accesses
+        for (const callbackProp of ['getOptionLabel', 'renderOption']) {
+          const callbackPath = `${autocompleteCall}.signature[0].${callbackProp}`;
+          const callbackEquivs = scopeNode.equivalencies[callbackPath];
+
+          if (callbackEquivs) {
+            for (const callbackEquiv of callbackEquivs) {
+              const callbackMatch = callbackEquiv.schemaPath.match(
+                /^(cyScope[0-9A-Fa-f]+)\(\)\.functionCallReturnValue$/,
+              );
+              if (!callbackMatch) continue;
+
+              const callbackScopeName = callbackMatch[1];
+              const callbackScopeNode =
+                scopeDataStructure.getScopeOrFunctionCallInfo(
+                  callbackScopeName,
+                );
+              if (!callbackScopeNode) continue;
+
+              // Determine which parameter index receives the option
+              const paramIndex = callbackProp === 'renderOption' ? 1 : 0;
+
+              // Propagate property accesses from this callback
+              this.propagateAutocompletePropertyAccesses(
+                callbackScopeNode as ScopeNode,
+                autocompleteCall,
+                paramIndex,
+                scopeNode.name,
+                scopeDataStructure,
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // NOTE: We intentionally do NOT include DataGrid/Autocomplete in internalFunctions.
+  // While they're MUI components (not external data sources), we need them to remain
+  // in externalFunctionCalls so that data flow tracing works correctly.
+  // For example: DataGrid().signature[0].rows → data.items[] tracing
+  internalFunctions: Set<string> = new Set([]);
+
+  toString() {
+    return 'MuiManager';
+  }
+}