Add color bar overlay

[brisvag]

References and relevant issues

• Add frequently-requested overlays using new overlay machinery #5960
• Meta: Visualization and Overlays - Goals for improved canvas experience #7587
• depends on Tiling canvas overlays #7836
• includes changes from Refactor layer overlays visuals from VispyLayer to VispyCanvas #7835 and Tiling canvas overlays #7836. Relative diff: brisvag/napari@brisvag:napari:feature/tiling-overlays2...feature/colormap-overlay

Description

Added a colormap/colorbar overlay.

Try with:

import napari

viewer = napari.Viewer()

# enable grid with stride 2 to get layers split two-by-two
viewer.grid.enabled = True
viewer.grid.stride = 2

# set the scale bar to gridded mode so it appears in each grid box
viewer.scale_bar.visible = True
viewer.scale_bar.gridded = True

layers = viewer.open_sample('napari', 'lily')

# enable color bars
for layer in layers:
    layer.color_bar.visible = True

[psobolewskiPhD]

Looking pretty spicy!
One thing I immediately ran into is that it puts both colorbars on top of each other, so you only see the top most.
Well that and the lack of numbers, but you already noted that limitation in the OP.

[brisvag]

One thing I immediately ran into is that it puts both colorbars on top of each other, so you only see the top most.

Yeah, this is a pretty big limitation currently with canvas overlays. I've been thinking abotu this since I worked on the unified system using Position.TOP_LEFT etc, and I would like to try to have them "tile". Basically, if you have 3 top_left overlays, they could be put side by side, since we know their dimensions. Might be the right occasion to try and implement this :P

[psobolewskiPhD]

Even having a warning like:
"Overlay foo is already at bottom right, using top right."
(and the behavior) wouldn't be absolutely horrible.
Would need to check scale bar too.

[TimMonko]

Great start! Love this so so so much! I keep seeing this feature request pop up in various places.

1. I think it's worth trying to sort out a tiling of the colormaps. Logic for moving colormaps should help when trying to implement something like Use Overlays to be able to provide layer names on the canvas (including grid mode) #7321, too!
2. Could we have some kind of 'box'-like implementation as with the scalebar. For example, it'd be nice to have a white box (or border) because the low values dissapear into the background and you lose the size of the scale.
3. Can we make the size settable, as with scalebar. Would be nice. E.g., looks a bit small on a large canvas

Anyways, this is super awesome!

[brisvag]

Yes to everything!

[brisvag]

I managed to get the tiling to work!

import napari
v = napari.Viewer(ndisplay=3)
v.scale_bar.visible = True
ll = v.open_sample('napari', 'cells3d')
for l in ll:
    cm = l._overlays['colormap']
    cm.visible = True
    cm.position = 'top_right'

Cool things that now work as expected:

• changing order of layers
• making layers invisible
• changing position of any canvas overlay (try v.scale_bar.position = 'top_right')

A whole lot of refactoring went into this, so the diff is huge now; I will split out into smaller PRs if we like this approach :)

[brisvag]

Ok, I create #7835 and #7836 which respectively refactor the overlay code, and introduce tiling. The diffs are:

main -> refactor: main...brisvag:napari:feature/tiling-overlays2
refactor -> tiling: brisvag/napari@refactor/overlays...brisvag:napari:feature/tiling-overlays2
tiling -> this PR: brisvag/napari@brisvag:napari:feature/tiling-overlays2...feature/colormap-overlay

[brisvag]

And added all sorts of extra details to the colormap!

All these are now settable:

    size: tuple[float, float] = 50, 250
    ticks: bool = True
    n_ticks: int = 4
    tick_length: float = 5
    font_size: float = 7
    color: ColorValue = Field(default_factory=lambda: ColorValue('white'))

[brisvag]

No, this is wrong. The padding is corrrelty only added to the left because that's just the spacing between the tick and the text, not a "text margin". The reason why it looks bad is again your scaling issues. Looks fine here reverting your change:

And if I keep it, I get insane spaces. We need to find a solution that accounts for that weird inconsistent scaling for text :/

[TimMonko]

Yay colorbars are fixed!
(I'll post in tiling about the gridded issues))

import napari

v = napari.Viewer()

v.scale_bar.visible = True
v.scale_bar.box = True
v.scale_bar.gridded = True

v.text_overlay.visible = True
v.text_overlay.text = 'Points'
v.text_overlay.font_size = 20
v.text_overlay.position = 'bottom_right'

v.grid.enabled = True
v.grid.stride = 2

ll = v.open_sample('napari', 'lily')
for l in ll:
    cm = l._overlays['colormap']
    cm.visible = True
    cm.position = 'top_right'

napari.run()

[brisvag]

Image for release notes.

[brisvag]

Last minute question: layer.color_bar or layer.colorbar? Currently it's color_bar.

[TimMonko]

Last minute question: layer.color_bar or layer.colorbar? Currently it's color_bar.

I prefer colorbar, personally. Also, its called colorbar in matplotlib and ggplot2 (R).

[imagesc-bot]

This pull request has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/napari-v0-6-5-is-out/116715/1