Add configurable data source (Graph API / SP Search / Auto)

Root cause of missing direct reports in production: the primary data
source is SharePoint People Search, which has hours-to-days of indexing
delay. New users added to Azure AD do not appear until the index catches
up, and the supplemental Graph directReports call never fires for managers
who aren't already in the search index.

Fix: add a dataSource admin property (Auto / Graph API / SharePoint Search)

- Auto (new default): tries Graph API first; falls back to SP Search with
  a console warning if Graph is unavailable or returns 0 users
- Graph API: calls /users?$expand=manager with full pagination — reads live
  AAD data with no indexing delay; new users appear immediately
- SharePoint Search: preserves previous behavior for tenants that prefer it

GraphService changes:
- New _dataSource field on constructor (4th param, default 'auto')
- _loadUsers() dispatches to _fetchAllUsersFromGraph() or the existing
  SP Search path based on _dataSource
- New _fetchAllUsersFromGraph(): paginates /users?$expand=manager, maps
  manager.userPrincipalName into _pendingManagerIds (same key format as
  SP Search path so _buildMaps works identically), pre-populates
  _photoCache with the /_layouts/15/userphoto.aspx URL pattern
- If dataSource='graph' and Graph client is absent, throws a descriptive
  error instead of silently returning empty results
- DataSource type exported for consumers

Property pane: new 'Data Source' group with a ChoiceGroup above the
Org Chart settings group.

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

Author: sregan1

src/services/GraphService.ts

@@ -30,10 +30,13 @@ const SELECT_PROPS   = 'AccountName,DisplayName,PreferredName,JobTitle,Departmen
                        'WorkEmail,WorkPhone,MobilePhone,OfficeNumber,PictureURL,Manager';
 const BATCH_SIZE = 500;
 
