Histogram range editor #1175

annehaley · 2023-05-26T16:35:07Z

Resolves #1117, resolves #1109, resolves #1122

Histograms include a mode to "exclude distribution tails". When this mode is enabled, the inputs for min and max become percentages from the ends. These automatically chop off 1% from each end (but if a bucket includes more than 1%, it may end up as more - in the below example, the minimum excludes 2%). The user can still change these values.

Histograms are drawn with some logic to shorten the height of the max frequency if it eclipses all other values.

From @manthey via Slack:

let v0 be the highest value in the histogram and v1 be the second highest. Make the top of the histogram min(v0, v1 * 1.5), so that the second highest value is 2/3 the total height unless making it so would make the highest value less than the total height.

An example without max frequency shortening:

The same histograms drawn with max frequency shortening:

girder/girder_large_image/web_client/vue/components/FrameSelector.vue

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue

manthey · 2023-06-05T21:01:23Z

I see a lot of extraneous parameters in the tile style queries (layerName, custom, defaultMin, etc).

Also, it doesn't seem to switch to the composited image until I fiddle with a setting -- I was expecting the previous behavior where all of the channels are composited without any specified min/max values until some value has been specified. This means that the range we display should probably be based purely on the dtype until we fiddle with values.

I don't seem to be able to type fractional percentages in the scale range (I type 0.2 and immediately it reverts to 0).

manthey · 2023-06-05T21:06:03Z

Eventually (in another PR), it'd be nice to be able to specify a default for any channel that has blank min/max values. That is, by default all channels would start with blank min/max values. If the overall defaults are set to 0.2% / 0.2% or 100 / 20000, then any channel with blank values would use those values, but channels with specified values would use those specific values. Clearing the numerical values in a channel would go back to using the default, and clearing the default would mean min / max are unspecified in the style.

The default controls could be much like the individual channel controls, but wouldn't have a histogram (or we have to merge histograms for all channels).

manthey · 2023-06-16T21:08:26Z

We need to change the color of the grab bars on the histograms -- red and black have no contrast in my vision, which makes the grab bars look like bars on the histogram to me.

The icons for showing the histograms are clunky looking and arranged oddly in my view:

manthey · 2023-06-20T18:50:57Z

Can we make the default auto-range be 0.2% (not 0.02%) and prevent the user from dragging it past 50%?

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue

annehaley · 2023-06-21T13:29:01Z

I removed the vue-switches dependency in d5b27c4 and now the tests are passing 👍

manthey · 2023-06-21T13:55:58Z

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue

-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
+    max-height: 300px;


This makes it surprising to edit the colors, as the color dialog gets hidden near the bottom. Also, if you expand a row such that it causes the scroll bar to appear, then something about the histogram gets cropped and I can't grab the right control handle:

The red band was visible before expanding all, and here the right handle isn't grabbable any more.

For the color pickers, I made them relative to the table container in 0799c52. For the scrollbar/canvas resize conflict, my solution was to make the scrollbar always visible: 35601fc

manthey · 2023-06-21T15:26:24Z

girder/girder_large_image/web_client/vue/components/FrameSelector.vue

