FRONTEND: Update Screenshot functionality

[eriwarr]

Description

This PR adds the HET logo-text and removes unnecessary elements when taking screenshots.

• Adds centered divider line, logo text, and exploredata/ url with params to the bottom of the screenshot using the html2Canvas library
• url is shrunk to fit within the width of the screenshot
• Adds elementsToHide prop to CardWrapper to hide a list of elements when capturing the chart image.
• The dropdown menus are visible when open and removed when closed.
• Adds unique element IDs for compare mode screenshots.

Motivation and Context

Has this been tested? How?

Tested locally

Screenshots (if appropriate):

Types of changes

• Bug fix
• New content or feature

Post-merge TODO

I have inspected frontend changes and run affected data pipelines:

• on DEV
• on PROD

Any target user persona(s)?

Preview link below in Netlify comment 😎

[netlify]

✅ Deploy Preview for health-equity-tracker ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	03556da
🔍 Latest deploy log	https://app.netlify.com/sites/health-equity-tracker/deploys/64c17020615f13000833f144
😎 Deploy Preview	https://deploy-preview-2279--health-equity-tracker.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kccrtv]

for the citation, if we're keeping in line with APA standards for electronic images, the format would generally be

Source. (Year of origin). Title of image [Online image]. Website name. URL

in the above screenshot, for example, the citation would be formatted as

CDC NCHHSTP AtlasPlus. (2019). HIV prevalence over time in the United States from Health Equity Tracker Jul 2023 [Online image]. Health Equity Tracker. https://healthequitytracker.org/

do you think we could alter the citation to match these standards?

[benhammondmusic]

URL looks good at the bottom. I feel like the logo placement is a little strange still... sorry to nitpick but im just thinking if the goal is to have people "save as" and then embed, we want it to look as good as the charts do on the page. Is it a pain to try and put the logo+logo text on the very bottom, centered? Or @kccrtv do you have any suggestions on making the export look as good as possible? If we need to drop the logo we can; i thought it'd be cool but the primary goal is to make it lok good enough someone wants to share it

Also @eriwarr , you noted that this PR closes #2186 , is that true? I thought you weren't able to get that fixed?

[eriwarr]

URL looks good at the bottom. I feel like the logo placement is a little strange still... sorry to nitpick but im just thinking if the goal is to have people "save as" and then embed, we want it to look as good as the charts do on the page. Is it a pain to try and put the logo+logo text on the very bottom, centered? Or @kccrtv do you have any suggestions on making the export look as good as possible? If we need to drop the logo we can; i thought it'd be cool but the primary goal is to make it lok good enough someone wants to share it

Also @eriwarr , you noted that this PR closes #2186 , is that true? I thought you weren't able to get that fixed?

@benhammondmusic - I understand. No, centering the logo at the bottom wouldn't be difficult. Regarding #2186, I'm not sure, but I think my docking station/dell monitors are causing the grey issue. When I disconnected and downloaded the images as normal on my Mac, I no longer had the grey overlay problem. But we can leave it open as there is no way for me to confirm what else it could be.

[kccrtv]

URL looks good at the bottom. I feel like the logo placement is a little strange still... sorry to nitpick but im just thinking if the goal is to have people "save as" and then embed, we want it to look as good as the charts do on the page. Is it a pain to try and put the logo+logo text on the very bottom, centered? Or @kccrtv do you have any suggestions on making the export look as good as possible? If we need to drop the logo we can; i thought it'd be cool but the primary goal is to make it lok good enough someone wants to share it
Also @eriwarr , you noted that this PR closes #2186 , is that true? I thought you weren't able to get that fixed?

@benhammondmusic - I understand. No, centering the logo at the bottom wouldn't be difficult. Regarding #2186, I'm not sure, but I think my docking station/dell monitors are causing the grey issue. When I disconnected and downloaded the images as normal on my Mac, I no longer had the grey overlay problem. But we can leave it open as there is no way for me to confirm what else it could be.

as we discussed earlier today, i like the idea of moving the H Health Equity Tracker logo to the very bottom, either centered or to the right. if there's a way to absolute fix it with a negative z-index and increased opacity, that could balance it out.

[eriwarr]

URL looks good at the bottom. I feel like the logo placement is a little strange still... sorry to nitpick but im just thinking if the goal is to have people "save as" and then embed, we want it to look as good as the charts do on the page. Is it a pain to try and put the logo+logo text on the very bottom, centered? Or @kccrtv do you have any suggestions on making the export look as good as possible? If we need to drop the logo we can; i thought it'd be cool but the primary goal is to make it lok good enough someone wants to share it
Also @eriwarr , you noted that this PR closes #2186 , is that true? I thought you weren't able to get that fixed?

@benhammondmusic - I understand. No, centering the logo at the bottom wouldn't be difficult. Regarding #2186, I'm not sure, but I think my docking station/dell monitors are causing the grey issue. When I disconnected and downloaded the images as normal on my Mac, I no longer had the grey overlay problem. But we can leave it open as there is no way for me to confirm what else it could be.

as we discussed earlier today, i like the idea of moving the H Health Equity Tracker logo to the very bottom, either centered or to the right. if there's a way to absolute fix it with a negative z-index and increased opacity, that could balance it out.

how do you feel about these?

I can make whatever small changes to spacing/padding.

[kccrtv]

URL looks good at the bottom. I feel like the logo placement is a little strange still... sorry to nitpick but im just thinking if the goal is to have people "save as" and then embed, we want it to look as good as the charts do on the page. Is it a pain to try and put the logo+logo text on the very bottom, centered? Or @kccrtv do you have any suggestions on making the export look as good as possible? If we need to drop the logo we can; i thought it'd be cool but the primary goal is to make it lok good enough someone wants to share it
Also @eriwarr , you noted that this PR closes #2186 , is that true? I thought you weren't able to get that fixed?

@benhammondmusic - I understand. No, centering the logo at the bottom wouldn't be difficult. Regarding #2186, I'm not sure, but I think my docking station/dell monitors are causing the grey issue. When I disconnected and downloaded the images as normal on my Mac, I no longer had the grey overlay problem. But we can leave it open as there is no way for me to confirm what else it could be.

as we discussed earlier today, i like the idea of moving the H Health Equity Tracker logo to the very bottom, either centered or to the right. if there's a way to absolute fix it with a negative z-index and increased opacity, that could balance it out.

how do you feel about these?

I can make whatever small changes to spacing/padding.

let's just take out the H logo entirely 😬 and leave Health Equity Tracker. i feel like it should be an either/or situation.

[benhammondmusic]

Issue with extremely long URLs; they don't line wrap and the interfere with the watermark style right-aligned logo

http://localhost:3000/exploredata?mls=1.cardiovascular_diseases-3.preventable_hospitalizations-5.06&mlp=comparevars&group1=Black.NH&group2=A%7ENHPI.NH

[kccrtv]

👍🏼