updateable count labels

[gogonzo]

closes #173 #174 #167
Tested on: chrome, safari and firefox with default shiny, BS3-5. No major styling/js issues.

In this PR we've changed the way how the labels are created and updated. Basically, counts are the separate shiny/html elements which have their own id, which they are identified by.

1. We introduced new shiny inputs to create and update values of the labels:

• countBar - creates n ui elements for each choice with progressbar and text label
• countBar - creates a ui html element with progressbar and text label
• make_count_text - composes the label $choice ($filtered/$unfiltered)

2. We've created respective update* methods to keep the labels up to date

• updateCountBars
• updateCountBar
• updateCountText

3. To update the counts without triggering reactive cycle we created two js handlers which change a bar and a label found using id.

4. Instead of observeEvent(filtered_counts(), ...) we used renderUI(... filtered_counts()) which serves as the observer for the visible item only!

5. In the ChoicesFilterState we applied this to trigger change of the selection only when the picker is closed - closing pickerInput labels (counts ) are too reactive #167

You can find examples in #165 and one can use also teal.gallery::launch_app.

[asbates]

I would consider having the progress bars CSS as the following.

• Add border radius to right side of unfiltered bar to match the left side
• Use variables where possible to maintain user theme if they have one set. (var(--color, othercolor) will use --color if available, otherwise othercolor.
• Instead of built in css lightblue, use Shiny's default primary color to better match theme.

.progress-bar.state-count-bar-filtered {
  background-color: var(--bs-primary, rgb(51, 122, 183));
  opacity: 0.8;
  color: var(--bs-body-color, var(--dark, #333333));
  overflow: visible;
  text-align: left;
  white-space: nowrap;
}

.progress-bar.state-count-bar-unfiltered {
  background-color: var(--bs-primary, rgb(51, 122, 183));
  opacity: 0.439;
  border-top-right-radius: var(--bs-border-radius, .375rem);
  border-bottom-right-radius: var(--bs-border-radius, .375rem);
}

[donyunardi]

Thanks for working on this @gogonzo. I think this is looking great already. The js handler solution works great on addressing our reactive cycle issue.

@lcd2yyz
Could you please look at this PR, specifically the progress bar?

[gogonzo]

@asbates do you know how to apply alpha/opacity to the background only? Opacity affects text and background in the same time which means that it could be barely visible,

Suggested change

	.progress-bar.state-count-bar-filtered {
	background-color: lightblue !important;
	color: var(--bs-body-color, var(--dark, #333333));
	overflow: visible;
	text-align: left;
	white-space: nowrap;
	}
	.progress-bar.state-count-bar-unfiltered {
	background-color: rgba(173, 216, 230, 0.439) !important;
	}
	.progress-bar.state-count-bar-filtered {
	background-color: var(--bs-primary, rgb(51, 122, 183));
	opacity: 0.8;
	color: var(--bs-body-color, var(--dark, #333333));
	overflow: visible;
	text-align: left;
	white-space: nowrap;
	}
	.progress-bar.state-count-bar-unfiltered {
	background-color: var(--bs-primary, rgb(51, 122, 183));
	opacity: 0.439;
	border-top-right-radius: var(--bs-border-radius, .375rem);
	border-bottom-right-radius: var(--bs-border-radius, .375rem);
	}

[asbates]

I do not. Bootstrap uses hex for color variables and as of now there isn't a way to add alpha to an existing hex color. (apparently this is in the works). So setting opacity on the whole bars is probably not the way to go. The text looked light to me but I wanted to bring it up just in case it was just me.

[mhallal1]

Issue created while reviewing this: #203

[mhallal1]

Tested locally and on BEE with multiple apps and conditions.
Works as expected.

[gogonzo]

After addressing all comments from @chlebowa and @BLAZEWIM I'm using @mhallal1 approval. If you still see the room for improvement please create an issue 👍