improve search result presentation

https://ucsc-cgl.atlassian.net/browse/SEAB-6696
dockstore · Oct 7, 2024 · 3683f63 · 3683f63
1 parent b88e89e
commit 3683f63
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 97 deletions.
diff --git a/cypress/e2e/smokeTests/sharedTests/basic-enduser.ts b/cypress/e2e/smokeTests/sharedTests/basic-enduser.ts
@@ -141,9 +141,6 @@ describe('Test search page functionality', () => {
     cy.url().should('contain', 'verified=1');
     cy.get('[data-cy=workflowColumn] a');
     cy.contains('mat-checkbox', /^[ ]*verified/);
-    cy.get('[data-cy=verificationStatus] a').each(($el, index, $list) => {
-      cy.wrap($el).contains('done');
-    });
   });
 });
 

diff --git a/src/app/search/search-entry-table.ts b/src/app/search/search-entry-table.ts
@@ -32,7 +32,7 @@ export abstract class SearchEntryTable extends Base implements OnInit {
   protected verifiedLink: string;
   protected ngUnsubscribe: Subject<{}> = new Subject();
 
-  public readonly displayedColumns = ['name', 'verified', 'all_authors', 'descriptorType', 'projectLinks', 'starredUsers'];
+  public readonly displayedColumns = ['name', 'all_authors', 'descriptorType', 'starredUsers'];
   public readonly columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
   public readonly searchEverythingFriendlyNames = new Map([
     ['full_workflow_path', 'Path'],

diff --git a/src/app/search/search-notebook-table/search-notebook-table.component.html b/src/app/search/search-notebook-table/search-notebook-table.component.html
@@ -4,37 +4,33 @@
   </div>
   <mat-table [hidden]="!dataSource" [dataSource]="dataSource" matSort data-cy="search-notebook-results-table" multiTemplateDataRows>
     <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name and Description</mat-header-cell>
       <mat-cell data-cy="notebookColumn" *matCellDef="let notebook">
         <div>
+          <img src="../../../../assets/svg/notebook-circle.svg" class="mr-2_5 site-icons-small" alt="notebook icon" />
           <a [matTooltip]="notebook?.source.full_workflow_path" [routerLink]="'/notebooks/' + notebook?.source.full_workflow_path">{{
             notebook?.source.organization +
               '/' +
               notebook?.source.repository +
               (notebook?.source.workflowName ? '/' + notebook?.source.workflowName : '')
           }}</a>
-          <div class="truncate-text-2">
+          <div class="truncate-text-3">
             <app-ai-bubble
               *ngIf="notebook?.source.topicSelection === TopicSelectionEnum.AI && !notebook?.source.approvedAITopic"
               [isPublic]="true"
             ></app-ai-bubble>
-            <span class="size-small" [matTooltip]="notebook?.source.topicAutomatic" matTooltipPosition="left">{{
-              notebook?.source.topicAutomatic
-            }}</span>
+            <span [matTooltip]="notebook?.source.topicAutomatic" matTooltipPosition="left">{{ notebook?.source.topicAutomatic }}</span>
           </div>
         </div>
       </mat-cell>
     </ng-container>
     <ng-container matColumnDef="all_authors">
       <mat-header-cell fxShow fxHide.lt-sm *matHeaderCellDef mat-sort-header>Author</mat-header-cell>
-      <mat-cell
-        fxShow
-        fxHide.lt-sm
-        class="duration-cell truncate-text-2"
-        *matCellDef="let notebook"
-        [matTooltip]="notebook?.source.all_authors | getSearchAuthorsHtml: false"
-        [innerHTML]="notebook?.source.all_authors | getSearchAuthorsHtml"
-      ></mat-cell>
+      <mat-cell fxShow fxHide.lt-sm *matCellDef="let notebook" [matTooltip]="notebook?.source.all_authors | getSearchAuthorsHtml: false">
+        <div class="truncate-text-3 size-small">
+          <span [innerHTML]="notebook?.source?.all_authors | getSearchAuthorsHtml"></span>
+        </div>
+      </mat-cell>
     </ng-container>
     <ng-container matColumnDef="descriptorType">
       <mat-header-cell fxShow fxHide.lt-sm data-cy="descriptorTypeHeader" *matHeaderCellDef mat-sort-header>Format</mat-header-cell>
@@ -54,19 +50,11 @@
         </div>
       </mat-cell>
     </ng-container>
-    <ng-container matColumnDef="projectLinks">
-      <mat-header-cell fxShow fxHide.lt-md *matHeaderCellDef>Links</mat-header-cell>
-      <mat-cell fxShow fxHide.lt-md *matCellDef="let entry">
-        <a [href]="entry?.source.providerUrl" *ngIf="entry?.source.providerUrl">
-          <fa-icon class="fa-lg" [icon]="entry.source.providerIcon" [matTooltip]="entry?.source.provider"></fa-icon>
-        </a>
-      </mat-cell>
-    </ng-container>
     <ng-container matColumnDef="starredUsers">
       <mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Stars</mat-header-cell>
-      <mat-cell class="description-cell" *matCellDef="let notebook"
-        >{{ !notebook?.source.starredUsers || notebook?.source.starredUsers.length === 0 ? '' : notebook?.source.starredUsers?.length }}
-        <mat-icon class="star-icon" *ngIf="notebook?.source.starredUsers?.length > 0">star_rate</mat-icon>
+      <mat-cell class="starred-cell weight-bold" *matCellDef="let notebook"
+        ><mat-icon class="star-icon" *ngIf="notebook?.source.starredUsers?.length > 0">star_rate</mat-icon>
+        {{ !notebook?.source.starredUsers || notebook?.source.starredUsers.length === 0 ? '' : notebook?.source.starredUsers.length }}
       </mat-cell>
     </ng-container>
     <!-- Search highlighting column - this row is made up of this one column that spans across all columns -->

diff --git a/src/app/search/search-notebook-table/search-notebook-table.component.scss b/src/app/search/search-notebook-table/search-notebook-table.component.scss
@@ -1,9 +1,9 @@
 .mat-column-descriptorType {
-  max-width: 90px;
+  max-width: 10rem;
 }
 
-.mat-column-projectLinks {
-  max-width: 80px;
+.mat-column-descriptorTypeSubclass {
+  max-width: 10rem;
 }
 
 td.mat-cell {

diff --git a/src/app/search/search-notebook-table/search-notebook-table.component.ts b/src/app/search/search-notebook-table/search-notebook-table.component.ts
@@ -65,7 +65,7 @@ import TopicSelectionEnum = Workflow.TopicSelectionEnum;
   ],
 })
 export class SearchNotebookTableComponent extends SearchEntryTable implements OnInit {
-  public readonly displayedColumns = ['name', 'all_authors', 'descriptorType', 'descriptorTypeSubclass', 'projectLinks', 'starredUsers'];
+  public readonly displayedColumns = ['name', 'all_authors', 'descriptorType', 'descriptorTypeSubclass', 'starredUsers'];
   readonly entryType = 'notebook';
   public dataSource: MatTableDataSource<SearchResult<Notebook>>;
   constructor(dateService: DateService, searchQuery: SearchQuery, searchService: SearchService) {

diff --git a/src/app/search/search-tool-table/search-tool-table.component.html b/src/app/search/search-tool-table/search-tool-table.component.html
@@ -23,10 +23,11 @@
       <!-- the wrap causes slightly odd behavior with the mat-icon but is needed for the topic -->
       <mat-cell data-cy="toolNames" *matCellDef="let tool">
         <div>
+          <img src="../../../../assets/svg/tool-circle.svg" class="mr-2_5 site-icons-small" alt="tool icon" />
           <span *ngIf="tool?.source.private_access">
             <app-private-icon></app-private-icon>
           </span>
-          <div *ngIf="tool.source | isAppTool; else docktoreToolName">
+          <span *ngIf="tool.source | isAppTool; else docktoreToolName">
             <a
               [matTooltip]="tool?.source.full_workflow_path"
               matTooltipPosition="left"
@@ -38,42 +39,29 @@
                   (tool?.source.workflowName ? '/' + tool?.source.workflowName : '')
               }}</a
             >
-          </div>
+          </span>
           <ng-template #docktoreToolName>
             <a [matTooltip]="tool?.source.tool_path" matTooltipPosition="left" [routerLink]="'/containers/' + tool.source.tool_path">{{
               tool?.source.namespace + '/' + tool?.source.name + (tool?.source.toolname ? '/' + tool?.source.toolname : '')
             }}</a>
           </ng-template>
-          <div class="truncate-text-2">
+          <div class="truncate-text-3">
             <app-ai-bubble
               *ngIf="tool?.source.topicSelection === TopicSelectionEnum.AI && !tool?.source.approvedAITopic"
               [isPublic]="true"
             ></app-ai-bubble>
-            <span class="size-small" [matTooltip]="tool?.source.topicAutomatic" matTooltipPosition="left">{{
-              tool?.source.topicAutomatic
-            }}</span>
+            <span [matTooltip]="tool?.source.topicAutomatic" matTooltipPosition="left">{{ tool?.source.topicAutomatic }}</span>
           </div>
         </div>
       </mat-cell>
     </ng-container>
-    <ng-container matColumnDef="verified">
-      <mat-header-cell fxShow fxHide.lt-md *matHeaderCellDef>Verified</mat-header-cell>
-      <mat-cell fxShow fxHide.lt-md *matCellDef="let tool">
-        <a *ngIf="tool.source.verified" [href]="verifiedLink">
-          <mat-icon matTooltip="Verified">check</mat-icon>
-        </a>
-      </mat-cell>
-    </ng-container>
     <ng-container matColumnDef="all_authors">
       <mat-header-cell fxShow fxHide.lt-sm *matHeaderCellDef mat-sort-header>Author</mat-header-cell>
-      <mat-cell
-        fxShow
-        fxHide.lt-sm
-        class="duration-cell truncate-text-2"
-        *matCellDef="let tool"
-        [matTooltip]="tool?.source.all_authors | getSearchAuthorsHtml: false"
-        [innerHTML]="tool?.source.all_authors | getSearchAuthorsHtml"
-      ></mat-cell>
+      <mat-cell fxShow fxHide.lt-sm *matCellDef="let tool" [matTooltip]="tool?.source.all_authors | getSearchAuthorsHtml: false">
+        <div class="truncate-text-3 size-small">
+          <span [innerHTML]="tool?.source.all_authors | getSearchAuthorsHtml"></span>
+        </div>
+      </mat-cell>
     </ng-container>
     <ng-container matColumnDef="descriptorType" style="width: fit-content">
       <mat-header-cell fxShow fxHide.lt-sm *matHeaderCellDef mat-sort-header fxFlex="15%">Format</mat-header-cell>
@@ -92,18 +80,6 @@
         </ng-template>
       </mat-cell>
     </ng-container>
-    <ng-container matColumnDef="projectLinks">
-      <mat-header-cell fxShow fxHide.lt-md *matHeaderCellDef>Links</mat-header-cell>
-      <mat-cell fxShow fxHide.lt-md *matCellDef="let tool">
-        <a [href]="tool?.source.providerUrl" *ngIf="tool?.source.providerUrl">
-          <fa-icon class="fa-lg" [icon]="tool.source.providerIcon" [matTooltip]="tool?.source.provider"></fa-icon>
-        </a>
-        &nbsp; &nbsp;
-        <a [href]="tool?.source.imgProviderUrl" *ngIf="tool?.source.imgProviderUrl">
-          <fa-icon class="fa-lg" [icon]="tool.source.imgProviderIcon" [matTooltip]="tool?.source.imgProvider"></fa-icon>
-        </a>
-      </mat-cell>
-    </ng-container>
     <ng-container matColumnDef="starredUsers">
       <mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Stars</mat-header-cell>
       <mat-cell class="description-cell" *matCellDef="let tool"

diff --git a/src/app/search/search-workflow-table/search-workflow-table.component.html b/src/app/search/search-workflow-table/search-workflow-table.component.html
@@ -7,6 +7,7 @@
       <mat-header-cell *matHeaderCellDef mat-sort-header>Name and Description</mat-header-cell>
       <mat-cell data-cy="workflowColumn" *matCellDef="let workflow">
         <div>
+          <img src="../../../../assets/svg/workflow-circle.svg" class="mr-2_5 site-icons-small" alt="workflow icon" />
           <a
             [matTooltip]="workflow?.source.full_workflow_path"
             matTooltipPosition="left"
@@ -18,36 +19,23 @@
                 (workflow?.source.workflowName ? '/' + workflow?.source.workflowName : '')
             }}</a
           >
