frontend: upgrade to angular 6, restructure

Author: JeyRunner

frontend-angular/package-lock.json

@@ -13,17 +13,17 @@
  "private": true,
  "dependencies": {
  "@angular-package/prism": "^2.0.2",
- "@angular/animations": "^5.2.11",
- "@angular/common": "^5.2.11",
- "@angular/compiler": "^5.2.11",
- "@angular/core": "^5.2.11",
- "@angular/forms": "^5.2.11",
- "@angular/http": "^5.2.11",
- "@angular/platform-browser": "^5.2.11",
- "@angular/platform-browser-dynamic": "^5.2.11",
- "@angular/router": "^5.2.11",
- "@types/jqueryui": "^1.12.4",
- "@types/plotly.js": "^1.38.8",
+ "@angular/animations": "^6.1.9",
+ "@angular/common": "^6.1.9",
+ "@angular/compiler": "^6.1.9",
+ "@angular/core": "^6.1.9",
+ "@angular/forms": "^6.1.9",
+ "@angular/http": "^6.1.9",
+ "@angular/platform-browser": "^6.1.9",
+ "@angular/platform-browser-dynamic": "^6.1.9",
+ "@angular/router": "^6.1.9",
+ "@types/jqueryui": "^1.12.5",
+ "@types/plotly.js": "^1.38.9",
  "@types/prismjs": "^1.9.0",
  "angular2-materialize": "^15.1.10",
  "chart.js": "^2.7.2",
@@ -33,22 +33,24 @@
  "jquery-ui": "^1.12.1",
  "jquery-ui-dist": "^1.12.1",
  "materialize-css": "^0.100.2",
- "ng2-rx-componentdestroyed": "^2.1.0",
+ "ng2-rx-componentdestroyed": "^3.0.1",
  "ngx-auto-scroll": "^1.1.0",
+ "ngx-take-until-destroy": "^5.2.3",
  "npm": "^6.4.1",
  "plotly.js": "^1.41.3",
  "prismjs": "^1.15.0",
  "protractor": "^5.4.1",
- "rxjs": "^5.5.12",
- "zone.js": "^0.8.26"
+ "rxjs": "^6.3.3",
+ "zone.js": "^0.8.26",
+ "rxjs-compat": "^6.0.0-rc.0"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "~0.8.0",
- "@angular/cli": "^6.2.3",
- "@angular/compiler-cli": "^5.2.11",
- "@angular/language-service": "^5.2.11",
+ "@angular-devkit/build-angular": "^0.8.4",
+ "@angular/cli": "^6.2.4",
+ "@angular/compiler-cli": "^6.1.9",
+ "@angular/language-service": "^6.1.9",
  "@types/chartjs": "0.0.31",
- "@types/jquery": "^3.3.10",
- "typescript": "~2.5.3"
+ "@types/jquery": "^3.3.13",
+ "typescript": "2.7.2"
  }
 }

frontend-angular/package.json

@@ -7,7 +7,7 @@
  <i [ngClass]="connected ? 'green-text' : 'red-text'" class="material-icons red-text right">{{connected ? 'wifi' : 'wifi_off'}}</i></a></li>
  </ul>
 
- <ul class="right" *ngIf="appState.training">
+ <ul class="right" *ngIf="state.training">
  <li>
  <a class="green-text btn white btn-flat no-select">
  Training
@@ -22,23 +22,23 @@
  </div>
 
  <!-- Tabs Network -->
- <div class="nav-network" *ngIf="routedComponent == 'NetworksAndTrainComponent'">
+ <div class="nav-network" *ngIf="routedComponent == 'ProjectComponent'">
  <ul class="tabs tabs-transparent" materialize="tabs">
- <li class="tab" [class.disabled]="networkID === undefined">
- <!--<a *ngIf="networkID !== undefined" [routerLink]="['/dataStructure', structureID, 'network', networkID]" href="#tab-train">Train</a>-->
- <a href="#tab-train">Train</a>
- </li>
  <li class="tab">
- <a class="active" href="#tab-networks">Networks</a></li>
- <li class="tab disabled"><a href="#tab-run">Run</a></li>
- <!--<li class="tab disabled"><a href="#tab-settings"><i class="material-icons">settings</i></a></li>-->
+ <a class="active" href="#tab-networks">Dataset</a></li>
+ <li class="tab" [class.disabled]="state.routedModelId === undefined">
+ <a href="#tab-edit">Model Definition</a>
+ </li>
+ <li class="tab" [class.disabled]="state.routedModelId === undefined">
+ <a href="#tab-train">Model Training</a>
+ </li>
  </ul>
  </div>
 
  <!-- Tabs DataStructure -->
- <div class="nav-dataStructure" *ngIf="routedComponent == 'DatastructureAndSettingsComponent'" >
+ <div class="nav-dataStructure" *ngIf="routedComponent == 'ProjectsAndSettingsComponent'" >
  <ul class="tabs tabs-transparent " materialize="tabs">
