bug fixes and improvements

cisco-open · Jul 9, 2024 · ca2fc24 · ca2fc24
1 parent 7aa6dae
commit ca2fc24
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 84 deletions.
diff --git a/backend/src/router/runRecordsRouter.js b/backend/src/router/runRecordsRouter.js
@@ -6,6 +6,7 @@ const checkSshConnection = require('../middlewares/checkSshConnection');
 const StatelessPruningParser = require('../parsers/statelessPruningParser');
 const StatelessQuantizationParser = require('../parsers/statelessQuantizationParser');
 const StatelessMachineUnlearningParser = require('../parsers/statelessMachineUnlearningParser');
+const { BAD_REQUEST, OK, INTERNAL_SERVER_ERROR } = require('../constants/httpStatusCodes');
 
 const RUN_RECORDS_PATHS = {
 	[ALGORITHM_TYPES.QUANTIZATION]: `${process.env.MACHINE_LEARNING_CORE_PATH}/examples_quant/run_records`,
@@ -34,10 +35,16 @@ router.get('/run-records-filenames/:type', checkSshConnection, (req, res) => {
 					return baseName.replace(/\.json$/, '');
 				});
 
-			res.status(200).send(files);
+			res.status(OK).send(files);
 		},
 		() => {},
-		(error) => res.status(500).send({ error: `SSH error: ${error}` })
+		(error) => {
+			if (error.includes('No such file or directory')) {
+				res.status(OK).send([]);
+			} else {
+				res.status(INTERNAL_SERVER_ERROR).send({ error });
+			}
+		}
 	);
 });
 
