Refactors webhook utils and measurement handling

Extracts event/session parsing, color mapping, and measurement logic into dedicated utilities and shared types to reduce duplication and simplify the inspector component.

Standardizes measurement event detection to TPS.Simulator events and centralizes payload extraction via EventModel.
Merges ShotFinish Actual values with the most recent OnStrokeCompleted measurement (scoped by device) and includes trajectory positions.
Updates the component to consume the new APIs and pass playerId from the payload.

Improves maintainability and prepares for broader reuse across the app.

Author: mbertelsen

src/components/WebhookInspector.tsx

@@ -6,15 +6,15 @@ import CourseInfoBanner from './CourseInfoBanner';
 import { ShotData } from './ShotTrajectoryOverlay';
 import { useActivitySessionState } from '../hooks/useActivitySessionState';
 import { getEventDisplayName, getEventDescription, hasEventMetadata } from '../utils/eventMetadata';
-
-type EventItem = {
-  id?: string;
-  eventType: string;
-  timestamp: string;
-  data?: any;
-  raw?: any;
-  expanded?: boolean;
-};
+import { EventItem } from '../types/webhookTypes';
+import { getColorForId } from '../utils/sessionColorUtils';
+import { getSessionIds, getDeviceIdFromEvent, getEventModelPayload } from '../utils/webhookEventUtils';
+import { 
+  isMeasurementEvent, 
+  getMeasurementData, 
+  findRecentChangePlayerData, 
+  findAllShotsForHole 
+} from '../utils/measurementDataUtils';
 
 interface Props {
   userPath: string;
@@ -23,69 +23,6 @@ interface Props {
   clearSignal?: number;
 }
 
-// Color palette for session/activity indicators
-const SESSION_COLORS = [
-  '#3b82f6', // blue
-  '#10b981', // green
-  '#f59e0b', // amber
-  '#ef4444', // red
-  '#8b5cf6', // violet
-  '#ec4899', // pink
-  '#06b6d4', // cyan
-  '#f97316', // orange
-  '#84cc16', // lime
-  '#6366f1', // indigo
-];
-
-const getSessionIds = (e: EventItem): { customerSessionId?: string; activitySessionId?: string } => {
-  try {
-    const raw = e.raw as any;
-    const data = raw?.data || raw;
-    
-    // Extract CustomerSession.Id
-    const customerSessionId = 
-      data?.CustomerSession?.Id || 
-      data?.common?.CustomerSession?.Id ||
-      raw?.common?.CustomerSession?.Id;
-    
-    // Extract ActivitySession.Id
-    const activitySessionId = 
-      data?.ActivitySession?.Id || 
-      data?.common?.ActivitySession?.Id ||
-      raw?.common?.ActivitySession?.Id;
-    
-    return { customerSessionId, activitySessionId };
-  } catch (err) {
-    return {};
-  }
-};
-
-const getColorForId = (id: string | undefined, colorMap: Map<string, string>): string | null => {
-  if (!id) return null;
-  
-  if (!colorMap.has(id)) {
-    // Assign a color based on the current size of the map
-    const colorIndex = colorMap.size % SESSION_COLORS.length;
-    colorMap.set(id, SESSION_COLORS[colorIndex]);
-  }
-  
-  return colorMap.get(id) || null;
-};
-
-const getDeviceIdFromEvent = (e: EventItem) => {
-  try {
-    const raw = e.raw as any;
-    const data = e.data as any;
-    // Check for Device.Id in various locations
-    if (raw && raw.data && raw.data.Device && raw.data.Device.Id) return raw.data.Device.Id;
-    if (raw && raw.Device && raw.Device.Id) return raw.Device.Id;
-    if (data && data.Device && data.Device.Id) return data.Device.Id;
-    return null;
-  } catch (err) {
-    return null;
-  }
-};
-
 const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null, selectedBayId = null, clearSignal }) => {
   const [allEvents, setAllEvents] = React.useState<EventItem[]>([]);
   const [connected, setConnected] = React.useState(false);
@@ -349,255 +286,6 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
 
   const selectedEvent = selectedIndex === null ? null : visibleEvents[selectedIndex];
 
-  const getEventModelPayload = (e: EventItem) => {
-    try {
-      // Common places where the EventModel might appear
-      const maybe = (e.data ?? e.raw) as any;
-      if (!maybe) return e.data ?? e.raw ?? {};
-      // If envelope where data contains EventModel
-      if (maybe.EventModel) return maybe.EventModel;
-      // Some payloads might have data: { EventModel: {...} }
-      if (maybe.data && maybe.data.EventModel) return maybe.data.EventModel;
-      // Some normalized records put typed payload under 'data' already
-      if (e.data && (e.data.EventModel || e.data.eventModel)) return e.data.EventModel ?? e.data.eventModel;
-      // Fallback to raw.data.EventModel
-      if (e.raw && e.raw.data && (e.raw.data.EventModel || e.raw.data.eventModel)) return e.raw.data.EventModel ?? e.raw.data.eventModel;
-      // Last resort: return the whole data/raw object
-      return maybe;
-    } catch (err) {
-      return e.data ?? e.raw ?? {};
-    }
-  };
-
-  // Check if event should show measurement tiles
-  const isMeasurementEvent = (e: EventItem) => {
-    return e.eventType === 'TPS.Live.OnStrokeCompletedEvent' || 
-           e.eventType === 'TPS.Simulator.ShotStarting' ||
-           e.eventType === 'TPS.Simulator.ShotFinish' ||
-           e.eventType.includes('StrokeCompleted') ||
-           e.eventType.includes('ShotStarting') ||
-           e.eventType.includes('ShotFinish');
-  };
-
-  // Extract measurement data from various event types
-  const getMeasurementData = (e: EventItem, eventsList: EventItem[]) => {
-    try {
-      const payload = getEventModelPayload(e);
-      
-      // TPS.Live.OnStrokeCompletedEvent - has full Measurement object
-      if (e.eventType === 'TPS.Live.OnStrokeCompletedEvent' || e.eventType.includes('StrokeCompleted')) {
-        if (payload && payload.Measurement) {
-          return {
-            measurement: payload.Measurement,
-            playerId: payload.PlayerId
-          };
-        }
-      }
-      
-      // TPS.Simulator.ShotStarting - has limited fields
-      if (e.eventType === 'TPS.Simulator.ShotStarting' || e.eventType.includes('ShotStarting')) {
-        // Build a measurement object from available fields
-        const measurement: any = {};
-        if (payload.BallSpeed !== undefined) measurement.BallSpeed = payload.BallSpeed;
-        if (payload.LaunchAngle !== undefined) measurement.LaunchAngle = payload.LaunchAngle;
-        if (payload.LaunchDirection !== undefined) measurement.LaunchDirection = payload.LaunchDirection;
-        
-        return {
-          measurement,
-          playerId: payload.PlayerId
-        };
-      }
-      
-      // TPS.Simulator.ShotFinish - merge with previous OnStrokeCompletedEvent
-      if (e.eventType === 'TPS.Simulator.ShotFinish' || e.eventType.includes('ShotFinish')) {
-        // Find the most recent OnStrokeCompletedEvent before this event
-        // NOTE: Newest events are at index 0, so we search FORWARD (increasing indices) to find older events
-        const currentIndex = eventsList.findIndex(evt => evt === e);
-        let strokeCompletedMeasurement: any = {};
-        
-        console.log('[ShotFinish] Current event index:', currentIndex);
-        console.log('[ShotFinish] Events list length:', eventsList.length);
-        
-        // Search forward from current event (toward older events at higher indices)
-        for (let i = currentIndex + 1; i < eventsList.length; i++) {
-          const prevEvent = eventsList[i];
-          console.log(`[ShotFinish] Checking event at index ${i}:`, prevEvent.eventType);
-          
-          if (prevEvent.eventType === 'TPS.Live.OnStrokeCompletedEvent' || 
-              prevEvent.eventType.includes('StrokeCompleted')) {
-            console.log('[ShotFinish] Found matching OnStrokeCompletedEvent at index:', i);
-            const prevPayload = getEventModelPayload(prevEvent);
-            console.log('[ShotFinish] Previous payload:', prevPayload);
-            
-            if (prevPayload && prevPayload.Measurement) {
-              console.log('[ShotFinish] Found measurement with keys:', Object.keys(prevPayload.Measurement));
-              strokeCompletedMeasurement = { ...prevPayload.Measurement };
-              break;
-            } else {
-              console.log('[ShotFinish] No Measurement found in payload');
-            }
-          }
-        }
-
-        console.log('[ShotFinish] Final measurement before adding Actuals:', Object.keys(strokeCompletedMeasurement));
-        
-        // Add the "Actual" fields from ShotFinish
-        if (payload.Carry !== undefined && payload.Carry !== null) {
-          strokeCompletedMeasurement.CarryActual = payload.Carry;
-        }
-        if (payload.Total !== undefined && payload.Total !== null) {
-          strokeCompletedMeasurement.TotalActual = payload.Total;
-        }
-        if (payload.Curve !== undefined && payload.Curve !== null) {
-          strokeCompletedMeasurement.CurveActual = payload.Curve;
-        }
-        if (payload.Side !== undefined && payload.Side !== null) {
-          strokeCompletedMeasurement.SideActual = payload.Side;
-        }
-        if (payload.SideTotal !== undefined && payload.SideTotal !== null) {
-          strokeCompletedMeasurement.SideTotalActual = payload.SideTotal;
-        }
-        
-        // Add position fields for trajectory visualization
-        if (payload.StartingPosition) {
-          strokeCompletedMeasurement.StartingPosition = payload.StartingPosition;
-        }
-        if (payload.FinishingPosition) {
-          strokeCompletedMeasurement.FinishingPosition = payload.FinishingPosition;
-        }
-        
-        console.log('[ShotFinish] Final merged measurement keys:', Object.keys(strokeCompletedMeasurement));
-        
-        return {
-          measurement: strokeCompletedMeasurement,
-          playerId: payload.PlayerId
-        };
-      }
-      
-      return null;
-    } catch (err) {
-      return null;
-    }
-  };
-
-  /**
-   * Find the most recent ChangePlayer event before the given event in the same ActivitySession.
-   * This allows us to display hole/shot info for all events between ChangePlayer events.
-   */
-  const findRecentChangePlayerData = (event: EventItem, eventsList: EventItem[]) => {
-    try {
-      const { activitySessionId } = getSessionIds(event);
-      if (!activitySessionId) return null;
-
-      // First check if this event itself has the data
-      const payload = getEventModelPayload(event);
-      if (payload?.ActiveHole !== undefined && payload?.ShotNumber !== undefined) {
-        return {
-          hole: payload.ActiveHole,
-          shot: payload.ShotNumber + 1, // Convert to 1-indexed
-          playerName: payload.Name
-        };
-      }
-
-      // Find current event index
-      const currentIdx = eventsList.findIndex(e => e.id === event.id);
-      if (currentIdx === -1) return null;
-
-      // Search forward (to older events) for the most recent ChangePlayer in the same session
-      for (let i = currentIdx + 1; i < eventsList.length; i++) {
-        const prevEvent = eventsList[i];
-        const { activitySessionId: prevSessionId } = getSessionIds(prevEvent);
-        
-        // Only look at events in the same ActivitySession
-        if (prevSessionId !== activitySessionId) continue;
-        
-        if (prevEvent.eventType === 'TPS.Simulator.ChangePlayer') {
-          const prevPayload = getEventModelPayload(prevEvent);
-          if (prevPayload?.ActiveHole !== undefined && prevPayload?.ShotNumber !== undefined) {
-            return {
-              hole: prevPayload.ActiveHole,
-              shot: prevPayload.ShotNumber + 1, // Convert to 1-indexed
-              playerName: prevPayload.Name
-            };
-          }
-        }
-      }
-
-      return null;
-    } catch (err) {
-      return null;
-    }
-  };
-
-  /**
-   * Find all ShotFinish events for the given hole in the same ActivitySession,
-   * up to and including the current event (for progressive display).
-   * Returns an array of shots with start/finish positions and shot numbers.
-   */
-  const findAllShotsForHole = (event: EventItem, eventsList: EventItem[], holeNumber: number) => {
-    try {
-      const { activitySessionId } = getSessionIds(event);
-      if (!activitySessionId) return [];
-
-      const shots: Array<{ startPosition: any; finishPosition: any; shotNumber?: number }> = [];
-      
-      // Find the index of the current event
-      const currentIdx = eventsList.findIndex(e => e.id === event.id);
-      if (currentIdx === -1) return [];
-      
-      // Search from the current event forward (toward older events at higher indices)
-      // This way we only show shots that happened at or before the current event
-      for (let i = currentIdx; i < eventsList.length; i++) {
-        const evt = eventsList[i];
-        const { activitySessionId: evtSessionId } = getSessionIds(evt);
-        
-        // Only look at events in the same ActivitySession
-        if (evtSessionId !== activitySessionId) continue;
-        
-        // Check if this is a ShotFinish event
-        if (evt.eventType === 'TPS.Simulator.ShotFinish') {
-          const payload = getEventModelPayload(evt);
-          
-          // Check if it's for the correct hole
-          const eventHole = payload?.ActiveHole;
-          if (eventHole === holeNumber) {
-            const startPos = payload?.StartingPosition;
-            const finishPos = payload?.FinishingPosition;
-            
-            // Only include if we have both positions
-            if (startPos && finishPos) {
-              // Try to find the shot number from nearby ChangePlayer events
-              const changePlayerData = findRecentChangePlayerData(evt, eventsList);
-              shots.push({
-                startPosition: startPos,
-                finishPosition: finishPos,
-                shotNumber: changePlayerData?.shot
-              });
-            }
-          }
-        }
-      }
-      
-      // Sort by shot number ascending (if available)
-      // Shots without numbers go to the end
-      shots.sort((a, b) => {
-        if (a.shotNumber !== undefined && b.shotNumber !== undefined) {
-          return a.shotNumber - b.shotNumber;
-        }
-        if (a.shotNumber !== undefined) return -1;
-        if (b.shotNumber !== undefined) return 1;
-        return 0;
-      });
-      
-      console.log(`[findAllShotsForHole] Found ${shots.length} shots for hole ${holeNumber}`);
-      
-      return shots;
-    } catch (err) {
-      console.error('[WebhookInspector] Error finding shots for hole:', err);
-      return [];
-    }
-  };
-
   return (
     <div className="webhook-inspector">
       <div ref={listContainerRef} className="webhook-inspector-list" tabIndex={0} onKeyDown={onListKeyDown}>
@@ -757,12 +445,13 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
             {/* Check if this is a measurement event - show tiles view instead of JSON */}
             {(() => {
               if (isMeasurementEvent(selectedEvent)) {
-                const measurementData = getMeasurementData(selectedEvent, allEvents);
-                if (measurementData && measurementData.measurement) {
+                const measurement = getMeasurementData(selectedEvent, allEvents);
+                if (measurement) {
+                  const payload = getEventModelPayload(selectedEvent);
                   return (
                     <MeasurementTilesView 
-                      measurement={measurementData.measurement}
-                      playerId={measurementData.playerId}
+                      measurement={measurement}
+                      playerId={payload?.PlayerId}
                     />
                   );
                 }

src/types/webhookTypes.ts

@@ -0,0 +1,21 @@
+export type EventItem = {
+  id?: string;
+  eventType: string;
+  timestamp: string;
+  data?: any;
+  raw?: any;
+  expanded?: boolean;
+};
+
+export interface WebhookInspectorProps {
+  userPath: string;
+  selectedDeviceId?: string | null;
+  selectedBayId?: string | null;
+  clearSignal?: number;
+}
+
+export interface SessionIds {
+  customerSessionId?: string;
+  activitySessionId?: string;
+  deviceId?: string;
+}