refactor: add hover content for metadata name & append human readable name with metadata key in one column

cypress/e2e/datasets/datasets-general.cy.js

@@ -108,6 +108,14 @@ describe("Datasets general", () => {
         dataFileSize: "small",
         scientificMetadata: {
           extra_entry_end_time: { type: "number", value: 2, unit: "" },
+          temperature: {
+            type: "number",
+            value: 25,
+            unit: "celsius",
+            human_name: "Temperature Human Name",
+          },
+          test_number: { type: "number", value: 5, unit: "" },
+          test_string: { type: "string", value: "hello", unit: "" },
         },
         isPublished: true,
       });
@@ -157,7 +165,7 @@ describe("Datasets general", () => {
       cy.get("mat-dialog-container").find('button[type="submit"]').click();
 
       cy.get(".snackbar-warning")
-        .should("contain", "Field already used")
+        .should("contain", "Please select a valid field from the list")
         .contains("Close")
         .click();
     });
@@ -213,6 +221,150 @@ describe("Datasets general", () => {
         .find(".condition-panel")
         .should("have.length", 0);
     });
+    // skipping for now but will be relevant when we can fetch human-readable names from metadataKeys endpoint in the future
+    it.skip("should search by human name", () => {
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
+        cy.get('[data-cy="add-condition-button"]').click();
+      });
+
+      cy.get('input[name="lhs"]').type("Temperature Human Name");
+
+      cy.get("mat-dialog-container").find('button[type="submit"]').click();
+
+      cy.get(".condition-panel").first().click();
+
+      cy.get('[data-cy="remove-condition-button"]').click();
+    });
+
+    it("should search by metadata name", () => {
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
+        cy.get('[data-cy="add-condition-button"]').click();
+      });
+
+      cy.get('input[name="lhs"]').type("temperature");
+
+      cy.get("mat-dialog-container").find('button[type="submit"]').click();
+
+      cy.get(".condition-panel").first().click();
+
+      cy.get('[data-cy="remove-condition-button"]').click();
+    });
+
+    it("should not be able to add invalid field", () => {
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
+        cy.get('[data-cy="add-condition-button"]').click();
+      });
+
+      cy.get('input[name="lhs"]').type("invalid_field_name");
+
+      cy.get("mat-dialog-container").find('button[type="submit"]').click();
+
+      cy.get(".snackbar-warning")
+        .should("contain", "Please select a valid field from the list")
+        .contains("Close")
+        .click();
+    });
+
+    it("should display equal sign in condition preview", () => {
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
+        cy.get('[data-cy="add-condition-button"]').click();
+      });
+
+      cy.get('input[name="lhs"]').type("test_number");
+
+      cy.get("mat-dialog-container").find('button[type="submit"]').click();
+
+      cy.get(".condition-panel").first().click();
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("mat-select").click();
+        });
+
+      cy.get("mat-option").contains("is equal to").click();
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("input[matInput]").eq(0).clear().type("5");
+        });
+
+      cy.get(".condition-panel")
+        .first()
+        .find("mat-panel-title")
+        .should("contain", "=")
+        .and("contain", "5");
+
+      cy.get('[data-cy="remove-condition-button"]').click();
+    });
+
+    it("should display range values correctly when switching from equal to", () => {
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
+        cy.get('[data-cy="add-condition-button"]').click();
+      });
+
+      cy.get('input[name="lhs"]').type("test_number");
+
+      cy.get("mat-dialog-container").find('button[type="submit"]').click();
+
+      cy.get(".condition-panel").first().click();
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("mat-select").click();
+        });
+
+      cy.get("mat-option").contains("is equal to").click();
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("input[matInput]").eq(0).clear().type("abcdefgh");
+        });
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("mat-select").click();
+        });
+
+      cy.get("mat-option").contains("is in range").click();
+
+      cy.get(".condition-panel")
+        .first()
+        .within(() => {
+          cy.get("input[matInput]").eq(0).clear().type("6");
+          cy.get("input[matInput]").eq(1).clear().type("10");
+        });
+
+      // Verify that condition does not show all dataset when wrong range is given
+
+      cy.get(".condition-panel")
+        .first()
+        .find("mat-panel-title")
+        .should("contain", "6")
+        .and("contain", "<->")
+        .and("contain", "10");
+
+      cy.get('[data-cy="filter-search-button"]').click();
+
+      cy.get(".dataset-table mat-table").should("exist");
+
+
+       cy.get('[data-cy="remove-condition-button"]').click();
+    });
   });
 
   describe("Units options in condition panel units dropdown", () => {
@@ -433,7 +585,6 @@ describe("Datasets general", () => {
       cy.visit("/datasets");
     });
     it("should be able to add condition with scientific notation value", () => {
-
       cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
         cy.get('[data-cy="add-condition-button"]').click();
       });
@@ -464,5 +615,5 @@ describe("Datasets general", () => {
 
       cy.get('[data-cy="remove-condition-button"]').click();
     });
-  })
+  });
 });

