feat: New system to show how well products match user preferences #6764

stephanegigandet · 2022-05-12T13:20:29Z

This is an implementation of the product scoring system described in https://forum.openfoodfacts.org/t/proposal-for-a-new-personalized-experience-in-the-open-food-facts-app-and-website/71

Scores are now on a 0 to 100 scale
Product match status is now either:

Very good match
Good match
Poor match
Unknown match
and if the user selected some hard restrictions (e.g. vegan, or allergens) (currently selected by marking the attribute mandatory, but we could make new settings specific for restrictions that would be binary "I'm allergic to gluten"):
May not match (e.g. there can be traces of gluten, or some ingredient might not be vegan)
Does not match (contains gluten, is not vegan).

Product match status is now indicated at the top of the card, in a similar way to the new Flutter app.
The score is now displayed, but we could hide it. I display it currently for debugging purposes.
I removed the pagination at the top, it's now only on the bottom.
I removed the tabs for each match status, to make the interface cleaner.

Screenshot:

2 minute video demo:
https://www.loom.com/share/33ca5a6179bd49b29ad2404a1b1af2ff

…6714

alexgarel

It seems to me there are potential issues with status computation.

alexgarel · 2022-05-17T09:13:36Z

html/js/product-search.js

+						else if ((attribute_preference == "mandatory") && (attribute.match <= 50)
+							&& ((status = "match") || (status = "may-not-match"))) {


You mean ===, don't you ?

Where does the "may-not-match" comes from ?

html/js/product-search.js

alexgarel · 2022-05-17T09:16:53Z

html/js/product-search.js

@@ -16,7 +16,7 @@
 function match_product_to_preferences (product, product_preferences) {

 	var score = 0;
-	var status = "yes";
+	var status = "compatible";


Document possible values of status here.

alexgarel · 2022-05-17T09:19:18Z

html/js/product-search.js

+	else if (status == "does_not_match") {
+		score = 0;
 	}


I would do this above (as suggested) for this is not logical to have it here…

alexgarel · 2022-05-17T09:21:21Z

html/js/product-search.js

+	// Normalize the score from 0 to 100
+	score /= sum_of_factors;


Suggested change

// Normalize the score from 0 to 100

score /= sum_of_factors;

if (status !== "does_not_match") {

// Normalize the score from 0 to 100

score /= sum_of_factors;

else {

score = 0;

}

~~Also, I'm not sure why we don't have "may_not_match" and "unknown_match" in the condition.~~

alexgarel · 2022-05-17T09:26:49Z

html/js/product-search.js

+				product_html += '<div class="list_product_banner list_product_banner_' + product.match_status + '">'
+				+ lang()["products_match_" + product.match_status] + ' ' + Math.round(product.match_score) + '/100</div>'
+				+ '<div class="list_product_content">';


Personal: why did you remove the use of javascript template ? it's less readable IMO.

alexgarel · 2022-05-17T09:30:13Z

lib/ProductOpener/Attributes.pm

@@ -813,7 +813,7 @@ sub compute_attribute_nova($$) {
 			$match = 100;
 		}
 		elsif ($nova_group == 3) {
-			$match = 50;
+			$match = 75;
 		}


Optional: This part could be better written as a lookup in a hash with scores.

alexgarel · 2022-05-17T09:31:45Z

html/js/product-search.js


 		products.sort(function(a, b) {
-			return (b.match_score - a.match_score) || (a.initial_order - b.initial_order);
+			return (b.match_score - a.match_score)	// Highest score first
+				|| ((a.match_status == "does_not_match" ? 1 : 0) - (b.match_status == "does_not_match" ? 1 : 0)) // Matching products second


You should use === for matching in js.
Why "does_not_match" gives me 1 point instead of 0 ?

~~Also is it normal that we do not consider the other status like may_not_match ?~~

hum I see, it's because you reversed a and b order compared to above expression.

I would better have:

((b.match_status == "does_not_match" ? 0 : 1) - (a.match_status == "does_not_match" ? 0 : 1)) // Matching products second

but it's ok.

Ok, I'll change, and use === instead of ==

alexgarel · 2022-05-17T10:10:56Z

I removed the tabs for each match status, to make the interface cleaner.

@stephanegigandet we could add a selector on the top to hide some status (eg. unknown etc)… but for a future version ;-)

alexgarel · 2022-05-17T10:15:36Z

@stephanegigandet

I'm not sure the /100 needs to be displayed, it makes even more data for eyes to process, without any information gain (maybe a % is ok, or nothing ?)
color choices do not really feat for color blind people. They have the text though (so it's already functional), maybe use a ligther color for unknown match ?

stephanegigandet · 2022-05-18T08:20:41Z

I'm not sure the /100 needs to be displayed, it makes even more data for eyes to process, without any information gain (maybe a % is ok, or nothing ?)

Right, in fact it's mostly for debugging purposes, I'm not sure we will show the score at all in the final version, maybe just the status.

color choices do not really feat for color blind people. They have the text though (so it's already functional), maybe use a ligther color for unknown match ?

Sure, we can put a lighter grey.

alexgarel

Good, just a potential bug, that is better to fix ;-)

html/js/product-search.js

alexgarel · 2022-05-18T13:22:09Z

html/js/product-search.js

+		}
+		else {
+			product.match_status = "poor_match";
+		}	


Cool refactor 👍

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

sonarqubecloud · 2022-05-18T13:57:51Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

stephanegigandet added 6 commits April 28, 2022 17:45

feat: start of new system for personal restrictions and preferences #…

c9a9d4d

…6714

change score for NOVA 3 from 50 to 75

d079b32

Merge branch 'main' into product-match

a76e75b

new product match system #6714

e11cad5

new product match system #6714

3c41296

new product match system #6714

8fe546b

stephanegigandet requested a review from a team as a code owner May 12, 2022 13:20

github-actions bot assigned stephanegigandet May 12, 2022

stephanegigandet changed the title ~~New system to show how well products match user preferences~~ feat: New system to show how well products match user preferences May 12, 2022

stephanegigandet added 4 commits May 12, 2022 15:44

fix js lint issues

1d894d5

fix js issue

8ef2922

comment unused code

d75d191

update tests

2fde909

github-actions bot added the 🧪 tests label May 16, 2022

add option to turn on/off filter tabs

01a1ae6

alexgarel requested changes May 17, 2022

View reviewed changes

changes suggested through the code review

22b241b

fix lint issues

bc3d15d

alexgarel approved these changes May 18, 2022

View reviewed changes

stephanegigandet and others added 2 commits May 18, 2022 15:28

Update html/js/product-search.js

4b27bad

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

change spaces to tabs

5d68526

stephanegigandet merged commit 6749369 into main May 18, 2022

stephanegigandet deleted the product-match branch May 18, 2022 15:15

alexgarel mentioned this pull request May 18, 2022

chore(main): release 1.4.0 #6754

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New system to show how well products match user preferences #6764

feat: New system to show how well products match user preferences #6764

stephanegigandet commented May 12, 2022

alexgarel left a comment

alexgarel May 17, 2022

alexgarel May 17, 2022

alexgarel May 17, 2022

stephanegigandet May 17, 2022

alexgarel May 17, 2022

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022

stephanegigandet May 17, 2022

alexgarel May 17, 2022

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022 •

edited

Loading

stephanegigandet May 17, 2022

alexgarel commented May 17, 2022

alexgarel commented May 17, 2022

stephanegigandet commented May 18, 2022

alexgarel left a comment

alexgarel May 18, 2022

sonarqubecloud bot commented May 18, 2022

		else if ((attribute_preference == "mandatory") && (attribute.match <= 50)
		&& ((status = "match") \|\| (status = "may-not-match"))) {

		// Normalize the score from 0 to 100
		score /= sum_of_factors;

feat: New system to show how well products match user preferences #6764

feat: New system to show how well products match user preferences #6764

Conversation

stephanegigandet commented May 12, 2022

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

alexgarel May 17, 2022 • edited Loading

Choose a reason for hiding this comment

alexgarel May 17, 2022 • edited Loading

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

alexgarel May 17, 2022 • edited Loading

Choose a reason for hiding this comment

alexgarel May 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexgarel commented May 17, 2022

alexgarel commented May 17, 2022

stephanegigandet commented May 18, 2022

alexgarel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented May 18, 2022

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022 •

edited

Loading

alexgarel May 17, 2022 •

edited

Loading