feat: link product attributes to knowledge panels (#6493)

openfoodfacts · Mar 22, 2022 · 4950f97 · 4950f97
1 parent 8a3548f
commit 4950f97
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 15 deletions.
diff --git a/html/js/product-search.js b/html/js/product-search.js
@@ -267,20 +267,29 @@ function display_product_summary(target, product) {
 			grade = attribute.grade;
 		}
 
-		attributes_html += '<li>'
-		+ '<div class="attribute_card grade_' + grade + '">'
+		// card_html will be either a <div> or a <a> element, depending on whether it is linked to a knowledge panel
+		var card_html = 'class="attribute_card grade_' + grade + '">'
 		+ '<img src="' + attribute.icon_url + '" style="height:72px;float:right;margin-left:0.5rem;">'
 		+ '<h4 class="grade_' + grade + '_title">' + attribute.title + '</h4>';
 
 		if (attribute.description_short) {
-			attributes_html += '<span>' + attribute.description_short + '</span>';
+			card_html += '<span>' + attribute.description_short + '</span>';
 		}
 
 		if (attribute.missing) {
-			attributes_html += "<p class='attribute_missing'>" + attribute.missing + "</p>";
-		}		
+			card_html += "<p class='attribute_missing'>" + attribute.missing + "</p>";
+		}
+
+		// check if the product attribute has an associated knowledge panel that exists
+		if ((attribute.panel_id) && (document.getElementById("panel_" + attribute.panel_id))) {
+			// onclick : open the panel content + reflow to make sur all column content is shown
+			card_html = '<a href="#panel_' + attribute.panel_id + '" onclick="document.getElementById(\'panel_' + attribute.panel_id + '_content\').classList.add(\'active\'); $(document).foundation(\'equalizer\', \'reflow\');"' + card_html + '</a>';
+		}
+		else {
+			card_html = '<div ' + card_html + '</div>';
+		}
 
-		attributes_html += '</div></li>';
+		attributes_html += '<li>' + card_html + '</li>';
 	});
 
 	$( target ).html('<ul id="attributes_grid" class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">' + attributes_html + '</ul>');

diff --git a/lib/ProductOpener/Attributes.pm b/lib/ProductOpener/Attributes.pm
@@ -263,11 +263,10 @@ A reference to the created attribute object.
 
 =head3 Initialized fields
 
-- Name - e.g. "Nutri-Score"
-- Setting name - e.g. "Good nutritional quality (Nutri-Score)"
-- Warning
-- Short description
-- Description
+- name: e.g. "Nutri-Score"
+- setting_name: e.g. "Good nutritional quality (Nutri-Score)"
+- icon_url
+- panel_id:	Linked knowledge panel (optional)
 
 =cut
 
@@ -282,19 +281,23 @@ sub initialize_attribute($$) {
 
 	if ($attribute_id eq "nutriscore") {
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/nutriscore-a.svg";
+		$attribute_ref->{panel_id} = "nutriscore";
 	}
 	elsif ($attribute_id eq "ecoscore") {
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/ecoscore-a.svg";
+		$attribute_ref->{panel_id} = "ecoscore";
 	}
 	elsif ($attribute_id eq "forest_footprint") {
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/forest-footprint-a.svg";
-	}	
+	}
 	elsif ($attribute_id eq "nova") {
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/nova-group-1.svg";
+		$attribute_ref->{panel_id} = "nova";
 	}
 	elsif ($attribute_id eq "additives") {
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/0-additives.svg";
-	}	
+		$attribute_ref->{panel_id} = "additives";
+	}
 	elsif ($attribute_id =~ /^allergens_no_(.*)$/) {
 		my $allergen = $1;
 		$allergen =~ s/_/-/g;
@@ -309,6 +312,7 @@ sub initialize_attribute($$) {
 		my $analysis_tag = $attribute_id;
 		$analysis_tag =~ s/_/-/g;
 		$attribute_ref->{icon_url} = "$static_subdomain/images/attributes/$analysis_tag.svg";
+		$attribute_ref->{panel_id} = "ingredients_analysis_en-" . $analysis_tag;
 	}
 	elsif ($attribute_id =~ /^(labels)_(.*)$/) {
 		my $tagtype = $1;

diff --git a/scss/_off.scss b/scss/_off.scss
@@ -723,6 +723,15 @@ html[dir="rtl"] {
 .attribute_card {
   border-radius:8px;
   padding:1rem;min-height:96px;
+  display:block;
+}
+
+a.attribute_card {
+  color: $body-font-color;
+}
+
+a.attribute_card:hover {
+  text-decoration:none;
 }
 
 // Knowledge panels

diff --git a/t/expected_test_results/attributes/en-attributes.json b/t/expected_test_results/attributes/en-attributes.json
@@ -34,6 +34,7 @@
                "id" : "nutriscore",
                "match" : 47.3333333333333,
                "name" : "Nutri-Score",
+               "panel_id" : "nutriscore",
                "status" : "known",
                "title" : "Nutri-Score C"
             },
@@ -236,6 +237,7 @@
                "id" : "vegan",
                "match" : 0,
                "name" : "Vegan",
+               "panel_id" : "ingredients_analysis_en-vegan",
                "status" : "known",
                "title" : "Non-vegan"
             },
@@ -245,6 +247,7 @@
                "id" : "vegetarian",
                "match" : 0,
                "name" : "Vegetarian",
+               "panel_id" : "ingredients_analysis_en-vegetarian",
                "status" : "known",
                "title" : "Non-vegetarian"
             },
