Hiding the Query Builder

[Will_Coombe]

Hi there,

Is there any way for me to get rid of the query builder selections from my table view? (see image)

It’s taking up a ridiculous amount of vertical space and detracts from the table?

Thanks in advance!

[mentaloid]

Could put into file custom.css something like this:

.cp__query-builder {
  display: none;
}

[FlorianF]

I have this setup:

.cp__query-builder-filter {
  opacity: 0;
  margin-top: -30px; /* Apply negative margin to bring it up */
  transition: opacity 0.3s, margin-top 0.3s; /* Add transitions for smooth effect */
}

.custom-query:hover .cp__query-builder-filter {
  opacity: 1;
  margin-top: 0; /* Reset margin to its original value */
}

and it’s working fine. It hides the builder and shows it on hover. I would so much like to be able to set titles for simple queries and, instead of the “Live query” text, to have the query title but I am not sure that is possible with css… perhaps as a Feature Request…

[elfrinjo]

That’s a nice one!

I also added this to minimze the whitespace around the query header and to compact tables:

/* Compact tables */
.whitespace-nowrap {
  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
}
/* Compcts live query header */
.custom-query > div:first-child {
    border-radius: 5px;
    padding: 2px 2px;
}

[Will_Coombe]

Thanks so much for this! It works great.

[Will_Coombe]

Used this and it’s smartened up my tables - thanks so much!

[FlorianF]

I have also added:

.table-auto {
  margin-top: 0;
  margin-bottom: 0;
}

… thought of posting it here

[PeterKibbel]

Great input! Thanks

I’ve got quite long queries:

Unfortunately this takes up a lot of space - even if not hovering:

Any chance to get rid of that space?
Thanks in advance!

[jaytonic]

Have you found a solutiojn for this?

[samoca96]

Actually, based on @FlorianF first answer, you would just need to adapt the margin-top to a greater value.

It does not matter if you put a big number, it will stop at the “Live query” object. The animation will cover a longer distance though. But it solves your “white space” issue quite well.

[Elyas]

@FlorianF’s solution worked out really well. My only gripe was the constant movement when hovering over the actual table, which caused the content to shift down.

This code makes it so that the reveal only happens when hovering over the space above the table from the left of “Live Query” to the right of the gear icon.

.cp__query-builder {
  height: 0;
  overflow: hidden;
}

.ls-block .custom-query>.th {
  margin-bottom:0;
}

.custom-query>.th:hover + .cp__query-builder {
  height: auto ;
}

[Will_Coombe]

@Elyas this was a massive improvement for me - thanks for sharing!

[alwisi]

Wow! Amazing! Tanks guys!

[terramoto]

I was having difficulty clicking the + sign to add new filters. i’m currently using the following:

.cp__query-builder>div>div.clauses-group {
  height: 0;
  overflow: hidden;
}

.ls-block .custom-query>.th {
  margin-bottom:0;
}

.custom-query>.th:hover + .cp__query-builder>div>div.clauses-group {
  height: auto ;
}
.cp__query-builder-filter{
  display:block;
}

[futurized]

hi @FlorianF , love the suggestion of giving queries titles – something i’m currently exploring. Being able to just collapse the visual query builder instead of the whole block is also something i added to my todo list.

[laterral]

this is definitely the right answer - just like links have labels, so should queries.

it’d bring more convergence to the functions. how difficult do you think this will be to implement/ how long will it take?

[FlorianF]

I don’t know if I mentioned it anywhere else but I have managed -for some time- to get Titles in Simple Queries by enclosing them in an Advanced Query and adding the :title component:

#+BEGIN_QUERY
{:title [:h3 "Reminders for today"]
:query  (and [[Reminder]] (property due-by <%today%> ) ) }
#+END_QUERY

So the Simple (Live) query:

{{query (and ( page [[Reminder]]) (property :due-by <%today%>))}}

gets enclosed in an Advanced query - triggered by typing <query (As opposed to /query) in Logseq:

#+BEGIN_QUERY

#+END_QUERY

Now you just add an opening and a closing bracket:

#+BEGIN_QUERY
{

}
#+END_QUERY

and add the :title [] and the :query each on a line.

Hope it helps.