Updates webhook filtering to match device IDs

Switches from using bay ID to device ID for more accurate event filtering.
Aligns the real-time data stream with device-centric architecture and ensures events only appear for the currently selected device.

Author: mbertelsen

DEVICE_ID_FILTERING.md

@@ -0,0 +1,135 @@
+# Device ID Filtering Implementation
+
+## Summary
+Updated webhook event filtering to use Device ID from events instead of Bay ID. This allows filtering webhook events based on the device that generated them, matching the `deviceId` field from the GraphQL bay query.
+
+## Changes Made
+
+### 1. GraphQL Query Update
+**File: `src/graphql/queries.ts`**
+- Updated `BAYS_IN_LOCATION_QUERY` to include `deviceId` field for SimulatorBay type
+- Query now returns: `id`, `dbId`, `name`, and `deviceId`
+
+### 2. Bay Interface Update
+**File: `src/App.tsx`**
+- Added optional `deviceId?: string` field to the `Bay` interface
+- This allows the bay object to carry the device ID throughout the application
+
+### 3. Event Filtering Logic
+**File: `src/components/WebhookInspector.tsx`**
+
+#### Replaced Function:
+- **Old:** `getBayIdFromEvent(e: EventItem)` - extracted Bay.Id from events
+- **New:** `getDeviceIdFromEvent(e: EventItem)` - extracts Device.Id from events
+
+#### New Function Implementation:
+```typescript
+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;
+  }
+};
+```
+
+#### Props Interface Update:
+- **Old:** `selectedBayDbId?: number | null`
+- **New:** `selectedDeviceId?: string | null`
+
+#### Filtering Logic:
+- Updated SSE message filtering to match Device ID from events with selected bay's deviceId
+- Updated `filtered` useMemo to use Device ID comparison
+- Updated "Show All Events" button visibility condition
+
+### 4. WebhookView Component
+**File: `src/components/WebhookView.tsx`**
+- Updated `WebhookViewProps` interface: `selectedDeviceId?: string | null`
+- Updated component to receive and pass `selectedDeviceId` to WebhookInspector
+- Changed prop from `selectedBayDbId` to `selectedDeviceId`
+
+### 5. Routes Component
+**File: `src/app/Routes.tsx`**
+- Updated WebhookView instantiation:
+  - **Old:** `<WebhookView selectedBayDbId={selectedBayObj?.dbId ?? null} />`
+  - **New:** `<WebhookView selectedDeviceId={selectedBayObj?.deviceId ?? null} />`
+
+## Event Data Structure
+
+### Device ID Location in Events
+According to `server/src/events.ts`, the Device ID is found in the common event data:
+
+```typescript
+export interface CommonEventData {
+  Facility?: FacilityRef;
+  Location?: LocationRef;
+  Bay?: BayRef;
+  Client?: ClientInfo;
+  Device?: DeviceRef;  // <-- Device.Id is here
+  Radar?: RadarInfo;
+  User?: UserRef;
+  CustomerSession?: SessionRef;
+  ActivitySession?: SessionRef;
+}
+
+export interface DeviceRef { 
+  Id?: string;  // <-- The Device ID
+}
+```
+
+### Example Event Structure
+From `server/examples/events/TPS.SessionInfo.5.json`:
+```json
+{
+  "data": {
+    "Device": {
+      "Id": "1d1d211b-981e-4ff4-907c-fc22f776358c"
+    },
+    "Bay": {
+      "Id": "e9acfb8b-6ddd-45ac-9d5b-f23e51b1fe2d",
+      "Name": "JFE Office"
+    }
+  }
+}
+```
+
+## How It Works
+
+1. **Bay Selection:** User selects a bay from the dropdown in the UI
+2. **Device ID Retrieved:** The selected bay object includes its `deviceId` from the GraphQL query
+3. **Event Filtering:** When webhook events arrive via SSE:
+   - Extract `Device.Id` from the event's common data
+   - Compare it with the selected bay's `deviceId`
+   - Only show events where Device IDs match
+4. **Real-time Updates:** Events are filtered in real-time as they arrive via Server-Sent Events
+
+## Benefits
+
+1. **Accurate Filtering:** Matches events to bays based on the actual device that generated them
+2. **Direct Mapping:** Uses the device identifier that's consistently present in both:
+   - Event data (Device.Id)
+   - Bay configuration (deviceId from GraphQL)
+3. **Future-Proof:** Works with the device-centric architecture of the TrackMan system
+
+## Testing
+
+To verify the changes work correctly:
+
+1. Select a bay from the dropdown
+2. Generate events from that bay's device
+3. Verify that only events from that device appear in the webhook inspector
+4. Switch to a different bay and verify filtering updates correctly
+5. Use "Show All Events" toggle to see events from all devices
+
+## Notes
+
+- The `selectedBayId` prop is still supported as a fallback for backward compatibility
+- Device IDs are GUIDs/UUIDs in the format: `1d1d211b-981e-4ff4-907c-fc22f776358c`
+- Bay IDs are also GUIDs but represent the bay itself, not the device
+- This change aligns with the fact that devices can be associated with different bays over time