@@ -254,6 +257,7 @@
                "id" : "palm_oil_free",
                "match" : 100,
                "name" : "Palm oil free",
+               "panel_id" : "ingredients_analysis_en-palm-oil-free",
                "status" : "known",
                "title" : "Palm oil free"
             }
@@ -271,6 +275,7 @@
                "id" : "nova",
                "match" : 0,
                "name" : "NOVA group",
+               "panel_id" : "nova",
                "status" : "known",
                "title" : "NOVA 4"
             },
@@ -280,6 +285,7 @@
                "id" : "additives",
                "match" : 60,
                "name" : "Additives",
+               "panel_id" : "additives",
                "status" : "known",
                "title" : "2 additives"
             }
@@ -297,6 +303,7 @@
                "id" : "ecoscore",
                "match" : 63,
                "name" : "Eco-Score",
+               "panel_id" : "ecoscore",
                "status" : "known",
                "title" : "Eco-Score B"
             },

diff --git a/t/expected_test_results/attributes/en-ecoscore-score-at-20-threshold.json b/t/expected_test_results/attributes/en-ecoscore-score-at-20-threshold.json
@@ -19,6 +19,7 @@
                "id" : "nutriscore",
                "match" : 0,
                "name" : "Nutri-Score",
+               "panel_id" : "nutriscore",
                "status" : "unknown",
                "title" : "Nutri-Score unknown"
             },
@@ -202,6 +203,7 @@
                "icon_url" : "https://server_domain/images/attributes/vegan-status-unknown.svg",
                "id" : "vegan",
                "name" : "Vegan",
+               "panel_id" : "ingredients_analysis_en-vegan",
                "status" : "unknown",
                "title" : "Vegan status unknown"
             },
@@ -210,6 +212,7 @@
                "icon_url" : "https://server_domain/images/attributes/vegetarian-status-unknown.svg",
                "id" : "vegetarian",
                "name" : "Vegetarian",
+               "panel_id" : "ingredients_analysis_en-vegetarian",
                "status" : "unknown",
                "title" : "Vegetarian status unknown"
             },
@@ -218,6 +221,7 @@
                "icon_url" : "https://server_domain/images/attributes/palm-oil-content-unknown.svg",
                "id" : "palm_oil_free",
                "name" : "Palm oil free",
+               "panel_id" : "ingredients_analysis_en-palm-oil-free",
                "status" : "unknown",
                "title" : "Palm oil content unknown"
             }
@@ -235,6 +239,7 @@
                "id" : "nova",
                "match" : 0,
                "name" : "NOVA group",
+               "panel_id" : "nova",
                "status" : "unknown",
                "title" : "NOVA not computed"
             },
@@ -247,6 +252,7 @@
                "match" : 0,
                "missing" : "Missing ingredients list",
                "name" : "Additives",
+               "panel_id" : "additives",
                "status" : "unknown",
                "title" : "Additives not computed"
             }
@@ -264,6 +270,7 @@
                "id" : "ecoscore",
                "match" : 21,
                "name" : "Eco-Score",
+               "panel_id" : "ecoscore",
                "status" : "known",
                "title" : "Eco-Score D"
             },

diff --git a/t/expected_test_results/attributes/en-maybe-vegan.json b/t/expected_test_results/attributes/en-maybe-vegan.json
@@ -21,6 +21,7 @@
                "id" : "nutriscore",
                "match" : 0,
                "name" : "Nutri-Score",
+               "panel_id" : "nutriscore",
                "status" : "unknown",
                "title" : "Nutri-Score unknown"
             },
@@ -219,6 +220,7 @@
                "id" : "vegan",
                "match" : 50,
                "name" : "Vegan",
+               "panel_id" : "ingredients_analysis_en-vegan",
                "status" : "known",
                "title" : "Maybe vegan"
             },
@@ -228,6 +230,7 @@
                "id" : "vegetarian",
                "match" : 50,
                "name" : "Vegetarian",
+               "panel_id" : "ingredients_analysis_en-vegetarian",
                "status" : "known",
                "title" : "Maybe vegetarian"
             },
