openfoodfacts / hunger-games Goto Github PK

For now, the home page is far from being interesting. It's empty if you have no saved filters. And if you have some saved filters, they are... factual (to not say uggly)

Proposed improvement

Important

• Add a sentence on top to say what is hunger-games
• Add some default cards linking to games
• put an image by default for saved filters

Less important

• set a title by default to saved filters (game 1, game 2, ...)
• allow to edit the filter title

Story

• when using Firefox (Mac), the images are not properly loaded making it confusing.

Possible causes

• May be related with the Zoom component from react-medium-image-zoom (as the images are wrapped by that component)
• If so, an alternative could be to just Material UI capabilities to show a full screen instead of the library

When doing debugging, we should not be considered in matomo

What

• Create an agribalyse categorization game to validate only Agribalyse focused predictions
• https://github.com/openfoodfacts/openfoodfacts-ai/releases/download/dataset-category-2021-09-15/agribalyse_categories.txt

Story

• Make the Nutri-Score game action bar sticky
• It's not currently intuitive it's even there

Part of

• #63

What

• Reintroduct Matomo analytics (file in the old version)
• Take the chance to instrument a bit more (if, so what)

Why

What

• We currently have a dev mode
• It's currently enabling/disabling all features at once.
• When enabled, it should show all feature flags, with for each one a enable/disable toggle
• We could start with:
  • "Show database"
  • "Show Nutri-Score game"

Why

What

• Add an option in the settings to always open clicked tags in a new tab

Why

• improves loops (you click to open in a new tab, finish the 100% or so, close the tab, continue)
• currently, you have to right click each time

Story

• Get a better description for Hunger Games

Screenshot

Part of

• #37

Pressing "o", "k" or "n" does not do anything.

Story

• Load a new batch of logos without waiting for confirmation

Part of

• #85

What

• Invert type and value buttons and add value autosuggest

Screenshot

Why

• Reduce errors

Task

• Would be useful to have a CONTRIBUTION file that explains the flow for collaborating. Currently it is not a big deal not to have it, but it may be better to have it for the future
• https://github.blog/2012-09-17-contributing-guidelines/

Part of #70

The idea is to do the table that takes two props data and onDataChange

the format of the data could be an array of objects

[{
	off_nutriment_id: "energy_kj",
	label: "Energie (kJ)",
	value: '25.3',
	unit: null,
	quantification: '=',
	robotoffPrediction: null
	},
{
	off_nutriment_id: "energy_kcal",
	label: "Energie (kCal)",
	value: '',
	unit: null,
	quantification: '<',
	robotoffPrediction: null
	}
]

Here is how it looked liked in the previous version (not perfect design)

Here is a list of nutrients key and their usual units

https://github.com/openfoodfacts/openfoodfacts-hungergames/blob/master/src/data/nutritions.json

Story

• Make label text selectable

Part of

• #85

Technical aspect

• The interface to mark an image as reported
• A way to manage reported images

Solutions

Interface

To avoid having too much information on the main interface, the buttons to report an image could be added in the image gallery only.
For example a flag IconButton in the right top corner of each image

Managing reported images

To discuss with @teolemon :

• Where data is stored
• How do we send it
• How can we access it
• How administrators clean those problematic images

If needed I have a workaround to test the feature:

On my personal server (amathjourney.com/api), I have an API do save flagged images:

• PUT https://amathjourney.com/api/off-annotation/flag-image/[code] with body containing {imgid, url}. The imgid must contain a number (the id of the image) and url is the image src
• GET https://amathjourney.com/api/off-annotation/flag-image/[code] will return all the data you put for a given code
• DELETE https://amathjourney.com/api/off-annotation/flag-image/[code] with body containing {imgid}

Basically, it saves all that in a database whit the primary key code + imgid

What

Done - Settings

• Add a Dev mode
• Hide the Insights view by default

Part of

• #37

What

Part of

• #37

More actionable cards for the logos & labels game

• This proposal will let users annotate very heterogeneous pages of logos and labels, without having to open separate tabs to annotate each one. As a result, it should make the game faster and more addictive

• Fetching 2 top predictions & adding 2 fullfilment buttons next to them for isolated logos
• Implementing an autocomplete input (in case the prediction are completely off, for isolated logos)

Description

While trying the logo game, I noticed an issue with the website.

The issue is that the Update button on the game page seems unresponsive.
It gives no feedback on the button being pressed or the button action being completed.

The functionality of the button is fine as it is able to assign the label to images, but the user/player won't get feedback on the task being completed.

• It is a design Issue and it simple improves the experience of the user with the game. Initially the lack of responsiveness made me think that the website is broken .

Notes

• Simple way to solve this issue is to give a pop-up message that the task has been completed and refresh the page.
• Simple Refreshing the page works too.

Tasks

• Make the Button Responsive by simply redirecting to the same page when the button is pressed

• If by chance, the user makes a mistake and realizes it immediately, currently the user will have to go to the OFF website, find the exact product and edit the details.
• To prevent that we can add an undo button for instant corrections.
• The undo button can be used to cancel the post request till it reaches the server and stores the changes.

What

• In the Nutrition game, Send annotations to Open Food Facts server
• Ping me for more detailed description
• If you can not wait, the code of the previous version is available here, so you could find all the methods used to send data to the open food facts server
• https://github.com/openfoodfacts/openfoodfacts-hungergames/blob/master/src/views/NutritionView.vue

