An easy way to preview presets from PRs in iD

[tordans]

I find it quite abstract to judge a good preset just by the JSON file. It would be very handy, if every PR would create a preview URL that allows to preview the preset in iD.

A long while ago that was possible via the URL param ?preset=ExternalUrlToPreset.json in iD. The current API allows to specify a custom preset as part of the iD initialization https://github.com/openstreetmap/iD/blob/develop/API.md#presets.

That doc sounds to me, that it should be possible to extend an iD instance like https://github.com/openstreetmap/iD/blob/develop/index.html with a custom URL param that would link to the JSON of a PR like https://raw.githubusercontent.com/jdhoek/id-tagging-schema/2913d690b85add4f4e651fb52d86f4e38421c7da/data/presets/amenity/parking_space.json for example (PR).

Something like

https://ideditor-release.netlify.app/
?idTaggingSchemaPresetPreviewUrl=https://raw.githubusercontent.com/jdhoek/id-tagging-schema/2913d690b85add4f4e651fb52d86f4e38421c7da/data/presets/amenity/parking_space.json
#background=Bing&disable_features=boundaries&map=2.00/0.0/0.0

At first, this setup could be documented in the README. But potentially automated via Github Actions to comment the Preview URLs for each preview file on a PR.

---

Thoughts on this idea? – Possible? Useful?

[tordans]

https://github.com/openstreetmap/id-tagging-schema/pull/308 is a good example of a preset, that would benefit from this feature. The issue found by Martin had likely been discovered earlier with a good preview/tryout environment.

[tordans]

Here is a workaround by tyrasd https://github.com/openstreetmap/id-tagging-schema/issues/131#issuecomment-1005951773

[tordans]

I had a look at this today.

I got a very basic version running. Here is my hacky code, the gist-versions should help understand what I did https://gist.github.com/tordans/1c2faf42844f36c83e5e62687c7569a0/revisions?diff=unified

Conclusion: This should work; right now it doesn't really. But still, it is more helpful than having nothing.

One thing to keep in mind, it's not just the presets, it's also the fields. Both need to be available. And maybe even the icons.

---

Maybe this is something for a netlify-job on each (approved) pull request, which then builds an instance of iD with the given presets? For local development, one could use this same custom iD-instance.

Or maybe we can have a custom index.html that has a two text fields on the left, one for presets and one for fields. And I can add my preset-JSON there and reload iD to test it.

---

Random things:

• I am not sure https://github.com/openstreetmap/iD/blob/develop/API.md#custom-presets is up to date.
  • I was not able to get iD.coreContext().presets({ presets: {…}, fields: {…}, …}) working and the existing help text is not enough to understand it. For example: The snippet below on that page is what goes into presets. There should be a default-snipped for the other properties as well. Especially defaults and categories, which I do not recognize/understand. Maybe a running version would be easiest to showcase and document this.
  • The part above https://github.com/openstreetmap/iD/blob/develop/API.md#presets should say a bit more about where to put all this. I placed it before the .init(), which worked…
• There are specs which look like they might be helpful in understanding how to use this at https://github.com/openstreetmap/iD/blob/1ee45ee1f03f0fe4d452012c65ac6ff7649e229f/test/spec/presets/index.js#L181, but I did not get anywhere with this
• I looked at the tasking manager iD integration, which is the only place I know of that uses this feature. https://github.com/hotosm/tasking-manager/blob/ae44dc10697b5ebd03f1a12b04e7fa037b415388/frontend/src/components/editor.js#L60-L69. They use a different approach with window.iD.presetManager.addablePresetIDs(presets) which did not work for me. I wonder how they handle preset-fields?

[tordans]

A bit off topic since it is about writing code, not previewing the result … but since it is part of the whole experience and no other ticket open yet:

I just noticed https://www.gitpod.io/ which seems to be the same as https://github.com/features/codespaces. Both allow to start a dev environment in and from the browser using VS Code. Gitpod https://www.gitpod.io/pricing seems to have a limited free plan that we could use to have some kind of instant-dev-environment for this project.

[tordans]

After talking to @tyrasd, this is my current take on how this can be solved:

1. With https://github.com/openstreetmap/iD/pull/9475, iD can be opened with a custom preset URL
2. Setup Netlify or Vercel for this repo and configure PR preview branches.
3. Configure Netlify to comment on the PR with a link to the deploy preview. Now users have a one click to get to a preview. However, this preview shows this repo, not iD. Therefore…
4. Add a preview.html which has a script tag that takes the current URL and redirect to iD using #locale=en&presetUrlOverwrite=${window.location.href}
5. Add two script to npm run: prPreview:enableRedirect: "rn preview.html index.html" and prPreview: "npm run dist && npm run prPreview:enableRedirect". This will make sure that when we open the netlify domain the index.html is loaded (and redirects the user) but in all other cases the "preview" in "preview.html" signals what this file is used for. Inside Netlify, we can now use npm run prPreview to build the site.