update node to 20.17.0

With the Angular update the smart people at google moved the
location where the build output is written to. It is now in a
subfolder called 'browser'. This means the default lookup locations
of Spring don't work anymore.

build.gradle

@@ -13,18 +13,18 @@ ext {
   javaVersion=21
 
   version_log4j2= '2.20.0' // keep in sync with spring-boot-starter-log4j2
-  version_spring = '3.3.2'
+  version_spring = '3.3.4'
   version_junit = '5.10.3'
   version_junit_platform = '1.10.3'
-  version_nodejs = '18.18.0' // keep in sync with npm
-  version_npm = '9.8.1'    // keep in sync with nodejs
+  version_nodejs = '20.17.0' // keep in sync with npm
+  version_npm = '10.8.2'    // keep in sync with nodejs
 
-  lib_antlr = "org.antlr:antlr4:4.13.1"
+  lib_antlr = "org.antlr:antlr4:4.13.2"
 
   lib_commons_collections4 = 'org.apache.commons:commons-collections4:4.4'
-  lib_commons_csv= 'org.apache.commons:commons-csv:1.11.0'
-  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.15.0'
-  lib_jackson_databind = 'com.fasterxml.jackson.core:jackson-databind:2.17.2'
+  lib_commons_csv= 'org.apache.commons:commons-csv:1.12.0'
+  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.17.0'
+  lib_jackson_databind = 'com.fasterxml.jackson.core:jackson-databind:2.18.0'
 
   lib_log4j2_core = "org.apache.logging.log4j:log4j-core:${version_log4j2}"
   lib_log4j2_slf4j_impl = "org.apache.logging.log4j:log4j-slf4j-impl:${version_log4j2}"

pdb-js/angular.json

@@ -18,12 +18,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "build/generated/resources",
+            "outputPath": {
+              "base": "build/generated/resources"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -35,7 +38,8 @@
             ],
             "scripts": [
               "node_modules/marked/marked.min.js"
-            ]
+            ],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -61,9 +65,7 @@
               "sourceMap": true
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -78,10 +80,10 @@
           },
           "configurations": {
             "production": {
-              "browserTarget": "pdb-js:build:production"
+              "buildTarget": "pdb-js:build:production"
             },
             "development": {
-              "browserTarget": "pdb-js:build:development"
+              "buildTarget": "pdb-js:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -89,7 +91,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "pdb-js:build"
+            "buildTarget": "pdb-js:build"
           }
         },
         "test": {

pdb-js/package.json

@@ -14,28 +14,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.7",
-    "@angular/cdk": "^16.2.6",
-    "@angular/common": "^16.2.7",
-    "@angular/compiler": "^16.2.7",
-    "@angular/core": "^16.2.7",
-    "@angular/forms": "^16.2.7",
-    "@angular/material": "^16.2.6",
-    "@angular/platform-browser": "^16.2.7",
-    "@angular/platform-browser-dynamic": "^16.2.7",
-    "@angular/router": "^16.2.7",
+    "@angular/animations": "^18.2.6",
+    "@angular/cdk": "^18.2.6",
+    "@angular/common": "^18.2.6",
+    "@angular/compiler": "^18.2.6",
+    "@angular/core": "^18.2.6",
+    "@angular/forms": "^18.2.6",
+    "@angular/material": "^18.2.6",
+    "@angular/platform-browser": "^18.2.6",
+    "@angular/platform-browser-dynamic": "^18.2.6",
+    "@angular/router": "^18.2.6",
     "luxon": "^3.4.3",
-    "marked": "^4.2.12",
-    "ngx-markdown": "^16.0.0",
+    "marked": "^12",
+    "ngx-markdown": "18.0.0",
     "rxjs": "~7.5.0",
     "rxjs-compat": "^6.6.7",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.3"
+    "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.4",
-    "@angular/cli": "^16.2.4",
-    "@angular/compiler-cli": "^16.2.7",
+    "@angular-devkit/build-angular": "^18.2.6",
+    "@angular/cli": "^18.2.6",
+    "@angular/compiler-cli": "^18.2.6",
     "@types/jasmine": "~4.3.0",
     "@types/luxon": "^3.3.2",
     "@types/marked": "^4.0.8",
@@ -47,6 +47,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "5.1"
+    "typescript": "^5.4.5"
   }
 }

