v 2.16.0

.gitignore

@@ -45,3 +45,5 @@ local-serve.sh
 # Claude Code
 .claude/
 CLAUDE.md
+TRANSLATIONS_SCRATCH.md
+docs/

package.json

@@ -123,4 +123,4 @@
     "ts-node": "^8.10.2",
     "typescript-eslint": "8.40.0"
   }
-}
+}

src/app/app.component.ts

@@ -8,7 +8,11 @@ import {
   inject,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { MatSidenav } from '@angular/material/sidenav';
+import {
+  MatSidenav,
+  MatSidenavContainer,
+  MatSidenavContent,
+} from '@angular/material/sidenav';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { MatDialog } from '@angular/material/dialog';
@@ -57,6 +61,11 @@ import {
   NativeDateAdapter,
 } from '@angular/material/core';
 import { MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
+import { NgClass, AsyncPipe } from '@angular/common';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { HeaderComponent } from './components/header/header.component';
+import { MapComponent } from './components/map/map.component';
+import { ResultsMenuComponent } from './components/results-menu/results-menu.component';
 
 @Component({
   selector: 'app-root',
@@ -70,7 +79,17 @@ import { MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
     { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
     { provide: MAT_DATE_LOCALE, useValue: 'en' },
   ],
-  standalone: false,
+  imports: [
+    MatSidenavContainer,
+    MatSidenav,
+    NgClass,
+    SidebarComponent,
+    MatSidenavContent,
+    HeaderComponent,
+    MapComponent,
+    ResultsMenuComponent,
+    AsyncPipe,
+  ],
 })
 export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   private store$ = inject<Store<AppState>>(Store);

src/app/app.module.ts

@@ -1,89 +1,8 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTableModule } from '@angular/material/table';
-import { MatSortModule } from '@angular/material/sort';
-
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { ToastrModule } from 'ngx-toastr';
-
-import * as store from './store';
-
-import { MatSharedModule } from '@shared';
-import { SidebarModule } from '@components/sidebar';
-import { HeaderModule } from '@components/header';
-import { MapModule } from '@components/map';
-import { CodeExportModule } from '@components/shared/code-export';
-import { ResultsMenuModule } from '@components/results-menu';
-import { BaselineChartModule } from '@components/baseline-chart';
-import { HelpModule } from '@components/help';
 import { AppComponent } from './app.component';
 
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient } from '@angular/common/http';
 
-import * as services from '@services';
-
-import {
-  NgcCookieConsentModule,
-  NgcCookieConsentConfig,
-} from 'ngx-cookieconsent';
-import { getSaver, SAVER } from '@services/saver.provider';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-} from '@angular/material/core';
-import {
-  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
-  MAT_MOMENT_DATE_FORMATS,
-  MomentDateAdapter,
-} from '@angular/material-moment-adapter';
-import { TimeseriesResultsMenuModule } from '@components/results-menu/timeseries-results-menu/timeseries-results-menu.module';
-
-// info about cookie consent module: https://tinesoft.github.io/ngx-cookieconsent/home
-const cookieConfig: NgcCookieConsentConfig = {
-  autoOpen: false,
-  cookie: {
-    domain: window.location.hostname,
-  },
-  position: 'bottom',
-  theme: 'edgeless',
-  palette: {
-    popup: {
-      background: '#000000',
-      text: '#ffffff',
-      link: '#ffffff',
-    },
-    button: {
-      background: '#236192',
-      text: '#ffffff',
-      border: 'transparent',
-    },
-  },
-  type: 'info',
-  content: {
-    message:
-      'This website uses cookies to ensure you get the best experience on our website.',
-    dismiss: 'Dismiss',
-    deny: 'Refuse cookies',
-    link: 'Learn more',
-    href: 'https://cookiesandyou.com',
-    policy: 'Cookie Policy',
-  },
-};
-
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -92,85 +11,3 @@ export function HttpLoaderFactory(http: HttpClient) {
 export const routes = [
   { path: '**', name: 'AppComponent', component: AppComponent },
 ];
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient],
-      },
-    }),
-    BrowserAnimationsModule,
-    NgcCookieConsentModule.forRoot(cookieConfig),
-    MatBottomSheetModule,
-    MatSharedModule,
-    RouterModule.forRoot(routes, { useHash: true }),
-    StoreModule.forRoot(store.reducers, { metaReducers: store.metaReducers }),
-    EffectsModule.forRoot(store.appEffects),
-    MatSidenavModule,
-    MatTableModule,
-    MatSortModule,
-    SidebarModule,
-    MapModule,
-    ResultsMenuModule,
-    HeaderModule,
-    MatMenuModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatDialogModule,
-    BaselineChartModule,
-    HelpModule,
-    ToastrModule.forRoot({ positionClass: 'inline', preventDuplicates: true }),
-    CodeExportModule,
-    TimeseriesResultsMenuModule,
-  ],
-  providers: [
-    services.AsfApiService,
-    services.AsfLanguageService,
-    services.UrlStateService,
-    services.MapService,
-    services.DrawService,
-    services.WktService,
-    services.LayerService,
-    services.ProductService,
-    services.BulkDownloadService,
-    services.SearchParamsService,
-    services.RangeService,
-    services.PolygonValidationService,
-    services.DateExtremaService,
-    services.EnvironmentService,
-    services.PropertyService,
-    services.LegacyAreaFormatService,
-    services.BannerApiService,
-    services.ScreenSizeService,
-    services.KeyboardService,
-    services.UserDataService,
-    services.SavedSearchService,
-    services.UnzipApiService,
-    services.ScenesService,
-    services.SearchService,
-    services.Hyp3ApiService,
-    services.Hyp3JobStatusService,
-    services.Hyp3JobService,
-    services.PossibleHyp3JobsService,
-    services.OnDemandService,
-    services.Hyp3JobPollingService,
-    services.PairService,
-    services.SceneSelectService,
-    { provide: SAVER, useFactory: getSaver },
-    {
-      provide: DateAdapter,
-      useClass: MomentDateAdapter,
-      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
-    },
-    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
-    // { provide: Window, useValue: window },
-  ],
-  bootstrap: [AppComponent],
-  exports: [MatTableModule],
-})
-export class AppModule {}

