Athena

[tangjeff0]

Tasks

• typing bug Athena #126 (comment)
• up and down to go through list
  • arrow keys work, but now needs the list needs to scroll
• two items can be highlighted at once: one from mouse hover, one from arrow keys
• enter - create new page or go to page
• shift-enter - open in right sidebar
• save and show recent searches Athena save and show recent items #208
• debouncing
• detect click outside of component to close
• create keybinding event listener that opens Athena from anywhere (e.g. cmd-k)
• UI part
• search part First steps for search box #20

Design

[prabhath6]

Is anyone working on fixing the save and show recent searches task from the above list? If not I would like to pick it up.
Below is the gif from my local changes.

I have a few questions regarding the design of this feature that I would like to discuss before pushing the changes.

[tangjeff0]

hi @prabhath6 thanks for this. I actually was just about to merge in some changes. I removed the cache, and added key down functionality (up, down, enter, shift-enter). This will likely affect how you implemented recent searches, but I'm happy to look at your fork.

• Current code changes: https://github.com/athensresearch/athens/compare/master...tangjeff0:athena-new-page?expand=1
• Demo: https://tangjeff0.github.io/athens/

[prabhath6]

Hi @tangjeff0, you can find my changes below. We have modified the same functions so i expect merge conflicts.
I am not sure where to store the recent items, so for now i am saving them to the *recent-items atom. The content of the atom is reset when the page is refreshed.

• Current code changes: https://github.com/athensresearch/athens/compare/master...prabhath6:athena-recent-items?expand=1

[tangjeff0]

Awesome code @prabhath6 ! I just merged in #201, which removes the *cache and merges all state into one atom. It also puts search results from pages and blocks into one vector. It was easier to concat all those results together at query time, but we should probably still have a separate vector for recent items. In fact, it should probably be in the re-frame db as your comment asks.

[prabhath6]

thanks @tangjeff0 🙂! I will pull in your changes, resolve the conflicts and move the recent-item to re-frame db.
One quick question

It also puts search results from pages and blocks into one vector.

All the search results or just the ones that the user clicked on.

[tangjeff0]

The vector is an (exact match OR nil), 20 page matches, and 20 block matches. If what you mean by the ones that the user clicked on are recents, it doesn't include those.

[tangjeff0]

It might also be easier to start with a fresh branch than to try to resolve the conflicts @prabhath6 .

[prabhath6]

Hey @tangjeff0, i pulled in your changes and built the save and show feature on top of them. Now the state is stored in re-frame db instead of an atom. I have opened a pull request.

[nthd3gr33]

Mani and Adrien, please comment here so I can assign you this task. Thanks 💚

[alaq]

👋 hi @nthd3gr33

• up and down to go through list
  • arrow keys work, but now needs the list needs to scroll

Probably a detail but may I also suggest Ctrl+j and Ctrl+k, like on Roam?

[itsrainingmani]

hi @nthd3gr33 🚀

[tangjeff0]

All keybindings will be configurable @alaq don't worry :)

[alaq]

• ~ figure out why this doesn't work for Safari, Firefox, and probably other non-Chromium browsers
  • will this work with Tauri?

This seems to be working again (tested in Firefox and Safari).

However, we may have found another issue: with the test data loaded, if you type one character only in athena, the page freezes and you have to close it (tested in Chromium and Firefox).

@tangjeff0 let me know if you feel like this needs a separate issue.

[nthd3gr33]

Quick update:

We (Team Seneca) made some progress on this today. We have implemented a solution so that the the arrow keys do scroll vertically through the menu items. That said, the animation is far from ideal. We also need to implement the following additional changes:

• stop allowing the index to go lower than 0 (or -1?)
• center the selected item vertically, except when the selected item is near the top or bottom of the list

Here is the code that we used today: (this goes in key-down-handler function in athena.cljs)

(= key KeyCodes.UP)
    (do
      (swap! state update :index dec)
      (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView false {:behavior "smooth" :block "center"}))))

(= key KeyCodes.DOWN)
    (do
      (swap! state update :index inc)
      (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView true {:behavior "smooth" :block "center"}))))

(code author: @itsrainingmani)

This issue of focus management turned out to be harder than we expected. My gut told me that we should do more research before hacking away further. Results of our research:

• elem.focus() is not a usable solution due to a Firefox bug (I also read that this bug exists at times for Safari as well)
• One of the most popular Reagent UI component libraries still has not finished Focus Management.
• using tabindexed may be another solution that is worth pursuing. (see this SO post)
• Roam uses blueprint as a React UI component library
• We might be able to take inspiration from how blueprint implements some of this (see their select function)

We will be working more on this issue tomorrow.

[tangjeff0]

It might be best to make two new issues: one for this typing bug and one for arrow-keys. @alaq @nthd3gr33 @itsrainingmani

[alaq]

Just opened #269 for the typing bug

[tangjeff0]

Can you make a separate issue for arrow keys and copy this comment ?

[itsrainingmani]

Opened issue for arrow keys #271

[nthd3gr33]

The hover issue still remains. We implemented parity with Roam (aside from the flickering) as can be seen in the Loom, but the three of us are thinking that the Dynalist functionality is probably more ideal.

Any thoughts on which direction is best?

https://www.loom.com/share/6873e869c9b743cd92832953c86a569b