Query Builder UX Concepts

On Discord tienson wrote:

Thank you all for the feedback on the query builder, it’s something we’re going to design && implement soon.
So if you have any suggestions on the implementation, please create a post on Logseq Forum to keep it organized :pray:

The macOS finder has a good UX alread, and numerous other apps have copied and adapted it. For instance, see 2Do, Hazel, NameMangler, and HoudahSpot.

2 Likes

I’m thinking about an interface with a drop-down menu where you can select the type of item you want to query, the attribute(s), the operators of your choice and “+” buttons to add more items/attributes. So it would be like

  • The dropdown menu: (Page|Block|Property|Task)
  • A field for attributes (Page/Tag/Block/Property Name) or a drop-down menu: (todo|doing|done|now|later,…) if you chose “task” as the attribute
  • A drop-down menu to choose an operator: (and/not/or/…)
  • And then the same pattern as above goes on: fields and drop-down menus to choose: type, attribute, operator.
  • Then a “+” sign to add more type menus, attribute fields and operator menus.
    I hope this explanation is understandable. It’s hard to describe an interface and it’s functioning.
2 Likes

Roam query builder plugin: GitHub - dvargas92495/roamjs-query-builder

2 Likes

To me the ability to display journal date for blocks defined in the journal is essential. It would be great if it could be one of the columns and the table could be easily sorted by it.

Hi all,

this is a mockup inspired by indented lists:

  • the relation between lines is considered “AND”
  • the first dropdown menu lists options like “Property, Reference, Parent page, OR and NOT”
  • the next dropdown menus display different options, for example if the filter is “Property” the second menu lists property keys and the third menu lists values
  • special options like “See below” or “OR” are meant to be used with indented lines
  • the special option “Range” introduces two more dropdown menus

What do you think of this “framework”? Is there any use case that you think is not covered?


Edit: here there are some additional UI niceties:

  • assuming the bullet point reminds the multiplication sign or * and normally the lines are in a AND relation
  • the bullets points of children blocks when selecting OR from the first dropdown menu could be rendered as a + sign, like in Boolean Algebra
  • the bullet point of a block with NOT selected from first dropdown menu could be rendered as the sign - (minus)

4 Likes

The following is not strictly about the query builder but on making it easy to discover:

  • In various places of Logseq UI, like (Un)Linked References sections, it could be possible to apply filters with the same query builder UI
  • Those places would act as “entry points” to discover queries
  • The first filter would be fixed and not editable, for example “Linked References” could be filtered with query builder UI but the first filter “References from <current page>” could greyed out
  • the equivalent query syntax ({{query ...}}) could be displayed (but greyed out) while using the builder and a “Copy” button could let the user copy in and later paste it elsewhere, eventually re-editing it with query builder or the usual syntax

Edit, here there is a mockup:

3 Likes

I think in the same way there could be many types of filters, like has a tag, has a parent with a tag, links to pages, pages link here, is a ref, on a whiteboard, different types of whiteboard shapes.

The tree structure allows some filters to have more sub filters.

Like this, it seems almost possible to prototype this in normal Logseq with a plugin. :thinking:

1 Like

In case we want options on how to display results (list, table etc), sort them and group them, I tried to expand my concept:

The results of the example above would look like this:

2 Likes

I don’t know if it would be part of the builder but I would really appreciate auto-suggestion / auto-completes when trying to build a query. Similar to how you get suggestions when typing a / or >, except within the query and with relevance to the things that can be entered in a query.

{{query (|)}}

(Where the cursor is at the |) Would display the things like and or property page-tags page-property sort-by… Etc. I know it’s not an exhaustive list but it would be fantastic if it could do that

I like that your UX mock-up includes sorting options as well. That is important.