Part of

• #70

How to implement the tour

About the implementation aspect: reactour seems to provide an out of the box component that could be customized later

What must be highlighted

Maybe @teolemon @alexgarel or @CharlesNepote will have an opinion on the top

When do we do the highlight

Long introductions are most of the time boring, so maybe a short one on the first opening and allow a longer one if the user asks for help

What

• The ML server robotoff can extract some information from nutrition texts (not a lot)

Here is the PR that introduced it first time. All the useful information can be found here

• openfoodfacts/openfoodfacts-hungergames#403

Part of

• #70

Story

• Add a little explanation on how to play the Logos games
  • Proposal: "Select all logos that are exactly the same, and give them a name like "en:EU Organic" and a type like "label"."

Mockup

Part of

• #85

What

• Nutri-Score game
• #62
• Make the Nutri-Score game accessible when the DEV mode is enabled
• Add a counter of the total of Nutri-Scores to validate
• Add an explanation that you need to select all the valid Nutri-Score A and validate

Part of

• #37

Locale saving

The easiest way seems to save favorites filters on the user computer thanks to locale storage. It's already done to save settings with localeStorageManager

You can copy-paste the localSettings to create a localeFavorite which would save favorite filters in a JSON format

Displaying favorites

There is already a component QuestionCard to display a link to the correct question page. This component fetch data from robotoff during the first render to know how many questions are available

You only have to specify the following props: filterState, imageSrc, and title.

Maybe imageSrc could be a default value (for example the OFF logo)
The user should specify the title property, such that with multiple favorites they can know whet do they are

UX

Adding a small button in the filter resume could be an easy way to add filterstate to the favorites

For letting user set a title, maybe a simple dialogue

Steps

• Add the favorite icon button
• Add a dialogue that allows getting the title
• Save the favorites in the localStorage
• In the home page, add cards according to locale storage
• If filter state is equivalent to a saved one, the icon appears filled

What

• Getting the opportunity count for values in the question game
• Add an option in settings to open in new tab

Why

• To know if a brand is worth clicking on

What

• Make it possible to create a deeplink to filtered view in the insight explorer

Why

• Useful to explore insights related to a barcode

Possible Alternative

• A single barcode view

Part of

• #254

Step to reproduce:

• load a page
• uncheck "Hide images"
• do anything
• reload the page
• the "Hide images" is now checked

I think it is useful when you want to open an issue or check if it's already open.
Also there are several Hunger Games github repositories and one could create an issue in an old repo.

I don't think it's necessary to create a new menu, putting this into "settings" would be ok.

A version number of the Hunger Game code would be also great but it's probably bigger work.

For a better alignement and take full width, the images in the question game could be organized with a Grid

Possibly better to use Grid? Stack is good when the thing is either vertical or horizontal, so maybe better to change

Originally posted by @nobeeakon in #78 (comment)

What

Part of

• #37

Story

• Add visual feedback that the annotation is going on

Part of

• #85

To add a page, you need to:

• create a folder with an index.jsx returning a React component that will be the nutrition page (see other other pages are made)
• Export this page from src/pages/index.js
• Add it to the routing (in src/App.js) the route /nutrition sounds good

Now you should have access to localhost:3000/nutrition that displays your page

Do not add it to the app bar until the page is finished such that it can not be found by users

Could be a good starting point to fetch some products that have a nutrition picture but no data with getNutritionToFillUrl method

Display the picture, and add a button to go to the next image

What

• Add autosuggest in the Questions game

Why

• Make it easier for contributors to find labels/categories to answer (for brands, it's a specific autocomplete mechanism, so we can probably ignore them for now)

Story

• Autosave favorite name on carriage return

Part of

• #favorites

What

Part of

• #37

What

Make logo search deep-linkable using tags so that we can link from facets on the website, using the Power User Script
https://hunger.openfoodfacts.org/logos?logo_tag=en:eu-organic

Part of

• #37

Story

• https://hunger.openfoodfacts.org/questions?type=category&value_tag=en:fr:pruneaux-d%27agen
• The right one is: https://hunger.openfoodfacts.org/questions?type=category&value_tag=fr:pruneaux-d-agen
• We can either fix it PUS-side, or add resiliency on the HG side: https://github.com/openfoodfacts/power-user-script/blob/master/OpenFoodFactsPower.user.js#L518

Part of

• #37

Description

In dark theme OFF logo in readme is not clear

Screenshots

In OFF-server its look like this

Epic: Nutrition Game

Description

Make an easy-to-use interface for filling nutrition data table

What would a demo look like

The first idea is something very simple: one side of the screen for the picture, the second for the table to fill

Some edge case we will face: the table needs to include a quantification (is the value equal, an upper or a lower bound) and the unit

What

Story

• Add a way to export and reimport Home Favorite Query configurations (as JSON or whatever). Browser get reset, mobile is not properly synchronized…

Description

Story

• Add a country explorer view to find things to do in various countries, along with opportunities count if possible

Part of

• Make Hunger Games more relatable

Story

• Add a suggestion button to remove the filter value when you arrive at 0 insight left

Part of

• #37

Description

When using the questions game, sometimes products have a really long ingredients list that isn't easy to read. Example below:

Proposal

Creating a table could benefit readability.

What would a demo look like