dcrouter/readme.plan2.md

Network Traffic Graph Fix Plan

Command: pnpm run reread

Issue Summary

The network traffic graph in ops-view-network.ts is not displaying data due to three critical issues:

1. Timestamp format mismatch - chart expects ISO strings but receives numeric timestamps
2. Empty data when no active connections exist
3. Potential bucket alignment issues

Root Causes

1. Timestamp Format Issue

• Current: x: time (numeric timestamp like 1703123456789)
• Expected: x: new Date(time).toISOString() (ISO string like "2023-12-20T12:34:56.789Z")
• Impact: ApexCharts cannot parse the x-axis values, resulting in no visible data

2. Empty Data Handling

• When no active connections exist, networkRequests array is empty
• Empty array leads to no buckets being created
• Chart shows flat line at 0

3. Data Bucketing Logic

• Current logic creates buckets but uses numeric timestamps as Map keys
• This works for calculation but fails when looking up values for chart display

Implementation Plan

Step 1: Fix Timestamp Format in updateTrafficData()

// In ops-view-network.ts, line 548-554
this.trafficData = Array.from({ length: 60 }, (_, i) => {
  const time = now - (i * bucketSize);
  return {
    x: new Date(time).toISOString(), // Convert to ISO string
    y: buckets.get(time) || 0,
  };
}).reverse();

Step 2: Add Data Generation for Empty States

Create synthetic data points when no connections exist to show the chart grid:

private updateTrafficData() {
  // ... existing code ...
  
  // If no data, create zero-value points to show grid
  if (this.networkRequests.length === 0) {
    this.trafficData = Array.from({ length: 60 }, (_, i) => {
      const time = now - (i * bucketSize);
      return {
        x: new Date(time).toISOString(),
        y: 0,
      };
    }).reverse();
    return;
  }
  
  // ... rest of existing bucketing logic ...
}

Step 3: Improve Bucket Alignment (Optional Enhancement)

Align buckets to start of time periods for cleaner data:

// Calculate bucket start time
const bucketStartTime = Math.floor(req.timestamp / bucketSize) * bucketSize;
buckets.set(bucketStartTime, (buckets.get(bucketStartTime) || 0) + 1);

Step 4: Add Debug Logging (Temporary)

Add console logs to verify data flow:

console.log('Traffic data generated:', this.trafficData);
console.log('Network requests count:', this.networkRequests.length);

Step 5: Update Chart Configuration

Ensure chart component has proper configuration:

<!-- Already correct in the template -->
<dees-chart-area
  .label=${'Network Traffic'}
  .series=${[{
    name: 'Requests/min',
    data: this.trafficData,
  }]}
></dees-chart-area>

Testing Plan

1. Test with no connections: Verify chart shows grid with zero line
2. Test with active connections: Verify chart shows actual traffic data
3. Test time range changes: Verify chart updates when selecting different time ranges
4. Test auto-refresh: Verify chart updates every second with new data

Expected Outcome

• Network traffic chart displays properly with time on x-axis
• Chart shows grid and zero line even when no data exists
• Real-time updates work correctly
• Time ranges (1m, 5m, 15m, 1h, 24h) all function properly

Implementation Order

1. Fix timestamp format (critical fix)
2. Add empty state handling
3. Test basic functionality
4. Add debug logging if issues persist
5. Implement bucket alignment improvement if needed

Success Criteria

• Chart displays time labels on x-axis
• Chart shows data points when connections exist
• Chart shows zero line when no connections exist
• Chart updates in real-time as new connections arrive
• All time range selections work correctly

Estimated Effort

• Implementation: 30 minutes
• Testing: 15 minutes
• Total: 45 minutes