Merge branch 'rates-content' into 'main'

Rates  App: content

See merge request !514

projects/nshmp-apps/src/app/source/rates/components/content/content.component.html

@@ -5,4 +5,28 @@
       <app-plots />
     </ng-template>
   </mat-tab>
+
+  <!-- Rate data -->
+  <mat-tab label="Rate Data" [disabled]="hasData() === false">
+    <ng-template matTabContent>
+      <nshmp-lib-ng-data-table-panel
+        [table]="rateTableData()"
+        buttonText="Export rates as CSV"
+        title="Rates"
+        filename="rates {{ parameters() }}.csv"
+      />
+    </ng-template>
+  </mat-tab>
+
+  <!-- Probability data -->
+  <mat-tab label="Probability Data" [disabled]="hasData() === false">
+    <ng-template matTabContent>
+      <nshmp-lib-ng-data-table-panel
+        [table]="probabilityTableData()"
+        buttonText="Export probabilities as CSV"
+        title="Probabilities"
+        filename="probabilities {{ parameters() }}.csv"
+      />
+    </ng-template>
+  </mat-tab>
 </mat-tab-group>

projects/nshmp-apps/src/app/source/rates/components/content/content.component.ts

-import {Component} from '@angular/core';
+import {Component, computed} from '@angular/core';
 import {MatTabsModule} from '@angular/material/tabs';
+import {NshmpLibNgDataTablePanelComponent} from '@ghsc/nshmp-lib-ng/nshmp';
+import {plotUtils} from '@ghsc/nshmp-lib-ng/plot';
 
+import {AppService} from '../../services/app.service';
 import {PlotsComponent} from '../plots/plots.component';
 
 @Component({
-  imports: [MatTabsModule, PlotsComponent],
+  imports: [MatTabsModule, PlotsComponent, NshmpLibNgDataTablePanelComponent],
   selector: 'app-content',
   standalone: true,
   styleUrl: './content.component.scss',
   templateUrl: './content.component.html',
 })
-export class ContentComponent {}
+export class ContentComponent {
+  hasData = this.service.hasData;
+
+  parameters = computed(() => {
+    const {distance, latitude, longitude, model, timespan} =
+      this.service.formGroup.getRawValue();
+
+    return `${model} ${longitude} ${latitude} ${distance}km ${timespan}yr`;
+  });
+
+  probabilityTableData = computed(() =>
+    plotUtils.plotDataToTableData(this.service.plots().probability, {
+      addLabel: true,
+    })
+  );
+
+  rateTableData = computed(() =>
+    plotUtils.plotDataToTableData(this.service.plots().rate, {
+      addLabel: true,
+      yLabelTransform: () => 'Rate (1/yr)',
+      yValueFormat: (y: number) => y.toExponential(4),
+    })
+  );
+
+  constructor(private service: AppService) {}
+}

projects/nshmp-apps/src/app/source/rates/components/parameter-summary/parameter-summary.component.html

+<div class="grid-row parameter-summary">
+  <div class="grid-col-12 tablet:grid-col-6">
+    <mat-list class="parameter-list">
+      <!-- Model -->
+      <mat-list-item>
+        <span class="parameter">Model</span>:
+        {{ toDisplay(formGroup.value.model, service.availableModels()) }}
+      </mat-list-item>
+
+      <!-- Longitude -->
+      <mat-list-item>
+        <span class="parameter">Latitude</span>:
+        @if (!isNaN(formGroup.value.latitude)) {
+          {{ formGroup.value.latitude }}
+        }
+        °
+      </mat-list-item>
+
+      <!-- Latitude -->
+      <mat-list-item>
+        <span class="parameter">Longitude</span>:
+        @if (!isNaN(formGroup.value.longitude)) {
+          {{ formGroup.value.longitude }}
+        }
+        °
+      </mat-list-item>
+    </mat-list>
+  </div>
+
+  <div class="grid-col-12 tablet:grid-col-6">
+    <mat-list class="parameter-list">
+      <!-- Distance -->
+      <mat-list-item>
+        <span class="parameter">Cutoff Distance</span>:
+        {{ formGroup.value.distance }} km
+      </mat-list-item>
+
+      <!-- Timespan -->
+      <mat-list-item>
+        <span class="parameter">Timespan</span>:
+        {{ formGroup.value.timespan }} yr
+      </mat-list-item>
+    </mat-list>
+  </div>
+</div>