src/app/components/baseline-chart/baseline-chart.component.html

@@ -1,25 +1,31 @@
-<div *ngIf="breakpoint$ | async as breakpoint">
-  <ul>
-    <li>
-      <div class="box reference-box"></div>
-      {{ 'REFERENCE' | translate }}
-    </li>
-    <li>
-      <div class="box selected-box"></div>
-      {{ 'SELECTED' | translate }}
-    </li>
-    <li>
-      <div class="box download-box"></div>
-      {{ 'DOWNLOADS' | translate }}
-    </li>
-    <li *ngIf="breakpoint === breakpoints.MOBILE">
-      <div class="box baseline-box"></div>
-      {{ 'CRITICAL_BASELINE_ABBR' | translate }}
-    </li>
-    <li *ngIf="breakpoint !== breakpoints.MOBILE">
-      <div class="box baseline-box"></div>
-      {{ 'CRITICAL_BASELINE' | translate }}
-    </li>
-  </ul>
-</div>
+@if (breakpoint$ | async; as breakpoint) {
+  <div>
+    <ul>
+      <li>
+        <div class="box reference-box"></div>
+        {{ 'REFERENCE' | translate }}
+      </li>
+      <li>
+        <div class="box selected-box"></div>
+        {{ 'SELECTED' | translate }}
+      </li>
+      <li>
+        <div class="box download-box"></div>
+        {{ 'DOWNLOADS' | translate }}
+      </li>
+      @if (breakpoint === breakpoints.MOBILE) {
+        <li>
+          <div class="box baseline-box"></div>
+          {{ 'CRITICAL_BASELINE_ABBR' | translate }}
+        </li>
+      }
+      @if (breakpoint !== breakpoints.MOBILE) {
+        <li>
+          <div class="box baseline-box"></div>
+          {{ 'CRITICAL_BASELINE' | translate }}
+        </li>
+      }
+    </ul>
+  </div>
+}
 <div #baselineChart id="baseline-chart" (resized)="onResized()"></div>

src/app/components/baseline-chart/baseline-chart.component.ts

@@ -10,7 +10,7 @@ import {
 import { combineLatest } from 'rxjs';
 import { map, tap, filter } from 'rxjs/operators';
 
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 
 import { Store } from '@ngrx/store';
 import { AppState } from '@store';
@@ -23,6 +23,8 @@ import { criticalBaselineFor, CMRProduct } from '@models';
 import * as d3 from 'd3';
 import * as models from '@models';
 import * as services from '@services';
+import { AsyncPipe } from '@angular/common';
+import { ResizedDirective } from '../../directives/resized.directive';
 export enum ChartDatasets {
   MASTER = 0,
   SELECTED = 1,
@@ -41,7 +43,7 @@ interface Point {
   selector: 'app-baseline-chart',
   templateUrl: './baseline-chart.component.html',
   styleUrls: ['./baseline-chart.component.scss'],
-  standalone: false,
+  imports: [ResizedDirective, AsyncPipe, TranslateModule],
 })
 export class BaselineChartComponent implements OnInit, OnDestroy {
   translate = inject(TranslateService);

src/app/components/baseline-chart/index.ts

@@ -1,2 +1 @@
 export * from './baseline-chart.component';
-export * from './baseline-chart.module';