- <li class="tab"><a href="#tab-dataStructure">Data structures</a></li>
+ <li class="tab"><a href="#tab-dataStructure">Projects</a></li>
  <li class="tab"><a href="#tab-generalSettings">Settings</a></li>
  </ul>
  </div>

frontend-angular/src/app/app-main/app-main.component.html

@@ -1,13 +1,13 @@
-import {Component, Inject, NgModule} from '@angular/core';
+import {Component, Inject, isDevMode, NgModule} from '@angular/core';
 import {ActivatedRoute, Router, RouterModule, Routes} from "@angular/router";
-import {DatastructureAndSettingsComponent} from "@frontend/datastructure-and-settings/datastructure-and-settings.component";
+import {ProjectsAndSettingsComponent} from "@frontend/projects-and-settings/projects-and-settings.component";
 import {ApiConnection, CONNECTION_STATUS} from "@catflow/ApiConnection";
-import {NetworksAndTrainComponent} from "../networks-and-train/networks-and-train.component";
+import {ProjectComponent} from "../project/project.component";
 import {toastErr, toastInfo} from "../util/Log";
 import {DOCUMENT} from "@angular/common";
 import {BehaviorSubject} from "rxjs/BehaviorSubject";
 import {TestPlaygroundComponent} from "@frontend/test-playground/test-playground.component";
-import {AppState} from "@frontend/settings/app-state.service";
+import {AppState} from "@frontend/projects-and-settings/settings/app-state.service";
 
 /*
  *-- MainComponent ------------------------------------------------------- */
