From 21f9ed45d011f1793621398dae8542251071acd4 Mon Sep 17 00:00:00 2001 From: RidhamShah Date: Tue, 12 Mar 2024 14:09:20 +0530 Subject: [PATCH 1/3] Solve UI bugs of validation loading spinner --- .../api/controllers/ExperimentController.ts | 56 +++++++++++++++++-- .../import-experiment.component.ts | 7 +-- 2 files changed, 54 insertions(+), 9 deletions(-) diff --git a/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts b/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts index abff21948f..e2f42b15da 100644 --- a/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts +++ b/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts @@ -1146,21 +1146,44 @@ export class ExperimentController { /** * @swagger * /experiments/{validation}: - * put: + * post: * description: Validating Experiment * consumes: * - application/json * parameters: - * - in: path + * - in: body + * name: experiments + * required: true + * schema: + * type: array + * items: + * type: object + * properties: + * fileName: + * type: string + * fileContent: + * type: string + * description: Experiment Files * tags: * - Experiments * produces: * - application/json * responses: * '200': - * description: Validations are done + * description: Validations are completed + * schema: + * type: array + * items: + * type: object + * properties: + * fileName: + * type: string + * error: + * type: string * '401': * description: AuthorizationRequiredError + * '500': + * description: Internal Server Error */ @Post('/validation') public validateExperiment( @@ -1173,12 +1196,24 @@ export class ExperimentController { /** * @swagger * /experiments/{import}: - * put: + * post: * description: Import New Experiment * consumes: * - application/json * parameters: - * - in: path + * - in: body + * name: experiments + * required: true + * schema: + * type: array + * items: + * type: object + * properties: + * fileName: + * type: string + * fileContent: + * type: string + * description: Experiment Files * tags: * - Experiments * produces: @@ -1186,8 +1221,19 @@ export class ExperimentController { * responses: * '200': * description: Experiment is imported + * schema: + * type: array + * items: + * type: object + * properties: + * fileName: + * type: string + * error: + * type: string * '401': * description: AuthorizationRequiredError + * '500': + * description: Internal Server Error */ @Post('/import') public importExperiment( diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts index 5eea1bc57d..755f03271d 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts @@ -48,13 +48,12 @@ export class ImportExperimentComponent implements OnInit { } async importExperiment() { + this.onCancelClick(); const importResult = (await this.dataService .importExperiment(this.allExperiments) .toPromise()) as ValidateExperimentError[]; //this.experimentService.importExperiment(this.allExperiments); this.showNotification(importResult); - this.onCancelClick(); - this.experimentService.loadExperiments(true); } @@ -97,11 +96,11 @@ export class ImportExperimentComponent implements OnInit { // Set loading to true before processing the files this.isLoadingExperiments$ = true; - const readFile = (fileIndex) => { + const readFile = async (fileIndex) => { if (fileIndex >= event.target.files.length) { // Check if this is the last file if (fileIndex >= this.uploadedFileCount) { - this.checkValidation(); + await this.checkValidation(); this.isLoadingExperiments$ = false; } return; From 3782312958f39b03ba7f02de2181ec16a747f1e4 Mon Sep 17 00:00:00 2001 From: RidhamShah Date: Thu, 14 Mar 2024 10:25:20 +0530 Subject: [PATCH 2/3] Solve import segment UI spinner bugs --- .../import-segment.component.html | 46 +++++++++++-------- .../import-segment.component.scss | 8 ++++ .../import-segment.component.ts | 6 +-- 3 files changed, 38 insertions(+), 22 deletions(-) diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.html index 78e8e5dbd5..c8f228d10c 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.html @@ -6,27 +6,29 @@ {{ 'segments.import-segmemt.message.text' | translate }}

- - - - - File Name - - {{ element.fileName }} - - + + + + + + File Name + + {{ element.fileName }} + + - - - Error/Warning - - {{ element.error }} - - + + + Error/Warning + + {{ element.error }} + + - - - + + + + @@ -50,3 +52,9 @@ + + +
+ +
+ \ No newline at end of file diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.scss index 7cbcf28bc3..ff8214862e 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.scss +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.scss @@ -34,4 +34,12 @@ justify-content: flex-end; padding: 0 40px 40px; } + + .loading-container { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + margin-top: 60px; + } } diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts index c0a46cc8e2..95da8f2329 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts @@ -37,12 +37,12 @@ export class ImportSegmentComponent { } async importSegments() { + this.onCancelClick(); const importResult = (await this.segmentdataService .importSegments(this.fileData) .toPromise()) as SegmentImportError[]; this.showNotification(importResult); - this.onCancelClick(); this.segmentsService.fetchSegments(true); } @@ -75,12 +75,12 @@ export class ImportSegmentComponent { fileList.forEach((file) => { const reader = new FileReader(); - reader.onload = (e) => { + reader.onload = async (e) => { const fileContent = e.target?.result; this.fileData.push({ fileName: file.name, fileContent: fileContent }); // Check if this is the last file and validate if (this.fileData.length === this.uploadedFileCount) { - this.validateFiles(); + await this.validateFiles(); this.isLoadingSegments$ = false; } }; From fdef5c6f926b8901d143c5c31c036554247cd856 Mon Sep 17 00:00:00 2001 From: RidhamShah Date: Fri, 15 Mar 2024 12:50:03 +0530 Subject: [PATCH 3/3] Refactor fileRead function to use map --- .../import-experiment.component.ts | 39 ++++++++----------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts index 755f03271d..93d684fbe0 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts @@ -85,8 +85,6 @@ export class ImportExperimentComponent implements OnInit { } async uploadFile(event) { - const index = 0; - const reader = new FileReader(); this.uploadedFileCount = event.target.files.length; this.importFileErrors = []; this.allExperiments = []; @@ -96,25 +94,22 @@ export class ImportExperimentComponent implements OnInit { // Set loading to true before processing the files this.isLoadingExperiments$ = true; - const readFile = async (fileIndex) => { - if (fileIndex >= event.target.files.length) { - // Check if this is the last file - if (fileIndex >= this.uploadedFileCount) { - await this.checkValidation(); - this.isLoadingExperiments$ = false; - } - return; - } - const file = event.target.files[fileIndex]; - const fileName = file.name; - reader.onload = (e) => { - const fileContent = e.target.result; - this.allExperiments.push({ fileName: fileName, fileContent: fileContent }); - readFile(fileIndex + 1); - }; - reader.readAsText(file); - }; - - readFile(index); + const filesArray = Array.from(event.target.files) as any[]; + await Promise.all( + filesArray.map((file) => { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = (e) => { + const fileContent = e.target.result; + this.allExperiments.push({ fileName: file.name, fileContent: fileContent }); + resolve(); + }; + reader.readAsText(file); + }); + }) + ); + + await this.checkValidation(); + this.isLoadingExperiments$ = false; } }