projects/nshmp-apps/src/app/source/rates/components/parameter-summary/parameter-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 {provideRouter} from '@angular/router';
+
+import {ParameterSummaryComponent} from './parameter-summary.component';
+
+describe('ParameterSummaryComponent', () => {
+  let component: ParameterSummaryComponent;
+  let fixture: ComponentFixture<ParameterSummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParameterSummaryComponent],
+      providers: [
+        provideHttpClient(),
+        provideRouter([]),
+        provideNoopAnimations(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ParameterSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/nshmp-apps/src/app/source/rates/components/parameter-summary/parameter-summary.component.ts

+import {Component} from '@angular/core';
+import {MatListModule} from '@angular/material/list';
+import {nshmpUtils} from '@ghsc/nshmp-lib-ng/nshmp';
+
+import {AppService} from '../../services/app.service';
+
+@Component({
+  imports: [MatListModule],
+  selector: 'app-parameter-summary',
+  standalone: true,
+  styleUrl: './parameter-summary.component.scss',
+  templateUrl: './parameter-summary.component.html',
+})
+export class ParameterSummaryComponent {
+  isNaN = Number.isNaN;
+  /** Function to get display from a `Parameter` */
+  toDisplay = nshmpUtils.parameterToDisplay;
+
+  formGroup = this.service.formGroup;
+
+  constructor(public service: AppService) {}
+}

projects/nshmp-apps/src/app/source/rates/components/plots/plots.component.html

@@ -13,5 +13,25 @@
         }
       </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>
+
+    <!-- App metadata -->
+    <mat-expansion-panel expanded>
+      <mat-expansion-panel-header>
+        <mat-panel-title>Application Metadata</mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <mat-divider />
+      <nshmp-lib-ng-app-metadata [repositories]="repositories()" />
+    </mat-expansion-panel>
   </mat-accordion>
 </nshmp-lib-ng-plots-container>

projects/nshmp-apps/src/app/source/rates/components/plots/plots.component.ts

 import {Component, computed} from '@angular/core';
 import {MatDivider} from '@angular/material/divider';
 import {MatExpansionModule} from '@angular/material/expansion';
+import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpLibNgPlotComponent,
   NshmpLibNgPlotsContainerComponent,
 } from '@ghsc/nshmp-lib-ng/plot';
 
 import {AppService} from '../../services/app.service';
+import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';
 
 @Component({
   imports: [
@@ -14,6 +16,8 @@ import {AppService} from '../../services/app.service';
     MatDivider,
     NshmpLibNgPlotComponent,
     NshmpLibNgPlotsContainerComponent,
+    ParameterSummaryComponent,
+    NshmpLibNgAppMetadataComponent,
   ],
   selector: 'app-plots',
   standalone: true,
@@ -26,5 +30,8 @@ export class PlotsComponent {
     this.service.plots().probability,
   ]);
 
+  /** Repo metadata */
+  repositories = computed(() => this.service.usage()?.metadata.repositories);
+
   constructor(private service: AppService) {}
 }

projects/nshmp-apps/src/app/source/rates/services/app.service.ts

@@ -99,6 +99,14 @@ export class AppService
     );
   }
 
+  get hasData(): Signal<boolean> {
+    return computed(
+      () =>
+        this.state().rateResponse !== null &&
+        this.state().probabilityResponse !== null
+    );
+  }
+
   /**
    * Add form group validators.
    */

projects/nshmp-apps/src/app/source/source.routes.ts

@@ -20,11 +20,11 @@ const routes: Routes = [
     path: 'mfd',
   },
   // Rates application
-  // {
-  //   loadComponent: () =>
-  //     import('./rates/app.component').then(com => com.AppComponent),
-  //   path: 'rates',
-  // },
+  {
+    loadComponent: () =>
+      import('./rates/app.component').then(com => com.AppComponent),
+    path: 'rates',
+  },
 ];
 
 /**