-          <div class="truncate-text-2">
+          <div class="truncate-text-3">
             <app-ai-bubble
               *ngIf="workflow?.source.topicSelection === TopicSelectionEnum.AI && !workflow?.source.approvedAITopic"
               [isPublic]="true"
             ></app-ai-bubble>
-            <span class="size-small" [matTooltip]="workflow?.source.topicAutomatic" matTooltipPosition="left">{{
-              workflow?.source.topicAutomatic
-            }}</span>
+            <span [matTooltip]="workflow?.source.topicAutomatic" matTooltipPosition="left">{{ workflow?.source.topicAutomatic }}</span>
           </div>
         </div>
       </mat-cell>
     </ng-container>
-    <ng-container matColumnDef="verified">
-      <mat-header-cell fxShow fxHide.lt-md *matHeaderCellDef>Verified</mat-header-cell>
-      <mat-cell data-cy="verificationStatus" fxShow fxHide.lt-md *matCellDef="let workflow">
-        <a *ngIf="workflow.source.verified" [href]="verifiedLink">
-          <mat-icon matTooltip="Verified">done</mat-icon>
-        </a>
-      </mat-cell>
-    </ng-container>
     <ng-container matColumnDef="all_authors">
       <mat-header-cell fxShow fxHide.lt-sm *matHeaderCellDef mat-sort-header>Author</mat-header-cell>
