738333 - Improve layout of filter panel

Status: RESOLVED FIXED

(Tree Management Graveyard :: OrangeFactor, defect)

Description

[Mark Côté [:mcote]]

The filter panel on the Orange Factor, Bug Count, and Bug Distribution is not great. The main problem is that it takes up a lot of vertical space, reducing the space available for the main graph, which is the most important aspect of the pages.

For starters, the panel should be hidden by default (i.e. if no filters are applied). A button can open it, and it should stay open once the page is reloaded with filtered data (so we can see what is being filtered). We could refine this further by collapsing the include and exclude filter portions when they aren't used, since typically a user will use one or the other (though it is possible to use both).

A bigger goal would be to reduce the space that the filters take when they are all displayed. Perhaps we could move it to the side, or reduce the font size a bit, or something. I'm not sure about this, exactly.

Comment 1

[Rohan]

Attachment: This is just a sample and a very small patch of the change that i made to the UI just to indicate what i had in mind, kindly just look at the button and let me know if such a sidebar is fine.

Just have a look at the UI button, thats it. I just quickly made it. I am yet to define the onclick. Just to make sure we are on the same track.

Comment 2

[Harshank]

Attachment: Hey i just played around with the UI stuff.Hope it looks well or tell me if there is any modification needed :)

Comment 3

[Mark Côté [:mcote]]

Okay those are interesting ideas. I like the second one best. But I think that it is important to keep the filter controls always visible when there are filters applied. This makes it obvious what the filtered values mean. So an overlay won't work, because it obscures the graph when it is shown.

So I think I'll change the idea of this bug a bit and actually make it a bit simpler. Instead of having the filter controls be hide-able, can you just move them to the left of the graph? You can shrink the width of the text inputs (they could be half the size, or even a quarter) and the font size of all the controls so that it doesn't take up too much size. Then you can increase the vertical size of the graph, so that it is more prominent, which is the main goal of this bug (while keeping it clear when, and what, filters are applied).

I won't go over your patches line by line yet. When you have something as I've described above, you can submit another patch (just mark the previous patches as obsolete). Thanks!

Comment 4

[Mark Côté [:mcote]]

Haven't heard back in a long time, so unassigning this.

Comment 5

[hello]

I'm new to contributing to Mozilla and would love to try help out with this bug.

Comment 6

[Mark Côté [:mcote]]

Great!  Since this probably requires changes just to the front end, you can check out the code (http://hg.mozilla.org/automation/orangefactor) and just load html/index.html.  See README.txt for more.

If you need help or advice, I and other OrangeFactor developers hang out in #ateam on irc.mozilla.org.

Comment 7

[hello]

Thanks Mark!

I'll pull the code and work on it. Will keep you updated.

Comment 8

[hello]

Attachment: Proposed patch for filter layout, with filters moved to the left of the graph.

Comment 9

[Mark Côté [:mcote]]

Attachment: Proposed patch for filter layout, with filters moved to the left of the graph. (unbitrotted)

Thanks for the patch!  I committed a big code-formatting patch a couple days ago, which broke your patch, but I cleaned it up and am reattaching it (plus I believe you forgot a '</form>', which I added).

I tried it out and it works great.  It is an improvement in screen real estate, but, as I feared, it looks kind of squished.  I'm going to think about it a bit more, but if you're willing to keep at this bug, I'll use you to prototype some more ideas. :)

Comment 10

[Mark Côté [:mcote]]

Comment on attachment 738612 [details] [diff] [review]
Proposed patch for filter layout, with filters moved to the left of the graph. (unbitrotted)

Review of attachment 738612 [details] [diff] [review]:
-----------------------------------------------------------------

The patch looks great as it is, but one tiny change I'd like is to make the three different filter types (the dropdowns, the include filter, and the exclude filter) stand out a little.  Probably easiest to just put them in divs with small margins and change the background colour to something a bit lighter.  Hope that makes sense..  You can create a new patch for that on top of the old one.  Or I can just do it myself when I commit your patch, since it's simple.

With that change I'd be happy to deploy this.  We can continue to work on improvements if you're willing!  Thanks so much for your help!

Comment 11

[Mark Côté [:mcote]]

Also [e-mail], feel free to assign this bug to yourself.

Comment 12

[Mark Côté [:mcote]]

What do you think of the new look, edmorley?

Comment 13

[Ed Morley [:emorley]]

Comment on attachment 738612 [details] [diff] [review]
Proposed patch for filter layout, with filters moved to the left of the graph. (unbitrotted)

lgtm :-)

The only additional change we could make is to move the "Exclude resolved bugs" and "Exclude disabled bugs" checkboxes away from the two filter fields, since they're actually independent of them. Don't mind whether that happens here or in another bug.

Comment 14

[Mark Côté [:mcote]]

Attachment: Cleanup of some views, highlight background of individual filters

Okay this changes the background of each set of filter controls (include, exclude, plus any view-specific ones).  I also noticed that some views weren't displaying properly, so I fixed that.  Please play around a bit and make sure I didn't miss anything else.

This should be applied on top of the other patch.

Comment 15

[Ed Morley [:emorley]]

Comment on attachment 744820 [details] [diff] [review]
Cleanup of some views, highlight background of individual filters

Like the style changes, really helps with the UX IMO.

Spotted a couple of things:
1) Switching from "quicksearch" to "ID" results in an input field that's a 'tad' wide.
2) Changing options in some of the dropdowns (eg testsuite) results in a full page reload, even before you'd set other options and clicked apply.
3) With the new style changes, I think we should definitely split out the unrelated checkboxes (comment 13), since the the new background shading emphasises the (incorrect) association even more than before.

Comment 16

[Mark Côté [:mcote]]

Attachment: Cleanup of some views, highlight background of individual filters

Okay, addressed all three issues in this patch.  Also cleaned up the crazy code that builds those platform/test suite/build type options. :)

Comment 17

[Mark Côté [:mcote]]

Removing mentor flags, since we're just about done here.  Will still commit the original patch under the contributor's address.

Comment 18

[Ed Morley [:emorley]]

Comment on attachment 746045 [details] [diff] [review]
Cleanup of some views, highlight background of individual filters

Unfortunately the platform/testsuite dropdowns no longer work. ie: choose item, hit apply, page reloads with same results table & dropdowns reset to 'All'.

Liking the rest of the changes though :-D

Comment 19

[Mark Côté [:mcote]]

Attachment: Cleanup of some views, highlight background of individual filters, v3

Sorry about that, must have had old stuff in my cache while I was testing.  Seems the problem was how we treat the default value of the "display" argument.  Another opportunity for cleanup, at least. :)

Comment 20

[Ed Morley [:emorley]]

Comment on attachment 746406 [details] [diff] [review]
Cleanup of some views, highlight background of individual filters, v3

Looks great & works nicely from what I can tell from local testing :-)

Thank you for doing this!

Comment 21

[Mark Côté [:mcote]]

Attachment: Remove filter width definition in order to properly contain input fields

Looks like, depending on font size, the text-entry boxes can bleed over onto the graph.  I believe the width definition for the filter box is unnecessary, and removing it fixes the problem while keeping it roughly the same on my display here.

Comment 22

[Mark Côté [:mcote]]

Pushed and deployed.

http://hg.mozilla.org/automation/orangefactor/rev/e1d1db2ebb59
http://hg.mozilla.org/automation/orangefactor/rev/58f5e08b2dfd
http://hg.mozilla.org/automation/orangefactor/rev/58437f4c3f1b