Resolving remaining issues in the Search UI project

src/app/datasets/dashboard/dashboard.component.ts

@@ -14,6 +14,7 @@ import {
   addDatasetAction,
   fetchDatasetCompleteAction,
   fetchMetadataKeysAction,
+  fetchMetadataTypesAction,
 } from "state-management/actions/datasets.actions";
 
 import {
@@ -23,7 +24,7 @@ import {
   selectSelectedDatasets,
   selectPagination,
 } from "state-management/selectors/datasets.selectors";
-import { distinctUntilChanged, filter, map, take } from "rxjs/operators";
+import { distinctUntilChanged, filter, map, skip, take } from "rxjs/operators";
 import { MatDialog } from "@angular/material/dialog";
 import { MatSidenav } from "@angular/material/sidenav";
 import { AddDatasetDialogComponent } from "datasets/add-dataset-dialog/add-dataset-dialog.component";
@@ -180,7 +181,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.store.dispatch(prefillBatchAction());
     this.store.dispatch(fetchMetadataKeysAction());
-    this.store.dispatch(fetchDatasetsAction());
+    this.store.dispatch(fetchMetadataTypesAction());
 
     this.updateColumnSubscription();
 
@@ -189,6 +190,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         .pipe(
           map(([pagination, _, loggedIn]) => [pagination, loggedIn]),
           distinctUntilChanged(deepEqual),
+          skip(1), // TODO avoid this hack
         )
         .subscribe((obj) => {
           this.store.dispatch(fetchDatasetsAction());

src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts

@@ -23,6 +23,8 @@ import {
   fetchAttachmentsAction,
   fetchDatablocksAction,
   fetchDatasetAction,
+  fetchMetadataKeysAction,
+  fetchMetadataTypesAction,
   fetchOrigDatablocksAction,
   fetchRelatedDatasetsAction,
 } from "state-management/actions/datasets.actions";
@@ -119,6 +121,9 @@ export class DatasetDetailsDashboardComponent
   ) {}
 
   ngOnInit() {
+    this.store.dispatch(fetchMetadataKeysAction());
+    this.store.dispatch(fetchMetadataTypesAction());
+
     this.subscriptions.push(
       this.route.params.pipe(pluck("id")).subscribe((id: string) => {
         if (id) {

src/app/datasets/dataset-table/dataset-table.component.html

@@ -1,4 +1,15 @@
-<div class="dataset-table">
+<div class="dataset-container">
+  <!-- Overlay that contains the button -->
+  <div class="overlay" *ngIf="(dataLoaded$ | async) === false">
+    <div class="overlay-content">
+      <p>No data loaded. Please click the button below to load data.</p>
+      <button mat-raised-button color="primary" (click)="loadData()">
+        Load Data
+      </button>
+    </div>
+  </div>
+
+<div class="dataset-table" [ngClass]="{ 'opaque': (dataLoaded$ | async) === false }">
   <!--https://tburleson-layouts-demos.firebaseapp.com/#/docs-->
   <div fxLayout="row" fxLayoutAlign="space-evenly end">
     <div style="flex: 1"></div>
@@ -407,3 +418,4 @@
     </mat-row>
   </mat-table>
 </div>
+</div>

src/app/datasets/dataset-table/dataset-table.component.scss

@@ -1,3 +1,33 @@
+.dataset-container {
+  position: relative; /* Container to position the overlay absolutely */
+
+  .opaque {
+    opacity: 0.5; /* Make the table semi-transparent when overlay is active */
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10; /* Ensure the overlay is above the table */
+    pointer-events: all; /* Make sure the overlay captures the button click */
+  }
+
+  .overlay-content {
+    text-align: center;
+    background: white;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+  }
+}
+
 .dataset-table {
   mat-table {
     overflow-x: scroll;

src/app/datasets/dataset-table/dataset-table.component.ts

@@ -12,14 +12,17 @@ import {
 import { Dataset, TableColumn } from "state-management/models";
 import { MatCheckboxChange } from "@angular/material/checkbox";
 import { Subscription } from "rxjs";
-import { Store } from "@ngrx/store";
+import { ActionsSubject, Store } from "@ngrx/store";
 import {
   clearSelectionAction,
   selectDatasetAction,
   deselectDatasetAction,
   selectAllDatasetsAction,
   changePageAction,
   sortByColumnAction,
+  fetchDatasetsAction,
+  fetchDatasetCompleteAction,
+  fetchFacetCountsAction,
 } from "state-management/actions/datasets.actions";
 
 import {
@@ -28,6 +31,8 @@ import {
   selectPage,
   selectTotalSets,
   selectDatasetsInBatch,
+  selectLoadData,
+  selectCurrentDataset,
 } from "state-management/selectors/datasets.selectors";
 import { PageChangeEvent } from "shared/modules/table/table.component";
 import {
@@ -37,6 +42,13 @@ import {
 import { get } from "lodash";
 import { AppConfigService } from "app-config.service";
 import { selectCurrentUser } from "state-management/selectors/user.selectors";
+import {
+  MatDialog,
+  MatDialogModule,
+  MatDialogRef,
+} from "@angular/material/dialog";
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from "@angular/material/button";
 export interface SortChangeEvent {
   active: string;
   direction: "asc" | "desc" | "";
@@ -47,6 +59,61 @@ export interface SortChangeEvent {
 //   derivedDatasetsNum: number;
 // }
 
+@Component({
+  selector: "app-guard-dialog",
+  template: `
+    <h1 mat-dialog-title>
+      <mat-icon color="warn" style="vertical-align: middle;">warning</mat-icon>
+      Loading All Data
+    </h1>
+    <div mat-dialog-content>
+      <p>
+        You are about to load all available data. This action might take a long
+        time and consume significant resources.
+      </p>
+      <p>
+        It's recommended to specify search or filter criteria for better
+        performance.
+      </p>
+    </div>
+    <div mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Refine Search</button>
+      <button mat-raised-button color="primary" (click)="onConfirm()">
+        Load All Data
+      </button>
+    </div>
+  `,
+  styles: [
+    `
+      mat-dialog-content {
+        font-size: 16px;
+        line-height: 1.6;
+      }
+
+      mat-dialog-actions {
+        padding-right: 8px;
+      }
+
+      h1 mat-icon {
+        margin-right: 8px;
+      }
+    `,
+  ],
+  standalone: true,
+  imports: [MatIconModule, MatDialogModule, MatButtonModule],
+})
+class GuardDialogComponent {
+  constructor(public dialogRef: MatDialogRef<GuardDialogComponent>) {}
+
+  onConfirm(): void {
+    this.dialogRef.close(true); // User confirmed loading all data
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false); // User canceled, to refine search
+  }
+}
+
 @Component({
   selector: "dataset-table",
   templateUrl: "dataset-table.component.html",
@@ -59,6 +126,8 @@ export class DatasetTableComponent implements OnInit, OnDestroy, OnChanges {
 
   appConfig = this.appConfigService.getConfig();
 
+  dataLoaded$ = this.store.select(selectLoadData);
+
   lodashGet = get;
   currentPage$ = this.store.select(selectPage);
   datasetsPerPage$ = this.store.select(selectDatasetsPerPage);
@@ -77,6 +146,7 @@ export class DatasetTableComponent implements OnInit, OnDestroy, OnChanges {
 
   constructor(
     public appConfigService: AppConfigService,
+    public dialog: MatDialog,
     private store: Store,
   ) {}
   doSettingsClick(event: MouseEvent) {
@@ -268,4 +338,19 @@ export class DatasetTableComponent implements OnInit, OnDestroy, OnChanges {
   ngOnDestroy() {
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
   }
+
+  loadData() {
+    const dialogRef = this.dialog.open(GuardDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === true) {
+        // User confirmed, load all data
+        this.store.dispatch(fetchDatasetsAction());
+        this.store.dispatch(fetchFacetCountsAction());
+      } else {
+        // User canceled, show a message or allow them to filter
+        console.log("User chose to refine search or filter.");
+      }
+    });
+  }
 }

src/app/datasets/datasets-filter/settings/datasets-filter-settings.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Inject } from "@angular/core";
+import { Component, Inject } from "@angular/core";
 import {
   MAT_DIALOG_DATA,
   MatDialog,
@@ -16,14 +16,16 @@ import {
   selectColumnAction,
 } from "../../../state-management/actions/user.actions";
 import { Store } from "@ngrx/store";
-import { selectMetadataKeys } from "../../../state-management/selectors/datasets.selectors";
+import {
+  selectMetadataKeys,
+  selectMetadataTypes,
+} from "../../../state-management/selectors/datasets.selectors";
 import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
 import {
   ConditionConfig,
   FilterConfig,
 } from "../../../shared/modules/filters/filters.module";
 import { getFilterLabel } from "../../../shared/modules/filters/utils";
-import { ScientificCondition } from "../../../state-management/models";
 
 @Component({
   selector: "app-type-datasets-filter-settings",
@@ -34,6 +36,7 @@ export class DatasetsFilterSettingsComponent {
   protected readonly getFilterLabel = getFilterLabel;
 
   metadataKeys$ = this.store.select(selectMetadataKeys);
+  metadataTypes$ = this.store.select(selectMetadataTypes);
 
   appConfig = this.appConfigService.getConfig();
 
@@ -51,6 +54,7 @@ export class DatasetsFilterSettingsComponent {
       .open(SearchParametersDialogComponent, {
         data: {
           parameterKeys: this.asyncPipe.transform(this.metadataKeys$),
+          parameterTypes: this.asyncPipe.transform(this.metadataTypes$),
         },
       })
       .afterClosed()
@@ -80,6 +84,7 @@ export class DatasetsFilterSettingsComponent {
       .open(SearchParametersDialogComponent, {
         data: {
           parameterKeys: this.asyncPipe.transform(this.metadataKeys$),
+          parameterTypes: this.asyncPipe.transform(this.metadataTypes$),
           condition: condition.condition,
         },
       })

src/app/shared/modules/scientific-metadata/metadata-edit/metadata-edit.component.html

@@ -29,14 +29,24 @@
               <input
                 id="nameInput{{ i }}"
                 matInput
-                autocomplete="off"
+                autocomplete="on"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
                 formControlName="fieldName"
                 data-cy="metadata-name-input"
+                [matAutocomplete]="metadataKeys"
                 (blur)="getUnits(i)"
               />
+              <mat-autocomplete #metadataKeys="matAutocomplete">
+                <mat-option
+                  *ngFor="let key of metadataKeys$ | async"
+                  [value]="key"
+                  [matTooltip]="key"
+                >
+                  {{ key }}
+                </mat-option>
+              </mat-autocomplete>
               <mat-error *ngIf="fieldHasError(i, 'fieldName')">
                 Name is required
               </mat-error>