Knowledge panels for facet pages (tracker)

[teolemon]

What

• Self service linking to Wikidata (stored the same way as translations)
• Self-service uploading of SVG/PNG of logos (stored somewhere, not live immediately, and then manually committed to the repository)
• Deep link to Hunger Games to annotate more products and logos (Integrate Hunger Games on the category, labels and brands pages #2804 )
• Knowledge panels specific to the facet / faceted value #8182

Tasks

Beta Give feedback

1. Turn the category averages on the category facet page into a knowledge panel
2. Turn the packager code map and address on the packager codes facet page into a knowledge panel
3. Turn the Additives EFSA evaluation on the additives facet page into a knowledge panel
4. Turn the histogram on the NOVA groups facet page into a web-only knowledge panel #10216
   Nova - Ultra-processed foods P2 📖 Knowledge Panels - For facets +3
5. Turn the histogram on the Nutri-Score facet page into a web-only knowledge panel #10214
   P2 🎨 Mockup required 📖 Knowledge Panels - For facets 🚦 Nutri-Score +4
6. Turn the histogram on the Eco-Score facet page into a web-only knowledge panel #10215
   🌱 Eco-Score 📖 Knowledge Panels - For facets +2
7. Use the Knowledge panel card metaphor for the average nutrition facts on the category facet #7558
   P2 categories facets good first issue ⏰ Stale 🎨 Mockup required 🎨 New design 📖 Knowledge Panels - For facets +8
8. Turn the "Organization Members" in the editor facet into a knowledge panel
9. Add a CSS style to the knowledge panels provided by the facet knowledge panel engine
10. Turn the additives functions into a knowledge panel
11. Add a customized promotion knowledge panel for the app (eg: the app for vegan products, for Nutri-Score, for Eco-Score, for Label XYZ)
12. Improve how knowledge facets for facets are displayed on the web #10213
    P2 🎨 Mockup required 🎨 New design 📖 Knowledge Panels - For facets +4

Part of

• 📖 Knowledge panels (Tracker) #5493

Mockups

<div class="card" style="
"><br><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Get the Eco-Score of products with the Open Food Facts app</h4><p style="
    padding: 10px;
"><a href="https://world.openfoodfacts.org/open-food-facts-mobile-app">The Open Food Facts app</a> allows you to quickly get the Eco-Score of products: all you have to do is scan their barcode. If you have already installed the Open Food Facts app, please update it to get the new version!</p>
    <img src="https://static.openfoodfacts.org/images/misc/mobileapp/new_openfoodfacts_app_en_light_3_screenshots.png" alt="The Eco-Score on the Open Food Facts app" style="/* max-height: 400px; */">
</div>

<div class="card"><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Discover how the Eco-Score is computed</h4>

<a href="/ecoscore" class="buttonbar button" style="top:0;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg> <span class="bt-text">Discover the Eco-Score methodology</span></a></div>

[teolemon]

[doublah]

Could probably show the brand website from wikidata and link that too.

[teolemon]

Probably related to the Taxonomy Editor

[alexgarel]

I think https://github.com/openfoodfacts/facets-knowledge-panels is part of the answer.

[teolemon]

After the call with the agency, a quick and dirty mockup on how the facet page could be improved @stephanegigandet @alexgarel @raphael0202

<div class="card" style="
"><br><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Get the Eco-Score of products with the Open Food Facts app</h4><p style="
    padding: 10px;
"><a href="https://world.openfoodfacts.org/open-food-facts-mobile-app">The Open Food Facts app</a> allows you to quickly get the Eco-Score of products: all you have to do is scan their barcode. If you have already installed the Open Food Facts app, please update it to get the new version!</p>
    <img src="https://static.openfoodfacts.org/images/misc/mobileapp/new_openfoodfacts_app_en_light_3_screenshots.png" alt="The Eco-Score on the Open Food Facts app" style="/* max-height: 400px; */">
</div>

<div class="card"><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Discover how the Eco-Score is computed</h4>

<a href="/ecoscore" class="buttonbar button" style="top:0;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg> <span class="bt-text">Discover the Eco-Score methodology</span></a></div>

[teolemon]

We could reuse some of the material we're creating for social media (eg the analysis done for world pulse day)