mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2024-09-20 00:30:49 +00:00
Using tooltips for queries
This commit is contained in:
parent
7056e53e34
commit
eb920cce57
@ -27,8 +27,6 @@
|
|||||||
--summary-every-other-row-color: #F8F8F8;
|
--summary-every-other-row-color: #F8F8F8;
|
||||||
--highlight-color: #EEE;
|
--highlight-color: #EEE;
|
||||||
--bar-color: #FFCB80;
|
--bar-color: #FFCB80;
|
||||||
--legend-color: #FED;
|
|
||||||
--legend-border-color: #FFCB80;
|
|
||||||
|
|
||||||
--tooltip-text-color: white;
|
--tooltip-text-color: white;
|
||||||
--tooltip-background-color: black;
|
--tooltip-background-color: black;
|
||||||
@ -55,8 +53,6 @@
|
|||||||
--summary-every-other-row-color: #042e41;
|
--summary-every-other-row-color: #042e41;
|
||||||
--highlight-color: #064663;
|
--highlight-color: #064663;
|
||||||
--bar-color: #088;
|
--bar-color: #088;
|
||||||
--legend-color: #064663;
|
|
||||||
--legend-border-color: #064663;
|
|
||||||
|
|
||||||
--tooltip-text-color: white;
|
--tooltip-text-color: white;
|
||||||
--tooltip-background-color: #444;
|
--tooltip-background-color: #444;
|
||||||
@ -202,15 +198,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend {
|
|
||||||
font-family: monospace;
|
|
||||||
min-height: 4rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
background: var(--legend-color);
|
|
||||||
border: 1px solid var(--legend-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#nothing-selected {
|
#nothing-selected {
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 32pt;
|
font-size: 32pt;
|
||||||
@ -226,7 +213,6 @@
|
|||||||
.tooltip {
|
.tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: calc(100% + 0.5rem);
|
bottom: calc(100% + 0.5rem);
|
||||||
left: calc(50% - 0.25rem);
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
background-color: var(--tooltip-background-color);
|
background-color: var(--tooltip-background-color);
|
||||||
color: var(--tooltip-text-color);
|
color: var(--tooltip-text-color);
|
||||||
@ -234,12 +220,22 @@
|
|||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 20rem;
|
|
||||||
margin-left: -10rem;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tooltip-result {
|
||||||
|
left: calc(50% - 0.25rem);
|
||||||
|
width: 20rem;
|
||||||
|
margin-left: -10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-query {
|
||||||
|
left: 0;
|
||||||
|
width: 40rem;
|
||||||
|
margin-left: -3rem;
|
||||||
|
}
|
||||||
|
|
||||||
.note:hover .tooltip {
|
.note:hover .tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
@ -248,13 +244,21 @@
|
|||||||
content: " ";
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
|
||||||
margin-left: -1rem;
|
|
||||||
border-width: 0.5rem;
|
border-width: 0.5rem;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--tooltip-background-color) transparent transparent transparent;
|
border-color: var(--tooltip-background-color) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tooltip-result::after {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-query::after {
|
||||||
|
left: 3rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.nowrap {
|
.nowrap {
|
||||||
text-wrap: none;
|
text-wrap: none;
|
||||||
}
|
}
|
||||||
@ -451,8 +455,6 @@ const additional_data_size_points = [
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div id="legend" class="stick-left comparison"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
const constant_time_add = 0.01;
|
const constant_time_add = 0.01;
|
||||||
@ -605,7 +607,7 @@ function addNote(text) {
|
|||||||
note.appendChild(document.createTextNode('†'));
|
note.appendChild(document.createTextNode('†'));
|
||||||
|
|
||||||
let tooltip = document.createElement('span');
|
let tooltip = document.createElement('span');
|
||||||
tooltip.className = 'tooltip';
|
tooltip.className = 'tooltip tooltip-result';
|
||||||
tooltip.appendChild(document.createTextNode(text));
|
tooltip.appendChild(document.createTextNode(text));
|
||||||
|
|
||||||
note.appendChild(tooltip);
|
note.appendChild(tooltip);
|
||||||
@ -901,7 +903,14 @@ function render() {
|
|||||||
tr.appendChild(td_checkbox);
|
tr.appendChild(td_checkbox);
|
||||||
|
|
||||||
let td_query_num = document.createElement('td');
|
let td_query_num = document.createElement('td');
|
||||||
|
td_query_num.className = 'note';
|
||||||
td_query_num.appendChild(document.createTextNode(`Q${query_num}. `));
|
td_query_num.appendChild(document.createTextNode(`Q${query_num}. `));
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
tr.appendChild(td_query_num);
|
tr.appendChild(td_query_num);
|
||||||
|
|
||||||
sorted_indices.map(idx => {
|
sorted_indices.map(idx => {
|
||||||
@ -916,11 +925,6 @@ function render() {
|
|||||||
tr.appendChild(td);
|
tr.appendChild(td);
|
||||||
});
|
});
|
||||||
|
|
||||||
tr.addEventListener('mouseover', e => {
|
|
||||||
let legend = document.getElementById('legend');
|
|
||||||
legend.innerText = `Query ${query_num}: ${queries[query_num]}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
details_body.appendChild(tr);
|
details_body.appendChild(tr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user