Evaluate template in model UI

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

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TemplateSearchComponent } from '../app/template-search/template-search.component'
-import { TemplateSearchResolver } from '../app/template-search/template-search.resolver'
 import { TemplateDetailComponent } from '../app/template-detail/template-detail.component'
 import { ModelSearchComponent } from '../app/model-search/model-search.component'
 import { ModelSearchResolver } from '../app/model-search/model-search.resolver'
@@ -16,7 +15,7 @@ const routes: Routes = [
   { path: 'templates/:id', component: TemplateDetailComponent },
   { path: 'templates/:id/evaluate', component: TemplateEvaluateComponent, resolve: {TemplateEvaluateResolver}},
   { path: 'models/:id', component: ModelDetailComponent, resolve: {ModelDetailResolver}},
-  { path: 'templates', component: TemplateSearchComponent, resolve: {templateSearch:TemplateSearchResolver}},
+  { path: 'templates', component: TemplateSearchComponent},
   { path: 'models', component: ModelSearchComponent, resolve: {ModelSearchResolver}},
   { path: '',   redirectTo: '/templates', pathMatch: 'full' },
 ];

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

@@ -36,6 +36,8 @@ import { LibraryService } from './library/library.service';
 import {MatSidenavModule} from '@angular/material/sidenav'; 
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatCheckboxModule} from '@angular/material/checkbox'; 
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatStepperModule} from '@angular/material/stepper';
 
 @NgModule({
   declarations: [
@@ -76,6 +78,8 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
     MatSidenavModule,
     MatTabsModule,
     MatCheckboxModule,
+    MatDialogModule,
+    MatStepperModule,
   ],
   providers: [TemplateDetailService, LibraryService],
   bootstrap: [AppComponent]

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

@@ -22,10 +22,11 @@
         <!-- 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="Evaluate">
+                    <app-template-search [evaulateModelId]=model.id (openEvaulateEvent)="openEvaulateEvent($event)"></app-template-search>
+                </mat-tab>
                 <mat-tab label="Validate">
-                    <app-model-validate class="validate" [modelId]=model.id></app-model-validate>
+                    <app-model-validate [modelId]=model.id></app-model-validate>
                 </mat-tab>
             </mat-tab-group>          
         </mat-drawer>

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

@@ -8,6 +8,8 @@ import {
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
 } from '@angular/material/snack-bar';
+import {MatDialog} from '@angular/material/dialog';
+import {TemplateEvaluateComponent} from '../template-evaluate/template-evaluate.component'
 
 @Component({
   selector: 'app-model-detail',
@@ -37,6 +39,7 @@ export class ModelDetailComponent{
     private route: ActivatedRoute,
     private ModelDetailService: ModelDetailService,
     private _snackBar: MatSnackBar,
+    public dialog: MatDialog,
   ) {
     [this.model, this.graph] = route.snapshot.data["ModelDetailResolver"];
     this.graphFormControl.setValue(this.graph);
@@ -63,4 +66,11 @@ export class ModelDetailComponent{
   undoChangesToGraph(): void {
     this.graphFormControl.setValue(this.graph)
   }
+
+  openEvaulateEvent(templateId: number): void {
+    this.dialog.open(
+      TemplateEvaluateComponent,
+      {data: {templateId, modelId: this.model.id}}
+    );
+  }
 }

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

@@ -70,7 +70,7 @@ export class ModelValidateComponent implements OnInit{
     const selectedLibraries = this.libraries.filter((_, i) => this.selectedLibrariesForm.value[i])
     const args = selectedLibraries.map(l => l.id);
 
-    if (!!this.modelId){
+    if (this.modelId !== undefined){
       this.showValidatingSpinner = true;
 
       this.modelValidateService.validateModel(this.modelId, args).subscribe(

buildingmotif-app/src/app/template-evaluate/template-evaluate-form/template-evaluate-form.component.html

@@ -25,6 +25,7 @@
         mat-raised-button
         color="primary"
         (click)="evaluateClicked()"
-        [disabled]="parametersForm.invalid">Evaluate
+        [disabled]="parametersForm.invalid"
+        matStepperNext>Evaluate
     </button>
 </div>

buildingmotif-app/src/app/template-evaluate/template-evaluate-result/template-evaluate-result.component.css

@@ -1,5 +1,7 @@
-.addToModel{
+.actions{
     display: flex;
     gap: 1rem;
+    padding-top: 1rem;
+    justify-content:flex-end;
     align-items: baseline;
 }

buildingmotif-app/src/app/template-evaluate/template-evaluate-result/template-evaluate-result.component.html

@@ -1,23 +1,19 @@
+<mat-progress-bar *ngIf="!evaluateTemplate" class="progess-bar" mode="query"></mat-progress-bar>
+
 <ngx-codemirror #codemirror
 class="graph"
 [options]="codeMirrorOptions"
 [(ngModel)]="evaluateTemplate">
 </ngx-codemirror>
 
-<div class="addToModel">
-    <form>
-        <mat-form-field appearance="outline">
-            <mat-select [formControl]="selectedModel">
-                <mat-option *ngFor="let model of models" [value]="model">
-                {{model.name}}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-    </form>
-
+<div class="actions">
+    <button
+    mat-raised-button
+    matStepperPrevious>
+        Redo
+    </button>
     <button 
     (click)="addToModel()"
-    [disabled]="selectedModel.invalid"
     mat-raised-button
     color="primary">
         Add to Model

buildingmotif-app/src/app/template-evaluate/template-evaluate-result/template-evaluate-result.component.ts

@@ -1,8 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
 import { ModelDetailService } from 'src/app/model-detail/model-detail.service';
-import { Model } from 'src/app/types';
-import {Router} from "@angular/router"
 
 @Component({
   selector: 'app-template-evaluate-result',
@@ -12,8 +9,7 @@ import {Router} from "@angular/router"
 })
 export class TemplateEvaluateResultComponent {
   @Input() evaluateTemplate?: string;
-  @Input() models?: Model[];
-  selectedModel = new FormControl(undefined, [Validators.required]);
+  @Input() modelId?: number;
 
   codeMirrorOptions: any = {
     theme: 'material',
@@ -28,12 +24,14 @@ export class TemplateEvaluateResultComponent {
     readOnly: true
   };
 
-  constructor(private router: Router, private modelDetailService: ModelDetailService) { }
+  constructor(private modelDetailService: ModelDetailService) { }
 
   addToModel(){
+    if (this.modelId == undefined) return // we shouldn't hit this
     if (this.evaluateTemplate == undefined) return // we shouldn't hit this
-    this.modelDetailService.updateModelGraph(this.selectedModel.value.id, this.evaluateTemplate, true).subscribe(() => {
-      this.router.navigate([`/models/${this.selectedModel.value.id}`])
+
+    this.modelDetailService.updateModelGraph(this.modelId, this.evaluateTemplate, true).subscribe(() => {
+      location.reload();
     })
   }
 

buildingmotif-app/src/app/template-evaluate/template-evaluate.component.css

@@ -1,8 +1,16 @@
-.container {
-    padding: 2rem;
+.content {
+    display: flex;
+}
+
+.progess-bar{
+    width: 10rem;
 }
 
 .title {
     padding-bottom: 1rem;
     font-size: 2rem;
+}
+
+::ng-deep .mat-horizontal-stepper-header{
+    pointer-events: none !important;
 }

buildingmotif-app/src/app/template-evaluate/template-evaluate.component.html

@@ -1,17 +1,23 @@
-<div class="container">
-    <div class="title"> {{template.name}} </div>
+<mat-progress-bar *ngIf="!template" class="progess-bar" mode="query"></mat-progress-bar>
 
-    <div [ngSwitch]="state">
-        <app-template-evaluate-form
-            *ngSwitchCase="'FORM'"
-            [template]="template"
-            (parameterFormValuesEvent)="parameterFormValuesEvent($event)">
-        </app-template-evaluate-form>
-
-        <app-template-evaluate-result
-            *ngSwitchCase="'RESULT'"
-            [evaluateTemplate]="evaluatedGraph"
-            [models]="models">
-        </app-template-evaluate-result>
-    </div>
-</div>
+<div *ngIf="template">
+    <div class="title">{{template.name}}</div>
+    <mat-stepper linear #stepper>
+        <mat-step>
+            <ng-template matStepLabel>Fill out template</ng-template>
+            <app-template-evaluate-form
+                [template]="template"
+                (parameterFormValuesEvent)="parameterFormValuesEvent($event)">
+            </app-template-evaluate-form>
+        </mat-step>
+
+        <mat-step>
+            <ng-template matStepLabel>Review evaluated graph</ng-template>
+            <app-template-evaluate-result
+                [evaluateTemplate]="evaluatedGraph"
+                [modelId]="data.modelId">
+            </app-template-evaluate-result>
+        </mat-step>
+
+    </mat-stepper>
+</div>

buildingmotif-app/src/app/template-evaluate/template-evaluate.component.ts

@@ -1,38 +1,51 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ModelSearchService } from '../model-search/model-search.service';
-import { Model, Template } from '../types';
+import { Component, OnInit, Inject, Input } from '@angular/core';
+import { Template } from '../types';
 import { TemplateEvaluateService } from './template-evaluate.service';
+import { TemplateDetailService } from '../template-detail/template-detail.service';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface DialogData {
+  templateId: number;
+  modelId: number;
+}
 
 @Component({
   selector: 'app-template-evaluate',
   templateUrl: './template-evaluate.component.html',
   styleUrls: ['./template-evaluate.component.css'],
-  providers: [TemplateEvaluateService, ModelSearchService]
+  providers: [TemplateDetailService, TemplateEvaluateService]
 })
-export class TemplateEvaluateComponent {
-  state: "FORM" | "RESULT" = "FORM";
-  template: Template;
+export class TemplateEvaluateComponent implements OnInit {
+  error: any = undefined;
+  template: Template | undefined = undefined;
   evaluatedGraph?: string;
-  models: Model[] = []
+  modelId?: number;
 
   constructor(
-    private route: ActivatedRoute,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    private templateDetailService: TemplateDetailService,
     private templateEvaluateService: TemplateEvaluateService,
-    private modelSearchService: ModelSearchService
-  ) {
-    this.template = this.route.snapshot.data["TemplateEvaluateResolver"];
+  ) {}
+
+  ngOnInit() {
+    this.modelId = this.data.modelId;
+
+    this.templateDetailService.getTemplate(this.data.templateId)
+    .subscribe({
+      next: (template: Template) => {
+        this.template = template
+      }, // success path
+      error: (error) => this.error = error // error path
+    });
   }
 
    parameterFormValuesEvent(parameterFormValues: {[name: string]: string}): void {
-    const evaluateTemplate = this.templateEvaluateService.evaluateTemplate(this.template.id, parameterFormValues);
+    if (this.template == undefined) return;
+    if (this.modelId == undefined) return;
+
+    const evaluateTemplate = this.templateEvaluateService.evaluateTemplate(this.template.id, this.modelId, parameterFormValues);
     evaluateTemplate.subscribe((result) => {
       this.evaluatedGraph = result
-      this.state = "RESULT";
-    });
-
-    this.modelSearchService.getAllModels().subscribe((models) => {
-      this.models = models;
     });
   }
 

buildingmotif-app/src/app/template-evaluate/template-evaluate.service.ts

@@ -19,14 +19,14 @@ export class TemplateEvaluateService {
 
   constructor(private http: HttpClient) { }
 
-  evaluateTemplate(id: number, parameters: {[name: string]: string}) {
-    const body = Object.entries(parameters).reduce((acc, [name, value]) => {
+  evaluateTemplate(templateId: number, modelId: number, parameters: {[name: string]: string}) {
+    const bindings = Object.entries(parameters).reduce((acc, [name, value]) => {
       return {...acc, [name]: {"@id": value}}
     }, {})
 
     return this.http.post(
-      `http://localhost:5000/templates/${id}/evaluate`,
-      body,
+      `http://localhost:5000/templates/${templateId}/evaluate`,
+      {model_id: modelId, bindings},
       {responseType: 'text'}
       )
       .pipe(

buildingmotif-app/src/app/template-search/template-search.component.html

@@ -1,6 +1,8 @@
 <div class="container">
     <div class="header">
         <div>Templates</div>
+
+        <!-- Template Search -->
         <form class="example-form">
             <mat-form-field class="search-bar" appearance="outline" floatLabel="never">
                 <input type="text"
@@ -13,13 +15,24 @@
         </form>      
     </div>
 
-    <mat-list *ngFor="let template of filteredTemplates | async">
-        <mat-card class="template">
-        <mat-card-title>{{template.name}}</mat-card-title>
-        <mat-card-actions align="end">
-            <button mat-button routerLink="/templates/{{template.id}}/evaluate">Evaluate</button>
-            <button mat-button routerLink="/templates/{{template.id}}">Details</button>
-        </mat-card-actions>
-        </mat-card>
-    </mat-list>      
-</div>
+    <!-- Loading  Templates -->
+    <div *ngIf="templates === undefined">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+
+    <!-- No Templates -->
+    <div *ngIf="templates === []"> no templates </div>
+
+    <!-- Templates List -->
+    <div *ngIf="templates">
+        <mat-list *ngFor="let template of filteredTemplates | async">
+            <mat-card class="template">
+            <mat-card-title>{{template.name}}</mat-card-title>
+            <mat-card-actions align="end">
+                <button mat-button *ngIf="evaulateModelId" (click)="openEvaluateTemplate(template.id)">Evaluate</button>
+                <button mat-button routerLink="/templates/{{template.id}}">Details</button>
+            </mat-card-actions>
+            </mat-card>
+        </mat-list>
+    </div>
+</div>