Frontend Memory Management

// Feature state with pagination
export interface POState {
  entities: Record<string, PO>;
  ids: string[];
  currentPage: number;
  pageSize: number;         // Max 100
  totalCount: number;
  loading: boolean;
}

// Cleanup action dispatched on route leave
export const clearPOState = createAction('[PO] Clear State');

// Reducer handling cleanup
on(clearPOState, (state) => ({
  ...initialState,
  // Optionally retain some data like filters
  filters: state.filters
}));

// Route guard for cleanup
@Injectable()
export class POCleanupGuard implements CanDeactivate<POListComponent> {
  constructor(private store: Store) {}

  canDeactivate(): boolean {
    this.store.dispatch(clearPOState());
    return true;
  }
}

<!-- Virtual Scroll for PO List -->
<cdk-virtual-scroll-viewport
  itemSize="48"
  minBufferPx="400"
  maxBufferPx="800"
  class="po-list-viewport"
>
  <app-po-row
    *cdkVirtualFor="let po of pos$; trackBy: trackByPoId"
    [po]="po"
  ></app-po-row>
</cdk-virtual-scroll-viewport>

// Component class
@Component({ ... })
export class POListComponent {
  // Track by function prevents re-rendering unchanged items
  trackByPoId = (index: number, po: PO) => po.id;
}

// excel-parser.worker.ts
import * as XLSX from 'xlsx';

addEventListener('message', ({ data }) => {
  const workbook = XLSX.read(data.buffer, { type: 'array' });
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const jsonData = XLSX.utils.sheet_to_json(sheet);

  // Post processed data back to main thread
  postMessage({ success: true, data: jsonData });
});

// Component using worker
@Component({ ... })
export class ImportComponent {
  private worker: Worker;

  processExcel(file: File) {
    if (typeof Worker !== 'undefined') {
      this.worker = new Worker(
        new URL('./excel-parser.worker', import.meta.url)
      );

      this.worker.onmessage = ({ data }) => {
        if (data.success) {
          this.processImportedData(data.data);
        }
        this.worker.terminate(); // Clean up worker
      };

      file.arrayBuffer().then(buffer => {
        this.worker.postMessage({ buffer });
      });
    }
  }
}

@Injectable({ providedIn: 'root' })
export class SignalRService implements OnDestroy {
  private hubConnection: HubConnection | null = null;
  private subscriptions = new Map<string, () => void>();

  // Singleton connection - created once per session
  async connect(): Promise<void> {
    if (this.hubConnection) return; // Already connected

    this.hubConnection = new HubConnectionBuilder()
      .withUrl('/hubs/auction')
      .withAutomaticReconnect([0, 2000, 5000, 10000, 30000])
      .build();

    await this.hubConnection.start();
  }

  // Subscribe with automatic cleanup tracking
  subscribeToAuction(auctionId: string, callback: (bid: Bid) => void) {
    const methodName = `ReceiveBid_${auctionId}`;

    // Throttle updates to prevent UI thrashing
    const throttledCallback = throttle(callback, 100);
    this.hubConnection?.on(methodName, throttledCallback);

    // Track for cleanup
    this.subscriptions.set(methodName, () => {
      this.hubConnection?.off(methodName);
    });
  }

  // Cleanup specific subscription
  unsubscribeFromAuction(auctionId: string) {
    const methodName = `ReceiveBid_${auctionId}`;
    this.subscriptions.get(methodName)?.();
    this.subscriptions.delete(methodName);
  }

  // Full cleanup on logout
  ngOnDestroy() {
    this.subscriptions.forEach(cleanup => cleanup());
    this.hubConnection?.stop();
  }
}

@Injectable({ providedIn: 'root' })
export class MemoryMonitorService {
  private lastHeapSize = 0;

  startMonitoring(intervalMs = 30000) {
    if (!environment.production && performance.memory) {
      setInterval(() => {
        const { usedJSHeapSize, jsHeapSizeLimit } = performance.memory;
        const usagePercent = (usedJSHeapSize / jsHeapSizeLimit) * 100;
        const growth = usedJSHeapSize - this.lastHeapSize;

        // Warning thresholds
        if (usagePercent > 70) {
          console.warn('Memory usage exceeds 70%', {
            used: this.formatBytes(usedJSHeapSize),
            limit: this.formatBytes(jsHeapSizeLimit)
          });
        }

        // Leak detection: > 50MB growth per interval
        if (growth > 50 * 1024 * 1024) {
          console.error('Potential memory leak detected!', {
            growth: this.formatBytes(growth)
          });
        }

        this.lastHeapSize = usedJSHeapSize;
      }, intervalMs);
    }
  }

  private formatBytes(bytes: number): string {
    return (bytes / 1024 / 1024).toFixed(2) + ' MB';
  }
}

@Component({
  selector: 'app-spend-chart',
  template: '<canvas #chartCanvas></canvas>'
})
export class SpendChartComponent implements OnDestroy {
  @ViewChild('chartCanvas') chartCanvas!: ElementRef<HTMLCanvasElement>;
  private chart: Chart | null = null;

  createChart(data: ChartData) {
    // Destroy existing chart before creating new one
    this.chart?.destroy();

    this.chart = new Chart(this.chartCanvas.nativeElement, {
      type: 'doughnut',
      data: data,
      options: { ... }
    });
  }

  ngOnDestroy() {
    // CRITICAL: Always destroy chart on component destroy
    this.chart?.destroy();
    this.chart = null;
  }
}