feat: Web Share (#286)

[valentinoli]

Implemented a share button that uses the Web Share API with a polyfill.

See issue

I've implemented a BaseShareButton component. It can be used for file sharing too when the device/browser supports it. I added the share button to UnitFilterableTable to share the exported CSV of a data table, and to UnitVegaViz to share the viz as an image. The share button in the top right corner of an experience is just for sharing meta-info about the experience page - url, title, text. I append the hashtags to the text. These properties are also included when a file is shared but can be overwritten.

The Windows native share dialog is quite limiting. I know that the Twitter Windows app supports it (although CSV sharing does not seem to work). For Windows we might want to consider turning it off and using the polyfill instead but this we can discuss.

Polyfill
Note that the polyfill package does not support file sharing and has some bugs (I have submitted PRs for some) but it is pretty nice!
My PRs:
https://github.com/on2-dev/share-api-polyfill/pulls/valentinoli

[valentinoli]

might want to use this https://github.com/1904labs/dom-to-image-more

for the ChartView component to produce a single image

instead of extracting all the d3 vizualization SVG elements in the ChartView and creating an image for each one

[ffsinger]

You have updated all the dependencies in package-lock.json (e.g. webpack has been updated to version 5).

I made the same mistake a few days ago in #328, and fixed in e6adc80

Otherwise, code looks good

[valentinoli]

You have updated all the dependencies in package-lock.json (e.g. webpack has been updated to version 5).

I made the same mistake a few days ago in #328, and fixed in e6adc80

Otherwise, code looks good

Oh no! I had some issues with that... thanks for noticing.

[ffsinger]

The button at the top right works fine for me, but the other "Share" buttons in the viz/tables are not visible on my machine (Linux, Firefox or Chromium), even though they are listed in the component hierarchy of vue-dev-utils. Do you have an idea of what could be the problem?

Edit: Ok it seems that condition is undefined. If I set it manually to true, the button appears, and when I click on it it says "Your system does not support sharing files". There's probably no way around it but in this case it doesn't really make sense to show the "Export" button

Edit 2: Maybe this will be fixed with your PRs in the polyfill repo ?

[valentinoli]

You are right Florian that if there is no share button the export button is not needed but I found it clumsy and even more inconsistent to remove it... Also, the code becomes cleaner and the old workaround for the export+download in 1 click of the download button is not needed...

Downside is that the user needs to first export and then download...

Edit:
FYI, I tried to integrate the exporting into the click of the share button but I got an error in Chrome saying that the call for sharing needs to happen as a direct consequence of a user gesture.

[ffsinger]

I agree that for the table it's fine to have the Export and Download as separate buttons if the share option is not possible. But for the visualizations it's confusing to have this export button that does nothing, e.g. for the twitter advertising overview it's like this:

[valentinoli]

Ok, that is not good

I have to take a better look

[valentinoli]

@ffsinger
Now the Export button should never appear on its own. I forgot to add a Download button beside it.
By the way, I created a component ChartViewVRowWebShare that is basically a VRow with the export/download/sharing functionality. Clicking "Export" is exporting the entire content of the VRow as an image.

Now the SVGs are not exported separately but the entire VRow DOM as a single image using dom-to-image-more as suggested by @andreaskundig. I decided to use the same implementation for the vega visualizations so I encapsulated the functionality in a mixin. Note that there is a bug I reported when the node is an iframe, so applying this to the Kepler iframe needs to wait...

Finally, the background of the images is white now and not transparent.

[ffsinger]

ChartViewSunburst should also use ChartViewVRowWebShare

Otherwise it looks good now

[valentinoli]

@andreaskundig your review is pending

[andreaskundig]

@valentinoli I took this week off, but one approval is enough for a pull request, you can merge it.