Bug 1014571 - [UX] user can barely select time range on metric graph image
[UX] user can barely select time range on metric graph image
Product: JBoss Operations Network
Classification: JBoss
Component: UI, Usability (Show other bugs)
JON 3.2
Unspecified Unspecified
unspecified Severity medium
: DR01
: JON 3.2.1
Assigned To: Mike Thompson
Mike Foley
: Triaged, UserExperience
Depends On:
  Show dependency treegraph
Reported: 2013-10-02 07:05 EDT by Libor Zoubek
Modified: 2015-11-01 19:43 EST (History)
7 users (show)

See Also:
Fixed In Version:
Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of:
Last Closed: 2014-05-08 13:43:40 EDT
Type: Bug
Regression: ---
Mount Type: ---
Documentation: ---
Verified Versions:
Category: ---
oVirt Team: ---
RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: ---

Attachments (Terms of Use)
X-Axis Drag Selection Movie (5.49 MB, video/quicktime)
2014-02-04 13:13 EST, Mike Thompson
no flags Details

  None (edit)
Description Libor Zoubek 2013-10-02 07:05:04 EDT
Description of problem: I have usability issue with current metric graph implementation. Though I am able to select time range it terms of "Last xxx {m/h}" When I look at graph of particular metric and became interested in detailed data, it is hard to select time range.

This is because mouse arrow changes to "cross" arrow only when I hover non-data part of graph. Otherwise it's just mouse arrow which does not allow be selecting time range. When I am hovering data column, I'd like to start selection right from that value no matter if including/excluding current column (though including would make more sense for me).

Version-Release number of selected component (if applicable):
JON 3.2.0.ER2

How reproducible: always

Steps to Reproduce:
1. have a metric with some data, open it's graph
2. try roughly select some sub-interval of your current time range

Actual results: unless you are lucky and start your selection *exactly* between 2 data columns you are not able to select time range

Expected results: User should be able to select time range starting on any place on graph

Additional info:
Comment 1 Mike Thompson 2013-10-03 10:13:24 EDT
I discussed this in some of our morning meetings. There is a conflict between hovers and zooming; they both compete for the same events on the same real estate (svg boxes). The issue behind this are that js events need objects to bind with via mouseover/mouseout. There are two objects here: 1) the svg bar in the bar chart and 2) the background svg box that covers the whole chart.

Currently, the the background box has zoom events attached to it and the foreground bars have the hover events attached to them. The effect is when you hover between the bars the cursor changes because we are on the background.

The issue is the hovers and zoom areas compete for binding on the same objects. If we didn't have hovers this would not be an issue.

I have spent much time on this before but can revisit it again with fresh eyes if need be.

One solution would be to increase the distance between the bars that would give more area to select the zoom. The bars would get a little narrower with this approach.
Comment 2 Alan Santos 2013-10-03 10:52:51 EDT
(In reply to Mike Thompson from comment #1)

If the two are incompatible then I'd suggest removing the gray bars and indicating that the resource was unavailable in some other manner. 

A user can probably make the correlation -or easily be led to understand - by contrasting the graph data with the availability data above.  

Another option may be to highlight the time axis differently if the resource was unavailable at that time in question.
Comment 4 Catherine Robson 2013-10-04 14:26:37 EDT
Mike - 

As discussed, we have two options to consider for making this easier for users to work with:

Option 1 (preferred solution if feasible):
- Use an on-click event on the bar to act as a zoom/time selection action.  Even though users won't have the crosshair on the bar, they can click anywhere (on or off the bar) and start dragging the mouse across the chart to select a timeframe.

Option 2:
- This mostly becomes an issue for users to work with in charts where the bars are taking up most of the vertical height and there is no white space to work with for clicking and dragging.  Therefore, we will add the ability to click and drag to select a timeframe to the x axis of the chart.  The following changes to the selection interaction and visuals will help provide affordances to users that they can use the x axis for selection:

    > The blue selection area background will extend down to the bottom of the x axis label area.  
    > The mouse will change to crosshairs on the x axis label area
Comment 5 Mike Thompson 2013-10-04 14:34:36 EDT
Option 1 is not feasible as the d3 library does the binding of events and lifecycle and provides the API to the developer:

.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend)

So, given this moving to option #2.
Comment 8 Mike Thompson 2014-02-04 11:03:56 EST
This is completed with option #2 above. I have added drag selection to the x-axis so when you drag over the time scale for selection instead of on the chart where selections became tricky.
I will let this sit for a couple days before committing to release branch.
Comment 9 Catherine Robson 2014-02-04 11:06:35 EST
Mike - is there a test system where we can see this and try it in action?
Comment 10 Mike Thompson 2014-02-04 13:13:25 EST
Created attachment 859274 [details]
X-Axis Drag Selection Movie
Comment 11 Mike Thompson 2014-02-04 13:14:59 EST
@crobson I have attached the video of the new x-axis drag selection addition.
Comment 12 Mike Thompson 2014-02-04 20:47:46 EST
Committed to master:

commit c118c27222ab96a7f7d5f639843de7ad01011c72
Author: Mike Thompson <mithomps@redhat.com>
Date:   Tue Feb 4 15:28:37 2014 -0800
Comment 13 Catherine Robson 2014-02-05 07:44:35 EST
Thanks for the video.  My only suggestion for improvement is that if possible, the highlight should show both above the x axis and below the x axis, regardless of where you clicked to select (above or below the axis).  This might help users 'see' that both are possible, a bit of an affordance so they know the x axis is draggable if they missed it initially.  Otherwise I think this looks great and will help in those cases where the graph is full and users have a hard time clicking to select above the x axis!
Comment 14 Mike Thompson 2014-02-05 13:17:54 EST
So I extended the selection from the x-axis to go up through the bars on the top like you mentioned however, that consumes the hover events so hovers go away. So it looks like we are stuck with the solution on the video.
Comment 16 Jirka Kremser 2014-02-10 12:02:52 EST
reviewed and cherry-picked over to the release branch

branch:  release/jon3.2.x
link:    http://git.fedorahosted.org/cgit/rhq/rhq.git/commit/?id=433d661bf
time:    2014-02-10 17:58:40 +0100
commit:  433d661bfc40bd85c47d7fff2f36bf367f544a3d
author:  Mike Thompson - mithomps@redhat.com
message: [BZ 1014571] UX on selecting  graph subselection via dragging. Add the
         drag selection to the x-axis.
Comment 17 Simeon Pinder 2014-02-18 10:08:12 EST
Moving to ON_QA as available for testing in the following brew build:

Note: the installed version is still JON 3.2.0.GA by design and this represents part of the payload for JON 3.2.1 also known as cumulative patch 1 for 3.2.0.GA.  How this will be delivered to customers is still being discussed.
Comment 18 Mike Foley 2014-02-18 14:33:32 EST
verified jon 3.2.1 DR1
Comment 19 Mike Foley 2014-05-08 13:43:40 EDT
JON 3.2.1 released week of 5/5/2014

Note You need to log in before you can comment on or make changes to this bug.