Skip to content

Commit

Permalink
Bound box width in "Analysis" tree
Browse files Browse the repository at this point in the history
For queries with many variables, the box for a node in the "Analysis"
tree can become very wide, which makes visual parsing very hard. This
change limits the width of the fields for the operation and the column
(which both list variables) to 30 characters, and shows ellipsis if they
are longer. It also sets the `title` field, so that one can always get
the full contents in the tooltip via a mouseover.
Hannah Bast committed Oct 6, 2024
1 parent 10b560c commit a58b7e5
Showing 2 changed files with 9 additions and 0 deletions.
2 changes: 2 additions & 0 deletions backend/static/css/style.css
Original file line number Diff line number Diff line change
@@ -297,6 +297,7 @@ li.CodeMirror-hint-active {

#result-tree .node > p { margin: 0; white-space: nowrap; }
#result-tree .node-name { font-weight: bold; }
#result-tree p.node-name { width: 30em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#result-tree .node-status { font-size: 90%; color: #000099; }
#result-tree .node.not-started { color: #999; }
#result-tree p.fully-materialized { display: none; }
@@ -307,6 +308,7 @@ li.CodeMirror-hint-active {
#result-tree .node-status.optimized-out { color: blue; }
#result-tree .node-status.lazily-materialized { color: blue; }
#result-tree .node-cols:before { content: "Cols: "; }
#result-tree p.node-cols { width: 30em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#result-tree .node-size:before { content: "Size: "; }
#result-tree .node-size { display: inline; }
#result-tree .node-size-estimate { display: inline; padding-left: 1em; }
7 changes: 7 additions & 0 deletions backend/static/js/qleverUI.js
Original file line number Diff line number Diff line change
@@ -863,6 +863,13 @@ function renderRuntimeInformationToDom(entry = undefined) {
$("p.node-status").filter(function() { return $(this).text() === "not yet started"}).parent().addClass("not-started");
$("p.node-status").filter(function() { return $(this).text() === "optimized out"}).addClass("optimized-out");

// For each <p>...</p> in #result-tree with class node-name or node-cols, add
// a title tag with the content of the <p>...</p> (to show the full text on
// hover).
$("#result-tree p.node-name, #result-tree p.node-cols").each(function () {
$(this).attr("title", $(this).text());
});

if ($('#logRequests').is(':checked')) {
const queryHistoryList = $("<ul/>", { class: "pagination" });
// Note: when we later iterate over this `Map`, we get the key-value

0 comments on commit a58b7e5

Please sign in to comment.