pdb-js/src/app/app-routing.module.ts

@@ -7,14 +7,12 @@ import { HelpPageComponent } from "./help-page/help-page.component";
 import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
 import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
 import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
-import { DatePickerTestComponent } from "./components/datepicker/date-picker-test.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent },
   { path: "vis", component: VisualizationPageComponent },
   { path: "dashboard", component: DashboardPageComponent },
   { path: "dashboard/:id", component: DashboardComponent },
-  { path: "testing/datepicker", component: DatePickerTestComponent },
   { path: "upload", component: UploadPageComponent },
   { path: "grid", component: CustomizableGridComponent },
   { path: "help", component: HelpPageComponent },

pdb-js/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { enableProdMode, NgModule } from "@angular/core";
-import { HttpClientModule } from "@angular/common/http";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import { AppRoutingModule } from "./app-routing.module";
@@ -12,7 +12,6 @@ import { UploadPageComponent } from "./upload-page/upload-page.component";
 import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
 
 import { DatePickerComponent } from "./components/datepicker/date-picker.component";
-import { DatePickerTestComponent } from "./components/datepicker/date-picker-test.component";
 
 import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { MatButtonModule } from "@angular/material/button";
@@ -61,14 +60,12 @@ import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-
 import { FocusDirective } from "./focus.directive";
 import { MarkdownModule } from "ngx-markdown";
 
