handle location form array

projects/nshmp-apps/src/app/ncm/geophysical-profiles/services/app.service.ts

+import {HttpParams} from '@angular/common/http';
 import {computed, Injectable, Signal, signal} from '@angular/core';
 import {FormBuilder} from '@angular/forms';
 import {
+  FormGroupControls,
   NshmpService,
   ServiceCallInfo,
   SpinnerService,
@@ -8,10 +10,16 @@ import {
 import {
   DefaultPlotOptions,
   NshmpPlot,
+  PlotOptions,
   plotUtils,
 } from '@ghsc/nshmp-lib-ng/plot';
-import {GeophysicalUsage} from '@ghsc/nshmp-utils-ts/libs/ncm/geophysical';
+import {
+  GeophysicalResponse,
+  GeophysicalUsage,
+} from '@ghsc/nshmp-utils-ts/libs/ncm/geophysical';
+import {Location} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/geo';
 import deepEqual from 'deep-equal';
+import {PlotData} from 'plotly.js';
 import {environment} from 'projects/nshmp-apps/src/environments/environment';
 import {AppServiceModel} from 'projects/nshmp-apps/src/shared/models/app-service.model';
 import {SharedService} from 'projects/nshmp-apps/src/shared/services/shared.service';
@@ -35,7 +43,11 @@ export class AppService
   private serviceUrl = `${this.ncm.url}${this.ncm.services.geophysical}`;
 
   /** Form group */
-  formGroup = this.formBuilder.group<ControlForm>(this.defaultFormValues());
+  formGroup = this.formBuilder.group({
+    ...this.defaultFormValues(),
+    locations: this.formBuilder.array([this.locationForm()]),
+  });
+
   /** State */
   state = signal<AppState>(this.initialState());
 
@@ -70,36 +82,79 @@ export class AppService
     return computed(() => this.state().usageResponse);
   }
 
+  /**
+   * Add a new location form group to form array.
+   */
+  addLocationForm(): void {
+    this.formGroup.controls.locations.controls.push(this.locationForm());
+    this.formGroup.controls.locations.updateValueAndValidity();
+  }
+
+  /**
+   * Add form validators
+   */
   addValidators(): void {
     const controls = this.formGroup.controls;
 
     controls.depthInc.addValidators(this.validateRequired());
     controls.depthMax.addValidators(this.validateRequired());
     controls.depthMin.addValidators(this.validateRequired());
-    controls.latitude.addValidators([
-      this.validateNan(),
-      this.validateRequired(),
-    ]);
-    controls.longitude.addValidators([
-      this.validateNan(),
-      this.validateRequired(),
-    ]);
+    controls.locations.addValidators(this.validateRequired());
   }
 
+  /**
+   * Call NCM geophysical web service
+   */
   callService(): void {
-    throw new Error('Method not implemented.');
+    const spinnerRef = this.spinnerService.show(SpinnerService.MESSAGE_SERVICE);
+
+    const values = this.formGroup.getRawValue();
+    const params = new HttpParams().appendAll({
+      depths: `${values.depthMin},${values.depthInc},${values.depthMax}`,
+      location: this.formGroup.controls.locations
+        .getRawValue()
+        .map(location => `${location.latitude},${location.longitude}`)
+        .join(','),
+    });
+    const url = `${this.serviceUrl}?${params.toString()}`;
+
+    this.nshmpService
+      .callService$<GeophysicalResponse>(url)
+      .pipe(
+        catchError((error: Error) => {
+          spinnerRef.close();
+          return this.nshmpService.throwError$(error);
+        })
+      )
+      .subscribe(serviceResponse => {
+        this.updateState({
+          serviceCallInfo: {
+            ...this.state().serviceCallInfo,
+            serviceCalls: [url],
+          },
+          serviceResponse,
+        });
+
+        this.createPlots();
+        spinnerRef.close();
+      });
   }
 
+  /**
+   * Returns the default control form values.
+   */
   defaultFormValues(): ControlForm {
     return {
       depthInc: 100,
       depthMax: 2000,
       depthMin: 0,
-      latitude: null,
-      longitude: null,
+      locations: [],
     };
   }
 
+  /**
+   * Returns the default plots.
+   */
   defaultPlots(): Plots {
     const xLabel = 'Depth (meters)';
 
@@ -137,6 +192,9 @@ export class AppService
     };
   }
 
+  /**
+   * Initialize application, call usage.
+   */
   init(): void {
     const spinnerRef = this.spinnerService.show(
       SpinnerService.MESSAGE_METADATA
@@ -163,6 +221,9 @@ export class AppService
       });
   }
 
