Similarly to Roam Research, we want to implement linked filters. Linked filters let a user filter through either the content of a page, the linked references to a page, or the content of a page that is in the sidebar.
From the page, or the linked references, the tags need to be extracted. Then from that list a user can build two sub-lists: one to exclude elements (from being displayed), one to include elements.
The proposed design in Athens is a little bit different from the one in Roam Research (in a good way!):
Amazingly, this list has already been implemented in the devcards.
I see three clear next tasks:
- The filter component needs to be displayed by clicking on the filter icon. The icon is actually missing when a page is displayed in the sidebar, and on pages themselves it needs to be added. Are there any other popup we can take a look at so that we know how to display the component?
- The list needs to be populated with the links in that page (or the links in the linked references if that's where we are). The parsing will probably be done in the event handler, when launching the popup.
- Finally, the bigger task will be filter out the blocks that are not supposed to be shown. This one begs a few questions, such as, should we display the children of a block that has an excluded tag, if the children have an included tag? (the answer is no)
The previous link was a link to the devcard for filters. If you look at filters.cljs in the devcards folder you will see it merely passes dummy data to the component. It shows up the shape the data structure we're passing down. It looks like this:
(def items
{"Amet" {:count 6 :state :added}
"At" {:count 130 :state :excluded}
"Diam" {:count 6}
; ...
"Vitae" {:count 1}})The filters.cljs file in the views folder contains the css and the Reagent components. The filters-el component contains a Reagent atom which is used to store the sort, the search and the items. The component takes a uid (of the page) and the list of item. The parsing and extraction of the items must happen somewhere else. A solution would be to use a coeffect, or extract them in the event handler before we display the popup? The problem with the event handler is that you only make the computation when you click? The page could be edited and we most likely want to be reactive to that. What if a tag is added to the page, you will want this to be reflected in the filters popup.
The second question is how to send back the results of our filters to the page, or the linked references?
I took a few minutes to make sure the wheel looks better, and it also spins in only one direction!
