components/control-panel/control-panel.component.ts
Form fields for turning on and off different map layers.
OnInit
OnDestroy
| selector | app-control-panel |
| imports |
NshmpLibNgHazardModelFormComponent
MatLabel
MatSlideToggle
MatFormField
MatSelect
MatOption
ReactiveFormsModule
|
| templateUrl | ./control-panel.component.html |
| styleUrl | ./control-panel.component.scss |
Properties |
|
Methods |
|
constructor(service: AppService)
|
||||||
|
Parameters :
|
| Private createHazardLayer |
createHazardLayer()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Private onEartquakesToggle | ||||||
onEartquakesToggle(checked: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| Private onFeaturesToggle | ||||||||||||
onFeaturesToggle(checked: boolean, featureType: FeatureType)
|
||||||||||||
|
Call features service when toggled.
Parameters :
Returns :
void
|
| Private onHazardTileYear |
onHazardTileYear()
|
|
Returns :
void
|
| Private onModelChange |
onModelChange()
|
|
Returns :
void
|
| onNshmBoundaryToggle | ||||||||
onNshmBoundaryToggle(checked: boolean)
|
||||||||
|
Call map service when toggled.
Parameters :
Returns :
void
|
| Private onTestSitesToggle | ||||||||
onTestSitesToggle(checked: boolean)
|
||||||||
|
Call test sites service when toggled.
Parameters :
Returns :
void
|
| FeatureType |
Default value : FeatureType
|
|
Earthquake feature type |
| formGroup |
Default value : this.service.formGroup
|
|
Form field state |
| imts |
Type : Set<Imt>
|
Default value : new Set()
|
|
Available IMTs for hazard map tiles |
| LatestEarthquakeTime |
Default value : LatestEarthquakeTime
|
| returnPeriods |
Type : Set<ReturnPeriod>
|
Default value : new Set()
|
|
Available return periods for hazard map tiles |
| Public service |
Type : AppService
|
| Private subs |
Type : Subscription[]
|
Default value : []
|
| years |
Type : Set<number>
|
Default value : new Set()
|
|
Available years for hazard map tiles |
import {Component, OnDestroy, OnInit} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {MatSlideToggle} from '@angular/material/slide-toggle';
import {NshmpLibNgHazardModelFormComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {ReturnPeriod} from '@ghsc/nshmp-lib-ng/nshmp';
import {FeatureType} from '@ghsc/nshmp-utils-ts/libs/nshmp-haz/www/features-service';
import {Imt} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {nshmYear} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
import {Subscription} from 'rxjs';
import {LatestEarthquakeTime} from '../../models/control-form.model';
import {AppService} from '../../services/app.service';
/**
* Form fields for turning on and off different map layers.
*/
@Component({
imports: [
NshmpLibNgHazardModelFormComponent,
MatLabel,
MatSlideToggle,
MatFormField,
MatSelect,
MatOption,
ReactiveFormsModule,
],
selector: 'app-control-panel',
styleUrl: './control-panel.component.scss',
templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit, OnDestroy {
/** Earthquake feature type */
FeatureType = FeatureType;
/** Form field state */
formGroup = this.service.formGroup;
LatestEarthquakeTime = LatestEarthquakeTime;
/** Available IMTs for hazard map tiles */
imts: Set<Imt> = new Set();
/** Available return periods for hazard map tiles */
returnPeriods: Set<ReturnPeriod> = new Set();
/** Available years for hazard map tiles */
years: Set<number> = new Set();
private subs: Subscription[] = [];
constructor(public service: AppService) {}
ngOnInit(): void {
const controls = this.formGroup.controls;
this.subs.push(
controls.model.valueChanges.subscribe(() => this.onModelChange()),
);
this.subs.push(
controls.hasNshmBoundaryLayer.valueChanges.subscribe(checked =>
this.onNshmBoundaryToggle(checked),
),
);
this.subs.push(
controls.hazardTileImt.valueChanges.subscribe(() =>
this.createHazardLayer(),
),
);
this.subs.push(
controls.hazardTileReturnPeriod.valueChanges.subscribe(() =>
this.createHazardLayer(),
),
);
this.subs.push(
controls.hazardTileYear.valueChanges.subscribe(() =>
this.onHazardTileYear(),
),
);
this.subs.push(
controls.overlayOpacity.valueChanges.subscribe(() =>
this.createHazardLayer(),
),
);
this.subs.push(
controls.latestEarthquakeTime.valueChanges.subscribe(() =>
this.service.callEarthquakesService(),
),
);
this.subs.push(
controls.hasTestSitesLayer.valueChanges.subscribe(checked =>
this.onTestSitesToggle(checked),
),
);
this.subs.push(
controls.hasDecollementLayer.valueChanges.subscribe(checked =>
this.onFeaturesToggle(checked, FeatureType.DECOLLEMENT),
),
);
this.subs.push(
controls.hasFaultSectionLayer.valueChanges.subscribe(checked =>
this.onFeaturesToggle(checked, FeatureType.FAULT),
),
);
this.subs.push(
controls.hasInterfaceSectionsLayer.valueChanges.subscribe(checked =>
this.onFeaturesToggle(checked, FeatureType.INTERFACE),
),
);
this.subs.push(
controls.hasZoneSourcesLayer.valueChanges.subscribe(checked =>
this.onFeaturesToggle(checked, FeatureType.ZONE),
),
);
this.subs.push(
controls.hasEarthquakesLayer.valueChanges.subscribe(checked =>
this.onEartquakesToggle(checked),
),
);
}
ngOnDestroy(): void {
this.subs.forEach(sub => sub.unsubscribe());
}
/**
* Call map service when toggled.
*
* @param checked Wether toggle is checked
*/
onNshmBoundaryToggle(checked: boolean): void {
if (checked) {
this.service.callService();
}
}
/**
* Call features service when toggled.
*
* @param checked Whether toggle is checked
* @param featureType The feature type
*/
private onFeaturesToggle(checked: boolean, featureType: FeatureType): void {
if (checked) {
this.service.callFeaturesService(featureType);
}
}
/**
* Call test sites service when toggled.
* @param checked Whether toggle is checked
*/
private onTestSitesToggle(checked: boolean): void {
if (checked) {
this.service.callTestSitesService();
}
}
private onEartquakesToggle(checked: boolean): void {
if (checked) {
this.service.callEarthquakesService();
}
}
private createHazardLayer(): void {
this.service.updateState({
layers: {
...this.service.layers(),
hazardLayer: this.service.createHazardLayer(
this.service.findTile(
this.service.hazardTiles(),
this.formGroup.getRawValue(),
),
this.formGroup.getRawValue().overlayOpacity,
),
},
});
}
private onHazardTileYear(): void {
this.imts = new Set(
this.service
.filterTilesByYear(
this.service.hazardTiles(),
this.formGroup.getRawValue(),
)
.map(tile => tile.imt),
);
this.returnPeriods = new Set(
this.service
.filterTilesByImt(
this.service.hazardTiles(),
this.formGroup.getRawValue(),
)
.map(tile => tile.returnPeriod),
);
this.createHazardLayer();
}
private onModelChange(): void {
this.years = new Set(
this.service
.filterTilesByRegion(
this.service.hazardTiles(),
this.formGroup.getRawValue(),
)
.map(tile => nshmYear(tile.nshm)),
);
this.service.resetState();
}
}
<form [formGroup]="formGroup" class="height-full overflow-auto">
<div class="settings-section">
<mat-label class="label">Model Layers</mat-label>
<div class="settings-subsection padding-top-1">
<div class="settings-subsection--section">
<nshmp-lib-ng-hazard-model-form
[modelControl]="formGroup.controls.model"
[models]="service.availableModels()"
/>
<!-- NSHM boundary layer toggle -->
<div class="grid-col-12 nshm-boundary-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasNshmBoundaryLayer"
>
NSHM Border
<hr size="20" color="black" />
</mat-slide-toggle>
</div>
<!-- Test sites layer toggle -->
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasTestSitesLayer"
>
Test Sites
<span class="icon">
<img
src="assets/leaflet/icons/marker-icon-blue.png"
alt="Site marker icon"
/>
</span>
</mat-slide-toggle>
</div>
<!-- Decollement layer toggle -->
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasDecollementLayer"
>
Décollement Sections
<hr size="20" color="purple" />
</mat-slide-toggle>
</div>
<!-- Fault sections layer toggle -->
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasFaultSectionLayer"
>
Fault Sections
<hr size="20" color="red" />
</mat-slide-toggle>
</div>
<!-- Interface sections layer toggle -->
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasInterfaceSectionsLayer"
>
Interface Sections
<hr size="20" color="green" />
</mat-slide-toggle>
</div>
<!-- Zone sources layer toggle -->
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasZoneSourcesLayer"
>
Zone Sources
<hr size="20" color="blue" />
</mat-slide-toggle>
</div>
<!-- Earthquakes layer toggle -->
<div>
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasEarthquakesLayer"
>
Latest Earthquakes
<span class="earthquake-marker">
<svg height="12" width="12">
<circle
r="5"
cx="6"
cy="6"
fill="orange"
stroke="black"
stroke-width="1"
opacity="0.7"
/>
</svg>
</span>
</mat-slide-toggle>
</div>
<div class="margin-left-4">
<!-- Latest earthquake time -->
<div class="grid-col-12">
<mat-form-field>
<mat-label>Time Frame</mat-label>
<mat-select
[formControl]="formGroup.controls.latestEarthquakeTime"
>
<mat-option [value]="LatestEarthquakeTime.DAY">
1 Day
</mat-option>
<mat-option [value]="LatestEarthquakeTime.WEEK">
7 Days
</mat-option>
<mat-option [value]="LatestEarthquakeTime.MONTH">
30 Days
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<!-- Hazard map layer toggle -->
@if (service.layers().hazardLayer) {
<div>
<div class="grid-col-12 layer-toggle">
<mat-slide-toggle
[formControl]="formGroup.controls.hasHazardTiles"
>
Hazard Map
</mat-slide-toggle>
</div>
<div class="margin-left-4">
<!-- Hazard map year -->
<div class="grid-col-12">
<mat-form-field>
<mat-label>Year</mat-label>
<mat-select [formControl]="formGroup.controls.hazardTileYear">
@for (year of years; track year) {
<mat-option [value]="year">
{{ year }}
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<!-- Hazard map imt -->
<div class="grid-col-12">
<mat-form-field>
<mat-label>IMT</mat-label>
<mat-select [formControl]="formGroup.controls.hazardTileImt">
@for (imt of imts; track imt) {
<mat-option [value]="imt">
{{ imt }}
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<!-- Hazard map return period -->
<div class="grid-col-12">
<mat-form-field>
<mat-label>Return Period</mat-label>
<mat-select
[formControl]="formGroup.controls.hazardTileReturnPeriod"
>
@for (returnPeriod of returnPeriods; track returnPeriod) {
<mat-option [value]="returnPeriod">
{{ returnPeriod }}
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
</div>
</div>
}
</div>
</div>
</div>
</form>