Release v1.5 (#27)

src/app/features/experiments/containers/experiment-info-navbar/experiment-info-navbar.component.html

@@ -0,0 +1,58 @@
+<nav [smOverflows]="splitSize" (onOverflows)="navbarOverflowed($event)" [class.minimized]="minimized">
+    <span [routerLink]="['execution']" routerLinkActive #rlaExecution="routerLinkActive" queryParamsHandling="preserve">
+      <sm-navbar-item header="execution" [active]="rlaExecution.isActive" class="small-nav"></sm-navbar-item>
+    </span>
+      <span [routerLink]="['hyper-params/hyper-param/_empty_']" queryParamsHandling="merge">
+      <sm-navbar-item header="configuration"
+                      class="small-nav"
+                      [active]="(routerConfig$| async)?.includes('hyper-params')"></sm-navbar-item>
+    </span>
+      <span [routerLink]="['artifacts']" routerLinkActive #rlaModel="routerLinkActive" queryParamsHandling="preserve">
+      <sm-navbar-item header="artifacts"
+                      class="small-nav"
+                      [active]="rlaModel.isActive"></sm-navbar-item>
+    </span>
+      <span [routerLink]="['general']" routerLinkActive #rlaGeneral="routerLinkActive" queryParamsHandling="preserve">
+      <sm-navbar-item header="info"
+                      class="small-nav"
+                      [active]="rlaGeneral.isActive"></sm-navbar-item>
+    </span>
+
+  <span [matMenuTriggerFor]="results" *ngIf="overflow">
+        <sm-navbar-item header="results"
+                        class="small-nav"
+                        [multi]="true"
+                        [active]="rlaDebug.isActive || rlaPlots.isActive || rlaScalars.isActive || rlaLog.isActive"></sm-navbar-item>
+  </span>
+  <div class="d-inline-block" [style.visibility]="overflow ? 'hidden' : 'visible'">
+  <span [routerLink]="baseInfoRoute.concat(['log'])" routerLinkActive queryParamsHandling="preserve"
+        #rlaLog="routerLinkActive">
+        <sm-navbar-item class="small-nav" header="console" [active]="rlaLog.isActive"></sm-navbar-item>
+      </span>
+    <span [routerLink]="baseInfoRoute.concat(['metrics','scalar'])" routerLinkActive queryParamsHandling="preserve"
+          #rlaScalars="routerLinkActive">
+        <sm-navbar-item class="small-nav" header="Scalars" [active]="rlaScalars.isActive"></sm-navbar-item>
+      </span>
+    <span [routerLink]="baseInfoRoute.concat(['metrics','plots'])" routerLinkActive queryParamsHandling="preserve"
+          #rlaPlots="routerLinkActive">
+        <sm-navbar-item class="small-nav" header="PLOTS" [active]="rlaPlots.isActive"></sm-navbar-item>
+      </span>
+    <span [routerLink]="baseInfoRoute.concat(['debugImages'])" routerLinkActive queryParamsHandling="preserve"
+          #rlaDebug="routerLinkActive">
+        <sm-navbar-item class="small-nav" header="DEBUG SAMPLES" [active]="rlaDebug.isActive"></sm-navbar-item>
+      </span>
+  </div>
+  <mat-menu #results="matMenu">
+    <button mat-menu-item [routerLink]="baseInfoRoute.concat(['log'])" [class.active]="rlaLog.isActive">CONSOLE</button>
+    <button mat-menu-item [routerLink]="baseInfoRoute.concat(['metrics','scalar'])"
+            [class.active]="rlaScalars.isActive">SCALARS
+    </button>
+    <button mat-menu-item [routerLink]="baseInfoRoute.concat(['metrics','plots'])" [class.active]="rlaPlots.isActive">
+      PLOTS
+    </button>
+    <button mat-menu-item [routerLink]="baseInfoRoute.concat(['debugImages'])" [class.active]="rlaDebug.isActive">DEBUG
+      SAMPLES
+    </button>
+  </mat-menu>
+  <ng-content select="[refresh]"></ng-content>
+</nav>

src/app/features/experiments/containers/experiment-info-navbar/experiment-info-navbar.component.scss

@@ -0,0 +1,32 @@
+@import "variables";
+$output-tabs-height: 40px;
+
+nav {
+  height: $output-tabs-height;
+  position: relative;
+  text-align: center;
+  border-bottom: 1px solid #efefef;
+  //overflow: hidden;
+  padding: 0 24px;
+
+  .refresh-position {
+    position: absolute;
+    right: 16px;
+    top: 6px;
+    display: flex;
+    align-items: center;
+  }
+  .refreshIcon{
+    margin-right: 10px;
+  }
+  span.disabled {
+    pointer-events: none;
+  }
+}
+.mat-menu-item {
+  padding-left: 22px;
+  &.active {
+    border-left: 6px solid $purple;
+    padding-left: 16px;
+  }
+}

src/app/features/experiments/containers/experiment-info-navbar/experiment-info-navbar.component.ts

@@ -0,0 +1,38 @@
+import {Component, Input} from '@angular/core';
+import {FeaturesEnum} from '../../../../business-logic/model/users/featuresEnum';
+import {selectRouterConfig} from '../../../../webapp-common/core/reducers/router-reducer';
+import {Store} from '@ngrx/store';
+import {IExperimentInfoState} from '../../reducers/experiment-info.reducer';
+import {Observable} from 'rxjs';
+
+
+@Component({
+  selector: 'sm-experiment-info-navbar',
+  templateUrl: './experiment-info-navbar.component.html',
+  styleUrls: ['./experiment-info-navbar.component.scss']
+})
+export class ExperimentInfoNavbarComponent {
+  public featuresEnum = FeaturesEnum;
+  public routerConfig$: Observable<string[]>;
+  public baseInfoRoute: string[];
+  public overflow: boolean;
+  private _minimized: boolean;
+
+  @Input() set minimized(minimized: boolean) {
+    this.baseInfoRoute = minimized ? ['info-output'] : [];
+    this._minimized = minimized;
+  }
+  get minimized(){
+    return this._minimized;
+  }
+
+  @Input() splitSize: number;
+
+
+  constructor(private store: Store<IExperimentInfoState>,) {
+    this.routerConfig$ = this.store.select(selectRouterConfig);
+  }
+  navbarOverflowed($event: boolean) {
+    this.overflow = $event;
+  }
+}

src/app/features/experiments/containers/experiment-info/experiment-info.component.html

@@ -1,41 +0,0 @@
-<sm-experiment-info-header-status-progress-bar
-  [status]="(tableSelectedExperiment$| async)?.status || selectedExperiment?.status"
-  [editable]="editable$ | async"
-  [showMaximize]="true"
-  (closeInfoClicked)="deselectExperiment()"
-  (maximizedClicked)="maximize()">
-</sm-experiment-info-header-status-progress-bar>
-
-<div class="experiment-info-container light-theme">
-  <sm-experiment-info-header
-    [experiment]="(tableSelectedExperiment$| async) || selectedExperiment"
-    [infoData]="infoData$ | async"
-    [editable]="!isExample"
-    [showMenu]="true"
-    [backdropActive]="backdropActive$|async"
-    (experimentNameChanged)="updateExperimentName($event)"
-  >
-  </sm-experiment-info-header>
-  <nav>
-    <span routerLink="execution" [routerLinkActive]="'disabled'" queryParamsHandling="merge">
-      <sm-navbar-item header="execution" [active]="routerConfig.includes('execution')"></sm-navbar-item>
-    </span>
-
-    <span [routerLink]="['hyper-params/hyper-param/_empty_']" [class.disabled]="routerConfig.includes('hyper-params')" queryParamsHandling="merge">
-      <sm-navbar-item header="configuration" [active]="routerConfig.includes('hyper-params')"></sm-navbar-item>
-    </span>
-    <span [routerLink]="['artifacts']" [routerLinkActive]="'disabled'" queryParamsHandling="preserve">
-      <sm-navbar-item header="artifacts" [active]="routerConfig.includes('artifacts')"></sm-navbar-item>
-    </span>
-    <span [routerLink]="['general']" [routerLinkActive]="'disabled'" queryParamsHandling="preserve">
-      <sm-navbar-item header="info" [active]="routerConfig.includes('general')"></sm-navbar-item>
-    </span>
-    <span [routerLink]="['info-output']" [routerLinkActive]="'disabled'" queryParamsHandling="preserve">
-      <sm-navbar-item header="results" [active]="routerConfig.includes('info-output')"></sm-navbar-item>
-    </span>
-  </nav>
-  <div class="experiment-info-body" #scrollContainer>
-    <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
-  </div>
-</div>
-

src/app/features/experiments/containers/experiment-info/experiment-info.component.scss

@@ -1,38 +0,0 @@
-@import "../../../../webapp-common/shared/ui-components/styles/variables";
-@import "../../../../webapp-common/layout/layout.scss";
-
-:host {
-  display: block;
-  height: 100%;
-
-  .experiment-info-body {
-    height: calc(100% - #{$experiment-info-header-height + $experiment-info-tabs-height});
-    flex-grow: 1;
-    overflow: auto;
-  }
-
-  .experiment-info-container {
-    height: calc(100% - #{$project-info-progress-height});
-    padding: 15px 0 0 5px;
-    display: flex;
-    flex-direction: column;
-
-    nav {
-      height: $experiment-info-tabs-height;
-      border-bottom: 1px solid rgba(2, 2, 2, 0.07);
-
-      span.disabled {
-        pointer-events: none;
-      }
-    }
-  }
-
-  ::ng-deep nav {
-    border-bottom: 1px solid rgba(2, 2, 2, 0.07);
-  }
-
-  ::ng-deep sm-simple-table-2 .headers {
-    font-size: 12px;
-  }
-
-}

src/app/features/experiments/containers/experiment-info/experiment-info.component.ts

@@ -1,131 +0,0 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute, Params, Router} from '@angular/router';
-import {Store} from '@ngrx/store';
-import {get} from 'lodash/fp';
-import {Observable, Subscription} from 'rxjs';
-import {debounceTime, distinctUntilChanged, filter, map, tap} from 'rxjs/operators';
-import {MESSAGES_SEVERITY} from '~/app.constants';
-import {IExperimentInfoState} from '../../reducers/experiment-info.reducer';
-import {selectExperimentInfoData, selectIsExperimentEditable, selectSelectedExperiment} from '../../reducers';
-import {selectBackdropActive} from '@common/core/reducers/view.reducer';
-import {isReadOnly} from '@common/shared/utils/shared-utils';
-import {selectRouterConfig, selectRouterParams, selectRouterQueryParams} from '@common/core/reducers/router-reducer';
-import * as commonInfoActions from '../../../../webapp-common/experiments/actions/common-experiments-info.actions';
-import {ExperimentDetailsUpdated} from '@common/experiments/actions/common-experiments-info.actions';
-import {addMessage} from '@common/core/actions/layout.actions';
-import {IExperimentInfo} from '../../shared/experiment-info.model';
-import {selectSelectedTableExperiment} from '@common/experiments/reducers';
-import {ITableExperiment} from '@common/experiments/shared/common-experiment-model.model';
-import {setTableMode} from '@common/experiments/actions/common-experiments-view.actions';
-
-
-@Component({
-  selector: 'sm-experiment-info',
-  templateUrl: './experiment-info.component.html',
-  styleUrls: ['./experiment-info.component.scss']
-})
-export class ExperimentInfoComponent implements OnInit, OnDestroy {
-
-  private paramsSubscription: Subscription;
-  public selectedExperiment: IExperimentInfo;
-  private selectedExperimentSubscription: Subscription;
-  public editable$: Observable<boolean>;
-  public infoData$: Observable<IExperimentInfo>;
-  public backdropActive$: Observable<any>;
-  public isExample: boolean;
-  private projectId: string;
-  private experimentId: string;
-  public resultsTab: boolean;
-  public queryParams$: Observable<Params>;
-  public routerConfig: string[];
-  private routerConfigSubscription: Subscription;
-  public tableSelectedExperiment$: Observable<ITableExperiment>;
-  private toMaximize = false;
-
-  constructor(
-    private router: Router,
-    private store: Store<IExperimentInfoState>,
-    private route: ActivatedRoute
-  ) {
-    this.editable$ = this.store.select(selectIsExperimentEditable);
-    this.infoData$ = this.store.select(selectExperimentInfoData);
-    this.backdropActive$ = this.store.select(selectBackdropActive);
-    this.queryParams$ = this.store.select(selectRouterQueryParams);
-    this.tableSelectedExperiment$ = this.store.select(selectSelectedTableExperiment);
-  }
-
-  ngOnInit() {
-    this.selectedExperimentSubscription = this.store.select(selectSelectedExperiment)
-      .subscribe(experiment => {
-        this.selectedExperiment = experiment;
-        this.isExample = isReadOnly(experiment);
-      });
-    this.routerConfigSubscription = this.store.select(selectRouterConfig).subscribe(routerConfig => {
-      this.routerConfig = routerConfig;
-    });
-
-    this.paramsSubscription = this.store.select(selectRouterParams)
-      .pipe(
-        tap((params) => {
-          this.projectId = get('projectId', params);
-          this.resultsTab = 'info-output' === this.route.firstChild.routeConfig.path;
-        }),
-        debounceTime(150),
-        map(params => get('experimentId', params)),
-        filter(experimentId => !!experimentId),
-        distinctUntilChanged()
-      )
-      .subscribe(experimentId => {
-        this.experimentId = experimentId;
-
-        // We already have GetExperimentInfo in output (results) component
-        if (!this.resultsTab) {
-          this.store.dispatch(new commonInfoActions.ResetExperimentInfo());
-          this.store.dispatch(new commonInfoActions.GetExperimentInfo(experimentId));
-        }
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.paramsSubscription.unsubscribe();
-    this.selectedExperimentSubscription.unsubscribe();
-    this.routerConfigSubscription.unsubscribe();
-    if (!this.toMaximize) {
-      this.store.dispatch(new commonInfoActions.SetExperiment(null));
-      this.store.dispatch(new commonInfoActions.ResetExperimentInfo());
-    }
-  }
-
-  updateExperimentName(name) {
-    if (name.trim().length > 2) {
-      this.store.dispatch(new ExperimentDetailsUpdated({id: this.selectedExperiment.id, changes: {name}}));
-    } else {
-      this.store.dispatch(addMessage(MESSAGES_SEVERITY.ERROR, 'Name must be more than three letters long'));
-    }
-  }
-
-  deselectExperiment() {
-    this.navigateAfterExperimentSelectionChanged();
-  }
-
-  navigateAfterExperimentSelectionChanged() {
-    this.store.dispatch(setTableMode({mode: 'table'}));
-    this.router.navigate([`projects/${this.projectId}/experiments`], {queryParamsHandling: 'merge'});
-  }
-
-  onActivate(e, scrollContainer) {
-    scrollContainer.scrollTop = 0;
-  }
-
-  maximize() {
-    if (window.location.pathname.includes('info-output')) {
-      const resultsPath = this.route.firstChild?.firstChild?.routeConfig?.path || this.route.firstChild.routeConfig.path;
-      this.router.navigateByUrl(`projects/${this.projectId}/experiments/${this.experimentId}/output/${resultsPath}`);
-    } else {
-      const parts = window.location.pathname.split('/');
-      parts.splice(5, 0, 'output');
-      this.router.navigateByUrl(parts.join('/'));
-    }
-    this.toMaximize = true;
-  }
-}

src/app/features/experiments/containers/experiment-menu-extended/experiment-menu-extended.component.ts

@@ -1,4 +1,4 @@
-import { Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {ExperimentMenuComponent} from '@common/experiments/shared/components/experiment-menu/experiment-menu.component';
 
 @Component({
@@ -7,7 +7,6 @@ import {ExperimentMenuComponent} from '@common/experiments/shared/components/exp
   styleUrls: ['../../../../webapp-common/experiments/shared/components/experiment-menu/experiment-menu.component.scss']
 })
 export class ExperimentMenuExtendedComponent extends ExperimentMenuComponent{
-
   set contextMenu(data) {}
   get contextMenu() {
     return this;

src/app/features/experiments/containers/experiment-ouptut/experiment-output.component.html

@@ -1,60 +1,24 @@
 <sm-overlay [backdropActive]="backdropActive$|async"></sm-overlay>
-<div class="experiment-output-container light-theme">
+<sm-experiment-info-header-status-icon-label
+  [status]=" (selectedExperiment)?.status || selectedExperiment?.status"
+  [development]="isDevelopment"
+></sm-experiment-info-header-status-icon-label>
+<div class="experiment-output-container light-theme" [class.minimized]="minimized">
   <sm-experiment-info-header
-    *ngIf="!minimized"
-    (minimizeClicked)="minimizeView()"
     [experiment]="selectedExperiment"
     [infoData]="infoData$ | async"
     [editable]="!isExample"
     [showMenu]="true"
-    [showMinimize]="true"
+    [minimized]="minimized"
     [isSharedAndNotOwner]="isSharedAndNotOwner$ | async"
     (experimentNameChanged)="updateExperimentName($event)"
-
+    (closeInfoClicked)="closePanel()"
+    (minimizeClicked)="minimizeView()"
+    (maximizedClicked)="maximize()"
   >
   </sm-experiment-info-header>
-  <nav [class.minimized]="minimized" [smOverflows]="'nav'" (onOverflows)="overflow = $event">
-    <ng-container *ngIf="!minimized">
-      <span [routerLink]="['execution']"  queryParamsHandling="preserve">
-        <sm-navbar-item header="execution" [active]="routerConfig.includes('execution')"></sm-navbar-item>
-      </span>
-        <span [routerLink]="['hyper-params/hyper-param/_empty_']" [class.disabled]="routerConfig.includes('hyper-params')" queryParamsHandling="merge">
-        <sm-navbar-item header="Configuration" [active]="routerConfig.includes('hyper-params')"></sm-navbar-item>
-      </span>
-        <span [routerLink]="['artifacts']" [routerLinkActive]="'disabled'">
-        <sm-navbar-item header="artifacts" [active]="routerConfig.includes('artifacts')"></sm-navbar-item>
-      </span>
-      <span [routerLink]="['general']"  queryParamsHandling="preserve">
-        <sm-navbar-item header="info" [active]="routerConfig.includes('general')"></sm-navbar-item>
-      </span>
-    </ng-container>
-
-    <span [matMenuTriggerFor]="results" *ngIf="!minimized && overflow">
-      <sm-navbar-item header="results" [multi]="true" [active]="console.active || scalar.active || plots.active || samples.active"></sm-navbar-item>
-    </span>
-
-    <mat-menu #results="matMenu">
-      <button mat-menu-item [routerLink]="['log']" [class.active]="routerConfig.includes('log')">CONSOLE</button>
-      <button mat-menu-item [routerLink]="['metrics','scalar']" [class.active]="routerConfig.includes('metrics') && routerConfig.includes('scalar')">SCALARS</button>
-      <button mat-menu-item [routerLink]="['metrics','plots']" [class.active]="routerConfig.includes('metrics') && routerConfig.includes('plots')">PLOTS</button>
-      <button mat-menu-item [routerLink]="['debugImages']" [class.active]="routerConfig.includes('debugImages')">DEBUG SAMPLES</button>
-    </mat-menu>
-
-    <div class="d-inline-block" [style.visibility]="overflow && !minimized ? 'hidden' : 'visible'">
-      <span [routerLink]="['log']" queryParamsHandling="preserve">
-        <sm-navbar-item #console header="console" [active]="routerConfig.includes('log')"></sm-navbar-item>
-      </span>
-      <span [routerLink]="['metrics','scalar']" queryParamsHandling="preserve">
-        <sm-navbar-item #scalar header="Scalars" [active]="routerConfig.includes('metrics') && routerConfig.includes('scalar')"></sm-navbar-item>
-      </span>
-      <span [routerLink]="['metrics','plots']" queryParamsHandling="preserve">
-        <sm-navbar-item #plots header="PLOTS" [active]="routerConfig.includes('metrics') && routerConfig.includes('plots')"></sm-navbar-item>
-      </span>
-      <span [routerLink]="['debugImages']" queryParamsHandling="preserve">
-        <sm-navbar-item #samples header="DEBUG SAMPLES" [active]="routerConfig.includes('debugImages')"></sm-navbar-item>
-      </span>
-    </div>
-    <span class="refresh-position">
+    <sm-experiment-info-navbar [minimized]="minimized" [splitSize]="selectSplitSize$ | async">
+    <span class="refresh-position" refresh>
       <sm-experiment-settings
         [class.maximized]="!minimized"
         [showSettings]="routerConfig.includes('scalar') && minimized"
@@ -67,8 +31,8 @@
       >
       </sm-refresh-button>
     </span>
-  </nav>
-  <div class="output-body" [class.minimized]="minimized">
-    <router-outlet class="output-outlet"></router-outlet>
+    </sm-experiment-info-navbar>
+  <div class="output-body" [class.minimized]="minimized" #scrollContainer>
+    <router-outlet class="output-outlet" (activate)="onActivate($event, scrollContainer)"></router-outlet>
   </div>
 </div>

src/app/features/experiments/experiments-routing.module.ts

@@ -13,7 +13,6 @@ export const routes: Routes = [
   imports: [
     SMSharedModule,
     RouterModule.forChild(routes),
-
   ],
   exports: [RouterModule, SelectableListComponent, SelectableFilterListComponent]
 })

src/app/features/experiments/experiments.module.ts

@@ -21,7 +21,6 @@ import {SMMaterialModule} from '@common/shared/material/material.module';
 import {ExperimentsCommonModule} from '@common/experiments/common-experiments.module';
 import {CommonLayoutModule} from '@common/layout/layout.module';
 import {EXPERIMENTS_STORE_KEY} from '@common/experiments/shared/common-experiments.const';
-import {ExperimentInfoComponent} from './containers/experiment-info/experiment-info.component';
 import {DebugImagesModule} from '@common/debug-images/debug-images.module';
 import {ExperimentInfoExecutionComponent} from '@common/experiments/containers/experiment-info-execution/experiment-info-execution.component';
 import {MatSidenavModule} from '@angular/material/sidenav';
@@ -29,6 +28,7 @@ import {MatListModule} from '@angular/material/list';
 import {ExperimentOutputComponent} from './containers/experiment-ouptut/experiment-output.component';
 import {merge, pick} from 'lodash/fp';
 import {EXPERIMENTS_PREFIX} from '@common/experiments/actions/common-experiments-view.actions';
+import {ExperimentInfoNavbarComponent} from './containers/experiment-info-navbar/experiment-info-navbar.component';
 
 
 export const experimentSyncedKeys = [
@@ -90,9 +90,9 @@ const getExperimentsConfig = () => ({
   ],
   declarations: [
     ExperimentsComponent,
-    ExperimentInfoComponent,
     ExperimentInfoExecutionComponent,
     ExperimentOutputComponent,
+    ExperimentInfoNavbarComponent
   ],
   providers: [
     AdminService,