feat(ui): redesign dataset page search and filter layout

src/app/datasets/dashboard/dashboard.component.html

@@ -2,38 +2,59 @@
   <mat-sidenav-container [hasBackdrop]="false">
     <mat-sidenav-content>
       <div fxLayout="row" fxLayout.xs="column" class="dashboard-header">
-        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20"></div>
-        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+        <div class="table-column" fxFlex="100">
           <ng-template [ngIf]="this.loggedIn$ | async">
             <dataset-table-actions></dataset-table-actions>
           </ng-template>
         </div>
       </div>
 
       <div fxLayout="row" fxLayout.xs="column">
-        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
-          <datasets-filter></datasets-filter>
-          <ng-template [ngIf]="this.loggedIn$ | async">
-            <ingestor-creation
-              #ingestor
-              style="display: none"
-            ></ingestor-creation>
-            <mat-card
-              *ngIf="appConfig.addDatasetEnabled"
-              class="add-card"
-              (click)="openDialog()"
-            >
-              <mat-card-content>
-                <mat-icon> add_circle </mat-icon>
-                Create Dataset
-              </mat-card-content>
-            </mat-card>
-            <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
-              <batch-card></batch-card>
+        <div class="table-column" fxFlex="100">
+          <!-- NEW SEARCH BAR AND FILTER BUTTON ROW -->
+          <div fxLayout="row" fxLayoutAlign="space-between center" style="margin-bottom: 0; padding: 0 16px;">
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center" style="gap: 16px;">
+              <mat-form-field style="width: 550px; max-width: 100%;">
+                <mat-icon matPrefix style="color: gray" *ngIf="!globalTextSearch">search</mat-icon>
+                <input [(ngModel)]="globalTextSearch" type="text" matInput placeholder="Dataset name, Run number..." (ngModelChange)="onTextChange($event)" (keydown.enter)="onSearchAction()" (keydown.escape)="onGlobalTextSearchClear()" data-cy="text-search" />
+                <span matSuffix style="font-size: 16px; margin-right: 8px; color: gray;" matTooltip="Press Enter to search" matTooltipPosition="below" matTooltipShowDelay="500">↵</span>
+                <button mat-icon-button matSuffix *ngIf="globalTextSearch" (click)="onGlobalTextSearchClear()" type="button" matTooltip="Clear search">
+                  <mat-icon>close</mat-icon>
+                </button>
+                <button mat-icon-button matSuffix *ngIf="globalTextSearch" (click)="onSearchAction()" type="button" matTooltip="Apply search">
+                  <mat-icon>search</mat-icon>
+                </button>
+              </mat-form-field>
+
+              <button mat-stroked-button color="primary" (click)="toggleFilters()" style="margin-bottom: 22px;"
+                      [attr.aria-expanded]="filtersExpanded"
+                      aria-controls="datasets-filter-panel">
+                <mat-icon>filter_list</mat-icon> Filters
+              </button>
             </div>
-          </ng-template>
-        </div>
-        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+
+            <!-- EXISTING ACTION BUTTONS MOVED FROM SIDEBAR TO PRESERVE THEM -->
+            <div fxLayout="row" fxLayoutAlign="end center" style="gap: 16px; margin-bottom: 22px;">
+              <ng-template [ngIf]="this.loggedIn$ | async">
+                <ingestor-creation #ingestor style="display: none"></ingestor-creation>
+                <mat-card *ngIf="appConfig.addDatasetEnabled" class="add-card" (click)="openDialog()" style="cursor: pointer; padding: 8px 16px;">
+                  <mat-card-content style="margin: 0; padding: 0; display: flex; align-items: center;">
+                    <mat-icon style="margin-right: 8px;"> add_circle </mat-icon>
+                    Create Dataset
+                  </mat-card-content>
+                </mat-card>
+                <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
+                  <batch-card></batch-card>
+                </div>
+              </ng-template>
+            </div>
+          </div>
+
+          <!-- EXPANDABLE FILTER PANEL -->
+          <div id="datasets-filter-panel" *ngIf="filtersExpanded" style="padding: 0 16px 16px 16px;">
+            <datasets-filter></datasets-filter>
+          </div>
+
           <dataset-table
             (rowClick)="onRowClick($event)"
             (pageChange)="onPageChange($event)"

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

@@ -68,6 +68,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
   currentUser: ReturnedUserDto;
   userGroups: string[] = [];
   clearColumnSearch = false;
+  filtersExpanded = false;
+  globalTextSearch = "";
 
   @ViewChild(MatSidenav, { static: false }) sideNav!: MatSidenav;
   @ViewChild("ingestor") ingestor: IngestorCreationComponent;
@@ -108,6 +110,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
     }
   }
 
+  toggleFilters(): void {
+    this.filtersExpanded = !this.filtersExpanded;
+  }
+
+  onGlobalTextSearchClear(): void {
+    this.globalTextSearch = "";
+    this.onTextChange("");
+    this.onSearchAction();
+  }
+
   ngOnInit() {
     this.store.dispatch(prefillBatchAction());
     this.store.dispatch(fetchMetadataKeysAction({}));
@@ -162,6 +174,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
         ),
     );
 