+export type DataSource = 'auto' | 'graph' | 'search';
+
 export class GraphService {
   private _client:         SPHttpClient;
   private _graphClient:    MSGraphClientV3 | undefined;
   private _webUrl:         string;
+  private _dataSource:     DataSource;
   private _photoCache:     Map<string, string | null> = new Map();
   private _allUsersCache:  IGraphUser[] | null = null;
   private _childrenMap:    Map<string, IGraphUser[]> = new Map();
@@ -45,10 +48,11 @@ export class GraphService {
   private _presenceExpiry = 0;
   private readonly _PRESENCE_TTL = 60_000;
 
-  constructor(client: SPHttpClient, webUrl: string, graphClient?: MSGraphClientV3) {
+  constructor(client: SPHttpClient, webUrl: string, graphClient?: MSGraphClientV3, dataSource: DataSource = 'auto') {
     this._client      = client;
     this._webUrl      = webUrl.replace(/\/$/, '');
     this._graphClient = graphClient;
+    this._dataSource  = dataSource;
   }
 
   /* ── Public API ──────────────────────────────────────────────────── */
@@ -57,8 +61,7 @@ export class GraphService {
     if (this._allUsersCache) return Promise.resolve(this._allUsersCache);
     if (this._loadingPromise) return this._loadingPromise;
 
-    this._loadingPromise = this._fetchAllUsers()
-      .then(users => this._supplementUnlicensedReports(users))
+    this._loadingPromise = this._loadUsers()
       .then(users => {
         this._allUsersCache = users;
         this._buildMaps(users);
@@ -73,6 +76,35 @@ export class GraphService {
     return this._loadingPromise;
   }
 
+  private async _loadUsers(): Promise<IGraphUser[]> {
+    const useGraph = this._dataSource === 'graph' ||
+                     (this._dataSource === 'auto' && !!this._graphClient);
+
+    if (this._dataSource === 'graph' && !this._graphClient) {
+      throw new Error(
+        'Graph API data source selected but Microsoft Graph permissions have not been granted. ' +
+        'Please approve the app permissions in the SharePoint App Catalog, or switch the Data Source setting to "SharePoint Search".'
+      );
+    }
+
+    if (useGraph) {
+      try {
+        const users = await this._fetchAllUsersFromGraph();
+        if (users.length === 0) throw new Error('Graph API returned 0 users');
+        return users;
+      } catch (err) {
+        if (this._dataSource === 'graph') throw err;
+        // 'auto' mode: fall back to SharePoint Search
+        console.warn('[SmartOrgChart] Graph API unavailable, falling back to SharePoint Search:', err);
+        this._pendingManagerIds.clear();
+      }
+    }
+
+    // SharePoint Search path (primary or fallback)
+    const users = await this._fetchAllUsers();
+    return this._supplementUnlicensedReports(users);
+  }
+
   public async getUserPhoto(userId: string): Promise<string | null> {
     const key = userId.toLowerCase();
     if (this._photoCache.has(key)) return this._photoCache.get(key) ?? null;
@@ -289,6 +321,72 @@ export class GraphService {
       : users;
   }
 
+  private async _fetchAllUsersFromGraph(): Promise<IGraphUser[]> {
+    if (!this._graphClient) throw new Error('Graph client not available');
+
+    const users: IGraphUser[] = [];
+    const SELECT = 'id,displayName,mail,userPrincipalName,jobTitle,department,officeLocation,mobilePhone,businessPhones';
+    let url: string | null =
+      `/users?$select=${SELECT}&$expand=manager($select=id,userPrincipalName,mail)&$top=999`;
+
+    while (url) {
+      const req = this._graphClient.api(url);
+      if (!url.startsWith('https://')) req.version('v1.0');
+      const response = await req.get();
+      const items: Array<{
+        id: string;
+        displayName: string;
+        mail: string;
+        userPrincipalName: string;
+        jobTitle: string;
+        department: string;
+        officeLocation: string;
+        mobilePhone: string;
+        businessPhones: string[];
+        manager?: { id: string; userPrincipalName: string; mail: string };
+      }> = response?.value || [];
+
+      for (const item of items) {
+        const upn  = (item.userPrincipalName || '').toLowerCase();
+        const mail = (item.mail || '').toLowerCase();
+        const id   = upn || mail;
+        if (!id || !item.displayName) continue;
+
+        // Pre-populate photo cache with SharePoint profile photo URL
+        const photoEmail = mail || upn;
+        const photoUrl = photoEmail
+          ? `${this._webUrl}/_layouts/15/userphoto.aspx?size=L&accountname=${encodeURIComponent(photoEmail)}`
+          : null;
+        this._photoCache.set(id, photoUrl);
+
+        // Store AAD object ID for presence lookups
+        if (item.id) this._upnToObjectId.set(id, item.id);
+
+        // Manager relationship — prefer UPN, fall back to mail
+        const mgrUpn  = (item.manager?.userPrincipalName || '').toLowerCase();
+        const mgrMail = (item.manager?.mail || '').toLowerCase();
+        const mgrId   = mgrUpn || mgrMail;
+        if (mgrId) this._pendingManagerIds.set(id, mgrId);
+
+        users.push({
+          id,
+          displayName:       item.displayName,
+          mail:              mail,
+          jobTitle:          item.jobTitle          || '',
+          mobilePhone:       item.mobilePhone        || '',
+          businessPhones:    item.businessPhones     || [],
+          department:        item.department         || '',
+          officeLocation:    item.officeLocation     || '',
+          userPrincipalName: upn,
+        });
+      }
+
+      url = response?.['@odata.nextLink'] || null;
+    }
+
+    return users.sort((a, b) => (a.displayName || '').localeCompare(b.displayName || ''));
+  }
+
   private async _fetchAllUsers(): Promise<IGraphUser[]> {
     const users: IGraphUser[] = [];
     let startRow  = 0;

src/webparts/smartOrgChart/SmartOrgChartWebPart.ts

@@ -32,6 +32,8 @@ export interface ISmartOrgChartWebPartProps {
   enableStats: boolean;
   enableDeptFilter: boolean;
   enableUserFilter: boolean;
+  // Data
+  dataSource: 'auto' | 'graph' | 'search';
 }
 
 export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOrgChartWebPartProps> {
@@ -49,6 +51,8 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
     // Branding defaults
     if (p.companyName === undefined) p.companyName = '';
     if (p.logoUrl     === undefined) p.logoUrl     = '';
+    // Data source default
+    if (p.dataSource  === undefined) p.dataSource  = 'auto';
     return super.onInit();
   }
 
@@ -69,6 +73,7 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
       enableStats: this.properties.enableStats !== false,
       enableDeptFilter: this.properties.enableDeptFilter !== false,
       enableUserFilter: this.properties.enableUserFilter !== false,
+      dataSource: this.properties.dataSource || 'auto',
       onSettingsSaved: (newProps: Partial<ISmartOrgChartWebPartProps>) => {
         Object.assign(this.properties, newProps);
       }
@@ -146,6 +151,34 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
                 }),
               ]
             },
+            {
+              groupName: 'Data Source',
+              groupFields: [
+                PropertyPaneChoiceGroup('dataSource', {
+                  label: 'Where to load user & org data from',
+                  options: [
+                    {
+                      key: 'auto',
+                      text: 'Auto — Graph API, fall back to SharePoint Search',
+                      iconProps: { officeFabricIconFontName: 'AutoEnhanceOn' }
+                    },
+                    {
+                      key: 'graph',
+                      text: 'Graph API — live Azure AD data (no indexing delay)',
+                      iconProps: { officeFabricIconFontName: 'AzureLogo' }
+                    },
+                    {
+                      key: 'search',
+                      text: 'SharePoint Search — legacy behavior',
+                      iconProps: { officeFabricIconFontName: 'Search' }
+                    }
+                  ]
+                }),
+                PropertyPaneLabel('dataSource', {
+                  text: 'Graph API is recommended. It reads directly from Azure Active Directory so new users and manager changes appear immediately. Requires Microsoft Graph permissions to be approved in the SharePoint App Catalog.'
+                })
+              ]
+            },
             {
               groupName: 'Org Chart',
               groupFields: [

src/webparts/smartOrgChart/components/SmartOrgChart.tsx

@@ -91,7 +91,7 @@ export class SmartOrgChart extends React.Component<ISmartOrgChartProps, ISmartOr
   }
 
   public async componentDidUpdate(prev: ISmartOrgChartProps): Promise<void> {
-    if (prev.useDemoData !== this.props.useDemoData) {
+    if (prev.useDemoData !== this.props.useDemoData || prev.dataSource !== this.props.dataSource) {
       await this._initGraphService();
     }
   }
@@ -112,7 +112,7 @@ export class SmartOrgChart extends React.Component<ISmartOrgChartProps, ISmartOr
     } catch {
       // Graph client unavailable — fall back to SP Search only
     }
-    this.setState({ graphService: new GraphService(spHttpClient, pageContext.web.absoluteUrl, graphClient) });
+    this.setState({ graphService: new GraphService(spHttpClient, pageContext.web.absoluteUrl, graphClient, this.props.dataSource || 'auto') });
   }
 
   private _setMockSize = (size: MockCompanySize): void => {