-      <mat-cell
-        fxShow
-        fxHide.lt-sm
-        class="duration-cell truncate-text-2"
-        *matCellDef="let workflow"
-        [matTooltip]="workflow?.source?.all_authors | getSearchAuthorsHtml: false"
-        [innerHTML]="workflow?.source?.all_authors | getSearchAuthorsHtml"
-      ></mat-cell>
+      <mat-cell fxShow fxHide.lt-sm *matCellDef="let workflow" [matTooltip]="workflow?.source?.all_authors | getSearchAuthorsHtml: false">
+        <div class="truncate-text-3 size-small">
+          <span [innerHTML]="workflow?.source?.all_authors | getSearchAuthorsHtml"></span>
+        </div>
+      </mat-cell>
     </ng-container>
     <ng-container matColumnDef="descriptorType">
       <mat-header-cell fxShow fxHide.lt-sm data-cy="descriptorTypeHeader" *matHeaderCellDef mat-sort-header>Format</mat-header-cell>
@@ -57,19 +45,11 @@
         </div>
       </mat-cell>
     </ng-container>
-    <ng-container matColumnDef="projectLinks">
-      <mat-header-cell fxShow fxHide.lt-md *matHeaderCellDef>Links</mat-header-cell>
-      <mat-cell fxShow fxHide.lt-md *matCellDef="let entry">
-        <a [href]="entry?.source.providerUrl" *ngIf="entry?.source.providerUrl">
-          <fa-icon class="fa-lg" [icon]="entry.source.providerIcon" [matTooltip]="entry?.source.provider"></fa-icon>
-        </a>
-      </mat-cell>
-    </ng-container>
     <ng-container matColumnDef="starredUsers">
       <mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Stars</mat-header-cell>
       <mat-cell class="starred-cell weight-bold" *matCellDef="let workflow"
         ><mat-icon class="star-icon" *ngIf="workflow?.source.starredUsers?.length > 0">star_rate</mat-icon>
