refactor: migrate experimental zoneless change detection to stable provideZonelessChangeDetection across test suites

Author: iislucas

animated-transformer/angular.json

@@ -89,21 +89,10 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": [],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [],
-            "webWorkerTsConfig": "tsconfig.worker.json",
-            "karmaConfig": "karma.conf.js"
+            "browsers": ["chromium"]
           }
         }
       }

animated-transformer/package.json

@@ -61,16 +61,19 @@
     "@types/underscore": "^1.11.4",
     "@types/wicg-file-system-access": "^2023.10.5",
     "@types/yargs": "^17.0.24",
+    "@vitest/browser-playwright": "^4.1.7",
     "concurrently": "^9.1.2",
     "esbuild": "0.24.2",
     "jasmine-core": "~4.5.0",
+    "jsdom": "^29.1.1",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "3.4.2",
     "typescript": "^5.7.0",
-    "vite": "^5.4.11"
+    "vite": "^6.4.2",
+    "vitest": "^4.1.7"
   }
 }

animated-transformer/pnpm-lock.yaml

@@ -16,15 +16,15 @@ limitations under the License.
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ActivationManagerComponent } from './activation-manager.component';
-import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection } from '@angular/core';
 
 describe('ActivationManagerComponent', () => {
   let component: ActivationManagerComponent;
   let fixture: ComponentFixture<ActivationManagerComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
       imports: [ActivationManagerComponent],
     });
     fixture = TestBed.createComponent(ActivationManagerComponent);

animated-transformer/src/app/activation-vis/activation-manager/activation-manager.component.spec.ts

@@ -80,4 +80,10 @@
       </div>
     </mat-card-content>
   </mat-card>
+
+  <mat-card class="card explainer-card">
+    <mat-card-content>
+      <markdown [data]="explainerMarkdown"></markdown>
+    </mat-card-content>
+  </mat-card>
 </div>

animated-transformer/src/app/activation-vis/activation-vis.component.html

@@ -56,3 +56,101 @@
 .card {
   margin: 1em;
 }
+
+.explainer-card {
+  flex: 1 1 100%; /* Span full width */
+  margin: 1.5em 1em 3em 1em;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #faf9fc 0%, #f5f3f7 100%);
+  border-left: 5px solid #673ab7; /* Deep Purple theme color */
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(103, 58, 183, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(103, 58, 183, 0.12);
+  }
+
+  markdown {
+    color: #333333;
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+
+    h3 {
+      color: #673ab7; /* Deep Purple primary theme color */
+      font-size: 1.8rem;
+      font-weight: 500;
+      margin-top: 0;
+      margin-bottom: 0.5em;
+      letter-spacing: -0.02em;
+    }
+
+    h4 {
+      color: #ffb300; /* Amber accent color */
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      border-bottom: 2px solid rgba(255, 179, 0, 0.15);
+      padding-bottom: 4px;
+      width: fit-content;
+    }
+
+    hr {
+      border: 0;
+      height: 1px;
+      background: linear-gradient(to right, rgba(103, 58, 183, 0.2), rgba(103, 58, 183, 0));
+      margin: 1.5em 0;
+    }
+
+    p {
+      margin-bottom: 1em;
+      font-size: 1.05rem;
+    }
+
+    ul {
+      padding-left: 1.5em;
+      margin-bottom: 1em;
+      list-style-type: square;
+
+      li {
+        margin-bottom: 0.5em;
+        font-size: 1.05rem;
+      }
+    }
+
+    strong {
+      color: #673ab7;
+      font-weight: 600;
+    }
+
+    /* Style block formulas */
+    p > span.katex-display,
+    p > em > strong,
+    p > strong {
+      display: block;
+      text-align: center;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 1.15rem;
+      background-color: #ffffff;
+      padding: 12px 20px;
+      border-radius: 6px;
+      border: 1px solid rgba(103, 58, 183, 0.1);
+      margin: 1em auto;
+      width: fit-content;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+      color: #673ab7;
+    }
+    
+    /* Ensure we don't format normal inline bolding as block math */
+    p > strong:not(:only-child) {
+      display: inline;
+      background: none;
+      border: none;
+      padding: 0;
+      box-shadow: none;
+      margin: 0;
+    }
+  }
+}

animated-transformer/src/app/activation-vis/activation-vis.component.scss

@@ -18,15 +18,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivationVisComponent } from './activation-vis.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CornerActivationComponent } from './corner-activation/corner-activation.component';
-import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection } from '@angular/core';
 
 describe('ActivationVisComponent', () => {
   let component: ActivationVisComponent;
   let fixture: ComponentFixture<ActivationVisComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
       imports: [NoopAnimationsModule, ActivationVisComponent, CornerActivationComponent],
     }).compileComponents();
   });

animated-transformer/src/app/activation-vis/activation-vis.component.spec.ts

@@ -47,6 +47,7 @@ import { AutoCompletedTextInputComponent } from '../auto-completed-text-input/au
 import { ActivationManagerComponent } from './activation-manager/activation-manager.component';
 import { NanValidatorDirective } from '../form-validators/nan-validator.directive';
 import { BoundedFloatValidatorDirective } from '../form-validators/bounded-float-validator.directive';
