From d3481d68bf8fc93f4fa08139657164f6d967e480 Mon Sep 17 00:00:00 2001 From: appel_c Date: Mon, 27 Jan 2025 17:32:46 +0100 Subject: [PATCH] refactor: scan-table refactoring, running version --- .../src/app/core/model/scan-count.ts | 3 + .../bec_atlas/src/app/core/model/scan-data.ts | 4 + .../src/app/core/remote-data.service.ts | 38 +++- .../app/scan-table/scan-table.component.html | 56 +++--- .../app/scan-table/scan-table.component.scss | 4 + .../app/scan-table/scan-table.component.ts | 178 +++++++++++------- 6 files changed, 195 insertions(+), 88 deletions(-) create mode 100644 frontend/bec_atlas/src/app/core/model/scan-count.ts diff --git a/frontend/bec_atlas/src/app/core/model/scan-count.ts b/frontend/bec_atlas/src/app/core/model/scan-count.ts new file mode 100644 index 0000000..2d61d41 --- /dev/null +++ b/frontend/bec_atlas/src/app/core/model/scan-count.ts @@ -0,0 +1,3 @@ +export interface ScanCountResponse { + count: number; +} diff --git a/frontend/bec_atlas/src/app/core/model/scan-data.ts b/frontend/bec_atlas/src/app/core/model/scan-data.ts index 9aa2e4e..90871f2 100644 --- a/frontend/bec_atlas/src/app/core/model/scan-data.ts +++ b/frontend/bec_atlas/src/app/core/model/scan-data.ts @@ -15,6 +15,10 @@ export interface ScanDataResponse { info?: { [key: string]: any }; timestamp?: number; user_data?: { [key: string]: any }; + name?: string; user_rating?: number; + system_rating?: number; + user_comments?: string; + system_comments?: string; } \ No newline at end of file diff --git a/frontend/bec_atlas/src/app/core/remote-data.service.ts b/frontend/bec_atlas/src/app/core/remote-data.service.ts index 77e6bbf..6fb71f3 100644 --- a/frontend/bec_atlas/src/app/core/remote-data.service.ts +++ b/frontend/bec_atlas/src/app/core/remote-data.service.ts @@ -4,6 +4,7 @@ import { ServerSettingsService } from '../server-settings.service'; import { ScanDataResponse } from './model/scan-data'; import { Realm } from './model/realm'; import { Deployment } from './model/deployment'; +import { ScanCountResponse } from './model/scan-count'; @Injectable({ providedIn: 'root', @@ -41,7 +42,7 @@ export class RemoteDataService { */ protected get( path: string, - params: { [key: string]: string }, + params: { [key: string]: string | number }, headers: HttpHeaders ) { return this.httpClient.get( @@ -153,3 +154,38 @@ export class DeploymentDataService extends RemoteDataService { ); } } + +@Injectable({ + providedIn: 'root', +}) +export class ScanCountService extends RemoteDataService { + /** + * Method for getting the scan count + * @param sessionId Unique identifier for the session (Optional) + * @param scanName Name of the scan (Optional) + * @param datasetNumber Dataset number (Optional) + * @returns response from the server with the scan count + * @throws HttpErrorResponse if the request fails + * @throws TimeoutError if the request takes too long + * @throws Error if the response is not a number + */ + getScanCount( + sessionId: string | null = null, + scanName: string | null = null, + datasetNumber: number | null = null + ) { + let headers = new HttpHeaders(); + let filters: { [key: string]: string | number } = {}; + headers = headers.set('Content-Type', 'application/json; charset=utf-8'); + if (sessionId !== null) { + filters['session_id'] = sessionId; + } + if (scanName !== null) { + filters['scan_name'] = scanName; + } + if (datasetNumber !== null) { + filters['dataset_number'] = datasetNumber; + } + return this.get('scans/count', filters, headers); + } +} diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.html b/frontend/bec_atlas/src/app/scan-table/scan-table.component.html index 2d22665..3123080 100644 --- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.html +++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.html @@ -1,31 +1,35 @@ -
- -
-
- ScanData Table - - - + + Table with Scan Data + + + + + +
-
{{ column | titlecase }} - - {{ element[column] * 1000| date :'HH:mm:ss'}} + + @if (column === 'timestamp') { + {{ element[column] * 1000 | date :'HH:mm:ss'}}
- {{ element[column] * 1000 | date :'dd/MM/yyyy'}} - - -
- -
-
- + {{ element[column] * 1000 | date :'dd/MM/yyyy'}} + } + @else if (column === 'user_rating') { + + } + @else{

{{ element[column] }}

-
+ } @@ -35,5 +39,15 @@
- + +
\ No newline at end of file diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss b/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss index 57b87f2..33d750e 100644 --- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss +++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss @@ -10,4 +10,8 @@ } .mat-mdc-row:hover { background-color: var(--mat-sys-secondary-container); +} + +.spacer { + flex: 1 1 auto; } \ No newline at end of file diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts b/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts index c6456ee..b87be9d 100644 --- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts +++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts @@ -1,91 +1,137 @@ -import { ChangeDetectionStrategy, Component, WritableSignal, signal, ViewChild } from '@angular/core'; -import { ScanDataService } from '../core/remote-data.service'; +import { + ChangeDetectionStrategy, + Component, + WritableSignal, + signal, + ViewChild, +} from '@angular/core'; +import { ScanCountService, ScanDataService } from '../core/remote-data.service'; import { ScanDataResponse } from '../core/model/scan-data'; -import { firstValueFrom } from 'rxjs'; import { CommonModule } from '@angular/common'; -import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { MatTableModule } from '@angular/material/table'; import { MatIconModule } from '@angular/material/icon'; import { MatCardModule } from '@angular/material/card'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; -import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; +import { + MatPaginator, + MatPaginatorModule, + PageEvent, +} from '@angular/material/paginator'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { StarRatingModule } from 'angular-star-rating'; - +import { MatSort } from '@angular/material/sort'; @Component({ selector: 'app-scan-table', standalone: true, - imports: [CommonModule, MatPaginator, MatTableModule, MatIconModule, MatToolbarModule, MatCardModule, MatButtonModule, MatPaginatorModule, StarRatingModule], + imports: [ + CommonModule, + MatPaginator, + MatTableModule, + MatIconModule, + MatToolbarModule, + MatCardModule, + MatButtonModule, + MatPaginatorModule, + StarRatingModule, + MatProgressSpinnerModule, + ], templateUrl: './scan-table.component.html', styleUrl: './scan-table.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class ScanTableComponent { - tableData: WritableSignal = signal([]); // Initialize as empty array - limit: number = 100; + // private tableData: new MatTableDataSource(); // Initialize as empty array + // tableData: ScanDataResponse[] = []; + tableData: WritableSignal = signal([]); + limit: number = 10; offset: number = 0; - displayedColumns: string[] = ['scan_number', 'status', 'num_points', 'scan_name', 'scan_type', 'dataset_number', 'timestamp', 'user_rating']; - ignoredEntries: string[] = ['scan_report_devices', 'user_metadata', 'readout_priority', 'scan_parameters', 'request_inputs', 'info']; + totalScanCount: number = 0; + page: number = this.offset / this.limit; + pageEvent: PageEvent = new PageEvent(); + sessionId: string = ''; + sorting: number = -1; + displayedColumns: string[] = [ + 'scan_number', + 'status', + 'num_points', + 'scan_name', + 'scan_type', + 'dataset_number', + 'timestamp', + 'user_rating', + ]; + ignoredEntries: string[] = [ + 'scan_report_devices', + 'user_metadata', + 'readout_priority', + 'scan_parameters', + 'request_inputs', + 'info', + ]; - @ViewChild(MatPaginatorModule) paginator!: MatPaginatorModule; + constructor( + private scanData: ScanDataService, + private scanCount: ScanCountService + ) {} - constructor(private scanData: ScanDataService) {} + @ViewChild(MatPaginator) paginator!: MatPaginator; + @ViewChild(MatSort) sort!: MatSort; ngOnInit(): void { - let sessionId = '6793628df62026a414d9338e'; - this.updateTableData(sessionId); + this.sessionId = '6793628df62026a414d9338e'; + this.updateUI(); } - async updateTableData(sessionId: string) { - let data = await firstValueFrom( - this.scanData.getScanData(sessionId, this.offset, this.limit, this.displayedColumns, false, { scan_number: -1 }) - ); - console.log('Received data: ', data); - for (const entry of data) { - if (entry.user_data && entry.user_data['user_rating']) - { - entry.user_rating = entry.user_data['user_rating']; - } - } - console.log('Received data: ', data); - this.tableData.set(data); // Update the signal value + handlePageEvent(event: PageEvent) { + this.pageEvent = event; + this.offset = event.pageIndex * event.pageSize; + this.limit = event.pageSize; + this.page = this.offset / this.limit; + this.updateUI(); + } + + updateUI() { + this.updateTotalScanCount(this.sessionId); + this.updateTableData(this.sessionId); + } + + updateTableData(sessionId: string) { + this.scanData + .getScanData( + sessionId, + this.offset, + this.limit, + this.displayedColumns, + false, + { scan_number: this.sorting } + ) + .subscribe({ + next: (data) => { + console.log('Received data: ', data); + for (const entry of data) { + if (entry.user_data && entry.user_data['user_rating']) { + entry.user_rating = entry.user_data['user_rating']; + } + } + this.tableData.set(data); + }, + error: (error) => { + console.error('Error fetching data: ', error); + }, + }); + } + + updateTotalScanCount(sessionId: string) { + this.scanCount.getScanCount(sessionId).subscribe({ + next: (data) => { + console.log('Received data: ', data); + this.totalScanCount = data.count; + }, + error: (error) => { + console.error('Error fetching data: ', error); + }, + }); } } - - -// @Component({ -// selector: 'app-scan-table', -// standalone: true, -// imports: [CommonModule, MatPaginator, MatTableModule, MatIconModule, MatToolbarModule, MatCardModule, MatButtonModule, MatPaginatorModule], -// templateUrl: './scan-table.component.html', -// styleUrl: './scan-table.component.scss', -// changeDetection: ChangeDetectionStrategy.OnPush, -// }) -// export class ScanTableComponent { -// tableData!: Promise; -// limit: number = 100; -// offset: number = 0; -// displayedColumns: string[] = ['scan_number', 'status', "num_points", "scan_name", "scan_type", "dataset_number", "timestamp", "user_rating"]; -// ignoredEntries: string[] = ["scan_report_devices", "user_metadata", "readout_priority", "scan_parameters", "request_inputs", "info"]; -// // , "scan_name", "scan_type"]; - -// @ViewChild(MatPaginatorModule) paginator!: MatPaginatorModule; - -// constructor( private scanData: ScanDataService) { - -// } - -// ngOnInit(): void { - -// let sessionId = "6793628df62026a414d9338e"; -// this.tableData = this.updateTableData(sessionId = "6793628df62026a414d9338e"); -// // this.tableData = this.scanData.getScanData(sessionId = "6793628df62026a414d9338e"); -// } - -// async updateTableData(sessionId: string, offset: number = 0, limit: number = 100) { -// const data = await firstValueFrom(this.scanData.getScanData(sessionId=sessionId, offset=this.offset, limit=this.limit, this.displayedColumns, false, {"scan_number": -1})); -// console.log("Received data: ", data); -// // this.tableData = data; -// return data; -// } -// }