improved UI of scientific condition

Author: Abdi Abdulle

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

@@ -65,10 +65,64 @@
             <mat-panel-title>
               <div class="condition-title-section">
                 <div class="condition-field-name">
-                  {{ getHumanName(conditionConfig.condition.lhs) }}
+                  <mat-icon
+                    class="cell-icon"
+                    fontIcon="description"
+                    #hoverOriginSpan="cdkOverlayOrigin"
+                    cdkOverlayOrigin
+                    (mouseenter)="hoverKey = conditionConfig.condition.lhs"
+                    (mouseleave)="hoverKey = null"
+                  ></mat-icon>
+                  <div class="field-name-wrapper">
+                    <div class="human-name">
+                      {{ getHumanName(conditionConfig.condition.lhs) }}
+                    </div>
+                    <div
+                      class="metadata-name"
+                      *ngIf="humanNameMap[conditionConfig.condition.lhs]"
+                    >
+                      {{ conditionConfig.condition.lhs }}
+                    </div>
+                  </div>
+
+                  <!-- Hover overlay -->
+                  <ng-template
+                    cdkConnectedOverlay
+                    [cdkConnectedOverlayOrigin]="hoverOriginSpan"
+                    [cdkConnectedOverlayOpen]="
+                      hoverKey === conditionConfig.condition.lhs
+                    "
+                    [cdkConnectedOverlayPositions]="overlayPositions"
+                  >
+                    <mat-card class="hover-card">
+                      <mat-card-title class="hover-card-title">
+                        Name Details
+                      </mat-card-title>
+                      <div mat-card-content class="hover-card-content">
+                        <ng-container
+                          *ngIf="
+                            getHumanName(conditionConfig.condition.lhs);
+                            else rawNameOnly
+                          "
+                        >
+                          <strong>Human readable name: </strong>
+                          {{ getHumanName(conditionConfig.condition.lhs) }}
+                          <br />
+                          <strong>Metadata name:</strong>
+                          {{ conditionConfig.condition.lhs }}
+                        </ng-container>
+                      </div>
+                      <ng-template #rawNameOnly>
+                        <strong>Metadata name:</strong>
+                        {{ conditionConfig.condition.lhs }}
+                      </ng-template>
+                    </mat-card>
+                  </ng-template>
                 </div>
                 <div class="condition-description">
-                  {{ getConditionDisplayText(conditionConfig.condition) }}
+                  <span class="condition-chip">{{
+                    getConditionDisplayText(conditionConfig.condition)
+                  }}</span>
                 </div>
               </div>
             </mat-panel-title>
@@ -229,7 +283,10 @@
                   (input)="updateConditionUnit(i, $event)"
                   [matAutocomplete]="rhsUnits"
                 />
-                <mat-autocomplete #rhsUnits="matAutocomplete" (optionSelected)="updateConditionUnit(i, $event)">
+                <mat-autocomplete
+                  #rhsUnits="matAutocomplete"
+                  (optionSelected)="updateConditionUnit(i, $event)"
+                >
                   <mat-option
                     *ngFor="let unit of getUnits(conditionConfig.condition.lhs)"
                     [value]="unit"

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

