change port to 80

this way the server is reachable from the ot network

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 = '5.11.1'
-  version_junit_platform = '1.10.3'
+  version_junit_platform = '1.11.1'
-  version_nodejs = '18.18.0' // keep in sync with npm
+  version_nodejs = '20.17.0' // keep in sync with npm
-  version_npm = '9.8.1'    // keep in sync with nodejs
+  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_csv= 'org.apache.commons:commons-csv:1.12.0'
-  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.15.0'
+  lib_commons_lang3 = 'org.apache.commons:commons-lang3:3.17.0'
-  lib_jackson_databind = 'com.fasterxml.jackson.core:jackson-databind:2.17.2'
+  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}"
@@ -141,5 +141,5 @@ subprojects {
 }
 
 wrapper {
-  gradleVersion = '8.9'
+  gradleVersion = '8.10.2'
 }

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

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": [
-            "polyfills": "src/polyfills.ts",
+              "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/animations": "^18.2.6",
-    "@angular/cdk": "^16.2.6",
+    "@angular/cdk": "^18.2.6",
-    "@angular/common": "^16.2.7",
+    "@angular/common": "^18.2.6",
-    "@angular/compiler": "^16.2.7",
+    "@angular/compiler": "^18.2.6",
-    "@angular/core": "^16.2.7",
+    "@angular/core": "^18.2.6",
-    "@angular/forms": "^16.2.7",
+    "@angular/forms": "^18.2.6",
-    "@angular/material": "^16.2.6",
+    "@angular/material": "^18.2.6",
-    "@angular/platform-browser": "^16.2.7",
+    "@angular/platform-browser": "^18.2.6",
-    "@angular/platform-browser-dynamic": "^16.2.7",
+    "@angular/platform-browser-dynamic": "^18.2.6",
-    "@angular/router": "^16.2.7",
+    "@angular/router": "^18.2.6",
     "luxon": "^3.4.3",
-    "marked": "^4.2.12",
+    "marked": "^12",
-    "ngx-markdown": "^16.0.0",
+    "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-devkit/build-angular": "^18.2.6",
-    "@angular/cli": "^16.2.4",
+    "@angular/cli": "^18.2.6",
-    "@angular/compiler-cli": "^16.2.7",
+    "@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

@@ -1,31 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
-import { MainPageComponent } from "./main-page/main-page.component";
-import { UploadPageComponent } from "./upload-page/upload-page.component";
-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 },
-  // { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {}),
-  ],
-  declarations: [],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

pdb-js/src/app/app.component.spec.ts

@@ -5,13 +5,11 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
+    imports: [
-        RouterTestingModule
+        RouterTestingModule,
-      ],
-      declarations: [
         AppComponent
-      ],
+    ],
-    }).compileComponents();
+}).compileComponents();
   }));
 
   it('should create the app', () => {

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

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
+import { MatAnchor } from '@angular/material/button';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html',
+    templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [MatAnchor, RouterLink, RouterOutlet]
 })
 export class AppComponent {
   title = 'pdb';

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

@@ -1,130 +0,0 @@
-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 { FormsModule, ReactiveFormsModule } from "@angular/forms";
-
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { MainPageComponent } from "./main-page/main-page.component";
-import { HelpPageComponent } from "./help-page/help-page.component";
-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";
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatSelectModule } from "@angular/material/select";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatProgressBarModule } from "@angular/material/progress-bar";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MatRadioModule } from "@angular/material/radio";
-import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { OverlayModule } from "@angular/cdk/overlay";
-import { YAxisDefinitionComponent } from "./y-axis-definition/y-axis-definition.component";
-import { QueryAutocompleteComponent } from "./query-autocomplete/query-autocomplete.component";
-import { LimitByComponent } from "./limit-by/limit-by.component";
-import { PlotDetailsComponent } from "./plot-details/plot-details.component";
-import { PlotViewComponent } from "./plot-view/plot-view.component";
-import {
-  GalleryFilterView,
-  GalleryItemView,
-  GalleryViewComponent,
-} from "./gallery-view/gallery-view.component";
-import { ImageToggleComponent } from "./image-toggle/image-toggle.component";
-import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
-import { NewDashboardComponent } from "./dashboard-page/new-dashboard/new-dashboard.component";
-import {
-  MAT_DIALOG_DEFAULT_OPTIONS,
-  MatDialogModule,
-} from "@angular/material/dialog";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTableModule } from "@angular/material/table";
-import { MatGridListModule } from "@angular/material/grid-list";
-import { MatCardModule } from "@angular/material/card";
-import { MatBadgeModule } from "@angular/material/badge";
-import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
-import { AddTextDialogComponent } from "./dashboard-page/dashboard/add-text-dialog/add-text-dialog.component";
-import { TextWidgetComponent } from "./dashboard-page/dashboard/text-widget/text-widget.component";
-import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component";
-import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component";
-import { FullScreenPlotDialogComponent } from "./dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component";
-import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
-
-import { DragDropModule } from "@angular/cdk/drag-drop";
-import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component";
-import { FocusDirective } from "./focus.directive";
-import { MarkdownModule } from "ngx-markdown";
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    MainPageComponent,
-    HelpPageComponent,
-    UploadPageComponent,
-    DatePickerComponent,
-    DatePickerTestComponent,
-    VisualizationPageComponent,
-    YAxisDefinitionComponent,
-    QueryAutocompleteComponent,
-    LimitByComponent,
-    PlotDetailsComponent,
-    PlotViewComponent,
-    GalleryViewComponent,
-    GalleryItemView,
-    GalleryFilterView,
-    ImageToggleComponent,
-    DashboardPageComponent,
-    NewDashboardComponent,
-    DashboardComponent,
-    AddTextDialogComponent,
-    TextWidgetComponent,
-    AddPlotDialogComponent,
-    PlotWidgetComponent,
-    FullScreenPlotDialogComponent,
-    CustomizableGridComponent,
-    ConfirmationDialogComponent,
-    FocusDirective,
-  ],
-  imports: [
-    MarkdownModule.forRoot(),
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    DragDropModule,
-    MatAutocompleteModule,
-    MatBadgeModule,
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatInputModule,
-    MatRadioModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatSelectModule,
-    MatSnackBarModule,
-    MatTabsModule,
-    MatTableModule,
-    MatTooltipModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    OverlayModule,
-  ],
-  providers: [{
-    provide: MAT_DIALOG_DEFAULT_OPTIONS,
-    useValue: { hasBackdrop: true },
-  }],
-  bootstrap: [AppComponent],
-})
-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,18 +22,16 @@
   }
 </style>
 
