proof of concept done

src/app/automated-system/automated-system.component.html

@@ -1,5 +1,4 @@
-<button (click)="printForm()" > Form ausgeben</button>
-<app-calibration></app-calibration>
+
 
 <div class="card card-style-general">
   <h2 class="card-header">Step 3: Setp the feeding rates</h2>
@@ -57,9 +56,6 @@ <h3 class="card-header">Step 3 Run Cascade</h3>
 
 
 
-
-<button (click)="setTime()"> set time </button>
-
 {{data.data | json}}
 
 <div class="clr-row">
@@ -69,4 +65,21 @@ <h3 class="card-header">Step 3 Run Cascade</h3>
 </div>
 
 <div id="pagegraph" #pagegraph></div>
+</div>
+
+<div class="clr-row">
+  <div class="clr-col">
+    <div class="card control-box-style">
+      <h3 class="card-header">Submit data to BioCatHub</h3>
+      <div class="card-block">
+        <div *ngIf="!loading" class="card-text">
+          <button class="btn btn-primary" (click)="submitToBioCatHub()"> Start </button>
+        </div>
+        <div *ngIf="loading" class="card-text spin-container">
+          <span class="spinner spinner-inline"></span>
+        </div>
+      </div>
+    </div>
+
+  </div>   
 </div>

src/app/automated-system/automated-system.component.ts

@@ -4,6 +4,7 @@ import { timer, Observable } from "rxjs"
 import { BehaviorSubject } from 'rxjs'
 import { VisualisationComponent } from "../visualisation/visualisation.component"
 import { ControlCommandsService } from "../shared/control-commands.service"
+import {BiocathubSubmissionService} from "../shared/biocathub-submission.service"
 import * as Plotly from 'plotly.js/dist/plotly.js';
 import { Config, Data, Layout } from 'plotly.js/dist/plotly.js';
 import { FormBuilder, FormGroup } from '@angular/forms';
@@ -18,12 +19,12 @@ export class AutomatedSystemComponent implements OnInit {
   constructor(private ot: OtInterfaceService,
     private comp: VisualisationComponent,
     private Cc: ControlCommandsService,
-    private fb: FormBuilder) { }
+    private fb: FormBuilder,
+    private bch: BiocathubSubmissionService) { }
 
   data = {
-    data: [
-     { x: [15.753033333333333, 31.518083333333333, 75.27738333333333, 119.04028333333333, 162.80608333333333], y: [20.471119197357112, 45.33744537561042, 19.52605436101166, 20.566362638097893, 19.089837148457054], type: 'scatter', name: "3-OH-benzaldehyde" },
-     { x: [], y: [], type: 'scatter', name: "Phenylacetylcarbinol" }
+    data: [ 
+      { "x": [ 8.82365, 18.76525, 56.724, 94.93486666666666, 132.88901666666666, 170.85535 ], "y": [ 12.144897283808954, 11.714074069699333, 6.25730431844186, 7.064673939788032, 5.9859489030214235, 2.6960464296340483 ], "type": "scatter", "name": "3-OH-benzaldehyde" }, { "x": [  8.82365, 18.76525, 56.724, 94.93486666666666, 132.88901666666666, 170.85535 ], "y": [ 0.930355735122606, 0.607903866392912, 0.5151924492556964, 3.699283591315337, 5.058921282478785, 6.180616578526451, 7.462971287080487 ], "type": "scatter", "name": "3-OH-benzaldehyde" } 
     ],
     layout: { title: 'Reaction flow' }
   };
@@ -145,4 +146,12 @@ export class AutomatedSystemComponent implements OnInit {
 
     }
 
+    submitToBioCatHub(){
+      let data_model = this.bch.mapData(this.data)
+      window.alert("jetzt gehts los")
+      let response = this.ot.submit_BioCatHub_data(data_model).subscribe((response) => {console.log(response)
+      window.open("https://retrobiohub.org/rbh/?name="+response.toString(), "_blank")})
+
+    } 
+
 }

src/app/dashboard/dashboard.component.html

@@ -82,12 +82,15 @@ <h3 class="card-header">Amine donor feeding pump</h3>
         </div>
       </div>
     </div>
+  </div>
 
 
-  </div>
 
 
 
 </div>
 
-<app-automated-system></app-automated-system>
+
+
+<app-automated-system></app-automated-system>
+

src/app/dashboard/dashboard.component.ts

@@ -4,6 +4,7 @@ import { timer, Observable } from "rxjs"
 import { BehaviorSubject } from 'rxjs'
 import { VisualisationComponent } from "../visualisation/visualisation.component"
 import { ControlCommandsService } from "../shared/control-commands.service"
+
 import * as Plotly from 'plotly.js/dist/plotly.js';
 import { Config, Data, Layout } from 'plotly.js/dist/plotly.js';
 
