Hide folder paths in embedded search?

As a pastor, Obsidian with the official Readwise plugin has become a core part of my study workflow. I tag my highlights in Readwise, and each week I have an overview page with an embedded query (w/ Query Control, of course!) to pull in all relevant highlights.

It works well as is, except for one nagging issue…

What I’m trying to do

In an embedded query, show only the filename, not the entire path.

HOW QUERY RESULTS APPEAR CURRENTLY…

HOW I WANT THEM TO APPEAR…

THE SMALLER THE SCREEN SIZE, THE MORE USEABILITY SUFFERS…


What I’ve tried

Short of moving highlights to a flat folder structure, I’m not sure what else to try. I’m willing to write a plugin if necessary, but wanted to check with the community first to see if there is an existing solution I’m missing first. Thanks!

I changed the title to more specifically describe the request (was “Cleaner embedded query results?”).

Thanks for the help, @CawlinTeffid—I guess I was overthinking it and didn’t want to repeat “What I’m trying to do” in the title!

The title is the first thing people see, and they use it to judge if they may be able to help, so it pays to make it informative. If some repetition happens because of it, that’s all right.

1 Like

Do you use the search operator path: in your queries?

I see the path only, when I explicitly include path: in a query:

```query
path:Daniel
```

versus:

```query
file:Daniel
```

Interesting! I do use path—here’s the full query:

path: Highlights/
line: #bible/daniel/7
hideTitle: true
sort: alphabetical

Just tried it with file instead, didn’t find any results. :confused:

file only finds file names, not folder names.

file: and path: do different things. This was just for testing, if search for file: displays the path in the user interface.

Obsidian’s Search feature seems to be designed to display everything it finds. So when you search for path content, it will show the paths. The behavior makes sense to me. :smiley:

As a solution, you could place all necessary data in the notes themselves. Then you wouldn’t have to search for the path.

For example by adding “highlights” as a tag to your YAML frontmatter properties. Then you could search for this:

tag:#highlights tag:#bible/daniel/7

I don’t use Readwise. But if it works similar to Omnivore it is possible to add tags to the template. A well designed template made all the difference for note import.

Here you go - this will hide all paths in your embedded queries :butterfly::

// path-chop (vanilla JS)

(function() { 
  let titleObserver;
  window.setTimeout(() => {leafSelector(); hidePath(); }, 500) // first run  
})();

function leafSelector() {
    let topTitle = document.querySelector('head title');
    titleObserver = new MutationObserver(function() {  
        // console.log('leaf switch');
        titleObserver.disconnect();  
        window.setTimeout(() => { leafSelector(); hidePath(); }, 300)
    });
    titleObserver.observe(topTitle, {childList: true });     
}

// replace query-paths between last "/" and last "."
function hidePath() {
  var innerDivs = document.querySelectorAll('.workspace-leaf.mod-active .tree-item.search-result .tree-item-inner');
  if (innerDivs.length > 0) {
    //console.log("scrubbed q paths. " );
    innerDivs.forEach(function(div) {
      var innerText = div.innerText.trim();
      if (innerText.includes('/')) {
        var startIndex = innerText.lastIndexOf('/') + 1;
        var endIndex = innerText.lastIndexOf('.');
        var extractedText = innerText.substring(startIndex, endIndex);
        div.textContent = extractedText;
      }
    });
  }
}

BEFORE:

Screen Shot 2024-06-02 at 9.25.26 AM

AFTER:

Screen Shot 2024-06-02 at 9.26.16 AM

HOW TO RUN IT:

You can use the “Javascript Init” plugin (to run JS in Obsidian).

To set it up (first-time only), just go to:

  • Preferences > community plugins > get “Javascript Init”.
  • Preferences > Javascript Init settings > paste the JS code in the box.
  • Refresh Obsidian [View > Force Reload]. (And if you ever modify the code, reload.)

**

If you have any questions or issues, feel free to say - :dove:

1 Like

So every 300ms this functions runs again and again to hide the path, @ZenMoto?

I would investigate using CSS before jumping to JavaScript for this. This post can help you examine things to find the correct selectors (if they exist): Obsidian CSS Quick Guide

does it run again and again to hide the path? @holroy

It only runs the check when you switch notes.

It just watches the <head><title> element… and if that title changes, it means you opened a different note, so it checks (once) if that note contains an embedded query…

If the new note does contain an embedded query, it runs the hidePath() function to clean the embedded paths (/books/daniel.md >>> daniel)

[That 300ms you asked about is just a delay to let the note load before checking (it’s not a repeating check)].

**

If you want - you can see exactly when everything runs - just uncomment these two lines in the code:

// console.log('leaf switch');

// console.log("scrubbed q paths. " );

Now, when you switch notes, it will say “leaf switch” in console.

And if the new note has embedded queries, it will say “scrubbed q paths” (and it will clean the paths).

:tropical_fish:

1 Like

Obsidian’s HTML doesn’t provide any classes or nesting for CSS selectors. :slightly_frowning_face: