Is it possible to hide a custom view if the query result is empty?

Questions & Help Queries
1

It seems that I got the concept of advanced queries pretty quickly and I have a bunch of them now, also with customized views. But some of them are empty, like queries for open tasks when I have done everything and then the header shows together with “No matched results”.
Is there a way to hide the whole block if the query has not returned any results?

2

Or maybe just modify the output message? Also looking for a similar solution.

3

A drastic way (use with caution) would be to add this code inside file custom.js:

function processNoResults(block) {
    const classList = block.classList;
    if (classList.contains("hidden")) return;

    function hideNoResults(div) {
        if (div.textContent === "No matched result") classList.add("hidden");
    }
    block.querySelectorAll(".custom-query-results .text-sm").forEach(hideNoResults);
}

const noResultsObserver = new MutationObserver(() => {
    document.querySelectorAll(".ls-block").forEach(processNoResults);
});

noResultsObserver.observe(document.getElementById("main-content-container"), {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"],
});
4

Maybe a bit too drastic for my taste yet :smiley:

5

css: .custom-query-results .opacity-90 { display: none;}

A little less drastic, but not as targeted. Opacity-90 is applied to the message, so only shows up when empty.

Could use :has to target the parent element/block.

6

Oh, I’ll try that! Thanks!

7

For me adding this to custom.js and reloading Logseq doesn’t do anything (maybe this is -again- due to the fact that I am using a “portable” version of Logseq, by extracting the Net45 folder from the .exe file).

Not seeing the results of the above code nor being able to read the code and understand what it does, I am seeing that a solution would be to just “collapsed:true” the Query-Block if empty. Is that possible?

8
  • The above code is straightforward. It (simply) hides:
    1. each (html) element of (css) class ls-block
      • i.e. the typical block element to be hidden
    2. which contains an element of class custom-query-results
      • i.e. the custom view
    3. which contains an element of class text-sm
      • i.e. the result of the query
    4. which has the exact value of No matched result
  • If it doesn’t work, it means that one of the four conditions is not met. An approach with collapsed:true :
    • has no better chances
      • because it needs the same conditions
    • makes unnecessary changes to the file
  • To find out why it doesn’t work in your case, should inspect with Ctrl + Shift + i