+  /**
+   * Returns the initial state.
+   */
   initialState(): AppState {
     return {
       plots: this.defaultPlots(),
@@ -184,9 +245,17 @@ export class AppService
       ...this.defaultFormValues(),
     });
 
+    this.formGroup.controls.locations.clear();
+    this.addLocationForm();
+
     this.resetState();
   }
 
+  /**
+   * Update the state.
+   *
+   * @param state The partial state to update.
+   */
   updateState(state: Partial<AppState>): void {
     const updatedState = {
       ...this.state(),
@@ -201,8 +270,40 @@ export class AppService
     }
   }
 
+  /**
+   * Create the plots for service response.
+   */
+  private createPlots(): void {
+    this.updateState({
+      plots: this.serviceResponseToPlots(),
+    });
+  }
+
+  /**
+   * Returns a default plot.
+   *
+   * @param options The plot options
+   */
   private defaultPlot(options: DefaultPlotOptions): NshmpPlot {
-    const plotData = plotUtils.defaultPlot(options);
+    const values = this.formGroup.getRawValue();
+
+    const plotOptions: PlotOptions = {
+      layout: {
+        xaxis: {
+          range: [values.depthMin, values.depthMax],
+          type: 'linear',
+        },
+        yaxis: {
+          range: [0, 100],
+          type: 'linear',
+        },
+      },
+    };
+    const plotData = plotUtils.defaultPlot({
+      ...options,
+      mobileOptions: plotOptions,
+      options: plotOptions,
+    });
 
     return {
       label: options.title,
@@ -214,6 +315,26 @@ export class AppService
     };
   }
 
+  /**
+   * Returns a new location form group for the form array.
+   */
+  private locationForm(): FormGroupControls<Location> {
+    const form = this.formBuilder.group({
+      latitude: [NaN, [this.validateRequired(), this.validateNan()]],
+      longitude: [NaN, [this.validateRequired(), this.validateNan()]],
+    });
+
+    form.valueChanges.subscribe(() => {
+      this.formGroup.controls.locations.updateValueAndValidity();
+      this.formGroup.controls.locations.markAsDirty();
+    });
+
+    return form;
+  }
+
+  /**
+   * Reset the current state.
+   */
   private resetState(): void {
     this.updateState({
       serviceCallInfo: {
@@ -223,4 +344,102 @@ export class AppService
       serviceResponse: null,
     });
   }
+
+  /**
+   * Transform the service response to plots.
+   */
+  private serviceResponseToPlots(): Plots {
+    const serviceResponse = this.state().serviceResponse;
+
+    if (serviceResponse === null || serviceResponse === undefined) {
+      return this.defaultPlots();
+    }
+
+    const temperaturePlotData: Partial<PlotData>[] = [];
+    const porosityPlotData: Partial<PlotData>[] = [];
+    const vsPlotData: Partial<PlotData>[] = [];
+    const vpPlotData: Partial<PlotData>[] = [];
+    const densityPlotData: Partial<PlotData>[] = [];
+
+    const xs = serviceResponse.request.depths.depth_vector;
+
+    serviceResponse.response.results.forEach(result => {
+      const name = `${result.location.latitude}, ${result.location.longitude}`;
+
+      temperaturePlotData.push({
+        mode: 'lines+markers',
+        name,
+        x: xs,
+        y: result.profile.temperature,
+      });
+
+      porosityPlotData.push({
+        mode: 'lines+markers',
+        name,
+        x: xs,
+        y: result.profile.porosity,
+      });
+
+      vpPlotData.push({
+        mode: 'lines+markers',
+        name,
+        x: xs,
+        y: result.profile.vp,
+      });
+
+      vsPlotData.push({
+        mode: 'lines+markers',
+        name,
+        x: xs,
+        y: result.profile.vs,
+      });
+
+      densityPlotData.push({
+        mode: 'lines+markers',
+        name,
+        x: xs,
+        y: result.profile.density,
+      });
+    });
+
+    const plots = this.plots();
+
+    return {
+      density: {
+        ...plots.density,
+        plotData: {
+          ...plots.density.plotData,
+          data: densityPlotData,
+        },
+      },
+      porosity: {
+        ...plots.porosity,
+        plotData: {
+          ...plots.porosity.plotData,
+          data: porosityPlotData,
+        },
+      },
+      temperature: {
+        ...plots.temperature,
+        plotData: {
+          ...plots.temperature.plotData,
+          data: temperaturePlotData,
+        },
+      },
+      vp: {
+        ...plots.vp,
+        plotData: {
+          ...plots.vp.plotData,
+          data: vpPlotData,
+        },
+      },
+      vs: {
+        ...plots.vs,
+        plotData: {
+          ...plots.vs.plotData,
+          data: vsPlotData,
+        },
+      },
+    };
+  }
 }