Update card summary design

[asbates]

Updates the summary row of the card header.

• Removes "Include" for NA/Inf
• Move NA/Inf contents further to the right of the card summary.
• NA/Inf displays "NA/Inf" with a check or X. Check if yes, X if no. If no NA or Inf are present in the column, nothing is displayed
• For value/selected portion of summary, the text is automatically truncated depending on screen width.
• For categorical variables, the selected/value display is as follows
  • if the total length of "level 1, level 2, level 3" is more than 40 characters, the text "N levels selected" is used.
  • otherwise, the selected levels are displayed
  • 40 characters is a magic number and is an approximation. I found it to be ~300px which is the total text limit. But different font sizes, capitalization vs. not, browser zoom, etc. will all affect the actual number of characters that = Xpx. So there's never going to be a "right" value for this
• For numeric and dates, an endash is used instead of "-" to separate the selected values
• For numeric variables, if there are > 4 significant digits the number is formatted in scientific notation with 4 significant digits. This is related to [Question]: Setting rules on when to use scientific notation for filter card summary display #251. If the current implementation is not exactly what we want, it should affect this PR. We can refine the method with [Question]: Setting rules on when to use scientific notation for filter card summary display #251.
• The font size of some peripherals of input elements were adjusted to match the font size in the card header.

Fixes #220

[donyunardi]

For max-width of 300px, should we use percentage (%) for better responsive result? Say 80%?

@lcd2yyz please see the proposed result where Andrew is trying to keep the datetime in one line.
Anything over a specific criteria (currently 300px) will result in ellipsis.

[asbates]

For max-width of 300px, should we use percentage (%) for better responsive result? Say 80%?

@lcd2yyz please see the proposed result where Andrew is trying to keep the datetime in one line. Anything over a specific criteria (currently 300px) will result in ellipsis.

@lcd2yyz Just want to add a note based on a discussion we had. The 300px limit will only affect super wide screens. Suppose someone has a very wide screen so that the filter cards are 1000px wide. Then at most the selected value text will cover 1/3 of the card width. On a small screen, the text will be truncated, with '...', if it is too big to fit within the width of the card.

[chlebowa]

Upon first look it's great. A few notes though:

1. I would add some margin to the NA and Inf icons, as the ellipsis is a little too close to them.
2. During refinement yesterday some details were raised that should be tackled, e.g. font sizes on checkboxes in ui_keep_na. I think @donyunardi has a list.

I will have a closer look later tonight.

[donyunardi]

Thanks for reminding that @chlebowa
Here's the list that we discussed, excluding any color scheme topics (because we may want to tackle this together with the whole bootstrap theme topic):

• NA and Inf design for single filter card
• DateTime filter card display
• space in filter card label/selected (.filter-card-controls > div.form-group)
• padding in filter body, making sure it's equal pad on all sides
• Keep NA font-size, make it consistent with other shiny inputs font-size

[lcd2yyz]

1. I would add some margin to the NA and Inf icons, as the ellipsis is a little too close to them.

Agree with this.

@lcd2yyz Just want to add a note based on a discussion we had. The 300px limit will only affect super wide screens. Suppose someone has a very wide screen so that the filter cards are 1000px wide. Then at most the selected value text will cover 1/3 of the card width. On a small screen, the text will be truncated, with '...', if it is too big to fit within the width of the card.

Other than the margin, ellipsis looks pretty nice to me. However, I would prefer to add some conditional handling if possible

• For categorical variables (checkboxes or dropdowns), I would still prefer to stick with the "N level selected" text when over then 300px limit. The message is more much more informative when multiple level are selected compared to the ellipsis, especially if there is a really long dropdown list.
• For everything else, eg. numerical, dates, datetimes, I'm happy with the current implementation.

[chlebowa]

For the record, I still don't like this:

In my opinion this should spell "3 levels selected".

• For categorical variables (checkboxes or dropdowns), I would still prefer to stick with the "N level selected" text when over then 300px limit. The message is more much more informative when multiple level are selected compared to the ellipsis, especially if there is a really long dropdown list.

It is very difficult check both number of levels and the span width. On the other hand, the benefit is negligible, as the one can click to expand the filter card and view all selected levels plainly. Furthermore, the result can be outright misleading, as some factor levels can be quite long (again, there exists something on the lines of "NATIVE AMERICAN OR PACIFIC ISLANDER") and if one of those happens to be the first of two, the truncated text will appear the same whether one or two levels are selected.

We should always go with "n levels selected" for n > 1, with the exception of logical values and possibly binary factors, although the risk of a very long string will remain.

Also, enumerating date-times like in the image above is not intelligible anyway.

[lcd2yyz]

It is very difficult check both number of levels and the span width.

I thought we are moving away from checking the number of level => only using character width of the selected levels?
In this example, although the original input is a datetime variable, it only has 3 unique values, thus treated as categorical variable by the filter panel (hence the checkboxes). As such, I would also expect to see "3 levels selected".

To summarize again to ensure we are aligned

