Adding Scale Bar Functionality to the GeoJS viewer

Development
1

I am extremely impressed by Digital Slide Archive’s ease of setup, I am working with z-stacked images and was relived that GeoJS viewer on the web client came with this in the box. We are trying to implement a scale bar similar to that found in the Slide Atlas viewer. I just cannot seem to find where these viewers are in the /girder/src/ files. Please let me know if I am looking in the wrong spot or any guidance would be much appreciated. Thank you!

2

In the HistomicsUI view, there is a scale bar in the bottom right corner (assuming your image reports a scale). This is instantiated in the large_image library in the girder/girder_large_image/web_client/views/imageViewerWidget/geojs.js file using a GeoJS scaleWidget.

– David

3

Thank you very much!
Would there be a way of carrying over the z-stack functionality over to the HistomicsUI view?
Refering to a way to navigate the z-stacks, like the slider found on the itemView

4

Yes – you can either modify the HistomicsUI code or add another plugin that would add a frame (z) selector panel. In the most general case, this would just expose frames like the itemView; it could alternately expose separate sliders for z, t, xy, c if the frames are so designated. This wouldn’t be a lot of code, but you would need a little knowledge of the Girder client plugins to do it.

5

I should add, that in the HistomicsUI, the complexity becomes that annotations are probably per z-slice not for every z-slice, so to add this to the core library would require more work to handle annotation z location.

6

Understood, thank you for all your assistance!

7

I attempted to modify geojs.js using d3-scale just trying to generate a scale bar with x = d3.scaleLinear(). Does restarting the container using the deploy_docker.py script push the changes? I apologize for the rudimentary questions as both docker and javascript are pretty foreign to me.

8

I apologize for reviving the thread, but I was looking around the geojs viewer widget again and noticed that it had a scale bar already.

var GeojsImageViewerWidget = ImageViewerWidget.extend({
    initialize: function (settings) {
        this._scale = settings.scale;
        this._setFrames = settings.setFrames;

if (this._scale && (this.metadata.mm_x || this.metadata.geospatial || this._scale.scale)) {
            if (!this._scale.scale && !this.metadata.geospatial) {
                // convert mm to m.
                this._scale.scale = this.metadata.mm_x / 1000;

Am I misinterpretting this? or is there something wrong with my image metadata that would be impeding the scale bar rendering? Thank you.