convert y axis definition to standalone component

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

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
+import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
+import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
+
+const routes: Routes = [
+  { 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", 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 }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {}),
+  ],
+  declarations: [],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

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

@@ -6,10 +6,12 @@ describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule,
+        RouterTestingModule
+      ],
+      declarations: [
         AppComponent
       ],
-}).compileComponents();
+    }).compileComponents();
   }));
 
   it('should create the app', () => {

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

@@ -1,15 +1,11 @@
 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',
   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

@@ -0,0 +1,115 @@
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { enableProdMode, NgModule } from "@angular/core";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
+
+import { DatePickerComponent } from "./components/datepicker/date-picker.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 { 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 {
+  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 { 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 { 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,
+        VisualizationPageComponent,
+        QueryAutocompleteComponent,
+        PlotDetailsComponent,
+        PlotViewComponent,
+        GalleryViewComponent,
+        GalleryItemView,
+        GalleryFilterView,
+        DashboardPageComponent,
+        DashboardComponent,
+        TextWidgetComponent,
+        AddPlotDialogComponent,
+        PlotWidgetComponent,
+        FullScreenPlotDialogComponent,
+        ConfirmationDialogComponent,
+        FocusDirective,
+    ],
+    bootstrap: [AppComponent], 
+    imports: [
+        MarkdownModule.forRoot(),
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        DatePickerComponent,
+        DragDropModule,
+        ImageToggleComponent,
+        LimitByComponent,
+        MainPageComponent,
+        MatAutocompleteModule,
+        MatBadgeModule,
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatInputModule,
+        MatRadioModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        MatSnackBarModule,
+        MatTabsModule,
+        MatTableModule,
+        MatTooltipModule,
+        BrowserAnimationsModule,
+        OverlayModule,
+        YAxisDefinitionComponent
+      ], 
+      providers: [{
+            provide: MAT_DIALOG_DEFAULT_OPTIONS,
+            useValue: { hasBackdrop: true },
+        }, provideHttpClient(withInterceptorsFromDi())] })
+export class AppModule {}
+
+enableProdMode();

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

@@ -1,3 +1,4 @@
+import { OverlayModule } from "@angular/cdk/overlay";
 import {
   Component,
   EventEmitter,
@@ -5,13 +6,21 @@ import {
   Input,
   Output,
 } from "@angular/core";
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import {
-import { MatButton } from "@angular/material/button";
+  ControlValueAccessor,
-import { MatTooltip } from "@angular/material/tooltip";
+  FormControl,
-import { CdkOverlayOrigin, CdkConnectedOverlay } from "@angular/cdk/overlay";
+  FormsModule,
-import { MatTabGroup, MatTab } from "@angular/material/tabs";
+  NG_VALUE_ACCESSOR,
-import { MatFormField, MatLabel } from "@angular/material/form-field";
+  ReactiveFormsModule,
-import { MatInput } from "@angular/material/input";
+  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";
 
@@ -30,26 +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,
     },
-    ],
+    {
-    standalone: true,
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
-    imports: [
+      useValue: { hasBackdrop: true },
-        MatButton,
+  }
-        MatTooltip,
-        CdkOverlayOrigin,
-        CdkConnectedOverlay,
-        MatTabGroup,
-        MatTab,
-        MatFormField,
-        MatLabel,
-        MatInput,
-        FormsModule,
-        ReactiveFormsModule,
   ],
 })
 export class DatePickerComponent implements ControlValueAccessor {

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

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

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

@@ -1,15 +1,9 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } 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',
-    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({
-    imports: [CustomizableGridComponent]
+      declarations: [ CustomizableGridComponent ]
-})
+    })
     .compileComponents();
 
     fixture = TestBed.createComponent(CustomizableGridComponent);

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

@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
-import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, CdkDropListGroup, CdkDrag } 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 { NgFor, NgStyle, NgClass } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
 
 
 @Component({
   selector: 'app-customizable-grid',
   templateUrl: './customizable-grid.component.html',
   standalone: true,
-    imports: [NgFor, CdkDropListGroup, NgStyle, CdkDropList, CdkDrag, NgClass]
+  imports: [
+    BrowserModule,
+    DragDropModule
+  ]
 })
 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({
-    imports: [DashboardPageComponent]
+      declarations: [ DashboardPageComponent ]
-})
+    })
     .compileComponents();
 
     fixture = TestBed.createComponent(DashboardPageComponent);

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

@@ -5,17 +5,10 @@ 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',
-    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.spec.ts

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

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

@@ -1,16 +1,11 @@
-import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import {  Component,  Inject, ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+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';
-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',
-    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.spec.ts

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

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

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

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

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

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

@@ -1,27 +1,19 @@
-import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute } 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',
-    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{
 

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

@@ -1,12 +1,9 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatIconButton } from '@angular/material/button';
 
 @Component({
   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({
-    imports: [PlotWidgetComponent]
+      declarations: [ PlotWidgetComponent ]
-})
+    })
     .compileComponents();
 
     fixture = TestBed.createComponent(PlotWidgetComponent);

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

@@ -6,14 +6,10 @@ 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',
-    templateUrl: './plot-widget.component.html',
+  templateUrl: './plot-widget.component.html'
-    standalone: true,
-    imports: [NgClass, MatIconButton, NgIf, MatButton]
 })
 export class PlotWidgetComponent  {
   @Input("data")

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({
-    imports: [TextWidgetComponent]
+      declarations: [ TextWidgetComponent ]
-})
+    })
     .compileComponents();
 
     fixture = TestBed.createComponent(TextWidgetComponent);

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

