Merge branch 'rtgm--parameter-summary' into 'main'

RTGM:  summary panels

See merge request !490

projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel/control-panel.component.html

@@ -10,6 +10,20 @@
     <mat-hint>{{ parameters()?.label.info }}</mat-hint>
   </mat-form-field>
 
+  <!-- Building code -->
+  <mat-form-field class="grid-col-12 margin-bottom-3">
+    <mat-label>{{ parameters()?.building_code.label }}</mat-label>
+
+    <mat-select [formControl]="formGroup.controls.buildingCode">
+      @for (buildingCode of buildingCodes(); track buildingCode) {
+        <mat-option [value]="buildingCode">
+          {{ buildingCode }}
+        </mat-option>
+      }
+    </mat-select>
+    <mat-hint>{{ parameters()?.building_code.info }}</mat-hint>
+  </mat-form-field>
+
   <!-- IMLs -->
   <mat-form-field class="grid-col-12 margin-bottom-05">
     <mat-label>
@@ -36,20 +50,6 @@
     }
   </mat-form-field>
 
-  <!-- Building code -->
-  <mat-form-field class="grid-col-12">
-    <mat-label>{{ parameters()?.building_code.label }}</mat-label>
-
-    <mat-select [formControl]="formGroup.controls.buildingCode">
-      @for (buildingCode of buildingCodes(); track buildingCode) {
-        <mat-option [value]="buildingCode">
-          {{ buildingCode }}
-        </mat-option>
-      }
-    </mat-select>
-    <mat-hint>{{ parameters()?.building_code.info }}</mat-hint>
-  </mat-form-field>
-
   <nshmp-lib-ng-control-panel-buttons
     [plotDisabled]="formGroup.invalid"
     [serviceCallInfo]="service.serviceCallInfo()"

projects/nshmp-apps/src/app/designmaps/rtgm/components/parameter-summary/parameter-summary.component.html

-<p>parameter-summary works!</p>
+<div class="grid-row parameter-summary">
+  <div class="grid-col-12 overflow-x-scroll">
+    <mat-list class="parameter-list">
+      <mat-list-item>
+        <span class="parameter">Label</span>:
+        {{ formGroup.value.label }}
+      </mat-list-item>
+
+      <mat-list-item>
+        <span class="parameter">Building Code</span>:
+        {{ formGroup.value.buildingCode }}
+      </mat-list-item>
+    </mat-list>
+
+    <nshmp-lib-ng-data-table
+      [table]="tableData(formGroup.value.iml, formGroup.value.afe)"
+    />
+  </div>
+</div>

projects/nshmp-apps/src/app/designmaps/rtgm/components/parameter-summary/parameter-summary.component.scss

+nshmp-lib-ng-data-table {
+  mat-card {
+    box-shadow: none !important;
+
+    .data-table-container {
+      margin: 0 !important;
+      padding-top: 0 !important;
+    }
+  }
+}

projects/nshmp-apps/src/app/designmaps/rtgm/components/parameter-summary/parameter-summary.component.spec.ts

+import {provideHttpClient} from '@angular/common/http';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {ParameterSummaryComponent} from './parameter-summary.component';
@@ -9,6 +10,7 @@ describe('ParameterSummaryComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ParameterSummaryComponent],
+      providers: [provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ParameterSummaryComponent);

projects/nshmp-apps/src/app/designmaps/rtgm/components/parameter-summary/parameter-summary.component.ts

-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MatListModule} from '@angular/material/list';
+import {
+  NshmpLibNgDataTableComponent,
+  TableData,
+} from '@ghsc/nshmp-lib-ng/nshmp';
+
+import {AppService} from '../../services/app.service';
 
 @Component({
-  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  imports: [MatListModule, NshmpLibNgDataTableComponent],
   selector: 'app-parameter-summary',
   standalone: true,
   styleUrl: './parameter-summary.component.scss',
   templateUrl: './parameter-summary.component.html',
 })