-<div class="header-box">
+<button
-  <button
+  mat-button
-    mat-button
+  matTooltip="Date Picker"
-    matTooltip="Date Picker"
+  (click)="isOpen = !isOpen"
-    (click)="isOpen = !isOpen"
+  cdkOverlayOrigin
-    cdkOverlayOrigin
+  #trigger="cdkOverlayOrigin"
-    #trigger="cdkOverlayOrigin"
+  [attr.disabled]="isDisabled ? 'disabled' : null"
-    [attr.disabled]="isDisabled ? 'disabled' : null"
+>
-  >
+  {{ datePickerControl.value?.display }}
-    {{ datePickerControl.value?.display }}
+</button>
-  </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/components/datepicker/date-picker.component.ts

@@ -5,12 +5,13 @@ import {
   Input,
   Output,
 } from "@angular/core";
-import {
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
-  ControlValueAccessor,
+import { MatButton } from "@angular/material/button";
-  FormControl,
+import { MatTooltip } from "@angular/material/tooltip";
-  NG_VALUE_ACCESSOR,
+import { CdkOverlayOrigin, CdkConnectedOverlay } from "@angular/cdk/overlay";
-  Validators,
+import { MatTabGroup, MatTab } from "@angular/material/tabs";
-} from "@angular/forms";
+import { MatFormField, MatLabel } from "@angular/material/form-field";
+import { MatInput } from "@angular/material/input";
 
 export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE";
 
