feat: ingredients knowledge panels #10904

stephanegigandet · 2024-10-15T15:50:59Z

This PR adds knowledge panels for ingredients, to list each ingredient below the ingredient list.
Each ingredient panel can be opened to get a description from: https://github.com/openfoodfacts/openfoodfacts-web/tree/main/knowledge_panels

Known issue: most ingredients do not currently have a description, they contain an empty panel.

alexgarel · 2024-10-16T07:59:21Z

/update_tests_results

alexgarel

LGTM but some comments and maybe a mistake ?

lib/ProductOpener/KnowledgePanelsIngredients.pm

alexgarel · 2024-10-16T08:18:51Z

templates/api/knowledge-panels/health/ingredients/ingredient.tt.json

+    [% IF panel.ingredient_description OR panel.wikipedia_abstract %]
+    "expanded": false,
+    [% ELSE %]
+    "expanded": false,


This is strange !

Shouldn't the second expanded be true ?

It's temporary, in fact what we really want is to make the first one (no description) not expandable. But currently the non expandable panels are displayed in a very different way (at least on the web, I haven't checked mobile). So we will need a better way.

alexgarel · 2024-10-16T08:21:54Z

templates/api/knowledge-panels/health/ingredients/ingredient.tt.json

+    "expanded": false,
+    [% END %]
+    "title_element": {
+        // Note: the app displays line feeds as line feeds...


Suggested change

// Note: the app displays line feeds as line feeds...

// Note: the app displays line feeds as line feeds...

// so we have to keep whole title expression on one line !

I just added a double backtick function so that we can have things on multiple lines that are then converted to one line without linebreaks.

alexgarel · 2024-10-16T08:22:21Z

templates/api/knowledge-panels/health/ingredients/ingredient.tt.json

+    [% END %]
+    "title_element": {
+        // Note: the app displays line feeds as line feeds...
+        "title": `        [% dash = "-" %]        [% dash.repeat(panel.level) %]        [% display_taxonomy_tag_name("ingredients", panel.ingredient_id) %]        [% IF panel.ingredient.percent.defined %]            ([% round(panel.ingredient.percent) %]%)        [% ELSIF panel.ingredient.percent_estimate.defined %]            ([% round(panel.ingredient.percent_estimate) %]% [% lang("estimate") %])        [% END %]        `,


Can't we eventually deport this computation in the ingredient panel creation ?

Well the idea of using Template::Toolkit was that people could change the layout / design decisions from the panels, without having to change the Perl code. So that's why I try to put things that are more design things in the template. Here I tried to show the sub-ingredients, and I'm just pushing dashes in front, which is not very clear (but it's something..). There may be other better ways to do that.

alexgarel · 2024-10-16T08:23:51Z

templates/api/knowledge-panels/health/ingredients/ingredient.tt.json

+        {
+            "element_type": "text",
+            "text_element": {
+                "html": `[% panel.ingredient_description %]`


Suggested change

"html": `[% panel.ingredient_description %]`

"html": `[% edq(panel.ingredient_description) %]`

The backticks already take care of escaping quotes, so edq() is not needed:
see https://github.com/openfoodfacts/openfoodfacts-server/blob/main/lib/ProductOpener/KnowledgePanels.pm#L298

ok cool, that's what I though first, but down in the same file you put edq inside backtick !

alexgarel · 2024-10-16T08:24:48Z

templates/api/knowledge-panels/health/ingredients/ingredients.tt.json

@@ -55,6 +55,15 @@
                `,
            },
        },
-        [% END %]        
+        [% END %]       
+        [% IF 1 %]


it should be if we have feature ingredient right ?

ah it should be if we have an ingredients_list panel, but the condition I put before didn't work, so I just put 1. I'll change that.

Co-authored-by: Alex Garel <alex@openfoodfacts.org>

stephanegigandet · 2024-10-16T10:09:47Z

/update_tests_results

teolemon · 2024-10-16T10:28:20Z

@stephanegigandet some feedback from this morning's battle testing.

Putting the percentage estimate in the title is too proeminent (it should be in the card with a disclaimer) + it wasn't localized (eg: "6% estimation")
Mixing English and French is confusing (on products with multiple languages)
Sometimes there are hyphen before some ingredients (sub-ingredients ?)

stephanegigandet · 2024-10-16T13:21:48Z

Thanks for the feedback @teolemon

Putting the percentage estimate in the title is too proeminent (it should be in the card with a disclaimer) + it wasn't localized (eg: "6% estimation")

I'm not sure what you mean by "it should be in the card", if we only see the % of the ingredient when we click on it, it's less useful than being able to see the % for all ingredients. That's one of the added value compared to the original list of ingredients from the package:

Not sure either about the localization, today we display "Potato (6% estimate)" in English and "Pomme de terre (6% estimation)" in French, so it is localized. Maybe "estimate" takes too much room? We could do ~6%, but it's less explicit.

Mixing English and French is confusing (on products with multiple languages)

We display the text ingredient list in the user's language if we do have it, and we display the ingredients panels in the user language in all cases. I would think it's more useful that way?

Sometimes there are hyphen before some ingredients (sub-ingredients ?)

Yes, this is to convey that there sub ingredients (or sub sub sub ingredients). Not ideal, but better than a completely flat list I guess. We could try to indent more instead of using hyphens, but we would need to extend a bit the knowledge panels grammar.

stephanegigandet · 2024-10-16T15:00:11Z

I changed a bit the display:

stephanegigandet · 2024-10-16T15:09:34Z

Related issue on the mobile app: openfoodfacts/smooth-app#5700

teolemon · 2024-10-16T15:57:25Z

"it should be in the card", (....) That's one of the added value compared to the original list of ingredients from the package:

Probably we should have vegan, vegetarian, icons next to them, plus whether the ingredient is an agribalyse/ecobalyse match. Your proposal regarding rounding might solve my concerns (it was looking ridiculous to have 10 ingredients+ including glucose syrup at 0%)

Not sure either about the localization, today we display "Potato (6% estimate)" in English and "Pomme de terre (6% estimation)" in French, so it is localized. Maybe "estimate" takes too much room? We could do ~6%, but it's less explicit.

"estimation 6%" or "estimé à 6%" or "6% estimé" sounds more French than "6% estimation". or at least with an hyphen "6% - Estimation"

Mixing English and French is confusing (on products with multiple languages)

I had the case of a product with a German ingredient list which included glucose syrup. In the app we showed the French list, but the German normalized ingredients were shown

Sometimes there are hyphen before some ingredients (sub-ingredients ?)

Quick n Dirty fix: ↳
17:45
https://www.alt-codes.net/arrow_alt_codes.php

stephanegigandet · 2024-10-17T08:42:31Z

Probably we should have vegan, vegetarian, icons next to them, plus whether the ingredient is an agribalyse/ecobalyse match.

So at this point, we are showing each ingredient in a knowledge panel title. In the current version of knowledge panels, we can display 1 icon at the left, but that's it. We can add more text, but adding icons would require changes to the knowledge panel API + its implementation on web and mobile.

I had the case of a product with a German ingredient list which included glucose syrup. In the app we showed the French list, but the German normalized ingredients were shown

We analyze ingredients only in 1 language, and we use the ingredient analysis to display the list of ingredients, so that's the current "normal" behaviour.

For the sub-ingredients, I'm not sure if the down + right arrow is more clear. It works well with 1 level, but multiple levels is less obvious:

teolemon · 2024-10-17T08:51:57Z

@stephanegigandet I've made further proposals there: Ingredients knowledge panel (tracker) #10906

stephanegigandet · 2024-10-17T12:19:27Z

/update_tests_results

sonarcloud · 2024-10-17T12:49:48Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

feat: ingredients knowledge panels

5a3a5d0

stephanegigandet requested a review from a team as a code owner October 15, 2024 15:51

github-actions bot assigned stephanegigandet Oct 15, 2024

github-actions bot added 📖 Knowledge Panels https://wiki.openfoodfacts.org/Knowledge_panels Template::Toolkit The templating toolkit used by product opener. The starting point for HTML/JS/CSS fixes. 🌐 Translations labels Oct 15, 2024

stephanegigandet temporarily deployed to off-net October 15, 2024 16:03 — with GitHub Actions Inactive

stephanegigandet added 2 commits October 15, 2024 18:17

ingredients templates

dbb3330

fixes for mobile app

c81a152

stephanegigandet temporarily deployed to off-net October 15, 2024 16:58 — with GitHub Actions Inactive

alexgarel approved these changes Oct 16, 2024

View reviewed changes

test: Update tests results

2eccff5

github-actions bot added API Issues related to the Open Food Facts API. More specific labels exist & should be used (API WRITE…) 🧪 tests 🧪 integration tests labels Oct 16, 2024

stephanegigandet and others added 7 commits October 16, 2024 10:33

double backticks

bfc4513

update tests

99c52e4

panels without content cannot be expanded

fc47017

panels without content cannot be expanded

47dc289

Update lib/ProductOpener/KnowledgePanelsIngredients.pm

e6c7ad6

Co-authored-by: Alex Garel <alex@openfoodfacts.org>

Update lib/ProductOpener/KnowledgePanelsIngredients.pm

98b62b4

Co-authored-by: Alex Garel <alex@openfoodfacts.org>

fix template

8c18816

stephanegigandet added 3 commits October 16, 2024 16:53

< 2%

972b015

< 2%

c504614

< 2%

e2e7427

merged

b26162f

github-actions bot added the CSS label Oct 16, 2024

teolemon added the Ingredients knowledge panel label Oct 16, 2024

lint

8fbe28f

stephanegigandet temporarily deployed to off-net October 17, 2024 12:28 — with GitHub Actions Inactive

test: Update tests results

2a9cdf6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ingredients knowledge panels #10904

feat: ingredients knowledge panels #10904

stephanegigandet commented Oct 15, 2024

alexgarel commented Oct 16, 2024

alexgarel left a comment

alexgarel Oct 16, 2024

stephanegigandet Oct 16, 2024

alexgarel Oct 16, 2024

stephanegigandet Oct 16, 2024

alexgarel Oct 16, 2024

stephanegigandet Oct 16, 2024

alexgarel Oct 16, 2024

stephanegigandet Oct 16, 2024

alexgarel Oct 16, 2024

alexgarel Oct 16, 2024

stephanegigandet Oct 16, 2024

stephanegigandet commented Oct 16, 2024

teolemon commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

teolemon commented Oct 16, 2024

stephanegigandet commented Oct 17, 2024

teolemon commented Oct 17, 2024

stephanegigandet commented Oct 17, 2024

sonarcloud bot commented Oct 17, 2024

	// Note: the app displays line feeds as line feeds...
	// Note: the app displays line feeds as line feeds...
	// so we have to keep whole title expression on one line !

	"html": `[% panel.ingredient_description %]`
	"html": `[% edq(panel.ingredient_description) %]`

feat: ingredients knowledge panels #10904

Are you sure you want to change the base?

feat: ingredients knowledge panels #10904

Conversation

stephanegigandet commented Oct 15, 2024

alexgarel commented Oct 16, 2024

alexgarel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephanegigandet commented Oct 16, 2024

teolemon commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

stephanegigandet commented Oct 16, 2024

teolemon commented Oct 16, 2024

stephanegigandet commented Oct 17, 2024

teolemon commented Oct 17, 2024

stephanegigandet commented Oct 17, 2024

sonarcloud bot commented Oct 17, 2024

Quality Gate passed