DOCK-1689: added primary indicator and icon

cypress/e2e/immutableDatabaseTests/workflowDetails.ts

@@ -136,6 +136,7 @@ describe('Test primary descriptor bubble', () => {
     cy.get('[data-cy=primary-descriptor-bubble]').should('be.visible');
     cy.get('mat-form-field').click();
     cy.contains('.mat-option-text', 'arguments.cwl').click();
+    cy.get('[data-cy=primary-descriptor-bubble]').should('not.exist');
     cy.get('[data-cy=go-to-primary-icon]').should('be.visible').click();
     cy.get('[data-cy=primary-descriptor-bubble]').should('be.visible');
   });

src/app/file-tree/file-tree.component.html

@@ -8,14 +8,14 @@
       <!-- The already selected file -->
       <button *ngIf="!node.child && data.selectedFile.absolutePath === node.absolutePath" mat-raised-button disabled>
         <mat-icon class="mr-2" [attr.aria-label]="'file icon'">description</mat-icon>{{ node.name }}
-        <span *ngIf="isPrimaryDescriptor(node.absolutePath)" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
+        <span *ngIf="primaryDescriptorPath === node.absolutePath" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
           >Primary</span
         >
       </button>
       <!-- The not-selected files -->
       <button (click)="selectFile(node)" *ngIf="!(!node.child && data.selectedFile.absolutePath === node.absolutePath)" mat-stroked-button>
         <mat-icon color="primary" class="mr-2" [attr.aria-label]="'file icon'">description</mat-icon>{{ node.name }}
-        <span *ngIf="isPrimaryDescriptor(node.absolutePath)" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
+        <span *ngIf="primaryDescriptorPath === node.absolutePath" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
           >Primary</span
         >
       </button>

src/app/file-tree/file-tree.component.spec.ts

@@ -7,8 +7,7 @@ import { MatTreeModule } from '@angular/material/tree';
 import { SourceFile } from 'app/shared/swagger';
 import { DescriptorLanguageService } from '../shared/entry/descriptor-language.service';
 import { SourceFileTabsService } from '../source-file-tabs/source-file-tabs.service';
-import { DescriptorLanguageStubService, InfoTabServiceStub, SourceFileTabsStubService } from '../test/service-stubs';
-import { InfoTabService } from '../workflow/info-tab/info-tab.service';
+import { DescriptorLanguageStubService, SourceFileTabsStubService } from '../test/service-stubs';
 
 import { FileTreeComponent } from './file-tree.component';
 
@@ -26,7 +25,6 @@ describe('FileTreeComponent', () => {
           { provide: MAT_DIALOG_DATA, useValue: [] },
           { provide: SourceFileTabsService, useClass: SourceFileTabsStubService },
           { provide: DescriptorLanguageService, useClass: DescriptorLanguageStubService },
-          { provide: InfoTabService, useClass: InfoTabServiceStub },
         ],
       }).compileComponents();
     })

src/app/file-tree/file-tree.component.ts

@@ -5,7 +5,6 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { SourceFile } from 'app/shared/swagger';
 import { SourceFileTabsService } from '../source-file-tabs/source-file-tabs.service';
 import { ToolDescriptor } from '../shared/openapi';
-import { EntryType } from '../shared/enum/entry-type';
 
 /** File node data with possible child nodes. */
 export interface FileNode {
@@ -59,7 +58,6 @@ export class FileTreeComponent {
       versionName: string;
       descriptorType: ToolDescriptor.TypeEnum;
       versionPath: string;
-      entryType: EntryType;
     }
   ) {
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
@@ -149,15 +147,7 @@ export class FileTreeComponent {
   }
 
   isPrimaryDescriptor(path: string): boolean {
-    const primaryPaths = this.sourceFileTabsService.getPrimaryPath(
-      this.data.entryPath,
-      this.data.versionName,
-      this.data.descriptorType,
-      this.data.versionPath,
-      this.data.entryType
-    );
-    console.log(primaryPaths);
-    console.log(path);
+    const primaryPaths = this.sourceFileTabsService.getPrimaryPaths(this.data.descriptorType, this.data.versionPath);
     return primaryPaths.includes(path);
   }
 }

src/app/source-file-tabs/source-file-tabs.component.html

@@ -32,51 +32,54 @@
         <div *ngIf="fileTab.value.length > 0">
           <mat-toolbar color="primary">
             <div class="w-100" fxLayout="row" fxLayoutAlign="space-between center">
