Add representative color bar as the new value indicator in the main DendroView

Issue #322 new
Christopher Keil repo owner created an issue

USE CASE: WHAT DO YOU WANT TO DO?

Hover over the main matrix and know which value the currently hovered-over tile represents.

STEPS TO REPRODUCE AN ISSUE (OR TRIGGER A NEW FEATURE)

N/A

CURRENT BEHAVIOR

No value indicator is available at the moment.

EXPECTED BEHAVIOR

A small representative color bar in the left lower corner + a data value indicator lets the user know what the data value of the currently hovered over tile is.

DEVELOPERS ONLY SECTION

SUGGESTED CHANGE (Pseudocode optional)

Reuse code from the color settings implementations (GradientBox.java, etc.) and implement other needed code so that it can be combined with MatrixViewControllers MouseAdapter class IMVMouseAdapter.java which listens for mouse movements and relates cursor position to the data value of the tile it hovers over.

FILES AFFECTED (where the changes will be implemented) - developers only

IMVMouseAdapter.java, DendroView.java

LEVEL OF EFFORT - developers only

major

COMMENTS

This issue was created to separate and split the layout change from implementing this and thus allow for us to resolve #247 which was already of the level "overhaul" with massive changes involved.

Comments (21)

  1. Anastasia Baryshnikova

    As I was navigating through a matrix recently, I thought that the most intuitive place to have a data value indicator is at the tooltip of the cursor as you point to the cell. We can still have the colorbar, but I think we should also implement the more "local" indicator (right there where you're pointing).

  2. Robert Leach

    A description of the final look & feel of the color bar exists in issue #247, which was closed without the issue being fully addressed:

    "For the data value, we will try to implement the color bar idea: a color bar corresponding to the current color settings and a moving line (+ a numerical value) within the color bar that is synchronized with the movements of the cursor and indicates where on the scale the current value is. If possible, we will also try to show the histogram of values on top of the colorbar, but that could be tricky."

    This issue's expected behavior & suggested change should be updated to reflect this.

  3. Christopher Keil reporter

    The other issue was resolved & closed because we separated the color bar part into this issue for future implementation and the layout & search bar stuff was finished. So the issue was fully addressed, but extraction of the color bar stuff to this issue was not documented in #247.

  4. Robert Leach

    I was thinking about this issue and mocked up what I thought would be neat. It would do these things:

    When the cursor is over the matrix:

    • Show the value of the currently hovered cell
    • Show a red pointer in the spectrum where the value of the currently hovered cell is
    • Show the average value of the currently selected cells
    • Show a yellow pointer in the spectrum where the average value of the currently selected cells
    • Show the average value of the currently visible cells
    • Show a white pointer in the spectrum where the average value of the currently visible cells

    When the cursor is hovering over row or column labels:

    • Show the average value of the cells of the currently hovered row/col
    • Show a red pointer in the spectrum where the average value of the cells of the currently hovered row/col is
    • Show the average value of the currently selected cells
    • Show a yellow pointer in the spectrum where the average value of the currently selected cells
    • Show the average value of the currently visible cells
    • Show a white pointer in the spectrum where the average value of the currently visible cells

    When the cursor is hovering over a tree node:

    • Show the average value of the cells of the currently hovered tree node
    • Show a red pointer in the spectrum where the average value of the cells of the currently hovered tree node is
    • Show the average value of the currently selected cells
    • Show a yellow pointer in the spectrum where the average value of the currently selected cells
    • Show the average value of the currently visible cells
    • Show a white pointer in the spectrum where the average value of the currently visible cells

    When the cursor is not over any of the above:

    • Show the average value of the currently selected cells
    • Show a yellow pointer in the spectrum where the average value of the currently selected cells
    • Show the average value of the currently visible cells
    • Show a white pointer in the spectrum where the average value of the currently visible cells

    And here's the mockup. I made it a bit large, but size isn't important to convey the idea.

    spectrumticker.png

  5. Robert Leach

    We spoke briefly in today's meeting about this idea (the histogram for the data ticker) and I made some adjustments. I also realized a couple things.

    1. This histogram could change based on the boundaries set. I.e. If the boundaries are outside the data, the histogram wouldn't ever reach the edges. If the boundaries are inside the data, what happens to the histogram for the quantity of values outside the data? Are they added to the edges or is the data re-binned to make the AUC add up to 1? Where do you draw the pointer if the value is outside the color boundaries?
    2. How do we depict a histogram when the data is binary or trinary?
    3. How does the user know if the value they are looking at is an average?
    4. What if the data is so zoomed out and dense that each pixel has multiple values under it?

    Here how I think we should address these issues:

    1. Whether the boundaries change, we should keep the same histogram data and simply plot a subset of the data. We don't need to rebin. If a hovered value is outside the boundary, draw the pointer at the boundary, but pointing off the edge instead of up, with the specific value below it. To address the fact that the boundaried range could be smaller than the data, we can provide a legent with min/max/center/etc values.
    2. To make things simple, just treat discrete data the same way. The histogram will just look weird.
    3. We can put an asterisk next to values that represent an average.
    4. See #3.

    spectrumticker2.png

  6. Robert Leach

    Have to think about how small this will be displayed too. Might be too small of an area for what I'm thinking. In fact, looking at this mockup, I don't think it can work - at least not in its current design as proposed here:

    histogram_mockup.png

    It's just too fine detailed of a figure to be shrunk down like that. And it doesn't look symmetrical with the rest of the interface...

    Perhaps if I moved the ticker's value:

    • Red/hovered
    • White/visible
    • Yellow/selected

    to where the current min/max/ave is, took off the color boundary values, moved the min/max/center/ave/med/boundaries & footnote into a tooltip, and reduced the width to the row label/tree width, it would fit in better...

  7. Robert Leach

    OK, I have something that I think looks better. I'm pasting 2 versions, with and without the tooltip:

    histogram_mockup2.png

    histogram_mockup3.png

  8. Christopher Keil reporter

    This looks like a great mock up, I really like it.

    Could we possibly split this into multiple steps & issues? I feel like implementation would be pretty complex. For example, implement the simple bar + indicator arrows first or the legend first...

  9. Robert Leach

    Yeah, good idea. Here are things I'm thinking in terms of breaking it up:

    1. Calculate average of selection
    2. Calculate average of visible area
    3. Calculate average of a subtree
    4. Calculate hovered tile average (accounts for multiple data values under 1 pixel)
    5. getHistogram - Takes number of values needed to fill the space (used for binning) and the start & stop boundary values and returns array of doubles that sum to 1
    6. Convert histogram to pixel heights
    7. drawhistogram - takes the array of doubles that were converted to pixel values & draws each stack of pixels like essentially a bar chart
    8. Something that creates the tooltip content
    9. Something to draw the markers (including the "off the edge markers)

    ...

  10. Log in to comment