JavaScript to help plugins interact with the fragment part of the URL

[simonw]

Suggested by Markus Holtermann on Twitter, who is building https://github.com/MarkusH/datasette-chartjs

I've been looking at datasette-vega for how you persist chart settings between form submissions. I've adopted that for datasette-chartjs. Any thoughts on adding a public JS API to #datasette itself, that plugins can rely on?

I'm talking about functions like onFragmentChange, serialize, unserialize, ... That turn an object into a URL encoded string and put it into the location's hash. And also updating all links/forms automatically.

Essentially, a plugins could do something like document.datasette.setConfigValue('prefix', 'foo', 'bar') and .getConfigValue('prefix', 'foo'). And the functions would take care of updating document.location.hash, all (necessary) a.href and form.action

https://twitter.com/m_holtermann/status/1338183973311295492

[MarkusH]

Thanks for opening the issue, @simonw. Let me elaborate on my Tweets.

datasette-chartjs provides drop down lists to pick the chart visualization (e.g. bar, line, doughnut, pie, ...) as well as the column used for the "x axis" (e.g. time).

A user can change the values on-demand. The chart will be redrawn w/o querying the database again.

However, if a user wants to change the underlying query, they will use the SQL field provided by datasette or any of the other datasette built-in features to amend a query. In order to maintain a user's selections for the plugin, datasette-chartjs copies some parts of datasette-vega which persist the chosen visualization and column in the hash part of a URL (the stuff behind the #). The plugin load the config from the hash upon initialization on the next page and use it accordingly.

Additionally, datasette-vega and datasette-chartjs need to make sure to include the hash in all links and forms that cause a reload of the page. This is, such that the config persists between clicks.

This ticket is about moving thes parts into datasette that provide the functionality to do so. This includes:

1. a way to load config options with a given prefix from the current URL hash
2. a way to update the current URL hash with a new config value or a bunch of config options
3. updating all necessary links and forms on the current page to include the URL hash whenever its updated
4. to prevent leaking config options to external pages, only "internal" links should be updated

There's another, optional, feature that we might want to think about during the design phase: the scope of the config. Links within a datasette instance have 1 of 3 scopes:

1. global, for the whole datasette project
2. database, for all tables in a database
3. table, only for a table within a database

When updating the links and forms as pointed out in 3. above, it might be worth considering which links need to be updated. I could imagine a plugin that wants to persist some setting across all tables within a database but another setting only within a table.