Query Role UI Fixes & Alignment Display Improvements

src/app/core/substance-form/disulfide-links/disulfide-links-form.component.html

@@ -19,6 +19,7 @@
           [compareWith]="compareSites"
           (selectionChange)="updateSuggestions($event.value, index)"
           class="site-select"
+          [panelWidth]="null"
         >
           <mat-option *ngFor="let cys of cysteine" [value]="cys">
             {{ cys.subunitIndex }}_{{ cys.residueIndex }}

src/app/core/substance-form/disulfide-links/disulfide-links-form.component.scss

@@ -29,20 +29,18 @@
   }
 
   .site {
-    max-width:80px;
+    max-width: 80px;
   }
 
-
   sites {
-    width:35%;
+    width: 35%;
   }
- /* .sites{
+  /* .sites{
     flex-grow: 1;
     padding-right: 15px;
     width:40%;
   }*/
 
   .site-select {
   }
-
 }

src/app/core/substances-browse/sequence-alignment/sequence-alignment.component.html

@@ -3,8 +3,10 @@
     <span class = "subunit">Subunit {{alignmentArray.subunitIndex}}</span>
     <span class = "alignment-id">{{alignmentArray.id}}</span>
   </div>
-  <pre class = "alignment-input" *ngIf = "text" [innerText]="text">
-
-  </pre>
+  <div class="alignment-input" *ngIf="text || targetSitesText || alignmentBodyText">
+    <pre class="alignment-stats" *ngIf="text" [innerText]="text"></pre>
+    <pre class="alignment-target-sites" *ngIf="targetSitesText" [innerText]="targetSitesText"></pre>
+    <pre class="alignment-body" *ngIf="alignmentBodyText" [innerText]="alignmentBodyText"></pre>
+  </div>
 
 </div>

src/app/core/substances-browse/sequence-alignment/sequence-alignment.component.scss

@@ -1,12 +1,27 @@
 .alignment-input {
-  overflow-x: auto;
-  overflow-y: auto;
   border-radius: 4px;
   border: 1px solid var(--sub-hierarchy-odd-bg-color);
   margin-top: 8px;
   padding: 5px;
   padding-bottom: 10px;
   max-height: 250px;
+  overflow-y: auto;
+}
+
+.alignment-stats,
+.alignment-target-sites,
+.alignment-body {
+  margin: 0;
+}
+
+.alignment-target-sites {
+  white-space: pre-wrap;
+  padding-left: 14ch;
+  text-indent: -14ch;
+}
+
+.alignment-body {
+  overflow-x: auto;
 }
 
 .alignment-container {

src/app/core/substances-browse/sequence-alignment/sequence-alignment.component.ts

@@ -11,6 +11,8 @@ export class SequenceAlignmentComponent implements OnInit {
   @Input() alignmentArray: Alignment;
   alignment: Alignment;
   text: string;
+  targetSitesText: string;
+  alignmentBodyText: string;
   constructor() { }
 
   ngOnInit() {
@@ -30,7 +32,14 @@ export class SequenceAlignmentComponent implements OnInit {
         this.text += 'matched:  = ' + this.alignment.score.toString() + ' \n';
       }
       if (this.alignment.score) {
-        this.text += this.alignment.alignment;
+        const alignStr = this.alignment.alignment || '';
+        const targetMatch = alignStr.match(/^(Target Sites:[^\n]*\n?)([\s\S]*)$/m);
+        if (targetMatch) {
+          this.targetSitesText = targetMatch[1];
+          this.alignmentBodyText = targetMatch[2];
+        } else {
+          this.alignmentBodyText = alignStr;
+        }
       }
     }
   }

src/app/fda/clinical-trials/clinical-trials-browse/clinical-trials-browse.component.ts

@@ -63,6 +63,7 @@ export class ClinicalTrialsBrowseComponent implements OnInit, AfterViewInit, OnD
   private subscriptions: Array<Subscription> = [];
   dataSource = new MatTableDataSource<ClinicalTrial>([]);
   canDelete: boolean = false;
+  canEdit: boolean = false;
   showExactMatches = false;
   private isComponentInit = false;
 
@@ -114,16 +115,12 @@ export class ClinicalTrialsBrowseComponent implements OnInit, AfterViewInit, OnD
     }
 
     this.overlayContainer = this.overlayContainerService.getContainerElement();
+    this.canEdit = await this.authService.hasSpecificPrivilege('Edit');
     this.canDelete = await this.authService.hasSpecificPrivilege('Delete Lower Level Items');
-    const authSubscription = this.authService.getAuth().subscribe(auth => {
-
-      // testing
-      if (this.canDelete) {
-       this.displayedColumns = ['edit', 'trialNumber', 'title', 'lastUpdated', 'delete'];
-      } else {
-         this.displayedColumns = ['edit', 'trialNumber', 'title', 'lastUpdated'];
-      }
-    });
+    const columns = ['trialNumber', 'title', 'lastUpdated'];
+    if (this.canEdit) { columns.unshift('edit'); }
+    if (this.canDelete) { columns.push('delete'); }
+    this.displayedColumns = columns;
     this.searchTypes = [
       {'title': 'All', 'value': 'all'},
       {'title': 'Title', 'value': 'title'},