Variant Curation progress bar/calculator styling

[kilodalton]

As mentioned in PR #886 (related to #867)

#886

The current display does not match the site styling in terms of colors or using bootstrap styling.

@wrightmw confirms that the curators would like this changed as well.

As it is a visual centerpiece of the page after an Interpretation is started, it should be corrected in the next release.

@selinad @wrightmw can comment on what colors or style changes they would like to the bar.

@kgliu101 will consult with @mrmin123 if necessary for guidance on using bootstrap

[kgliu0101]

@wrightmw and @selinad Once you have any idea or comment about color and style of the progress bar, please write in this ticket. Thanks.

[kgliu0101]

By review of code in file /src/clincoded/static/components/variant_central/interpretation/shared/calculator.js, none bootstrap styling code is in class TestCalculator. It's used as a temporary UI to test the calculator before all criteria selections in interpretation tabs working. This class becomes unnecessary and will be deleted in this ticket since all criteria selections function as expected in VCI UI right now.

[selinad]

@wrightmw et al. - what do you think of this? ( @kgliu0101 please wait for additional feedback - this is just a first thought - thx!)

I think there may be a push for the criteria bar to show which are met, so I think this progress bar could just show counts of strengths...

[kgliu0101]

@selinad It's so quick, thanks lot. I am waiting for ...

[selinad]

You're welcome - at least something to work from...

[kilodalton]

@selinad Having the green and red juxtaposed would not be recommended.

[selinad]

for color blind considerations?

[kilodalton]

What if the the Benign and Pathogethic were highlighted only. But as discrete boxes within. Visually having the green box touch the red box is the problem. But the shades as shown above are on the right track.

[selinad]

another try:

[kilodalton]

I like it for impact but there may be problems rendering that in a responsive way for different size browsers

[selinad]

thx @kilodalton . I didn't quite understand your proposal, but open to anything if you can do a quick mockup.

Do the triangles make it difficult to render responsive? Or is there a problem with anything where direction is indicated between elements?

[wrightmw]

@selinad I like the idea of it. Not quite sure about the colors. I would want the middle 'Calculated Pathogenicity' section to stand out more. Although I'm not the best person to comment on colors. However to me the middle 'Calculated Pathogenicity' section and the RHS 'Pathogenic' section look very similar.

[kilodalton]

@selinad @wrightmw Probably best for us to have a 10-15 min conversation where we can whiteboard some options tomorrow. It's a central visual component that people will be tracking changes in so it's worthwhile to talk about it.

[selinad]

That works @kilodalton - wrt the feature being responsive, however, what are the issues to consider? That would be helpful to understand in thinking about it.

[kilodalton]

@selinad In terms of being responsive, the key component is "will this render meaningfully for the user in different window sizes, and what reasonable amount of code will I need to add to support an experience where the proper semantic info is still rendered". The arrow element could be a challenge. Individual boxes may need to be tiled vertically, etc. when the window gets narrower.

[selinad]

perfect -thanks for the explanation @kilodalton.

[selinad]

This doesn't address Matt's color concerns, but a quick look at vertical tiling possibility(?) as reference - board discussion still good. Maybe all tiles supposed to be same size during responsive behavior...

[kgliu0101]

@selinad @wrightmw @jimmyzhen @jimmyzhen Does the progress bar below match what we discussed last afternoon. Changes are: 1) added circle labels B and P, 2) Calculated Pathogenicity is used as a title on top because circle labels take lot space.

In large browser:

In medium size:

In small one:

[kilodalton]

@kgliu0101
It would be helpful for this project if the snapshots included some display images in the context of the full page.
We had decided that the whole box would be grey?

Also I am going to strongly advocate that we not use the colored B and P. And the words Benign and Pathogenic need to fully spelled out and not be dependent on a hover.

@kgliu0101 I think these bright colors are going to detract from the rest of the page, and they are not appropriate for the rest of the page/site UI. We had discussed the use of appropriate colors previously.

[selinad]

Hi @kgliu0101 thx for working on this.

A couple of things:

• yes, let's try the whole box gray
• I personally don't mind B and P in a circle - I truly think it will be obvious to curators, but agree the colors should be more subtle, in keeping with the site. As was suggested yesterday, you could also have a small light green circle next to the word Benign and a small red circle next to the word Pathogenic
• we had discussed a calculator icon and everyone liked that - is there a reason that couldn't be implemented?

thx!
Selina

[wrightmw]

@kgliu0101 @selinad @kilodalton

• I'm not a fan of the B and P in a circle in its current format with the block colour, but I'm ok with the B and P, it's just the colours I don't like. Maybe they would look better with a thin line circle (green line for benign and red line for pathogenic) and the circled filled in with white and have black B and P letters?
• I agree with the calculator icon

[kilodalton]

@selinad @wrightmw:
@jimmyzhen is creating a few Photoshop options for us to look at and then folks can pick which one makes the most sense in terms of the UI for readability, visualization, etc.

[jimmyzhen]

@selinad @wrightmw @kilodalton @kgliu0101 @mrmin123

Below are the 3 options for the progress bar UI discussed in the dev meeting.

Option #1:

[jimmyzhen]

Option #2:

[jimmyzhen]

Option #3:

[wrightmw]

@selinad @kilodalton @kgliu0101 @mrmin123
Thanks @jimmyzhen
I'm not keen on option #3 it looks too busy to me, with the rectangular blocks above the rectangular tabs.
I like the blue calculator icon.
Of the other two, I prefer option #2. I wonder if the grey circles around the numbers could be the same colour as the tick circles, so they wouldn't stand out so much?....i.e. the pathogenic ones could be light red and the benign ones light green.

[kgliu0101]

@selinad Do you need an instance for testing?

[selinad]

It might be useful. I could test it quickly this afternoon.

[kgliu0101]

@selinad @wrightmw @kilodalton @jimmyzhen Test instance is at: https://914-kl-progress-bar-style-5084894-kangliu.demo.clinicalgenome.org

[wrightmw]

Looks great!

[selinad]

It works beautifully! Thanks, @kgliu0101 !

[kgliu0101]

If no more comment, I am going to open a PR. Thank you all, especially @jimmyzhen. Without his help, this issue can not be done like the current one, appreciate.

[wrightmw]

Great job. @jimmyzhen and @kgliu0101

[kgliu0101]

The instance above is terminated. Thank you for testing.

[wrightmw]

Styling works great

[selinad]

Beautiful bar! Works perfectly.

[kilodalton]

Included in the last release (R7). This included the Variant Curation Interface. Nice job and thanks for your hard work.