@@ -47,7 +54,7 @@ router.get('/run-records-summarized-data/:type/:filename', checkSshConnection, (
 	const directoryPath = RUN_RECORDS_PATHS[type];
 
 	if (!directoryPath) {
-		return res.status(400).send({ error: 'Invalid model type specified' });
+		return res.status(BAD_REQUEST).send({ error: 'Invalid model type specified' });
 	}
 
 	const filePath = `${directoryPath}/${fileName}.json`;
@@ -58,7 +65,7 @@ router.get('/run-records-summarized-data/:type/:filename', checkSshConnection, (
 		async (output) => await parseAndRespond(output, type, res),
 		() => {},
 		(error) => {
-			res.status(500).send({ error: `SSH error: ${error}` });
+			res.status(INTERNAL_SERVER_ERROR).send({ error: `SSH error: ${error}` });
 		},
 		true
 	);
@@ -72,27 +79,27 @@ async function parseAndRespond(output, type, res) {
 			jsonData.messages = await StatelessPruningParser.parseMessages(jsonData.messages);
 			const summarizedDataPruning = summarizePruningData(jsonData);
 			res.setHeader('Content-Type', 'application/json; charset=utf-8');
-			res.status(200).send(summarizedDataPruning);
+			res.status(OK).send(summarizedDataPruning);
 			break;
 
 		case ALGORITHM_TYPES.QUANTIZATION:
 			jsonData.messages = await StatelessQuantizationParser.parseMessages(jsonData.messages);
 			const summarizedDataQuantization = summarizeQuantizationData(jsonData);
 
 			res.setHeader('Content-Type', 'application/json; charset=utf-8');
-			res.status(200).send(summarizedDataQuantization);
+			res.status(OK).send(summarizedDataQuantization);
 			break;
 
 		case ALGORITHM_TYPES.MACHINE_UNLEARNING:
 			jsonData.messages = await StatelessMachineUnlearningParser.parseMessages(jsonData.messages);
 			const summarizedMachineUnlearning = summarizeMachineUnlearningData(jsonData);
 
 			res.setHeader('Content-Type', 'application/json; charset=utf-8');
-			res.status(200).send(summarizedMachineUnlearning);
+			res.status(OK).send(summarizedMachineUnlearning);
 			break;
 
 		default:
-			res.status(500).send({ error: 'Algorithm type not supported.' });
+			res.status(BAD_REQUEST).send({ error: 'Algorithm type not supported.' });
 			break;
 	}
 }

diff --git a/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html b/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html
@@ -14,27 +14,30 @@
 
   SPDX-License-Identifier: Apache-2.0
    -->
+
 <mat-expansion-panel expanded="true">
 	<mat-expansion-panel-header>
 		<mat-panel-title class="paragraph-bold-p3-small-bold"> Parameters </mat-panel-title>
 	</mat-expansion-panel-header>
 
-	<table mat-table [dataSource]="dataSource" matSort class="mat-table">
-		<ng-container matColumnDef="recordName">
-			<th mat-header-cell *matHeaderCellDef mat-sort-header>Record Name</th>
-			<td mat-cell *matCellDef="let record">{{ record.recordName }}</td>
-		</ng-container>
-
-		<ng-container *ngFor="let column of displayedColumns.slice(1)" [matColumnDef]="column">
-			<th mat-header-cell *matHeaderCellDef mat-sort-header>
-				{{ column | parametersLabel }}
-			</th>
-			<td mat-cell *matCellDef="let record">
-				{{ record[column] | emptyTableField }}
-			</td>
-		</ng-container>
-
-		<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-		<tr mat-row *matRowDef="let row; columns: displayedColumns" class="hover-highlight"></tr>
-	</table>
+	<div class="table-container">
+		<table mat-table [dataSource]="dataSource" matSort class="mat-table">
+			<ng-container matColumnDef="recordName">
+				<th mat-header-cell *matHeaderCellDef mat-sort-header>Record Name</th>
+				<td mat-cell *matCellDef="let record">{{ record.recordName }}</td>
+			</ng-container>
+
+			<ng-container *ngFor="let column of displayedColumns.slice(1)" [matColumnDef]="column">
+				<th mat-header-cell *matHeaderCellDef mat-sort-header>
+					{{ column | parametersLabel }}
+				</th>
+				<td mat-cell *matCellDef="let record">
+					{{ record[column] | emptyTableField }}
+				</td>
+			</ng-container>
+
+			<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+			<tr mat-row *matRowDef="let row; columns: displayedColumns" class="hover-highlight"></tr>
+		</table>
+	</div>
 </mat-expansion-panel>
diff --git a/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss b/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss
@@ -14,6 +14,10 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
+.table-container {
+	overflow: auto;
+}
+
 .hover-highlight:hover {
 	background-color: var(--backgrounds-80);
 }

diff --git a/frontend/src/app/modules/shared/animations/fade-in-out.animation.ts b/frontend/src/app/modules/shared/animations/fade-in-out.animation.ts
@@ -0,0 +1,22 @@
+//    Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   Unless required by applicable law or agreed to in writing, software
+//   distributed under the License is distributed on an "AS IS" BASIS,
+//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//   See the License for the specific language governing permissions and
+//   limitations under the License.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const fadeInOutAnimation = trigger('fadeInOut', [
+	transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in-out', style({ opacity: 1 }))]),
+	transition(':leave', [animate('300ms ease-in-out', style({ opacity: 0 }))])
+]);
diff --git a/frontend/src/app/modules/shared/animations/fade-right-to-left.animation.ts b/frontend/src/app/modules/shared/animations/fade-right-to-left.animation.ts
@@ -0,0 +1,25 @@
+//    Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   Unless required by applicable law or agreed to in writing, software
+//   distributed under the License is distributed on an "AS IS" BASIS,
+//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//   See the License for the specific language governing permissions and
+//   limitations under the License.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const fadeRightToLeftAnimation = trigger('fadeRightToLeft', [
+	transition(':enter', [
+		style({ opacity: 0, transform: 'translateX(100%)' }),
+		animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateX(0)' }))
+	]),
+	transition(':leave', [animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateX(100%)' }))])
+]);
diff --git a/frontend/src/app/modules/shared/components/ms-main-layout/ms-main-layout.component.scss b/frontend/src/app/modules/shared/components/ms-main-layout/ms-main-layout.component.scss
@@ -1,3 +1,19 @@
+//    Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   Unless required by applicable law or agreed to in writing, software
+//   distributed under the License is distributed on an "AS IS" BASIS,
+//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//   See the License for the specific language governing permissions and
+//   limitations under the License.
+
+//   SPDX-License-Identifier: Apache-2.0
+
 .container {
 	display: flex;
 	flex-direction: column;
@@ -16,7 +32,7 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	margin-right: 20px;
+	margin: 0 10px;
 	overflow-x: hidden;
 }
 

diff --git a/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html
@@ -15,18 +15,22 @@
   SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="sidenav-item" [routerLink]="item.route" routerLinkActive="active-route">
