zaphar/Heracles
1
0
Fork 0
mirror of https://github.com/zaphar/Heracles.git synced 2025-07-23 04:29:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui: Select all for the label filters works

Browse Source
This commit is contained in:
Jeremy Wall 2024-03-06 15:43:34 -05:00
parent 5a76207cca
commit 225755d6b3
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/lib.js
View File

@ -333,7 +333,6 @@ export class GraphPlot extends HTMLElement {
* @returns {HTMLDivElement}
*/
buildSelectElement(key) {
// TODO(jwall): Should we have a select all?
var id = key + "-select" + Math.random();
const element = document.createElement("div");
const select = document.createElement("select");
@ -341,13 +340,14 @@ export class GraphPlot extends HTMLElement {
// TODO(jwall): This is how you set boolean attributes. Use the attribute named... :-(
select.setAttribute("multiple", "multiple");
const optElement = document.createElement("option");
const optValue = "Select " + key;
const optValue = "Select All: " + key;
optElement.innerText = optValue;
select.appendChild(optElement);
for (var opt of this.#filterLabels[key]) {
const optElement = document.createElement("option");
optElement.setAttribute("value", opt);
optElement.setAttribute("selected", "selected");
optElement.selected = true;
optElement.innerText = opt;
select.appendChild(optElement);
}
@ -356,8 +356,29 @@ export class GraphPlot extends HTMLElement {
select.onchange = function(evt) {
evt.stopPropagation();
var filteredValues = [];
for (var opt of /** @type {HTMLSelectElement} */(evt.target).selectedOptions) {
filteredValues.push(opt.getAttribute("value"));
const selectElement = /** @type {HTMLSelectElement} */(evt.target);
var selectAll = /** @type {?HTMLOptionElement}*/(null);
for (const optEl of selectElement.selectedOptions) {
if (optEl.value && optEl.value.startsWith("Select All: ")) {
selectAll = optEl;
break;
}
}
for (const o of selectElement.options) {
if (selectAll) {
if (o != selectAll) {
o.setAttribute("selected", "selected");
o.selected = true;
filteredValues.push(o.value);
} else {
o.removeAttribute("selected");
}
} else if (!o.selected) {
o.removeAttribute("selected");
} else {
o.setAttribute("selected", "selected");
filteredValues.push(o.value);
}
}
self.#filteredLabelSets[key] = filteredValues;
self.reset(true);
@ -556,7 +577,6 @@ export class GraphPlot extends HTMLElement {
// TODO(jwall): Headers
for (const line of lines) {
// For streams the timestamps are in nanoseconds
// TODO(zaphar): We should improve the timstamp formatting a bit
let timestamp = new Date(line.timestamp / 1000000);
dateColumn.push(timestamp.toISOString());
metaColumn.push(labelsName);

4
static/site.css
View File

@ -39,6 +39,10 @@ input, textarea, select, option, button {
border-radius: 4px;
}
option[selected] {
background-color: var(--plot-background-color);
}
body * {
padding-left: .3em;
padding-right: .3em;