nowthis / sankeymatic

Make Beautiful Flow Diagrams
http://sankeymatic.com/build/
ISC License
843 stars 122 forks source link

Linkable saved diagrams #18

Closed nowthis closed 7 months ago

nowthis commented 8 years ago

For any diagram in process, provide (either upon request or on every change) a URL which a person could use to return to the graph in its current state.

This would let people:

Edited, 2023-11: Let's not take this approach: "One implementation of this might be to save the complete JSON in a server-side DB. Then hand out a short-url-ish token for loading it, which would fill in the form fields etc."

Instead, this ought to be able to be done 100% on the client-side without passing any info to the server.

(There is one path where you'd end up exposing data to the server (I believe), and that's when you click or paste a URL with all the data embedded. The complete URL will then end up in the server's request log, I expect.)

nowthis commented 3 years ago

Love this idea, been wanting it for years, but it's lower in the queue than several other changes.

thomastay commented 7 months ago

I'm interested in this idea and was thinking about implementing this purely client side, no server. Wanted to hear your thoughts.

You could use lz-string to compress the existing json file to a base64 encoded string. Then put that into the url parameters. That's what the Typescript Playground does when you click "Share", that way they don't have to store anything on their servers.

Another option that can work in combination, is to allow users to save their sankey diagrams in LocalStorage. That's what sequence diagrams allows. I say it can be in conjunction, because localStorage has size limits. Storing it in a compressed form would be ideal.

nowthis commented 7 months ago

Hi @thomastay.

I agree - contrary to my original issue description up above, I now think it definitely all belongs client-side. No reason to pass it to the server when generating. (I'll edit the description to reflect this.)

As far as a specific technology for achieving it, I don't have a strong opinion, but I have made note of what some other sites do.. I find mermaid-js' live editor to be a pretty interesting example; they use a library named pako to enable this same effect; the mermaid code which makes pako calls might be useful as a model.

On LocalStorage - I think that if it can be done with compressed data in the URL, it may not be necessary to use LocalStorage at all. But I may not be thinking of all the advantages/use cases for that particular capability.

nowthis commented 7 months ago

With the core implementation by @thomastay in f84aed4a7c99f03faa77cab37cc30e0825509c73 and a few followup tweaks ending in 6599918f7f515f140177c013c51e15cc5fa085b3, I'm calling this feature completed.