From cfaa837d94bc8fa288017351c4adefb63c12b687 Mon Sep 17 00:00:00 2001
From: BeritJanssen <berit.janssen@gmail.com>
Date: Thu, 12 Dec 2024 09:36:06 +0100
Subject: [PATCH] fix intialization and destroy behaviour

---
 .../ngram/ngram.component.spec.ts             | 28 +++++++++++--------
 .../visualization/ngram/ngram.component.ts    |  4 +++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/visualization/ngram/ngram.component.spec.ts b/frontend/src/app/visualization/ngram/ngram.component.spec.ts
index 5d5def614..27144aedf 100644
--- a/frontend/src/app/visualization/ngram/ngram.component.spec.ts
+++ b/frontend/src/app/visualization/ngram/ngram.component.spec.ts
@@ -19,6 +19,15 @@ describe('NgramComponent', () => {
   let apiService: ApiServiceMock;
   let visualizationService: VisualizationService;
   let cacheKey = 's:2,p:any,c:false,a:none,m:50,n:10,f:date';
+  let defaultSettings = {
+    size: 2,
+    positions: 'any',
+    freqCompensation: false,
+    analysis: 'none',
+    maxDocuments: 50,
+    numberOfNgrams: 10,
+    dateField: 'date'
+  } as NgramSettings;
 
   beforeEach(waitForAsync(() => {
     commonTestBed().testingModule.compileComponents();
@@ -55,16 +64,13 @@ describe('NgramComponent', () => {
   });
 
   it('should initialize ngramParameters with default values', () => {
-    const defaultSettings = {
-        size: 2,
-        positions: 'any',
-        freqCompensation: false,
-        analysis: 'none',
-        maxDocuments: 50,
-        numberOfNgrams: 10,
-        dateField: 'date'
-    } as NgramSettings;
     expect(component.ngramParameters.state$.value).toEqual(defaultSettings);
+  });
+
+  it('should not abort tasks when `onParameterChange` is triggered during initialization', () => {
+    spyOn(component.stopPolling$, 'next');
+    component.onParameterChange('size', 2);
+    expect(component.stopPolling$.next).not.toHaveBeenCalled();
   })
 
   it('should stop polling and abort running tasks when changing settings', () => {
@@ -73,9 +79,9 @@ describe('NgramComponent', () => {
         const eventObj = { parameter: 'size', value };
         dropdown.triggerEventHandler('onChange', eventObj);
     };
-    spyOn(fixture.componentInstance.stopPolling$, 'next');
+    spyOn(component.stopPolling$, 'next');
     changeSizeDropdown(10);
-    expect(fixture.componentInstance.stopPolling$.next).toHaveBeenCalled();
+    expect(component.stopPolling$.next).toHaveBeenCalled();
     component.dataHasLoaded = false; // fake working response
     expect(component.tasksToCancel).toBeUndefined();
   });
diff --git a/frontend/src/app/visualization/ngram/ngram.component.ts b/frontend/src/app/visualization/ngram/ngram.component.ts
index 51b69bf33..7227451a1 100644
--- a/frontend/src/app/visualization/ngram/ngram.component.ts
+++ b/frontend/src/app/visualization/ngram/ngram.component.ts
@@ -147,6 +147,7 @@ export class NgramComponent implements OnChanges {
 
     ngOnDestroy(): void {
         this.stopPolling$.next();
+        this.ngramParameters.complete();
     }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -262,6 +263,9 @@ export class NgramComponent implements OnChanges {
     }
 
     onParameterChange(parameter: string, value: any) {
+        if (_.get(this.currentSettings, parameter) === value) {
+            return;
+        }
         _.assign(this.currentSettings, {[parameter]: value});
 
         if (parameter === 'size' && value) {