Fix dialog rendering in 8 components after Angular 20→21 migration

[Copilot]

After the Angular 20→21 migration, async backend calls in ngOnInit resolve outside Angular's zone, silently breaking change detection and leaving dialogs blank on first open.

Fix pattern

// Inject ChangeDetectorRef and call detectChanges() after async work completes
constructor(
  private electronService: ElectronService,
  private cdRef: ChangeDetectorRef
) {}

ngOnInit() {
  (async () => {
    this.data = await this.electronService.minsky.getData();
    this.cdRef.detectChanges(); // ← trigger CD manually
  })();
}

Components fixed

Missing ChangeDetectorRef entirely — added injection + detectChanges() call:

• summary.component.ts — end of async ngOnInit
• new-pub-tab.component.ts — after async setValue in ngOnInit
• pen-styles.component.ts — end of async IIFE in ngOnInit
• dimensions.component.ts — end of async IIFE in ngOnInit (inside isElectron guard)
• edit-user-function.component.ts — end of updateFormValues()
• cli-input.component.ts — end of async ngOnInit

Already had ChangeDetectorRef but never called detectChanges() — added call only:

• connect-database.component.ts
• ravel-select-horizontal-dim.component.ts

Original prompt

Problem

After the Angular 20→21 migration in the develop branch, several dialogs are not rendering properly because async backend calls in ngOnInit resolve outside Angular's zone, preventing change detection from updating the UI.

Two examples have already been fixed:

• About box (commit 0296c3a)
• Pick-slices dialog (commit aa6b5f5)

The fix pattern is:

1. Import ChangeDetectorRef from @angular/core
2. Inject it in the constructor: private cdRef: ChangeDetectorRef
3. Call this.cdRef.detectChanges() after async backend calls complete in ngOnInit

Components to Fix

Apply the same fix to the following components that have ngOnInit with async backend calls but don't properly trigger change detection:

Components missing ChangeDetectorRef entirely:

1. gui-js/libs/ui-components/src/lib/summary/summary.component.ts

   • Makes multiple async calls to populate variables data
   • Add ChangeDetectorRef injection and call detectChanges() at the end of ngOnInit

2. gui-js/libs/ui-components/src/lib/new-pub-tab/new-pub-tab.component.ts

   • Makes async call to pubTab.name()
   • Add ChangeDetectorRef injection and call detectChanges() at the end of the async block in ngOnInit

3. gui-js/libs/ui-components/src/lib/pen-styles/pen-styles.component.ts

   • Makes async calls to load palette and penLabels
   • Add ChangeDetectorRef injection and call detectChanges() at the end of the async block in ngOnInit

4. gui-js/libs/menu/src/lib/edit/dimensions/dimensions.component.ts

   • Makes async calls to load dimensions
   • Add ChangeDetectorRef injection and call detectChanges() at the end of the async block in ngOnInit

5. gui-js/libs/ui-components/src/lib/edit-user-function/edit-user-function.component.ts

   • Makes async calls to populate form values
   • Add ChangeDetectorRef injection and call detectChanges() at the end of updateFormValues()

6. gui-js/libs/ui-components/src/lib/cli-input/cli-input.component.ts

   • Makes async calls to load commands
   • Add ChangeDetectorRef injection and call detectChanges() at the end of ngOnInit

Components with ChangeDetectorRef but not calling detectChanges():

7. gui-js/libs/ui-components/src/lib/connect-database/connect-database.component.ts

   • Already has ChangeDetectorRef injected
   • Add this.cdRef.detectChanges() call at the end of ngOnInit

8. gui-js/libs/ui-components/src/lib/ravel-select-horizontal-dim/ravel-select-horizontal-dim.component.ts

   • Already has ChangeDetectorRef injected
   • Add this.cdRef.detectChanges() call at the end of ngOnInit

Example Fix Pattern

Based on the existing fixes in commits 0296c3a and aa6b5f5:

// Before:
import { Component, OnInit } from '@angular/core';

export class SomeComponent implements OnInit {
  constructor(private electronService: ElectronService) {}
  
  ngOnInit(): void {
    (async () => {
      this.someData = await this.electronService.minsky.getData();
    })();
  }
}

// After:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class SomeComponent implements OnInit {
  constructor(
    private electronService: ElectronService,
    private cdRef: ChangeDetectorRef
  ) {}
  
  ngOnInit(): void {
    (async () => {
      this.someData = await this.electronService.minsky.getData();
      // Ensure UI updates even if backend calls resolve outside Angular's zone.
      this.cdRef.detectChanges();
    })();
  }
}

Testing

After applying the fixes, test each dialog to ensure:

• Data loads and displays correctly
• No console errors related to change detection
• Dialogs render properly on first open

Additional Notes

• The search was limited to 10 results, so there may be additional dialog components in gui-js that need the same fix
• Consider auditing all components under gui-js that implement OnInit and make async calls
• This fix should be applied consistently across all dialog components to prevent similar rendering issues

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: In the develop branch, which features Angular 20->21 migration, some of the dialogs are not rendering. Two examples have been found - the about box, and the pick-slices dialog. The solution is to inject the ChangeDetectorRef object as seen in commits aa6b5f5 and 0296c3a.

Please audit the code base under gui-js for any other dialogs that might have the same problem.

Assistant: I'll help you audit the codebase for other dialogs that might have the same rendering issue after the Angular 20->21 migration. Let me first examine the commits you mentioned to understand the fix pattern, then search for similar dialogs that may need the same solution.

Assistant: Now I understand the pattern. Both com...

This pull request was created from Copilot chat.

---

This change is