Skip to content

keep the query column visible when scrolling the details table #1462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
toschmidt wants to merge 1 commit into
base: main
Choose a base branch
from
Open

keep the query column visible when scrolling the details table #1462

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 42 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,29 @@
padding: 0.1rem 0.5rem 0.1rem 0.5rem;
}

/* The query checkbox and number stay put while the table is scrolled
horizontally, so it is always clear which query a row belongs to.
The outline covers the table's 1px border-spacing and the
pseudo-element covers the body padding left of the table — without
them the cells scrolling underneath shine through around it. */
#details .details-query {
position: sticky;
left: 0;
z-index: 1;
background-color: var(--background-color);
outline: 1px solid var(--background-color);
}

#details .details-query::before {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
right: 100%;
width: 100vw;
background-color: var(--background-color);
}

.shadow:hover {
box-shadow: 0 0 1rem var(--shadow-color);
position: relative;
Expand Down Expand Up @@ -339,7 +362,6 @@
.tooltip-query {
left: 0;
width: 40rem;
margin-left: -3rem;
}

.note:hover .tooltip, .note:active .tooltip {
Expand All @@ -361,8 +383,7 @@
}

.tooltip-query::after {
left: 3rem;
margin-left: 0.5rem;
left: 0.5rem;
}

.nowrap {
Expand Down Expand Up @@ -1164,16 +1185,15 @@ <h2>Detailed Comparison</h2>
let th_checkbox = document.createElement('th');
let checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = true;
checkbox.checked = selectors.queries.every(selected => selected);
checkbox.addEventListener('change', e => {
[...document.querySelectorAll('.query-checkbox')].map(elem => { elem.checked = e.target.checked });
selectors.queries.map((_, i) => { selectors.queries[i] = e.target.checked });
renderSummary(filtered_data);
selectors.queries.fill(e.target.checked);
render();
updateHistory();
});
th_checkbox.className = 'details-query';
th_checkbox.appendChild(checkbox);
details_head.appendChild(th_checkbox);
details_head.appendChild(document.createElement('th'));
}

/// Table header
Expand All @@ -1194,7 +1214,7 @@ <h2>Detailed Comparison</h2>
tr.className = 'shadow';

let td_title = document.createElement('td');
td_title.colSpan = 2;
td_title.className = 'details-query';
td_title.appendChild(document.createTextNode('Load time: '));
tr.appendChild(td_title);

Expand All @@ -1219,7 +1239,7 @@ <h2>Detailed Comparison</h2>
tr.className = 'shadow';

let td_title = document.createElement('td');
td_title.colSpan = 2;
td_title.className = 'details-query';
td_title.appendChild(document.createTextNode('Data size: '));
tr.appendChild(td_title);

Expand All @@ -1245,29 +1265,32 @@ <h2>Detailed Comparison</h2>
let tr = document.createElement('tr');
tr.className = 'shadow';

let td_checkbox = document.createElement('td');
let td_query = document.createElement('td');
td_query.className = 'details-query';

let checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'query-checkbox';
checkbox.checked = selectors.queries[query_num];
checkbox.addEventListener('change', e => {
selectors.queries[query_num] = e.target.checked;
renderSummary(filtered_data);
render();
updateHistory();
});
td_checkbox.appendChild(checkbox);
tr.appendChild(td_checkbox);
td_query.appendChild(checkbox);

let td_query_num = document.createElement('td');
td_query_num.className = 'note';
td_query_num.appendChild(document.createTextNode(`Q${query_num}. `));
/// Padded to a fixed width so the checkboxes of Q0..Q9 line up with the rest.
let query_name = document.createElement('span');
query_name.className = 'note';
query_name.appendChild(document.createTextNode(` ${`Q${query_num}.`.padStart(4)}`));

let tooltip = document.createElement('span');
tooltip.className = 'tooltip tooltip-query';
tooltip.appendChild(document.createTextNode(`Query ${query_num}: ${queries[query_num]}`));
td_query_num.appendChild(tooltip);
query_name.appendChild(tooltip);

tr.appendChild(td_query_num);
td_query.appendChild(query_name);
tr.appendChild(td_query);

sorted_indices.map(idx => {
const curr_timing = selectRun(filtered_data[idx].result[query_num], selectors.metric);
Expand Down