+import { MarkdownModule } from 'ngx-markdown';
 
 interface DatasetExample {
   input: number[];
@@ -77,12 +78,73 @@ interface DatasetExample {
     // ActivationManagerDirective,
     // NanValidatorDirective,
     // BoundedFloatValidatorDirective,
+    MarkdownModule,
   ],
   templateUrl: './activation-vis.component.html',
   styleUrls: ['./activation-vis.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ActivationVisComponent implements OnInit {
+  explainerMarkdown = `
+### Learning Boolean Circuits via Continuous Relaxation
+
+This visualization demonstrates how **gradient descent** can be used to learn arbitrary boolean circuits (such as **AND**, **OR**, **XOR**, etc.) by relaxing a discrete, boolean search space into a continuous, differentiable field.
+
+---
+
+#### 1. The Key Idea: Hypercube Relaxation
+A standard boolean function of two inputs **x, y ∈ {0, 1}** maps the four corners of a unit square to an output **z ∈ {0, 1}**:
+* **Corner p₀₀ = (0, 0)** → parameter **w₀₀**
+* **Corner p₁₀ = (1, 0)** → parameter **w₁₀**
+* **Corner p₀₁ = (0, 1)** → parameter **w₀₁**
+* **Corner p₁₁ = (1, 1)** → parameter **w₁₁**
+
+To allow gradient-based learning, we relax the discrete domain. Instead of discrete lookups, the output at any continuous coordinate **v = (x, y) ∈ [0, 1]²** is defined as a **smooth interpolation** of the four corner parameters **w_p ∈ [0, 1]**.
+
+---
+
+#### 2. How Activations are Interpolated
+For any input point **v = (x, y)**, we compute a **coordinate-wise similarity weight** **w_p(x, y)** for each corner **p = (p_x, p_y)**:
+
+**w_p(x, y) = (1 - (x - p_x)²) · (1 - (y - p_y)²)**
+
+* When **(x, y)** is exactly at a corner **p**, its similarity weight **w_p(x, y)** is **1**, while all other corner weights are **0**.
+* As **(x, y)** moves away from a corner, the weight decays quadratically.
+
+The final predicted activation **ẑ(x, y)** is the **normalized weighted average** of the corner values:
+
+**ẑ(x, y) = Σ [w_p(x, y) · w_p] / Σ w_p(x, y)**
+
+This formulation yields the smooth, continuous landscape visualized in the **Param eval matrix**. It perfectly matches the parameters at the corners and blends them smoothly across the space.
+
+---
+
+#### 3. How Gradients are Computed & Learned
+When you select a dataset (e.g., XOR):
+1. **Define a Loss Function**: We measure the Mean Squared Error (MSE) between the model's predictions **ẑ(x, y)** and the true target outputs **z** across the dataset examples:
+   
+   **Loss = Σ (ẑ(x_j, y_j) - z_j)²**
+
+2. **Backpropagation**: Since **ẑ(x, y)** is fully differentiable, we can compute the exact gradient of the loss with respect to each corner parameter:
+   
+   **∂Loss / ∂w_p**
+   
+   This gradient represents the direction and magnitude of the error contribution for each corner parameter.
+
+3. **Gradient Descent Steps**: Clicking **"Apply Gradient Step"** subtracts a fraction of this gradient (scaled by the **Learning Rate** **η**) from the parameters:
+   
+   **w_p ← w_p - η · (∂Loss / ∂w_p)**
+
+By taking successive gradient steps, the corner values converge to the exact truth table of the target boolean function!
+
+---
+
+#### 4. Properties & Theoretical Trade-offs
+This continuous relaxation approach has remarkable theoretical properties:
+* **Guaranteed Convergence**: Because the interpolated output is a linear function of the corner parameters **w_p**, the Mean Squared Error (MSE) loss is a convex quadratic function with respect to these parameters. This means there are **no local minima**—gradient descent is mathematically guaranteed to learn any target boolean circuit from **any arbitrary initialization**!
+* **Exponential Parameter Cost**: The main drawback is scalability. Since we define a separate parameter **w_p** for every single corner of the input hypercube, the number of parameters required is **2ⁿ** (where **n** is the number of input variables). For complex functions with many inputs, this parameter growth becomes exponentially expensive.
+`;
+
   view = signal('vis' as 'edit' | 'vis');
 
   readonly activationManager = viewChild.required(ActivationManagerDirective);

animated-transformer/src/app/activation-vis/activation-vis.component.ts

@@ -16,15 +16,15 @@ limitations under the License.
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AxisWrapperComponent } from './axis-wrapper.component';
-import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection } from '@angular/core';
 
 describe('AxisWrapperComponent', () => {
   let component: AxisWrapperComponent;
   let fixture: ComponentFixture<AxisWrapperComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
       imports: [AxisWrapperComponent],
     }).compileComponents();
   });

animated-transformer/src/app/activation-vis/axis-wrapper/axis-wrapper.component.spec.ts

@@ -26,7 +26,7 @@ import {
   OnDestroy,
   Signal,
   WritableSignal,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
 } from '@angular/core';
 
 import { TwoVarGTensorDataset } from 'src/lib/gtensor/the_16_two_var_bool_fns';
@@ -45,7 +45,7 @@ describe('CornerActivationComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideExperimentalZonelessChangeDetection(), provideNoopAnimations()],
+      providers: [provideZonelessChangeDetection(), provideNoopAnimations()],
       imports: [
         CommonModule,
         FormsModule,