feature setup

Author: NikoAnderson

src/app/core/config/config.model.ts

@@ -81,6 +81,7 @@ export interface Config {
     disableKetcher?: boolean;
     useApprovalAPI?: boolean;
     dummyWhoami?: Auth;
+    enableStructureFeatures?: boolean;
 }
 
 export interface StagingAreaSettings {

src/app/core/structure/structure-post-response.model.ts

@@ -8,6 +8,7 @@ export interface InterpretStructureResponse {
     structure: SubstanceStructure;
     moieties: Array<SubstanceMoiety>;
     structuralUnits: Array<StructuralUnit>;
+    featureList?: Array<any>;
 }
 
 export interface ResolverResponse {

src/app/core/substance-form/structure/substance-form-structure-card.component.html

@@ -1,13 +1,34 @@
 <div>
   <div>
     <div>
-      <app-structure-editor (loadedMolfile)="molvecUpdate($event)" (editorOnLoad)="editorOnLoad($event)"  (editorSwitched) = "changeEditor($event)" style="z-index: 9999">
+      <app-structure-editor (loadedMolfile)="molvecUpdate($event)" (editorOnLoad)="editorOnLoad($event)" (editorSwitched) = "changeEditor($event)" style="z-index: 9999">
       </app-structure-editor>
     </div>
     <div [ngClass]="{'messages-container': true, collapsed: !userMessage, expanded: userMessage}">
       {{userMessage}}
     </div>
   </div>
+  <div class="button-row feature-table" *ngIf = "enableStructureFeatures && features && features.length > 0" >
+   <div class = "feature-expansion">
+    <mat-expansion-panel expanded="true" >
+      <mat-expansion-panel-header>
+        <mat-panel-title> Structure Features </mat-panel-title>
+      </mat-expansion-panel-header>
+      <table class = "full-width" mat-table [dataSource]="sortedFeatures">
+        <ng-container matColumnDef="key">
+          <th mat-header-cell  *matHeaderCellDef>Feature</th>
+          <td mat-cell *matCellDef="let element" >{{element.key}}</td>
+        </ng-container>
+        <ng-container matColumnDef="value">
+          <th mat-header-cell *matHeaderCellDef>Value</th>
+          <td mat-cell *matCellDef="let element">{{element.value}}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    </mat-expansion-panel>
+    </div>
+   </div> 
   <div class="button-row" *ngIf="structure && substanceType === 'polymer'">
     <span class="middle-fill"></span>
     <span class="right-buttons">

src/app/core/substance-form/structure/substance-form-structure-card.component.scss

@@ -43,6 +43,25 @@
     }
   }
 
+  .feature-table {
+    display:block;
+    margin: auto;
+    width: 85%;
+  }
+
+  .feature-expansion {
+    width:100%; 
+    justify-content: center;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+  
+  tr.mat-row, tr.mat-footer-row {
+    height: 32px;
+}
+
   .SUCCESS {
     color: var(--success-green-color);
     background-color: var(--success-green-bg-color);

src/app/core/substance-form/structure/substance-form-structure-card.component.ts

@@ -20,6 +20,7 @@ import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { StructureEditorComponent } from '@gsrs-core/structure-editor';
 import { take } from 'rxjs/operators';
 import { ConfigService } from '@gsrs-core/config';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'app-substance-form-structure-card',
@@ -34,10 +35,15 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
   substanceType: string;
   smiles: string;
   mol: string;
+  features: Array<any>;
   isInitializing = true;
   private overlayContainer: HTMLElement;
   structureErrorsArray: Array<StructureDuplicationMessage>;
   subscriptions: Array<Subscription> = [];
+  privateFeatures: any;
+  enableStructureFeatures = true;
+  sortedFeatures = new MatTableDataSource();
+  displayedColumns = ['key', 'value'];
   @ViewChild(StructureEditorComponent) structureEditorComponent!: StructureEditorComponent;
 
   constructor(
@@ -165,6 +171,30 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
 
   processStructurePostResponse(structurePostResponse?: InterpretStructureResponse): void {
     if (structurePostResponse && structurePostResponse.structure) {
+      if (structurePostResponse.featureList && structurePostResponse.featureList.length > 0) {
+        let temp = [];
+        Object.keys(structurePostResponse.featureList[0]).forEach(key => {
+          let label = key;
+          if(key === 'categoryScore'){
+            label = 'Category Score';
+          }
+          if(key === 'sumOfScores'){
+            label = 'Sum Of Scores';
+          }
+          temp.push({'key': label,'value': structurePostResponse.featureList[0][key] });
+        });
+        let customSort = (array: any[]): any[] => {
+          return array.sort((a, b) => {
+            if (a.key === 'Category Score') return -1;
+            if (b.key === 'Category Score') return 1;
+            if (a.key === 'Sum Of Scores') return a.key === 'Category Score' ? 1 : -1;
+            if (b.key === 'Sum Of Scores') return b.key === 'Category Score' ? -1 : 1;
+            return a.key.localeCompare(b.key);
+          });
+        };
+        this.features = customSort(temp);
+        this.sortedFeatures = new MatTableDataSource(this.features);
+      } 
 
       // we should only be dealing with this stuff if the total hash changes
       // or if the charge changes, or if it's a polymer

src/app/core/substance-form/structure/substance-form-structure.module.ts

@@ -13,6 +13,8 @@ import { DragDropPasteDirective } from '@gsrs-core/substance-form/structure/drag
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatButtonModule} from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @NgModule({
   imports: [
@@ -28,7 +30,9 @@ import {MatButtonModule} from '@angular/material/button';
     NameResolverModule,
     MatMenuModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatTableModule,
+    MatExpansionModule
   ],
   declarations: [
     SubstanceFormStructureCardComponent,