Skip to content

Commit

Permalink
Merge pull request #1009 from opencb/TASK-7225
Browse files Browse the repository at this point in the history 
TASK-7225 - Warning events messages still take up a large part of the screen in Variant Browser
  • Loading branch information
@jmjuanes
jmjuanes authored Dec 20, 2024
2 parents 78c05be + 2ec94ff commit 3aca751
Showing 1 changed file with 41 additions and 43 deletions.
84 changes: 41 additions & 43 deletions src/webcomponents/commons/grid-commons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,56 +339,54 @@ export default class GridCommons {
return columns;
}

displayResponseWarningEvents(response, maxVisibleEvents = 3) {
displayResponseWarningEvents(response) {
const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`);
if (eventsContainer && (response?.events?.length > 0 || response?.responses?.[0]?.events?.length > 0)) {
const events = [...(response?.events || []), ...(response?.responses?.[0]?.events || [])]
.filter(event => event && event.type === "WARNING" && !!event.message)
.map(event => {
return `
<div class="alert alert-warning mb-2">
<i class="fas fa-exclamation-triangle pe-1"></i>
<span>${event.message}</span>
</div>
`;
});
if (events.length > 0) {
const defaultVisibleEvents = events.length > maxVisibleEvents ? events.slice(0, maxVisibleEvents) : events;
const defaultHiddenEvents = events.length > maxVisibleEvents ? events.slice(maxVisibleEvents) : [];
const eventsMessages = UtilsNew.renderHTML(`
.filter(event => event && event.type === "WARNING" && !!event.message);
// If there is only one event message, just display it
if (events.length === 1) {
const eventsContent = UtilsNew.renderHTML(`
<div class="alert alert-warning mb-2">
<i class="fas fa-exclamation-triangle pe-1"></i>
<span>${events[0].message}</span>
</div>
`).querySelector("div");
eventsContainer.replaceChildren(eventsContent);
} else if (events.length > 1) {
const eventsContent = UtilsNew.renderHTML(`
<div>
${defaultVisibleEvents.join("")}
${defaultHiddenEvents.length > 0 ? `
<div data-role="hidden-events" style="display:none;">${defaultHiddenEvents.join("")}</div>
<div class="text-muted">
<div data-role="show-more-events" style="display:inline-block;cursor:pointer;">
<small><i class="fas fa-chevron-down" style="padding-right:6px;"></i>Show more warning events (<b>${defaultHiddenEvents.length}</b>)</small>
</div>
<div data-role="show-less-events" style="display:none;cursor:pointer;">
<small><i class="fas fa-chevron-up" style="padding-right:6px;"></i>Show less warning events</small>
</div>
<div class="alert alert-warning mb-2">
<div class="d-flex align-items-center gap-2">
<i class="fas fa-exclamation-triangle pe-2"></i>
<span>There are warning events (<b>${events.length}</b>).</span>
<span data-role="show-events" style="cursor:pointer;text-decoration:underline">Show all events.</span>
<span data-role="hide-events" style="display:none;cursor:pointer;text-decoration:underline;">Hide all events.</span>
</div>
<div data-role="events" class="mt-1" style="display:none;">
<ul class="mb-0">
${events.map(event => `<li>${event.message}</li>`).join("")}
</ul>
</div>
` : ""}
</div>
</div>
`).querySelector("div");
eventsContainer.replaceChildren(eventsMessages);
if (defaultHiddenEvents.length > 0) {
const hiddenEventsElement = eventsMessages.querySelector(`div[data-role="hidden-events"]`);
const showMoreEventsElement = eventsMessages.querySelector(`div[data-role="show-more-events"]`);
const showLessEventsElement = eventsMessages.querySelector(`div[data-role="show-less-events"]`);
// Show more events click
showMoreEventsElement.addEventListener("click", () => {
hiddenEventsElement.style.display = "block";
showLessEventsElement.style.display = "inline-block";
showMoreEventsElement.style.display = "none";
});
// Show less events click
showLessEventsElement.addEventListener("click", () => {
hiddenEventsElement.style.display = "none";
showLessEventsElement.style.display = "none";
showMoreEventsElement.style.display = "inline-block";
});
}
eventsContainer.replaceChildren(eventsContent);
const eventsElement = eventsContent.querySelector(`div[data-role="events"]`);
const showEventsElement = eventsContent.querySelector(`span[data-role="show-events"]`);
const hideEventsElement = eventsContent.querySelector(`span[data-role="hide-events"]`);
// Show events click
showEventsElement.addEventListener("click", () => {
eventsElement.style.display = "";
hideEventsElement.style.display = "";
showEventsElement.style.display = "none";
});
// Hide events click
hideEventsElement.addEventListener("click", () => {
eventsElement.style.display = "none";
hideEventsElement.style.display = "none";
showEventsElement.style.display = "";
});
}
}
}
Expand Down

0 comments on commit 3aca751

Please sign in to comment.