@@ -83,7 +84,7 @@ export default Vue.extend({
                this.imageMetadata.bands = Object.values(this.imageMetadata.bands).map(
                    (b, i) => {
                        if (!b.interpretation) {
-                            return `Band ${i}`
+                            return `Band ${i + 1}`


When #1214 is merged, we will always know how many bands an image has. Specifically, if there isn't a bands entry which has the actual interpretation value, we should be using
https://github.com/girder/large_image/blob/master/large_image/tilesource/base.py#L1800-L1803
as the band interpretations if there are <= 4 bands. If there are more than 4 bands, the first three are considered red, green, blue and the are just numbered as we are now doing.

This change could be in a separate PR.

Should I take out the +1s here?

No. It doesn't have to be in a different PR.

The main difference with #1214 is we now know for all sources how many bands there are and can name them when there are <= 4 bands.

manthey · 2023-06-21T15:28:50Z

When I clear the entry in the min or max edit fields, I see a console error: Error: <text> attribute x: Expected length, "NaN".

manthey · 2023-06-21T16:00:07Z

When I try to show all the histograms of a many channel image, it is asking for the wrong frame for the histogram. Rather than asking for frames 0,1,2,3,4,... it is asking for 0,1,3,6,10,... My guess is that frame and framedelta are both set.

annehaley · 2023-06-22T14:53:24Z

When I clear the entry in the min or max edit fields, I see a console error: Error: attribute x: Expected length, "NaN".

Fixed in 4a46617

When I try to show all the histograms of a many channel image, it is asking for the wrong frame for the histogram. Rather than asking for frames 0,1,2,3,4,... it is asking for 0,1,3,6,10,... My guess is that frame and framedelta are both set.

Fixed in 448ef26

manthey · 2023-06-22T16:11:44Z

When you have scrolled down the list of channels, the color picker is out of view (scrolling up shows it).

annehaley · 2023-06-22T17:11:01Z

When you have scrolled down the list of channels, the color picker is out of view (scrolling up shows it).

Changed in 3e2fd3a. Rather than having a color picker component for every row in the table with each being relative to the color picker column, we now have one color picker component relative to the table header, which is sticky during scrolling.

manthey · 2023-06-22T18:36:35Z

girder/girder_large_image/web_client/vue/components/FrameSelector.vue

@@ -33,7 +34,7 @@ export default Vue.extend({
    },
    methods: {
        updateStyle(style) {
-            this.style = style
+            this.style = Object.assign(this.style, style)


What does doing this.style = in front of the Object.assign do?

manthey

Great.

annehaley added 12 commits May 26, 2023 12:34

Send item Id through Frame Selector and maintain composite layers data

1979d98

Create utils

65b178d

Add Histogram Editor component

4209768

Add range column

5654f64

Add distribution tails mode

d339386

Fix fetching histograms, refetch on currentFrame change

c18adbf

Make right tail value 100 - percentage

2c16c71

Only render composite layers for groups that exist

8dff225

Shorten max frequency height where appropriate

2fdae2f

Reduce auto tails

91096ed

Lint fix

bc037fd

Merge remote-tracking branch 'origin/master' into histogram-range-editor

7540698

annehaley marked this pull request as ready for review May 31, 2023 17:55

annehaley requested a review from manthey May 31, 2023 17:55

manthey reviewed Jun 1, 2023

View reviewed changes

girder/girder_large_image/web_client/vue/components/FrameSelector.vue Outdated Show resolved Hide resolved

Remove inline width

4f10794

manthey reviewed Jun 5, 2023

View reviewed changes

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue Outdated Show resolved Hide resolved

annehaley added 9 commits June 6, 2023 12:02

Remove extra parameters in tile style queries

ac05890

Add resample: false in histogram query

d1fb156

Consolidate histogram params definition

b44d581

Remove rounding to int when converting distribution percentages

7eac9c8

Add a library for toggle switches

aef7252

Redesign for autoRange

7163b29

Merge remote-tracking branch 'origin/master' into histogram-range-editor

44b7fa6

Style adjustments

692e916

Merge branch 'master' into histogram-range-editor

ccec9c7

annehaley requested a review from manthey June 15, 2023 18:44

annehaley added 4 commits June 20, 2023 12:00

UI tweaks

38648d0

Move style info out of template

843c7c4

Fix channel compositing style

e2a6bd2

Fix single row expand icons

6b86a8e

annehaley added 4 commits June 20, 2023 15:12

Set default auto range to 0.2 and don't allow auto range value > 50

f23ba07

1-indexed bands and channels when unnamed

94b80e6

Merge branch 'master' into histogram-range-editor

8ccf023

Replace vue-switches with basic css

d5b27c4

manthey reviewed Jun 21, 2023

View reviewed changes

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue Outdated Show resolved Hide resolved

manthey reviewed Jun 21, 2023

View reviewed changes

annehaley added 5 commits June 22, 2023 08:44

Fix color picker positioning

0799c52

Make scrollbar always visible

35601fc

Fix undefined value behavior when min or max input cleared

4a46617

Use input-80 class for 80px width

f2f544a

Fix iterative addition to histogram frame

448ef26

Merge branch 'master' into histogram-range-editor

f758fe0

annehaley requested a review from manthey June 22, 2023 15:30

Make one color picker component relative to sticky table header

3e2fd3a

manthey reviewed Jun 22, 2023

View reviewed changes

manthey approved these changes Jun 22, 2023

View reviewed changes

annehaley merged commit dcddfaf into master Jun 22, 2023

annehaley deleted the histogram-range-editor branch June 22, 2023 19:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Histogram range editor #1175

Histogram range editor #1175

annehaley commented May 26, 2023 •

edited

Loading

manthey commented Jun 5, 2023

manthey commented Jun 5, 2023 •

edited

Loading

manthey commented Jun 16, 2023

manthey commented Jun 20, 2023

annehaley commented Jun 21, 2023

manthey Jun 21, 2023

annehaley Jun 22, 2023

manthey Jun 21, 2023

manthey Jun 21, 2023

annehaley Jun 22, 2023

manthey Jun 22, 2023

manthey Jun 22, 2023

manthey commented Jun 21, 2023

manthey commented Jun 21, 2023

annehaley commented Jun 22, 2023

manthey commented Jun 22, 2023

annehaley commented Jun 22, 2023

manthey Jun 22, 2023

manthey left a comment

Histogram range editor #1175

Histogram range editor #1175

Conversation

annehaley commented May 26, 2023 • edited Loading

manthey commented Jun 5, 2023

manthey commented Jun 5, 2023 • edited Loading

manthey commented Jun 16, 2023

manthey commented Jun 20, 2023

annehaley commented Jun 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

manthey commented Jun 21, 2023

manthey commented Jun 21, 2023

annehaley commented Jun 22, 2023

manthey commented Jun 22, 2023

annehaley commented Jun 22, 2023

Choose a reason for hiding this comment

manthey left a comment

Choose a reason for hiding this comment

annehaley commented May 26, 2023 •

edited

Loading

manthey commented Jun 5, 2023 •

edited

Loading