Create a visual interface for advanced search filtering

[teolemon]

What

Backend readiness

• feat: #307 - added 21 enum values for advanced search parameters openfoodfacts-dart#313
• Original form on the web for any remaining reverse engineering: https://world.openfoodfacts.org/cgi/search.pl?graph=1
• API v2: sort_by=last_modified_t openfoodfacts-dart#523
• API v2: salt_100g=%3E10&salt_100g=%3C15 openfoodfacts-dart#530
• nova_groups search parameter openfoodfacts-dart#539
• Implement Search V2 API to the fullest openfoodfacts-dart#515
• Upgrade of product list key, allowing for more search parameters #2785

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
  • 
• (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
  • 
• 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
  • 
• (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

• Initial mockups on Figma

Part of

• 🔍 Search (tracker) #991

[teolemon]

• @monsieurtanuki initial search to leverage feat: #307 - added 21 enum values for advanced search parameters openfoodfacts-dart#313

[teolemon]

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

[teolemon]

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]

Bumping to P1

[monsieurtanuki]

For that I need more active reviews in off-dart, like

• feat: #517 - added ECOSCORE and NUTRISCORE sort-by options openfoodfacts-dart#522
• feat: #524 - added ingredients analysis tags (vegan, vegetarian, palm oil free) openfoodfacts-dart#525
• feat: #526 - new AllergensParameter search filter openfoodfacts-dart#527
• feat: #531 - new StatesTagsParameter search filter openfoodfacts-dart#532
• feat: #516 - API v2 for multi barcode search openfoodfacts-dart#533
• fix: deprecated search methods in favor of searchProducts openfoodfacts-dart#534

[M123-dev]

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 😄

[teolemon]

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

[teolemon]

@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]

@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]

• We also need Upgrade of product list key, allowing for more search parameters #2785 for that.

[teolemon]

• Upgrade of product list key, allowing for more search parameters #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]

@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 Upgrade of product list key, allowing for more search parameters #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").