-export class ParameterSummaryComponent {}
+export class ParameterSummaryComponent {
+  formGroup = this.service.formGroup;
+
+  constructor(private service: AppService) {}
+
+  tableData(iml: string, afe: string): TableData[] {
+    const imls = iml?.split(',') ?? [];
+    const afes = afe?.split(',') ?? [];
+
+    return [
+      {
+        td: imls,
+        th: 'IMLs',
+      },
+      {
+        td: afes,
+        th: 'AFEs',
+      },
+    ];
+  }
+}

projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.html

@@ -13,5 +13,41 @@
         }
       </mat-expansion-panel>
     }
+
+    <!-- RTGM Summary -->
+    <mat-expansion-panel
+      [expanded]="serviceResponse()"
+      [disabled]="serviceResponse() === null"
+    >
+      <mat-expansion-panel-header>
+        <mat-panel-title>RTGM Summary</mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <mat-divider />
+      <app-rtgm-summary />
+    </mat-expansion-panel>
+
+    <!-- Rist targets -->
+    <mat-expansion-panel
+      [expanded]="serviceResponse()"
+      [disabled]="serviceResponse() === null"
+    >
+      <mat-expansion-panel-header>
+        <mat-panel-title>Rist Targets</mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <mat-divider />
+      <app-risk-targets />
+    </mat-expansion-panel>
+
+    <!-- Parameter summary -->
+    <mat-expansion-panel expanded>
+      <mat-expansion-panel-header>
+        <mat-panel-title>Parameter Summary</mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <mat-divider />
+      <app-parameter-summary />
+    </mat-expansion-panel>
   </mat-accordion>
 </nshmp-lib-ng-plots-container>

projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.ts

