Convert Plotly to PNG so that it can be sent via email

[avayedawadi]

Currently, the PNGs are created by Matplotlib in the backend. Now we are switching to Plotly but the Plotly graph needs to still be converted to a PNG so it can be sent in an email.

[avayedawadi]

Kaleido library is required to get a static image from Plotly. From there implementation is simple. Will submit a pull request tomorrow with completed code.

[avayedawadi]

The issue is taking longer than expected because it requires a greater restructure of some code. Frontend Javascript is not capable of saving images to filepaths because of obvious security issues so i have to restructure the backend to take in images/base64 strings directly.

[avayedawadi]

There is an issue with creating Plotly plots in the frontend. When we statically create a PNG for the Plotly plot (that we can then send in an email) we need a way to send this PNG to the backend where it can then be sent to the AWS Lambda function that sends an email with the PNG. The issue is, we can't directly save the PNG to the file directory (like in the backend Python) because that poses a security risk where frontend code can alter a computer/server file directory. There are a couple potential solutions to this problem:

• Statically create the Plotly plots as PNGs in the frontend and then pass a base64 string via a JSON payload to the backend. The flaw here is that we then have large JSON payloads which could create lag for users.
• Have Matplotlib continue to create the PNGs of the graphs in the backend and have Plotly create the plots in the frontend (I think this is the most efficient solution).
• Have Plotly create the PNGs of the graphs in the backend and have Plotly create the plots in the frontend as well.

To be clear, Plotly would still have to create the dynamic plots in the frontend. The question is just where should the static PNG be created so it can be sent via email. If it's created in the backend, then sticking with Matplotlib should be perfectly fine.

@farisdurrani @karkir0003 Any ideas?

[farisdurrani]

We definitely don't want to pass files from the backend to the frontend and vice versa. What has been done right now is the backend creating the static PNG files in a directory the frontend can access and the frontend will display those PNG files, and that is how the current static confusion matrix matplotlib PNG file is being passed to the frontend.

Of course, there will be no need to have that file be read by the frontend anymore since we'll be generating the viz on the frontend. But I am still very much into just using the already-generated matplotlib PNG file instead of deleting the code and writing more code that does basically the same thing

[karkir0003]

@farisdurrani @avayedawadi , has this issue been solved!

[farisdurrani]

Oh yes, as Avaye said yesterday, no further action is needed on this since the current implementation is the most efficient. @avayedawadi , feel free to close this issue