Share persistent link (include dots and image choice)

[romsson]

Create a url that contains positions and image choice. URL should be updated after each interaction so a page refresh re-loads exactly where the points were.

Eventually include/anticipate some more parameters (categories, etc.)

Eventually shorten the url (url limit is 2k chars)

Note (@severo): don't remember the uploaded pictures. See #52 for that feature.

[severo]

See https://twitter.com/ilyabo/status/1210112298234339328 for example

Their URLs: https://flowmap.blue/1icUMT7Q3V0DOPHBahXJlz7Mz_BYOgLv9InZUHX_5xIE?v=49.272478,5.910396,5.91&a=1&b=1&c=0&d=1&lt=0&col=Sunset&f=24

• https://flowmap.blue/: app
• 1icUMT7Q3V0DOPHBahXJlz7Mz_BYOgLv9InZUHX_5xIE: link to backend state, that contains the data and some init parameters, I guess (in fact, just the data since it's the google spreadsheet id: https://docs.google.com/spreadsheets/d/1icUMT7Q3V0DOPHBahXJlz7Mz_BYOgLv9InZUHX_5xIE/)
• ?v=49.272478,5.910396,5.91&a=1&b=1&c=0&d=1&lt=0&col=Sunset&f=24: interaction parameters that are never saved to the backend

So:

• persist the heavy data to some backend service (self-hosted, google docs, gist) - this requires an authentication step
• add the volatile state properties as query parameters of the URL.

[severo]

geojson.io allows the user to save the state to a gist (or to a new file in any of your GitHub repositories!):

http://geojson.io/#id=gist:severo/ea0b5a136625e915bf4ecbd828a11da7&map=6/-16.400/-63.550

(see created gist at https://gist.github.com/severo/ea0b5a136625e915bf4ecbd828a11da7 - API reference: https://developer.github.com/v3/gists/)

But obviously, you have to give some rights to the app (too much in the case of geojson.io!)

[severo]

https://blockbuilder.org/ does the same: it saves the code and data to gists, and requires the user to be authenticated to github and give some rights to the app (it's much less intrusive than geojson!)

The block: https://bl.ocks.org/severo/e85697db4fb9080ef685404aba785616/89a9faab8b5ab358aa342b441bb985b792b81d00 The gist: https://gist.github.com/severo/e85697db4fb9080ef685404aba785616

Beware: the GIST API doesn't allow to upload images nor any other binary data, just text!

[severo]

In order to save images, we might use the Imgur API. It allows 1.250 uploads per day from the application (for all the app users).

[severo]

The discussions:

• [ ] Media hosting Currently, the user can upload an image, and it only exists in the browser cache. In order to share any state that uses that image, we must "persist" that image to some backend service. Which one? Image hosting is very restricted (for censure/legal reasons), maybe use Imgur? Flickr? or some more generic service: dropbox? google drive? onedrive? local nextclouds? Note also that if we allow video uploading, the problem will become harder, but there are solutions too, like youtube, dailymotion, vimeo (or local peertubes).

  Note: it's possible to upload images to gists (see https://gist.github.com/mroderick/1afdd71aa69f6b29601d335751a1a9be), but it requires to use git. Not sure if it's possible through the API (https://blockbuilder.org/ "+" button doesn't allow to add an image: "Sorry, the gist API supports text files only.")

• [ ] Data hosting We would want to save the points, edges, and any data generated from the app, or uploaded to it (GeoJSON, etc.) The data could be binary or text, and therefore possibly we would have to just allow text datafiles (which would allow to store them as gists), or alternatively allow all types of data and store them to some of the generic services: dropbox? google drive? onedrive? local nextclouds? or github? Finally, if the data keeps very small (some points), it could be serialized and included in the URL.
• [ ] State parameters Depending on the size of the state, all or part of the state could be serialized and inserted in the URL as query parameters. I think that we must think from now about splitting the state into: the "data" (potentially large arrays) and the "interaction parameters" (known number of parameters)

[severo]

We will only share the "state parameters" in this issue. Data and media hosting are treated in #52.

[severo]

See the Vega specification editor. It allows to save a whole Vega specification in the URL, for example:

https://vega.github.io/editor/#/url/vega-lite/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6ALQAbZskoBmOgCtY3AHaQANOCgATdHkw5gUVgCcx2LTvSkmLDnXiwKkAL7qIkDEYDWZ0BDd4AT0JkM0gJJRDXP0hCbkYlPDM8I1ZkDRcNSGT0JVgAM24jVDMAbV9ovEZUZABVJWZQ7QC1KDzGZDFNUMrqlsh0WEb0ZvTVMHK3dGpqI2E8EJwSjT9xyDaOrpxIeG5WBL6B0IwADwB9RF2jQbHIbkJQ9CNqE+dlsABdKLcZ3cJ2ZsWkCakHeo3Gb226DE8FYYh0C3MeFYqDoJ3Ol1gdl2+xuhy2Oz2iTBEyg8ChMLh8yGSJRaIuxkxPUiUDxUCZkGJEIA7vFNNwuaUSW47qEjDlvF9oqzIGKlN43k5PhDFEZEosDGt2p1QgScVBCppkEZGsgEMglJp4tRIGBFZLID9WH8AWASkDhiDOStNWJ5sattoaXRZZ4wABeCNgACMHIgLnB3rJ0Nh8KGAQAFIHkXQmgBKcORgAMYAA-GAAOxgHBNTM6bN5g6DLYGo2x21KtzmnaWpTW-QQ44+N5udbagMeyX+III25GHtQtTDtlVWr1NXmZqTqAq9dugCyyj6ABVUn0AOrILo3I9sPoAMSMjD6AGUdC+9p6VhlvS3-QmVq0WqbPqc6tluWTTqEACOrA5JUuiVFQbZxvaLpCoBGzdCui4AWykFbPMqCxGKpjgUydQNFs9JXMhtr2ng3DcL6jD3P2uGaph+LYokZH4VAMFwcwOiMEhCrpCATggEAA

From the editor:

Share

We pack the Vega or Vega-Lite specification and an encoded string in the URL.

We use LZ-based compression algorithm and preserve indentation, newlines, and other whitespace.

Number of charaters in the URL: 865

Code is at https://github.com/vega/editor/blob/master/src/components/header/share-modal/renderer.tsx#L28:

    const serializedSpec =
      LZString.compressToEncodedURIComponent(this.props.editorString) + (this.state.fullScreen ? '/view' : '');
    if (serializedSpec) {
      const url = `${document.location.href.split('#')[0]}#/url/${this.props.mode}/${serializedSpec}`;

Uses lz-string. Not sure if it's still maintained, but it's a lot more lightweight (4kB) than pako (786kB).

See a comparison at https://observablehq.com/@severo/hello-lz-string