@@ -27,15 +28,29 @@ export class DatePickerChange {
 }
 
 @Component({
-  selector: "app-date-picker",
+    selector: "app-date-picker",
-  templateUrl: "./date-picker.component.html",
+    templateUrl: "./date-picker.component.html",
-  providers: [
+    providers: [
-    {
+        {
-      provide: NG_VALUE_ACCESSOR,
+            provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DatePickerComponent),
+            useExisting: forwardRef(() => DatePickerComponent),
-      multi: true,
+            multi: true,
-    },
+        },
-  ],
+    ],
+    standalone: true,
+    imports: [
+        MatButton,
+        MatTooltip,
+        CdkOverlayOrigin,
+        CdkConnectedOverlay,
+        MatTabGroup,
+        MatTab,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        FormsModule,
+        ReactiveFormsModule,
+    ],
 })
 export class DatePickerComponent implements ControlValueAccessor {
   isOpen = false;

pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -8,8 +8,8 @@ describe('ConfirmationDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ConfirmationDialogComponent ]
+    imports: [ConfirmationDialogComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(ConfirmationDialogComponent);

pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,9 +1,15 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { NgIf } from '@angular/common';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatButton } from '@angular/material/button';
+import { FocusDirective } from '../focus.directive';
 
 @Component({
-  selector: 'app-confirmation-dialog',
+    selector: 'app-confirmation-dialog',
-  templateUrl: './confirmation-dialog.component.html'
+    templateUrl: './confirmation-dialog.component.html',
+    standalone: true,
+    imports: [NgIf, MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose, FocusDirective]
 })
 export class ConfirmationDialogComponent {
   

pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts

@@ -8,8 +8,8 @@ describe('CustomizableGridComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CustomizableGridComponent ]
+    imports: [CustomizableGridComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(CustomizableGridComponent);

pdb-js/src/app/customizable-grid/customizable-grid.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
-import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop';
+import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, CdkDropListGroup, CdkDrag } from '@angular/cdk/drag-drop';
 import { AfterViewInit } from '@angular/core';
 import { ViewChild } from '@angular/core';
+import { NgFor, NgStyle, NgClass } from '@angular/common';
 
 
 @Component({
-  selector: 'app-customizable-grid',
+    selector: 'app-customizable-grid',
-  templateUrl: './customizable-grid.component.html'
+    templateUrl: './customizable-grid.component.html',
+    standalone: true,
+    imports: [NgFor, CdkDropListGroup, NgStyle, CdkDropList, CdkDrag, NgClass]
 })
 export class CustomizableGridComponent implements AfterViewInit {
   @ViewChild(CdkDropList) placeholder!: CdkDropList;

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

@@ -8,8 +8,8 @@ describe('DashboardPageComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DashboardPageComponent ]
+    imports: [DashboardPageComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(DashboardPageComponent);

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

@@ -5,10 +5,17 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
 import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
+import { NgIf } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-dashboard-page',
+    selector: 'app-dashboard-page',
-  templateUrl: './dashboard-page.component.html'
+    templateUrl: './dashboard-page.component.html',
+    standalone: true,
+    imports: [NgIf, MatProgressSpinner, MatButton, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow]
 })
 export class DashboardPageComponent implements OnInit {
 

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html

@@ -18,5 +18,5 @@
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close >Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts

@@ -8,8 +8,8 @@ describe('AddPlotDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AddPlotDialogComponent ]
+    imports: [AddPlotDialogComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(AddPlotDialogComponent);

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

@@ -1,11 +1,16 @@
 import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
 import { PlotConfig } from 'src/app/plot.service';
 import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';
+import { VisualizationPageComponent as VisualizationPageComponent_1 } from '../../../visualization-page/visualization-page.component';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-add-plot-dialog',
+    selector: 'app-add-plot-dialog',
-  templateUrl: './add-plot-dialog.component.html'
+    templateUrl: './add-plot-dialog.component.html',
+    standalone: true,
+    imports: [VisualizationPageComponent_1, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose]
 })
 export class AddPlotDialogComponent {
 

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -34,5 +34,5 @@
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close (click)="close()">Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts

@@ -8,8 +8,8 @@ describe('AddTextDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AddTextDialogComponent ]
+    imports: [AddTextDialogComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(AddTextDialogComponent);

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts

@@ -1,9 +1,18 @@
 import { Component, ElementRef,  Inject,  ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { FocusDirective } from '../../../focus.directive';
+import { MarkdownComponent } from 'ngx-markdown';
+import { MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-add-text-dialog',
+    selector: 'app-add-text-dialog',
-  templateUrl: './add-text-dialog.component.html'
+    templateUrl: './add-text-dialog.component.html',
+    standalone: true,
+    imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FormsModule, FocusDirective, MarkdownComponent, MatDialogActions, MatButton, MatDialogClose]
 })
 export class AddTextDialogComponent  {
   text = "";

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;
@@ -72,13 +85,15 @@
   <div class="toolbar">
     <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>
+    <button class="save-button" mat-flat-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.spec.ts

@@ -8,8 +8,8 @@ describe('DashboardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DashboardComponent ]
+    imports: [DashboardComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(DashboardComponent);

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

@@ -1,20 +1,29 @@
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragHandle } 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';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Dashboard, DashboardCreationData, DashboardService, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
 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';
+import { NgIf, NgFor } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { DatePickerComponent as DatePickerComponent_1 } from '../../components/datepicker/date-picker.component';
+import { TextWidgetComponent } from './text-widget/text-widget.component';
+import { PlotWidgetComponent } from './plot-widget/plot-widget.component';
 
 @Component({
-  selector: 'app-dashboard',
+    selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html'
+    templateUrl: './dashboard.component.html',
+    standalone: true,
+    imports: [NgIf, MatProgressSpinner, RouterLink, MatButton, DatePickerComponent_1, MatIconButton, CdkDropListGroup, NgFor, CdkDropList, CdkDrag, CdkDragHandle, TextWidgetComponent, PlotWidgetComponent]
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit{
 
   dashboard?: Dashboard = undefined;
 
@@ -24,6 +33,9 @@ export class DashboardComponent implements OnInit {
 
   plotWidgetRenderData: PlotWidgetRenderData[] = [];
 
+  @ViewChild("datePicker")
+  datePicker!: DatePickerComponent;
+
   constructor(
     private route: ActivatedRoute,  
     private service: DashboardService, 
@@ -58,6 +70,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,10 +89,13 @@ 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)=> {
-            plot.plotResponse= response;
+            plot.plotResponse = response;
           },
           error: (error:any)=> {
             plot.error = error;

pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts

@@ -1,9 +1,12 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { MatIconButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-full-screen-plot-dialog',
+    selector: 'app-full-screen-plot-dialog',
-  templateUrl: './full-screen-plot-dialog.component.html'
+    templateUrl: './full-screen-plot-dialog.component.html',
+    standalone: true,
+    imports: [MatIconButton, MatDialogClose]
 })
 export class FullScreenPlotDialogComponent {
 

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

@@ -8,8 +8,8 @@ describe('PlotWidgetComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PlotWidgetComponent ]
+    imports: [PlotWidgetComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(PlotWidgetComponent);

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';
@@ -6,10 +6,14 @@ import { PlotViewComponent } from 'src/app/plot-view/plot-view.component';
 import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
 import { AddPlotDialogComponent } from '../add-plot-dialog/add-plot-dialog.component';
 import { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component';
+import { NgClass, NgIf } from '@angular/common';
+import { MatIconButton, MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-plot-widget',
+    selector: 'app-plot-widget',
-  templateUrl: './plot-widget.component.html'
+    templateUrl: './plot-widget.component.html',
+    standalone: true,
+    imports: [NgClass, MatIconButton, NgIf, MatButton]
 })
 export class PlotWidgetComponent  {
   @Input("data")
@@ -18,14 +22,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/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts

@@ -8,8 +8,8 @@ describe('TextWidgetComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TextWidgetComponent ]
+    imports: [TextWidgetComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(TextWidgetComponent);

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

@@ -3,10 +3,14 @@ import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
 import { TextWidget } from 'src/app/dashboard.service';
 import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component';
+import { MatIconButton } from '@angular/material/button';
+import { MarkdownComponent } from 'ngx-markdown';
 
 @Component({
-  selector: 'app-text-widget',
+    selector: 'app-text-widget',
-  templateUrl: './text-widget.component.html'
+    templateUrl: './text-widget.component.html',
+    standalone: true,
+    imports: [MatIconButton, MarkdownComponent]
 })
 export class TextWidgetComponent {
   @Input()

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

@@ -8,8 +8,8 @@ describe('NewDashboardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NewDashboardComponent ]
+    imports: [NewDashboardComponent]
-    })
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(NewDashboardComponent);

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

@@ -1,11 +1,18 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
 import { DashboardCreationData } from 'src/app/dashboard.service';
-import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { FocusDirective } from '../../focus.directive';
+import { MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-new-dashboard',
+    selector: 'app-new-dashboard',
-  templateUrl: './new-dashboard.component.html'
+    templateUrl: './new-dashboard.component.html',
+    standalone: true,
+    imports: [FormsModule, ReactiveFormsModule, MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FocusDirective, MatError, MatDialogActions, MatButton, MatDialogClose]
 })
 export class NewDashboardComponent implements OnInit {
 

pdb-js/src/app/focus.directive.ts

@@ -1,7 +1,8 @@
 import { AfterViewInit, Directive, ElementRef } from '@angular/core';
 
 @Directive({
-  selector: '[focus]'
+    selector: '[focus]',
+    standalone: true
 })
 export class FocusDirective implements AfterViewInit {
 

pdb-js/src/app/gallery-view/gallery-view.component.spec.ts

@@ -8,8 +8,8 @@ describe('GalleryViewComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ GalleryViewComponent ]
+    imports: [GalleryViewComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -1,7 +1,19 @@
-import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages  } from '../plot.service';
 import { UtilService } from '../utils.service';
+import { NgIf, NgClass, NgFor } from '@angular/common';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { ImageToggleComponent } from '../image-toggle/image-toggle.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { FormsModule } from '@angular/forms';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { PlotDetailsComponent } from '../plot-details/plot-details.component';
+import { MatInput } from '@angular/material/input';
 
 export class GalleryFilterData {
   filterBy :string;
@@ -17,9 +29,11 @@ export class GalleryFilterData {
 }
 
 @Component({
-  selector: 'pdb-gallery-filter-view',
+    selector: 'pdb-gallery-filter-view',
-  templateUrl: './gallery-filter-view.component.html',
+    templateUrl: './gallery-filter-view.component.html',
-  styleUrls: ['./gallery-filter-view.component.scss']
+    styleUrls: ['./gallery-filter-view.component.scss'],
+    standalone: true,
+    imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, ImageToggleComponent, MatInput, FormsModule]
 })
 export class GalleryFilterView {
   compareImages = JSON.stringify([
@@ -89,9 +103,11 @@ export class GalleryFilterView {
 
 
 @Component({
-  selector: 'pdb-gallery-view',
+    selector: 'pdb-gallery-view',
-  templateUrl: './gallery-view.component.html',
+    templateUrl: './gallery-view.component.html',
-  styleUrls: ['./gallery-view.component.scss']
+    styleUrls: ['./gallery-view.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatFormField, MatLabel, MatSelect, MatOption, ImageToggleComponent, GalleryFilterView, MatCheckbox, FormsModule, MatProgressBar, MatButton, MatTooltip, NgClass, NgFor, forwardRef(() => GalleryItemView)]
 })
 export class GalleryViewComponent implements OnInit {
 
@@ -313,9 +329,11 @@ export class GalleryViewComponent implements OnInit {
 }
 
 @Component({
-  selector: 'pdb-gallery-item-view',
+    selector: 'pdb-gallery-item-view',
-  templateUrl: './gallery-item-view.component.html',
+    templateUrl: './gallery-item-view.component.html',
-  styleUrls: ['./gallery-item-view.component.scss']
+    styleUrls: ['./gallery-item-view.component.scss'],
+    standalone: true,
+    imports: [NgClass, NgIf, PlotDetailsComponent]
 })
 export class GalleryItemView {
   @Input()

pdb-js/src/app/help-page/help-page.component.spec.ts

@@ -8,8 +8,8 @@ describe('HelpPageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ HelpPageComponent ]
+    imports: [HelpPageComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'pdb-help-page',
+    selector: 'pdb-help-page',
-  templateUrl: './help-page.component.html',
+    templateUrl: './help-page.component.html',
-  styleUrls: ['./help-page.component.scss']
+    styleUrls: ['./help-page.component.scss'],
+    standalone: true
 })
 export class HelpPageComponent implements OnInit {
 

pdb-js/src/app/image-toggle/image-toggle.component.spec.ts

@@ -8,8 +8,8 @@ describe('ImageToggleComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ImageToggleComponent ]
+    imports: [ImageToggleComponent]
-    })
+})
     .compileComponents();
   }));
 

pdb-js/src/app/image-toggle/image-toggle.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'pdb-image-toggle',
+    selector: 'pdb-image-toggle',
-  templateUrl: './image-toggle.component.html',
+    templateUrl: './image-toggle.component.html',
-  styleUrls: ['./image-toggle.component.scss']
+    styleUrls: ['./image-toggle.component.scss'],
+    standalone: true,
+    imports: [NgIf]
 })
 export class ImageToggleComponent implements OnInit {
 

pdb-js/src/app/limit-by/limit-by.component.spec.ts

@@ -8,8 +8,8 @@ describe('LimitByComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ LimitByComponent ]
+    imports: [LimitByComponent]
-    })
+})
     .compileComponents();
   }));
 

pdb-js/src/app/limit-by/limit-by.component.ts

@@ -1,10 +1,17 @@
 import { Component,  Input} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import { FormControl, FormsModule } from '@angular/forms';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { NgIf } from '@angular/common';
+import { MatInput } from '@angular/material/input';
 
 @Component({
-  selector: 'pdb-limit-by',
+    selector: 'pdb-limit-by',
-  templateUrl: './limit-by.component.html',
+    templateUrl: './limit-by.component.html',
-  styleUrls: ['./limit-by.component.scss']
+    styleUrls: ['./limit-by.component.scss'],
+    standalone: true,
+    imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, MatInput, FormsModule]
 })
 export class LimitByComponent {
 

pdb-js/src/app/main-page/main-page.component.spec.ts

@@ -8,8 +8,8 @@ describe('MainPageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ MainPageComponent ]
+    imports: [MainPageComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'pdb-main-page',
+    selector: 'pdb-main-page',
-  templateUrl: './main-page.component.html',
+    templateUrl: './main-page.component.html',
-  styleUrls: ['./main-page.component.scss']
+    styleUrls: ['./main-page.component.scss'],
+    standalone: true,
+    imports: [RouterLink]
 })
 export class MainPageComponent implements OnInit {
 

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

@@ -1,11 +1,16 @@
-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';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { FormsModule } from '@angular/forms';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
-  selector: 'pdb-plot-details',
+    selector: 'pdb-plot-details',
-  templateUrl: './plot-details.component.html',
+    templateUrl: './plot-details.component.html',
-  styleUrls: ['./plot-details.component.scss']
+    styleUrls: ['./plot-details.component.scss'],
+    standalone: true,
+    imports: [MatRadioGroup, FormsModule, MatRadioButton, NgFor, NgIf]
 })
 export class PlotDetailsComponent {
 

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

@@ -8,8 +8,8 @@ describe('PlotViewComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PlotViewComponent ]
+    imports: [PlotViewComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -8,11 +8,16 @@ import { Overlay } from "@angular/cdk/overlay";
 import { DateTime, Duration } from "luxon";
 import { DateValue } from '../components/datepicker/date-picker.component';
 import { Observable } from 'rxjs';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { NgClass, NgFor, NgIf } from '@angular/common';
+import { PlotDetailsComponent } from '../plot-details/plot-details.component';
 
 @Component({
-  selector: 'pdb-plot-view',
+    selector: 'pdb-plot-view',
-  templateUrl: './plot-view.component.html',
+    templateUrl: './plot-view.component.html',
-  styleUrls: ['./plot-view.component.scss']
+    styleUrls: ['./plot-view.component.scss'],
+    standalone: true,
+    imports: [CdkDrag, NgClass, CdkDragHandle, NgFor, NgIf, PlotDetailsComponent]
 })
 export class PlotViewComponent {
 
@@ -298,7 +303,6 @@ export class PlotViewComponent {
    */
  shiftDateByAnchor(dateValue:DateValue, anchorInPercentOfDateRange:number, zoomFactor:number)
  {
-  debugger;
      const dateRangeParsed = this.parseDateRange(dateValue);
      dateRangeParsed.subscribe({
       next: (dataRange: DateRange) => {
@@ -330,7 +334,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/query-autocomplete/query-autocomplete.component.spec.ts

@@ -8,8 +8,8 @@ describe('QueryAutocompleteComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ QueryAutocompleteComponent ]
+    imports: [QueryAutocompleteComponent]
-    })
+})
     .compileComponents();
   }));
 

pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts

@@ -1,14 +1,19 @@
 import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
-import {FormControl, UntypedFormControl} from '@angular/forms';
+import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
-import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service';
+import { MatInput } from '@angular/material/input';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { MatOption } from '@angular/material/core';
 
 @Component({
-  selector: 'pdb-query-autocomplete',
+    selector: 'pdb-query-autocomplete',
-  templateUrl: './query-autocomplete.component.html',
+    templateUrl: './query-autocomplete.component.html',
-  styleUrls: ['./query-autocomplete.component.scss']
+    styleUrls: ['./query-autocomplete.component.scss'],
+    standalone: true,
+    imports: [MatInput, FormsModule, MatAutocompleteTrigger, ReactiveFormsModule, MatAutocomplete, NgFor, MatOption, AsyncPipe]
 })
 export class QueryAutocompleteComponent implements OnInit {
 

pdb-js/src/app/upload-page/upload-page.component.spec.ts

@@ -8,8 +8,8 @@ describe('UploadPageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ UploadPageComponent ]
+    imports: [UploadPageComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'pdb-upload-page',
+    selector: 'pdb-upload-page',
-  templateUrl: './upload-page.component.html',
+    templateUrl: './upload-page.component.html',
-  styleUrls: ['./upload-page.component.scss']
+    styleUrls: ['./upload-page.component.scss'],
+    standalone: true
 })
 export class UploadPageComponent implements OnInit {
 

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/app/visualization-page/visualization-page.component.spec.ts

@@ -8,8 +8,8 @@ describe('VisualizationPageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ VisualizationPageComponent ]
+    imports: [VisualizationPageComponent]
-    })
+})
     .compileComponents();
   }));
 

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

@@ -18,7 +18,7 @@ import {
   Suggestion,
   TagField,
 } from "../plot.service";
-import { UntypedFormControl } from "@angular/forms";
+import { UntypedFormControl, FormsModule } from "@angular/forms";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { LimitByComponent } from "../limit-by/limit-by.component";
 import { YAxisDefinitionComponent } from "../y-axis-definition/y-axis-definition.component";
@@ -34,11 +34,41 @@ import {
   DatePickerComponent,
   DateValue,
 } from "../components/datepicker/date-picker.component";
+import { MatFormField, MatLabel, MatError } from "@angular/material/form-field";
+import { MatSelect } from "@angular/material/select";
+import { NgFor, NgIf } from "@angular/common";
+import { MatOption } from "@angular/material/core";
+import { MatCheckbox } from "@angular/material/checkbox";
+import { MatIconAnchor, MatButton } from "@angular/material/button";
+import { RouterLink } from "@angular/router";
+import { MatTooltip } from "@angular/material/tooltip";
 
 @Component({
-  selector: "pdb-visualization-page",
+    selector: "pdb-visualization-page",
-  templateUrl: "./visualization-page.component.html",
+    templateUrl: "./visualization-page.component.html",
-  styleUrls: ["./visualization-page.component.scss"],
+    styleUrls: ["./visualization-page.component.scss"],
+    standalone: true,
+    imports: [
+        QueryAutocompleteComponent,
+        DatePickerComponent,
+        MatFormField,
+        MatLabel,
+        MatSelect,
+        FormsModule,
+        NgFor,
+        MatOption,
+        LimitByComponent,
+        MatCheckbox,
+        YAxisDefinitionComponent,
+        NgIf,
+        MatError,
+        MatIconAnchor,
+        RouterLink,
+        MatButton,
+        MatTooltip,
+        PlotViewComponent,
+        GalleryViewComponent,
+    ],
 })
 export class VisualizationPageComponent implements OnInit, AfterViewInit {
   readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
@@ -107,8 +137,6 @@ export class VisualizationPageComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    (<any> window).initDatePicker();
-
     this.plotTypes = this.plotService.getPlotTypes();
     this.selectedPlotType.push(this.plotTypes[0]);
 

pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts

@@ -8,8 +8,8 @@ describe('YAxisDefinitionComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ YAxisDefinitionComponent ]
+    imports: [YAxisDefinitionComponent]
-    })
+})
     .compileComponents();
   }));
 

pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts

@@ -1,10 +1,18 @@
 import { Component,  Input } from '@angular/core';
 import { YAxisDefinition  } from '../plot.service';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOption, MatOptgroup } from '@angular/material/core';
+import { NgIf } from '@angular/common';
+import { MatInput } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
 
 @Component({
-  selector: 'pdb-y-axis-definition',
+    selector: 'pdb-y-axis-definition',
-  templateUrl: './y-axis-definition.component.html',
+    templateUrl: './y-axis-definition.component.html',
-  styleUrls: ['./y-axis-definition.component.scss']
+    styleUrls: ['./y-axis-definition.component.scss'],
+    standalone: true,
+    imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, NgIf, MatInput, FormsModule]
 })
 export class YAxisDefinitionComponent {
 

pdb-js/src/assets/css/daterangepicker-3.1.css

@@ -1,410 +0,0 @@
-.daterangepicker {
-  position: absolute;
-  color: inherit;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  width: 278px;
-  max-width: none;
-  padding: 0;
-  margin-top: 7px;
-  top: 100px;
-  left: 20px;
-  z-index: 3001;
-  display: none;
-  font-family: arial;
-  font-size: 15px;
-  line-height: 1em;
-}
-
-.daterangepicker:before, .daterangepicker:after {
-  position: absolute;
-  display: inline-block;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker:before {
-  top: -7px;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-}
-
-.daterangepicker:after {
-  top: -6px;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-}
-
-.daterangepicker.opensleft:before {
-  right: 9px;
-}
-
-.daterangepicker.opensleft:after {
-  right: 10px;
-}
-
-.daterangepicker.openscenter:before {
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.daterangepicker.openscenter:after {
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.daterangepicker.opensright:before {
-  left: 9px;
-}
-
-.daterangepicker.opensright:after {
-  left: 10px;
-}
-
-.daterangepicker.drop-up {
-  margin-top: -7px;
-}
-
-.daterangepicker.drop-up:before {
-  top: initial;
-  bottom: -7px;
-  border-bottom: initial;
-  border-top: 7px solid #ccc;
-}
-
-.daterangepicker.drop-up:after {
-  top: initial;
-  bottom: -6px;
-  border-bottom: initial;
-  border-top: 6px solid #fff;
-}
-
-.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
-  float: none;
-}
-
-.daterangepicker.single .drp-selected {
-  display: none;
-}
-
-.daterangepicker.show-calendar .drp-calendar {
-  display: block;
-}
-
-.daterangepicker.show-calendar .drp-buttons {
-  display: block;
-}
-
-.daterangepicker.auto-apply .drp-buttons {
-  display: none;
-}
-
-.daterangepicker .drp-calendar {
-  display: none;
-  max-width: 270px;
-}
-
-.daterangepicker .drp-calendar.left {
-  padding: 8px 0 8px 8px;
-}
-
-.daterangepicker .drp-calendar.right {
-  padding: 8px;
-}
-
-.daterangepicker .drp-calendar.single .calendar-table {
-  border: none;
-}
-
-.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
-  color: #fff;
-  border: solid black;
-  border-width: 0 2px 2px 0;
-  border-radius: 0;
-  display: inline-block;
-  padding: 3px;
-}
-
-.daterangepicker .calendar-table .next span {
-  transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-}
-
-.daterangepicker .calendar-table .prev span {
-  transform: rotate(135deg);
-  -webkit-transform: rotate(135deg);
-}
-
-.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: middle;
-  min-width: 32px;
-  width: 32px;
-  height: 24px;
-  line-height: 24px;
-  font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.daterangepicker .calendar-table {
-  border: 1px solid #fff;
-  border-radius: 4px;
-  background-color: #fff;
-}
-
-.daterangepicker .calendar-table table {
-  width: 100%;
-  margin: 0;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.daterangepicker td.available:hover, .daterangepicker th.available:hover {
-  background-color: #eee;
-  border-color: transparent;
-  color: inherit;
-}
-
-.daterangepicker td.week, .daterangepicker th.week {
-  font-size: 80%;
-  color: #ccc;
-}
-
-.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
-  background-color: #fff;
-  border-color: transparent;
-  color: #999;
-}
-
-.daterangepicker td.in-range {
-  background-color: #ebf4f8;
-  border-color: transparent;
-  color: #000;
-  border-radius: 0;
-}
-
-.daterangepicker td.start-date {
-  border-radius: 4px 0 0 4px;
-}
-
-.daterangepicker td.end-date {
-  border-radius: 0 4px 4px 0;
-}
-
-.daterangepicker td.start-date.end-date {
-  border-radius: 4px;
-}
-
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #357ebd;
-  border-color: transparent;
-  color: #fff;
-}
-
-.daterangepicker th.month {
-  width: auto;
-}
-
-.daterangepicker td.disabled, .daterangepicker option.disabled {
-  color: #999;
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
-.daterangepicker select.monthselect, .daterangepicker select.yearselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
-}
-
-.daterangepicker select.monthselect {
-  margin-right: 2%;
-  width: 56%;
-}
-
-.daterangepicker select.yearselect {
-  width: 40%;
-}
-
-.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  width: 50px;
-  margin: 0 auto;
-  background: #eee;
-  border: 1px solid #eee;
-  padding: 2px;
-  outline: 0;
-  font-size: 12px;
-}
-
-.daterangepicker .calendar-time {
-  text-align: center;
-  margin: 4px auto 0 auto;
-  line-height: 30px;
-  position: relative;
-}
-
-.daterangepicker .calendar-time select.disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.daterangepicker .drp-buttons {
-  clear: both;
-  text-align: right;
-  padding: 8px;
-  border-top: 1px solid #ddd;
-  display: none;
-  line-height: 12px;
-  vertical-align: middle;
-}
-
-.daterangepicker .drp-selected {
-  display: inline-block;
-  font-size: 12px;
-  padding-right: 8px;
-}
-
-.daterangepicker .drp-buttons .btn {
-  margin-left: 8px;
-  font-size: 12px;
-  font-weight: bold;
-  padding: 4px 8px;
-}
-
-.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.rtl .drp-calendar.right {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-
-.daterangepicker .ranges {
-  float: none;
-  text-align: left;
-  margin: 0;
-}
-
-.daterangepicker.show-calendar .ranges {
-  margin-top: 8px;
-}
-
-.daterangepicker .ranges ul {
-  list-style: none;
-  margin: 0 auto;
-  padding: 0;
-  width: 100%;
-}
-
-.daterangepicker .ranges li {
-  font-size: 12px;
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.daterangepicker .ranges li:hover {
-  background-color: #eee;
-}
-
-.daterangepicker .ranges li.active {
-  background-color: #08c;
-  color: #fff;
-}
-
-/*  Larger Screen Styling */
-@media (min-width: 564px) {
-  .daterangepicker {
-    width: auto;
-  }
-
-  .daterangepicker .ranges ul {
-    width: 140px;
-  }
-
-  .daterangepicker.single .ranges ul {
-    width: 100%;
-  }
-
-  .daterangepicker.single .drp-calendar.left {
-    clear: none;
-  }
-
-  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
-    float: left;
-  }
-
-  .daterangepicker {
-    direction: ltr;
-    text-align: left;
-  }
-
-  .daterangepicker .drp-calendar.left {
-    clear: left;
-    margin-right: 0;
-  }
-
-  .daterangepicker .drp-calendar.left .calendar-table {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .daterangepicker .drp-calendar.right {
-    margin-left: 0;
-  }
-
-  .daterangepicker .drp-calendar.right .calendar-table {
-    border-left: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .daterangepicker .drp-calendar.left .calendar-table {
-    padding-right: 8px;
-  }
-
-  .daterangepicker .ranges, .daterangepicker .drp-calendar {
-    float: left;
-  }
-}
-
-@media (min-width: 730px) {
-  .daterangepicker .ranges {
-    width: auto;
-  }
-
-  .daterangepicker .ranges {
-    float: left;
-  }
-
-  .daterangepicker.rtl .ranges {
-    float: right;
-  }
-
-  .daterangepicker .drp-calendar.left {
-    clear: none !important;
-  }
-}

pdb-js/src/index.html

@@ -8,61 +8,13 @@
   <link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
   
   <script type="text/javascript" src="/assets/js/jquery-3.6.0.min.js"></script>
-  <script type="text/javascript" src="/assets/js/moment-2.29.1.min.js"></script>
-  <script type="text/javascript" src="/assets/js/daterangepicker-3.1.js"></script>
   <script type="text/javascript" src="/assets/js/invaders.js"></script>
-  <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker-3.1.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/invaders.css" />
 </head>
 <body>
   <app-root></app-root>
   <script>
 
-    function initDatePicker() {
-      $('input[name="dates"]').daterangepicker({
-          timePicker: true,
-          minDate: "2017-01-01",
-          maxDate: "2029-12-31",
-          maxYear: parseInt(moment().format('YYYY'),10),
-          timePicker24Hour: true,
-          timePickerSeconds: true,
-          showDropdowns: true, // drop downs for selecting year and month
-          locale: {
-            format: 'YYYY-MM-DD HH:mm:ss',
-            "firstDay": 1 // monday is the first day of the week
-          },
-          ranges: {
-              'Today': [moment().startOf('day'), moment().endOf('day')],
-              'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
-              'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
-              'This Week': [moment().startOf('week'), moment().endOf('day')],
-              'Last Week': [moment().subtract(7, 'days').startOf('week'), moment().subtract(7, 'days').endOf('week')],
-              'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
-              'This Month': [moment().startOf('month'), moment().endOf('month').endOf('day')],
-              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
-              'Last 3 Months': [moment().subtract(3, 'month').startOf('month'),moment().subtract(1, 'month').endOf('month').endOf('day')],
-              'This Year': [moment().startOf('year'),moment().endOf('month').endOf('day')],
-              'Last Year': [moment().subtract(1, 'year').startOf('year'),moment().subtract(1, 'year').endOf('year')],
-          },
-        });
-    }
-
-    function initSimpleDatePicker() {
-      $('input[name="dates"]').daterangepicker({
-          timePicker: true,
-          minDate: "2017-01-01",
-          maxDate: "2029-12-31",
-          maxYear: parseInt(moment().format('YYYY'),10),
-          timePicker24Hour: true,
-          timePickerSeconds: true,
-          showDropdowns: true, // drop downs for selecting year and month
-          locale: {
-            format: 'YYYY-MM-DD HH:mm:ss',
-            "firstDay": 1 // monday is the first day of the week
-          },
-        });
-    }
-
     $( document ).ready(function() {
         initInvaders('results');
         document.addEventListener("invadersPause", function(event) {

pdb-js/src/main.ts

@@ -1,8 +1,14 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { MarkdownModule } from 'ngx-markdown';
+import {  bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppComponent } from './app/app.component';
+import { provideRouter, Routes, withDebugTracing } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
@@ -14,5 +20,29 @@ if (environment.production) {
 
 (<any>window).submitterId = (<any>window).randomId();
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+
+const routes: Routes = [
+  { path: "", loadComponent: () => import("./app/main-page/main-page.component").then( m => m.MainPageComponent) },
+  { path: "vis", loadComponent: () => import("./app/visualization-page/visualization-page.component").then(m => m.VisualizationPageComponent) },
+  { path: "dashboard", loadComponent: () => import("./app/dashboard-page/dashboard-page.component").then(m => m.DashboardPageComponent) },
+  { path: "dashboard/:id", loadComponent: () => import("./app/dashboard-page/dashboard/dashboard.component").then(m => m.DashboardComponent) },
+  { path: "upload", loadComponent: () => import("./app/upload-page/upload-page.component").then(m => m.UploadPageComponent) },
+  { path: "grid", loadComponent: () => import("./app/customizable-grid/customizable-grid.component").then(m => m.CustomizableGridComponent) },
+  { path: "help", loadComponent: () => import("./app/help-page/help-page.component").then(m => m.HelpPageComponent) },
+];
+
+bootstrapApplication(AppComponent, {
+    providers: [
+        provideRouter(routes, withDebugTracing()),
+        importProvidersFrom(
+          MarkdownModule.forRoot(), 
+          ),
+        {
+            provide: MAT_DIALOG_DEFAULT_OPTIONS,
+            useValue: { hasBackdrop: true },
+        }, 
+        provideHttpClient(withInterceptorsFromDi()),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

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-primary: mat.m2-define-palette(mat.$m2-blue-palette);
-$candy-app-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$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);
 
 
@@ -71,6 +65,8 @@ grey
 */
 $background-color: #CBD7F4;
 
+
+
 .mat-mdc-option span.mdc-list-item__primary-text,
 .mdc-list-item__primary-text {
   font-size: 1rem;
@@ -84,6 +80,12 @@ mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
   font-size: 14px;
   margin: 0;
   box-sizing: border-box;
+
+  // set colors for flat buttons (directive mat-flat-button)
+  // make them blue with white text when active and transparent with the default text color of light grey when disabled
+  --mdc-filled-button-label-text-color: white;
+  --mdc-filled-button-container-color: #005cbb;
+  --mdc-filled-button-disabled-container-color: none;
 }
 
 h1 {
@@ -111,13 +113,6 @@ button[disabled] .icon-inline {
   opacity: 0.5;
 }
 
-button.save-button {
-  background-color: #ff9900;
-}
-button.save-button:disabled {
-  background-color: inherit;
-}
-
 .icon-tiny {
   width: 1em;
   height: 1em;
@@ -204,7 +199,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");
                     }
                 });
     }

pdb-ui/src/main/resources/application-prod.properties

@@ -1,7 +1,7 @@
 #db.base=D:/ws/pdb/dataNew
 #db.base=D:/ws/pdb2/databases/prod
 db.base=c:/ws/pdb/databases/prod
-server.port=17333
+server.port=80
 gnuplot.home=D:/ws/pdb/gnuplot-5.2
 cache.images.duration.seconds=86400
 defaults.groupBy=pod,method,metric

pdb-ui/src/main/resources/application-testing.properties

@@ -1,5 +1,5 @@
 db.base=c:/ws/pdb/databases/test
-server.port=17333
+server.port=80
 gnuplot.home=D:/ws/pdb/gnuplot-5.2
 cache.images.duration.seconds=86400
 defaults.groupBy=pod,method,metric