openfoodfacts-server feat: integration of the "tuttifrutti" website into cgi/graph

Checklist: Hi, the branch "graph_cgi" contains the integration of the "tuttifrutti" website into cgi/graph. 80% operational:

hard-coded texts displayed on the interface (English)
country not taken into account as graph.pl parameter yet
problem with global.scss img "max-width" and "height" which makes icons of suggested products collapsed. To check how it should look like, the graph.scss width and height properties of tag img have to be disabled so far (pic "off4 below)

Check it with this product and click on "graph": http://world.productopener.localhost/product/3960145823988/calissons-la-cure-gourmande

off1_display_with_graph_btn off2_graph_nutriscore off3_graph_novacore off4_graph_novacore_css_img_props_disabled

Description:

A "graph" button has been added on the product page to show the concept. When clicking on it, the similarity graph (Nutriscore) is shown for this product. You can also select the Novascore and click "Go" to see the Novascore similarity graph.

Mainly: addition of cgi/graph.pl + inside "html", a graph subdirectory has been added to js, css, images.

Related issues and discussion: #[ISSUE NUMBER] #3871

Jul 29 '20 06:07 oricdev

As an aside, it might be good to implement completely new parts of the site with Template::Toolkit. I'm sure, @areeshatariq has some pointers.

Jul 30 '20 08:07 hangy

As an aside, it might be good to implement completely new parts of the site with Template::Toolkit. I'm sure, @areeshatariq has some pointers.

Yes, we can surely implement this with Template::Toolkit. I can see a lot of HTML which can be templatized. I can work on this

Jul 30 '20 08:07 areeshatariq

* Would it make sense to bundle and minify the CSS and JS files for production?

* Could you add the new CSS and JS files to https://github.com/openfoodfacts/openfoodfacts-server/blob/4a2ef5fc6582aae6c3281d9cb8deee6ef864af0b/package.json#L15-L17
   so that they can be validated during PR builds?

Do you mean with "bundle" to put all js files together into a single-one and to minify it? if yes, I can deal with it.

Jul 30 '20 13:07 oricdev

in addition to comments by @hangy, SonarCloud has quite a few complaints about missing var in declarations. I assume most of these aren't meant as globals.

Jul 30 '20 14:07 Ban3

* Would it make sense to bundle and minify the CSS and JS files for production?

* Could you add the new CSS and JS files to https://github.com/openfoodfacts/openfoodfacts-server/blob/4a2ef5fc6582aae6c3281d9cb8deee6ef864af0b/package.json#L15-L17
   so that they can be validated during PR builds?

Do you mean with "bundle" to put all js files together into a single-one and to minify it? if yes, I can deal with it.

Exactly. 🙂 I think it should be easy enough to integrate that into our current gulp workflow.

Jul 30 '20 16:07 hangy

As an aside, it might be good to implement completely new parts of the site with Template::Toolkit. I'm sure, @areeshatariq has some pointers.

Yes, we can surely implement this with Template::Toolkit. I can see a lot of HTML which can be templatized. I can work on this

If you have any question regarding the code, please feel free to ask ;)

Jul 30 '20 21:07 oricdev

Hi @hangy, just to let you know: I am off for some days (off=the word, not the acronym ;) ); I will deal further middle of next week probably. Tschüss

Jul 31 '20 07:07 oricdev

@hangy I get stucked with the public library from D3Js d3.v3.min.js which raises errors at the "lint" stage. Since this is an open-source library used for showing the graph, what shall I do? please advise... grah_cgi_npm_run_lint_errors

Aug 13 '20 14:08 oricdev

@hangy I get stucked with the public library from D3Js d3.v3.min.js which raises errors at the "lint" stage. Since this is an open-source library used for showing the graph, what shall I do? please advise...

Sorry for the delay! I missed the notification somehow.

You could remove the library from that directory, and install it with npm instead

npm install --save d3

Afterwards, the file will be in node_modules/d3/dist/d3.js. It should be possible to add it to https://github.com/openfoodfacts/openfoodfacts-server/blob/425e64de3a1a731f798d59aaa3ef87d847f7a6b5/gulpfile.js#L49-L64. Then, you can just include the script it from the js/dist directory instead.