@@ -8,6 +8,8 @@ import {
 
 import {AppService} from '../../services/app.service';
 import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';
+import {RiskTargetsComponent} from '../risk-targets/risk-targets.component';
+import {RtgmSummaryComponent} from '../rtgm-summary/rtgm-summary.component';
 
 @Component({
   imports: [
@@ -16,6 +18,8 @@ import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.
     MatExpansionModule,
     MatDivider,
     ParameterSummaryComponent,
+    RiskTargetsComponent,
+    RtgmSummaryComponent,
   ],
   selector: 'app-plots',
   standalone: true,
@@ -31,5 +35,7 @@ export class PlotsComponent {
     this.service.plots().integralHazardFragility,
   ]);
 
+  serviceResponse = this.service.serviceResponse;
+
   constructor(private service: AppService) {}
 }

projects/nshmp-apps/src/app/designmaps/rtgm/components/risk-targets/risk-targets.component.html

+<nshmp-lib-ng-data-table [table]="tableData(riskTargets())" />

projects/nshmp-apps/src/app/designmaps/rtgm/components/risk-targets/risk-targets.component.spec.ts

+import {provideHttpClient} from '@angular/common/http';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+
+import {RiskTargetsComponent} from './risk-targets.component';
+
+describe('RiskTargetsComponent', () => {
+  let component: RiskTargetsComponent;
+  let fixture: ComponentFixture<RiskTargetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RiskTargetsComponent],
+      providers: [provideHttpClient(), provideNoopAnimations()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RiskTargetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/nshmp-apps/src/app/designmaps/rtgm/components/risk-targets/risk-targets.component.ts

+import {Component, computed} from '@angular/core';
+import {MatListModule} from '@angular/material/list';
+import {
+  NshmpLibNgDataTableComponent,
+  TableData,
+} from '@ghsc/nshmp-lib-ng/nshmp';
+import {RiskTargets} from '@ghsc/nshmp-utils-ts/libs/erp/rtgm';
+
+import {AppService} from '../../services/app.service';
+
+@Component({
+  imports: [MatListModule, NshmpLibNgDataTableComponent],
+  selector: 'app-risk-targets',
+  standalone: true,
+  styleUrl: './risk-targets.component.scss',
+  templateUrl: './risk-targets.component.html',
+})
+export class RiskTargetsComponent {
+  riskTargets = computed(
+    () => this.service.serviceResponse()?.response.riskTargets
+  );
+
+  constructor(private service: AppService) {}
+
+  tableData(riskTargets: RiskTargets): TableData[] {
+    if (riskTargets === undefined) {
+      return [];
+    }
+
+    return [
+      {
+        td: [`${riskTargets.UH_retPeriod.toPrecision(4)} years`],
+        th: 'Initial target return period',
+      },
+      {
+        td: [riskTargets.beta.toPrecision(4)],
+        th: 'Standard deviation of fragility curve',
+      },
+      {
+        td: [riskTargets.condCollapseProb.toPrecision(4)],
+        th: 'Target conditional collapse fragility percentile',
+      },
+      {
+        td: [`${riskTargets.riskTgt_Annual.toExponential(4)} yr^-1`],
+        th: 'Target Annualized collapse risk',
+      },
+      {
+        td: [riskTargets.tgtCollapseRisk_T.toPrecision(4)],
+        th: 'Target risk of collapse over the specified time horizon',
+      },
+      {
+        td: [`${riskTargets.timeHorizon_Yr} years`],
+        th: 'Time horizon over which collapse risk is to be determined',
+      },
+    ];
+  }
+}

projects/nshmp-apps/src/app/designmaps/rtgm/components/rtgm-summary/rtgm-summary.component.html

+<nshmp-lib-ng-data-table [table]="tableData(summaries())" />

projects/nshmp-apps/src/app/designmaps/rtgm/components/rtgm-summary/rtgm-summary.component.spec.ts

+import {provideHttpClient} from '@angular/common/http';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+
+import {RtgmSummaryComponent} from './rtgm-summary.component';
+
+describe('RtgmSummaryComponent', () => {
+  let component: RtgmSummaryComponent;
+  let fixture: ComponentFixture<RtgmSummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RtgmSummaryComponent],
+      providers: [provideHttpClient(), provideNoopAnimations()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RtgmSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/nshmp-apps/src/app/designmaps/rtgm/components/rtgm-summary/rtgm-summary.component.ts

+import {Component, computed} from '@angular/core';
+import {
+  NshmpLibNgDataTableComponent,
+  TableData,
+} from '@ghsc/nshmp-lib-ng/nshmp';
+import {RtgmSummary} from '@ghsc/nshmp-utils-ts/libs/erp/rtgm';
+
+import {AppService} from '../../services/app.service';
+
+@Component({
+  imports: [NshmpLibNgDataTableComponent],
+  selector: 'app-rtgm-summary',
+  standalone: true,
+  styleUrl: './rtgm-summary.component.scss',
+  templateUrl: './rtgm-summary.component.html',
+})
+export class RtgmSummaryComponent {
+  summaries = computed(() => this.service.serviceResponse()?.response.summary);
+
+  constructor(private service: AppService) {}
+
+  tableData(summaries: Record<string, RtgmSummary>): TableData[] {
+    const {label} = this.service.formGroup.getRawValue();
+
+    if (summaries && label in summaries) {
+      const summary = summaries[label];
+
+      return [
+        {
+          td: [`${summary.uhgm.toPrecision(4)}g`],
+          th: 'Uniform hazard ground motion',
+        },
+        {
+          td: [`${summary.rtgm.toFixed(4)}g`],
+          th: 'Risk-targeted ground motion',
+        },
+        {
+          td: [summary.riskCoeff.toPrecision(4)],
+          th: 'Risk Coefficient (RTGM / UHGM)',
+        },
+        {
+          td: [summary.colRisk_annual.toExponential(4)],
+          th: 'Annual collapse risk',
+        },
+        {
+          td: [summary.colRisk_T.toPrecision(4)],
+          th: 'Collapse risk',
+        },
+        {
+          td: [summary.timePeriod],
+          th: 'Time horizon over which collapse risk is to be determined',
+        },
+      ];
+    } else {
+      return [];
+    }
+  }
+}

projects/nshmp-apps/src/app/designmaps/rtgm/services/app.service.ts

@@ -87,6 +87,10 @@ export class AppService
     return computed(() => this.state().serviceCallInfo);
   }
 
+  get serviceResponse(): Signal<RtgmCalcResponse> {
+    return computed(() => this.state().serviceResponse);
+  }
+
   /**
    * Returns the Gmm distance usage response.
    */