convert y axis definition to standalone component

Reviewed-on: #1

build.gradle

@@ -14,8 +14,8 @@ ext {
 
   version_log4j2= '2.20.0' // keep in sync with spring-boot-starter-log4j2
   version_spring = '3.3.4'
-  version_junit = '5.10.3'
-  version_junit_platform = '1.10.3'
+  version_junit = '5.11.1'
+  version_junit_platform = '1.11.1'
   version_nodejs = '20.17.0' // keep in sync with npm
   version_npm = '10.8.2'    // keep in sync with nodejs
 
@@ -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/src/app/app-routing.module.ts

@@ -1,21 +1,17 @@
 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";
 
 const routes: Routes = [
-  { path: "", component: MainPageComponent },
+  { path: "", loadComponent: () => import("./main-page/main-page.component").then(m => m.MainPageComponent) },
   { path: "vis", component: VisualizationPageComponent },
   { path: "dashboard", component: DashboardPageComponent },
   { path: "dashboard/:id", component: DashboardComponent },
-  { path: "upload", component: UploadPageComponent },
-  { path: "grid", component: CustomizableGridComponent },
-  { path: "help", component: HelpPageComponent },
+  { path: "upload", loadComponent: () =>  import("./upload-page/upload-page.component").then(m => m.UploadPageComponent) },
+  { path: "grid", loadComponent: () =>  import("./customizable-grid/customizable-grid.component").then(m => m.CustomizableGridComponent) },
+  { path: "help", loadComponent: () =>  import("./help-page/help-page.component").then(m => m.HelpPageComponent)  },
   // { path: '**', component: PageNotFoundComponent }
 ];
 

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

@@ -6,9 +6,6 @@ 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";
@@ -27,7 +24,6 @@ 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 {
@@ -37,7 +33,6 @@ import {
 } 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,
@@ -48,52 +43,48 @@ 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";
+import { MainPageComponent } from "./main-page/main-page.component";
+import { LimitByComponent } from "./limit-by/limit-by.component";
 
 @NgModule({ declarations: [
         AppComponent,
-        MainPageComponent,
-        HelpPageComponent,
-        UploadPageComponent,
-        DatePickerComponent,
         VisualizationPageComponent,
-        YAxisDefinitionComponent,
         QueryAutocompleteComponent,
-        LimitByComponent,
         PlotDetailsComponent,
         PlotViewComponent,
         GalleryViewComponent,
         GalleryItemView,
         GalleryFilterView,
-        ImageToggleComponent,
         DashboardPageComponent,
-        NewDashboardComponent,
         DashboardComponent,
-        AddTextDialogComponent,
         TextWidgetComponent,
         AddPlotDialogComponent,
         PlotWidgetComponent,
         FullScreenPlotDialogComponent,
-        CustomizableGridComponent,
         ConfirmationDialogComponent,
         FocusDirective,
     ],
-    bootstrap: [AppComponent], imports: [MarkdownModule.forRoot(),
+    bootstrap: [AppComponent], 
+    imports: [
+        MarkdownModule.forRoot(),
         BrowserModule,
         AppRoutingModule,
         FormsModule,
         ReactiveFormsModule,
+        DatePickerComponent,
         DragDropModule,
+        ImageToggleComponent,
+        LimitByComponent,
+        MainPageComponent,
         MatAutocompleteModule,
         MatBadgeModule,
         MatButtonModule,
@@ -112,7 +103,10 @@ import { MarkdownModule } from "ngx-markdown";
         MatTableModule,
         MatTooltipModule,
         BrowserAnimationsModule,
-        OverlayModule], providers: [{
+        OverlayModule,
+        YAxisDefinitionComponent
+      ], 
+      providers: [{
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: { hasBackdrop: true },
         }, provideHttpClient(withInterceptorsFromDi())] })

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

@@ -1,3 +1,4 @@
+import { OverlayModule } from "@angular/cdk/overlay";
 import {
   Component,
   EventEmitter,
@@ -8,9 +9,18 @@ import {
 import {
   ControlValueAccessor,
   FormControl,
+  FormsModule,
   NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
   Validators,
 } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DEFAULT_OPTIONS } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatTabsModule } from "@angular/material/tabs";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE";
 
@@ -29,12 +39,27 @@ export class DatePickerChange {
 @Component({
   selector: "app-date-picker",
   templateUrl: "./date-picker.component.html",
+  standalone: true,
+  imports: [
+    BrowserModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTabsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    OverlayModule
+  ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => DatePickerComponent),
       multi: true,
     },
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: { hasBackdrop: true },
+  }
   ],
 })
 export class DatePickerComponent implements ControlValueAccessor {

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

@@ -1,12 +1,18 @@
 import { Component } from '@angular/core';
-import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop';
+import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, DragDropModule} from '@angular/cdk/drag-drop';
 import { AfterViewInit } from '@angular/core';
 import { ViewChild } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 
 @Component({
   selector: 'app-customizable-grid',
-  templateUrl: './customizable-grid.component.html'
+  templateUrl: './customizable-grid.component.html',
+  standalone: true,
+  imports: [
+    BrowserModule,
+    DragDropModule
+  ]
 })
 export class CustomizableGridComponent implements AfterViewInit {
   @ViewChild(CdkDropList) placeholder!: CdkDropList;

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import {  Component,  Inject, ViewChild } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { PlotConfig } from 'src/app/plot.service';
 import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';

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

@@ -1,9 +1,28 @@
 import { Component, ElementRef,  Inject,  ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
   selector: 'app-add-text-dialog',
-  templateUrl: './add-text-dialog.component.html'
+  templateUrl: './add-text-dialog.component.html',
+  standalone: true,
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MarkdownModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ]
 })
 export class AddTextDialogComponent  {
   text = "";

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

@@ -1,11 +1,26 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
 import { DashboardCreationData } from 'src/app/dashboard.service';
-import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import {  FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import {  OverlayModule } from '@angular/cdk/overlay';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-new-dashboard',
-  templateUrl: './new-dashboard.component.html'
+  templateUrl: './new-dashboard.component.html',
+  standalone: true,
+  imports: [
+    BrowserModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ]
 })
 export class NewDashboardComponent implements OnInit {
 

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

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'pdb-help-page',
   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.ts

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

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

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

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

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

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

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'pdb-upload-page',
   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/y-axis-definition/y-axis-definition.component.ts

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