PR feedback

dockstore · Jan 22, 2025 · 42514b9 · 42514b9
1 parent 602d160
commit 42514b9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 30 deletions.
diff --git a/src/app/search/search-entry-table.component.html b/src/app/search/search-entry-table.component.html
@@ -41,7 +41,7 @@
     <ng-container matColumnDef="name">
       <mat-header-cell *matHeaderCellDef></mat-header-cell>
       <mat-cell data-cy="entryColumn" *matCellDef="let entry">
-        <mat-card fxLayout="column" fxLayoutGap="0.3rem" class="w-100">
+        <mat-card fxLayout="column" fxLayoutGap="0.5rem" class="w-100">
           <div fxLayout="row" fxLayoutAlign="space-between">
             <div>
               <img
@@ -56,39 +56,47 @@
                 >{{ entry?.source | entryToDisplayName: true }}</a
               >
             </div>
-            <div *ngIf="entry?.source.starredUsers?.length" class="star-color weight-bold" data-cy="starredUsers">
+            <div *ngIf="entry?.source.starredUsers?.length" data-cy="starredUsers" class="star-color">
               <mat-icon class="mat-icon-sm">star_rate</mat-icon>
-              <span>{{ entry?.source.starredUsers.length }}</span>
+              <span class="weight-bold align-middle">{{ entry?.source.starredUsers.length }}</span>
             </div>
           </div>
-          <div>
+          <div class="single-spaced">
             <span>{{ entry?.source.topicAutomatic }}</span>
             <app-ai-bubble
               *ngIf="entry?.source.topicSelection === TopicSelectionEnum.AI && !entry?.source.approvedAITopic"
               [isPublic]="true"
             ></app-ai-bubble>
           </div>
-          <!-- Fix this in the webservice so that it's not possible to have an array with a null value -->
-          <div *ngIf="entry?.source?.all_authors" class="truncate-text-3 size-small">
-            <mat-icon class="info-icon">account_circle</mat-icon
-            ><span [innerHTML]="entry?.source?.all_authors | getSearchAuthorsHtml"></span>
-          </div>
 
           <!-- Search highlighting results-->
-          <div *ngIf="entry.highlight" class="my-4">
-            <table class="size-small">
+          <div *ngIf="entry.highlight">
+            <table class="search-highlighting size-small">
               <tr *ngFor="let highlight of entry.highlight | keyvalue">
                 <th>{{ this.searchEverythingFriendlyNames.get(highlight.key.toString()) }}:</th>
-                <td><span [innerHTML]="highlight.value | joinWithEllipses"></span></td>
+                <td class="single-spaced"><span [innerHTML]="highlight.value | joinWithEllipses"></span></td>
               </tr>
             </table>
           </div>
 
-          <div fxLayout="row" fxLayoutAlign="space-between">
-            <div>
-              <span class="size-small mr-2"
+          <div fxLayout="row wrap" fxLayoutGap="1rem">
+            <!-- Fix this in the webservice so that it's not possible to have an array with a null value -->
+            <span *ngIf="entry?.source?.all_authors">
+              <mat-icon color="primary" class="mat-icon-sm mr-1">person</mat-icon
+              ><span class="size-small" [innerHTML]="entry?.source?.all_authors | getSearchAuthorsHtml"></span>
+            </span>
+            <span>
+              <mat-icon color="primary" class="mat-icon-sm mr-1">history</mat-icon>
+              <span class="size-small"
                 >Last updated {{ entry?.source.last_modified_date ? (entry?.source.last_modified_date | date) : 'n/a' }}</span
               >
+            </span>
+            <app-doi-badge
+              *ngIf="entry?.source?.selected_concept_doi"
+              [doi]="entry.source.selected_concept_doi"
+              [displayInitiator]="false"
+            ></app-doi-badge>
+            <span>
               <mat-chip-list *ngIf="entry?.source.categories.length" class="bubble-list">
                 <app-category-button
                   *ngFor="let category of entry?.source.categories"
@@ -97,7 +105,7 @@
                 ></app-category-button>
               </mat-chip-list>
               <span data-cy="descriptorType">
-                <span *ngIf="entry?.source.entryTypeMetadata.type !== EntryType.TOOL" class="nonclick-badge mr-2">{{
+                <span *ngIf="entry?.source.entryTypeMetadata.type !== EntryType.TOOL" class="nonclick-badge">{{
                   entry?.source.descriptorType | descriptorLanguage
                 }}</span>
                 <span *ngIf="entry?.source.entryTypeMetadata.type === EntryType.TOOL">
@@ -106,19 +114,13 @@
                   </span>
                 </span>
               </span>
-
               <span
                 *ngIf="entry?.source.entryTypeMetadata.type === EntryType.NOTEBOOK"
-                class="nonclick-badge"
+                class="nonclick-badge ml-2"
                 data-cy="descriptorTypeSubclass"
                 >{{ entry?.source.descriptorTypeSubclass }}</span
               >
-            </div>
-            <app-doi-badge
-              *ngIf="entry?.source?.selected_concept_doi"
-              [doi]="entry.source.selected_concept_doi"
-              [displayInitiator]="false"
-            ></app-doi-badge>
+            </span>
           </div>
         </mat-card>
       </mat-cell>

diff --git a/src/app/search/search-entry-table.component.scss b/src/app/search/search-entry-table.component.scss
@@ -36,9 +36,22 @@
   color: $header-color;
 }
 
+.mat-icon-sm {
+  vertical-align: text-bottom;
+}
+
 ::ng-deep .sort-by {
   .mat-form-field-wrapper {
     // Removing the padding because we don't need hint
     padding-bottom: 0;
   }
 }
+
+.mat-cell {
+  overflow: visible; // Needed so the mat-card's box-shadow is displayed
+}
+
+.search-highlighting {
+  border-collapse: separate;
+  border-spacing: 1rem;
+}
diff --git a/src/app/search/search-entry-table.component.ts b/src/app/search/search-entry-table.component.ts
@@ -134,8 +134,8 @@ export class SearchEntryTableComponent extends Base implements OnInit {
   public sortOptions: SortOption[] = [
     this.defaultSortOption,
     {
-      label: 'Least Stars',
-      sort: { active: 'starredUsers', direction: 'asc' },
+      label: 'Recently Updated',
+      sort: { active: 'last_modified_date', direction: 'desc' },
     },
     {
       label: 'Name, A-Z',

diff --git a/src/app/shared/styles/entry-table.scss b/src/app/shared/styles/entry-table.scss
@@ -48,7 +48,3 @@ th {
   white-space: nowrap;
   vertical-align: top;
 }
-
-.mat-cell {
-  overflow: visible; // Needed so the mat-card's box-shadow is displayed
-}