Merge pull request #65 from ducktordanny/fix/no-result-jumps

Fix: Recalculation null repsonse caused jumps

apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all-tab.component.ts

@@ -6,7 +6,7 @@ import {checkSolvability} from '@opres/shared/utils';
 import {LanguageSwitcherService} from '@frontend/components/layout/language-switcher/language-switcher.service';
 import {LoadingHandlerService} from '@frontend/services/loading-handler.service';
 import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
-import {BehaviorSubject, finalize, Observable} from 'rxjs';
+import {BehaviorSubject, finalize} from 'rxjs';
 import {tap} from 'rxjs/operators';
 
 import {
@@ -26,8 +26,8 @@ import {EMPTY_TP_DATA} from '../tabs.constant';
 export class AllTabComponent {
  public formGroup: FormGroup;
  public isLoading$ = this.loadingHandler.isLoading;
- public results$: Observable<FullCalculationResult> | null = null;
  public currentLanguage$ = this.languageSwitcherService.currentLanguage;
+ public results$ = new BehaviorSubject<FullCalculationResult | null>(null);
 
  /** It contains all table data what are necessary for calculations (costs, demands, stocks). */
  private tpData$ = new BehaviorSubject<TPData>(EMPTY_TP_DATA);
@@ -83,14 +83,19 @@ export class AllTabComponent {
  }
 
  const method = this.formGroup.get('method')?.value as TPMethods;
- this.results$ = this.transportProblemService
+ this.transportProblemService
  .getFullCalculationResult(tpData, method)
- .pipe(finalize(() => this.loadingHandler.stop()));
+ .pipe(
+ tap((response) => this.results$.next(response)),
+ finalize(() => this.loadingHandler.stop()),
+ untilDestroyed(this),
+ )
+ .subscribe();
  }
 
  public reset(): void {
  this.formGroup.setErrors(null);
- this.results$ = null;
+ this.results$.next(null);
  this.tpData$.next(EMPTY_TP_DATA);
  }
 }

apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts

@@ -53,7 +53,7 @@ describe('AllTabComponent', () => {
 
  it('should check default values', () => {
  expect(component.formGroup.getRawValue()).toEqual(formGroupMock);
- expect(component.results$).toEqual(null);
+ expect(component.results$.getValue()).toEqual(null);
  });
 
  it('should change number of shops', async () => {
@@ -95,18 +95,18 @@ describe('AllTabComponent', () => {
  MatButtonHarness.with({selector: '[data-test-id="calculate-button"]'}),
  );
  await button.click();
- expect(component.results$).not.toEqual(null);
+ expect(component.results$.getValue()).not.toEqual(null);
  expect(firstPhaseSpy).toHaveBeenCalled();
  });
 
  it('should reset states', () => {
  component.formGroup.setErrors({apple: 'I am an error'});
- component.results$ = of({
+ component.results$.next({
  firstPhase: {steps: [], epsilon: {value: 123}},
  secondPhase: {steps: [], epsilon: {value: 123}},
  });
  component.reset();
  expect(component.formGroup.errors).toEqual(null);
- expect(component.results$).toEqual(null);
+ expect(component.results$.getValue()).toEqual(null);
  });
 });

apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.spec.ts

@@ -76,7 +76,7 @@ describe('EpsilonTabComponent', () => {
  expect(component.secondStepFormGroup.getRawValue()).toEqual({});
  expect(component.costs$.getValue()).toEqual(costsMock);
  expect(component.transportations$.getValue()).toEqual(transportationsMock);
- expect(component.result$).toEqual(null);
+ expect(component.result$.getValue()).toEqual(null);
  component.isLoading$.subscribe((loading: boolean) =>
  expect(loading).toEqual(false),
  );

apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts

@@ -5,15 +5,17 @@ import {Epsilon, Table, TransportTable} from '@opres/shared/types';
 import {InputTableService} from '@opres/ui/tables';
 import {LanguageSwitcherService} from '@frontend/components/layout/language-switcher/language-switcher.service';
 import {LoadingHandlerService} from '@frontend/services/loading-handler.service';
+import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
 import {forEach, mapValues} from 'lodash';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {finalize} from 'rxjs/operators';
+import {BehaviorSubject} from 'rxjs';
+import {finalize, tap} from 'rxjs/operators';
 
 import {
  transportProblemCacheBuster$,
  TransportProblemService,
 } from '../../transport-problem.service';
 
+@UntilDestroy()
 @Component({
  selector: 'epsilon-tab',
  templateUrl: './epsilon.tab.template.html',
@@ -37,7 +39,7 @@ export class EpsilonTabComponent {
  ]);
  public isLoading$ = this.loadingHandler.isLoading;
  public currentLanguage$ = this.languageSwitcherService.currentLanguage;
- public result$: Observable<Epsilon> | null = null;
+ public result$ = new BehaviorSubject<Epsilon | null>(null);
 
  constructor(
  private transportProblemService: TransportProblemService,
@@ -75,9 +77,14 @@ export class EpsilonTabComponent {
  public onCalculate(): void {
  this.loadingHandler.start();
  const transportTable = this.getTransportTableFromCurrentInput();
- this.result$ = this.transportProblemService
+ this.transportProblemService
  .getEpsilonResult(transportTable)
- .pipe(finalize(() => this.loadingHandler.stop()));
+ .pipe(
+ tap((response) => this.result$.next(response)),
+ finalize(() => this.loadingHandler.stop()),
+ untilDestroyed(this),
+ )
+ .subscribe();
  }
 
  private getTransportTableFromCurrentInput(): TransportTable {