Dataset details table headers improvements (GSI-1967) (#232)

* Moved heading calculation to table component
Changed the text of heading
Added tooltip for downloading the metadata

* Fixed e2e tests

* Added rudimentary mechanism to hide the tooltip after hovering on the expansion panel header

* Implemented improved hover mechanism

* Bump version

Author: ac-jorellanaf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-portal",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/metadata/features/dataset-details-table/dataset-details-table.html

@@ -1,5 +1,13 @@
 <mat-expansion-panel>
-  <mat-expansion-panel-header>{{ header() }}</mat-expansion-panel-header
+  <mat-expansion-panel-header
+    matTooltip="Download the full metadata to view all properties"
+    matTooltipPosition="above"
+    matTooltipShowDelay="500"
+    matTooltipPositionAtOrigin="true"
+    [matTooltipDisabled]="tooltipDisabled()"
+    (mouseenter)="startHoverHeader()"
+    (mouseleave)="endHoverHeader()"
+    >{{ header() }}</mat-expansion-panel-header
   ><ng-template matExpansionPanelContent
     ><div class="overflow-auto">
       <table
@@ -9,43 +17,45 @@
         matSort
       >
         <caption class="cdk-visually-hidden">
-          {{ caption() }}
+          {{
+            caption()
+          }}
         </caption>
-        @for (col of columns(); track col){
-        <ng-container [matColumnDef]="col.columnDef">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header [class]="col.class">
-            {{col.header}}
-          </th>
-          @if (col.columnDef === 'hash') {
-          <td mat-cell *matCellDef="let item">
-            <app-with-copy-button
-              [value]="item.file_information?.sha256_hash"
-              notifyMessage="The full hash has been copied to the clipboard"
-            ></app-with-copy-button>
-          </td>
-          } @else {
-          <td mat-cell *matCellDef="let item">
-            {{col.columnDef | detailsDataRenderer: item : col.accessor :
-            storageLabels()}}
-          </td>
-          }
-        </ng-container>
+        @for (col of columns(); track col) {
+          <ng-container [matColumnDef]="col.columnDef">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header [class]="col.class">
+              {{ col.header }}
+            </th>
+            @if (col.columnDef === 'hash') {
+              <td mat-cell *matCellDef="let item">
+                <app-with-copy-button
+                  [value]="item.file_information?.sha256_hash"
+                  notifyMessage="The full hash has been copied to the clipboard"
+                ></app-with-copy-button>
+              </td>
+            } @else {
+              <td mat-cell *matCellDef="let item">
+                {{
+                  col.columnDef
+                    | detailsDataRenderer: item : col.accessor : storageLabels()
+                }}
+              </td>
+            }
+          </ng-container>
         }
 
         <tr mat-header-row *matHeaderRowDef="displayCols()"></tr>
         <tr mat-row *matRowDef="let row; columns: displayCols()"></tr>
       </table>
 
       @if (numItems() > 10) {
-      <mat-paginator
-        [pageSize]="defaultTablePageSize"
-        [pageSizeOptions]="tablePageSizeOptions"
-        showFirstLastButtons
-        aria-label="Select page"
-        class="sticky left-0"
-      >
-      </mat-paginator>
-      }
-    </div></ng-template
-  ></mat-expansion-panel
->
+        <mat-paginator
+          [pageSize]="defaultTablePageSize"
+          [pageSizeOptions]="tablePageSizeOptions"
+          showFirstLastButtons
+          aria-label="Select page"
+          class="sticky left-0"
+        >
+        </mat-paginator>
+      }</div></ng-template
+></mat-expansion-panel>

src/app/metadata/features/dataset-details-table/dataset-details-table.ts

@@ -12,20 +12,23 @@ import {
   inject,
   input,
   QueryList,
+  signal,
   ViewChild,
   ViewChildren,
 } from '@angular/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatTooltip } from '@angular/material/tooltip';
 import {
   datasetDetailsTableColumns,
   dataSortingDataAccessor,
 } from '@app/metadata/models/dataset-details-table';
 import { DetailsDataRendererPipe } from '@app/metadata/pipes/details-data-renderer-pipe';
 import { WellKnownValueService } from '@app/metadata/services/well-known-value';
 import { WithCopyButton } from '@app/shared/features/with-copy-button/with-copy-button';
+import { ParseBytes } from '@app/shared/pipes/parse-bytes-pipe';
 
 /**
  * Component for the dataset details table
@@ -39,14 +42,50 @@ import { WithCopyButton } from '@app/shared/features/with-copy-button/with-copy-
     MatPaginatorModule,
     MatSortModule,
     WithCopyButton,
+    MatTooltip,
   ],
   templateUrl: './dataset-details-table.html',
   styleUrl: './dataset-details-table.scss',
 })
 export class DatasetDetailsTableComponent implements AfterViewInit {
-  tableName = input.required<string>();
+  tableName = input.required<'experiments' | 'samples' | 'files'>();
   data = input.required<any[]>();
-  header = input.required<string>();
+
+  protected header = computed(() => {
+    let header = `List of ${this.tableName()} (${this.numItems()} total`;
+    if (this.tableName() === 'files') {
+      const totalBytes = this.data().reduce(
+        (acc, file) => acc + (file.file_information?.size ?? 0),
+        0,
+      );
+      header = `${header}, ${ParseBytes.prototype.transform(totalBytes)}`;
+    }
+    return `${header})`;
+  });
+
+  protected tooltipDisabled = signal(false);
+
+  #hoverHeaderTime: number = 0;
+
+  /**
+   * When entering the tooltip, memorize start time
+   */
+  startHoverHeader(): void {
+    this.#hoverHeaderTime = Date.now();
+  }
+
+  /**
+   * After leaving the tooltip, disable if it was shown long enough
+   */
+  endHoverHeader(): void {
+    if (Date.now() - this.#hoverHeaderTime < 1000) return;
+    const key = `hint.${this.tableName()}.details.shown`;
+    if (!sessionStorage.getItem(key)) {
+      sessionStorage.setItem(key, 'true');
+      this.tooltipDisabled.set(true);
+    }
+    this.#hoverHeaderTime = 0;
+  }
 
   protected numItems = computed(() => this.data().length);
 
@@ -95,5 +134,8 @@ export class DatasetDetailsTableComponent implements AfterViewInit {
     this.matPaginators.changes.subscribe(() => {
       if (this.paginator) this.dataSource.paginator = this.paginator;
     });
+
+    const key = `hint.${this.tableName()}.details.shown`;
+    if (sessionStorage.getItem(key)) this.tooltipDisabled.set(true);
   }
 }

src/app/metadata/features/dataset-details/dataset-details.html

@@ -275,19 +275,16 @@ <h2 class="inline-flex items-center text-2xl">
         <app-dataset-details-table
           tableName="experiments"
           [data]="experiments()"
-          [header]="experimentsHeader()"
         ></app-dataset-details-table>
 
         <app-dataset-details-table
           tableName="samples"
           [data]="samples()"
-          [header]="samplesHeader()"
         ></app-dataset-details-table>
 
         <app-dataset-details-table
           tableName="files"
           [data]="files()"
-          [header]="filesHeader()"
         ></app-dataset-details-table>
       </div>
     }

