Model validation UI + manifest-aware validation

.env

@@ -1,3 +1,4 @@
 POSTGRES_DB=buildingmotif
 POSTGRES_USER=buildingmotif
-POSTGRES_PASSWORD=password
+POSTGRES_PASSWORD=password
+DB_URI="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}"

buildingmotif-app/Dockerfile

@@ -4,5 +4,6 @@ WORKDIR /buildingmotif-app
 COPY . .
 
 RUN npm install -g @angular/cli
+RUN npm install
 
 CMD ng serve --host 0.0.0.0

buildingmotif-app/src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
   { path: 'models/new', component: ModelNewComponent},
   { path: 'templates/:id', component: TemplateDetailComponent },
   { path: 'templates/:id/evaluate', component: TemplateEvaluateComponent, resolve: {TemplateEvaluateResolver}},
-  { path: 'models/:id', component: ModelDetailComponent, resolve: {ModelDetailResolver} },
+  { path: 'models/:id', component: ModelDetailComponent, resolve: {ModelDetailResolver}},
   { path: 'templates', component: TemplateSearchComponent, resolve: {templateSearch:TemplateSearchResolver}},
   { path: 'models', component: ModelSearchComponent, resolve: {ModelSearchResolver}},
   { path: '',   redirectTo: '/templates', pathMatch: 'full' },

buildingmotif-app/src/app/app.module.ts

@@ -31,6 +31,11 @@ import {MatTableModule} from '@angular/material/table';
 import { TemplateEvaluateResultComponent } from './template-evaluate/template-evaluate-result/template-evaluate-result.component'; 
 import { TemplateEvaluateComponent} from './template-evaluate/template-evaluate.component'
 import { ModelNewComponent } from './model-new/model-new.component'; 
