Skip to content

Commit efc38be

Browse files
abdimo101Abdi AbdulleJunjiequan
authored
refactor: add hover content for metadata name & append human readable name with metadata key in one column (#2081)
## Description This PR improves metadata field usability by adding support for searching and displaying both human-readable names and metadata keys (raw names). Users can now search metadata fields using either human-readable names or metadata keys in the search parameters dialog. The dialog and condition panels display both human-readable names (primary) and metadata keys (secondary, italic) for better clarity. <img width="701" height="518" alt="image" src="https://github.com/user-attachments/assets/cf7a807c-2d57-4dfc-b178-f4012d6a8eee" /> An icon with hover card shows full details of both naming conventions both in search parameters dialog and in the condition section. <img width="1387" height="1022" alt="image" src="https://github.com/user-attachments/assets/2767e208-82d1-4f67-9326-89950b205f38" /> <img width="674" height="419" alt="image" src="https://github.com/user-attachments/assets/f69e11c9-bb1f-48a4-821c-3ea405f89301" /> The UI includes condition chips with summary of the condition and empty spaces has been removed and fields are more compact. <img width="573" height="245" alt="image" src="https://github.com/user-attachments/assets/c58b216e-ba1f-44c8-98fc-db294905be2f" /> Metadata-table: <img width="861" height="486" alt="image" src="https://github.com/user-attachments/assets/f0dd7d1a-9bdf-497e-bac2-999c88fe0f3c" /> <img width="998" height="610" alt="image" src="https://github.com/user-attachments/assets/2c0d3a7b-d90a-4b6c-a7a1-9a3773fba4af" /> ## Motivation * https://jira.ess.eu/browse/SWAP-5064 ## Fixes: Please provide a list of the fixes implemented in this PR * Items added ## Changes: Please provide a list of the changes implemented by this PR * changes made ## Tests included - [ ] Included for each change/fix? - [ ] Passing? (Merge will not be approved unless this is checked) ## Documentation - [ ] swagger documentation updated \[required\] - [ ] official documentation updated \[nice-to-have\] ### official documentation info If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included ## Backend version - [ ] Does it require a specific version of the backend - which version of the backend is required: ## Summary by Sourcery Combine human-readable and raw metadata names into one responsive column and introduce hover overlays for detailed name display in metadata tables and search parameter dialogs. New Features: - Add hover cards to display both human-readable and raw metadata names on hover in dynamic tables and the search parameters dialog - Combine human-readable and raw metadata names into a single column with ellipsis styling Enhancements: - Merge raw and human-readable metadata name columns into one and adjust SCSS for consistent hover-card appearance - Introduce hoverOnCell and hoverContent flags with configurable overlay positions in the dynamic-material-table - Adjust dialog dimensions and styling for improved user experience in metadata and condition dialogs Build: - Import MatCardModule and OverlayModule in SearchParametersDialogModule --------- Co-authored-by: Abdi Abdulle <[email protected]> Co-authored-by: junjiequan <[email protected]>
1 parent 547b4bb commit efc38be

20 files changed

+786
-141
lines changed

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

Lines changed: 154 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,14 @@ describe("Datasets general", () => {
108108
dataFileSize: "small",
109109
scientificMetadata: {
110110
extra_entry_end_time: { type: "number", value: 2, unit: "" },
111+
temperature: {
112+
type: "number",
113+
value: 25,
114+
unit: "celsius",
115+
human_name: "Temperature Human Name",
116+
},
117+
test_number: { type: "number", value: 5, unit: "" },
118+
test_string: { type: "string", value: "hello", unit: "" },
111119
},
112120
isPublished: true,
113121
});
@@ -157,7 +165,7 @@ describe("Datasets general", () => {
157165
cy.get("mat-dialog-container").find('button[type="submit"]').click();
158166

159167
cy.get(".snackbar-warning")
160-
.should("contain", "Field already used")
168+
.should("contain", "Please select a valid field from the list")
161169
.contains("Close")
162170
.click();
163171
});
@@ -213,6 +221,150 @@ describe("Datasets general", () => {
213221
.find(".condition-panel")
214222
.should("have.length", 0);
215223
});
224+
// skipping for now but will be relevant when we can fetch human-readable names from metadataKeys endpoint in the future
225+
it.skip("should search by human name", () => {
226+
cy.visit("/datasets");
227+
228+
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
229+
cy.get('[data-cy="add-condition-button"]').click();
230+
});
231+
232+
cy.get('input[name="lhs"]').type("Temperature Human Name");
233+
234+
cy.get("mat-dialog-container").find('button[type="submit"]').click();
235+
236+
cy.get(".condition-panel").first().click();
237+
238+
cy.get('[data-cy="remove-condition-button"]').click();
239+
});
240+
241+
it("should search by metadata name", () => {
242+
cy.visit("/datasets");
243+
244+
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
245+
cy.get('[data-cy="add-condition-button"]').click();
246+
});
247+
248+
cy.get('input[name="lhs"]').type("temperature");
249+
250+
cy.get("mat-dialog-container").find('button[type="submit"]').click();
251+
252+
cy.get(".condition-panel").first().click();
253+
254+
cy.get('[data-cy="remove-condition-button"]').click();
255+
});
256+
257+
it("should not be able to add invalid field", () => {
258+
cy.visit("/datasets");
259+
260+
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
261+
cy.get('[data-cy="add-condition-button"]').click();
262+
});
263+
264+
cy.get('input[name="lhs"]').type("invalid_field_name");
265+
266+
cy.get("mat-dialog-container").find('button[type="submit"]').click();
267+
268+
cy.get(".snackbar-warning")
269+
.should("contain", "Please select a valid field from the list")
270+
.contains("Close")
271+
.click();
272+
});
273+
274+
it("should display equal sign in condition preview", () => {
275+
cy.visit("/datasets");
276+
277+
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
278+
cy.get('[data-cy="add-condition-button"]').click();
279+
});
280+
281+
cy.get('input[name="lhs"]').type("test_number");
282+
283+
cy.get("mat-dialog-container").find('button[type="submit"]').click();
284+
285+
cy.get(".condition-panel").first().click();
286+
287+
cy.get(".condition-panel")
288+
.first()
289+
.within(() => {
290+
cy.get("mat-select").click();
291+
});
292+
293+
cy.get("mat-option").contains("is equal to").click();
294+
295+
cy.get(".condition-panel")
296+
.first()
297+
.within(() => {
298+
cy.get("input[matInput]").eq(0).clear().type("5");
299+
});
300+
301+
cy.get(".condition-panel")
302+
.first()
303+
.find("mat-panel-title")
304+
.should("contain", "=")
305+
.and("contain", "5");
306+
307+
cy.get('[data-cy="remove-condition-button"]').click();
308+
});
309+
310+
it("should display range values correctly when switching from equal to", () => {
311+
cy.visit("/datasets");
312+
313+
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
314+
cy.get('[data-cy="add-condition-button"]').click();
315+
});
316+
317+
cy.get('input[name="lhs"]').type("test_number");
318+
319+
cy.get("mat-dialog-container").find('button[type="submit"]').click();
320+
321+
cy.get(".condition-panel").first().click();
322+
323+
cy.get(".condition-panel")
324+
.first()
325+
.within(() => {
326+
cy.get("mat-select").click();
327+
});
328+
329+
cy.get("mat-option").contains("is equal to").click();
330+
331+
cy.get(".condition-panel")
332+
.first()
333+
.within(() => {
334+
cy.get("input[matInput]").eq(0).clear().type("abcdefgh");
335+
});
336+
337+
cy.get(".condition-panel")
338+
.first()
339+
.within(() => {
340+
cy.get("mat-select").click();
341+
});
342+
343+
cy.get("mat-option").contains("is in range").click();
344+
345+
cy.get(".condition-panel")
346+
.first()
347+
.within(() => {
348+
cy.get("input[matInput]").eq(0).clear().type("6");
349+
cy.get("input[matInput]").eq(1).clear().type("10");
350+
});
351+
352+
// Verify that condition does not show all dataset when wrong range is given
353+
354+
cy.get(".condition-panel")
355+
.first()
356+
.find("mat-panel-title")
357+
.should("contain", "6")
358+
.and("contain", "<->")
359+
.and("contain", "10");
360+
361+
cy.get('[data-cy="filter-search-button"]').click();
362+
363+
cy.get(".dataset-table mat-table").should("exist");
364+
365+
366+
cy.get('[data-cy="remove-condition-button"]').click();
367+
});
216368
});
217369