-        {{ !workflow?.source.starredUsers || workflow?.source.starredUsers.length === 0 ? '' : workflow?.source.starredUsers?.length }}
+        {{ !workflow?.source.starredUsers || workflow?.source.starredUsers.length === 0 ? '' : workflow?.source.starredUsers.length }}
       </mat-cell>
     </ng-container>
 

diff --git a/src/app/search/search.component.scss b/src/app/search/search.component.scss
@@ -24,6 +24,10 @@ mat-tab-group.homeComponent {
   color: $header-color;
 }
 
+.hits {
+  line-height: 1.8;
+}
+
 .sidebar {
   position: fixed;
   top: 0;

diff --git a/src/app/shared/styles/entry-table.scss b/src/app/shared/styles/entry-table.scss
@@ -5,15 +5,15 @@
 .mat-column-starredUsers,
 .mat-column-stars {
   max-width: 6rem;
-  justify-content: flex-end;
   color: mat.get-color-from-palette($dockstore-app-accent-1, darker);
 }
 
 .mat-column-all_authors {
-  max-width: 20rem;
+  max-width: 16rem;
 }
 
 .mat-column-descriptorType,
+.mat-column-descriptorTypeSubclass,
 .mat-column-format {
   min-width: min-content;
   max-width: 14rem;

diff --git a/src/styles.scss b/src/styles.scss
@@ -1436,3 +1436,7 @@ app-ai-bubble {
 .gray-caption {
   color: mat.get-color-from-palette($kim-gray, 2);
 }
+
+.mr-2_5 {
+  margin-right: 0.75rem;
+}