Opened 8 years ago

Closed 7 years ago

## #5451 closed defect (fixed)

# graphs overlap wrongly if browser window is too narrow

Reported by: | arma | Owned by: | hellais |
---|---|---|---|

Priority: | Medium | Milestone: | |

Component: | Metrics/Relay Search | Version: | |

Severity: | Keywords: | ||

Cc: | Actual Points: | ||

Parent ID: | Points: | ||

Reviewer: | Sponsor: |

### Description

Go to e.g. https://atlas.torproject.org/#details/9695DFC35FFEB861329B9F1AB04C46397020CE31 and then make your browser window narrower. The first bug is that it cuts off the numbers on the y-axis of the left-hand graphs. As it gets narrower still, the graphs pop over each other, making it hard to read.

I'm not sure what the better behavior should be, but it's probably not this.

## Child Tickets

### Change History (9)

### comment:1 follow-up: 2 Changed 7 years ago by

### comment:2 follow-up: 3 Changed 7 years ago by

Replying to karsten:

I wonder if we can use Bootstrap's Tabs (or "Pills") to avoid this problem. There would be a single graph with 6 buttons "3 days", "1 week", ... for users to select.

That alone will have the same problem, since the problem is not the vertical overlapping, but the horizontal overlap. If we want to keep 2 graphs per line we must make the graphs resize when the windows is scaled, otherwise we could make just one graph per line, perhaps with bootstrap's tabs.

I think the graph resizing is the most elegant solution and that could be in place with the new graphs that are being developed by Walter.

### comment:3 follow-up: 4 Changed 7 years ago by

Replying to hellais:

That alone will have the same problem, since the problem is not the vertical overlapping, but the horizontal overlap. If we want to keep 2 graphs per line we must make the graphs resize when the windows is scaled, otherwise we could make just one graph per line, perhaps with bootstrap's tabs.

I was thinking 1 graph per line. Right now, there would be just a single graph per relay for bandwidth histories. With a weights graph added there would be two graphs in total per relay.

Do you happen to know how to apply bootstrap's tabs here? I ran into problems with the added `#`

anchors on the page, because Atlas uses the URL part after `#`

to locally decide which relay documents to fetch. I guess I could implement tabs once I have a running example somewhere.

I think the graph resizing is the most elegant solution and that could be in place with the new graphs that are being developed by Walter.

We could do that, too. My guess is that this will take somewhat longer to implement and deploy, so I'd want to go with the tabs solution above, assuming that it's easy to implement. We can always switch to a different graphing engine later.

### comment:4 follow-up: 5 Changed 7 years ago by

Replying to karsten:

Replying to hellais:

That alone will have the same problem, since the problem is not the vertical overlapping, but the horizontal overlap. If we want to keep 2 graphs per line we must make the graphs resize when the windows is scaled, otherwise we could make just one graph per line, perhaps with bootstrap's tabs.

I was thinking 1 graph per line. Right now, there would be just a single graph per relay for bandwidth histories. With a weights graph added there would be two graphs in total per relay.

But if we are going to go for one graph per line, why do we need the tabs?

Can't we just have them appear as they are now, but one per line?

### comment:5 follow-up: 6 Changed 7 years ago by

Replying to hellais:

But if we are going to go for one graph per line, why do we need the tabs?

Can't we just have them appear as they are now, but one per line?

That means we'll have six lines with bandwidth graphs, plus another six for weights graphs soon (#5755). That works, but it's not very usable.

Of course, we could start with six lines for now to fix the graph overlap problem and think about tabs later. Shall we do that?

### comment:6 Changed 7 years ago by

Replying to karsten:

Replying to hellais:

But if we are going to go for one graph per line, why do we need the tabs?

Can't we just have them appear as they are now, but one per line?

That means we'll have six lines with bandwidth graphs, plus another six for weights graphs soon (#5755). That works, but it's not very usable.

Of course, we could start with six lines for now to fix the graph overlap problem and think about tabs later. Shall we do that?

I think scrolling down is more usable than clicking on tabs though.

Also we can provide this quick fix and then think of improving usability in however way we think is better.

### comment:8 Changed 7 years ago by

Status: | new → needs_review |
---|

Replying to karsten:

Okay, let's do it. :)

This has been implemented in 68f2ec8d958c65ebe77070f8e852b06b304cf215.

### comment:9 Changed 7 years ago by

Resolution: | → fixed |
---|---|

Status: | needs_review → closed |

Thanks! Should be fine to close this ticket then. I added a comment to #6361 about using Bootstrap's Tabs or Pills to merge the six graphs into one. Closing.

**Note:**See TracTickets for help on using tickets.

I wonder if we can use Bootstrap's Tabs (or "Pills") to avoid this problem. There would be a single graph with 6 buttons "3 days", "1 week", ... for users to select.