@@ -20,29 +20,33 @@ export class AppMainComponent {
  title = 'app';
 
  routedComponent: string;
- networkID: number;
- structureID: number;
  alreadyTriedToConnect: boolean = false;
 
  // test list
  listTest: BehaviorSubject<any[]>;
  connected: boolean = false;
+ port: number = 80;
 
  constructor(
- public appState: AppState,
+ public state: AppState,
  public route: ActivatedRoute,
  @Inject(DOCUMENT) private document: Document)
  {
  ApiConnection.onGetError.subscribe(msg => {
  toastErr("<div><h6 class='toastRoute'>from: " + msg.route+"</h6><p> "+ msg.message+ "</p></div>");
  });
 
- // this.document.location.hostname
- ApiConnection.connect(this.document.location.hostname, 5555);
+ if (Number(this.document.location.port) == 0)
+ this.port = 80;
+ else if (isDevMode())
+ this.port = 5555;
+ else
+ this.port = Number(this.document.location.port);
+ ApiConnection.connect(this.document.location.hostname, this.port);
  ApiConnection.connectionStatus.subscribe(status => this.connected = (status == CONNECTION_STATUS.CONNECTED));
  ApiConnection.onDisconnect = () => {
  setTimeout(() => {
- ApiConnection.connect(this.document.location.hostname, 5555);
+ ApiConnection.connect(this.document.location.hostname, this.port);
  }, 1000);
  }
 
@@ -52,22 +56,19 @@ export class AppMainComponent {
  onRouteChange($event) {
  console.log('show ', $event);
  this.routedComponent = $event.componentName;
- this.networkID = $event.networkID;
- this.structureID = $event.structureID;
- //console.log('show ', this.routedComponent);
  }
 }
 
 
 /*
  *-- Routing ------------------------------------------------------- */
 const routes: Routes = [
- {path: '', component: DatastructureAndSettingsComponent},
+ {path: '', component: ProjectsAndSettingsComponent},
  {path: 'testPlayground', component: TestPlaygroundComponent},
  {path: 'test', component: TestPlaygroundComponent},
- {path: 'dataStructure/:structureID', component: NetworksAndTrainComponent},
- {path: 'dataStructure/:structureID/network/:networkID', component: NetworksAndTrainComponent},
- {path: 'dataStructure/:structureID/network/:networkID/train', component: NetworksAndTrainComponent}
+ {path: 'project/:projectID', component: ProjectComponent},
+ {path: 'project/:projectID/model/:modelID', component: ProjectComponent},
+ {path: 'project/:projectID/model/:modelID/train', component: ProjectComponent}
 ];
 
 @NgModule({

frontend-angular/src/app/app-main/app-main.component.ts

@@ -8,38 +8,39 @@ import {NgxAutoScrollModule} from "ngx-auto-scroll";
 
 
 import {AppMainComponent, AppRoutingModule} from './app-main/app-main.component';
-import {DatastructureAndSettingsComponent} from './datastructure-and-settings/datastructure-and-settings.component';
-import {DataStructuresComponent} from './data-structures/data-structures.component';
+import {ProjectsAndSettingsComponent} from './projects-and-settings/projects-and-settings.component';
+import {ProjectsListComponent} from './projects-and-settings/projects-list/projects-list.component';
 import {BackendConsoleComponent} from "./backend-console/backend-console.component";
-import { NetworksAndTrainComponent } from './networks-and-train/networks-and-train.component';
-import { NetworksComponent } from './networks/networks.component';
+import { ProjectComponent } from './project/project.component';
 import {RouteReuseStrategy} from "@angular/router";
-import { NetworkTrainComponent } from './network-train/network-train.component';
+import { ModelTrainComponent } from './project/model-train/model-train.component';
 import {Api} from "@catflow/Api";
 import {ApiChart} from "@catflow/extensions/Chart-range";
 import {KeysPipe} from "@catflow/Utils";
-import { SettingsComponent } from './settings/settings.component';
-import { SelectionViewComponent } from './settings/selection-view/selection-view.component';
-import {AppState} from "@frontend/settings/app-state.service";
+import { SettingsComponent } from './projects-and-settings/settings/settings.component';
+import { SelectionViewComponent } from './projects-and-settings/settings/selection-view/selection-view.component';
+import {AppState} from "@frontend/projects-and-settings/settings/app-state.service";
 import {ApiSeriesChart} from "@catflow/extensions/Chart-series";
-import { ModelEditorComponent } from './test-playground/model-editor/model-editor.component';
+import { ModelEditorComponent } from './project/model-edit/model-editor/model-editor.component';
 import { TestPlaygroundComponent } from './test-playground/test-playground.component';
 //import { ChartPlotlyComponent } from './test-playground/chart-plotly/chart-plotly.component';
-import { ModelEditorNodeComponent } from './test-playground/model-editor/model-editor-node/model-editor-node.component';
-import { ModelEditorConnectionComponent } from './test-playground/model-editor/model-editor-connection/model-editor-connection.component';
+import { ModelEditorNodeComponent } from './project/model-edit/model-editor/model-editor-node/model-editor-node.component';
+import { ModelEditorConnectionComponent } from './project/model-edit/model-editor/model-editor-connection/model-editor-connection.component';
 import { ProgressIndicatorComponent } from './util/progress-indicator/progress-indicator.component';
+import {ProjectModelsComponent} from "@frontend/project/models-list/project-models.component";
+import { ModelEditComponent } from './project/model-edit/model-edit.component';
 
 
 
 @NgModule({
  declarations: [
  AppMainComponent,
- DatastructureAndSettingsComponent,
- DataStructuresComponent,
+ ProjectsAndSettingsComponent,
+ ProjectsListComponent,
  BackendConsoleComponent,
- NetworksAndTrainComponent,
- NetworksComponent,
- NetworkTrainComponent,
+ ProjectComponent,
+ ProjectModelsComponent,
+ ModelTrainComponent,
  ApiChart,
  ApiSeriesChart,
  KeysPipe,
@@ -50,7 +51,8 @@ import { ProgressIndicatorComponent } from './util/progress-indicator/progress-i
  // ChartPlotlyComponent,
  ModelEditorNodeComponent,
  ModelEditorConnectionComponent,
- ProgressIndicatorComponent
+ ProgressIndicatorComponent,
+ ModelEditComponent
  ],
  imports: [
  BrowserModule,

frontend-angular/src/app/app.module.ts

@@ -1,13 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ApiConnection, CONNECTION_STATUS} from "@catflow/ApiConnection";
-import {AppState} from "@frontend/settings/app-state.service";
+import {AppState} from "@frontend/projects-and-settings/settings/app-state.service";
+import {componentDestroyed} from "ng2-rx-componentdestroyed";
 
 @Component({
  selector: 'app-backend-console',
  templateUrl: './backend-console.component.html',
  styleUrls: ['./backend-console.components.css'],
 })
-export class BackendConsoleComponent implements OnInit {
+export class BackendConsoleComponent implements OnInit, OnDestroy {
 
  log: {direction: string, message: any}[] = [];
  sendText: string;
@@ -18,12 +19,12 @@ export class BackendConsoleComponent implements OnInit {
  constructor(
  public settings:AppState
  ) {
- ApiConnection.onReceive.subscribe(data => {
+ ApiConnection.onReceive.takeUntil(componentDestroyed(this)).subscribe(data => {
  this.log.push({direction: 'got', message: data});
  if (this.log.length > 50)
  this.log = this.log.slice(0, this.log.length - 50);
  });
- ApiConnection.onSend.subscribe(data => {
+ ApiConnection.onSend.takeUntil(componentDestroyed(this)).subscribe(data => {
  this.log.push({direction: 'send', message: data});
  if (this.log.length > 50)
  this.log = this.log.slice(0, this.log.length - 50);
@@ -41,4 +42,7 @@ export class BackendConsoleComponent implements OnInit {
  ApiConnection.send(this.sendText);
  toastInfo(this.sendText);*/
  }
+
+ ngOnDestroy(): void {
+ }
 }