Graphical interface for filtering/browsing tiddlers

Hello!

I’d like to create a graphical user interface to filter the tiddlers of interest and display links to them below. Imagine something similar to interface of an online store, where you select categories and features of interest, and the matching items are displayed below.
A quick example: let’s say I have a cookbook wiki and I have a graphical interface where I select region (“Europe” > “Italian”), dish type (“Dinner”), and perhaps maximal preparation time (60 minutes). Then all recipes tagged with “Italian”, “Dinner”, and with field “prep-time” value < 60 would be displayed below.
Of course that’s what a filter expression in advanced search can do, but I’m looking for a more graphical, mouse- and mobile-friendly interface, that doesn’t require as much typo-sensitive typing.

Has something similar been done before? I could’t find anything, because searching for anything related to “filtering”, “browsing”, or “searching” obviously yields many results unrelated to the specific thing I’m searching for.

What mechanisms/tools/plugins do you think would be helpful in creating such a thing? If there’s no out-of-the-box solution already there? I’ve been looking at these:

  • Core checkbox widget and edit-text widget – to input the tags and other conditions.
  • Dynamic Tables from Shiraz Plugin – to help with presenting the results in a table, if that turns to be the best way of presenting them.

Related, but not really what I’m looking for:

  • Locator Plugin – powerful, but seems complicated to use for me.
  • Command Palette – it allows to do a similar thing with keyboard, e.g. search through tiddlers with certain tags without typing a whole filter expression.

To be clear, I’m not asking for help in creating this, I hope I can do that with some effort (and will gladly share it when done). Just asking for some directions, as it seems like a lot of work and I don’t know if I’m missing something helpful. Thanks in advance!

$checkbox, $edit-text and $select should do the trick. What you need to do is construct the filter dynamically from the values selected in the UI elements (and stored in their corresponding tiddlers). I would recommend starting off by just printing out the tiddler titles that match, and leave better presentation of the results as a second step.

When I worked on something similar quite some time ago in my early days of exploring TW5, I also found myself needing a means to select a range of values for which I came up with a JavaScript based custom widget. I think you could do that today with just wikitext and CSS as well.

image

3 Likes