Compressed URL support

[sidharthv96]

Is your feature request related to a problem? Please describe. URL size is too big

Describe the solution you'd like Add support to compressed URLs with Pako.

Additional context Pako was introduced as part of https://github.com/mermaid-js/mermaid-live-editor/pull/584 The URL size is significantly smaller.

This option can be enabled by default and have a configurable toggle if someone want's to disable it.

Two ways to handle new URLs

Let it fail

• No change in path/query params.
• Try to extract all URL, if it fails, catch and do regular base64 decode.

  Extra Query param

• Add ?compressed=true or ?c=1 to URL and process based on that.

Personally think first option is more resilient

[sidharthv96]

cc @knsv @mmorel-35 @Yash-Singh1 @jihchi @skrobul

[jihchi]

Personally I'd prefer the explicit way (extra query param) but I'm fine with the fallback ("Let it fail") option.

Could you please elaborate a bit more about why the fallback option is more resilient?

[sidharthv96]

The explicit way is cleaner, but for the editor to be more resilient, the fallback option needs to be present even if we are checking for a query param (eg: user didn't copy the entire URL before pasting and missed the query param, some parser omitted the query param, etc).

So with query:

if query == compressed:
  json = extract 
  // What if this fails ?
else: 
  try:
    json = decode Base64
  catch: 
    json = extract

Let it fail:

try:
  json = extract
catch:
  json = decode Base64

Also, thinking about it, code.startsWith("eyJ") indicates if it's compressed or not.

[jihchi]

Understood, thanks for the detail explanation.

[mmorel-35]

I think that there shall be something like ?encoder=kroki#eNpLL0osyFAIceFSAALHaN_E4pLUIgVDBV2FYMNYBV1dXQWnaF8jhWCjWLAKJ7CQc7SvsUKwMUTIESIEAJ5dEGo= It seems cleaner, this way you can support another encoder if you want to. And If you don't support an encoder because it's service doesn't exist anymore, you can print a message saying This encoder is not available to use.

[sidharthv96]

We aren't dependent on 3rd party now. The current compression is done using zlib (via pako). Having an encoder label will help if we plan to increase number of encoders we plan to support.

[sidharthv96]

@mmorel-35 Created a serde library which encodes the serde used to the string. https://github.com/mermaid-js/mermaid-live-editor/blob/sidv/compress/src/lib/util/serde.ts

http://localhost:3000/edit#pako:eNptkU1PwzAMhv9KlBOI9Q9UXBDbJA6cdkORkJtYndV8QD40weh_J21JGB0-2Y_jV2_sM5dOIW-51BDClqD3YIRlOR4sGdDs_qtp2DbJ4ZruKRyv6Qt2Hv7glt2RjQx6XOND9GR71qNV6C-b00h4BpPTm9tVw0DEAmfbs73zAlgV7RCGR6edr41wIlMGc_meQA6lHi_1po9VvWbyHugTn-weMVYswe4g_js_r-DXUOecZhReT6RVhT7Z1WwJvuEGvQFS-S6ziuDxiAYFb3OqwA-CCzvmd-lN5WXsFEXneRt9wg2HFN3hw8pSL29-TrvA8Rs64piv
http://localhost:3000/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ

This can be directly copied and used in @jihchi 's mermaid.ink too.

[mmorel-35]

I like this solution! Let's see if @jihchi likes it too.

[jihchi]

I like this solution! Let's see if @jihchi likes it too.

Looks good to me 👍

[sidharthv96]

Feature deployed. Thanks @jihchi for the fast releases in mermaid.ink and @mmorel-35 for pushing towards a better pattern!