Bind classes and host listeners the current way; drop a redundant zone

e2e/disease-compare.spec.ts

@@ -119,6 +119,9 @@ test.describe('a disease pathway, and its comparison with the normal one', () =>
     }
   });
 
+  // Well inside the slide, which the waits around it put at about 600ms.
+  const SAYS_AT_ONCE = 200;
+
   test('a second click while it slides out brings it back', async ({ page }) => {
     await open(page, DISEASE);
     await compareButton(page).click();
@@ -127,10 +130,13 @@ test.describe('a disease pathway, and its comparison with the normal one', () =>
     await expect(compareButton(page)).toHaveText(/Close comparison/);
     await compareButton(page).click();
     // At once -- not once the slide has finished -- it says what it will do.
-    expect(await compareButton(page).textContent()).toMatch(/Compare with normal/);
+    // "At once" is the next frame, not the instant the click returns: under
+    // load, change detection may not have run by then. SAYS_AT_ONCE is well
+    // inside the slide, so this still fails if the label waits for it.
+    await expect(compareButton(page)).toHaveText(/Compare with normal/, { timeout: SAYS_AT_ONCE });
     // And a click before the slide is over reverses it.
     await compareButton(page).click();
-    expect(await compareButton(page).textContent()).toMatch(/Close comparison/);
+    await expect(compareButton(page)).toHaveText(/Close comparison/, { timeout: SAYS_AT_ONCE });
     await page.waitForTimeout(800);
     await expect(handle(page)).toBeVisible();
     await expect.poll(() => layerStart(page)).toBeGreaterThan(200);

projects/pathway-browser/src/app/deltasignal/deltasignal-logic-graph.component.ts

@@ -5,7 +5,6 @@ import {
   effect,
   ElementRef,
   inject,
-  NgZone,
   OnDestroy,
   signal,
   untracked,
@@ -31,7 +30,6 @@ const GRAPH_LIMIT = 40;
 })
 export class DeltaSignalLogicGraphComponent implements OnDestroy {
   private readonly service = inject(DeltaSignalService);
-  private readonly zone = inject(NgZone);
   private readonly container = viewChild<ElementRef<HTMLDivElement>>('graphContainer');
   private cy?: Core;
   private observedElement?: HTMLDivElement;
@@ -116,7 +114,8 @@ export class DeltaSignalLogicGraphComponent implements OnDestroy {
     });
     this.cy.on('tap', 'node', (event) => {
       const selected = nodes.find((node) => node.uuid === event.target.id()) ?? null;
-      this.zone.run(() => this.selected.set(selected));
+      // A signal: zoneless change detection sees the set, with no zone to enter.
+      this.selected.set(selected);
     });
     this.cy
       .layout({

projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.html

@@ -6,7 +6,7 @@
         <div class="label-container">{{ property.label || '' | titlecase }}</div>
         <div
           class="composition-container"
-          [ngClass]="{ 'columns-container': isArray(property.value) && !isString(property.value[0]) }"
+          [class.columns-container]="isArray(property.value) && !isString(property.value[0])"
         >
           @if (isArray(property.value) && !isString(property.value[0])) {
             @for (item of property.value; track item.dbId) {

projects/pathway-browser/src/app/details/common/external-reference/external-reference.component.ts

@@ -2,7 +2,7 @@ import { Component, computed, input, inject } from '@angular/core';
 import { ReferenceEntity } from '../../../model/graph/reference-entity/reference-entity.model';
 import { EntityService } from '../../../services/entity.service';
 import { isArray, isString } from 'lodash';
-import { NgClass, TitleCasePipe } from '@angular/common';
+import { TitleCasePipe } from '@angular/common';
 import { StructureViewerComponent } from '../../tabs/molecule-tab/structure-viewer/structure-viewer.component';
 import { DatabaseIdentifier } from '../../../model/graph/database-identifier.model';
 import { MatIconButton } from '@angular/material/button';
@@ -17,15 +17,7 @@ import { MoleculeType } from '../../tabs/molecule-tab/molecule-tab.component';
   selector: 'cr-external-reference',
   templateUrl: './external-reference.component.html',
   styleUrl: './external-reference.component.scss',
-  imports: [
-    TitleCasePipe,
-    NgClass,
-    MatIcon,
-    MatIconButton,
-    MatTooltip,
-    NgClass,
-    StructureViewerComponent,
-  ],
+  imports: [TitleCasePipe, MatIcon, MatIconButton, MatTooltip, StructureViewerComponent],
 })
 export class ExternalReferenceComponent {
   private entity = inject(EntityService);

projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.html

@@ -26,7 +26,7 @@
         @let connector = getAllConnectors(treeNodeRef._getSetSize(), node, index, treeNodeRef.level)[index];
         <div
           class="connector"
-          [ngClass]="connector?.type"
+          [class]="connector?.type"
           [attr.data-shape]="connector?.shape"
           [matTooltip]="connector?.type"
         ></div>
@@ -150,7 +150,7 @@
                     : { type: 'is', shape: 'L' };
                 <div
                   class="connector"
-                  [ngClass]="connector?.type"
+                  [class]="connector?.type"
                   [attr.data-shape]="connector?.shape"
                   [matTooltip]="connector?.type"
                 ></div>

projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts

@@ -39,7 +39,6 @@ import { DataStateService } from '../../../services/data-state.service';
 import type { Relationship } from '../../../model/graph/relationship.model';
 import { cloneDeep, isArray } from 'lodash';
 import { UrlStateService } from '../../../services/url-state.service';
-import { NgClass } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { ExtractCompartmentPipe } from '../../../pipes/extract-compartment.pipe';
@@ -59,7 +58,6 @@ type Connector = { type: string; shape: 'L' | 'I' | 'T' } | null;
     ExpressionTagComponent,
     MatTree,
     MatNestedTreeNode,
-    NgClass,
     MatTooltip,
     MatIcon,
     MatTreeNodeOutlet,

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html

@@ -373,7 +373,7 @@ <h4 class="facet-group-title">Disease status</h4>
                 <a
                   [href]="`${CONTENT_SCHEMA}/Person/${author.dbId}`"
                   target="_blank"
-                  [ngClass]="{ 'margin-right': !author.orcidId }"
+                  [class.margin-right]="!author.orcidId"
                 >
                   {{ author.firstname }} {{ author.surname }}
                 </a>

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts

@@ -54,7 +54,7 @@ import { SpeciesService } from '../../../services/species.service';
 import { Summation } from '../../../model/graph/summation.model';
 import { FigureService } from './figure/figure.service';
 type HasModifiedResidue = Relationship.HasModifiedResidue;
-import { KeyValuePipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SortByTextPipe } from '../../../pipes/sort-by-text.pipe';
 import { IncludeRefPipe } from '../../../pipes/include-ref.pipe';
@@ -88,7 +88,6 @@ import type { Event as ReactomeEvent } from '../../../model/graph/event/event.mo
   standalone: true,
   imports: [
     NgTemplateOutlet,
-    NgClass,
     KeyValuePipe,
     RouterLink,
     SortByTextPipe,

projects/pathway-browser/src/app/diagram/diagram.component.ts

@@ -12,7 +12,6 @@ import {
   signal,
   viewChild,
   inject,
-  HostListener,
   untracked,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -81,6 +80,11 @@ const FIT_PADDING = 100;
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'cr-diagram',
+  host: {
+    '(window:pointermove)': 'onWindowPointerMove($event)',
+    '(window:pointerup)': 'endThumbnailDrag()',
+    '(window:pointercancel)': 'endThumbnailDrag()',
+  },
   templateUrl: './diagram.component.html',
   styleUrls: ['./diagram.component.scss'],
   standalone: true,
@@ -749,13 +753,10 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
     this.panFromThumbnail(event);
   }
 
-  @HostListener('window:pointermove', ['$event'])
   onWindowPointerMove(event: PointerEvent) {
     if (this.thumbnailDragging) this.panFromThumbnail(event);
   }
 
-  @HostListener('window:pointerup')
-  @HostListener('window:pointercancel')
   endThumbnailDrag() {
     this.thumbnailDragging = false;
   }

projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts

@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import {
   Component,
   ElementRef,
-  HostListener,
   computed,
   effect,
   inject,
@@ -135,6 +134,11 @@ const TYPE_ORDER: string[] = [
  */
 @Component({
   selector: 'cr-entity-popup',
+  host: {
+    '(document:keydown.escape)': 'onEscape()',
+    '(document:click)': 'onDocumentPointer($event)',
+    '(document:contextmenu)': 'onDocumentPointer($event)',
+  },
   standalone: true,
   imports: [MatIcon, MatTooltip, DecimalPipe],
   templateUrl: './entity-popup.component.html',
@@ -528,15 +532,12 @@ export class EntityPopupComponent {
     this.pinned.update((v) => !v);
   }
 
-  @HostListener('document:keydown.escape')
   onEscape(): void {
     if (this.target()) this.dismissed.emit();
   }
 
   // A right-click elsewhere fires `contextmenu` rather than `click`, so both
   // are needed to dismiss reliably.
-  @HostListener('document:click', ['$event'])
-  @HostListener('document:contextmenu', ['$event'])
   onDocumentPointer(event: Event): void {
     if (!this.target() || this.pinned()) return;
     if (this.host.nativeElement.contains(event.target as Node)) return;

projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.html

@@ -53,7 +53,7 @@
         [crReveal]="node.stId === revealTarget()"
         class="leaf-node"
         (click)="$event.stopPropagation()"
-        [ngClass]="{ 'has-sibling': hasRootSiblingForLeafNode(node) }"
+        [class.has-sibling]="hasRootSiblingForLeafNode(node)"
         [attr.st-id]="node.stId"
       >
         <!-- The row, not the tree node: a node also contains its children. -->
@@ -66,7 +66,7 @@
             <button
               mat-button
               (click)="onTreeEventSelect(node)"
-              [ngClass]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
+              [class]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
               class="button"
             >
               <mat-icon
@@ -159,7 +159,7 @@
             <button
               mat-button
               class="button"
-              [ngClass]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
+              [class]="{ selected: node.isSelected, hovered: node.isHovered, hit: node.hit }"
             >
               <mat-icon
                 #eventIcon

projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts

@@ -47,7 +47,7 @@ import { RouterLink } from '@angular/router';
 import { MatIcon } from '@angular/material/icon';
 import { MatNestedTreeNode } from '@angular/material/tree';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { NgClass } from '@angular/common';
+
 import { MatTooltip } from '@angular/material/tooltip';
 import { PassiveDirective } from '../utils/passive.directive';
 import { RevealDirective } from '../utils/reveal.directive';
@@ -68,7 +68,6 @@ import { HierarchyHoverService } from '../services/hierarchy-hover.service';
     MatTreeNodeOutlet,
     MatButton,
     MatIconButton,
-    NgClass,
     MatTooltip,
     PassiveDirective,
     RevealDirective,

projects/pathway-browser/src/app/interactors/interactors.component.html

@@ -19,9 +19,9 @@
           class="raised-full-width-button"
           [disabled]="hasEHLD()"
           (click)="clearInteractors()"
-          [ngClass]="{ 'active-button': clear }"
+          [class.active-button]="clear"
         >
-          <mat-icon [ngClass]="{ 'active-icon': clear }" color="primary">clear</mat-icon>
+          <mat-icon [class.active-icon]="clear" color="primary">clear</mat-icon>
           Clear overlays
         </button>
       </div>
@@ -35,7 +35,7 @@
           mat-button
           [disabled]="hasEHLD()"
           (click)="getInteractors(INTACT_RESOURCE)"
-          [ngClass]="{ 'active-button': currentResource().type === ResourceType.STATIC }"
+          [class.active-button]="currentResource().type === ResourceType.STATIC"
         >
           <!--
             IntAct carries the same count as the others. It is the resource a
@@ -76,7 +76,7 @@
                 mat-button
                 [disabled]="hasEHLD() || (!!loadingResource && loadingResource !== resource.name)"
                 (click)="getInteractors(resource.name)"
-                [ngClass]="{ 'active-button': currentResource().name === resource.name }"
+                [class.active-button]="currentResource().name === resource.name"
               >
                 <div class="resource-name">
                   <span>{{ resource.name }}</span>
@@ -115,7 +115,7 @@
               [value]="resourceToken"
               [selected]="isSelected(resourceToken)"
               (click)="getInteractors(resourceToken)"
-              [ngClass]="{ 'active-button': currentResource().name === resourceToken.summary.name }"
+              [class.active-button]="currentResource().name === resourceToken.summary.name"
               class="full-width"
             >
               <div class="resource-name surface-variant">

projects/pathway-browser/src/app/interactors/interactors.component.ts

@@ -22,7 +22,7 @@ import { CustomInteractorDialogComponent } from './custom-interactor-dialog/cust
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { MatDivider } from '@angular/material/divider';
 import { MatGridList, MatGridTile } from '@angular/material/grid-list';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
@@ -40,7 +40,6 @@ import { DEFAULT_INTERACTOR_SCORE } from './interactor-threshold';
     MatButton,
     MatIconButton,
     MatIcon,
-    NgClass,
     NgTemplateOutlet,
     MatDivider,
     MatGridList,

projects/pathway-browser/src/app/services/managed-download.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, computed, inject, signal } from '@angular/core';
+import { Directive, ElementRef, computed, inject, signal } from '@angular/core';
 import {
   DownloadPhase,
   FileDownloadService,
@@ -28,6 +28,7 @@ import {
   selector: 'a[crManagedDownload]',
   exportAs: 'managedDownload',
   host: {
+    '(click)': 'onClick($event)',
     '[class.dl--busy]': 'busy()',
     '[class.dl--failed]': 'failed()',
     '[attr.data-download-state]': 'label()',
@@ -65,7 +66,6 @@ export class ManagedDownloadDirective {
     return null;
   });
 
-  @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
     // A modified click is the reader asking the browser to handle it.
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {

projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.html

@@ -3,7 +3,7 @@
   [style.--sticky-offset-right.px]="scrollDimensions().right"
 >
   @for (side of visibility | keyvalue; track side.key) {
-    <div class="shadow" [ngClass]="side.key" [class.visible]="side.value"></div>
+    <div class="shadow" [class]="side.key" [class.visible]="side.value"></div>
   }
 </div>
 

projects/pathway-browser/src/app/shared/shadow-scroll/shadow-scroll.component.ts

@@ -9,14 +9,14 @@ import {
   inject,
 } from '@angular/core';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { KeyValuePipe, NgClass } from '@angular/common';
+import { KeyValuePipe } from '@angular/common';
 import { Subscription } from 'rxjs';
 
 export type Side = 'top' | 'bottom' | 'left' | 'right';
 
 @Component({
   selector: 'shadow-scroll',
-  imports: [CdkScrollable, KeyValuePipe, NgClass],
+  imports: [CdkScrollable, KeyValuePipe],
   templateUrl: './shadow-scroll.component.html',
   styleUrl: './shadow-scroll.component.scss',
 })

projects/pathway-browser/src/app/viewport/viewport.component.html

@@ -48,7 +48,7 @@
             (keydown.enter)="toggleVisibility('species')"
             (keydown.space)="toggleVisibility('species'); $event.preventDefault()"
             (keydown.escape)="closePanels()"
-            [ngClass]="{ selected: visibility.species }"
+            [class.selected]="visibility.species"
           >
             <mat-icon class="custom-icon" svgIcon="species"></mat-icon>
             <div class="species-content">
@@ -70,7 +70,7 @@
               (keydown.enter)="toggleVisibility('interactor')"
               (keydown.space)="toggleVisibility('interactor'); $event.preventDefault()"
               (keydown.escape)="closePanels()"
-              [ngClass]="{ selected: visibility.interactor }"
+              [class.selected]="visibility.interactor"
             >
               <mat-icon class="custom-icon" svgIcon="overlay"></mat-icon>
               <div class="overlay-content">

projects/pathway-browser/src/app/viewport/viewport.component.ts

@@ -54,7 +54,7 @@ import {
 } from '@angular/material/snack-bar';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { NgClass } from '@angular/common';
+
 import { AnalysisFormComponent } from './analysis-form/analysis-form.component';
 import { FormsModule } from '@angular/forms';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
@@ -77,7 +77,6 @@ const DROPDOWN_DURATION = 500;
     AngularSplitModule,
     SearchComponent,
     MatIcon,
-    NgClass,
     SpeciesComponent,
     InteractorsComponent,
     EventHierarchyComponent,