Nutrition input (Tracker)

teolemon commented 3 years ago

Who for

What

### Tasks
- [ ] Add a server controlled nutrition-table input
  - [ ] It should return the default translated, ordered and filtered list of nutrients based on the language code and the country code, as well as a complete list of known nutrients (translated)
  - [ ] This list is also adapted based on the known category of the product (eg: waters, baby milks, alcoholic drinks)
  - [ ] This list also has the openfoodfacts-dart nutrient id to call
- [ ] The client does a FOR loop using the API, to display the input
- [ ] https://github.com/openfoodfacts/smooth-app/issues/5401
- [ ] https://github.com/openfoodfacts/smooth-app/issues/4446
- [ ] https://github.com/openfoodfacts/smooth-app/issues/4896
- [ ] https://github.com/openfoodfacts/smooth-app/issues/5126
- [ ] https://github.com/openfoodfacts/smooth-app/issues/3875
- [ ] https://github.com/openfoodfacts/smooth-app/issues/5010
- [ ] https://github.com/openfoodfacts/smooth-app/issues/3978

### Tasks
- [ ] Upgrade the nutrition facts input to add support for as sold, and as prepared
- [ ] https://github.com/openfoodfacts/smooth-app/issues/3278
- [ ] Add a dual-screen mode for nutrition input to allow for after the fact manual nutrition input
- [ ] Add an educational one-time onboarding screen about Nutri-Score with the result of the computation + showing the points normally granted by the openfoodfacts-events points system (blocked at least on https://github.com/openfoodfacts/openfoodfacts-server/issues/6259, otherwise, we would just pretend the points were granted)
- [x] Add screen to explain that the Nutri-Score wasn't computed for that product and why
- [ ] Add server side support for no nutrition facts status: https://github.com/openfoodfacts/openfoodfacts-server/issues/7612
- [ ] Add a button to mention no nutrition facts are visible
- [ ] Optimize for Nutri-Score success: https://github.com/openfoodfacts/openfoodfacts-server/issues/7610
- [ ] https://github.com/openfoodfacts/smooth-app/issues/3978

Mockup

[ ]
[ ]
[ ]
[ ] Here's a first mockup, which hasn't been discussed yet

Code pointers

DART support: https://github.com/openfoodfacts/openfoodfacts-dart/pull/272
Why

Design doc

Part of

[x] #505
[ ] #503

teolemon commented 2 years ago

@monsieurtanuki would you take on Nutrition ?

monsieurtanuki commented 2 years ago

I'm afraid not, I cannot use the camera. The camera is the main item here, isn't it? If it's not, I can work on the input of a nutrient list, and someone else would do the camera side later. Tell me if that makes sense.

teolemon commented 2 years ago

No, the photo here is an existing nutrition photo. The layout is immersive and scrollable to make it easy to improve nutrition. The photo retaking is for a later iteration.

teolemon commented 2 years ago

So it's really the input of the nutrients list, with a fancy layout. We can start simpler.

teolemon commented 2 years ago

But to be clear it's a big chew:

[ ] Creating a layout for the nutrition input
- [ ] Layout for the fields
- [x] Units
- [x] Values
- [ ] Modifiers <>=
- [x] Layout for the energy fields
- [x] Values
- [x] Layout for the portion size
- [x] ~~Units~~
- [x] ~~Values~~
- [x] Text
- [ ] Layout for the nutrition table
- [ ] Displaying the current photo of the nutrition table
- [ ] Make it scrollable
[x] Building that layout dynamically (using the Nutrient list and order API from openfoodfacts-dart, based on the country selected in the app)
[x] Getting existing nutrition values for the product
[x] Populating that layout with existing values
[x] Gathering all changes made by the users to the fields
[x] Sending them to the server
[ ] Extra refinements
- [x] the portion/100G thing
- [x] no nutrition value
- [ ] Allow to add custom nutrients to the nutrition input (using the Nutrient list API from openfoodfacts-dart)

monsieurtanuki commented 2 years ago

OK, I'll do it step by step.

monsieurtanuki commented 2 years ago

@teolemon How are we supposed to open that page? From product page I guess, but where should one click?

teolemon commented 2 years ago

The button you added yesterday is a good entry point when nutrition is not there at all.
When there is nutrition info, it could become "update nutrition information"

monsieurtanuki commented 2 years ago

Now I have a similar problem as with the Android app: I don't know the meaning of the fields, as the meaning is only displayed as a hint:

teolemon commented 2 years ago

We need to find the equivalent of the library we used

teolemon commented 2 years ago

@monsieurtanuki wouldn't the second one do the trick ? https://docs.flutter.dev/cookbook/forms/text-input

Also: https://stackoverflow.com/questions/49577781/how-to-create-number-input-field-in-flutter

monsieurtanuki commented 2 years ago

@teolemon Indeed:

monsieurtanuki commented 2 years ago

@teolemon Still some questions/remarks:

"Modifiers <>=" - what's the point as we cannot save anything but '='
"energy" - potential confusion here, as we have "energy-kj", "energy-kcal" and "energy". 3 of them: it's too much! We should display only "energy-kj" and "energy-kcal", populating one of them with the "energy" value if needed, right?
"portion size" needs to be added
"cancel" / "save" buttons needs to be added
what if both per 100g and per serving fields are populated: should we save both?
for the moment, except for energy, I considered that all nutrients were weights (g, mg, µg). How can I know which nutrients are not weights? (e.g. alcohol in %age)

teolemon commented 2 years ago

"Modifiers <>=" - you pass the modifier directly in the value (concatenate)
"energy-kj", "energy-kcal": those 2 only. We do automatic conversion, but we want users to be able to input both values, as indicated on the packaging 5.show the matching values in each section, as toggled by the portion/100g switch ? Perhaps a warning that this product has values for both ?
Default units should be exposed by the dart package normally

teolemon commented 2 years ago

Weird spinner on opening the view

monsieurtanuki commented 2 years ago

Already mentioned by @M123-dev in the code review.

My answer was:

I know
the target is to pre-load the nutrient list at app init time, not querying the API each time we edit the nutrients. So, in a near future, that will disappear.

teolemon commented 2 years ago

perfect, sorry for my inattention 😅

monsieurtanuki commented 2 years ago

"Modifiers <>=" - you pass the modifier directly in the value (concatenate)

Maybe that's possible on the server side, but that's not possible for the moment in off-dart:

double? vitaminB12Serving
double? vitaminB12;
Unit? vitaminB12Unit;

monsieurtanuki commented 2 years ago

Default units should be exposed by the dart package normally

I'm afraid not.

teolemon commented 2 years ago

https://world.openfoodfacts.org/cgi/nutrients.pl does not have it, but https://static.openfoodfacts.org/data/taxonomies/nutrients.json does

monsieurtanuki commented 2 years ago

@teolemon In the mockup, at the bottom, there are two buttons in a fixed bar: cancel and save. Sounds reasonable.

What about the 3 tabs (profile, search, history): should they be there?
What about the "add nutrient" button: should it be fixed on top of the cancel/save bar? should it be not fixed, and below the already populated nutrients?

teolemon commented 2 years ago

Probably not
It should be a relatively low use button, but when you need it, you need it several times (eg baby milks, waters). It might be useful to be able to add several nutrients at the same time. For now, let's not fix it, since it greats a weird and problematic layout ( double fixed bar). I'll raise the issue with Tim and Gao today.

monsieurtanuki commented 2 years ago

I'll raise the issue with Tim and Gao today.

Ask them too about question 1, because I don't think there's a single page in the app without the bottom navigation bar (and I don't know technically how to get rid of it for some pages - @jasmeet0817 any idea about that?)

Actually we're talking about 3 bottom bars: cancel/save, add nutrient, and navigation.

monsieurtanuki commented 2 years ago

@teolemon That portion/100g switch is not intuitive at all. What about this?

That would look similar to

jasmeet0817 commented 2 years ago

I'll raise the issue with Tim and Gao today.

Ask them too about question 1, because I don't think there's a single page in the app without the bottom navigation bar (and I don't know technically how to get rid of it for some pages - @jasmeet0817 any idea about that?)

That's gonna be difficult. I can try and find a solution, if needed. For now, I think it's best to always have the navigation bar though.

Actually we're talking about 3 bottom bars: cancel/save, add nutrient, and navigation.

I'll raise the issue with Tim and Gao today.

Ask them too about question 1, because I don't think there's a single page in the app without the bottom navigation bar (and I don't know technically how to get rid of it for some pages - @jasmeet0817 any idea about that?)

Actually we're talking about 3 bottom bars: cancel/save, add nutrient, and navigation.

jasmeet0817 commented 2 years ago

I'll raise the issue with Tim and Gao today.

Ask them too about question 1, because I don't think there's a single page in the app without the bottom navigation bar (and I don't know technically how to get rid of it for some pages - @jasmeet0817 any idea about that?)

That's gonna be very difficult. I can try and find a solution, if needed. For now, I think it's best to always have the navigation bar though.

Actually we're talking about 3 bottom bars: cancel/save, add nutrient, and navigation.

I'll raise the issue with Tim and Gao today.

Ask them too about question 1, because I don't think there's a single page in the app without the bottom navigation bar (and I don't know technically how to get rid of it for some pages - @jasmeet0817 any idea about that?) Actually we're talking about 3 bottom bars: cancel/save, add nutrient, and navigation.

jasmeet0817 commented 2 years ago

Closed by mistake

teolemon commented 2 years ago

@monsieurtanuki so:

the navigation bar, as @jasmeet0817 is going to be hard to remove (that's an ideal)
We don't need to fix the Add nutrient button, and we don't need to fix the save cancel bar either.
One thing as well: there was backlash about my split screen idea, so the next step is probably to add the photo on top of the input system, but without trying to do a split scrolling system
There was also a feel that the modifiers were over the top.
There was also backlash on the 2 columns things (confusing), the switch system should be the thing we stick to.

monsieurtanuki commented 2 years ago

Thank you @teolemon for your answers. My remarks:

ok to keep the navigation bar
ok to put the add nutrient, and the cancel save bar at the end of the ListView
same for the photo I guess - it will be the first item of the ListView and will be scrolled like the rest, right? Looks similar to SliverAppBar
I did remove the modifiers anyway, as we cannot save them in dart
the switch system is confusing - and I double-checked on the website, there it's confusing too. To add to the confusion, some data are automatically processed (on the server side I guess): for instance if I input only one value for serving (e.g. vitamin b12), after I save it looks like other fields are computed. Tell me if I'm wrong, but it would be much easier to ask just for one value in both 100g and serving, and compute the rest with a rule of 3. Or to use correctly the "serving size" fields.

jasmeet0817 commented 2 years ago

I looked at removing the navigation bar, it's tricky, basically we have to let PageManager know not to display the BottomNavigationBar. This could be done with a context variable that PageManager watches.
- Side note: I was in the conversation with the UXers and was nudging them to keep the bottom navigation bar, but the strong preference there was to hide it (also Pierre prefers to hide it).

monsieurtanuki commented 2 years ago

@teolemon This is what you suggested, and I still think the UX is confusing - "when I hit the 'save' button, what is going to be saved, the 100g or the serving?":

teolemon commented 2 years ago

The 2 columns thing was really seen as confusing. We already have the same thing in production, albeit radio buttons in lieu toggles, and users and getting it fine. Let's merge as is and gather feedback. Theoretically, there are some products with 2 different nutrition tables, some with a 3rd and 4th columns for dilutions, but we're trying to have something simple for now.

monsieurtanuki commented 2 years ago

The 2 columns thing was really seen as confusing. We already have the same thing in production, albeit radio buttons in lieu toggles, and users and getting it fine.

Of course it's better to see just one column. The problem is in the switch. Today's suggestion:

from the product page, go to a "100g" page (like this one with one column)
in the "100g" page, a button "add nutrition facts per serving" that goes to a dedicated "serving" page (a bit like an "advanced" mode) (which it is)

Let's merge as is and gather feedback.

I guess it should be reviewed first. And #910 has the 2 columns. But there's something not working 100% with the call to saveProduct, a bit risky to run that in PROD. I should patch it the code if the purpose for the moment is just the UX/UI. Anyway I was hoping that there was another way to update just the nutrition facts, not the whole product. Is there?

monsieurtanuki commented 2 years ago

Today's suggestion (screenshots):

"100g" page

serving page

M123-dev commented 2 years ago

Mhhh I understand the thoughts behind the button to the next page where it can be added per portion but I think it's rather confusing and maybe looks like you have to add both for 100g and per portion, what about two radio buttons in a row

monsieurtanuki commented 2 years ago

Mhhh I understand the thoughts behind the button to the next page where it can be added per portion but I think it's rather confusing and maybe looks like you have to add both for 100g and per portion

Maybe if we put it at the bottom of the page, like "Advanced: nutrition facts per portion"?

what about two radio buttons in a row

That would be similar to the Switch.

M123-dev commented 2 years ago

I don't know how it is labeled on products, does every product has both

Also can we generate the product data

5g sugar per 100g; portion=50g so 2,5g sugar per portion. If so it doesn't make sense to put it at the bottom

monsieurtanuki commented 2 years ago

@M123-dev Indeed, that could be a solution:

letting the user enter all the data for 100g
add a button "enter serving size"
- that button would open a dialog where the serving size can be entered
- when clicking on "ok" on that dialog, we compute the ratio from the serving size text and ask the end-user to confirm if the energy-kj we computed is correct compared to the data printed on the product

I mean, it's not because we have the possibility to enter that many data that it makes sense the ask the end-user to do so, especially:

on a small device
potentially in a hostile environment - e.g. supermarket on Saturday
when we want to make data input a rewarding experience - and typing a second column that is simply a ratio of another column is not a rewarding experience

openfoodfacts / smooth-app