howto modify layout of the image viewer

[kwiechen]

Hello,

we like using DSA especially because of the low resource requirements (our instance for archiving WSIs is running on a DS420+ NAS without problems). I would like to modify the viewer layout a little bit - the info bar should be placed below the image viewer. Can you help please?

Best regards,

Kai

[manthey]

There are three approaches to modifying the interface if it doesn't expose options that you want. (a) you can write a new girder plugin that gets added to the existing configuration that can hook into any of the UI views and modify them. This could modify the rendering either by replacing existing templates or just modifying the templates before they are rendered in the DOM. (b) you can write a completely different UI that uses the same server (see https://github.com/DigitalSlideArchive/wsi-superpixel-guided-labeling) as an example, or (c) you could propose an option that would make the modification you desire as a PR to the main HistomicsUI repo.

And, if appropriate, you can also hire Kitware to do any of this for you.

[kwiechen]

Thank you for lots of information .... I will try it out

Best regards

Kai

[kwiechen]

I have not yet identified a starting point for variant (a). Can you please give me a hint which files need to be modified?

The image viewer show

1 -i Info
2 -the image
3 - Annotations Metadata
4 - Files and links

So a lot of vertical space is used by text information irrelevant for us. This limits using DSA for teaching and demonstration purposes.

Best regards,

Kai

[manthey]

Image can be viewed in the Girder item page and also in the HistomicsUI page. Based on what you just said, you are looking at them in the Girder item page. This page gets modifications. For instance, the large_image girder plugin determines how to show the image viewer, associated images, image specific data, etc. See https://github.com/girder/large_image/blob/master/girder/girder_large_image/web_client/views/itemView.js for how it modifies that page. It can also be altered after the fact. Another project does this via this code: https://github.com/DigitalSlideArchive/DSA-WSI-DeID/blob/master/wsi_deid/web_client/views/ItemView.js

Both of those are fairly complex examples (and the second is definitely a bit hacky). If you search any girder plugin for an "itemPage.js", that is the typical name of a file that overrides how the item page looks.

[kwiechen]

I have removed the -i Info bar by editing /opt/girder/girder/web_client/src/templates/body/itemPage.pug within the docker container followed by rebuilding and restarting girder.

The initial item/image is only using about 30% of the viewport width - is there a file/setting to optimize use of the viewport?

Is it possible to debug the item view without docker? A nice feature would be combining the thumbnail folder list with the image/item view.

Best regards,

Kai