components/control-panel/control-panel.component.ts
Control panel form fields and buttons to call GMM vs distance service.
OnInit
OnDestroy
| selector | app-control-panel |
| imports |
MatFormField
MatLabel
MatSelect
MatOption
MatInput
MatError
AsyncPipe
NshmpLibNgGmmMenuComponent
NshmpLibNgGmmMultiSelectComponent
NshmpLibNgGmmPlotOptionsControlPanelComponent
NshmpLibNgControlPanelButtonsComponent
NshmpLibNgGmmMultiParamMenuComponent
ReactiveFormsModule
|
| templateUrl | ./control-panel.component.html |
| styleUrl | ./control-panel.component.scss |
Properties |
Methods |
|
constructor(service: AppService, nshmpService: NshmpService)
|
|||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Private onGmmSource |
onGmmSource()
|
|
Returns :
void
|
| Private onMultiSelectableParam |
onMultiSelectableParam()
|
|
Returns :
void
|
| Private onShowEpistemicUncertainty |
onShowEpistemicUncertainty()
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
On form submit.
Returns :
void
|
| controls |
Default value : this.service.formGroup.controls
|
|
Form controls state |
| form |
Default value : this.service.formGroup
|
|
Control panel form field state |
| gmmSelected |
Default value : this.controls.gmmSource.getRawValue()?.length > 0
|
|
Whether a GMM has been selected |
| MwCommonValues |
Default value : MW_COMMON_VALUES
|
|
List of common magnitudes |
| parameters |
Default value : computed(() => this.service.usage()?.response.parameters)
|
|
Usage parameters |
| Public service |
Type : AppService
|
| serviceCallInfo |
Default value : this.service.serviceCallInfo
|
|
Service call info state |
| Private subs |
Type : Subscription[]
|
Default value : []
|
| supportedImts |
Default value : this.service.supportedImts
|
|
Supported IMTs based on GMMs selected |
| vs30CommonValues |
Default value : VS30_COMMON_VALUES
|
|
List of common vs30 values |
import {AsyncPipe} from '@angular/common';
import {Component, computed, OnDestroy, OnInit} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {MatSelect} from '@angular/material/select';
import {
GmmFormControlIds,
gmmUtils,
MultiSelectableParam,
MW_COMMON_VALUES,
NshmpLibNgGmmMenuComponent,
NshmpLibNgGmmMultiParamMenuComponent,
NshmpLibNgGmmMultiSelectComponent,
NshmpLibNgGmmPlotOptionsControlPanelComponent,
VS30_COMMON_VALUES,
} from '@ghsc/nshmp-lib-ng/gmm';
import {
NshmpLibNgControlPanelButtonsComponent,
NshmpService,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {combineLatest, Subscription} from 'rxjs';
import {map} from 'rxjs/operators';
import {AppService} from '../../services/app.service';
/**
* Control panel form fields and buttons to call GMM vs distance service.
*/
@Component({
imports: [
MatFormField,
MatLabel,
MatSelect,
MatOption,
MatInput,
MatError,
AsyncPipe,
NshmpLibNgGmmMenuComponent,
NshmpLibNgGmmMultiSelectComponent,
NshmpLibNgGmmPlotOptionsControlPanelComponent,
NshmpLibNgControlPanelButtonsComponent,
NshmpLibNgGmmMultiParamMenuComponent,
ReactiveFormsModule,
],
selector: 'app-control-panel',
styleUrl: './control-panel.component.scss',
templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit, OnDestroy {
/** List of common magnitudes */
MwCommonValues = MW_COMMON_VALUES;
/** List of common vs30 values */
vs30CommonValues = VS30_COMMON_VALUES;
/** Form controls state */
controls = this.service.formGroup.controls;
/** Control panel form field state */
form = this.service.formGroup;
/** Whether a GMM has been selected */
gmmSelected = this.controls.gmmSource.getRawValue()?.length > 0;
/** Usage parameters */
parameters = computed(() => this.service.usage()?.response.parameters);
/** Service call info state */
serviceCallInfo = this.service.serviceCallInfo;
/** Supported IMTs based on GMMs selected */
supportedImts = this.service.supportedImts;
/** Whether magnitudes are multi-selectable */
MwMultiple$ = this.controls.multiSelectableParam.valueChanges.pipe(
map(
multiSelectableParam =>
multiSelectableParam.toString() === GmmFormControlIds.MW.toString(),
),
);
/** Whether Vs30 is multi-selectable */
vs30Multiple$ = this.controls.multiSelectableParam.valueChanges.pipe(
map(
multiSelectableParam =>
multiSelectableParam.toString() === GmmFormControlIds.VS30.toString(),
),
);
private subs: Subscription[] = [];
constructor(
public service: AppService,
private nshmpService: NshmpService,
) {}
ngOnInit(): void {
this.subs.push(
this.controls.gmmSource.valueChanges.subscribe(() => {
this.onGmmSource();
}),
);
this.subs.push(
this.controls.multiSelectableParam.valueChanges.subscribe(() =>
this.onMultiSelectableParam(),
),
);
this.subs.push(
this.controls.showEpistemicUncertainty.valueChanges.subscribe(() =>
this.onShowEpistemicUncertainty(),
),
);
this.subs.push(
combineLatest([
this.controls.dip.valueChanges,
this.controls.imt.valueChanges,
this.controls.Mw.valueChanges,
this.controls.MwMulti.valueChanges,
this.controls.vs30Multi.valueChanges,
this.controls.vs30.valueChanges,
this.controls.z1p0.valueChanges,
this.controls.z2p5.valueChanges,
this.controls.zSed.valueChanges,
this.controls.width.valueChanges,
]).subscribe(() => this.service.resetState()),
);
}
ngOnDestroy(): void {
this.subs.forEach(sub => sub?.unsubscribe());
}
/**
* On form submit.
*/
onSubmit(): void {
this.service.callService();
this.nshmpService.selectPlotControl();
}
private onGmmSource() {
const formValues = this.form.getRawValue();
if (
!this.service.state().usageResponse ||
formValues.gmmSource.length === 0
) {
this.controls.imt.patchValue(gmmUtils.imtPlaceHolder().value);
this.service.updateState({
supportedImts: [],
});
return;
}
const supportedImts = gmmUtils.getSupportedImts(
formValues.gmmSource,
this.service.state().usageResponse,
);
this.service.updateState({
supportedImts,
});
const imt = [...supportedImts].shift();
this.controls.imt.patchValue(imt?.value);
this.service.resetState();
}
private onMultiSelectableParam(): void {
if (!this.service.state().usageResponse) {
return;
}
const {multiSelectableParam} = this.form.getRawValue();
const parameters = this.service.state().usageResponse.response.parameters;
if (multiSelectableParam === MultiSelectableParam.MW) {
this.controls.Mw.setValue(parameters.Mw.value as number);
} else if (multiSelectableParam === MultiSelectableParam.VS30) {
this.controls.vs30.setValue(parameters.vs30.value as number);
}
this.controls.gmmSource.setValue([]);
this.controls.vs30Multi.setValue([]);
this.controls.MwMulti.setValue([]);
this.service.resetState();
}
private onShowEpistemicUncertainty(): void {
this.service.createPlots();
}
}
<!-- GMM Distance Conrol Panel -->
<form
class="settings-section control-panel height-full overflow-auto"
[formGroup]="form"
(submit)="onSubmit()"
>
<nshmp-lib-ng-gmm-multi-param-menu
[multiParamControl]="controls.multiSelectableParam"
/>
<!-- GMM menu -->
@if (parameters()) {
<nshmp-lib-ng-gmm-menu
[gmmControl]="controls.gmmSource"
[gmmGroupTypeControl]="controls.gmmGroupType"
[multiple]="controls.multiSelectableParam.value === 'gmm'"
[parameters]="parameters()"
[imtControl]="controls.imt"
[supportedImts]="supportedImts()"
/>
}
<!-- IMT select menu -->
<mat-form-field class="grid-col-12 imt-select">
<mat-label>Intensity Measure Type</mat-label>
<mat-select [formControl]="controls?.imt">
@if (gmmSelected === false) {
<mat-option selected="true" value="default">
--- Choose a GMM ---
</mat-option>
}
@for (imt of supportedImts(); track imt) {
<mat-option [value]="imt.value">
{{ imt.display }}
</mat-option>
}
</mat-select>
</mat-form-field>
<!-- Event parameters -->
<div class="settings-subsection event-parameters">
<mat-label class="settings-subsection--label">Event Parameters</mat-label>
<!-- Event parameters: Mw input -->
<div class="settings-subsection--section">
<nshmp-lib-ng-gmm-multi-select
class="grid-col-6 mw-input"
label="Mw"
[multiple]="MwMultiple$ | async"
[numberControl]="controls.Mw"
[parameter]="parameters()?.Mw"
placeholder="Select Magnitudes"
[selectControl]="controls?.MwMulti"
[selectOptions]="MwCommonValues"
/>
</div>
</div>
<!-- Source geometry -->
<div class="settings-subsection geometry-parameters">
<mat-label class="settings-subsection--label">Source Geometry</mat-label>
<div class="settings-subsection--section grid-row grid-gap-sm">
<!-- Source geometry: zTor input -->
<mat-form-field class="grid-col-4 ztor-input">
<mat-label>Z<sub>TOR</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.zTor.max"
[min]="parameters()?.zTor.min"
[formControl]="controls.zTor"
step="0.5"
type="number"
/>
<mat-error>
[
{{ parameters()?.zTor.min }},
{{ parameters()?.zTor.max }}
]
</mat-error>
</mat-form-field>
<!-- Source geometry: Dip input -->
<mat-form-field class="grid-col-4 dip-input">
<mat-label>Dip (°)</mat-label>
<input
matInput
[max]="parameters()?.dip.max"
[min]="parameters()?.dip.min"
[formControl]="controls?.dip"
step="0.5"
type="number"
/>
<mat-error>
[
{{ parameters()?.dip.min }},
{{ parameters()?.dip.max }}
]
</mat-error>
</mat-form-field>
<!-- Source geometry: Width input -->
<mat-form-field class="grid-col-4 width-input">
<mat-label>Width (km)</mat-label>
<input
matInput
[max]="parameters()?.width.max"
[min]="parameters()?.width.min"
[formControl]="controls.width"
step="0.5"
type="number"
/>
<mat-error>
[
{{ parameters()?.width.min }},
{{ parameters()?.width.max }}
]
</mat-error>
</mat-form-field>
</div>
</div>
<!-- Site & Basin-->
<div class="settings-subsection site-parameters">
<mat-label class="settings-subsection--label">Site & Basin</mat-label>
<div class="settings-subsection--section grid-row grid-gap-sm">
<!-- Site & Basin: Vs30 input -->
<nshmp-lib-ng-gmm-multi-select
class="grid-col-12 vs30-input"
label="V<sub>s30</sub> (<sup>m</sup>/<sub>s</sub>)"
[multiple]="vs30Multiple$ | async"
[numberControl]="controls.vs30"
[parameter]="parameters()?.vs30"
placeholder="Select values..."
[selectControl]="controls?.vs30Multi"
[selectOptions]="vs30CommonValues"
/>
<!-- Site & Basin: Z 1.0 input -->
<mat-form-field class="grid-col-4 z1p0-input">
<mat-label>Z<sub>1.0</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.z1p0.max"
[min]="parameters()?.z1p0.min"
[formControl]="controls.z1p0"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.z1p0.min }},
{{ parameters()?.z1p0.max }}
]
</mat-error>
</mat-form-field>
<!-- Site & Basin: Z 2.5 input -->
<mat-form-field class="grid-col-4 z2p5-input">
<mat-label>Z<sub>2.5</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.z2p5.max"
[min]="parameters()?.z2p5.min"
[formControl]="controls.z2p5"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.z2p5.min }},
{{ parameters()?.z2p5.max }}
]
</mat-error>
</mat-form-field>
<!-- Site & Basin: zSed input -->
<mat-form-field class="grid-col-4 zsed-input">
<mat-label>Z<sub>SED</sub> (km)</mat-label>
<input
matInput
[max]="parameters()?.zSed?.max"
[min]="parameters()?.zSed?.min"
[formControl]="controls.zSed"
step="1.0"
type="number"
/>
<mat-error>
[
{{ parameters()?.zSed?.min }},
{{ parameters()?.zSed?.max }}
]
</mat-error>
</mat-form-field>
</div>
</div>
<nshmp-lib-ng-gmm-plot-options-control-panel
[showEpistemicFormControl]="controls?.showEpistemicUncertainty"
/>
<div class="padding-y-3"></div>
<nshmp-lib-ng-control-panel-buttons
[plotDisabled]="form.invalid"
[serviceCallInfo]="serviceCallInfo()"
[resetDisabled]="form.pristine"
(resetClick)="service.resetControlPanel()"
/>
</form>