cypress/e2e/datasets/datasets-metadata.cy.js

@@ -742,9 +742,6 @@ describe("Datasets", () => {
       cy.get('[role="menu"] button')
         .contains("Column setting")
         .click({ force: true });
-      cy.get('[role="menu"]')
-        .contains("Raw property name")
-        .click({ force: true });
       cy.get('[role="menu"]').contains("Type").click({ force: true });
 
       cy.get('[role="menu"] .column-config-apply .done-setting')
@@ -753,7 +750,7 @@ describe("Datasets", () => {
 
       cy.contains(
         "dynamic-mat-table mat-header-row.header",
-        "Raw property name",
+        "Name",
       );
       cy.contains("dynamic-mat-table mat-header-row.header", "Type");
       cy.contains("dynamic-mat-table mat-row", metadata.name);

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

@@ -66,15 +66,80 @@
             <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">
+                    <ng-container
+                      *ngIf="
+                        getHumanName(conditionConfig.condition.lhs);
+                        else rawNameOnlyHeader
+                      "
+                    >
+                      <div class="primary-name">
+                        {{ getHumanName(conditionConfig.condition.lhs) }}
+                      </div>
+                      <div
+                        class="secondary-name"
+                        *ngIf="humanNameMap[conditionConfig.condition.lhs]"
+                      >
+                        {{ conditionConfig.condition.lhs }}
+                      </div>
+                    </ng-container>
+                    <ng-template #rawNameOnlyHeader>
+                      <div class="primary-name" style="font-style: italic;">
+                        {{ conditionConfig.condition.lhs }}
+                      </div>
+                    </ng-template>
+                  </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 key:</strong>
+                          {{ conditionConfig.condition.lhs }}
+                        </ng-container>
+                      </div>
+                      <ng-template #rawNameOnly>
+                        <strong>Metadata key: </strong><span style="font-style: italic;">{{ conditionConfig.condition.lhs }}</span>
+                      </ng-template>
+                    </mat-card>
+                  </ng-template>
                 </div>
                 <div class="condition-description">
-                  {{ getConditionDisplayText(conditionConfig.condition) }}
+                  <span class="condition-chip">{{
+                    getConditionDisplayText(conditionConfig.condition, i)
+                  }}</span>
                 </div>
               </div>
             </mat-panel-title>
             <mat-panel-description>
-              {{ getConditionDisplayText(conditionConfig.condition) }}
+              {{ getConditionDisplayText(conditionConfig.condition, i) }}
             </mat-panel-description>
           </mat-expansion-panel-header>
 
@@ -287,6 +352,7 @@
         class="datasets-filters-search-button"
         data-cy="filter-search-button"
         (click)="applyFilters()"
+        data-cy="filter-search-button"
       >
         <mat-icon>search</mat-icon>
         Apply