update

Author: noatgnu

src/app/auto-save.service.ts

@@ -1,5 +1,4 @@
 import { Injectable, OnDestroy, NgZone, signal } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 @Injectable({
   providedIn: 'root'
@@ -14,11 +13,9 @@ export class AutoSaveService implements OnDestroy {
 
   private readonly _autoSaveTrigger = signal(0);
   readonly autoSaveTrigger = this._autoSaveTrigger.asReadonly();
-  readonly autoSaveTrigger$ = toObservable(this._autoSaveTrigger);
 
   private readonly _settingsChanged = signal(0);
   readonly settingsChanged = this._settingsChanged.asReadonly();
-  readonly settingsChanged$ = toObservable(this._settingsChanged);
 
   constructor(private ngZone: NgZone) {
     this.tabId = this.generateTabId();

src/app/components/bar-chart/bar-chart.component.ts

@@ -1,11 +1,10 @@
-import {ChangeDetectionStrategy, Component, DestroyRef, effect, inject, input, OnInit, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, effect, input, OnInit, signal} from '@angular/core';
 import {DataService} from "../../data.service";
 import {Series} from "data-forge";
 import {UniprotService} from "../../uniprot.service";
 import {WebService} from "../../web.service";
 import {StatsService} from "../../stats.service";
 import {SettingsService} from "../../settings.service";
-import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {PlotlyThemeService} from "../../plotly-theme.service";
 import {ThemeService} from "../../theme.service";
 
@@ -17,7 +16,6 @@ import {ThemeService} from "../../theme.service";
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BarChartComponent implements OnInit {
-  private destroyRef = inject(DestroyRef)
 
   data = input<any>()
 
@@ -203,15 +201,17 @@ export class BarChartComponent implements OnInit {
       }
     })
 
-    this.themeService.theme$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+    effect(() => {
+      this.themeService.mode();
       this.drawBarChart();
       this.drawAverageBarChart();
       this.graphLayout = this.plotlyTheme.applyThemeToLayout(this.graphLayout);
       this.graphLayoutAverage = this.plotlyTheme.applyThemeToLayout(this.graphLayoutAverage);
       this.graphLayoutViolin = this.plotlyTheme.applyThemeToLayout(this.graphLayoutViolin);
     });
 
-    this.dataService.barChartDownloadTrigger$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(trigger => {
+    effect(() => {
+      const trigger = this.dataService.barChartDownloadTrigger();
       if (trigger) {
         const rawData = this._data()
         for (const i of ["bar", "average", "violin"]) {
@@ -243,7 +243,8 @@ export class BarChartComponent implements OnInit {
       }
     })
 
-    this.dataService.redrawTrigger$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+    effect(() => {
+      const data = this.dataService.redrawTrigger();
       if (data) {
         this.enableImputation = this.settings.settings.enableImputation
         this.volcanoConditionLeft = this.settings.settings.volcanoConditionLabels.leftCondition

src/app/components/batch-upload-modal/batch-upload-modal.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect } from '@angular/core';
 import {Settings} from "../../classes/settings";
 import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {DataFrame, fromCSV} from "data-forge";
@@ -78,7 +78,8 @@ export class BatchUploadModalComponent {
   }[] = [];
   allTasksFinished = false
   constructor(private toasts: ToastService, private fb: FormBuilder, private dialogRef: NgbActiveModal, private batchService: BatchUploadServiceService) {
-    this.batchService.taskStart$.subscribe((index) => {
+    effect(() => {
+      const index = this.batchService.taskStartIndex();
       if (index >= 0) {
         this.toasts.show("Task started", `Start processing task ${index}`).then()
       }

src/app/components/batch-upload-modal/batch-upload-service.service.ts

@@ -1,21 +1,20 @@
 import { Injectable, signal } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 @Injectable({
   providedIn: 'root'
 })
 export class BatchUploadServiceService {
-  readonly taskStartIndex = signal(-1);
-  readonly taskStart$ = toObservable(this.taskStartIndex);
+  private readonly _taskStartIndex = signal(-1);
+  readonly taskStartIndex = this._taskStartIndex.asReadonly();
 
-  readonly resetCounter = signal(0);
-  readonly reset$ = toObservable(this.resetCounter);
+  private readonly _resetCounter = signal(0);
+  readonly resetCounter = this._resetCounter.asReadonly();
 
   triggerTaskStart(index: number): void {
-    this.taskStartIndex.set(index);
+    this._taskStartIndex.set(index);
   }
 
   triggerReset(): void {
-    this.resetCounter.update(v => v + 1);
+    this._resetCounter.update(v => v + 1);
   }
 }

src/app/components/batch-upload-modal/individual-session/individual-session.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges} from '@angular/core';
 import { InputFile } from 'src/app/classes/input-file';
 import { Raw } from 'src/app/classes/raw';
 import {Differential} from "../../../classes/differential";
@@ -16,7 +16,6 @@ import {ToastService} from "../../../toast.service";
 import {QuillEditorComponent} from "ngx-quill";
 import {NgClass} from "@angular/common";
 import {ColorPickerDirective} from "ngx-color-picker";
-import {Subject, takeUntil} from "rxjs";
 
 @Component({
   selector: 'app-individual-session',
@@ -40,7 +39,6 @@ import {Subject, takeUntil} from "rxjs";
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IndividualSessionComponent implements OnChanges, AfterViewInit, OnDestroy {
-  private destroy$ = new Subject<void>();
   @Input() sessionId: number = -1;
   private _session: {data: {
     raw: InputFile,
@@ -139,12 +137,14 @@ export class IndividualSessionComponent implements OnChanges, AfterViewInit, OnD
   loadingCollections: boolean = false
   isCreatingCollection: boolean = false
   constructor(private fb: FormBuilder, private toast: ToastService, public accounts: AccountsService, private batchService: BatchUploadServiceService, private data: DataService, private uniprot: UniprotService, private cd: ChangeDetectorRef, public settings: SettingsService) {
-    this.batchService.taskStart$.pipe(takeUntil(this.destroy$)).subscribe((taskId: number) => {
+    effect(() => {
+      const taskId = this.batchService.taskStartIndex();
       if (taskId === this.sessionId) {
         this.startWork().then(() => this.cd.markForCheck())
       }
     })
-    this.batchService.reset$.pipe(takeUntil(this.destroy$)).subscribe((counter) => {
+    effect(() => {
+      const counter = this.batchService.resetCounter();
       if (counter > 0) {
         this.data.reset()
         this.uniprot.reset()
@@ -155,8 +155,6 @@ export class IndividualSessionComponent implements OnChanges, AfterViewInit, OnD
   }
 
   ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
   }
 
   ngAfterViewInit() {

src/app/components/correlation-matrix/correlation-matrix.component.ts

@@ -1,12 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, OnInit } from '@angular/core';
 import { DataService } from "../../data.service";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { ToastService } from "../../toast.service";
 import { WebService } from "../../web.service";
 import { SettingsService } from "../../settings.service";
 import { PlotlyThemeService } from "../../plotly-theme.service";
 import { ThemeService } from "../../theme.service";
-import { Subject, takeUntil } from "rxjs";
 
 interface CorrelationResult {
   column_x: string;
@@ -30,8 +29,7 @@ type ColorScalePreset = 'default' | 'viridis' | 'plasma' | 'bluered' | 'rdylbu';
   standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CorrelationMatrixComponent implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class CorrelationMatrixComponent implements OnInit {
   revision = 0;
   graphData: any[] = [];
   graphLayout: any = {};
@@ -115,21 +113,16 @@ export class CorrelationMatrixComponent implements OnInit, OnDestroy {
     private cdr: ChangeDetectorRef
   ) {
     this.initializeSamples();
-  }
-
-  ngOnInit(): void {
-    this.themeService.theme$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+    effect(() => {
+      this.themeService.mode();
       this.updateLayout();
       this.revision++;
       this.cdr.markForCheck();
     });
-
-    this.calculateAndRender();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
+  ngOnInit(): void {
+    this.calculateAndRender();
   }
 
   private initializeSamples(): void {

src/app/components/curtain-stats-summary/curtain-stats-summary.component.ts

@@ -1,9 +1,8 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, OnInit} from '@angular/core';
 import {AccountsService} from "../../accounts/accounts.service";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {PlotlyThemeService} from "../../plotly-theme.service";
 import {ThemeService} from "../../theme.service";
-import {Subject, takeUntil} from "rxjs";
 
 @Component({
     selector: 'app-curtain-stats-summary',
@@ -12,8 +11,7 @@ import {Subject, takeUntil} from "rxjs";
     standalone: false,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CurtainStatsSummaryComponent implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class CurtainStatsSummaryComponent implements OnInit {
   revisionDownload = 0;
   revisionCreated = 0;
   graphDataDownload: any[] = []
@@ -86,17 +84,13 @@ export class CurtainStatsSummaryComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.themeService.theme$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+    effect(() => {
+      this.themeService.mode();
       this.graphLayoutDownload = this.plotlyTheme.applyThemeToLayout(this.graphLayoutDownload);
       this.graphLayoutCreated = this.plotlyTheme.applyThemeToLayout(this.graphLayoutCreated);
       this.revisionDownload++;
       this.revisionCreated++;
       this.cdr.markForCheck();
     });
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

src/app/components/cytoplot/cytoplot.component.ts

@@ -1,10 +1,9 @@
-import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
 import cytoscape from "cytoscape";
 import fcose from "cytoscape-fcose";
 import {saveAs} from "file-saver";
 import {SettingsService} from "../../settings.service";
 import {ThemeService} from "../../theme.service";
-import {Subject, takeUntil} from "rxjs";
 
 cytoscape.use(fcose);
 
@@ -15,8 +14,7 @@ cytoscape.use(fcose);
     standalone: false,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CytoplotComponent implements OnInit, AfterViewInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class CytoplotComponent implements AfterViewInit, OnDestroy {
   private _dimensions = {width: 700, height: 700}
   @Output() clickedID = new EventEmitter<string>()
   @Output() ready = new EventEmitter<boolean>()
@@ -37,29 +35,30 @@ export class CytoplotComponent implements OnInit, AfterViewInit, OnDestroy {
     if(this._drawData) {
       if (this._drawData.data.length > 2) {
         this.componentID = this._drawData.id
+        this.hidden = false
+        this.cdr.markForCheck()
         setTimeout(() => {
           this.draw()
         }, 3000)
       }
     }
   }
 
-  constructor(private settings: SettingsService, private themeService: ThemeService, private cdr: ChangeDetectorRef) { }
-
-  ngOnInit(): void {
-    this.themeService.beforeThemeChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.hidden = true;
-      if (this.cy) {
-        this.cy.destroy();
-        this.cy = null;
+  constructor(private settings: SettingsService, private themeService: ThemeService, private cdr: ChangeDetectorRef) {
+    effect(() => {
+      const counter = this.themeService.beforeThemeChange();
+      if (counter > 0) {
+        this.hidden = true;
+        if (this.cy) {
+          this.cy.destroy();
+          this.cy = null;
+        }
+        this.cdr.markForCheck();
       }
-      this.cdr.markForCheck();
     });
   }
 
   ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
     if (this.cy) {
       this.cy.destroy();
       this.cy = null;
@@ -70,11 +69,12 @@ export class CytoplotComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   draw() {
-    console.log(this._drawData)
     const container = document.getElementById(this._drawData.id)
-    container?.style.setProperty("width", this._dimensions.width+"px")
-    container?.style.setProperty("height", this._dimensions.height+"px")
-    console.log(container)
+    if (!container) {
+      return
+    }
+    container.style.setProperty("width", this._dimensions.width+"px")
+    container.style.setProperty("height", this._dimensions.height+"px")
     const ad = this
     if (!this.cy) {
       this.cy = cytoscape(

src/app/components/file-form/file-form.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
 import { InputFile } from "../../classes/input-file";
 import { DataService } from "../../data.service";
 import { DataFrame, fromJSON, IDataFrame, Series } from "data-forge";
@@ -37,13 +37,15 @@ export class FileFormComponent implements OnInit, OnDestroy {
     private toast: ToastService,
     private cdr: ChangeDetectorRef
   ) {
-    this.uniprot.progressBar$.pipe(takeUntil(this.destroy$)).subscribe(data => {
+    effect(() => {
+      const data = this.uniprot.progressBar();
       this.progressBar.value = data.value;
       this.progressBar.text = data.text;
       this.cdr.markForCheck();
     });
 
-    this.data.restoreTrigger$.pipe(takeUntil(this.destroy$)).subscribe(data => {
+    effect(() => {
+      const data = this.data.restoreTrigger();
       if (data) {
         this.updateProgressBar(100, "Restoring session...");
         if (!this.clicked) {