Activated flag strictNullInputTypes on Angular 21 by cdavalos7 · Pull Request #7151 · tensorflow/tensorboard

cdavalos7 · 2026-08-26T18:49:18Z

Motivation for features / changes

Enable strictNullInputTypes to strengthen Angular template type safety, catch nullable input bindings at build time, and prevent UI errors caused by loading or unavailable data. The change also modernizes synchronous NgRx selector bindings with Angular signals and reduces redundant reactive subscriptions.

Technical description of changes

Enabled strictNullInputTypes: true in tsconfig.json.
Migrated synchronous NgRx selector bindings from Observable + AsyncPipe to selectSignal or toSignal({requireSync: true}).
Kept AsyncPipe for genuinely asynchronous streams and widened their receiving inputs when null is a valid value.
Updated input types, template guards, and fallback values to handle null and undefined explicitly.
Updated tests and NgRx mocks to provide synchronous selector state where required.
Simplified three containers by replacing duplicate RxJS-to-Signal conversions with computed derived state.

…several templates. Replacing with signals

arcra

I think at least we should aim to remove the ! characters, possibly define default values.

…alues, and convert redundant selectors to computed signals

…ineLatest array form, camelCase naming Replaced deprecated Store.select(selector, props) with memoized selector factories across card renderer selectors

arcra · 2026-09-24T22:34:12Z

+    ></tb-truncated-path>
    <vis-linked-time-selection-warning
-      [isClipped]="linkedTimeSelection && linkedTimeSelection.clipped"
+      [isClipped]="(linkedTimeSelection && linkedTimeSelection.clipped) ?? false"


Can this be undefined? I think the boolean expression should evaluate to false if anything inside is undefined, so this looks a bit weird.

Fixed. The wrapped calls in _reparent_children pass keyword arguments.

@Jmats17 I think this landed on the wrong PR 🙂

Yes @arcra, linkedTimeSelection itself can be null/undefined. Simplified to !!linkedTimeSelection?.clipped in all three

arcra · 2026-09-24T22:35:18Z

      ></tb-truncated-path>
      <vis-linked-time-selection-warning
-        [isClipped]="linkedTimeSelection && linkedTimeSelection.clipped"
+        [isClipped]="(linkedTimeSelection && linkedTimeSelection.clipped) ?? false"


Same here and other places where the same expression exists.

arcra · 2026-09-24T22:38:33Z

+  [yScaleType]="yScaleType ?? ScaleType.LINEAR"
  [customXFormatter]="getCustomXFormatter()"
-  [tooltipTemplate]="tooltipTemplate"
+  [tooltipTemplate]="tooltipTemplate ?? undefined"


Is this ?? undefined doing anything?

Wouldn't the value still be undefined? This seems weird to me.

It was mapping null to undefined, but null never actually reaches it. Removed null from the input type and dropped the ?? undefined

arcra · 2026-09-24T22:39:47Z

 export class VisLinkedTimeSelectionWarningComponent {
-  @Input() isClipped?: boolean = false;
-  @Input() isClosestStepHighlighted?: boolean = false;
+  @Input() isClipped: boolean | undefined = false;


Are the union types with null | undefined necessary here if we set a default value?

Not anymore, with the template fix above isClipped can be plain boolean.

arcra · 2026-09-24T22:45:53Z


  @Input()
-  lastUpdated?: number;
+  lastUpdated: number | null | undefined;


Is it useful to declare it with null | undefined? Can it ever be null?

null is valid before the first successful load, but undefined isn’t needed here. I’ll remove it.

arcra · 2026-09-24T22:49:08Z

 <ng-template #filterModalTemplate>
  <tb-data-table-filter
-    [filter]="getCurrentColumnFilter()"
+    [filter]="getCurrentColumnFilter()!"


Is this ! character intended?

Yes, it's intentional. With strictNullInputTypes on, getCurrentColumnFilter() returns Filter | undefined but the filter input doesn't accept undefined.
Will replace it with with an @if (getCurrentColumnFilter(); as filter) guard so there's no assertion.

arcra · 2026-09-24T22:51:23Z

+) {
+  return Object.entries(defaultFlags)
+    .filter(([flagName]) => {
+      if (!showFlagsFilter) {


nit: this could just be

return !showFlagsFilter || flagName.toLowerCase().includes(showFlagsFilter);

Thank you, good suggestion.

Activated flag strictNullInputTypes, causing breaking async pipes is …

17c0630

…several templates. Replacing with signals

cdavalos7 changed the title ~~Activated flag strictNullInputTypes, causing breaking async pipes is …~~ Activated flag strictNullInputTypes on Angular 21 Aug 26, 2026

Removed redundancy, avoid subscribe twice to same observable

a9eb642

cdavalos7 marked this pull request as ready for review September 1, 2026 21:05

cdavalos7 requested a review from arcra September 1, 2026 22:07

arcra requested changes Sep 3, 2026

View reviewed changes

Address PR review comments: remove non-null assertions, add default v…

f59683a

…alues, and convert redundant selectors to computed signals

cdavalos7 requested a review from arcra September 17, 2026 21:06

cdavalos7 added 2 commits September 17, 2026 15:09

Lint format

64540c1

Fixed internal TypeScript checks: reflection-safe feature flags, comb…

aa1ea5b

…ineLatest array form, camelCase naming Replaced deprecated Store.select(selector, props) with memoized selector factories across card renderer selectors

cdavalos7 mentioned this pull request Sep 23, 2026

TB Angular upgrade to v22 #7160

Open

arcra approved these changes Sep 24, 2026

View reviewed changes

Updated with latest comments from code review

61ed676

cdavalos7 requested a review from samanoelton September 28, 2026 20:54

psamanoelton approved these changes Sep 28, 2026

View reviewed changes

Conversation

cdavalos7 commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for features / changes

Technical description of changes

Uh oh!

arcra left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdavalos7 Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdavalos7 Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cdavalos7 commented Aug 26, 2026 •

edited

Loading

cdavalos7 Sep 28, 2026 •

edited

Loading

cdavalos7 Sep 28, 2026 •

edited

Loading