• For variables that use checkboxes and dropdowns UI, default to display all selected values/levels concatenated together, if the total character length is shorter than a specified criteria (current 300px seems reasonable to me). If longer, should display "N level selected", no ellipsis.
• For other UIs (ie. date/datetime or numerical), summary line will display the selected range, and if the total character length of the selected range is longer than the specified criteria, display ellipsis as already implemented.

[asbates]

Thanks for reminding that @chlebowa Here's the list that we discussed, excluding any color scheme topics (because we may want to tackle this together with the whole bootstrap theme topic):

* NA and Inf design for single filter card

* DateTime filter card display

* space in filter card label/selected (.filter-card-controls > div.form-group)

* padding in filter body, making sure it's equal pad on all sides

* Keep NA font-size, make it consistent with other shiny inputs font-size

Should we keep things that are not part of the summary in separate issue? I could see an exception for NA font size for example; that semi-relates because it's font size compared to summary.

[asbates]

It is very difficult check both number of levels and the span width.

I thought we are moving away from checking the number of level => only using character width of the selected levels? In this example, although the original input is a datetime variable, it only has 3 unique values, thus treated as categorical variable by the filter panel (hence the checkboxes). As such, I would also expect to see "3 levels selected".

To summarize again to ensure we are aligned

* For variables that use checkboxes and dropdowns UI, default to display all selected values/levels concatenated together, if the total character length is shorter than a specified criteria (current 300px seems reasonable to me). If longer, should display "N level selected", no ellipsis.

* For other UIs (ie. date/datetime or numerical), summary line will display the selected range, and if the total character length of the selected range is longer than the specified criteria, display ellipsis as already implemented.

Yes, we were moving away from checking just the count of levels. When I managed to implement the auto-truncating of text via CSS, I posed the question of whether this was sufficient to replace counting number of characters. @chlebowa has a good point about levels with long names. Personally I think '...' at the end of the text effectively communicates that there is more to the story so for details expand the card.

I think there is some confusion between the truncating of text with CSS and what content is populated in the section the CSS applies to. I was thinking the current CSS is sufficient to where we don't have to worry about counting levels or characters. We just put the selected values in and let CSS adjust the display. If it is not sufficient, that's perfectly fine. As far as the 300px, that has nothing to do with what text we put in the card. In fact, there isn't a way to check how many pixels a given selection of text will be (a reliable way at least). The only thing we can do is count characters and try to pick a value that will work. Again, I thought the CSS would be sufficient to where we don't need to do this but if not that's fine.

[donyunardi]

Thanks for reminding that @chlebowa Here's the list that we discussed, excluding any color scheme topics (because we may want to tackle this together with the whole bootstrap theme topic):

* NA and Inf design for single filter card

* DateTime filter card display

* space in filter card label/selected (.filter-card-controls > div.form-group)

* padding in filter body, making sure it's equal pad on all sides

* Keep NA font-size, make it consistent with other shiny inputs font-size

Should we keep things that are not part of the summary in separate issue? I could see an exception for NA font size for example; that semi-relates because it's font size compared to summary.

New issue to handle the css part of filter card:
#263

[donyunardi]

We should always go with "n levels selected" for n > 1, with the exception of logical values and possibly binary factors, although the risk of a very long string will remain.

I am leaning toward this as well:

• If n = 1, show full value

• If n = 1 and the value length is > 300px, use ellipsis for overflow text.

• if n > 1, displays n levels selected.
  To me, this behavior seems consistent. Otherwise, if we don't establish the rule that n > 1, the user may see complete values on a larger screen but only see "..." on a smaller screen. By setting this rule, we can consistently inform the user that when they see "..." it indicates that only one value is selected and the text is too long to fit in the available space. As of this writing, I believe the rule for n levels selected is n > 2.

Other than this, this PR looks good.

[lcd2yyz]

• the user may see complete values on a larger screen but only see "..." on a smaller screen

I thought the purpose of the ellipsis is to handle the potential overflow due to screen size difference. The presence of ellipsis would signal that there is more than what user sees, which (hopefully) prompt the user to check by expanding the card.

The reason why I suggested to use a cutoff limit based on character length, is because of potential categories with very short character lengths, like SEX (F, M, U) or ARMCD (A, B, C), where most likely all can fit in one line (same reason why treating logical and binary vars differently). The summary will be much more informative to the app users to see all selected values, than just "N level selected".

For now, I'm okay with using rule n levels selected for N>2 categorical vars for simplicity and wrapping up the PR. We can log a separate enhancement issue for future considerations.

[asbates]

@lcd2yyz @donyunardi Right now this code displays categorical values depending on length of the text for the selected values. So it does attempt to display e.g. "M, F, U". If however the text is too long (40 character magic number right now), then "n levels selected" is used.

[lcd2yyz]

@donyunardi and I reviewed the UI together this afternoon, I really like it! Exactly what I had in mind!
Thanks @asbates

[gogonzo]

On asmaller windows buttons get shoft out of the box (see remove button). Besides

[chlebowa]

On asmaller windows buttons get shoft out of the box (see remove button). Besides

There is a separate issue for that: #236