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