Highlight Button(s) Based on Selected Time

[jburgess]

Once a button is clicked it is hard to recall which button was selected after the button loses focus.

@WilliamVenner what are your thoughts on adding a feature to highlight or change a button or list item's appearance based on the selected time?

I can see this being implemented a few different ways:

1. Highlight a button/item if the item's range overlaps the currently selected time (this overlap could be to and from or to or from). This best matches my use case and allows the user to see all items which are contained in the selected range. However, this may be confusing if there are buttons with overlapping times.
2. Highlight the item if the item's to/from equals the selected time range to/from.
3. Highlight the button/item after it is selected until the time range changes. This seems fragile.

[WilliamVenner]

I think 2 is definitely the best option here. It will prevent any potential confusion.

I am very much in support of this, it will improve the user experience. Luckily the plugin repo update hasn't been merged yet, so we've definitely still got a window to implement it.

[jburgess]

My preference is 1, but I can settle with 2. We are using all 3 button UI variants for the current behavior:

Button Picker State	UI Variant	UI Icon
Primary	Primary	clock-nine
Non-Primary	Secondary	clock-nine
Errors	Destructive	exclamation-triangle

IMHO the Primary color is more visually appealing to indicate the button's range is 'selected'. If you are OK with this change we can use an icon ('favorite'?) to represent 'primary'.

Ex.

[WilliamVenner]

Yeah I think the primary button is perfect. I think the "favorite" icon implies that it's "favorited" though, what icon pack is Grafana even using?

[jburgess]

Looks like Grafana uses a subset of Font Awesome. Available icons are here.

[WilliamVenner]

Thanks, how about clock-nine for inactive buttons and forward for active buttons?

[jburgess]

I think the forward icon represents a fast forward or advancement of time; hence I chose the single arrow (angle-right). In the image above I used the following:

Button Picker State	UI Variant	UI Icon
'Selected'	Primary	angle-right
Primary	Secondary	favorite
Non-Primary	Secondary	clock-nine
Errors	Destructive	exclamation-triangle

We need an icon for the 'Primary'. How about star or bolt?

[WilliamVenner]

Apologies, I misunderstood what you meant by primary. And I agree angle-right is a better choice. Go for star!

[jburgess]

OK. Great. One last question. What should the appearance be if the button is both 'selected' and 'primary'? My preference is option 1. After looking at these rendered with the different states I think the icon for the selected is redundant and the 'primary' UI Variant is enough to indicate 'selected'.

1. Use the same icon for primary regardless if it is selected or not. Remove the angle-right icon.

2. Use the same icon for primary regardless if it is selected or not.

3. Change the icon to the 'selected' icon

[WilliamVenner]

I think 3. It's imperative to user experience that they know which button is active.

[jburgess]

My only issue with 3 is that there would be no indication that a 'selected' item is also 'primary'. I think the blue background indicates the item is selected. Is this not enough?

[WilliamVenner]

Maybe selected buttons could have an additional shadow in their background color?

[jburgess]

I don't think there are any additional style choices if we want to stay within the Grafana UI framework. IMO 1 represents the different states in a concise and clean manner.

[WilliamVenner]

Ok sure let's go for 1.

[baur]

@WilliamVenner @jburgess Highlight Button(s) Based on Selected Time not works with this data, it's related to Unix time (millisecond), I'm using this because Grafana uses milliseconds

select 1609437600000 as time_from,1617213599999 as time_to,'1 кврт. 2021' as button_text
union all select 1617213600000,1625075999999,'2 кврт. 2021'
union all select 1625076000000,1633024799999,'3 кврт. 2021'
union all select 1633024800000,1640973599999,'4 кврт. 2021'
union all select 1612116000000,1614535199999,'2021 Февраль'
union all select 1614535200000,1617213599999,'2021 Март'
union all select 1617213600000,1619805599999,'2021 Апрель'
union all select 1619805600000,1622483999999,'2021 Май'

[AndreaBPrIt]

sorry, this plugin is saving my life !! thanks

but, how can I set the color for the last pressed button ?

thanks and sorry for the probably stupid question... Andrea from italy