Fix mouseover in collapsed summaries (#271)

Author: Cito

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

@@ -1,13 +1,5 @@
 <mat-expansion-panel>
-  <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
+  <mat-expansion-panel-header>{{ header() }}</mat-expansion-panel-header
   ><ng-template matExpansionPanelContent
     ><div class="overflow-auto">
       @if (data().length > 0 || filterValue()) {

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

@@ -24,7 +24,6 @@ import { MatInputModule } from '@angular/material/input';
 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,
@@ -50,7 +49,6 @@ import { ParseBytes } from '@app/shared/pipes/parse-bytes-pipe';
     MatPaginatorModule,
     MatSortModule,
     WithCopyButton,
-    MatTooltip,
   ],
   templateUrl: './dataset-details-table.html',
   styleUrl: './dataset-details-table.scss',
@@ -71,11 +69,8 @@ export class DatasetDetailsTableComponent implements AfterViewInit {
     return `${header})`;
   });
 
-  protected tooltipDisabled = signal(false);
   protected filterValue = signal('');
 
-  #hoverHeaderTime: number = 0;
-
   /**
    * Apply filter to the data source
    * @param event The input event
@@ -97,26 +92,6 @@ export class DatasetDetailsTableComponent implements AfterViewInit {
     this.dataSource.filter = '';
   }
 
-  /**
-   * 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);
 
   protected columns = computed(() =>
@@ -164,8 +139,5 @@ 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

@@ -101,9 +101,14 @@ <h2 class="flex items-center text-2xl sm:inline-flex">
                   ><mat-icon inline fontIcon="book_2"></mat-icon></span
                 ><span>Study</span>
               </h2>
-              <p class="text-base"><strong>ID: </strong>
-                <a routerLink="/study/{{ study().accession }}"
-                  data-umami-event="Dataset Details Study Accession Clicked">{{ study().accession }}</a></p>
+              <p class="text-base"
+                ><strong>ID: </strong>
+                <a
+                  routerLink="/study/{{ study().accession }}"
+                  data-umami-event="Dataset Details Study Accession Clicked"
+                  >{{ study().accession }}</a
+                ></p
+              >
               @if (study().ega_accession) {
                 <p class="text-base">
                   <strong>EGA ID:</strong> {{ study().ega_accession }}
@@ -268,13 +273,16 @@ <h2 class="inline-flex items-center text-2xl">
                 [text]="dap().policy_text"
                 pClasses="text-base"
                 label="Policy"
-              />
-            </div></div
+              /> </div></div
         ></mat-tab>
       </mat-tab-group>
 
       <hr class="mb-6" />
 
+      <h2 class="mb-4 text-base"
+        >Content overview (download the full metadata to view all properties):</h2
+      >
+
       <div class="grid grid-cols-1 gap-2 overflow-x-auto *:min-w-128">
         <app-dataset-details-table
           tableName="experiments"