diff --git a/backend/src/router/runRecordsRouter.js b/backend/src/router/runRecordsRouter.js index 5a2d9c91..24470a0f 100644 --- 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,7 +79,7 @@ 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: @@ -80,7 +87,7 @@ async function parseAndRespond(output, type, res) { 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: @@ -88,11 +95,11 @@ async function parseAndRespond(output, type, res) { 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/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html index 80ad69f6..51d47aff 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html +++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html @@ -14,27 +14,30 @@ SPDX-License-Identifier: Apache-2.0 --> + Parameters - - - - - - - - - - - - - -
Record Name{{ record.recordName }} - {{ column | parametersLabel }} - - {{ record[column] | emptyTableField }} -
+
+ + + + + + + + + + + + + +
Record Name{{ record.recordName }} + {{ column | parametersLabel }} + + {{ record[column] | emptyTableField }} +
+
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss index cb138919..0e47ea7c 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss +++ b/frontend/src/app/modules/algorithm-comparison/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 new file mode 100644 index 00000000..f5a4c589 --- /dev/null +++ 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 new file mode 100644 index 00000000..513a0a31 --- /dev/null +++ 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 index e00cf89f..f83479fc 100644 --- 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/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html index adbc0e48..f6044923 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html +++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html @@ -15,18 +15,22 @@ SPDX-License-Identifier: Apache-2.0 -->
-
- -
-
-
- {{ item.label }} +
+
+ +
+
+
+ {{ item.label }} +
+
+
- - - +
+ +
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss index 3b0880b2..3879cc48 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss +++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss @@ -21,23 +21,23 @@ 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 { @@ -45,16 +45,6 @@ } } -:host-context(.collapsed) { - .sidenav-item { - justify-content: center; - - .item-label { - display: none; - } - } -} - :host[itemStyle='grey'] .sidenav-item { color: var(--foregrounds-750); diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts index 6d1e4096..f6d145b5 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts +++ b/frontend/src/app/modules/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 index f13d011b..342e9e00 100644 --- 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 @@
+
+ +
+
@@ -52,10 +56,14 @@
+
+ +
+
{{ isExpanded ? 'chevron_left' : 'chevron_right' }} - Collapse + Collapse
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 index 50e0845a..50bca1a0 100644 --- 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,7 +66,9 @@ 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 { @@ -73,11 +76,7 @@ color: var(--foregrounds-750); } - span { - font-size: 14px; - transition: opacity 0.3s ease; - color: var(--foregrounds-750); - } + color: var(--foregrounds-750); } } diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts index 4edd013a..1a432291 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts +++ b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts @@ -15,7 +15,7 @@ // SPDX-License-Identifier: Apache-2.0 import { animate, state, style, transition, trigger } from '@angular/animations'; -import { Component, OnInit, Renderer2 } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { ConfigActions } from '../../../../state/core/configs/configs.actions'; @@ -35,10 +35,6 @@ import { ConfigsFacadeService } from '../../../core/services/configs-facade.serv state('expanded', style({ width: '230px' })), state('collapsed', style({ width: '40px' })), transition('expanded <=> collapsed', animate('300ms ease-in-out')) - ]), - 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 }))]) ]) ] }) @@ -50,8 +46,7 @@ export class MsSidenavComponent implements OnInit { constructor( private router: Router, - private configFacadeService: ConfigsFacadeService, - private renderer: Renderer2 + private configFacadeService: ConfigsFacadeService ) {} ngOnInit(): void { @@ -74,12 +69,11 @@ export class MsSidenavComponent implements OnInit { } } - trackByRoute(_: number, item: SidenavItem): string { - return item.route; - } - - // New method to toggle sidebar expansion toggleSidebar(): void { this.isExpanded = !this.isExpanded; } + + trackByRoute(_: number, item: SidenavItem): string { + return item.route; + } } diff --git a/frontend/src/app/modules/wizard/components/wizard/wizard.component.scss b/frontend/src/app/modules/wizard/components/wizard/wizard.component.scss index 9c2bda24..90669aac 100644 --- a/frontend/src/app/modules/wizard/components/wizard/wizard.component.scss +++ b/frontend/src/app/modules/wizard/components/wizard/wizard.component.scss @@ -23,7 +23,6 @@ .left { width: 45%; gap: 20px; - margin-left: 20px; } .right {