Column selection UI for applying recipes

Development & Design
1

As part of the reproducibility project, I am working on improving the UX of applying JSON recipes (in the "History > Apply" dialog).

One feature I have implemented last month is the ability to adjust the column names mentioned in a recipe, so that they are compatible with the project the recipe is applied to. This means:

  • mapping any columns read by the recipe to columns already existing in the project;
  • giving names to columns created by the recipe, so that those names do not exist yet in the project.

Currently, the UI for this looks like this (for an example recipe taken from this tutorial):

image
image364×355 7 KB

Beyond the layout and wording, which can be improved I'm sure, I'd be interested to read what you think about the best way to select existing columns (in the first "Required columns" section). At the moment it's using simple text fields where the user needs to type the name of an existing column, but I think that would be improving, to help the user select a valid column name. I can think of multiple ways:

  • adding an auto-complete widget like for selecting reconciliation entities, adapted to work for columns,
  • no auto-complete widget, but some visual indication of whether the column name is valid or not (such as a green checkmark / red cross on the right-hand side of the field). The same sort of validation could be used for the created columns (which are required not to exist in the project);
  • using a UI similar to the Wikibase schema, with drag-and-drop of columns.

I think it would be useful to develop some UI elements that we would reuse in other places of the UI, to have a consistent experience around selecting columns.

2

I think autocomplete works great in this regard.
The example demo experience that I'm thinking of uses jQuery UI Autocomplete and has many examples on it's right side of it's page which can be combined for various behaviors.

Of particular note and usefulness, I would think would be to combine Accent folding with Scrollable results using maxheight to account for many existing column names?

3

At the moment it's using simple text fields where the user needs to type the name of an existing column, but I think that would be improving, to help the user select a valid column name. I can think of multiple ways:

Why not a native select-element(when picking existing columns)? It is; more or less resistant to user-errors, accessible by default, an existing pattern in OpenRefine, supports jumps in very long lists, ect.

A better select with search would indeed do good across OpenRefine but it might be better suited in a larger effort to tackle the current mix of UX patterns. Don't let perfect be the enemy, this functionality on its own moves the project forward!

but some visual indication of whether the column name is valid or not (such as a green checkmark / red cross on the right-hand side of the field).

Maybe just a native input with the pattern attribute? and possibly some CSS for border colors and such? It would be reusable in existing places more or less straight away.

Feel free to ping me on PRs.

1 Like