Show OR: My personal UI/UX improvements

Hi OpenRefine community! I got into using OR earlier this year and fell in love with the performance and power of the tool. :slight_smile:

As a webdev, I found some room for improvements for UI/UX and wanted to share my customizations with the community. Here are some things I found/improved:

UI (Visuals)

UX (Interactions)

  • Click outside of dialog to cancel (instead of clicking Cancel or OK buttons)
  • Double click column name to rename column
  • Right click column name to see menu (instead of clicking the button)
  • Middle click column name to hide column
  • Double click cell to edit (instead of clicking edit button)
  • Middle click cell to copy content

You can see all modifications in this commit if you'd like to check it out. Would love to hear what you think! I can work on a PR if anyone is interested.

Thank you for all you do!

1 Like

Thank you for interest in OpenRefine and sharing your work. Some of your suggestions address issues already identified by the community, and your contribution would be more than welcome (thank you for the link to your commit).

I listed below how I'll approach each suggestions

  • Dark mode

see #3017

  • Max height of 5 line + scroll on cells with long content -

no open issue as far as I know

  • Click outside of dialog to cancel (instead of clicking Cancel or OK buttons)

I have mixed feelings about this one. I don't want an erroneous click to close and lose any code I wrote in the transform windows. We already have the ESC as a keyboard shortcut to close the modal.

Double click column name to rename column

see goal post page and #6282

  • Right click column name to see menu (instead of clicking the button)
  • Middle click column name to hide column
  • Double click cell to edit (instead of clicking edit button)
  • Middle click cell to copy content

There is no open issue as far as I know. This is an interesting set of mouse shortcuts, and I'd love to hear from the community. It may be worth opening an issue to summarize them.

Amazing! Thank you for such detailed reply — I'm glad to see overlap between my list and the goal posts (it's an awesome list).

I agree with the click outside dialog, it can definitely be a problem for many. I'll think about some ways that it can be useful but also accident-proof it.

I'd be happy to contribute for #6282. I read the code contribution guide, but let me know if you have any good example for a PR (so I can try to replicate it).

I'll also consider opening an issue with a list of potential mouse shortcuts. I think we can find good inspirations from spreadsheet softwares (e.g. Google Sheets) so non-technical users can use the tool intuitively.

2 Likes

I will let @Rory guide you :wink:

Yes this is the best place to start the conversation. I think most of your suggestion for the mouse shortcut make sense.

1 Like

Thanks for all the work, @ntcho! Here is a PR I submitted that has some of the features we look for in pull requests: identifying which issue the PR relates to; a bulleted list of changes included in the PR; and, if appropriate, a screenshot with the result.

From the branch you shared, it looks like you're able to navigate the codebase to find where to make changes, but please feel free to reach out with any questions you might have. You can also open a draft pull request if you have some changes you want early feedback on. Once it's ready for a formal review we can move it out of "draft" status.

This is great! Thanks for the example. I'll open a draft PR for #6282 soon and we can continue the discussion on GitHub.

One quick question, is there any guideline for which JS runtime we should aim for? There are tons of old JS (i.e. pre-ES5/6) given the history of the project, but couldn't find any guides on which JS version is allowed for the codebase. In other words, can I use ES6 syntax on the codebase?

is there any guideline for which JS runtime we should aim for?

That's a great question. In the large majority of cases, I think it's safe to use ES6 syntax. However, the project largely avoids using promises and instead will use callback-based APIs when handling things like HTTP requests to the backend.

One notable exception to this is any JS code that is run by the backend. This uses a library called Rhino to execute JavaScript code within the context of our Java backend. This table might be useful to determine which pieces of ES6 syntax you can or cannot use (we currently use Rhino 1.7.15). I'm currently in the process of writing up more documentation on this.
That said, I think most of this JavaScript is contained in the files named controller.js.

1 Like