openfoodfacts/smooth-app

Create a visual interface for advanced search filtering

teolemon opened this issue · 12 comments

teolemon commented

What

Backend readiness

UI approach

  • Rather than the sophisticated mockups inspired by the GitHub advanced search or anything else, I propose we duplicate the advanced search form of the web version as a first step, to get something working as quickly as we can, focusing on the basics
  • https://world.openfoodfacts.org/cgi/search.pl?graph=1

Components

  • (Advanced search) Create a visual interface for filtering by keyword
  • (Advanced search) Create a visual interface for filtering by facet/criteria
    • Add autocomplete modal for facet/criteria type
    • Add operand: "contains/does not contain"
    • Add autocomplete for facet/criteria value field
    • Add/Remove additional criteria
    • image
  • (Advanced search) Create a visual interface for filtering by nutrient
    • Add autocomplete for nutrients
    • Add operands for nutrients
      • name="nutriment_compare_0" id="nutriment_compare_0
      • lt <
      • lte ≤
      • gt >
      • gte ≥
      • eq =
    • Add numeric input for nutrient value
    • image
  • Filter by Ingredients
    • Additives Without With Indifferent
    • Ingredients from palm oil Without With Indifferent
    • Ingredients that may be from palm oil Without With Indifferent
    • Ingredients from or that may be from palm oil Without With Indifferent
    • image
  • (Advanced search) Add "Results in a list of products"
    • Add sorting options
      • sort_by" id="sort_by
      • unique_scans_n Popularity
      • product_name Product name
      • created_t Add date
      • last_modified_t Edit date
      • completeness Completeness
  • (Advanced search) Add "Results on a graph"
    • The graph will show only products for which displayed values are known.
    • Graph title
    • Select what you want to graph on the horizontal axis to obtain a histogram, or select two axis to get a cloud of products (scatter plot).
    • Add a dropdown/select modal for Horizontal axis
    • Add a dropdown/select modal for Vertical axis
    • Add a toggle to use a different colour for "Organic" products
    • Add a toggle to use a different colour for "Fair trade" products
    • Add a toggle to use a different colour for "With sweeteners" products
    • Add a toggle to "Use nutrition grades colours" products
  • (Advanced search) Results on a map
    • Add map title
    • Add hint to what you need to map (origins of ingredients ? packager codes ?)
    • Find a rendering engine able to plot many points
    • Plot points on a map
    • Add tappable markers that open the product on tap
  • (Advanced search) Download results
    • Add note "Download results in XLSX or CSV format. Please note that for performance reasons, you can download up to 10.000 results only."
    • XLSX format - Excel or LibreOffice input type="radio" name="format" value="xlsx" id="format_xlsx" checked=""
    • CSV format - Character set: Unicode (UTF-8) - Separator: tabulation (tab) input type="radio" name="format" value="csv" id="format_csv"

Old mockups

image

Part of

teolemon commented

Or we could stick to the Web UI as a first iteration, potentially in a separate view from the current search first
image

teolemon commented

I've opened an openfoodfacts-dart issue openfoodfacts/openfoodfacts-dart#515
because I fear we might be lacking full support from the V2 search endpoint

teolemon commented

Bumping to P1

M123-dev commented

Had a lot to do lately, now I'm more active again, if you need a quick review feel free to ping me on them 😄

  • 👍1
teolemon commented

For the record, I just lost 30 min of edits on this issue 😿

teolemon commented

@monsieurtanuki @M123-dev @g123k I have reworked the "Advanced Search" description, splitting it into tasks, with a new UI approach.
Rather than the sophisticated mockups inspired by the GitHub advanced search or anything else, I propose we duplicate the advanced search form of the web version as a first step, to get something working as quickly as we can, focusing on the basics

monsieurtanuki commented

@teolemon I'm currently glued in the "background task + refresh" issue. I can put it on the shelf and work rather on the advanced search if needed.
My main question is: from where in the UX/UI do we reach the advanced search page?

monsieurtanuki commented
  • We also need #2785 for that.
teolemon commented
  • #2785 added to the description
  • I was thinking of an experimental screen first, and then binding that to the main search as a refinement button ?
  • Can we split that into parts for Hacktoberfest ?
monsieurtanuki commented

@teolemon If I sum up, that would mean, in parallel:

  • creating a new "advanced search" page in dev mode
    • populate that page with whatever UI you want
    • including a "Go!" button, that in a first approach will just sum up the query by printing all parameters (no actual execution)
  • checking that we are able to deal with each parameter on the off-dart side as search query parameters

Then, link all the UI inputs with search query parameters.

Then, code the actual "Go!" action.

  • And some day, code #2785 - we don't really need it now for dev level purposes, except that the cache will look surprising without it (temporary solution: manually refresh your page when it's labelled as "cached x minutes ago").