218370
describe("Units options in condition panel units dropdown", () => {
@@ -433,7 +585,6 @@ describe("Datasets general", () => {
433585
cy.visit("/datasets");
434586
});
435587
it("should be able to add condition with scientific notation value", () => {
436-
437588
cy.get('[data-cy="scientific-condition-filter-list"]').within(() => {
438589
cy.get('[data-cy="add-condition-button"]').click();
439590
});
@@ -464,5 +615,5 @@ describe("Datasets general", () => {
464615

465616
cy.get('[data-cy="remove-condition-button"]').click();
466617
});
467-
})
618+
});
468619
});

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -742,9 +742,6 @@ describe("Datasets", () => {
742742
cy.get('[role="menu"] button')
743743
.contains("Column setting")
744744
.click({ force: true });
745-
cy.get('[role="menu"]')
746-
.contains("Raw property name")
747-
.click({ force: true });
748745
cy.get('[role="menu"]').contains("Type").click({ force: true });
749746

750747
cy.get('[role="menu"] .column-config-apply .done-setting')
@@ -753,7 +750,7 @@ describe("Datasets", () => {
753750

754751
cy.contains(
755752
"dynamic-mat-table mat-header-row.header",
756-
"Raw property name",
753+
"Name",
757754
);
758755
cy.contains("dynamic-mat-table mat-header-row.header", "Type");
759756
cy.contains("dynamic-mat-table mat-row", metadata.name);

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

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,80 @@
6666
<mat-panel-title>
6767
<div class="condition-title-section">
6868
<div class="condition-field-name">
69-
{{ getHumanName(conditionConfig.condition.lhs) }}
69+
<mat-icon
70+
class="cell-icon"
71+
fontIcon="description"
72+
#hoverOriginSpan="cdkOverlayOrigin"
73+
cdkOverlayOrigin
74+
(mouseenter)="hoverKey = conditionConfig.condition.lhs"
75+
(mouseleave)="hoverKey = null"
76+
></mat-icon>
77+
<div class="field-name-wrapper">
78+
<ng-container
79+
*ngIf="
80+
getHumanName(conditionConfig.condition.lhs);
81+
else rawNameOnlyHeader
82+
"
83+
>
84+
<div class="primary-name">
85+
{{ getHumanName(conditionConfig.condition.lhs) }}
86+
</div>
87+
<div
88+
class="secondary-name"
89+
*ngIf="humanNameMap[conditionConfig.condition.lhs]"
90+
>
91+
{{ conditionConfig.condition.lhs }}
92+
</div>
93+
</ng-container>
94+
<ng-template #rawNameOnlyHeader>
95+
<div class="primary-name" style="font-style: italic;">
96+
{{ conditionConfig.condition.lhs }}
97+
</div>
98+
</ng-template>
99+
</div>
100+
101+
<!-- Hover overlay -->
102+
<ng-template
103+
cdkConnectedOverlay
104+
[cdkConnectedOverlayOrigin]="hoverOriginSpan"
105+
[cdkConnectedOverlayOpen]="
106+
hoverKey === conditionConfig.condition.lhs
107+
"
108+
[cdkConnectedOverlayPositions]="overlayPositions"
109+
>
110+
<mat-card class="hover-card">
111+
<mat-card-title class="hover-card-title">
112+
Name Details
113+
</mat-card-title>
114+
<div mat-card-content class="hover-card-content">
115+
<ng-container
116+
*ngIf="
117+
getHumanName(conditionConfig.condition.lhs);
118+
else rawNameOnly
119+
"
120+
>
121+
<strong>Human readable name: </strong>
122+
{{ getHumanName(conditionConfig.condition.lhs) }}
123+
<br />
124+
<strong>Metadata key:</strong>
125+
{{ conditionConfig.condition.lhs }}
126+
</ng-container>
127+
</div>
128+
<ng-template #rawNameOnly>
129+
<strong>Metadata key: </strong><span style="font-style: italic;">{{ conditionConfig.condition.lhs }}</span>
130+
</ng-template>
131+
</mat-card>
132+
</ng-template>
70133
</div>
71134
<div class="condition-description">
72-
{{ getConditionDisplayText(conditionConfig.condition) }}
135+
<span class="condition-chip">{{
136+
getConditionDisplayText(conditionConfig.condition, i)
137+
}}</span>
73138
</div>
74139
</div>
75140
</mat-panel-title>
76141
<mat-panel-description>
77-
{{ getConditionDisplayText(conditionConfig.condition) }}
142+
{{ getConditionDisplayText(conditionConfig.condition, i) }}
78143
</mat-panel-description>
79144
</mat-expansion-panel-header>
80145

@@ -287,6 +352,7 @@
287352
class="datasets-filters-search-button"
288353
data-cy="filter-search-button"
289354
(click)="applyFilters()"
355+
data-cy="filter-search-button"
290356
>
291357
<mat-icon>search</mat-icon>
292358
Apply

0 commit comments

Comments
 (0)