I noticed that you manually added html/js/graph.min.js. It's easier to add it to https://github.com/openfoodfacts/openfoodfacts-server/blob/425e64de3a1a731f798d59aaa3ef87d847f7a6b5/gulpfile.js#L72-L75 and have gulp generate the minified version. Thus, you don't need to recreate a minified version after updating graph.js.

Aug 18 '20 11:08 hangy

@hangy I get stucked with the public library from D3Js d3.v3.min.js which raises errors at the "lint" stage. Since this is an open-source library used for showing the graph, what shall I do? please advise...

Sorry for the delay! I missed the notification somehow.

You could remove the library from that directory, and install it with npm instead
npm install --save d3
Afterwards, the file will be in node_modules/d3/dist/d3.js. It should be possible to add it to

https://github.com/openfoodfacts/openfoodfacts-server/blob/425e64de3a1a731f798d59aaa3ef87d847f7a6b5/gulpfile.js#L49-L64 . Then, you can just include the script it from the js/dist directory instead.

I noticed that you manually added html/js/graph.min.js. It's easier to add it to

https://github.com/openfoodfacts/openfoodfacts-server/blob/425e64de3a1a731f798d59aaa3ef87d847f7a6b5/gulpfile.js#L72-L75 and have gulp generate the minified version. Thus, you don't need to recreate a minified version after updating graph.js.

@hangy I updated so far with your 2nd proposal (no graph.min.js file and usage of gulpfile instead). I can't check since I get an error with the "sudo ./build_npm.sh" command. Regarding 1st proposal, well, I will give it a try in the coming days. Thanks for your advises.

Aug 18 '20 18:08 oricdev

@hangy I updated so far with your 2nd proposal (no graph.min.js file and usage of gulpfile instead). I can't check since I get an error with the "sudo ./build_npm.sh" command.

Did you get the same error with gulp before or is it new? You could try testing the change to copyJs for minification of graph.js by running something like this (adopted from build_npm.sh)

sudo docker run --rm -it -v node_modules:/mnt/node_modules -v $(cd .. && pwd)/:/mnt -w /mnt node:12.16.1-alpine npx gulp copyJs

Aug 18 '20 19:08 hangy

@hangy I updated so far with your 2nd proposal (no graph.min.js file and usage of gulpfile instead). I can't check since I get an error with the "sudo ./build_npm.sh" command.

Did you get the same error with gulp before or is it new? You could try testing the change to copyJs for minification of graph.js by running something like this (adopted from build_npm.sh)
sudo docker run --rm -it -v node_modules:/mnt/node_modules -v $(cd .. && pwd)/:/mnt -w /mnt node:12.16.1-alpine npx gulp copyJs

@hangy strangely, I cloned back again and I don't get error messages with build_npm anymore. However, I get another error with "$producers_email etc" while ./start_dev.sh which occurred a few weeks ago and which has been fixed by @teolemon as far as I remember (not sure ;) ):

Aug 20 '20 18:08 oricdev

Try to merge the off master branch into your dev branch. It's probably a new setting in Config.pm

Aug 20 '20 18:08 hangy

Hi @hangy, recommendations have been implemented and lint errors fixed up. Since I am not that familiar with the gulp and lint staff, here is how to make the graph_cgi branch work based on your hints & recommendations:

git clone xxx .
git checkout graph_cgi
npm install --save d3 finally run the start_dev.sh as usual.

As mentioned earlier, I still have a problem which I don't actually know how to solve: "suggestions" images do not show up as long as following CSS properties img:max_width and img:height are activated (see screenshot)

Sep 02 '20 19:09 oricdev

npm install --save d3 finally run the start_dev.sh as usual.

You actually don't have to install d3 again as it's referenced in package.json. 🙂

As mentioned earlier, I still have a problem which I don't actually know how to solve: "suggestions" images do not show up as long as following CSS properties img:max_width and img:height are activated (see screenshot)

They actually do show up if there are not too many images/products: I'd probably try setting some other max-width for images in that navigator.