src/app/metadata/features/dataset-details/dataset-details.ts

@@ -32,7 +32,6 @@ import { ValidateDOI } from '@app/metadata/pipes/validate-doi-pipe';
 import { DatasetInformationService } from '@app/metadata/services/dataset-information';
 import { MetadataService } from '@app/metadata/services/metadata';
 import { WellKnownValueService } from '@app/metadata/services/well-known-value';
-import { ParseBytes } from '@app/shared/pipes/parse-bytes-pipe';
 import { UnderscoreToSpace } from '@app/shared/pipes/underscore-to-space-pipe';
 import { ConfigService } from '@app/shared/services/config';
 import { NavigationTrackingService } from '@app/shared/services/navigation';
@@ -163,19 +162,6 @@ export class DatasetDetailsComponent implements OnInit {
     this.files().reduce((acc, file) => acc + (file.file_information?.size ?? 0), 0),
   );
 
-  experimentsHeader = computed(
-    () =>
-      `Experiments Summary (${this.numExperiments()} experiment${this.numExperiments() === 1 ? '' : 's'})`,
-  );
-  samplesHeader = computed(
-    () =>
-      `Samples Summary (${this.numSamples()} sample${this.numSamples() === 1 ? '' : 's'})`,
-  );
-  filesHeader = computed(
-    () =>
-      `Files Summary (${this.numFiles()} file${this.numFiles() === 1 ? '' : 's'}, ${ParseBytes.prototype.transform(this.numBytes())} in total)`,
-  );
-
   #datasetDetailsErrorEffect = effect(() => {
     if (this.#datasetDetails.error()) {
       this.#notify.showError('Error fetching dataset details.');

tests/browse.spec.ts

@@ -63,15 +63,15 @@ test('can navigate to dataset details', async ({ page }) => {
   await expect(main).toContainText('Test dataset with some details for testing.');
 
   await expect(main).toContainText('Test study description.');
-  await expect(main).toContainText('Files Summary (12 files, 6.16 GB in total)');
+  await expect(main).toContainText('List of files (12 total, 6.16 GB)');
 
   // files table should not yet be visible
   await expect(main).not.toContainText('File ID');
   await expect(main).not.toContainText('GHGAF12345678901243');
   await expect(main).not.toContainText('Research data file 3');
   await expect(main).not.toContainText('Tübingen 3');
 
-  const openFile = main.getByRole('button', { name: 'Files Summary' });
+  const openFile = main.getByRole('button', { name: 'List of files' });
   await expect(openFile).toBeVisible();
   await openFile.click();