Linkable diagrams in URL

[thomastay]

As discussed in #18, created a first-cut implementation using LZString. I think LZString is smaller bundle size than pako, which is a full-fledged implementation of zlib. Didn't benchmark, though. I didn't have time to optimize the CSS so would appreciate help there.

Features:

• Able to save diagram to URL and copy to clipboard
• message pops up letting you know that the URL has been copied to your clipboard
• Upon app load, it checks the url and if the input URLSearchParam is there, it loads the existing diagram.

Screenshot:

The URL would look like this:

http://sankeymatic.com/build/?input=PTAEGUEMDsGsFMCeBZAggFQJIGFQBMBLSAcwCdIBbUA6ABwFcAXAZ1AFoJIA3ePALlABGACzBBg4ACYADJIDMAGlAB2PpICsfdYNC0KAKBCgAFo0a1mfEMxgJEFSIwIBjAHTOA9hWAAjegQAbPGB9QzAAXkjQADkPPHhWGDxQADEAjwB3Vkjw0Oj4Rk4AhNAAbUlxSQBdUAAleB5oenh9AHUPUlgaYlBsSFoCRkgAsoAOUZr6xub9ABF4WlJ4ZyInD2gy4QBOSYb4JpbkAmZnMuVd6ZbwRg9nWFBUDMhSPFZSuQv9mf0pr-gywTqYTCGrYADyAHFwKAABQANlGAFIAJQ-PYHTZbc4QCEAMlQsMkkhRaMuZQqE1AAFEAEKYdCzAkwraudQk-S0+mM2EstnI8nqGoABUg9n2LFAN10z3FoE8FFoMEQHLpDKZvJR5R2oHQkAAHrD4AAzI3LJw8UByaQkzlqnmszXYzDQRjwJbMRgqrnqh3I0qA7H5QpC0geI2DWFw1xI1H6IOgENhiPw6MospwkG9SDMYxxgoJ0PhwopmNlLYfAseWhuxiIB54QhraDMUJ9HMAzOzAhcAjxaB4fRt4xldTSGrxoehIw5CAFJzQYjZSKhZgEABe-wyQmkO-0oBMoDhu4cpGINFAI0Ekj3oFIQmv+8KglGN58oBk+h8PU86TvAGITUAo0b0Ychm0VJYXRifRoDiTdQHUG9h2UaQb2YRUVgXFRUP3HwOniO8cMlYx4Aof5IBvH8OlAP9RhESRnBafcq0gFZayEfQjXSLdnHoUguEcPj-mkVkbxoEjSEGI1QyoIZTwKSiPF-GitlUtSbxYti6xE4REICUUPCYUB8LdUBICYLxHBcG8ACt6A9AgjUQDoCDPZtoP3OyHKc-ZXlAABNG8lh4UhmHgMh+mHaIb0cIZnGMGh5VoYpXQ9DxQGgeAZQ9fR9J8eAAlYKj-x3UqiIS4hjACVzTFAET1EQ-cjXWRgjVY-4bGbNgwsk4C8oK6BKHI2hq2eVhAv3VcNyEOQbwyeAasKYRd36gIBICZozJGrLQoCm8jXoAIAkWZZjgIdY9tW2gPFXJtQHDULCny5qllfJZIFga6aEKZR9HWzaXocQoAHIFFcYGbxO8MDWBgASCHJvoE0CBhiHGBIsiwyNMLCkgUAX1wurKKJ-dklQsihlAMiXXO5tbCQIGXD2-dqocigfGGGBGPG-QgA

[GoodnessJSON]

Incredible! I've been after something like this for so long. Would it be possible to support Sankey chart options and configs too?

[thomastay]

@GoodnessJSON whatever is in the settings in the downloaded file is in the URL too, the compressor just takes that file and compresses it down. It should have all the settings for the chart. If not, please make another PR

[GoodnessJSON]

@thomastay @GoodnessJSON whatever is in the settings in the downloaded file is in the URL too, the compressor just takes that file and compresses it down. It should have all the settings for the chart. If not, please make another PR

Amazing. I don't think I'm up to the level of doing this, but just want to appreciate what you've done. Hope this gets merged in as it would be incredibly handy.

My only other consideration would be if it was user readable parameters then perhaps the diagram could be artificially constructed externally. But I understand that's likely a limitation of the library trying to compress it all down.

[nowthis]

Cool, thanks @thomastay. I should be able to review & incorporate this in the next 7 days.

[nowthis]

I've had a chance to look this over. It's good so far. There are a few things I'm working on adding/modifying before I merge:

• Handle bogus inputs. If you start with a valid input string and then add a couple of random characters, it can make the LZstring decompress step fail; I want to clarify this state of affairs for the user.
• Informed consent. Up until this point, there has been no way from someone's SankeyMATIC data to be inadvertently exposed to the wider internet. With linkable URLs, though, using such a link – even only for yourself – will still send a (compressed) copy of your source data across the Internet, meaning that it will appear in the web server logs (and in other places potentially). I want to show the user a message giving them that context before they copy that URL.
• Data size. The text that is downloaded in a SankeyMATIC source file has some additional notes in it for purposes of giving the reader context for the file (a date stamp, a link back to the site in case they forgot where the file came from, etc.). In this context, that extra content isn't needed and is making every compressed-diagram-string longer than it needs to be. I'll exclude the extra text (& therefore produce a shorter input string) when setting up one of these URLs.

[nowthis]

Making progress. All 3 of the topics I mentioned above are addressed now. I should be ready to promote the feature to the site in the next 2 days.

This is the current state of the popup I'm preparing for when the user clicks 'Get a link...':

[thomastay]

Looks good, i like the popup actually. I personally have not thought about the privacy aspect and am glad you decided to highlight this.