feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard #25696

fisjac · 2023-10-18T22:52:47Z

SUMMARY

This PR changes the UI on the dashboard page to include an export as pdf button to the rightmost dropdown menu of the header on the dashboard page. This download functionality takes rasterized screenshots of each individual chart component and joins them into a downloadable pdf printout of the dashboard.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before menu:

After menu:

After download functionality:
https://www.loom.com/share/a8c39c1b81f04226beb5fa2a2d24010a?sid=87eed984-97db-4016-8ff9-32ad8b6b39e2

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

fisjac · 2023-10-18T22:57:12Z

Adding initial functionality for rasterized screenshot pdfs inspired in large part by @Yaswanth-Perumalla in PR #25460

Additional improvements to the pdf function will be needed to move it away from static screenshots.

john-bodley · 2023-10-19T16:48:26Z

Thanks @fisjac for the PR. Would you mind completing the PR description or switch to draft mode if this is still WIP.

Maybe there should be a discussion about whether we should use the the native browser print to PDF option.

rusackas · 2023-10-19T16:53:43Z

If the PDF is rasterized, does it have any advantage over the PNG export? The main reason to export PDF would seem to be to support text and vectors.

eschutho · 2023-10-24T23:39:56Z

If the PDF is rasterized, does it have any advantage over the PNG export? The main reason to export PDF would seem to be to support text and vectors.

@rusackas Agree, Ideally we'll move toward a vector PDF, but since we don't have great responsive css, it all just looks broken when we try to resize the window to an A11 sheet of paper size. Same with using the built in print to PDF functionality in the browser @john-bodley. It was much easier to take a screenshot image and then resize the image. Definitely an MVP for a larger feature in the near future to have a vector PDF once we can tackle the responsive CSS functionality.

Happy to hear any other thoughts as to whether this interim functionality is a good short-term solution.

…pull

hughhhh · 2023-10-27T16:15:56Z

superset-frontend/src/utils/downloadAsPdf.ts

