Horizontal radio buttons #13374

mromanie · 2019-02-06T08:22:02Z

PR Summary

Add the option to have horizontal RadioButtons. A new optional keyword argument 'direction' is introduced to control it. The new parameter defaults to 'vertical' for backwards compatibility.

PR Checklist

Has Pytest style unit tests
Code is Flake 8 compliant
New features are documented, with examples if plot related
Documentation is sphinx and numpydoc compliant
Added an entry to doc/users/next_whats_new/ if major new feature (follow instructions in README.rst there)
Documented in doc/api/api_changes.rst if API changed in a backward-incompatible way

lib/matplotlib/widgets.py

jklymak · 2019-02-06T23:39:24Z

flake8 needs to pass 😉 https://travis-ci.org/matplotlib/matplotlib/jobs/489577517

NelleV

Thanks for the PR @mromanie !
Here are a couple of comments. I'll do a more thorough review once these are addressed.

Can you in addition add a what's new entry? See doc/users/next_whats_new/README.rst

NelleV · 2019-02-06T23:40:55Z

lib/matplotlib/widgets.py

        """
+        if orientation not in ['vertical', 'horizontal']:
+            raise ValueError("Invalid RadioButton orientation: %s" % orientation)


Can you add what are the possible values here?
Can you also add a mock test to make sure it runs, as well as a test to make sure this exception is raised properly.

I also think we need to update the examples to show case this (examples/widgets/radio_buttons.py)

We have a shortcut function to check options like this and raise an appropriate error now, cbook._check_in_list

NelleV · 2019-02-06T23:42:09Z

lib/matplotlib/widgets.py

@@ -1007,7 +1007,12 @@ def __init__(self, ax, labels, active=0, activecolor='blue'):
            The index of the initially selected button.
        activecolor : color
            The color of the selected button.
+        orientation : str
+            The orientation of the buttons: 'vertical' (default), or 'horizontal'.


The keyword being a bit confusing here, I think it's worth detailing a bit more what orientation means (which is the set of radio buttons are on the same horizontal axis or vertical axis).

NelleV · 2019-02-06T23:44:24Z

For the failing flake8 test, I would suggest adding the check directly to your text editor.

timhoffm · 2019-02-16T20:00:38Z

Milestoning 3.2 as there has not been activity recently. @mromanie are you still interested to work on this?

mromanie · 2019-02-17T17:43:09Z

@timhoffm Apologies for my inactivity. I am indeed still very much interested in working on this. In fact, I think I managed to do it properly by using patches.Ellipse instead of patches.Circle and stretching them to look circular using the aspects of the axes and figure. In this way, the entire surface of the buttons is sensitive, unlike the current implementation with patches.Circle.

I still need to clean up the auto-scaling of the size of the symbols, which at the moment still results in the symbols to overlap under certain circumstances, and I'll submit the whole lot for review. Shall I use the same PR for this?

ImportanceOfBeingErnest · 2019-02-17T19:38:21Z

What about using a PathCollection with a circle marker, such that cicles always stay circles independent on the figure- or axes- dimension or aspect?

mromanie · 2019-02-17T20:18:23Z

@ImportanceOfBeingErnest I'm not familiar with PathCollection, so I don't know what are the advantages/disadvantages. The gist of what I have implemented is as follows, which seems to do a reasonable job:

fig = ax.get_figure()
fh, fw = fig.get_figheight(), fig.get_figwidth()
rpos = ax.get_position().get_points()
rscale = (rpos[:,0].ptp() / rpos[:,1].ptp()) * (fw / fh)
circle_radius = 0.25
p = Ellipse(xy=(0.15, y), width=circle_radius, height=circle_radius*rscale, edgecolor='black', facecolor=facecolor, transform=ax.transAxes)

Plus a couple more things to make it backwards compatible. Like I said earlier, setting circle_radius to a fixed value is not always satisfactory and I' fine-tuning it.

mromanie · 2019-02-17T21:12:04Z

...forgot to say, the condition to activate the Ellipse button is:

((xy[0] - p.get_center()[0])/p.width)**2 + ((xy[1] - p.get_center()[1])/p.height)**2 <= 1

ImportanceOfBeingErnest · 2019-02-17T21:21:28Z

If you plot a scatter plot with circular markers (marker="o") you may have noticed that those markers will stay circles even if you resize the figure, change the aspect or zoom into the plot. This is achieved inside the PathCollection by defining the circle path in display coordinates and using an offset transform to shift those circles at the respective positions in data coordinates. I would think the same can be done here. The advantage compared to the strategy above would be that the bullets will keep their size when resizing the figure after it has first appeared on screen.
In addition, checking the clicks on the bullets could be simplified by using a pick_event.

mromanie · 2019-02-18T09:54:23Z

OK, thanks!

All things considered, I would stick to the solution with Ellipse because:

Zooming is disabled for the axes containing the RadioButtons.
It is true that the Ellipse looses its circular shape when the entire window is resized, but I'm not sure that this is a problem.
The solution entails minimal changes wrt the current implementation.
It is straightforward to make it backwards-compatible by mimicking the current behaviour.

ImportanceOfBeingErnest · 2019-03-11T13:15:10Z

Not sure what the status is here. Since someone asked a question about horizontal buttons on stackoverflow, I thought it might be worth showing a solution over there: https://stackoverflow.com/questions/55095111/displaying-radio-buttons-horizontally-in-matplotlib/55102639#55102639

Of course this could also be used for this update.

QuLogic · 2020-10-03T03:47:15Z

This looks mostly done, but needs a rebase and a small tweak to the checks. The squashing is something that affects vertical buttons too, so could be a separate PR.

QuLogic · 2024-03-19T02:55:45Z

Selecting by closest button is now merged as #13268. Using a scatter plot to ensure circular buttons is merged as #24474.

I pushed a rebase, dropping the old changes, fixed the review comments and adding a test/what's new entry. I also modified the implementation a bit so that it modifies the placement of the buttons instead of reversing the labels (as the latter has ramifications for the active index.)

I'm also working on implementing the same change for CheckButtons.

QuLogic · 2024-03-19T03:22:41Z

An example of how this looks may be found in the what's new entry: https://output.circle-artifacts.com/output/job/26b48f05-0be7-417a-b57e-305a60aa66b9/artifacts/0/doc/build/html/users/next_whats_new/widget_horizontal.html

timhoffm · 2024-08-21T18:25:56Z

doc/users/next_whats_new/widget_horizontal.rst

+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The `.RadioButtons` widget's primary layout direction may now be specified with
+the *orientation* keyword argument:


Is orientation the right name? I know we use it in some places, but more in the sense of rotation than arrangement.

Possible alternatives: arrangement, direction, layout, ...

We use orientation for direction of grouped things in boxplot (and internally in bars)
https://matplotlib.org/devdocs/users/next_whats_new/boxplot_orientation.html

Boxplot is a counter example. There (as well as bar) it's associated with the rotation of the box = direction of the whiskers. "Vertical" means the distribution is along the y axis and multiple boxes are arranged side-by-side horizontally.

In contrast, here "vertical" would mean multiple radio buttons are arranged stacked vertically.

Yeah, I'd say "pack_direction" or "layout_direction". This isn't going to be a heavily used kwarg, so we can be verbose.

"layout_direction" sounds good.

With respect to #27946 (comment), is that something we want to use orientation for (giving that this change would be moving toward layout_direction)?

Do you mean text above or to the side of the button? I would not make this configurable but always put the text to the side. This is marginally more work, but the standard look and feel of radio buttons. If we want to add the horizontal layout, IMHO we have to do it properly.

A new optional keyword argument 'layout_direction' is introduced to control it. The new parameter defaults to 'vertical' for backwards compatibility.

rbroders · 2025-03-12T00:09:45Z

Are you guys still working on this? Its been 5 years for what seems like a trivial (but very useful) feature

doronbehar · 2025-03-12T07:55:14Z

I'm using this patch locally and it has been working fine for me for a while now.

mromanie · 2025-03-12T12:23:02Z

Yeah, sorry: I originated this and then overlooked to complete it. Anything I should do now? Thanks! Ciao, Martino -- Due to my own family/work balance, you may receive emails from me outside of normal working hours. I do not expect a response from you outside of your own working pattern, nor do I expect an immediate response when you are working. From: Doron Behar ***@***.***> Reply to: matplotlib/matplotlib ***@***.***> Date: Wednesday, 12. March 2025 at 08:56 To: matplotlib/matplotlib ***@***.***> Cc: Martino Romaniello ***@***.***>, Mention ***@***.***> Subject: Re: [matplotlib/matplotlib] Horizontal radio buttons (#13374) This email was sent from outside of ESO from the address ***@***.***. If it looks suspicious, please report it to ***@***.*** I'm using this patch locally and it has been working fine for me for a while now. — Reply to this email directly, view it on GitHub<#13374 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AE5K2YYOOHOR4BRYUT6QMVD2T7R7RAVCNFSM6AAAAABY2HAI2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DCNBXGI>. You are receiving this because you were mentioned.Message ID: ***@***.***> [Image removed by sender. doronbehar]doronbehar left a comment (matplotlib/matplotlib#13374)<#13374 (comment)> I'm using this patch locally and it has been working fine for me for a while now. — Reply to this email directly, view it on GitHub<#13374 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AE5K2YYOOHOR4BRYUT6QMVD2T7R7RAVCNFSM6AAAAABY2HAI2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DCNBXGI>. You are receiving this because you were mentioned.Message ID: ***@***.***>

timhoffm · 2025-03-12T13:38:04Z

lib/matplotlib/widgets.py

@@ -1593,9 +1594,16 @@ def __init__(self, ax, labels, active=0, activecolor=None, *,
                button.

            .. versionadded:: 3.7
+        layout_direction : {'vertical', 'horizontal'}
+            The orientation of the buttons: 'vertical' places buttons from top
+            to bottom, 'horizontal' places buttons from left to right.


Suggested change

to bottom, 'horizontal' places buttons from left to right.

to bottom, 'horizontal' places buttons from left to right, distributing

the buttons across the whole Axes. The Axes is divided into equal-sized

boxes, and each button is left-aligned in the box. There is currently no

size check with the associated labels, so that long labels may overlap

with the next box.

Sorry, I did not check what this actually does:

I strongly think we should follow standard conventions that labels are right of the button not above, because I consider the unusual layout a UX issue. See also #27946 (comment).

timhoffm · 2025-03-12T17:02:36Z

lib/matplotlib/widgets.py

+            The orientation of the buttons: 'vertical' places buttons from top
+            to bottom, 'horizontal' places buttons from left to right.
+
+            .. versionadded:: 3.10


Suggested change

.. versionadded:: 3.10

.. versionadded:: 3.11

timhoffm reviewed Feb 6, 2019

View reviewed changes

lib/matplotlib/widgets.py Outdated Show resolved Hide resolved

NelleV reviewed Feb 6, 2019

View reviewed changes

anntzer added the topic: widgets/UI label Feb 7, 2019

timhoffm added this to the v3.2.0 milestone Feb 16, 2019

dstansby added the New feature label Aug 27, 2019

tacaswell modified the milestones: v3.2.0, v3.3.0 Sep 5, 2019

QuLogic modified the milestones: v3.3.0, v3.4.0 Apr 30, 2020

QuLogic modified the milestones: v3.4.0, v3.5.0 Jan 27, 2021

jklymak added the status: needs rebase label May 8, 2021

jklymak marked this pull request as draft May 8, 2021 17:07

jklymak added the status: orphaned PR label May 8, 2021

QuLogic modified the milestones: v3.5.0, v3.6.0 Aug 18, 2021

timhoffm modified the milestones: v3.6.0, unassigned Apr 30, 2022

story645 removed this from the unassigned milestone Oct 6, 2022

story645 added this to the needs sorting milestone Oct 6, 2022

QuLogic force-pushed the horizontalRadioButtons branch from d6c2cbe to 8ea3641 Compare March 19, 2024 02:54

github-actions bot removed the status: needs rebase label Mar 19, 2024

QuLogic force-pushed the horizontalRadioButtons branch from 8ea3641 to 035517e Compare March 19, 2024 02:57

QuLogic marked this pull request as ready for review March 19, 2024 03:22

QuLogic removed the status: orphaned PR label Mar 19, 2024

QuLogic mentioned this pull request Mar 19, 2024

Add support for horizontal CheckButtons #27946

Open

3 tasks

QuLogic force-pushed the horizontalRadioButtons branch from 035517e to f76df0a Compare May 17, 2024 20:25

QuLogic modified the milestones: future releases, v3.10.0 May 17, 2024

timhoffm reviewed Aug 21, 2024

View reviewed changes

Add possibility to have horizontal RadioButtons

b82537a

A new optional keyword argument 'layout_direction' is introduced to control it. The new parameter defaults to 'vertical' for backwards compatibility.

QuLogic force-pushed the horizontalRadioButtons branch from f76df0a to b82537a Compare August 21, 2024 22:08

QuLogic modified the milestones: v3.10.0, v3.11.0 Oct 9, 2024

timhoffm reviewed Mar 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Horizontal radio buttons #13374

Horizontal radio buttons #13374

mromanie commented Feb 6, 2019

jklymak commented Feb 6, 2019 •

edited

Loading

NelleV left a comment

NelleV Feb 6, 2019

QuLogic Jul 25, 2019

NelleV Feb 6, 2019

NelleV commented Feb 6, 2019

timhoffm commented Feb 16, 2019

mromanie commented Feb 17, 2019

ImportanceOfBeingErnest commented Feb 17, 2019

mromanie commented Feb 17, 2019 •

edited

Loading

mromanie commented Feb 17, 2019

ImportanceOfBeingErnest commented Feb 17, 2019

mromanie commented Feb 18, 2019

ImportanceOfBeingErnest commented Mar 11, 2019

QuLogic commented Oct 3, 2020

QuLogic commented Mar 19, 2024

QuLogic commented Mar 19, 2024

timhoffm Aug 21, 2024

story645 Aug 21, 2024

timhoffm Aug 21, 2024

jklymak Aug 21, 2024

timhoffm Aug 21, 2024

QuLogic Aug 21, 2024

timhoffm Aug 22, 2024

rbroders commented Mar 12, 2025

doronbehar commented Mar 12, 2025

mromanie commented Mar 12, 2025 via email

timhoffm Mar 12, 2025 •

edited

Loading

timhoffm Mar 12, 2025

timhoffm Mar 12, 2025

-            to bottom, 'horizontal' places buttons from left to right.
+            to bottom, 'horizontal' places buttons from left to right, distributing
+            the buttons across the whole Axes. The Axes is divided into equal-sized
+            boxes, and each button is left-aligned in the box. There is currently no
+            size check with the associated labels, so that long labels may overlap
+            with the next box.

Horizontal radio buttons #13374

Are you sure you want to change the base?

Horizontal radio buttons #13374

Conversation

mromanie commented Feb 6, 2019

PR Summary

PR Checklist

jklymak commented Feb 6, 2019 • edited Loading

NelleV left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NelleV commented Feb 6, 2019

timhoffm commented Feb 16, 2019

mromanie commented Feb 17, 2019

ImportanceOfBeingErnest commented Feb 17, 2019

mromanie commented Feb 17, 2019 • edited Loading

mromanie commented Feb 17, 2019

ImportanceOfBeingErnest commented Feb 17, 2019

mromanie commented Feb 18, 2019

ImportanceOfBeingErnest commented Mar 11, 2019

QuLogic commented Oct 3, 2020

QuLogic commented Mar 19, 2024

QuLogic commented Mar 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rbroders commented Mar 12, 2025

doronbehar commented Mar 12, 2025

mromanie commented Mar 12, 2025 via email

timhoffm Mar 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jklymak commented Feb 6, 2019 •

edited

Loading

mromanie commented Feb 17, 2019 •

edited

Loading

timhoffm Mar 12, 2025 •

edited

Loading