-              <span class="select-file-button-span" *ngIf="fileTab.value.length > 10">
+              <span *ngIf="fileTab.value.length > 10">
                 <button color="accent" data-cy="select-file-button" mat-raised-button (click)="openFileTree(fileTab.value)">
                   Select File
                 </button>
               </span>
-              <span class="no-wrap" *ngIf="fileTab.value.length > 10"> {{ fileName }} </span>
-              <span
-                *ngIf="isCurrentFilePrimary && fileTab.value.length > 10"
-                class="bubble primary-bubble primary-bubble-header"
-                data-cy="primary-descriptor-bubble"
-              >
-                Primary
-              </span>
+              <span>
+                <span class="no-wrap" *ngIf="fileTab.value.length > 10"> {{ fileName }} </span>
+                <span
+                  *ngIf="isCurrentFilePrimary && fileTab.value.length > 10"
+                  class="bubble preview-bubble primary-bubble-header"
+                  data-cy="primary-descriptor-bubble"
+                >
+                  Primary
+                </span>
+
+                <mat-form-field *ngIf="fileTab.value.length <= 10" class="w-50">
+                  <mat-select [value]="currentFile" (selectionChange)="matSelectChange($event)">
+                    <mat-select-trigger>
+                      {{ currentFile.path }}
+                      <span
+                        *ngIf="isCurrentFilePrimary"
+                        class="bubble preview-bubble primary-bubble-header"
+                        data-cy="primary-descriptor-bubble"
+                        >Primary</span
+                      >
+                    </mat-select-trigger>
+                    <mat-option [value]="file" *ngFor="let file of fileTab.value">
+                      {{ file.path }}
+                      <span *ngIf="primaryDescriptorPath === file.path" class="bubble primary-bubble" data-cy="primary-descriptor-bubble"
+                        >Primary</span
+                      >
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
 
-              <mat-form-field *ngIf="fileTab.value.length <= 10" class="w-50">
-                <mat-select [value]="currentFile" (selectionChange)="matSelectChange($event)">
-                  <mat-select-trigger [value]="currentFile">
-                    {{ currentFile.path }}
-                    <span
-                      *ngIf="isCurrentFilePrimary"
-                      class="bubble primary-bubble primary-bubble-header"
-                      data-cy="primary-descriptor-bubble"
-                      >Primary</span
-                    >
-                  </mat-select-trigger>
-                  <mat-option [value]="file" *ngFor="let file of fileTab.value">
-                    {{ file.path }}
-                    <span *ngIf="isPrimaryDescriptor(file.path)" class="bubble primary-bubble" data-cy="primary-descriptor-bubble"
-                      >Primary</span
-                    >
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-              <a
-                color="secondary"
-                type="button"
-                *ngIf="!isCurrentFilePrimary"
-                (click)="selectFile(primaryDescriptors[0])"
-                matTooltip="View the primary descriptor"
-                mat-icon-button
-                data-cy="go-to-primary-icon"
-              >
-                <mat-icon aria-hidden="false" aria-label="Navigate to Primary Descriptor file" fontIcon="home"></mat-icon>
-              </a>
-              <span class="file-copy-download-span">
+                <a
+                  color="secondary"
+                  type="button"
+                  *ngIf="!isCurrentFilePrimary"
+                  (click)="selectFile(primaryDescriptors[0])"
+                  matTooltip="View the primary descriptor"
+                  mat-icon-button
+                  data-cy="go-to-primary-icon"
+                >
+                  <mat-icon aria-hidden="false" aria-label="Navigate to Primary Descriptor file" fontIcon="home"></mat-icon>
+                </a>
+              </span>
+              <span>
                 <a
                   mat-icon-button
                   color="secondary"

src/app/source-file-tabs/source-file-tabs.component.scss

@@ -1,20 +1,3 @@
-.file-copy-download-span {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 0;
-  justify-content: flex-end;
-}
-.select-file-button-span {
-  flex-grow: 1;
-  flex-basis: 0;
-}
-.dropdown-primary-button-span {
-  flex-grow: 1;
-  flex-basis: 0;
-}
-.go-to-primary-button {
-  margin: 0 1.25rem;
-}
 .primary-bubble-header {
   font-size: 14px !important;
   padding: 0 1rem !important;

src/app/source-file-tabs/source-file-tabs.component.spec.ts

@@ -4,11 +4,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MapFriendlyValuesPipe } from 'app/search/map-friendly-values.pipe';
 import { FileService } from 'app/shared/file.service';