+    this.subscriptions.push(
+      this.route.queryParams.subscribe((queryParams) => {
+        const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
+        this.globalTextSearch = searchQuery.text || "";
+      }),
+    );
+
     this.subscriptions.push(
       this.store.select(selectCurrentUser).subscribe((user) => {
         if (user) {

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

@@ -8,7 +8,7 @@
   [dataSource]="dataSource"
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
-  [showGlobalTextSearch]="true"
+  [showGlobalTextSearch]="false"
   [globalTextSearch]="globalTextSearch"
   (globalTextSearchChange)="onTextSearchChange($event)"
   (globalTextSearchApply)="onTextSearchAction()"

src/app/datasets/datasets-filter/datasets-filter.component.html

@@ -1,7 +1,29 @@
 <mat-card>
   <mat-card-header class="section-container filters-header">
-    <mat-card-title>Filters</mat-card-title>
-    <div class="section-container" data-cy="more-filters-button">
+    <div style="display: flex; align-items: center; gap: 24px;">
+      <mat-card-title style="margin: 0;">Filters</mat-card-title>
+      <ng-template [ngIf]="this.loggedIn$ | async">
+        <div class="public-toggle" style="margin: 0;">
+          <button
+            mat-stroked-button
+            [class.active]="
+              currentPublicViewMode === '' || currentPublicViewMode === false
+            "
+            (click)="onViewPublicChange(false)"
+          >
+            My data
+          </button>
+          <button
+            mat-stroked-button
+            [class.active]="currentPublicViewMode === true"
+            (click)="onViewPublicChange(true)"
+          >
+            Public data
+          </button>
+        </div>
+      </ng-template>
+    </div>
+    <div class="section-container" data-cy="more-filters-button" style="margin: 0;">
       <button
         mat-icon-button
         class="settings-button"
@@ -34,43 +56,45 @@
         </button>
       </div>
     </ng-template>
-    <ng-container *ngFor="let filter of filtersList">
-      <shared-filter
-        *ngIf="filter.enabled"
-        [key]="filter.key"
-        [label]="filter.label"
-        [clear]="clearSearchBar"
-        [tooltip]="filter.description"
-        [filterType]="filter.type"
-        [prefilled]="activeFilters[filter.key] || null"
-        [currentFilter$]="getFilterByKey$(filter.key)"
-        [facetCounts$]="getFilterFacetCounts$(filter.key)"
-        (textChange)="setFilter(filter.key, $event)"
-        (dateRangeChange)="setDateFilter(filter.key, $event)"
-        (selectionChange)="selectionChange($event)"
-        (checkBoxChange)="setFilter(filter.key, $event)"
-        (numericRangeChange)="numericRangeChange(filter.key, $event)"
-        [filterValue]="activeFilters[filter.key]"
-        [collapsible]="filter.type === 'checkbox'"
-        (applyEnterKey)="applyFilters()"
-      ></shared-filter>
-    </ng-container>
+    <div class="filters-grid">
+      <ng-container *ngFor="let filter of filtersList">
+        <shared-filter
+          *ngIf="filter.enabled"
+          [key]="filter.key"
+          [label]="filter.label"
+          [clear]="clearSearchBar"
+          [tooltip]="filter.description"
+          [filterType]="filter.type"
+          [prefilled]="activeFilters[filter.key] || null"
+          [currentFilter$]="getFilterByKey$(filter.key)"
+          [facetCounts$]="getFilterFacetCounts$(filter.key)"
+          (textChange)="setFilter(filter.key, $event)"
+          (dateRangeChange)="setDateFilter(filter.key, $event)"
+          (selectionChange)="selectionChange($event)"
+          (checkBoxChange)="setFilter(filter.key, $event)"
+          (numericRangeChange)="numericRangeChange(filter.key, $event)"
+          [filterValue]="activeFilters[filter.key]"
+          [collapsible]="filter.type === 'checkbox'"
+          (applyEnterKey)="applyFilters()"
+        ></shared-filter>
+      </ng-container>
 
-    <shared-condition
-      #conditionFilter
-      *ngIf="appConfig.scienceSearchEnabled"
-      data-cy="scientific-condition-filter-list"
-      [showConditions]="true"
-      [metadataKeys]="metadataKeys$ | async"
-      [unitsEnabled]="appConfig.scienceSearchUnitsEnabled"
-      [showConditionToggle]="true"
-      [conditionSettingScope]="'dataset'"
-      [addConditionAction]="addCondition"
-      [removeConditionAction]="removeCondition"
-      [dialogTitle]="'Add Dataset Metadata Key'"
-    ></shared-condition>
+      <shared-condition
+        #conditionFilter
+        *ngIf="appConfig.scienceSearchEnabled"
+        data-cy="scientific-condition-filter-list"
+        [showConditions]="true"
+        [metadataKeys]="metadataKeys$ | async"
+        [unitsEnabled]="appConfig.scienceSearchUnitsEnabled"
+        [showConditionToggle]="true"
+        [conditionSettingScope]="'dataset'"
+        [addConditionAction]="addCondition"
+        [removeConditionAction]="removeCondition"
+        [dialogTitle]="'Add Dataset Metadata Key'"
+      ></shared-condition>
+    </div>
 
-    <div class="section-container">
+    <div class="section-container action-buttons">
       <button
         [disabled]="(hasAppliedFilters$ | async) === false"
         mat-raised-button

src/app/datasets/datasets-filter/datasets-filter.component.scss

@@ -59,12 +59,7 @@ mat-card {
     }
 
     .datasets-filters-search-button {
-      width: 49%;
-      margin-left: 2%;
-    }
-
-    .datasets-filters-clear-all-button {
-      width: 49%;
+      margin-left: 16px;
     }
   }
 
@@ -85,9 +80,8 @@ mat-card {
 
 .public-toggle {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
   flex-wrap: wrap;
   button {
     border-radius: 18px;
@@ -103,3 +97,22 @@ mat-card {
     }
   }
 }
+
+.filters-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 16px;
+
+  .datasets-filters-clear-all-button,
+  .datasets-filters-search-button {
+    width: auto;
+    margin: 0;
+  }
+}