Activated flag strictNullInputTypes on Angular 21

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container.ts

@@ -18,7 +18,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {createSelector, select, Store} from '@ngrx/store';
+import {createSelector, Store} from '@ngrx/store';
 import {debuggerLoaded, debuggerUnloaded} from './actions';
 import {getActiveRunId, getDebuggerRunListing} from './store';
 import {State} from './store/debugger_types';
@@ -29,9 +29,9 @@ import {State} from './store/debugger_types';
   selector: 'tf-debugger-v2',
   template: `
     <debugger-component
-      [runs]="runs$ | async"
-      [runIds]="runsIds$ | async"
-      [activeRunId]="activeRunId$ | async"
+      [runs]="runs()"
+      [runIds]="runsIds()"
+      [activeRunId]="activeRunId()"
     ></debugger-component>
   `,
   styles: [
@@ -44,22 +44,20 @@ import {State} from './store/debugger_types';
   ],
 })
 export class DebuggerContainer implements OnInit, OnDestroy {
-  readonly runs$;
+  readonly runs;
 
-  readonly runsIds$;
+  readonly runsIds;
 
-  readonly activeRunId$;
+  readonly activeRunId;
 
   constructor(private readonly store: Store<State>) {
-    this.runs$ = this.store.pipe(select(getDebuggerRunListing));
-    this.runsIds$ = this.store.pipe(
-      select(
-        createSelector(getDebuggerRunListing, (runs): string[] =>
-          Object.keys(runs)
-        )
+    this.runs = this.store.selectSignal(getDebuggerRunListing);
+    this.runsIds = this.store.selectSignal(
+      createSelector(getDebuggerRunListing, (runs): string[] =>
+        Object.keys(runs)
       )
     );
-    this.activeRunId$ = this.store.pipe(select(getActiveRunId));
+    this.activeRunId = this.store.selectSignal(getActiveRunId);
   }
 
   ngOnInit(): void {

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container.ts

@@ -12,8 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {createSelector, select, Store} from '@ngrx/store';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
+import {Store} from '@ngrx/store';
 import {alertTypeFocusToggled} from '../../actions';
 import {
   getAlertsBreakdown,
@@ -49,41 +54,37 @@ const ALERT_TYPE_TO_DISPLAY_NAME_AND_SYMBOL: {
   selector: 'tf-debugger-v2-alerts',
   template: `
     <alerts-component
-      [numAlerts]="numAlerts$ | async"
-      [alertsBreakdown]="alertsBreakdown$ | async"
-      [focusType]="focusType$ | async"
+      [numAlerts]="numAlerts()"
+      [alertsBreakdown]="alertsBreakdown()"
+      [focusType]="focusType()"
       (onToggleFocusType)="onToggleFocusType($event)"
     >
     </alerts-component>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertsContainer {
-  readonly numAlerts$;
+  private readonly store: Store<State> = inject(Store);
 
-  readonly alertsBreakdown$;
+  readonly numAlerts = this.store.selectSignal(getNumAlerts);
 
-  readonly focusType$;
+  private readonly rawAlertsBreakdown =
+    this.store.selectSignal(getAlertsBreakdown);
 
-  constructor(private readonly store: Store<State>) {
-    this.numAlerts$ = this.store.pipe(select(getNumAlerts));
-    this.alertsBreakdown$ = this.store.pipe(
-      select(
-        createSelector(getAlertsBreakdown, (alertsBreakdown) => {
-          const alertTypes = Object.keys(alertsBreakdown);
-          alertTypes.sort();
-          return alertTypes.map((alertType): AlertTypeDisplay => {
-            return {
-              type: alertType as AlertType,
-              ...ALERT_TYPE_TO_DISPLAY_NAME_AND_SYMBOL[alertType],
-              count: alertsBreakdown[alertType],
-            };
-          });
-        })
-      )
-    );
-    this.focusType$ = this.store.pipe(select(getAlertsFocusType));
-  }
+  readonly alertsBreakdown = computed(() => {
+    const alertsBreakdown = this.rawAlertsBreakdown();
+    const alertTypes = Object.keys(alertsBreakdown);
+    alertTypes.sort();
+    return alertTypes.map((alertType): AlertTypeDisplay => {
+      return {
+        type: alertType as AlertType,
+        ...ALERT_TYPE_TO_DISPLAY_NAME_AND_SYMBOL[alertType],
+        count: alertsBreakdown[alertType],
+      };
+    });
+  });
+
+  readonly focusType = this.store.selectSignal(getAlertsFocusType);
 
   onToggleFocusType(alertType: AlertType) {
     this.store.dispatch(alertTypeFocusToggled({alertType}));

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts

@@ -28,7 +28,7 @@ export class ExecutionDataComponent {
   focusedExecutionIndex!: number;
 
   @Input()
-  focusedExecutionData!: Execution;
+  focusedExecutionData!: Execution | null;
 
   @Input()
   tensorDebugMode: TensorDebugMode = TensorDebugMode.UNSPECIFIED;

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_container.ts

@@ -12,10 +12,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {createSelector, select, Store} from '@ngrx/store';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  Input,
+} from '@angular/core';
+import {Store} from '@ngrx/store';
 import {getFocusedExecutionData} from '../../store';
-import {Execution, State, TensorDebugMode} from '../../store/debugger_types';
+import {State, TensorDebugMode} from '../../store/debugger_types';
 import {DTYPE_ENUM_TO_NAME} from '../../tf_dtypes';
 
 const UNKNOWN_DTYPE_NAME = 'Unknown dtype';
@@ -27,116 +32,94 @@ const UNKNOWN_DTYPE_NAME = 'Unknown dtype';
   template: `
     <execution-data-component
       [focusedExecutionIndex]="focusedExecutionIndex"
-      [focusedExecutionData]="focusedExecutionData$ | async"
-      [tensorDebugMode]="tensorDebugMode$ | async"
-      [hasDebugTensorValues]="hasDebugTensorValues$ | async"
-      [debugTensorValues]="debugTensorValues$ | async"
-      [debugTensorDtypes]="debugTensorDtypes$ | async"
+      [focusedExecutionData]="focusedExecutionData()"
+      [tensorDebugMode]="tensorDebugMode()"
+      [hasDebugTensorValues]="hasDebugTensorValues()"
+      [debugTensorValues]="debugTensorValues()"
+      [debugTensorDtypes]="debugTensorDtypes()"
     ></execution-data-component>
   `,
 })
 export class ExecutionDataContainer {
   @Input()
   focusedExecutionIndex!: number;
 
-  readonly focusedExecutionData$;
+  readonly focusedExecutionData;
 
-  readonly tensorDebugMode$;
+  readonly tensorDebugMode;
 
-  readonly hasDebugTensorValues$;
+  readonly hasDebugTensorValues;
 
-  readonly debugTensorValues$;
+  readonly debugTensorValues;
 
-  readonly debugTensorDtypes$;
+  readonly debugTensorDtypes;
 
   constructor(private readonly store: Store<State>) {
-    this.focusedExecutionData$ = this.store.pipe(
-      select(getFocusedExecutionData)
+    this.focusedExecutionData = this.store.selectSignal(
+      getFocusedExecutionData
     );
-    this.tensorDebugMode$ = this.store.pipe(
-      select(
-        createSelector(
-          getFocusedExecutionData,
-          (execution: Execution | null) => {
-            if (execution === null) {
-              return TensorDebugMode.UNSPECIFIED;
-            } else {
-              return execution.tensor_debug_mode;
-            }
-          }
-        )
-      )
-    );
-    this.hasDebugTensorValues$ = this.store.pipe(
-      select(
-        createSelector(
-          getFocusedExecutionData,
-          (execution: Execution | null) => {
-            if (execution === null || execution.debug_tensor_values === null) {
-              return false;
-            } else {
-              for (const singleDebugTensorValues of execution.debug_tensor_values) {
-                if (
-                  singleDebugTensorValues !== null &&
-                  singleDebugTensorValues.length > 0
-                ) {
-                  return true;
-                }
-              }
-              return false;
-            }
-          }
-        )
-      )
-    );
-    this.debugTensorValues$ = this.store.pipe(
-      select(
-        createSelector(
-          getFocusedExecutionData,
-          (execution: Execution | null) => {
-            if (execution === null) {
-              return null;
-            } else {
-              return execution.debug_tensor_values;
-            }
-          }
-        )
-      )
-    );
-    this.debugTensorDtypes$ = this.store.pipe(
-      select(
-        createSelector(
-          getFocusedExecutionData,
-          (execution: Execution | null): string[] | null => {
-            if (execution === null || execution.debug_tensor_values === null) {
-              return null;
-            }
-            if (
-              execution.tensor_debug_mode !== TensorDebugMode.FULL_HEALTH &&
-              execution.tensor_debug_mode !== TensorDebugMode.SHAPE
-            ) {
-              // TODO(cais): Add logic for other TensorDebugModes with dtype info.
-              return null;
-            }
-            const dtypes: string[] = [];
-            for (const tensorValue of execution.debug_tensor_values) {
-              if (tensorValue === null) {
-                dtypes.push(UNKNOWN_DTYPE_NAME);
-              } else {
-                const dtypeEnum = String(
-                  execution.tensor_debug_mode === TensorDebugMode.FULL_HEALTH
-                    ? tensorValue[2] // tensor_debug_mode: FULL_HEALTH
-                    : tensorValue[1] // tensor_debug_mode: SHAPE
-                );
-                dtypes.push(
-                  DTYPE_ENUM_TO_NAME[dtypeEnum] || UNKNOWN_DTYPE_NAME
-                );
-              }
-            }
-            return dtypes;
+
+    this.tensorDebugMode = computed(() => {
+      const execution = this.focusedExecutionData();
+      if (execution === null) {
+        return TensorDebugMode.UNSPECIFIED;
+      } else {
+        return execution.tensor_debug_mode;
+      }
+    });
+
+    this.hasDebugTensorValues = computed(() => {
+      const execution = this.focusedExecutionData();
+      if (execution === null || execution.debug_tensor_values === null) {
+        return false;
+      } else {
+        for (const singleDebugTensorValues of execution.debug_tensor_values) {
+          if (
+            singleDebugTensorValues !== null &&
+            singleDebugTensorValues.length > 0
+          ) {
+            return true;
           }
-        )
-      )
-    );
+        }
+        return false;
+      }
+    });
+
+    this.debugTensorValues = computed(() => {
+      const execution = this.focusedExecutionData();
+      if (execution === null) {
+        return null;
+      } else {
+        return execution.debug_tensor_values;
+      }
+    });
+
+    this.debugTensorDtypes = computed((): string[] | null => {
+      const execution = this.focusedExecutionData();
+      if (execution === null || execution.debug_tensor_values === null) {
+        return null;
+      }
+      if (
+        execution.tensor_debug_mode !== TensorDebugMode.FULL_HEALTH &&
+        execution.tensor_debug_mode !== TensorDebugMode.SHAPE
+      ) {
+        // TODO(cais): Add logic for other TensorDebugModes with dtype info.
+        return null;
+      }
+      const dtypes: string[] = [];
+      for (const tensorValue of execution.debug_tensor_values) {
+        if (tensorValue === null) {
+          dtypes.push(UNKNOWN_DTYPE_NAME);
+        } else {
+          const dtypeEnum = String(
+            execution.tensor_debug_mode === TensorDebugMode.FULL_HEALTH
+              ? tensorValue[2] // tensor_debug_mode: FULL_HEALTH
+              : tensorValue[1] // tensor_debug_mode: SHAPE
+          );
+          dtypes.push(DTYPE_ENUM_TO_NAME[dtypeEnum] || UNKNOWN_DTYPE_NAME);
+        }
+      }
+      return dtypes;
+    });
   }
 }

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.ng.html

@@ -20,10 +20,13 @@
 
   <div class="graph-structure-container">
     <div *ngIf="opInfo !== undefined && opInfo !== null; else noOpFocused">
-      <div *ngIf="inputOps.length > 0; else noInputs" class="inputs-container">
+      <div
+        *ngIf="(inputOps ?? []).length > 0; else noInputs"
+        class="inputs-container"
+      >
         <div>
           <div
-            *ngFor="let inputOpInfo of inputOps; let slot = index"
+            *ngFor="let inputOpInfo of inputOps ?? []; let slot = index"
             class="input-op-section"
           >
             <div class="input-slot-header">Input slot {{slot}}:</div>
@@ -63,7 +66,7 @@
       >
         <div>
           <div
-            *ngFor="let slotConsumers of consumerOps; let slot = index"
+            *ngFor="let slotConsumers of consumerOps ?? []; let slot = index"
             class="slot-consumers-container"
           >
             <div class="slot-consumers-header">