-import { FileStubService, InfoTabServiceStub, SourceFileTabsStubService } from 'app/test/service-stubs';
+import { FileStubService, SourceFileTabsStubService } from 'app/test/service-stubs';
 import { SourceFileTabsComponent } from './source-file-tabs.component';
 import { SourceFileTabsService } from './source-file-tabs.service';
 import { MatDialogModule } from '@angular/material/dialog';
-import { InfoTabService } from '../workflow/info-tab/info-tab.service';
 import { DescriptorLanguageService } from '../shared/entry/descriptor-language.service';
 
 describe('SourceFileTabsComponent', () => {
@@ -24,7 +23,6 @@ describe('SourceFileTabsComponent', () => {
           { provide: SourceFileTabsService, useClass: SourceFileTabsStubService },
           { provide: FileService, useClass: FileStubService },
           { provide: DescriptorLanguageService, useClass: DescriptorLanguageService },
-          { provide: InfoTabService, useClass: InfoTabServiceStub },
         ],
         schemas: [NO_ERRORS_SCHEMA],
       }).compileComponents();

src/app/source-file-tabs/source-file-tabs.component.ts

@@ -9,10 +9,8 @@ import { FileService } from 'app/shared/file.service';
 import { SourceFile, ToolDescriptor, WorkflowVersion } from 'app/shared/openapi';
 import { finalize } from 'rxjs/operators';
 import { SourceFileTabsService } from './source-file-tabs.service';
-
 import { WorkflowQuery } from '../shared/state/workflow.query';
 import { Observable } from 'rxjs';
-import { SessionQuery } from '../shared/session/session.query';
 
 @Component({
   selector: 'app-source-file-tabs',
@@ -24,8 +22,7 @@ export class SourceFileTabsComponent implements OnChanges {
     private fileService: FileService,
     private sourceFileTabsService: SourceFileTabsService,
     private matDialog: MatDialog,
-    private workflowQuery: WorkflowQuery,
-    private sessionQuery: SessionQuery
+    private workflowQuery: WorkflowQuery
   ) {
     this.isPublished$ = this.workflowQuery.workflowIsPublished$;
     this.primaryDescriptors = [];
@@ -46,6 +43,7 @@ export class SourceFileTabsComponent implements OnChanges {
   downloadFilePath: string;
   fileTabs: Map<string, SourceFile[]>;
   primaryDescriptors: SourceFile[] | null;
+  primaryDescriptorPath: string;
   isCurrentFilePrimary: boolean | null;
   protected isPublished$: Observable<boolean>;
   /**
@@ -82,6 +80,7 @@ export class SourceFileTabsComponent implements OnChanges {
           sourceFiles.forEach((sourceFile) => {
             if (this.isPrimaryDescriptor(sourceFile.path)) {
               this.primaryDescriptors.push(sourceFile);
+              this.primaryDescriptorPath = sourceFile.path;
             }
           });
         },
@@ -139,7 +138,6 @@ export class SourceFileTabsComponent implements OnChanges {
           versionName: this.version.name,
           descriptorType: this.descriptorType,
           versionPath: this.version.workflow_path,
-          entryType: this.sessionQuery.getValue().entryType,
         },
       })
       .afterClosed()
@@ -156,13 +154,7 @@ export class SourceFileTabsComponent implements OnChanges {
   }
 
   isPrimaryDescriptor(path: string): boolean {
-    const primaryPaths = this.sourceFileTabsService.getPrimaryPath(
-      this.entryPath,
-      this.version.name,
-      this.descriptorType,
-      this.version.workflow_path,
-      this.sessionQuery.getValue().entryType
-    );
+    const primaryPaths = this.sourceFileTabsService.getPrimaryPaths(this.descriptorType, this.version.workflow_path);
     return primaryPaths.includes(path);
   }
 }

src/app/source-file-tabs/source-file-tabs.service.spec.ts

@@ -4,17 +4,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DescriptorTypeCompatService } from 'app/shared/descriptor-type-compat.service';
 import { FileService } from 'app/shared/file.service';
 import { WorkflowsService } from 'app/shared/swagger';
-import {
-  DescriptorTypeCompatStubService,
-  FileStubService,
-  InfoTabServiceStub,
-  ProviderStubService,
-  WorkflowsStubService,
-} from 'app/test/service-stubs';
+import { DescriptorTypeCompatStubService, FileStubService, ProviderStubService, WorkflowsStubService } from 'app/test/service-stubs';
 import { ProviderService } from '../shared/provider.service';
 import { SourceFileTabsService } from './source-file-tabs.service';
 import { DescriptorLanguageService } from '../shared/entry/descriptor-language.service';
-import { InfoTabService } from '../workflow/info-tab/info-tab.service';
 import { WorkflowModule } from '../shared/modules/workflow.module';
 
 describe('SourceFileTabsService', () => {
@@ -26,7 +19,6 @@ describe('SourceFileTabsService', () => {
         { provide: WorkflowsService, useClass: WorkflowsStubService },
         { provide: DescriptorTypeCompatService, useClass: DescriptorTypeCompatStubService },
         { provide: DescriptorLanguageService, useClass: DescriptorLanguageService },
-        { provide: InfoTabService, useClass: InfoTabServiceStub },
         { provide: ProviderService, useClass: ProviderStubService },
       ],
     })

src/app/source-file-tabs/source-file-tabs.service.ts

@@ -6,8 +6,6 @@ import { SourceFile, ToolDescriptor, WorkflowsService, WorkflowVersion } from 'a
 import { Validation } from 'app/shared/swagger';
 import { Observable } from 'rxjs';
 import { ga4ghWorkflowIdPrefix } from '../shared/constants';
-import { EntryType } from '../shared/enum/entry-type';
-import { InfoTabService } from '../workflow/info-tab/info-tab.service';
 
 @Injectable({
   providedIn: 'root',
@@ -17,8 +15,7 @@ export class SourceFileTabsService {
     private workflowsService: WorkflowsService,
     private fileService: FileService,
     private descriptorTypeCompatService: DescriptorTypeCompatService,
-    private descriptorLanguageService: DescriptorLanguageService,
-    private infoTabService: InfoTabService
+    private descriptorLanguageService: DescriptorLanguageService
   ) {}
 
   /**
@@ -131,19 +128,9 @@ export class SourceFileTabsService {
     const id = ga4ghWorkflowIdPrefix + fileId;
     return this.fileService.getDownloadFilePath(id, versionName, type, relativePath);
   }
-  getPrimaryPath(
-    path: string,
-    versionName: string,
-    descriptorType: ToolDescriptor.TypeEnum,
-    descriptorPath: string,
-    entryType: EntryType
-  ): string[] {
+  getPrimaryPaths(descriptorType: ToolDescriptor.TypeEnum, descriptorPath: string): string[] {
     const primaryPath = [];
-    primaryPath.push(this.infoTabService.getPrimaryPath(path, versionName, descriptorType, descriptorPath, entryType));
-    if (descriptorType === 'NFL') {
-      primaryPath.push('main.nf');
-      primaryPath.push('/main.nf');
-    }
+    primaryPath.push(descriptorPath);
     return primaryPath;
   }
 }

src/app/test/service-stubs.ts

@@ -86,13 +86,7 @@ export class SourceFileTabsStubService {
   isPrimaryDescriptor(path): boolean {
     return false;
   }
-  getPrimaryPath(
-    path: string,
-    versionName: string,
-    descriptorType: ToolDescriptor.TypeEnum,
-    descriptorPath: string,
-    entryType: EntryType
-  ): string[] {
+  getPrimaryPaths(descriptorType: ToolDescriptor.TypeEnum, descriptorPath: string): string[] {
     return [];
   }
 }

src/app/workflow/info-tab/info-tab.service.ts

@@ -224,10 +224,7 @@ export class InfoTabService {
       descriptorPath
     );
   }
-  getPrimaryPath(path: string, versionName: string, descriptorType: string, descriptorPath: string, entryType: EntryType): string {
-    const TRSLink = this.getTRSLink(path, versionName, descriptorType, descriptorPath, entryType);
-    return TRSLink.split('/descriptor/', 2)[1];
-  }
+
   getTRSId(workflow: Workflow | undefined, entryType: EntryType): string {
     if (!workflow) {
       return '';

src/styles.scss

@@ -933,12 +933,6 @@ app-workflow-sidebar-accordion
   background-color: mat.get-color-from-palette($kim-primary, 3);
   margin: 0 1.25rem;
 }
-.primary-bubble {
-  color: white !important;
-  background-color: mat.get-color-from-palette($kim-primary, 3);
-  margin-left: 1.5rem;
-  height: 100% !important;
-}
 
 // Remove any default link styling from a bubble, and ensure the font-weight is correct.
 a.bubble,