-	<div class="item-icon">
-		<mat-icon fontSet="ms" [fontIcon]="item.icon"></mat-icon>
-	</div>
-	<div class="item-label paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded" [@fadeInOut]>
-		<div class="text-container">
-			{{ item.label }}
+	<div class="left-side">
+		<div class="item-icon">
+			<mat-icon fontSet="ms" [fontIcon]="item.icon"></mat-icon>
+		</div>
+		<div *ngIf="isExpanded">
+			<div class="item-label paragraph-semibold-p3-small-emphasis">
+				{{ item.label }}
+			</div>
 		</div>
+	</div>
 
+	<div class="right-side">
 		<ng-container *ngIf="pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async as currentRunningPageKey">
-			<ng-container *ngIf="currentRunningPageKey === item?.key">
-				<ms-spining-indicator class="ml-2"></ms-spining-indicator>
-			</ng-container>
+			<div *ngIf="isExpanded && currentRunningPageKey === item?.key">
+				<ms-spining-indicator></ms-spining-indicator>
+			</div>
 		</ng-container>
 	</div>
 </div>
diff --git a/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss b/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss
@@ -21,40 +21,30 @@
 	display: flex;
 	cursor: pointer;
 
-	.item-icon {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	.left-side {
 		display: flex;
 		align-items: center;
 	}
 
-	.item-label {
+	.item-icon {
 		display: flex;
 		align-items: center;
-		margin-left: 10px;
-		transition: opacity 0.3s ease;
 	}
 
-	.text-container {
-		width: 180px;
+	.item-label {
+		margin-left: 10px;
 		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	&.active-route .item-label {
 		@include typography.paragraph-bold-p3-small-bold;
 	}
 }
 
-:host-context(.collapsed) {
-	.sidenav-item {
-		justify-content: center;
-
-		.item-label {
-			display: none;
-		}
-	}
-}
-
 :host[itemStyle='grey'] .sidenav-item {
 	color: var(--foregrounds-750);
 

diff --git a/...ules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts b/...ules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts
@@ -14,22 +14,14 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { animate, style, transition, trigger } from '@angular/animations';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { SidenavItem } from '../../../../../core/models/interfaces/sidenav.interface';
 import { PageRunningScriptSpiningIndicatorService } from '../../../../../core/services/page-running-script-spinning-indicator.service';
 
 @Component({
 	selector: 'ms-sidenav-item',
 	templateUrl: './ms-sidenav-item.component.html',
-	styleUrls: ['./ms-sidenav-item.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	animations: [
-		trigger('fadeInOut', [
-			transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in-out', style({ opacity: 1 }))]),
-			transition(':leave', [animate('300ms ease-in-out', style({ opacity: 0 }))])
-		])
-	]
+	styleUrls: ['./ms-sidenav-item.component.scss']
 })
 export class MsSidenavItemComponent {
 	@Input() item!: SidenavItem;

diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html
@@ -31,6 +31,10 @@
 			</div>
 		</div>
 
+		<div class="mt-3">
+			<mat-divider></mat-divider>
+		</div>
+
 		<ng-container *ngIf="currentMode === Modes.GUIDED; else expertModeBlock">
 			<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.guided; trackBy: trackByRoute">
 				<ms-sidenav-item [item]="item" [isExpanded]="isExpanded" itemStyle="grey"></ms-sidenav-item>
@@ -52,10 +56,14 @@
 		</div>
 	</div>
 
+	<div class="mt-2 mb-4">
+		<mat-divider></mat-divider>
+	</div>
+
 	<div class="bottom-section-items">
 		<div class="sidebar-toggle" (click)="toggleSidebar()">
 			<mat-icon>{{ isExpanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>
-			<span class="paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded" @fadeInOut>Collapse</span>
+			<span class="paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded">Collapse</span>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.scss b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.scss
@@ -27,6 +27,7 @@
 	.switch {
 		display: flex;
 		cursor: pointer;
+		height: 38px;
 
 		.left {
 			display: flex;
@@ -65,19 +66,17 @@
 		transition: background-color 0.3s ease;
 
 		&:hover {
-			background-color: rgba(0, 0, 0, 0.04);
+			color: var(--foregrounds-800);
+			background-color: var(--foregrounds-150);
+			border-radius: 8px;
 		}
 
 		mat-icon {
 			margin-right: 8px;
 			color: var(--foregrounds-750);
 		}
 
-		span {
-			font-size: 14px;
-			transition: opacity 0.3s ease;
-			color: var(--foregrounds-750);
-		}
+		color: var(--foregrounds-750);
 	}
 }