@@ -237,6 +240,7 @@
                "id" : "palm_oil_free",
                "match" : 0,
                "name" : "Palm oil free",
+               "panel_id" : "ingredients_analysis_en-palm-oil-free",
                "status" : "known",
                "title" : "Palm oil"
             }
@@ -254,6 +258,7 @@
                "id" : "nova",
                "match" : 50,
                "name" : "NOVA group",
+               "panel_id" : "nova",
                "status" : "known",
                "title" : "NOVA 3"
             },
@@ -263,6 +268,7 @@
                "id" : "additives",
                "match" : 100,
                "name" : "Additives",
+               "panel_id" : "additives",
                "status" : "known",
                "title" : "Without additives"
             }
@@ -280,6 +286,7 @@
                "id" : "ecoscore",
                "match" : 0,
                "name" : "Eco-Score",
+               "panel_id" : "ecoscore",
                "status" : "unknown",
                "title" : "Eco-Score not computed"
             },

diff --git a/t/expected_test_results/attributes/en-nutriscore.json b/t/expected_test_results/attributes/en-nutriscore.json
@@ -21,6 +21,7 @@
                "id" : "nutriscore",
                "match" : 61,
                "name" : "Nutri-Score",
+               "panel_id" : "nutriscore",
                "status" : "known",
                "title" : "Nutri-Score B"
             },
@@ -223,6 +224,7 @@
                "id" : "vegan",
                "match" : 100,
                "name" : "Vegan",
+               "panel_id" : "ingredients_analysis_en-vegan",
                "status" : "known",
                "title" : "Vegan"
             },
@@ -232,6 +234,7 @@
                "id" : "vegetarian",
                "match" : 100,
                "name" : "Vegetarian",
+               "panel_id" : "ingredients_analysis_en-vegetarian",
                "status" : "known",
                "title" : "Vegetarian"
             },
@@ -241,6 +244,7 @@
                "id" : "palm_oil_free",
                "match" : 100,
                "name" : "Palm oil free",
+               "panel_id" : "ingredients_analysis_en-palm-oil-free",
                "status" : "known",
                "title" : "Palm oil free"
             }
@@ -258,6 +262,7 @@
                "id" : "nova",
                "match" : 100,
                "name" : "NOVA group",
+               "panel_id" : "nova",
                "status" : "known",
                "title" : "NOVA 1"
             },
@@ -267,6 +272,7 @@
                "id" : "additives",
                "match" : 100,
                "name" : "Additives",
+               "panel_id" : "additives",
                "status" : "known",
                "title" : "Without additives"
             }
@@ -284,6 +290,7 @@
                "id" : "ecoscore",
                "match" : 39,
                "name" : "Eco-Score",
+               "panel_id" : "ecoscore",
                "status" : "known",
                "title" : "Eco-Score D"
             },

diff --git a/t/expected_test_results/attributes/fr-palm-kernel-fat.json b/t/expected_test_results/attributes/fr-palm-kernel-fat.json
@@ -21,6 +21,7 @@
                "id" : "nutriscore",
                "match" : 0,
                "name" : "Nutri-Score",
+               "panel_id" : "nutriscore",
                "status" : "unknown",
                "title" : "Nutri-Score inconnu"
             },
@@ -219,6 +220,7 @@
                "id" : "vegan",
                "match" : 100,
                "name" : "Végétalien",
+               "panel_id" : "ingredients_analysis_en-vegan",
                "status" : "known",
                "title" : "Végétalien"
             },
@@ -228,6 +230,7 @@
                "id" : "vegetarian",
                "match" : 100,
                "name" : "Végétarien",
+               "panel_id" : "ingredients_analysis_en-vegetarian",
                "status" : "known",
                "title" : "Végétarien"
             },
@@ -237,6 +240,7 @@
                "id" : "palm_oil_free",
                "match" : 0,
                "name" : "Sans huile de palme",
+               "panel_id" : "ingredients_analysis_en-palm-oil-free",
                "status" : "known",
                "title" : "Huile de palme"
             }
@@ -254,6 +258,7 @@
                "id" : "nova",
                "match" : 0,
                "name" : "Groupe NOVA",
+               "panel_id" : "nova",
                "status" : "unknown",
                "title" : "NOVA non calculé"
             },
@@ -263,6 +268,7 @@
                "id" : "additives",
                "match" : 100,
                "name" : "Additifs",
+               "panel_id" : "additives",
                "status" : "known",
                "title" : "Sans additives"
             }
@@ -280,6 +286,7 @@
                "id" : "ecoscore",
                "match" : 0,
                "name" : "Éco-Score",
+               "panel_id" : "ecoscore",
                "status" : "unknown",
                "title" : "Eco-Score non calculé"
             },