@@ -1,3 +1,4 @@
+@use "@angular/material" as mat;
 mat-card {
   margin-top: 0.5rem;
 
@@ -96,16 +97,59 @@ mat-card {
 .condition-title-section {
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   .condition-field-name {
     font-weight: 500;
+    font-size: 1rem;
     margin-bottom: 0.25rem;
     word-break: break-word;
+    display: flex;
+    align-items: center;
+
+    .cell-icon {
+      color: var(--theme-primary-default);
+      flex-shrink: 0; /* prevent icon from being hidden */
+      font-size: 19px;
+      transform: translateY(4px);
+    }
+    .field-name-wrapper {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+
+      .human-name {
+        font-size: 1rem;
+        font-weight: 500;
+      }
+
+      .metadata-name {
+        font-size: 0.875rem;
+        font-style: italic;
+        color: rgba(0, 0, 0, 0.54);
+        margin-top: 2px;
+      }
+    }
   }
 
   .condition-description {
     font-size: 0.9em;
     color: rgba(0, 0, 0, 0.6);
+
+    .condition-chip {
+      display: block;
+      font-size: 0.85rem;
+      font-weight: 500;
+      padding: 2px 8px;
+      background: transparent;
+      border: 1px solid var(--theme-primary-default);
+      color: var(--theme-primary-default);
+      border-radius: 6px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 
@@ -122,28 +166,31 @@ mat-card {
   .mat-expansion-panel-header {
     height: auto !important;
     padding: 0.5rem !important;
+    align-items: flex-start !important;
 
     .mat-expansion-panel-header-title {
       white-space: normal !important;
       overflow: visible !important;
+      flex: 1;
+      min-width: 0;
     }
     .mat-expansion-panel-header-description {
       display: none !important;
     }
   }
 
   .condition-details {
-    padding: 0.5rem;
+    padding: 0.25rem;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.25rem;
 
     .condition-actions-section {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding-top: 0.5rem;
-
+      margin-top: -0.5rem;
+      margin-bottom: -0.5rem;
       .condition-toggle {
         margin: 0;
       }
@@ -170,6 +217,8 @@ mat-card {
     .condition-fields {
       margin-left: -20px;
       width: calc(100% + 40px);
+
+      @include mat.form-field-density(-5);
     }
 
     .operator-symbol {
@@ -180,3 +229,25 @@ mat-card {
     }
   }
 }
+
+.hover-card {
+  min-width: 300px;
+  max-width: 620px;
+}
+
+.hover-card-title {
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 4px 4px 0 0;
+  color: white;
+  background: var(--theme-header-1-lighter);
+}
+
+.hover-card-content {
+  padding: 10px 16px;
+  background: white;
+  color: var(--theme-header-1-lighter-contrast);
+  border-radius: 0 0 4px 4px;
+  white-space: pre-line;
+  word-wrap: break-word;
+}

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

@@ -58,7 +58,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { MultiSelectFilterValue } from "shared/modules/filters/multiselect-filter.component";
 import { INumericRange } from "shared/modules/numeric-range/form/model/numeric-range-field.model";
 import { UnitsOptionsService } from "shared/services/units-options.service";
-
+import { ConnectedPosition } from "@angular/cdk/overlay";
 @Component({
   selector: "datasets-filter",
   templateUrl: "datasets-filter.component.html",
@@ -91,6 +91,25 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
 
   fieldTypeMap: { [key: string]: string } = {};
 
+  hoverKey: string | null = null;
+
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: "end",
+      originY: "center",
+      overlayX: "start",
+      overlayY: "center",
+      offsetX: 8,
+    },
+    {
+      originX: "center",
+      originY: "center",
+      overlayX: "end",
+      overlayY: "top",
+      offsetY: 8,
+    },
+  ];
+
   constructor(
     public appConfigService: AppConfigService,
     public dialog: MatDialog,
@@ -489,7 +508,7 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
                 .pipe(take(1))
                 .subscribe((currentConditions) => {
                   const existingConditionIndex = currentConditions.findIndex(
-                    (config) => isEqual(config.condition, data),
+                    (config) => isEqual(this.humanNameMap[config.condition.lhs], data.lhs),
                   );
                   if (existingConditionIndex !== -1) {
                     this.snackBar.open("Condition already exists", "Close", {

src/app/datasets/datasets.module.ts

@@ -87,6 +87,7 @@ import { ThumbnailPipe } from "shared/pipes/thumbnail.pipe";
 import { MatExpansionModule } from "@angular/material/expansion";
 import { MatBadgeModule } from "@angular/material/badge";
 import { TitleCasePipe } from "shared/pipes/title-case.pipe";
+import { OverlayModule } from "@angular/cdk/overlay";
 
 @NgModule({
   imports: [
@@ -150,6 +151,7 @@ import { TitleCasePipe } from "shared/pipes/title-case.pipe";
     // FiltersModule,
     MatExpansionModule,
     MatBadgeModule,
+    OverlayModule,
   ],
   declarations: [
     BatchViewComponent,

src/app/shared/modules/search-parameters-dialog/search-parameters-dialog.component.ts

@@ -137,7 +137,7 @@ export class SearchParametersDialogComponent {
     const rhs =
       relation === "EQUAL_TO_STRING" ? String(rawRhs) : Number(rawRhs);
     this.parametersForm.patchValue({ rhs });
-    this.dialogRef.close({ data: { lhs, relation, rhs, unit } });
+    this.dialogRef.close({ data: { lhs: metadataKey, relation, rhs, unit } });
   };
 
   cancel = (): void => this.dialogRef.close();