+import { ModelValidateComponent } from './model-validate/model-validate.component';
+import { LibraryService } from './library/library.service';
+import {MatSidenavModule} from '@angular/material/sidenav'; 
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatCheckboxModule} from '@angular/material/checkbox'; 
 
 @NgModule({
   declarations: [
@@ -45,6 +50,7 @@ import { ModelNewComponent } from './model-new/model-new.component';
     TemplateEvaluateFormComponent,
     TemplateEvaluateResultComponent,
     ModelNewComponent,
+    ModelValidateComponent,
   ],
   imports: [
     BrowserModule,
@@ -66,9 +72,12 @@ import { ModelNewComponent } from './model-new/model-new.component';
     MatSnackBarModule,
     CodemirrorModule,
     MatCardModule,
-    MatTableModule
+    MatTableModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatCheckboxModule,
   ],
-  providers: [TemplateDetailService],
+  providers: [TemplateDetailService, LibraryService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

buildingmotif-app/src/app/library/library.service.ts

@@ -22,6 +22,14 @@ export interface Template {
   dependency_ids: number[];
 }
 
+export interface Shape {
+  library_name: string;
+  library_id: number;
+  uri: string;
+  label: string;
+  description: string;
+}
+
 @Injectable()
 export class LibraryService {
 
@@ -35,6 +43,14 @@ export class LibraryService {
       );
   }
 
+  getAllShapes() {
+    return this.http.get<Shape[]>("http://localhost:5000/libraries/shapes")
+      .pipe(
+        retry(3), // retry a failed request up to 3 times
+        catchError(this.handleError) // then handle the error
+      );
+  }
+
   getLibrarysTemplates(library_id: number) {
     return this.http.get<Library>(`http://localhost:5000/libraries/${library_id}?expand_templates=True`)
       .pipe(

buildingmotif-app/src/app/model-detail/model-detail.component.css

@@ -1,8 +1,15 @@
 .container {
     height: 100%;
-    padding: 1rem 3rem;
+}
+
+.main-content-and-button {
+    height: 100%;
     display: flex;
-    flex-direction: column;
+}
+
+.main-content {
+    padding: 1rem 3rem;
+    flex-grow: 1;
 }
 
 .title {
@@ -13,8 +20,17 @@
 .buttons {
     display: flex;
     gap: 1rem;
+    padding-top: 1rem;
 }
 
 button {
     width: 5rem;
+}
+
+.side-nav-button {
+    display: flex;
+}
+
+.sidenav-content {
+    width: 50%;
 }

buildingmotif-app/src/app/model-detail/model-detail.component.html

@@ -1,14 +1,32 @@
-<div class="container">
-    <div class="title">{{model.name}}</div>
-
-    <ngx-codemirror #codemirror
-        class="graph"
-        [options]="codeMirrorOptions"
-        [formControl]="graphFormControl">
-    </ngx-codemirror>
-
-    <div class="buttons">
-        <button mat-raised-button (click)="onSave()" color="primary">Save</button>
-        <button mat-raised-button (click)="undoChangesToGraph()" color="primary">Undo</button>
-    </div>
-</div>
+    <mat-drawer-container class="container">
+        <div class="main-content-and-button">
+            <!-- Main Content -->
+            <div class="main-content">
+                <div class="title">{{model.name}}</div>
+
+                <ngx-codemirror #codemirror class="graph" [options]="codeMirrorOptions" [formControl]="graphFormControl">
+                </ngx-codemirror>
+
+                <div class="buttons">
+                    <button mat-raised-button (click)="onSave()" color="primary">Save</button>
+                    <button mat-raised-button (click)="undoChangesToGraph()" color="primary">Undo</button>
+                </div>
+            </div>
+
+            <button class="side-nav-button" mat-flat-button (click)="drawer.toggle()" color="basic">
+                <mat-icon *ngIf="!drawer.opened"> arrow_backward </mat-icon>
+                <mat-icon *ngIf="drawer.opened"> arrow_forward </mat-icon>
+            </button>
+        </div>
+
+        <!-- Side Nav -->
+        <mat-drawer #drawer class="sidenav-content" mode="side" position="end">
+            <mat-tab-group>
+                <mat-tab label="First"> Content 1 </mat-tab>
+                <mat-tab label="Second"> Content 2 </mat-tab>
+                <mat-tab label="Validate">
+                    <app-model-validate class="validate" [modelId]=model.id></app-model-validate>
+                </mat-tab>
+            </mat-tab-group>          
+        </mat-drawer>
+    </mat-drawer-container>

buildingmotif-app/src/app/model-detail/model-detail.component.ts

@@ -30,14 +30,16 @@ export class ModelDetailComponent{
     matchBrackets: true,
     lint: true
   };
+  showFiller: boolean = true;
+  sideNaveOpen: boolean = false;
 
   constructor(
     private route: ActivatedRoute,
     private ModelDetailService: ModelDetailService,
     private _snackBar: MatSnackBar,
   ) {
-    [this.model, this.graph] = route.snapshot.data["ModelDetailResolver"]
-    this.graphFormControl.setValue(this.graph)
+    [this.model, this.graph] = route.snapshot.data["ModelDetailResolver"];
+    this.graphFormControl.setValue(this.graph);
   }
 
   onSave(): void{

buildingmotif-app/src/app/model-validate/model-validate.component.css

@@ -0,0 +1,6 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    gap: 1rem;
+}

buildingmotif-app/src/app/model-validate/model-validate.component.html

@@ -0,0 +1,27 @@
+<div class="container">
+    <mat-progress-bar *ngIf="showGettingLibrariesSpinner" mode="query"></mat-progress-bar>
+    <mat-list *ngFor="let library of libraries; let i = index" [formGroup]="selectedLibrariesForm">
+        <mat-checkbox [formControlName]="i" [formGroupName]="i">
+            <b>{{library.name}}</b>
+        </mat-checkbox>
+    </mat-list>
+
+    <button
+    (click)="validate()"
+    [disabled]="selectedLibrariesForm.invalid"
+    mat-raised-button
+    color="primary">
+        Validate
+    </button>
+
+    <mat-progress-bar *ngIf="showValidatingSpinner" mode="indeterminate"></mat-progress-bar>
+    <span><b *ngIf="validationResponse">Valid?</b> {{ validationResponse?.valid }}</span>
+    <ngx-codemirror #codemirror
+        *ngIf = "validationResponse"
+        [(ngModel)]="validationResponse.message"
+        [options]="codeMirrorOptions">
+    </ngx-codemirror>
+    <mat-list *ngFor="let reason of validationResponse?.reasons">
+        <span> {{ reason }} </span>
+    </mat-list>
+</div>

buildingmotif-app/src/app/model-validate/model-validate.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, OnInit} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl, FormGroup, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
+import { ModelValidateService, ValidationResponse } from './model-validate.service';
+import { LibraryService, Library } from '../library/library.service';
+
+// verify that at least one checkbox is checked in the FormGroup
+function NoneSelectedValidator(): ValidatorFn {
+    return (control: AbstractControl) => {
+        const formGroup = control as FormGroup;
+        const checkedKeys = Object.keys(formGroup.controls).filter((key) => formGroup.controls[key].value);
+
+        if (checkedKeys.length === 0) { return { noneSelected: {value: true}}; }
+
+        return null;
+    };
+}
+
+@Component({
+  selector: 'app-model-validate',
+  templateUrl: './model-validate.component.html',
+  providers: [ModelValidateService, LibraryService],
+  styleUrls: ['./model-validate.component.css'],
+})
+export class ModelValidateComponent implements OnInit{
+  @Input() modelId: number | undefined;
+  libraries?: Library[] = undefined;
+  selectedLibrariesForm: FormGroup = new FormGroup({});
+  validationResponse?: ValidationResponse = undefined;
+  showGettingLibrariesSpinner = false;
+  showValidatingSpinner = false;
+
+  codeMirrorOptions: any = {
+    theme: 'material',
+    mode: 'text',
+    lineNumbers: true,
+    lineWrapping: true,
+    foldGutter: true,
+    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    lint: true,
+    readOnly: true,
+  };
+
+  constructor(private modelValidateService: ModelValidateService, private libraryService: LibraryService) {}
+
+  ngOnInit(): void {
+    this.showGettingLibrariesSpinner = true;
+    this.libraryService.getAllLibraries().subscribe(
+      res => {
+        this.populateSelectedLibrariesControls(res);
+        this.libraries = res;
+      },
+      err => {},
+      () => {this.showGettingLibrariesSpinner = false},
+    );
+  }
+
+  populateSelectedLibrariesControls(libraries: Library[]): void {
+    const selectedLibrariesControls: { [library_index: number]: FormControl } = libraries.reduce((acc, _, i) => {
+      return { ...acc, [i]: new FormControl(false) }
+    }, {});
+    this.selectedLibrariesForm = new FormGroup(selectedLibrariesControls, {validators: NoneSelectedValidator()})
+  }
+
+  validate(): void {
+    if (this.libraries == undefined) return;
+
+    const selectedLibraries = this.libraries.filter((_, i) => this.selectedLibrariesForm.value[i])
+    const args = selectedLibraries.map(l => l.id);
+
+    if (!!this.modelId){
+      this.showValidatingSpinner = true;
+
+      this.modelValidateService.validateModel(this.modelId, args).subscribe(
+        res => {this.validationResponse = res},
+        err => {},
+        () => {this.showValidatingSpinner = false},
+      );
+    }
+  }
+}

buildingmotif-app/src/app/model-validate/model-validate.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Model } from '../types'
+import { throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModelValidateService {
+
+  constructor(private http: HttpClient) { }
+
+  validateModel(modelId: number, args: number[]) {
+    const headers = {'Content-Type': "application/json"}
+
+    return this.http.post<ValidationResponse>(`http://localhost:5000/models/${modelId}/validate`,
+        {"library_ids": args},
+        {headers, responseType: 'json'}
+      )
+      .pipe(
+        retry(3), // retry a failed request up to 3 times
+        catchError(this.handleError) // then handle the error
+      );
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    if (error.status === 0) {
+      // A client-side or network error occurred. Handle it accordingly.
+      console.error('An error occurred:', error.error);
+    } else {
+      // The backend returned an unsuccessful response code.
+      // The response body may contain clues as to what went wrong.
+      console.error(
+        `Backend returned code ${error.status}, body was: `, error.error);
+    }
+    // Return an observable with a user-facing error message.
+    return throwError(() => new Error(`${error.status}: ${error.error}`));
+  }
+}
+
+export interface ValidationResponse {
+    valid: boolean;
+    message: string;
+    reasons: string[];
+}

buildingmotif/api/Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.8
+
+# Copy project
+ADD buildingmotif /opt/buildingmotif
+ADD libraries /opt/libraries
+COPY configs.py /opt/
+ADD migrations /opt/migrations
+COPY alembic.ini /opt/
+COPY pyproject.toml /opt/
+COPY poetry.lock /opt/
+ADD docs /opt/docs
+ADD buildingmotif/api/start.sh /opt/start.sh
+WORKDIR /opt/
+
+# Install dpeendencies
+RUN pip install poetry==1.4.0 && poetry config virtualenvs.create false
+RUN ls /opt && poetry install --no-dev
+RUN chmod +x /opt/start.sh
+
+CMD /opt/start.sh