@@ -143,6 +144,19 @@ export class DashboardComponent implements OnInit {
     })
   }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
   // The content below is probably not of use any more! 
 
   runSwitch() {

src/app/json.typing.d.ts

@@ -0,0 +1,4 @@
+declare module "*.json" {
+    const value: any;
+    export default value;
+  }

src/app/shared/biocathub-submission.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BiocathubSubmissionService } from './biocathub-submission.service';
+
+describe('BiocathubSubmissionService', () => {
+  let service: BiocathubSubmissionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BiocathubSubmissionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/biocathub-submission.service.ts

@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import bch_json from "../../assets/biocathub.json";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BiocathubSubmissionService {
+
+  constructor() { }
+
+mapData(data){
+  console.log(bch_json["condition"])
+  console.log(data["data"])
+  let BA_replicates = this.build_replicates(data["data"][0])
+  let PAC_replicates = this.build_replicates(data["data"][1])
+
+  let BA_measurement = this.build_measurement(BA_replicates, "3-OH-benzaldehyde")
+  let PAC_measurement = this.build_measurement(PAC_replicates,"3-OH-phenylacetylcarbinol" ) 
+
+  let measurements = {measurements:[BA_measurement, PAC_measurement]}
+
+  let data_model = bch_json
+  data_model["experimentalData"] = measurements
+  return data_model
+
+}
+
+build_replicates(BA_data){
+  console.log(BA_data)
+  let x_values = BA_data["x"]
+  let y_values = BA_data["y"]
+  let length = x_values.length
+  let replicates = []
+
+  for(let i = 0; i <length; i++){
+    let replicate = {}
+    replicate["x_value"] = x_values[i]
+    let y_value = [y_values[i]]
+    replicate["y_values"] = y_value
+    replicates.push(replicate)
+  }
+
+  return replicates
+
+}
+
+build_measurement(replicates, reagent){
+  let measurement ={
+    x_unit:"min",
+    x_name:"time in minutes",
+    y_unit:"mmol/L",
+    y_name:"concentration in mmol/L",
+    plotStyle: "point",
+    reagent:reagent,
+    notes:"concentration measurement",
+    replicates: replicates
+
+  } 
+  return measurement
+}
+
+
+}

src/app/shared/ot-interface.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpHeaders } from '@angular/common/http'
 import { Observable, throwError } from 'rxjs'
 
 @Injectable({
@@ -9,6 +9,15 @@ export class OtInterfaceService {
 
   constructor(private http:HttpClient) { }
 
+  submit_BioCatHub_data(data_model):Observable<any> {
+    console.log("es funktioniert")
+    let bch_model = JSON.stringify(data_model)
+    let headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'})
+    window.alert("BioCatHub-submission")
+    //return this.http.post<any>("http://127.0.0.1:5000/retrobiohub/lightCas",bch_model, {headers:{'Content-Type': 'application/json'}})
+    return this.http.post<any>("https://retrobiohub.org/retrobiohub/lightCas",bch_model, {headers:{'Content-Type': 'application/json'}})
+  }
+
   startLED():Observable<any> {
     console.log("es funktioniert")
     return this.http.get<any>("http://127.0.0.1:5000/api/ot/light_up")
@@ -77,6 +86,7 @@ export class OtInterfaceService {
     console.log("automated system")
     let pump_duration = JSON.stringify({duration:time})
     return this.http.post<any>("http://127.0.0.1:5000/api/ot/reaction2",pump_duration,{headers:{'Content-Type': 'application/json'}} )
+
   }
 
 }

src/assets/biocathub.json

@@ -0,0 +1 @@
+{"enzymes": [{"ecNumber": "4.1.1.1", "name": "pyruvate decarboxylase", "type": "variant", "variant": "ApPDC-SOPP3", "organism": "Acetobacter pasteurianus", "concentration": "2", "unit": "mg/mL", "formulation": "Purified enzyme", "method": "Bradford", "others": [], "reaction": {"educts": [{"name": "3-OH-BA", "role": "substrate", "concentration": "15", "unit": "mmol/L", "smiles": "O=Cc1cccc(O)c1", "others": []}, {"name": "Pyruvate", "role": "substrate", "smiles": "CC(=O)C(=O)O", "others": []}], "products": [{"name": "3-OH-PAC", "role": "product", "concentration": "0", "unit": "mmol/L", "smiles": "CC(=O)[C@H](O)c1cccc(O)c1", "others": []}]}, "sequence": "not given"}, {"name": "Amine transferase", "type": "variant", "variant": "Cv2020-SOPP3", "organism": "Chromobacterium violaceum", "concentration": "2", "unit": "mg/mL", "formulation": "purified enzyme", "method": "Bradford", "others": [], "reaction": {"educts": [{"name": "3-OH-PAC", "role": "substrate", "smiles": "CC(=O)[C@H](O)c1cccc(O)c1", "others": []}, {"name": "a-methylbenzylamine", "role": "substrate", "smiles": "CC(N)c1ccccc1", "others": []}], "products": [{"name": "metaraminol", "role": "product", "smiles": "CC(N)C(O)c1cccc(O)c1", "others": []}]}, "sequence": "not given", "ecNumber": "not given"}], "vessel": {"type": "Stirred tank reactor 50 mL", "volume": "30", "unit": "mL", "others": [{"key": "end volume", "value": "35 mL"}]}, "condition": {"temp": "25", "unit": "\u00b0C", "ph": "5", "buffer": {"type": "Kpi-buffer", "concentration": "100", "unit": "mmol/L"}, "others": []}, "experimentalData": {"measurements": []}, "user": {}}