-@NgModule({
-  declarations: [
+@NgModule({ declarations: [
         AppComponent,
         MainPageComponent,
         HelpPageComponent,
         UploadPageComponent,
         DatePickerComponent,
-    DatePickerTestComponent,
         VisualizationPageComponent,
         YAxisDefinitionComponent,
         QueryAutocompleteComponent,
@@ -91,8 +88,7 @@ import { MarkdownModule } from "ngx-markdown";
         ConfirmationDialogComponent,
         FocusDirective,
     ],
-  imports: [
-    MarkdownModule.forRoot(),
+    bootstrap: [AppComponent], imports: [MarkdownModule.forRoot(),
         BrowserModule,
         AppRoutingModule,
         FormsModule,
@@ -116,15 +112,10 @@ import { MarkdownModule } from "ngx-markdown";
         MatTableModule,
         MatTooltipModule,
         BrowserAnimationsModule,
-    HttpClientModule,
-    OverlayModule,
-  ],
-  providers: [{
+        OverlayModule], providers: [{
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: { hasBackdrop: true },
-  }],
-  bootstrap: [AppComponent],
-})
+        }, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {}
 
 enableProdMode();

pdb-js/src/app/components/datepicker/date-picker-test.component.html

@@ -1,15 +0,0 @@
-<style></style>
-
-<form>
-  <app-date-picker
-    [formControl]="datePicker"
-    (dateValueSelected)="(dateChanged)"
-  ></app-date-picker>
-
-  Type: {{ datePicker.value?.type }}<br />
-  value: {{ datePicker.value?.value }}<br />
-  display: {{ datePicker.value?.display }}<br />
-</form>
-
-<button (click)="readValue()">read value</button>
-<div>{{ output }}</div>

pdb-js/src/app/components/datepicker/date-picker-test.component.ts

@@ -1,29 +0,0 @@
-import { Component } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { DateValue } from "./date-picker.component";
-
-@Component({
-  selector: "app-date-picker-test",
-  templateUrl: "./date-picker-test.component.html",
-})
-export class DatePickerTestComponent {
-  datePicker = new FormControl<DateValue>(
-    new DateValue(
-      "ABSOLUTE",
-      "2019-10-05 12:34:56 - 2019-10-11 23:59:59",
-      "2019-10-05 12:34:56 - 2019-10-11 23:59:59",
-    ),
-  );
-
-  output = "";
-
-  readValue() {
-    this.output = this.datePicker.value?.type + " " +
-      this.datePicker.value?.value;
-  }
-
-  dateChanged(e: any) {
-    console.log("dateChanged", e);
-    this.output += "dateChanged: " + e;
-  }
-}

pdb-js/src/app/components/datepicker/date-picker.component.html

@@ -1,13 +1,4 @@
 <style>
-  #date-box {
-    width: 23.5em;
-  }
-
-  .header-box {
-    display: flex;
-    justify-content: end;
-  }
-
   .date-picker-overlay {
     width: 500px;
     transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
@@ -31,7 +22,6 @@
   }
 </style>
 
-<div class="header-box">
 <button
   mat-button
   matTooltip="Date Picker"
@@ -42,7 +32,6 @@
 >
   {{ datePickerControl.value?.display }}
 </button>
-</div>
 
 <ng-template
   cdkConnectedOverlay
@@ -193,8 +182,6 @@
           <input matInput [formControl]="dateRange" name="dates" />
         </mat-form-field>
         <button mat-button (click)="applyAbsoluteTime()">Apply</button>
-
-        <p>Value: {{ dateRange.value }}</p>
       </mat-tab>
     </mat-tab-group>
   </div>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -3,6 +3,16 @@
     width: 100%;
     height: 100%;
   }
+  .toolbar {
+    display: flex;
+    flex-direction: row;
+  }
+  .toolbar #filter-date-range{
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
   .center {
     position: absolute;
     top: 50%;
@@ -37,6 +47,9 @@
     flex-basis: 0;
     
   }
+  .editable {
+    padding: 0.5em;
+  }
 
   .editable-hovered {
     visibility: hidden;
@@ -73,12 +86,14 @@
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
     <button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button>
+    <div id="filter-date-range">
+      Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
+    </div>
   </div>
   <div class="editable">
     <h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>
     <p>{{dashboard.description}}</p>
   </div>
-
   <div cdkDropListGroup class="dashboard-area">
     <div 
       cdkDropList

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
@@ -9,6 +9,7 @@ import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
 import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
+import { DatePickerChange, DatePickerComponent } from 'src/app/components/datepicker/date-picker.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -24,6 +25,9 @@ export class DashboardComponent implements OnInit {
 
   plotWidgetRenderData: PlotWidgetRenderData[] = [];
 
+  @ViewChild("datePicker")
+  datePicker!: DatePickerComponent;
+
   constructor(
     private route: ActivatedRoute,  
     private service: DashboardService, 
@@ -58,6 +62,13 @@ export class DashboardComponent implements OnInit {
       });
   }
 
+  updateDateRange(e: DatePickerChange) {
+    this.plotWidgetRenderData.forEach(r => {
+      r.widget.config.dateRange = e.value;
+    });
+    this.loadImages(0, this.plotWidgetRenderData);
+  }
+
   isDirty() {
     return this.pristineDashboardJSON !== JSON.stringify(this.dashboard);
   }
@@ -70,6 +81,9 @@ export class DashboardComponent implements OnInit {
       if (plot.isAborted) {
         this.loadImages(index +1 , plotWidgetQueue);
       }else{
+
+        plot.plotResponse = undefined; // remove old image and show loading icon
+
         const request = PlotWidget.createPlotRequest(plot.widget, plot.submitterId);
         this.plotService.sendPlotRequest(request).subscribe({
           next: (response: PlotResponse)=> {

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import {  Component, EventEmitter, Input, Output,  ViewChild, input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
 import { PlotWidget, PlotWidgetRenderData } from 'src/app/dashboard.service';
@@ -18,14 +18,13 @@ export class PlotWidgetComponent  {
   public thumbnailUrl = "";
 
 
-  @ViewChild("plotView") plotView!: PlotViewComponent;
+  //@ViewChild("plotView") plotView!: PlotViewComponent;
 
   @Output()
   deleted : EventEmitter<string> = new EventEmitter<string>();
 
   constructor(private dialog: MatDialog, private service: PlotService){}
 
-
   hasRender(name: string): boolean{
     return this.data !== undefined && this.data.plotResponse !== undefined && this.data.plotResponse?.rendered[name] !== undefined;
   }

pdb-js/src/app/plot-details/plot-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
 import { UtilService } from '../utils.service';
 

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -298,7 +298,6 @@ export class PlotViewComponent {
    */
  shiftDateByAnchor(dateValue:DateValue, anchorInPercentOfDateRange:number, zoomFactor:number)
  {
-  debugger;
      const dateRangeParsed = this.parseDateRange(dateValue);
      dateRangeParsed.subscribe({
       next: (dataRange: DateRange) => {
@@ -330,7 +329,6 @@ export class PlotViewComponent {
   */
  shiftDate(dateValue: DateValue, factorStartDate: number, factorEndDate: number)
  {
-  debugger;
      this.parseDateRange(dateValue).subscribe(
       dateRangeParsed => {
         const dateRangeInSeconds = Math.floor(dateRangeParsed.duration.toMillis()/1000);

pdb-js/src/app/visualization-page/visualization-page.component.scss

@@ -15,7 +15,7 @@
     grid:
       "query-box query-box date-box" auto 
       "filters results results" 1fr
-      / 25.5em 3fr 23.5em;
+      / 25.5em 3fr auto;
   }
 }
 
@@ -43,6 +43,8 @@
 
 #date-box{
   grid-area: date-box;
+  display: flex;
+  align-items: center;
 }
 
 

pdb-js/src/styles.scss

@@ -14,25 +14,21 @@
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
 //    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
-/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
-@include mat.all-legacy-component-typographies();
 @include mat.all-component-typographies();
-/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
-@include mat.legacy-core();
 @include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$candy-app-primary: mat.define-palette(mat.$blue-palette);
-$candy-app-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$candy-app-primary: mat.m2-define-palette(mat.$m2-blue-palette);
+$candy-app-accent: mat.m2-define-palette(mat.$m2-blue-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$candy-app-warn: mat.define-palette(mat.$red-palette);
+$candy-app-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$candy-app-theme: mat.define-light-theme((
+$candy-app-theme: mat.m2-define-light-theme((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent,
@@ -45,8 +41,6 @@ $candy-app-theme: mat.define-light-theme((
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
-@include mat.all-legacy-component-themes($candy-app-theme);
 @include mat.all-component-themes($candy-app-theme);
 
 
@@ -204,7 +198,7 @@ app-add-text-dialog .mat-mdc-form-field-subscript-wrapper  {
 
 .errorPanel {
   padding: 1ex;
-  background-color: map-get(mat.$red-palette, 100);
+  background-color: map-get(mat.$m2-red-palette, 100);
   border-radius: 5px;
 }
 

pdb-js/tsconfig.json

@@ -5,6 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -12,7 +13,6 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,

pdb-ui/src/main/java/org/lucares/pdbui/WebConfiguration.java

@@ -26,7 +26,7 @@ public class WebConfiguration implements WebMvcConfigurer, HardcodedValues, Prop
 
         addResourceHandlerForPlottedImages(registry);
 
-        // addResourceHandlerForAngular(registry);
+        addResourceHandlerForAngular(registry);
     }
 
     private void addResourceHandlerForPlottedImages(final ResourceHandlerRegistry registry) {
@@ -57,7 +57,7 @@ public class WebConfiguration implements WebMvcConfigurer, HardcodedValues, Prop
         // to determine which sub-page to show.
         //
         // This makes Angular also responsible for all 404 pages.
-        registry.addResourceHandler("/**").addResourceLocations("classpath:/resources/").resourceChain(true)
+        registry.addResourceHandler("/**").addResourceLocations("classpath:/resources/browser/").resourceChain(true)
                 .addResolver(new PathResourceResolver() {
                     @Override
                     protected Resource getResource(final String resourcePath, final Resource location)
@@ -65,7 +65,7 @@ public class WebConfiguration implements WebMvcConfigurer, HardcodedValues, Prop
                         final Resource requestedResource = location.createRelative(resourcePath);
 
                         return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
-                                : new ClassPathResource("/resources/index.html");
+                                : new ClassPathResource("/resources/browser/index.html");
                     }
                 });
     }