Browsing: Beyond the carousel

[jvwong]

Description

Q: What is the name of the feature?

A: Browse (beyond the carousel)

Q: What does this feature enable the user to do?

A: Access any public document via homepage

Q: What information must the user provide to use the feature?

A: N/A

Q: How does this feature affect each class of user (persona)?

A: All would benefit from browsing and exploration

Specification

Mockup

This is a common pattern now. An popular example is Pinterest -- an infinite scroll grid and a search bar.

Details

• Grid UI
  • react-infinite-scroll
  • CSS grid or CSS flex box
• Search has several options for the back end:
  • Google custom search JSON API
  • rethinkdb log stash
  • rethinkdb elastic search sync
  • Use elastic search manually
    • Rebuild the index when you start the factoid server
    • Add to index on submit

[maxkfranz]

I've fleshed out the issue description more, including links for reference.

[maxkfranz]

Note that the ideal version of this would be to delegate to Google rather than to have our own page. Google search results are much more discoverable because most people start from Google anyway. Only users who already know about Biofactoid would be able to use a search page that we host ourselves.

The CTA button here could be replaced with a button that starts a Google search ('search for articles' instead of 'add my article'):

A search link could be added to the navigation items at the top of the page (i.e. beside 'contact', 'twitter'). Further, a search button could be added alongside the existing 'add my article' button:

[jvwong]

Yeah I agree. This is related to 'Index images via sitemap' in #842 (comment).

Also we should be mindful of when this sort of thing should be handled by PC SIFGraph

[maxkfranz]

There's also Google Custom Search: https://programmablesearchengine.google.com/about/

That may have more options on how to control how the search results look (i.e. show rich cards).

[maxkfranz]

The custom search has a JSON API that could power an eventual grid browser page: https://developers.google.com/custom-search/v1/introduction

[jvwong]

For the sake of time, scope this issue strictly to browsing. Can reuse ideas for "search" later...

• 1. Homepage: Some way to link to browse all

• 2. New page: Scroll to browse

[jvwong]

This is related to #909

[maxkfranz]

I had something similar in mind:

biofactod-search.mov

• The results there are currently canned, because we don't have a search service.
• If the list of all factoids is small and cached, then we can show all the results with scrolling when you hit "Search" instead of showing the results only after you type.
• If the list of all factoids is small, we don't technically need a proper search service -- for now. We can do an in-memory search on the full list.

[maxkfranz]

https://www.npmjs.com/package/minisearch

[jvwong]

Oh great that looks exactly the same - didn't want to go to another page anyways.
String-match search in memory is good enough for the time being

[jvwong]

Let me know if you have a branch or if you want me to work on anything.

[maxkfranz]

It would be really helpful if you could look into the minisearch library and make a class with a search function — search(qString). The class should have an index function that takes in all the doc jsons from our /documents route.

I still have some kinks to work out in the UI, but I wanted to share the video asap