Customization of Omero Gallery

ahamacher · December 8, 2020, 10:42am

Hi everyone,

I’m currently playing around with omero-gallery on different omero instances with different needs. For us it is quite useful to have the standard UI browsing view (Group > Project > Dataset > Image), but in addition we would like to customize the UI a bit for beauty purposes (e.g. heading, logo, links). If I understand the documentation right the customization is only possible, when switching to the categories UI. I modified the settings for heading, title, etc. but indeed do not see any change in the UI. Adding omero.web.gallery.category_queries to the config activates all the settings. So now I was wondering, if I can set omero.web.gallery.category_queries in such a way, that the standard view is reconstructed. This question sounds a bit strange even in my ears. I would of course prefer to customize the UI without touching the categories. Is there a way to meet both demands?

Thanks in advance,
Anna

j.burel · December 11, 2020, 10:02am

Hi Anna

You say that you did not see any change in the UI, to be sure
Did you restart omero.web after making the configuration changes?
Below is the configuration file [1] used for idr.openmicroscopy.org

Which type of customisation do you have in mind?

Cheers

Jmarie
[1] https://github.com/IDR/deployment/blob/a7ae37572eae87ced103ee48724729976378c1d0/ansible/group_vars/omero-hosts.yml

ahamacher · December 11, 2020, 11:59am

Hi Jean-Marie,

yes, I restarted omero-web of course, but as I wrote, the behaviour matches in my opinion exactly the documentation. Maybe my explanation was a bit confusing, so I will try to explain visually what I would like to have at least on one of our omero instances:

Thanks in addition for posting the IDR configuration, that will help me on some of the customizations.

Have a nice weekend!
Anna

will-moore · December 14, 2020, 11:28am

Hi Anna,

You can simply configure Gallery to list Projects and Screens by name

$ omero config set omero.web.gallery.category_queries '{"all":{"label":"All Studies", "index":0, "query":"FIRST500:Name"}}'

That, together with

$ omero config set omero.web.gallery.subheading_html "Here are my Projects and Screens sorted by Name"

# just filter by name. Add other keys to filter by key-value pairs
$ omero config set omero.web.gallery.filter_keys '["Name"]'

Will give you:

But with only a single item in the category_queries config, I noticed that the layout has a small bug in the latest release - only shows two columns (issue created at https://github.com/ome/omero-gallery/issues/73). So you’ll want to use the 3.3.2 release.

Hope that helps,

Will.

ahamacher · December 15, 2020, 12:48pm

Hi @will-moore,

thanks for your effort, but that is actually not exactly what I would like to have. The entry point should not be the project/screen but the group (as it is pre-defined in the standard UI). In addition clicking on the project/screen in the categories UI opens instantly the related “/webclient/?show=project-” link. I would prefer the real browsing functionality provided in the standard UI. Please let me know, if there is still something unclear.

Cheers, Anna

will-moore · December 16, 2020, 9:55am

Hi Anna,
Ah, yes - Sorry, I forgot that the vanilla gallery starts at Groups for the top level.

So the ‘standard’ UI for gallery was originally built as a tutorial for how to do simple Group -> Project -> Dataset -> Image browsing with Django. So it’s quite minimal html templates and should be straight forward for you to customise e.g. the front page: https://github.com/ome/omero-gallery/blob/91be356d000e3471a1ec63067ba4dd0805bbad14/omero_gallery/templates/webgallery/index.html

That doesn’t include any filtering with the “Search by:” input that you included in your screenshot - That works by filtering all the Projects/Screens that are loaded into the page - which is not relevant if you’re only loading Groups at the top level.

But otherwise, customising the templates should be a good solution IF the current functionality of the standard Gallery UI is sufficient for you?

Let us know if that’s the case,

Cheers,
Will.

ahamacher · December 17, 2020, 11:13am

Hi Will,

thanks a lot for the useful input. I will recap the detailed needs with our team to identify which UI is the better compromise. I was hoping that it’s somehow possible to access the group information via the omero parameters in the ‘categories UI’ because I do think the search-functionality is mandatory especially with growing project amounts in the future.

In any case I have one more last question for you about the identifier above the images in the overview:

I was wondering how exactly this is configured in the IDR. I checked the config file posted by Jean-Marie but unfortunately couldn’t figure it out. What I would like to do in our case is to concatenate an existing key1 with a space and an existing key2 for example. Could you give me a hint on the correct syntax for omero.web.gallery.study_short_name?

Thanks in advance and merry Christmas
Anna

will-moore · December 18, 2020, 10:57am

Hi Anna,

See the omero-gallery README:

omero.web.gallery.study_short_name: This specifies a short name for Screen or Project to show above the study Image in the categories or search page, instead of the default ‘Project: 123’. The list allows us to try multiple methods, using the first that works. Each object in the list has e.g. {‘key’: ‘Name’}. The ‘key’ can be Name, Description or the key for a Key:Value pair on the object. If a ‘regex’ and ‘template’ are specified, we try name.replace(regex, template). In this example, we check for a Key:Value named “Title”. If that is not found, then we use a regex based on the object’s Name. This example is from the IDR, where we want to create a short name like idr0001A from a Name like: idr0001-graml-sysgro/screenA :

$ omero config set omero.web.gallery.study_short_name '[ {"key":"Title"}, {"key":"Name", "regex": "^(.*?)-.*?(.)$", "template": "$1$2"}, ]'

You can test this in JavaScript like:

var re = new RegExp("^(.*?)-.*?(.)$"); var template = "$1$2"; var nameOrValue = "idr0001-graml-sysgro/screenA" var shortName = nameOrValue.replace(re, template);

For the front page, you could provide filtering by group in the Categories UI, by using a little script to add a Key-Value pair of Group: group-name to each Project/Screen and add ‘Group’ to the omero.web.gallery.filter_keys. However, this would be a bit painful to keep up to date when new Projects/Screens are created.
However, if the Categories UI is otherwise suitable for you (you don’t mind the direct linking to webclient), adding the filtering of groups (similar to filtering by Name) wouldn’t be a big job.

It’s worth bearing in mind that the Categories UI loads all the Projects/Screens that the logged-in user has access to, along with all their key-value pairs. So if this gets large then it will get slower. Probably a thousand or more Projects/Screens would still be OK (not tested) but if an Admin were to log in on a large server where they could access ALL Projects/Screens then bigger numbers might be possible.

Regards,
Will.