improved problem description and initial RAX hypothesis

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { ChemblRaxComponent } from './chembl-rax/chembl-rax.component';
 import { MoleculePickerComponent } from './molecule-picker/molecule-picker.component';
 import { ReportComponent } from './report/report.component';
 import { DatamatrixTabsComponent } from './datamatrix-tabs/datamatrix-tabs.component';
+import { Node4InitialRaxHypothesisComponent } from './node4-initial-rax-hypothesis/node4-initial-rax-hypothesis.component';
 
 import { KeysPipe } from './keys.pipe';
 import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
@@ -77,7 +78,7 @@ import { CompoundService } from './compound/compound.service';
 import { TcCompoundsService } from './tc-characterization/tc-compounds.service';
 import { ChemblRaxService } from './chembl-rax/chembl-rax.service';
 import { DatamatrixTabsService } from './datamatrix-tabs/datamatrix-tabs.service';
-
+import { Node4InitialRaxHypothesisService } from './node4-initial-rax-hypothesis/node4-initial-rax-hypothesis.service';
 
 
 
@@ -118,7 +119,8 @@ import { DatamatrixTabsService } from './datamatrix-tabs/datamatrix-tabs.service
     ChemblRaxComponent,
     MoleculePickerComponent,
     ReportComponent,
-    DatamatrixTabsComponent
+    DatamatrixTabsComponent,
+    Node4InitialRaxHypothesisComponent
   ],
   imports: [
     BrowserModule,
@@ -171,6 +173,7 @@ import { DatamatrixTabsService } from './datamatrix-tabs/datamatrix-tabs.service
     TcCompoundsService,
     ChemblRaxService,
     DatamatrixTabsService,
+    Node4InitialRaxHypothesisService,
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
   ],
   entryComponents: [NodeInfoComponent, OverlayComponent, MoleculePickerComponent],

src/app/each-workflow/each-workflow.component.ts