@@ -3,14 +3,10 @@ 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',
-    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({
-    imports: [NewDashboardComponent]
+      declarations: [ NewDashboardComponent ]
-})
+    })
     .compileComponents();
 
     fixture = TestBed.createComponent(NewDashboardComponent);

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

@@ -1,18 +1,26 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } 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, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {  FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { BrowserModule } from '@angular/platform-browser';
-import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
-import { MatInput } from '@angular/material/input';
+import {  OverlayModule } from '@angular/cdk/overlay';
-import { FocusDirective } from '../../focus.directive';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatButton } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-new-dashboard',
   templateUrl: './new-dashboard.component.html',
   standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FocusDirective, MatError, MatDialogActions, MatButton, MatDialogClose]
+  imports: [
+    BrowserModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ]
 })
 export class NewDashboardComponent implements OnInit {
 

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

@@ -1,8 +1,7 @@
 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({
-    imports: [GalleryViewComponent]
+      declarations: [ GalleryViewComponent ]
-})
+    })
     .compileComponents();
   }));
 

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

@@ -1,19 +1,7 @@
-import { Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, ViewChild, EventEmitter } 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;
@@ -31,9 +19,7 @@ export class GalleryFilterData {
 @Component({
   selector: 'pdb-gallery-filter-view',
   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([
@@ -105,9 +91,7 @@ export class GalleryFilterView {
 @Component({
   selector: 'pdb-gallery-view',
   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 {
 
@@ -331,9 +315,7 @@ export class GalleryViewComponent implements OnInit {
 @Component({
   selector: 'pdb-gallery-item-view',
   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({
-    imports: [HelpPageComponent]
+      declarations: [ HelpPageComponent ]
-})
+    })
     .compileComponents();
   }));
 

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

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

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

@@ -1,12 +1,14 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { NgIf } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'pdb-image-toggle',
   templateUrl: './image-toggle.component.html',
   styleUrls: ['./image-toggle.component.scss'],
   standalone: true,
-    imports: [NgIf]
+  imports: [
+    BrowserModule
+  ]
 })
 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({
-    imports: [LimitByComponent]
+      declarations: [ LimitByComponent ]
-})
+    })
     .compileComponents();
   }));
 

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

@@ -1,17 +1,25 @@
-import { Component,  Input} from '@angular/core';
+import { Component } from '@angular/core';
-import { FormControl, FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } 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';
+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'],
   standalone: true,
-    imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, MatInput, FormsModule]
+  imports: [
+    BrowserModule,
+    FormsModule,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatSelect,
+    MatOption,
+    ReactiveFormsModule
+  ]
 })
 export class LimitByComponent {
 

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

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

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

@@ -1,18 +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]
+  imports: [
+    RouterLink
+  ]
 })
-export class MainPageComponent implements OnInit {
+export class MainPageComponent {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
 
 }

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

@@ -1,16 +1,11 @@
 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',
   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({
-    imports: [PlotViewComponent]
+      declarations: [ PlotViewComponent ]
-})
+    })
     .compileComponents();
   }));
 

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

@@ -8,16 +8,11 @@ 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',
   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 {
 

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

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

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

@@ -1,19 +1,14 @@
 import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
-import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {FormControl, UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
-import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import {MatAutocompleteTrigger } 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',
   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({
-    imports: [UploadPageComponent]
+      declarations: [ UploadPageComponent ]
-})
+    })
     .compileComponents();
   }));
 

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

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

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

@@ -18,7 +18,7 @@ import {
   Suggestion,
   TagField,
 } from "../plot.service";
-import { UntypedFormControl, FormsModule } from "@angular/forms";
+import { UntypedFormControl } 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,41 +34,11 @@ 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",
   templateUrl: "./visualization-page.component.html",
   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

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

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

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

@@ -1,18 +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 { MatSelect } from '@angular/material/select';
+import { MatOptgroup, MatOption, MatSelect } from '@angular/material/select';
-import { MatOption, MatOptgroup } from '@angular/material/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
 import { MatInput } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'pdb-y-axis-definition',
   templateUrl: './y-axis-definition.component.html',
   styleUrls: ['./y-axis-definition.component.scss'],
   standalone: true,
-    imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, NgIf, MatInput, FormsModule]
+  imports: [
+    BrowserModule,
+    FormsModule,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatSelect,
+    MatOption,
+    MatOptgroup,
+    ReactiveFormsModule
+  ]
 })
 export class YAxisDefinitionComponent {
 

pdb-js/src/main.ts

@@ -1,33 +1,8 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { enableProdMode } 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, MatDialogModule } from '@angular/material/dialog';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { MarkdownModule } from 'ngx-markdown';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatInputModule } from '@angular/material/input';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { AppComponent } from './app/app.component';
-import { provideRouter, Routes, withDebugTracing } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
@@ -39,49 +14,5 @@ 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(), 
-          BrowserModule,
-          FormsModule, 
-          ReactiveFormsModule, 
-          DragDropModule, 
-          MatAutocompleteModule, 
-          MatBadgeModule, 
-          MatButtonModule, 
-          MatCardModule, 
-          MatCheckboxModule, 
-          MatDialogModule, 
-          MatFormFieldModule, 
-          MatGridListModule, 
-          MatInputModule, 
-          MatRadioModule, 
-          MatProgressBarModule, 
-          MatProgressSpinnerModule, 
-          MatSelectModule, 
-          MatSnackBarModule, 
-          MatTabsModule, 
-          MatTableModule, 
-          MatTooltipModule, 
-          OverlayModule),
-        {
-            provide: MAT_DIALOG_DEFAULT_OPTIONS,
-            useValue: { hasBackdrop: true },
-        }, provideHttpClient(withInterceptorsFromDi()),
-        provideAnimations()
-    ]
-})
   .catch(err => console.error(err));