+ .then(() => {
+ // nothing to be done
+ })
+ .catch((e: Error) => {


nit: I think it would be good to do success toast here to let the user know that download was successful. Just search examples of successToast in our codebase + you already have it imported above

@hughhhh I was following the same flow for other downloads throughout superset. Since there are no successToasts in the download flow when downloading images from dashboard and explore tabs, does it still make sense to add this? If so, we should probably add those consistently to the other download buttons.

yousoph · 2023-10-27T22:50:54Z

/testenv up

github-actions · 2023-10-27T22:52:54Z

@yousoph Ephemeral environment spinning up at http://34.220.83.24:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

yousoph · 2023-10-27T23:54:52Z

@fisjac on the test environment ^ I was able to get the Video Game Sales dashboard as a PDF, but not the Slack Dashboard. Slack Dashboard worked properly when downloading as image.

fisjac · 2023-10-28T00:01:39Z

@yousoph I just tried the slack dashboard in the test environment. It worked for me, but took a bit longer than Video Game Sales.

github-actions · 2023-10-31T01:55:07Z

Ephemeral environment shutdown and build artifacts deleted.

giftig · 2024-01-08T10:03:38Z

Not sure if this is directly related, but I've seen frontend build errors while running the project in docker-compose with the latest master:

ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 128:659-680
Module not found: Error: Can't resolve 'html2canvas' in '/app/superset-frontend/node_modules/jspdf/dist'

ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 291:65-80
Module not found: Error: Can't resolve 'canvg' in '/app/superset-frontend/node_modules/jspdf/dist'

and it looks like jspdf is used by dom-to-pdf, which was first used in this change. @fisjac maybe you'll have a better idea what might be happening here than me, I'm not very familiar with these packages.

fisjac · 2024-01-17T21:02:40Z

@giftig, I'll create a separate bug ticket for this. It looks like this is being caused due to html2canvas and canvg being installed as optional dependencies within the jspdf package. For a local fix, moving those packages from optionalDependencies to dependencies in the jspdf section of the package-lock.json file should address the errors.

rusackas · 2024-01-19T22:49:29Z

I haven't opened a PR ye, but it seems like this is resolved if you drop dom-to-pdf from version 0.3.2 to 0.3.1.

… to dashboard (apache#25696)

pull-request-size bot added the size/L label Oct 18, 2023

fisjac changed the title ~~feature:Dom to pdf~~ feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard Oct 18, 2023

john-bodley requested a review from justinpark October 19, 2023 16:49

fisjac marked this pull request as draft October 19, 2023 16:56

fisjac marked this pull request as ready for review October 23, 2023 19:54

fisjac added 15 commits October 26, 2023 01:18

nesting download dropdown and refactoring download as image button

1f27cc3

initial pdf functionality complete

2739ff4

adding tests and refactoring components

0cdd14d

fixing formatting with rest props

157760a

tests working after refactor

7e918c5

linting

0fc003a

more linting

45e0d33

rearranging imports for lint checks

3ab6315

removing unused test

e7d9846

more import linting

d19e7be

fixing test suite for HeaderActionsDropdown Component

0e1d7ad

linting to remove unnecessary curlies

500c3e0

reverting node and npm engines to master & rebasing to latest master …

fe06a1c

…pull

aligning package-lock to current master

ab45db4

adding dom-to-pdf to package-lock, with static engines

989121d

fisjac force-pushed the dom-to-pdf branch from f2aae2e to fe06a1c Compare October 26, 2023 19:11

hughhhh reviewed Oct 27, 2023

View reviewed changes

hughhhh approved these changes Oct 31, 2023

View reviewed changes

hughhhh merged commit 74dbada into apache:master Oct 31, 2023
26 checks passed

jcoelho-pt mentioned this pull request Oct 31, 2023

feat(alert/reports): Pdf as attachment for alert and report #23170

Closed

9 tasks

cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024

feat(Export as PDF - rasterized): Adding rasterized pdf functionality…

8ac1872

… to dashboard (apache#25696)

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 3.1.0 labels Mar 8, 2024

sfirke pushed a commit to sfirke/superset that referenced this pull request Mar 22, 2024

feat(Export as PDF - rasterized): Adding rasterized pdf functionality…

f6a1d4a

… to dashboard (apache#25696)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard #25696

feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard #25696

fisjac commented Oct 18, 2023 •

edited by eschutho

Loading

fisjac commented Oct 18, 2023

john-bodley commented Oct 19, 2023 •

edited

Loading

rusackas commented Oct 19, 2023

eschutho commented Oct 24, 2023 •

edited

Loading

hughhhh Oct 27, 2023 •

edited

Loading

fisjac Oct 27, 2023

yousoph commented Oct 27, 2023

github-actions bot commented Oct 27, 2023

yousoph commented Oct 27, 2023

fisjac commented Oct 28, 2023

github-actions bot commented Oct 31, 2023

giftig commented Jan 8, 2024

fisjac commented Jan 17, 2024 •

edited

Loading

rusackas commented Jan 19, 2024

feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard #25696

feat(Export as PDF - rasterized): Adding rasterized pdf functionality to dashboard #25696

Conversation

fisjac commented Oct 18, 2023 • edited by eschutho Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

fisjac commented Oct 18, 2023

john-bodley commented Oct 19, 2023 • edited Loading

rusackas commented Oct 19, 2023

eschutho commented Oct 24, 2023 • edited Loading

hughhhh Oct 27, 2023 • edited Loading

Choose a reason for hiding this comment

fisjac Oct 27, 2023

Choose a reason for hiding this comment

yousoph commented Oct 27, 2023

github-actions bot commented Oct 27, 2023

yousoph commented Oct 27, 2023

fisjac commented Oct 28, 2023

github-actions bot commented Oct 31, 2023

giftig commented Jan 8, 2024

fisjac commented Jan 17, 2024 • edited Loading

rusackas commented Jan 19, 2024

fisjac commented Oct 18, 2023 •

edited by eschutho

Loading

john-bodley commented Oct 19, 2023 •

edited

Loading

eschutho commented Oct 24, 2023 •

edited

Loading

hughhhh Oct 27, 2023 •

edited

Loading

fisjac commented Jan 17, 2024 •

edited

Loading