src/App.tsx

@@ -26,6 +26,7 @@ interface Bay {
   id: string;
   dbId: number;
   name: string;
+  deviceId?: string;
 }
 
 interface Location {

src/app/Routes.tsx

@@ -129,7 +129,7 @@ const Routes: React.FC<RoutesProps> = ({
   if (activeTab === 'webhook') {
     return (
       <div className="documentation-flex">
-        <WebhookView selectedBayDbId={selectedBayObj?.dbId ?? null} />
+        <WebhookView selectedDeviceId={selectedBayObj?.deviceId ?? null} />
       </div>
     );
   }

src/components/WebhookInspector.tsx

@@ -13,7 +13,7 @@ type EventItem = {
 
 interface Props {
   userPath: string;
-  selectedBayDbId?: number | null;
+  selectedDeviceId?: string | null;
   selectedBayId?: string | null;
   clearSignal?: number;
 }
@@ -67,25 +67,21 @@ const getColorForId = (id: string | undefined, colorMap: Map<string, string>): s
   return colorMap.get(id) || null;
 };
 
-const getBayIdFromEvent = (e: EventItem) => {
+const getDeviceIdFromEvent = (e: EventItem) => {
   try {
     const raw = e.raw as any;
     const data = e.data as any;
-    if (raw && raw.common && raw.common.Bay && (raw.common.Bay.Id || raw.common.Bay.id)) return raw.common.Bay.Id ?? raw.common.Bay.id;
-    if (raw && raw.common && raw.common.BayId) return raw.common.BayId;
-    if (raw && raw.data && raw.data.Bay && (raw.data.Bay.Id || raw.data.Bay.id)) return raw.data.Bay.Id ?? raw.data.Bay.id;
-    if (raw && raw.data && (raw.data.BayId || raw.data.bayId)) return raw.data.BayId ?? raw.data.bayId;
-    if (raw && raw.Bay && (raw.Bay.Id || raw.Bay.id)) return raw.Bay.Id ?? raw.Bay.id;
-    if (data && data.Bay && (data.Bay.Id || data.Bay.id)) return data.Bay.Id ?? data.Bay.id;
-    if (data && (data.BayId || data.bayId)) return data.BayId ?? data.bayId;
-    if (data && data.common && data.common.Bay && (data.common.Bay.Id || data.common.Bay.id)) return data.common.Bay.Id ?? data.common.Bay.id;
+    // 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, selectedBayDbId = null, selectedBayId = null, clearSignal }) => {
+const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null, selectedBayId = null, clearSignal }) => {
   const [allEvents, setAllEvents] = React.useState<EventItem[]>([]);
   const [connected, setConnected] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);
@@ -159,10 +155,12 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedBayDbId = null, s
             }
             return [newItem, ...prev];
           });
-          // If the new item matches the current bay filter (or there is no filter) select it and focus the list
+          // If the new item matches the current device/bay filter (or there is no filter) select it and focus the list
           try {
-            const bayId = getBayIdFromEvent(newItem);
-            const matches = (!selectedBayDbId && !selectedBayId) || (bayId && (String(bayId) === String(selectedBayId) || String(bayId) === String(selectedBayDbId)));
+            const deviceId = getDeviceIdFromEvent(newItem);
+            const matches = (!selectedDeviceId && !selectedBayId) || 
+                          (deviceId && String(deviceId) === String(selectedDeviceId)) ||
+                          (selectedBayId && String(deviceId) === String(selectedBayId));
               if (matches) {
                 setSelectedIndex(0);
                 // focus the list container so keyboard navigation continues from the newly added item
@@ -187,21 +185,21 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedBayDbId = null, s
   }, [userPath]);
 
   const filtered = React.useMemo(() => {
-    // If "Show All Events" is enabled, bypass Bay filtering
+    // If "Show All Events" is enabled, bypass Device/Bay filtering
     if (showAllEvents) return allEvents;
 
-    // If no Bay is selected, show all events
-    if (!selectedBayDbId && !selectedBayId) return allEvents;
+    // If no Device/Bay is selected, show all events
+    if (!selectedDeviceId && !selectedBayId) return allEvents;
 
-    // Filter by selected Bay
+    // Filter by selected Device ID (from bay's deviceId field)
     return allEvents.filter(e => {
-      const bayId = getBayIdFromEvent(e);
-      if (!bayId) return false;
-      if (selectedBayId && String(bayId) === String(selectedBayId)) return true;
-      if (selectedBayDbId && String(bayId) === String(selectedBayDbId)) return true;
+      const deviceId = getDeviceIdFromEvent(e);
+      if (!deviceId) return false;
+      if (selectedDeviceId && String(deviceId) === String(selectedDeviceId)) return true;
+      if (selectedBayId && String(deviceId) === String(selectedBayId)) return true;
       return false;
     });
-  }, [allEvents, selectedBayDbId, selectedBayId, showAllEvents]);
+  }, [allEvents, selectedDeviceId, selectedBayId, showAllEvents]);
 
   // ensure selected item is visible
   React.useEffect(() => {
@@ -281,7 +279,7 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedBayDbId = null, s
         <div className="webhook-events-header">
           <strong>Events</strong>
           <span className={`webhook-events-status ${connected ? 'live' : ''}`}>{connected ? 'live' : 'disconnected'}</span>
-          {(selectedBayDbId || selectedBayId) && (
+          {(selectedDeviceId || selectedBayId) && (
             <label style={{ marginLeft: 'auto', fontSize: '0.85em', display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer' }}>
               <input 
                 type="checkbox" 

src/components/WebhookView.tsx

@@ -6,10 +6,10 @@ import './WebhookView.css';
 import './WebhookView.css';
 
 interface WebhookViewProps {
-  selectedBayDbId?: number | null;
+  selectedDeviceId?: string | null;
 }
 
-export const WebhookView: React.FC<WebhookViewProps> = ({ selectedBayDbId = null }) => {
+export const WebhookView: React.FC<WebhookViewProps> = ({ selectedDeviceId = null }) => {
   // selectedBayId will be passed from App via prop injection in App.tsx
   const selectedBayIdProp = (window as any)?._selectedBayIdForWebhook || null;
   const [result] = useQuery({
@@ -115,7 +115,7 @@ export const WebhookView: React.FC<WebhookViewProps> = ({ selectedBayDbId = null
 
       <div className="webhook-inspector-wrap">
         {url && (
-          <WebhookInspector userPath={(localWebhook || webhookPath) as string} selectedBayDbId={selectedBayDbId} selectedBayId={selectedBayIdProp} clearSignal={clearSignal} />
+          <WebhookInspector userPath={(localWebhook || webhookPath) as string} selectedDeviceId={selectedDeviceId} selectedBayId={selectedBayIdProp} clearSignal={clearSignal} />
         )}
       </div>
     </div>

src/graphql/queries.ts

@@ -56,6 +56,9 @@ export const BAYS_IN_LOCATION_QUERY = gql`
           id
           dbId
           name
+          ... on SimulatorBay {
+            deviceId
+          }
         }
       }
     }