@@ -254,6 +254,7 @@ export class EachWorkflowComponent implements OnInit, AfterViewInit, OnDestroy,
             const dialogRef: MatDialogRef<any> = this.dialog.open( NodeInfoComponent, {
               width: '100%',
               data: result,
+              hasBackdrop: true,
             });
             dialogRef.afterOpened().subscribe(() => { node_loading_overlayRef.dispose(); });
             dialogRef.afterClosed().subscribe(result => {

src/app/globals.ts

@@ -10,6 +10,7 @@ export class Globals {
   current_main_project = '';
   operatorId = '';
   change = false; // Tricki no realize WF change
+  change_datamatrix = false;
   workflow_scroll = false;
   csrftoken_cookie_name = 'csrftoken';
   csrftoken_header_name = 'X-CSRFToken';

src/app/main/main.component.html

@@ -49,7 +49,7 @@ <h3><span>&#9776;</span></h3>
                 </div>
                 <div  id="app-datamatrix-container" *ngIf="this.globals.active_projects.length > 0" class="overflow-auto col">
                     <app-datamatrix-tabs></app-datamatrix-tabs>
-                    <app-datamatrix [datamatrix_tabs_active_tab_name]="this.datamatrix_tabs.active_tab_name" [workflow_scroll]="this.globals.workflow_scroll" [redraw]="datamatrixRedraw" [projectName]="this.globals.current_main_project" [change]="this.globals.change"></app-datamatrix>
+                    <app-datamatrix [datamatrix_tabs_active_tab_name]="this.datamatrix_tabs.active_tab_name" [workflow_scroll]="this.globals.workflow_scroll" [redraw]="datamatrixRedraw" [projectName]="this.globals.current_main_project" [change]="globals.change_datamatrix"></app-datamatrix>
                 </div>
             </div>  
 

src/app/main/main.component.ts

@@ -50,6 +50,7 @@ export class MainComponent implements OnInit, OnDestroy {
 
   change() {
     this.globals.change = !this.globals.change;
+    this.globals.change_datamatrix = !this.globals.change_datamatrix;
   }
 
   getUserInfo(csrftoken?: string) {

src/app/node-info/node-info.component.html

@@ -38,15 +38,34 @@ <h6>Comments:</h6>
 
     <div class="card">
         <ng-container [ngSwitch]="this.info.node_seq">
+            <ng-container *ngSwitchCase="1">
+                <app-node1-problem-formulation [info]="this.info" [Editor]="Editor" [Editor_config]="this.Editor_config"></app-node1-problem-formulation></ng-container>
             <ng-container *ngSwitchCase="2">
                 <h5 [ngbTooltip]="tc_h5_help" class="card-header bg-light p-1">TC definition</h5>
                 <app-tc-characterization [info]="this.info"></app-tc-characterization>
             </ng-container>
             <ng-template #tc_h5_help>
                 <p>Target Compound definition</p>
             </ng-template>
+            <ng-container *ngSwitchCase="3">
+                <h5 class="card-header bg-light p-1">Metabolite Characterization</h5>
+                <div class="card" style="margin-bottom:0px">
+                    <h6 class="card-header bg-light p-1">Metabolite prediction</h6>
+                    <div class="card-body p-2">
+                        <p>Metabolite prediction tool in progress.</p>
+                    </div>
+                    <h6 class="card-header bg-light p-1">Metabolite definition</h6>
+                    <div class="card-body p-2">
+                        <p>Metabolite definition in progress.</p>
+                    </div>
+                </div>
+            </ng-container>
             <ng-container *ngSwitchCase="4">
-                <h5 class="card-header bg-light p-1">Resources</h5>
+                <h5 class="card-header bg-light p-1">Initial RAx strategy</h5>
+                <app-node4-initial-rax-hypothesis [info]="this.info" [Editor]="Editor" [Editor_config]="this.Editor_config"></app-node4-initial-rax-hypothesis>
+            </ng-container>
+            <ng-container *ngSwitchCase="5">
+                <h5 class="card-header bg-light p-1">Source Compound definition</h5>
                 <app-chembl-rax [info]="this.info"></app-chembl-rax>
             </ng-container>
             <ng-container *ngSwitchDefault>
@@ -55,7 +74,7 @@ <h5 class="card-header bg-light p-1">Resources</h5>
         </ng-container>
 
         <div *ngIf="this.info.resources.length > 0" class="card" style="margin-bottom:0px">
-            <h6 class="card-header bg-light p-1">Links</h6>
+            <h6 class="card-header bg-light p-1">See also</h6>
             <div class="card-body p-2">
                 <ul class="list-group list-group-flush">
                     <li class="list-group-item p-1" *ngFor="let info of this.info.resources ;">
@@ -79,7 +98,7 @@ <h5 class="card-header bg-light p-1">Input</h5>
     </div>-->
 
 
-    <div class="card">
+<!--     <div class="card">
             <h5 class="card-header bg-light p-1">New knowledge</h5>
             <app-compound *ngIf="this.info.node_seq == 2" [info]="this.info"  [ra_type]="'tc'"></app-compound>
             <ng-container [ngSwitch]="this.info.node_seq">
@@ -93,7 +112,7 @@ <h5 class="card-header bg-light p-1">New knowledge</h5>
                     </div>
                 </ng-container>
             </ng-container>
-    </div>
+    </div> -->
     <div class="card">
         <h5 class="card-header bg-light p-1">Comments</h5>
         <div class="smiles-micromodal-container">
@@ -109,5 +128,5 @@ <h5 class="card-header bg-light p-1">Comments</h5>
 
 <div mat-dialog-actions>
     <button mat-button [mat-dialog-close]="'cancel'">Cancel</button>
-    <button mat-button (click)="NodeCompleted()" [mat-dialog-close]="'OK'">OK</button>
+    <button mat-button (click)="NodeCompleted()">OK</button>
 </div>

src/app/node-info/node-info.component.ts

@@ -6,12 +6,14 @@ import { NodeInfoService } from './node-info.service';
 import * as ClassicEditor from '../../assets/js/ckeditor5/ckeditor.js';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Node1ProblemFormulationComponent } from '../node1-problem-formulation/node1-problem-formulation.component';
+import { Node4InitialRaxHypothesisComponent } from '../node4-initial-rax-hypothesis/node4-initial-rax-hypothesis.component';
 import { environment } from '../../environments/environment';
 import { Subscription } from 'rxjs';
 import { ResizeSensor } from 'css-element-queries';
 
 
 import MicroModal from 'micromodal';
+import { TcCharacterizationService } from '../tc-characterization/tc-characterization.service';
 
 
 //declare let jQuery: any;
@@ -49,15 +51,14 @@ export class NodeInfoComponent implements OnInit, AfterViewInit {
   public Editor = ClassicEditor;  
 
   @ViewChild(Node1ProblemFormulationComponent,{ static: false }) node1: Node1ProblemFormulationComponent;
+  @ViewChild(  Node4InitialRaxHypothesisComponent,{ static: false }) node4: Node1ProblemFormulationComponent;
   // We use this trigger because fetching the list of persons can be quite long,
   // thus we ensure the data is fetched before rendering
 
 
 
 
   constructor(private el: ElementRef, public globals: Globals,
-              public dialog: MatDialog,
-              public ngZone: NgZone,
               @Inject(NodeInfoService) public service,
               public dialogRef: MatDialogRef<NodeInfoComponent>,
               @Inject(MAT_DIALOG_DATA) public data: Array<any>,
@@ -165,36 +166,50 @@ export class NodeInfoComponent implements OnInit, AfterViewInit {
   }
 
   NodeCompleted() {
+    this.dialogRef.disableClose = true;
     const project_id = this.info.project;
     const node_seq = this.info.node_seq;
     this.service.setNodeAsBusy(project_id,node_seq,false);
 
     this.sub = this.service.saveNode(this.info.project, this.info.node_seq, this.info.inputs_comments,this.info.outputs,this.info.outputs_comments,this.globals.node_csrf_token[project_id][node_seq]).subscribe(
       result => {
+
+        switch(node_seq) { 
+          case 1: {
+            this.service.setNodeAsBusy(project_id,node_seq);
+            this.node1.NodeCompleted();
+            break; 
+          }
+          case 4: {
+            this.service.setNodeAsBusy(project_id,node_seq);
+            this.node4.NodeCompleted();
+            break; 
+          } 
+          default: {
+            this.globals.change_datamatrix = !this.globals.change_datamatrix;
+            //statements; 
+            break; 
+          } 
+        }
+
+
         this.service.setNodeAsBusy(project_id,node_seq,false);
         this.globals.change =  !this.globals.change;
+        this.dialogRef.disableClose = false;
+        this.dialogRef.close('OK');
       },
       error => {},
       () => {
         this.sub.unsubscribe;
       }
     );
-    switch(node_seq) { 
-      case 1: {
-        this.service.setNodeAsBusy(project_id,node_seq);
-        this.node1.NodeCompleted();
-        break; 
-      } 
-      default: { 
-        //statements; 
-        break; 
-      } 
-   } 
-
-   this.inline_input = true;
+
+
+    this.inline_input = true;
     this.inline_output = true;
     this.inline_comments = true;
 
+
     return false;
   }
 

src/app/node1-problem-formulation/node1-problem-formulation.component.html

@@ -1,8 +1,42 @@
 
+        <h5 [ngbTooltip]="scope_h5_help" class="card-header bg-light p-1">Scope</h5>
+        <ng-template #scope_h5_help>
+                <p>e.g. human allowable exposures in health risk assesment, prioritzation, screening, classification and labelling</p>
+        </ng-template>
+        <div class="upload-angular-container" class="card-body p-0">
+            <ckeditor [id]="this.ckeditor_ids['scope']" [editor]="Editor" [config]="this.ckeditors['scope']" [(ngModel)]="problem_formulation.scope" [disabled]="this.inline_problem_description"></ckeditor>
+        </div>
+        <div class="smiles-micromodal-container">
+                <app-smiles-micromodal [id]="this.ckeditor_ids['scope']+'-smiles-micromodal'"></app-smiles-micromodal>
+        </div>
+
+        <h5 [ngbTooltip]="context_h5_help" class="card-header bg-light p-1">Decision context</h5>
+        <ng-template #context_h5_help>
+                <p>e.g. regulatory context</p>
+        </ng-template>
+        <div class="upload-angular-container" class="card-body p-0">
+            <ckeditor [id]="this.ckeditor_ids['decision_context']" [editor]="Editor" [config]="this.ckeditors['decision_context']" [(ngModel)]="problem_formulation.decision_context" [disabled]="this.inline_problem_description"></ckeditor>
+        </div>
         <div class="smiles-micromodal-container">
-                <app-smiles-micromodal [id]="this.ckeditor_id+'-smiles-micromodal'"></app-smiles-micromodal>
+                <app-smiles-micromodal [id]="this.ckeditor_ids['decision_context']+'-smiles-micromodal'"></app-smiles-micromodal>
         </div>
+
+        <h5 [ngbTooltip]="" class="card-header bg-light p-1">Endpoints</h5>
         <div class="upload-angular-container" class="card-body p-0">
-            <ckeditor [id]="this.ckeditor_id" [editor]="Editor" [config]="this.Editor_config" [(ngModel)]="problem_description" [disabled]="this.inline_problem_description"></ckeditor>
+            <ckeditor [id]="this.ckeditor_ids['endpoints']" [editor]="Editor" [config]="this.ckeditors['endpoints']" [(ngModel)]="problem_formulation.endpoints" [disabled]="this.inline_problem_description"></ckeditor>
+        </div>
+        <div class="smiles-micromodal-container">
+                <app-smiles-micromodal [id]="this.ckeditor_ids['endpoints']+'-smiles-micromodal'"></app-smiles-micromodal>
+        </div>
+
+        <h5 [ngbTooltip]="uncertainty_h5_help" class="card-header bg-light p-1">Tolerable uncertainty threshold</h5>
+        <ng-template #uncertainty_h5_help>
+                <p>Tolerable uncertainty threshold for Read-Across results</p>
+        </ng-template>
+        <div class="upload-angular-container" class="card-body p-0">
+            <ckeditor [id]="this.ckeditor_ids['uncertainty']" [editor]="Editor" [config]="this.ckeditors['uncertainty']" [(ngModel)]="problem_formulation.uncertainty" [disabled]="this.inline_problem_description"></ckeditor>
+        </div>
+        <div class="smiles-micromodal-container">
+                <app-smiles-micromodal [id]="this.ckeditor_ids['uncertainty']+'-smiles-micromodal'"></app-smiles-micromodal>
         </div>
 

src/app/node1-problem-formulation/node1-problem-formulation.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, Output, OnInit } from '@angular/core';
 import { Node1ProblemFormulationService } from './node1-problem-formulation.service';
+import { ProblemFormulation } from './node1-problem-formulation.service';
 import { Globals } from '../globals';
 import { NodeInfoService } from '../node-info/node-info.service';
 import { environment } from '../../environments/environment';
@@ -20,12 +21,15 @@ export class Node1ProblemFormulationComponent implements OnInit {
   @Output() problem_description : string;
   inline_problem_description = false;
   show_inline = false;
-  smiles_drawer_size : number = 100;
+  smiles_drawer_size : number = 200;
   data: any;
   environment = environment;
   micromodal = MicroModal;
-  ckeditor_id: string;
+  ckeditor_id_base: string;
+  ckeditor_ids: Object = {};
+  ckeditors: Object = {};
   part = 1;
+  problem_formulation: ProblemFormulation = new ProblemFormulation();
 
   //public Editor = ClassicEditor;
 
@@ -36,21 +40,36 @@ export class Node1ProblemFormulationComponent implements OnInit {
   ngOnInit() {
     this.data = this.info;
     this.micromodal.init();
-    this.ckeditor_id = 'ckeditor_'+this.info.project+'_'+this.info.node_seq+'_problem_formulation';
-    let i = 0;
-    this.Editor_config.CustomElement.items.forEach( (item) => {
-      this.Editor_config.CustomElement.items[i].ckeditor_id = this.ckeditor_id;
-      this.Editor_config.CustomElement.items[i].component = this;
-      i++;
+    this.ckeditor_id_base = 'ckeditor_'+this.info.project+'_'+this.info.node_seq+'_problem_formulation';
+    let editor_config: any; 
+    Object.getOwnPropertyNames(this.problem_formulation).forEach(field => {
+      const ckeditor_id = this.ckeditor_id_base+'-'+field;
+      this.ckeditor_ids[field] = ckeditor_id;
+      editor_config = $.extend(true,{},this.Editor_config);
+      let i = 0;
+      editor_config.CustomElement.items.forEach( (item) => {
+        editor_config.CustomElement.items[i].ckeditor_id = ckeditor_id;
+        editor_config.CustomElement.items[i].component = this;
+        i++;
+      });
+      this.ckeditors[field] = editor_config;
     });
 
     this.service.getProblemDescription(this.info.project).subscribe(
       result => {
-        this.problem_description = result.description;
+        Object.getOwnPropertyNames(this.problem_formulation).forEach(field => {
+          if (result[field] === null || typeof result[field] === 'undefined') {
+            this.problem_formulation[field] = '';
+          } else {
+            this.problem_formulation[field] = result[field];
+          }
+
+        });
+
       },
       error => {
         if (error.status === 404) {
-          this.problem_description = '';
+          this.problem_formulation = new ProblemFormulation();
         } else {
           alert('Error getting problem description');
         }
@@ -63,10 +82,10 @@ export class Node1ProblemFormulationComponent implements OnInit {
   NodeCompleted() {
     const project_id = this.info.project;
     const node_seq = 1;
-    this.service.saveNode (project_id, this.problem_description,this.globals.node_csrf_token[project_id][node_seq]).subscribe(
+    this.service.saveNode (project_id, this.problem_formulation,this.globals.node_csrf_token[project_id][node_seq]).subscribe(
       result => {
         this.globals.change =  !this.globals.change;
-        this.node.setNodeAsBusy(project_id,node_seq,false);
+        // this.node.setNodeAsBusy(project_id,node_seq,false);
       }
     );